/* =================================================================
   D3 Cookie Consent — Banner Styles
   All rules scoped to #d3cc-root to prevent any theme/plugin conflicts.
   CSS variables are set inline by PHP from admin settings.
   ================================================================= */

/* ── Reset (scoped) ─────────────────────────────────────────────── */
#d3cc-root *,
#d3cc-root *::before,
#d3cc-root *::after {
    box-sizing: border-box;
}

/* ── Root shell ─────────────────────────────────────────────────── */
#d3cc-root {
    font-family: var(--d3cc-font, inherit);
    font-size:   var(--d3cc-size, 14px);
    line-height: 1.5;
    color:       var(--d3cc-text);
}

/* ── Overlay (modal backdrop + prefs backdrop) ──────────────────── */
#d3cc-root .d3cc-overlay {
    position:   fixed;
    inset:      0;
    background: var(--d3cc-overlay);
    z-index:    99998;
    animation:  d3cc-fade-in 0.2s ease;
}

/* ── Shared button styles ───────────────────────────────────────── */
#d3cc-root .d3cc-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    min-height:     44px;              /* 1.1.0: WCAG-sized target */
    padding:        10px 18px;
    border-radius:  var(--d3cc-radius);
    border:         1.5px solid var(--d3cc-text);
    font-family:    var(--d3cc-font, inherit);
    font-size:      var(--d3cc-size, 14px);
    font-weight:    600;
    letter-spacing: -.01em;
    line-height:    1.2;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background .16s ease, color .16s ease, border-color .16s ease;
    text-decoration: none;
}

#d3cc-root .d3cc-btn:focus-visible {
    outline:        2.5px solid var(--d3cc-accent);
    outline-offset: 3px;
}

#d3cc-root .d3cc-btn--accent {
    background:   var(--d3cc-accent);
    border-color: var(--d3cc-accent);
    color:        var(--d3cc-accent-text);
}

#d3cc-root .d3cc-btn--outline {
    background: transparent;
    color:      var(--d3cc-text);
}

#d3cc-root .d3cc-btn--secondary {
    background:   var(--d3cc-secondary);
    border-color: var(--d3cc-border);
    color:        var(--d3cc-text);
}

#d3cc-root .d3cc-btn:hover {
    background:   var(--d3cc-text);
    border-color: var(--d3cc-text);
    color:        var(--d3cc-bg);
}

#d3cc-root .d3cc-btn--sm {
    padding:   8px 12px;
    font-size: calc(var(--d3cc-size, 14px) - 1px);
}

/* ── Typography ─────────────────────────────────────────────────── */
#d3cc-root .d3cc-title {
    display:     block;
    font-size:   calc(var(--d3cc-size, 14px) + 2px);
    font-weight: 700;
    letter-spacing: -.01em;
    margin:      0 0 6px;
    color:       var(--d3cc-text);
}

#d3cc-root .d3cc-body {
    margin:  0;
    color:   var(--d3cc-text);
    opacity: 0.85;
}

#d3cc-root .d3cc-policy-link {
    color:           var(--d3cc-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left:     4px;
}
#d3cc-root .d3cc-policy-link:hover { color: var(--d3cc-accent); }
#d3cc-root a:focus-visible,
#d3cc-root input:focus-visible + .d3cc-toggle__slider,
#d3cc-root #d3cc-trigger:focus-visible,
#d3cc-root .d3cc-prefs__close:focus-visible {
    outline:        2.5px solid var(--d3cc-accent);
    outline-offset: 3px;
}

/* =================================================================
   BANNER STYLE — bottom / top bar
   ================================================================= */
#d3cc-root .d3cc-bar {
    position:   fixed;
    left:       0;
    right:      0;
    z-index:    99999;
    background: var(--d3cc-bg);
    border-top: 1px solid var(--d3cc-border);
    animation:  d3cc-slide-up 0.25s ease;
}

#d3cc-root .d3cc-bar--bottom { bottom: 0; border-top:    1px solid var(--d3cc-border); }
#d3cc-root .d3cc-bar--top    { top:    0; border-bottom: 1px solid var(--d3cc-border); }

#d3cc-root .d3cc-bar__inner {
    max-width:   1200px;
    margin:      0 auto;
    padding:     16px 24px;
    display:     flex;
    align-items: center;
    gap:         24px;
    flex-wrap:   wrap;
}

#d3cc-root .d3cc-bar__text    { flex: 1 1 280px; }
#d3cc-root .d3cc-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* =================================================================
   MODAL STYLE
   ================================================================= */
#d3cc-root .d3cc-modal {
    position:        fixed;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         99999;
    background:      var(--d3cc-bg);
    border:          1px solid var(--d3cc-border);
    border-radius:   var(--d3cc-radius);
    width:           min(520px, calc(100vw - 32px));
    max-height:      90vh;
    overflow-y:      auto;
    animation:       d3cc-pop-in 0.22s ease;
}

#d3cc-root .d3cc-modal__body {
    padding: 28px 28px 20px;
}

#d3cc-root .d3cc-modal__actions {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    padding:     0 28px 24px;
    justify-content: flex-end;
}

/* =================================================================
   CORNER WIDGET STYLE
   ================================================================= */
#d3cc-root .d3cc-corner {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    z-index:       99999;
    background:    var(--d3cc-bg);
    border:        1px solid var(--d3cc-border);
    border-radius: var(--d3cc-radius);
    width:         min(320px, calc(100vw - 32px));
    padding:       20px;
    animation:     d3cc-slide-corner 0.25s ease;
}

#d3cc-root .d3cc-corner__actions {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-top:     14px;
}

#d3cc-root .d3cc-corner__actions .d3cc-btn {
    width:       100%;
    text-align:  center;
}

/* =================================================================
   PREFERENCES PANEL
   ================================================================= */
#d3cc-root .d3cc-prefs {
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    z-index:       100000;
    background:    var(--d3cc-bg);
    border:        1px solid var(--d3cc-border);
    border-radius: var(--d3cc-radius);
    width:         min(560px, calc(100vw - 32px));
    max-height:    90vh;
    display:       flex;
    flex-direction:column;
    animation:     d3cc-pop-in 0.22s ease;
}

#d3cc-root .d3cc-prefs__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 24px 16px;
    border-bottom:   1px solid var(--d3cc-border);
    font-size:       calc(var(--d3cc-size, 14px) + 1px);
    font-weight:     700;
}

#d3cc-root .d3cc-prefs__close {
    background:  transparent;
    border:      none;
    font-size:   22px;
    cursor:      pointer;
    color:       var(--d3cc-text);
    line-height: 1;
    min-width:   44px;
    min-height:  44px;
    margin:      -10px -12px -10px 0;
    border-radius: var(--d3cc-radius);
}
#d3cc-root .d3cc-prefs__close:hover { color: var(--d3cc-accent); }

#d3cc-root .d3cc-prefs__body {
    overflow-y: auto;
    padding:    8px 0;
    flex:       1;
}

#d3cc-root .d3cc-prefs__intro {
    margin:  8px 24px 4px;
    color:   var(--d3cc-text);
}

#d3cc-root .d3cc-prefs__footer {
    display:         flex;
    gap:             8px;
    justify-content: flex-end;
    padding:         16px 24px;
    border-top:      1px solid var(--d3cc-border);
}

/* ── Category row ──────────────────────────────────────────────── */
#d3cc-root .d3cc-pref-row {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             16px;
    padding:         16px 24px;
    border-bottom:   1px solid var(--d3cc-border);
}
#d3cc-root .d3cc-pref-row:last-child { border-bottom: none; }

#d3cc-root .d3cc-pref-info {
    flex: 1;
}

#d3cc-root .d3cc-pref-name {
    font-weight: 600;
    display:     inline-block;
    margin-bottom: 4px;
}

#d3cc-root .d3cc-locked {
    font-size:   12px;
    margin-left: 8px;
    opacity:     0.75;
}

#d3cc-root .d3cc-pref-desc {
    margin:  4px 0 0;
    font-size: calc(var(--d3cc-size, 14px) - 1px);
    opacity: 0.75;
    color:   var(--d3cc-text);
}

/* ── Toggle switch ─────────────────────────────────────────────── */
#d3cc-root .d3cc-toggle {
    display:        flex;
    align-items:    center;
    cursor:         pointer;
    flex-shrink:    0;
    margin-top:     2px;
}

#d3cc-root .d3cc-toggle input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

#d3cc-root .d3cc-toggle__slider {
    position:      relative;
    display:       inline-block;
    width:         44px;
    height:        24px;
    background:    var(--d3cc-border);
    border-radius: calc(var(--d3cc-radius) * 2.4);
    transition:    background 0.2s ease;
    flex-shrink:   0;
}

#d3cc-root .d3cc-toggle__slider::after {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         18px;
    height:        18px;
    background:    var(--d3cc-bg);
    border-radius: calc(var(--d3cc-radius) * 1.8);
    transition:    transform 0.2s ease;
}

#d3cc-root .d3cc-toggle input:checked + .d3cc-toggle__slider {
    background: var(--d3cc-accent);
}

#d3cc-root .d3cc-toggle input:checked + .d3cc-toggle__slider::after {
    transform: translateX(20px);
}


#d3cc-root .d3cc-toggle input:disabled + .d3cc-toggle__slider {
    background: var(--d3cc-accent);
    opacity:    0.6;
    cursor:     not-allowed;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes d3cc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes d3cc-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes d3cc-pop-in {
    from { transform: translate(-50%, -48%) scale(0.95); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@keyframes d3cc-slide-corner {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    #d3cc-root .d3cc-bar,
    #d3cc-root .d3cc-modal,
    #d3cc-root .d3cc-corner,
    #d3cc-root .d3cc-prefs,
    #d3cc-root .d3cc-overlay {
        animation: none;
    }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 600px) {
    #d3cc-root .d3cc-bar__inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            14px;
    }

    #d3cc-root .d3cc-bar__actions {
        width: 100%;
    }

    #d3cc-root .d3cc-bar__actions .d3cc-btn {
        flex: 1 1 auto;
        text-align: center;
    }

    #d3cc-root .d3cc-modal__actions {
        flex-direction: column;
    }

    #d3cc-root .d3cc-modal__actions .d3cc-btn {
        width: 100%;
    }

    /* 1.1.0: the corner box becomes a compact bottom bar — text, then the three buttons on one row */
    #d3cc-root .d3cc-corner {
        bottom: 0;
        right:  0;
        left:   0;
        width:  100%;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 0;
    }
    /* The title stays the dialog's name for screen readers; on a narrow bar it is hidden, the body says it. */
    #d3cc-root .d3cc-corner .d3cc-title {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    #d3cc-root .d3cc-corner .d3cc-body  { font-size: calc(var(--d3cc-size, 14px) - 1px); line-height: 1.4; }
    #d3cc-root .d3cc-corner__actions {
        flex-direction: row;
        gap:            8px;
        margin-top:     6px;
    }
    #d3cc-root .d3cc-corner__actions .d3cc-btn {
        flex:        1 1 0;
        min-width:   0;
        padding:     6px 8px;
        white-space: normal;
    }

    #d3cc-root .d3cc-prefs__footer {
        flex-direction: column;
    }

    #d3cc-root .d3cc-prefs__footer .d3cc-btn {
        width: 100%;
    }
}

#d3cc-root #d3cc-trigger {
    position:      fixed;
    /* 1.1.1: mirrors a theme back-to-top button that sits at var(--gut) from the right, 48px square
       (d3solutions.gr). Sites without --gut get 16px. */
    bottom:        calc(var(--gut, 16px) + env(safe-area-inset-bottom, 0px));
    left:          var(--gut, 16px);
    z-index:       99997;
    width:         48px;
    height:        48px;
    border-radius: var(--d3cc-radius);
    border:        0;
    background:    var(--d3cc-text);      /* 1.1.1: ink square, paper icon (15.9:1), like back-to-top */
    color:         var(--d3cc-bg);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    color .16s ease;
}

/* Hover on a dark square: the site's on-dark red when it has one (--red-ink, 4.7:1 on ink);
   the plain accent can be too dark on ink (d3solutions.gr's #C00015 is 2.6:1). */
#d3cc-root #d3cc-trigger:hover {
    color: var(--red-ink, var(--d3cc-accent));
}

/* A paper halo keeps the focus ring visible over dark sections too. */
#d3cc-root #d3cc-trigger:focus-visible {
    box-shadow: 0 0 0 3px var(--d3cc-bg);
}