/*
 * DW Cookies — frontend styles
 * All colors use CSS custom properties (--dwc-*) injected by DWCookies_Consent::inject_css_vars().
 * Two banner layouts: bottom bar (.dwcookies-banner--bottom) and centered box (.dwcookies-banner--box).
 */

/* ------------------------------------------------------------------ */
/*  Overlay (behind banner and/or modal)                               */
/* ------------------------------------------------------------------ */

.dwcookies-overlay {
    position:       fixed;
    inset:          0;
    background:     var(--dwc-overlay-bg, rgba(0,0,0,0.55));
    z-index:        100000;
    display:        none;
}
.dwcookies-overlay--visible {
    display:        block;
}

/* ------------------------------------------------------------------ */
/*  Banner — shared base                                               */
/* ------------------------------------------------------------------ */

.dwcookies-banner {
    z-index:        100001;  /* above overlay */
    background:     var(--dwc-banner-bg, #1a1a1a);
    color:          var(--dwc-banner-text, #f0f0f0);
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:      14px;
    line-height:    1.5;
    display:        none; /* JS removes [hidden] to show */
}

.dwcookies-banner[hidden] {
    display:        none !important;
}

/* ------------------------------------------------------------------ */
/*  Banner — bottom bar layout                                         */
/* ------------------------------------------------------------------ */

.dwcookies-banner--bottom:not([hidden]) {
    display:        block;
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        16px 20px;
    box-shadow:     0 -2px 12px rgba(0,0,0,0.35);
}

.dwcookies-banner--bottom .dwcookies-banner__inner {
    max-width:      960px;
    margin:         0 auto;
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            12px;
}

/* ------------------------------------------------------------------ */
/*  Banner — centered box layout                                       */
/* ------------------------------------------------------------------ */

.dwcookies-banner--box:not([hidden]) {
    display:        flex;
    position:       fixed;
    inset:          0;
    align-items:    center;
    justify-content: center;
    padding:        20px;
    background:     transparent; /* box has its own background; outer is clear */
    pointer-events: none; /* let clicks through to overlay */
}

.dwcookies-banner--box .dwcookies-banner__inner {
    background:     var(--dwc-banner-bg, #1a1a1a);
    color:          var(--dwc-banner-text, #f0f0f0);
    border-radius:  10px;
    padding:        28px 28px 20px;
    max-width:      520px;
    width:          100%;
    box-shadow:     0 8px 32px rgba(0,0,0,0.35);
    display:        flex;
    flex-direction: column;
    gap:            16px;
    pointer-events: all;
}

.dwcookies-banner--box .dwcookies-banner__actions {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/*  Banner — bottom bar actions (inline row)                           */
/* ------------------------------------------------------------------ */

.dwcookies-banner--bottom .dwcookies-banner__text {
    flex:           1 1 300px;
    margin:         0;
}

.dwcookies-banner--bottom .dwcookies-banner__actions {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    flex-shrink:    0;
}

/* ------------------------------------------------------------------ */
/*  Links inside banner                                                */
/* ------------------------------------------------------------------ */

.dwcookies-banner__text a {
    color:          var(--dwc-link, #8ecfff);
    text-decoration: underline;
}
.dwcookies-banner__text a:hover {
    opacity:        0.85;
}

/* ------------------------------------------------------------------ */
/*  Buttons                                                            */
/* ------------------------------------------------------------------ */

.dwcookies-btn {
    cursor:         pointer;
    border:         none;
    border-radius:  4px;
    font-size:      13px;
    font-family:    inherit;
    font-weight:    600;
    padding:        8px 16px;
    line-height:    1;
    transition:     background 0.15s, color 0.15s, opacity 0.15s;
    white-space:    nowrap;
}

.dwcookies-btn--primary {
    background:     var(--dwc-btn-primary-bg,   #2e88d4);
    color:          var(--dwc-btn-primary-text,  #fff);
}
.dwcookies-btn--primary:hover { opacity: 0.85; }
.dwcookies-btn--primary:focus-visible {
    outline:        3px solid var(--dwc-link, #8ecfff);
    outline-offset: 2px;
}

.dwcookies-btn--secondary {
    background:     var(--dwc-btn-secondary-bg,   #444);
    color:          var(--dwc-btn-secondary-text,  #e0e0e0);
}
.dwcookies-btn--secondary:hover { opacity: 0.85; }

.dwcookies-btn--ghost {
    background:     transparent;
    color:          var(--dwc-btn-ghost-text,   #aaa);
    border:         1px solid var(--dwc-btn-ghost-border, #555);
}
.dwcookies-btn--ghost:hover { opacity: 0.75; }

/* ------------------------------------------------------------------ */
/*  Preferences modal                                                  */
/* ------------------------------------------------------------------ */

.dwcookies-modal {
    position:       fixed;
    inset:          0;
    z-index:        100002; /* above overlay AND banner */
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        20px;
    pointer-events: none;
}

.dwcookies-modal[hidden] { display: none !important; }
.dwcookies-modal:not([hidden]) { display: flex; }

.dwcookies-modal__box {
    background:     var(--dwc-modal-bg,   #fff);
    color:          var(--dwc-modal-text, #1a1a1a);
    border-radius:  8px;
    width:          100%;
    max-width:      520px;
    max-height:     90vh;
    overflow-y:     auto;
    padding:        28px 28px 20px;
    box-shadow:     0 8px 32px rgba(0,0,0,0.25);
    pointer-events: all;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:      14px;
    line-height:    1.6;
}

.dwcookies-modal__title {
    margin:         0 0 16px;
    font-size:      18px;
    font-weight:    700;
    color:          var(--dwc-modal-text, #1a1a1a);
}

.dwcookies-modal__list {
    list-style:     none;
    margin:         0 0 20px;
    padding:        0;
}

.dwcookies-modal__item {
    padding:        12px 0;
    border-bottom:  1px solid var(--dwc-modal-border, #e8e8e8);
}
.dwcookies-modal__item:last-child { border-bottom: none; }

.dwcookies-modal__label {
    display:        flex;
    align-items:    center;
    gap:            8px;
    cursor:         pointer;
    font-weight:    600;
    color:          var(--dwc-modal-text, #1a1a1a);
}

.dwcookies-modal__label input[disabled] {
    cursor:         not-allowed;
    opacity:        0.5;
}

.dwcookies-modal__badge {
    margin-left:    auto;
    font-size:      11px;
    font-weight:    500;
    color:          #666;
    background:     #f0f0f0;
    border-radius:  3px;
    padding:        2px 6px;
}

.dwcookies-modal__desc {
    margin:         4px 0 0 24px;
    font-size:      13px;
    color:          var(--dwc-modal-text, #1a1a1a);
    opacity:        0.7;
}

.dwcookies-modal__footer {
    display:        flex;
    gap:            8px;
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/*  Per-cookie details (inside modal, under each category)             */
/* ------------------------------------------------------------------ */

.dwcookies-modal__cookie-details {
    margin:         8px 0 0 24px;
}

.dwcookies-modal__cookie-details > summary {
    cursor:         pointer;
    font-size:      12px;
    color:          var(--dwc-modal-text, #1a1a1a);
    opacity:        0.55;
    user-select:    none;
    list-style:     revert; /* keep the disclosure triangle */
}
.dwcookies-modal__cookie-details[open] > summary {
    opacity:        0.75;
}

.dwcookies-modal__cookie-table {
    width:          100%;
    border-collapse: collapse;
    margin-top:     8px;
    font-size:      11px;
    color:          var(--dwc-modal-text, #1a1a1a);
}

.dwcookies-modal__cookie-table th,
.dwcookies-modal__cookie-table td {
    padding:        4px 6px;
    text-align:     left;
    border-bottom:  1px solid var(--dwc-modal-border, #e8e8e8);
    vertical-align: top;
}

.dwcookies-modal__cookie-table th {
    font-weight:    600;
    opacity:        0.7;
    white-space:    nowrap;
}

.dwcookies-modal__cookie-table td code {
    font-family:    monospace;
    font-size:      10.5px;
    background:     rgba(0,0,0,0.05);
    padding:        1px 3px;
    border-radius:  2px;
    word-break:     break-all;
}

/* ------------------------------------------------------------------ */
/*  YouTube placeholder                                                */
/* ------------------------------------------------------------------ */

.dwcookies-yt-placeholder {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            12px;
    text-align:     center;
    color:          #e0e0e0;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:      14px;
    line-height:    1.5;
}

.dwcookies-yt-notice {
    position:       relative; /* above the thumbnail img */
    z-index:        1;
    max-width:      400px;
    padding:        0 12px;
    text-shadow:    0 1px 4px rgba(0,0,0,0.7);
}

.dwcookies-yt-btn {
    position:       relative;
    z-index:        1;
    cursor:         pointer;
    border:         none;
    border-radius:  4px;
    font-size:      13px;
    font-family:    inherit;
    font-weight:    600;
    padding:        10px 20px;
    background:     var(--dwc-btn-primary-bg,   #2e88d4);
    color:          var(--dwc-btn-primary-text,  #fff);
    transition:     opacity 0.15s;
}
.dwcookies-yt-btn:hover { opacity: 0.85; }

/* ------------------------------------------------------------------ */
/*  Settings panel (shortcode [dwcookies_settings])                    */
/* ------------------------------------------------------------------ */

.dwcookies-settings-panel {
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:      15px;
    line-height:    1.6;
    color:          inherit;
    max-width:      600px;
}

.dwcookies-sp__title {
    font-size:      1.2em;
    font-weight:    700;
    margin:         0 0 8px;
}

.dwcookies-sp__intro {
    margin:         0 0 20px;
    opacity:        0.8;
}

.dwcookies-sp__list {
    list-style:     none;
    margin:         0 0 20px;
    padding:        0;
    border-top:     1px solid var(--dwc-modal-border, #e8e8e8);
}

.dwcookies-sp__item {
    padding:        14px 0;
    border-bottom:  1px solid var(--dwc-modal-border, #e8e8e8);
}

.dwcookies-sp__label {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-weight:    600;
    cursor:         pointer;
}

.dwcookies-sp__label input[disabled] {
    cursor:         not-allowed;
    opacity:        0.5;
}

.dwcookies-sp__badge {
    margin-left:    auto;
    font-size:      11px;
    font-weight:    500;
    color:          #666;
    background:     #f0f0f0;
    border-radius:  3px;
    padding:        2px 6px;
    white-space:    nowrap;
}

.dwcookies-sp__desc {
    margin:         4px 0 0 26px;
    font-size:      13px;
    opacity:        0.7;
}

.dwcookies-sp__actions {
    display:        flex;
    flex-wrap:      wrap;
    gap:            10px;
    align-items:    center;
}

.dwcookies-sp__status {
    margin:         10px 0 0;
    font-size:      13px;
    color:          #1a7d1a;
    min-height:     1.4em;
}

/* ------------------------------------------------------------------ */
/*  Persistent manage-cookies button                                   */
/* ------------------------------------------------------------------ */

/*
 * Fixed, bottom-right corner. Subtle: small grey pill that hovers above
 * any site content. z-index below the banner (100001) so the banner takes
 * visual precedence; JS hides this button while the banner is showing.
 */
.dwcookies-manage-link {
    position:       fixed;
    bottom:         16px;
    right:          16px;
    z-index:        99998;
    cursor:         pointer;
    border:         1px solid rgba(0,0,0,0.18);
    border-radius:  20px;
    background:     rgba(255,255,255,0.92);
    color:          #444;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:      11px;
    font-weight:    500;
    padding:        5px 12px;
    line-height:    1.4;
    backdrop-filter: blur(4px);
    box-shadow:     0 1px 4px rgba(0,0,0,0.14);
    transition:     opacity 0.15s, box-shadow 0.15s;
    white-space:    nowrap;
}
.dwcookies-manage-link:hover {
    opacity:        0.85;
    box-shadow:     0 2px 8px rgba(0,0,0,0.2);
}
.dwcookies-manage-link[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/*  Noscript notice                                                    */
/* ------------------------------------------------------------------ */

.dwcookies-noscript {
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    background:     var(--dwc-banner-bg, #1a1a1a);
    color:          var(--dwc-banner-text, #e0e0e0);
    text-align:     center;
    padding:        12px;
    font-size:      13px;
    font-family:    -apple-system, sans-serif;
    z-index:        100001;
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
    .dwcookies-banner--bottom .dwcookies-banner__inner {
        flex-direction: column;
        align-items:    flex-start;
    }
    .dwcookies-banner--bottom .dwcookies-banner__actions,
    .dwcookies-banner--box .dwcookies-banner__actions {
        width:          100%;
    }
    .dwcookies-banner .dwcookies-btn {
        flex:           1;
        text-align:     center;
    }
    .dwcookies-modal__footer {
        flex-direction: column;
    }
    .dwcookies-modal__footer .dwcookies-btn {
        width:          100%;
        text-align:     center;
    }
}