/* ============================================================
   GCC – GDPR Cookie Consent  |  frontend.css
   ============================================================ */

/* ---------- CSS VARIABLES (light defaults) ---------- */
#pme-gcc-notice {
    --pme-gcc-bg:         #ffffff;
    --pme-gcc-text:       #1a1a1a;
    --pme-gcc-subtext:    #555555;
    --pme-gcc-accent:     #0073aa;
    --pme-gcc-accent-h:   #005f8d;
    --pme-gcc-decline-bg: transparent;
    --pme-gcc-decline-bd: #cccccc;
    --pme-gcc-decline-tx: #555555;
    --pme-gcc-border:     rgba(0,0,0,.08);
    --pme-gcc-shadow:     0 8px 32px rgba(0,0,0,.12);
    --pme-gcc-radius:     10px;
    --pme-gcc-font-size:  14px;
    --pme-gcc-z:          999999;
    --pme-gcc-anim-dur:   .35s;
}

/* ---------- Dark theme ---------- */
#pme-gcc-notice.pme-gcc-theme-dark {
    --pme-gcc-bg:         #1e1e1e;
    --pme-gcc-text:       #f0f0f0;
    --pme-gcc-subtext:    #aaaaaa;
    --pme-gcc-accent:     #4dabf7;
    --pme-gcc-accent-h:   #74c0fc;
    --pme-gcc-decline-bg: transparent;
    --pme-gcc-decline-bd: #444444;
    --pme-gcc-decline-tx: #aaaaaa;
    --pme-gcc-border:     rgba(255,255,255,.08);
    --pme-gcc-shadow:     0 8px 32px rgba(0,0,0,.4);
}

/* ---------- Base ---------- */
#pme-gcc-notice {
    position: fixed;
    z-index: var(--pme-gcc-z);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--pme-gcc-font-size);
    line-height: 1.55;
    color: var(--pme-gcc-text);
    background: var(--pme-gcc-bg);
    box-shadow: var(--pme-gcc-shadow);
    border: 1px solid var(--pme-gcc-border);
    transition: opacity var(--pme-gcc-anim-dur) ease, transform var(--pme-gcc-anim-dur) ease;
    box-sizing: border-box;
}

#pme-gcc-notice[hidden] {
    display: none !important;
}

/* ---- ANIMATIONS ---- */
#pme-gcc-notice.pme-gcc-animate.pme-gcc-layout-top_banner {
    transform: translateY(-100%);
    opacity: 0;
}
#pme-gcc-notice.pme-gcc-animate.pme-gcc-layout-bottom_banner {
    transform: translateY(100%);
    opacity: 0;
}
#pme-gcc-notice.pme-gcc-animate.pme-gcc-layout-left_float,
#pme-gcc-notice.pme-gcc-animate.pme-gcc-layout-center_float,
#pme-gcc-notice.pme-gcc-animate.pme-gcc-layout-right_float {
    transform: translateY(20px);
    opacity: 0;
}
#pme-gcc-notice.pme-gcc-visible {
    transform: translate(0, 0) !important;
    opacity: 1 !important;
}
#pme-gcc-notice.pme-gcc-hiding {
    transform: translateY(20px) !important;
    opacity: 0 !important;
}

/* ============================================================
   LAYOUTS
   ============================================================ */

/* -- TOP BANNER -- */
#pme-gcc-notice.pme-gcc-layout-top_banner {
    top: 0; left: 0; right: 0;
    border-radius: 0 0 var(--pme-gcc-radius) var(--pme-gcc-radius);
    border-top: none;
}

/* -- BOTTOM BANNER -- */
#pme-gcc-notice.pme-gcc-layout-bottom_banner {
    bottom: 0; left: 0; right: 0;
    border-radius: var(--pme-gcc-radius) var(--pme-gcc-radius) 0 0;
    border-bottom: none;
}

/* -- FLOATING BOXES -- */
#pme-gcc-notice.pme-gcc-layout-left_float,
#pme-gcc-notice.pme-gcc-layout-center_float,
#pme-gcc-notice.pme-gcc-layout-right_float {
    bottom: 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    border-radius: var(--pme-gcc-radius);
}
#pme-gcc-notice.pme-gcc-layout-left_float   { left: 24px; }
#pme-gcc-notice.pme-gcc-layout-center_float { left: 50%; transform: translateX(-50%); }
#pme-gcc-notice.pme-gcc-layout-center_float.pme-gcc-visible { transform: translateX(-50%) translateY(0) !important; }
#pme-gcc-notice.pme-gcc-layout-center_float.pme-gcc-hiding  { transform: translateX(-50%) translateY(20px) !important; }
#pme-gcc-notice.pme-gcc-layout-right_float  { right: 24px; }

/* ============================================================
   INNER LAYOUT
   ============================================================ */
.pme-gcc-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    position: relative;
}

/* Banners → horizontal */
.pme-gcc-layout-top_banner .pme-gcc-inner,
.pme-gcc-layout-bottom_banner .pme-gcc-inner {
    flex-wrap: wrap;
    align-items: center;
}
.pme-gcc-layout-top_banner .pme-gcc-content,
.pme-gcc-layout-bottom_banner .pme-gcc-content {
    flex: 1 1 300px;
}
.pme-gcc-layout-top_banner .pme-gcc-actions,
.pme-gcc-layout-bottom_banner .pme-gcc-actions {
    flex-shrink: 0;
}

/* Floating → vertical */
.pme-gcc-layout-left_float .pme-gcc-inner,
.pme-gcc-layout-center_float .pme-gcc-inner,
.pme-gcc-layout-right_float .pme-gcc-inner {
    flex-direction: column;
    gap: 14px;
}
.pme-gcc-layout-left_float .pme-gcc-actions,
.pme-gcc-layout-center_float .pme-gcc-actions,
.pme-gcc-layout-right_float .pme-gcc-actions {
    width: 100%;
}

/* ---- Icon ---- */
.pme-gcc-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--pme-gcc-accent);
    margin-top: 1px;
}
.pme-gcc-icon svg { width: 100%; height: 100%; }

/* ---- Message ---- */
.pme-gcc-message {
    margin: 0;
    color: var(--pme-gcc-text);
}
.pme-gcc-policy-link {
    color: var(--pme-gcc-accent);
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}
.pme-gcc-policy-link:hover { color: var(--pme-gcc-accent-h); }

/* ---- Actions ---- */
.pme-gcc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---- Buttons ---- */
.pme-gcc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: calc(var(--pme-gcc-radius) * 0.7);
    font-size: var(--pme-gcc-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    white-space: nowrap;
    border: 2px solid transparent;
    line-height: 1.4;
}
.pme-gcc-btn-accept {
    background: var(--pme-gcc-accent);
    color: #fff;
    border-color: var(--pme-gcc-accent);
}
.pme-gcc-btn-accept:hover {
    background: var(--pme-gcc-accent-h);
    border-color: var(--pme-gcc-accent-h);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.pme-gcc-btn-decline {
    background: var(--pme-gcc-decline-bg);
    color: var(--pme-gcc-decline-tx);
    border-color: var(--pme-gcc-decline-bd);
}
.pme-gcc-btn-decline:hover {
    background: rgba(0,0,0,.04);
    border-color: #999;
}
.pme-gcc-theme-dark .pme-gcc-btn-decline:hover {
    background: rgba(255,255,255,.06);
}
.pme-gcc-btn-settings {
    background: transparent;
    color: var(--pme-gcc-subtext);
    border-color: transparent;
    padding-left: 6px;
    padding-right: 6px;
    text-decoration: underline;
    font-weight: 400;
}
.pme-gcc-btn-settings:hover { color: var(--pme-gcc-text); }

/* Floating → full-width buttons */
.pme-gcc-layout-left_float .pme-gcc-btn-accept,
.pme-gcc-layout-center_float .pme-gcc-btn-accept,
.pme-gcc-layout-right_float .pme-gcc-btn-accept {
    flex: 1 1 auto;
}

/* ---- Close button ---- */
.pme-gcc-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--pme-gcc-subtext);
    border-radius: 4px;
    line-height: 0;
    transition: color .2s, background .2s;
}
.pme-gcc-close svg { width: 16px; height: 16px; }
.pme-gcc-close:hover { color: var(--pme-gcc-text); background: rgba(0,0,0,.06); }
.pme-gcc-theme-dark .pme-gcc-close:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .pme-gcc-layout-left_float,
    .pme-gcc-layout-right_float,
    .pme-gcc-layout-center_float {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        bottom: 12px;
        transform: none !important;
    }
    .pme-gcc-layout-center_float.pme-gcc-visible,
    .pme-gcc-layout-center_float.pme-gcc-hiding {
        transform: translateY(0) !important;
    }
    .pme-gcc-layout-center_float.pme-gcc-hiding {
        transform: translateY(20px) !important;
    }
    .pme-gcc-inner {
        padding: 14px 16px;
    }
    .pme-gcc-actions {
        flex-direction: column;
        width: 100%;
    }
    .pme-gcc-btn { width: 100%; justify-content: center; }
}