/*
 * WorkCampConnect — Cookie Consent Banner + Preferences Panel
 * Colors are overridable via inline CSS custom properties
 * set by the admin panel (--ccBg, --ccText, etc.).
 */

/* ── Banner ───────────────────────────────────────── */
.cc-banner {
    position:           fixed;
    bottom:             0;
    left:               0;
    right:              0;
    z-index:            var(--z-toast);
    background:         var(--ccBg, var(--color-primary-dark));
    color:              var(--ccText, #fff);
    box-shadow:         0 -4px 24px rgba(10, 40, 70, 0.25);
    transform:          translateY(100%);
    transition:         transform var(--transition-slow);
}

.cc-banner--visible {
    transform:          translateY(0);
}

.cc-banner--hiding {
    transform:          translateY(100%);
}

/* ── Top position variant ─────────────────────────── */
.cc-banner--top {
    top:                0;
    bottom:             auto;
    box-shadow:         0 4px 24px rgba(10, 40, 70, 0.25);
    transform:          translateY(-100%);
}

.cc-banner--top.cc-banner--visible {
    transform:          translateY(0);
}

.cc-banner--top.cc-banner--hiding {
    transform:          translateY(-100%);
}

/* ── Inner layout ─────────────────────────────────── */
.cc-banner__inner {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    gap:                var(--space-6);
    max-width:          var(--container-xl);
    margin:             0 auto;
    padding:            var(--space-4) var(--space-6);
}

.cc-banner__text {
    font-size:          var(--font-size-sm);
    line-height:        var(--line-height-relaxed);
    margin:             0;
    flex:               1;
}

.cc-banner__link,
.cc-banner__link:visited {
    color:              var(--ccLink, var(--color-accent));
    text-decoration:    underline;
}

.cc-banner__link:hover,
.cc-banner__link:hover:visited {
    opacity:            0.85;
}

/* ── Button group ─────────────────────────────────── */
.cc-banner__actions {
    display:            flex;
    gap:                var(--space-3);
    flex-shrink:        0;
}

.cc-banner__btn {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    padding:            var(--space-2) var(--space-6);
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-semibold);
    line-height:        var(--line-height-tight);
    border:             none;
    border-radius:      var(--radius-base);
    cursor:             pointer;
    transition:         opacity var(--transition-fast);
    white-space:        nowrap;
}

.cc-banner__btn:hover {
    opacity:            0.9;
}

.cc-banner__btn--accept {
    color:              var(--ccBtnText, var(--color-primary-dark));
    background:         var(--ccBtnBg, var(--color-accent));
}

.cc-banner__btn--decline {
    color:              var(--ccDecText, #fff);
    background:         var(--ccDecBg, transparent);
    border:             1px solid currentColor;
}

.cc-banner__btn--customize {
    color:              var(--ccDecText, #fff);
    background:         transparent;
    border:             1px solid rgba(255,255,255,0.3);
}

.cc-banner__btn--customize:hover {
    border-color:       rgba(255,255,255,0.6);
}

/* ── Mobile banner ────────────────────────────────── */
@media (max-width: 639px) {
    .cc-banner__inner {
        flex-direction: column;
        text-align:     center;
        gap:            var(--space-3);
        padding:        var(--space-4);
    }

    .cc-banner__actions {
        flex-direction: column;
        width:          100%;
    }

    .cc-banner__btn {
        width:          100%;
    }
}

/* ── Preferences Overlay ──────────────────────────── */
.cc-prefs-overlay {
    position:           fixed;
    inset:              0;
    z-index:            calc(var(--z-toast) + 1);
    background:         rgba(0, 0, 0, 0.5);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    padding:            var(--space-4);
    opacity:            0;
    visibility:         hidden;
    pointer-events:     none;
    transition:         opacity 0.3s ease, visibility 0.3s ease;
}

.cc-prefs--visible {
    opacity:            1;
    visibility:         visible;
    pointer-events:     auto;
}

/* ── Preferences Panel ────────────────────────────── */
.cc-prefs {
    background:         var(--ccBg, #0a1c2b);
    color:              var(--ccText, #fff);
    border-radius:      var(--radius-lg);
    width:              100%;
    max-width:          520px;
    max-height:         85vh;
    overflow-y:         auto;
    box-shadow:         0 16px 48px rgba(0, 0, 0, 0.3);
}

.cc-prefs__header {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            var(--space-5) var(--space-6);
    border-bottom:      1px solid rgba(255, 255, 255, 0.12);
}

.cc-prefs__title {
    font-size:          var(--font-size-lg);
    font-weight:        var(--font-weight-semibold);
    margin:             0;
}

.cc-prefs__close {
    background:         none;
    border:             none;
    color:              inherit;
    font-size:          1.5rem;
    cursor:             pointer;
    padding:            0;
    line-height:        1;
    opacity:            0.7;
}

.cc-prefs__close:hover {
    opacity:            1;
}

.cc-prefs__body {
    padding:            var(--space-5) var(--space-6);
}

.cc-prefs__desc {
    font-size:          var(--font-size-sm);
    line-height:        var(--line-height-relaxed);
    margin:             0 0 var(--space-5) 0;
    opacity:            0.85;
}

/* ── Category rows ────────────────────────────────── */
.cc-prefs__category {
    display:            flex;
    align-items:        flex-start;
    justify-content:    space-between;
    gap:                var(--space-4);
    padding:            var(--space-4) 0;
    border-top:         1px solid rgba(255, 255, 255, 0.1);
}

.cc-prefs__cat-info {
    flex:               1;
}

.cc-prefs__cat-title {
    font-size:          var(--font-size-base);
    font-weight:        var(--font-weight-semibold);
    margin:             0 0 var(--space-1) 0;
}

.cc-prefs__cat-desc {
    font-size:          var(--font-size-xs);
    line-height:        var(--line-height-relaxed);
    margin:             0;
    opacity:            0.7;
}

/* ── Toggle switch ────────────────────────────────── */
.cc-toggle {
    display:            flex;
    align-items:        center;
    gap:                var(--space-2);
    cursor:             pointer;
    flex-shrink:        0;
    margin-top:         2px;
}

.cc-toggle input {
    position:           absolute;
    opacity:            0;
    width:              0;
    height:             0;
}

.cc-toggle__slider {
    display:            block;
    width:              44px;
    height:             24px;
    background:         rgba(255, 255, 255, 0.2);
    border-radius:      12px;
    position:           relative;
    transition:         background 0.2s ease;
}

.cc-toggle__slider::after {
    content:            '';
    position:           absolute;
    top:                3px;
    left:               3px;
    width:              18px;
    height:             18px;
    background:         #fff;
    border-radius:      50%;
    transition:         transform 0.2s ease;
}

.cc-toggle input:checked + .cc-toggle__slider {
    background:         var(--ccBtnBg, #E8AC25);
}

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

/* Locked toggle (essential) */
.cc-toggle--locked {
    cursor:             default;
    opacity:            0.7;
}

.cc-toggle__label {
    font-size:          var(--font-size-xs);
    opacity:            0.6;
    white-space:        nowrap;
}

/* ── Panel footer ─────────────────────────────────── */
.cc-prefs__footer {
    padding:            var(--space-4) var(--space-6);
    border-top:         1px solid rgba(255, 255, 255, 0.12);
    display:            flex;
    justify-content:    flex-end;
}

/* ── Mobile preferences ───────────────────────────── */
@media (max-width: 639px) {
    .cc-prefs {
        max-height:     90vh;
    }

    .cc-prefs__category {
        flex-direction: column;
        gap:            var(--space-2);
    }

    .cc-toggle {
        align-self:     flex-end;
    }
}