/* ธีมมืดของแบนเนอร์คุกกี้กลาง (web-consent.psu.ac.th) — ไลบรารีมีแต่สีสว่างและฉีด <style> ของตัวเองลง <head>
   ตอนเริ่มทำงาน (หลังไฟล์นี้) จึงต้องนำหน้าด้วย :root[data-theme="dark"] ให้ specificity ชนะ
   เกาะ data-theme ไม่ใช่ prefers-color-scheme เพราะธีมมาจากคุกกี้ EESTheme (ดู theme.css) */
:root[data-theme="dark"] {
    --psu-consent-gray-100: #2A313B;
    --psu-consent-gray-200: #363F4C;
    --psu-consent-gray-300: #4A5463;
    --psu-consent-gray-400: #8A95A5;
    --psu-consent-gray-500: #9AA5B4;
    --psu-consent-gray-600: #B3BDCB;
    --psu-consent-gray-800: #E5E9F0;
}

:root[data-theme="dark"] .psu-consent-banner,
:root[data-theme="dark"] .psu-consent-edit-button,
:root[data-theme="dark"] #psu-consent-modal-content {
    background-color: #1E242C;
    color: #E5E9F0;
}

:root[data-theme="dark"] .psu-consent-banner {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .psu-consent-banner p {
    color: #E5E9F0;
}

:root[data-theme="dark"] .psu-consent-accept-all:hover {
    background-color: transparent;
}

:root[data-theme="dark"] #psu-consent-modal-footer {
    background-color: #181D23;
}

:root[data-theme="dark"] #psu-consent-modal-body table,
:root[data-theme="dark"] #psu-consent-modal-body th,
:root[data-theme="dark"] #psu-consent-modal-body td {
    border-color: var(--psu-consent-gray-300);
}

/* ทั้งสองธีม: ไลบรารีไม่กำหนดขนาดตัวอักษรของหัวข้อหมวด (h3) จึงได้ขนาดหัวเรื่องของเว็บซึ่งใหญ่เกิน
   และตรึงความสูงตัวกล่องไว้ 80vh ทั้งที่เหลือแค่ 2 หมวด (ปิดหมวดวิเคราะห์/การตลาดไว้) กล่องจึงโล่งครึ่งจอ */
#psu-consent-modal .psu-consent-category-title {
    font-size: 1rem;
    line-height: 1.5;
}

#psu-consent-modal #psu-consent-modal-body {
    height: auto;
}