/* =====================================================================
   Cookie Policy Dialog
   ===================================================================== */

#cookieOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1029;
}

#cookieOverlay.cookie-overlay-visible {
    display: block;
}

#cookiePolicyDialog {
    display: none;
    position: fixed;
    bottom: -600px;
    left: 72px;
    width: 613px;
    max-height: calc(100vh - 40px);
    background-color: rgba(28, 28, 28, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
    transition: bottom 0.8s;
    z-index: 1031;
    border-radius: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#cookiePolicyDialog::-webkit-scrollbar {
    display: none;
}

.cookiePolicyConten {
    width: 100%;
    padding: 38px 60px 32px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cookieLayer {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cookieLayerContent {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Title */
.cookieTitle {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin: 0;
}

/* Body text */
.cookiePolicyConten p {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin: 0;
}

/* Inline text links (Manage Settings / Privacy Policy) */
.cookieInlineLink {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline;
    vertical-align: baseline;
}

.cookieInlineLink:hover {
    color: inherit;
    font-weight: 600;
}

/* Button row */
.cookiePolicyButtons {
    display: flex;
    gap: 12px;
    margin-left: auto;
    align-items: center;
}

/* Row wrappers inside layer 1 — transparent on desktop, structured on mobile */
.cookieBtnRow {
    display: contents; /* children flow directly into .cookiePolicyButtons on desktop */
}

.cookiePolicyButtons--settings {
    justify-content: space-between;
    margin-left: 0;
}

.cookieSettingsRightBtns {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Layer 1 — Accept All (outlined) */
.acceptCookiesButton {
    height: 40px;
    padding: 0 20px;
    border-radius: 0;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.acceptCookiesButton:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Layer 1 — Only Necessary / Manage Settings (no border, 60 % opacity) */
.onlyNecessaryButton,
.openCookieSettingsButton {
    height: 40px;
    padding: 0 20px;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.onlyNecessaryButton:hover,
.openCookieSettingsButton:hover {
    color: rgba(255, 255, 255, 1);
}

/* Layer 2 — Back (no border, 60 % opacity, no padding so text aligns with body text) */
.backButton {
    height: 40px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.backButton:hover {
    color: rgba(255, 255, 255, 1);
}

/* Layer 2 — Accept All (outlined) */
.settingsAcceptAllButton {
    height: 40px;
    padding: 0 20px;
    border-radius: 0;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.settingsAcceptAllButton:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Layer 2 — Save and Close (no border, 60 % opacity) */
.saveCookieSettingsButton {
    height: 40px;
    padding: 0 20px;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.saveCookieSettingsButton:hover {
    color: rgba(255, 255, 255, 1);
}

/* ── Accordion category list ───────────────────────────────────────── */
/*
 * Two-level grid:
 *   .cookieCategoryList  defines 3 columns with max-content for col 1.
 *   .cookieCategoryItem  spans all 3 columns and uses `grid-template-columns: subgrid`
 *                        so its children share the SAME column tracks as the parent.
 *
 * Result: the browser measures the widest col-1 child across all rows
 * ("Always Active" at SemiBold) once, and every title text starts at
 * that exact same x — no fixed px needed.
 */
.cookieCategoryList {
    display: grid;
    grid-template-columns: max-content 1fr auto;
    column-gap: 12px;
}

.cookieCategoryItem {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    align-items: center;
}

.cookieCategoryItem:last-child {
    border-bottom: none;
}

/* col 1: toggle switch or Always Active label */
.cookieToggleSwitch,
.cookieCategoryAlwaysActive {
    grid-column: 1;
    align-self: center;
}

.cookieToggleSwitch {
    margin: 12px 0;
}

.cookieCategoryAlwaysActive {
    padding: 12px 0;
}

/* col 2: title */
.cookieCategoryName {
    grid-column: 2;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
    padding: 12px 0;
    align-self: center;
}

/* col 3: +/− button */
.cookieCategoryToggleBtn {
    grid-column: 3;
    background: none;
    border: none;
    color: #FFF;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    font-weight: 300;
    align-self: center;
}

/* Always Active label */
.cookieCategoryAlwaysActive {
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Toggle switch */
.cookieToggleSwitch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 28px;
    cursor: pointer;
}

.cookieToggleSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cookieToggleSlider {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    transition: background-color 0.3s;
    display: flex;
    align-items: stretch;
    padding: 2px;
}

.cookieToggleSlider::before {
    content: '';
    width: 39px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 100px;
    transition: transform 0.3s;
}

.cookieToggleSwitch input:checked + .cookieToggleSlider {
    background-color: #EA5218;
}

.cookieToggleSwitch input:checked + .cookieToggleSlider::before {
    transform: translateX(21px);
}

/* Accordion description — col 2 of the subgrid, flush with title text */
.cookieCategoryDesc {
    grid-column: 2;
    grid-row: 2;
    padding-bottom: 12px;
}

.cookieCategoryDescInner {
    border-left: 2px solid rgba(255, 255, 255, 0.4);
    padding-left: 12px;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
}

/* ── Footer Cookie Settings button ─────────────────────────────────── */
.footer-cookie-settings-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--color-basic-white);
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    vertical-align: baseline;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

/* ≤ 1024 px: keep desktop positioning but cap to viewport */
@media (max-width: 1024px) {
    #cookiePolicyDialog {
        left: 72px;
        width: 613px;
        max-width: calc(100vw - 144px);
        bottom: -600px;
    }
}

/* ≤ 767 px: centre horizontally, avoid the 60 px mobile header */
@media (max-width: 767px) {
    #cookiePolicyDialog {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 40px);
        max-width: 613px;
        bottom: -600px;
        max-height: calc(100vh - 80px);
    }

    #cookiePolicyDialog.cookie-visible {
        bottom: 20px;
    }

    .cookiePolicyConten {
        padding: 30px 24px 24px 24px;
    }

    /*
     * Layer 1 buttons
     * .cookiePolicyButtons becomes a column flex container.
     * Each .cookieBtnRow is a row-flex container centred horizontally.
     * Row 1 (--primary):   [Accept All]              centred, natural width
     * Row 2 (--secondary): [Only Necessary] [Manage]  side-by-side, centred
     */
    #cookieLayer1 .cookiePolicyButtons {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
        width: 100%;
        gap: 8px;
    }

    #cookieLayer1 .cookieBtnRow {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    /*
     * Layer 2 buttons — Back | [Accept All] [Save and Close] must stay on one line.
     * flex-wrap: nowrap on the outer container + flex-shrink on children handles narrow screens.
     */
    #cookieLayer2 .cookiePolicyButtons--settings {
        flex-wrap: nowrap;
        margin-left: 0;
        width: 100%;
        gap: 8px;
    }

    #cookieLayer2 .backButton {
        flex-shrink: 0;
    }

    #cookieLayer2 .cookieSettingsRightBtns {
        flex-shrink: 0;
        gap: 8px;
    }
}