/* ═══════════════════════════════════════════════ */
/* COOKIE CONSENT - Premium Design System v4      */
/* ═══════════════════════════════════════════════ */
.cc-banner,.cc-banner *,.cc-banner *::before,.cc-banner *::after,
.cc-overlay,.cc-overlay *,.cc-overlay *::before,.cc-overlay *::after{
    box-sizing:border-box!important;margin:0!important;padding:0!important;
    font-family: 'Roboto',sans-serif!important;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    line-height:normal!important;
}

:root{
    --ck-brand:#006858;
    --ck-brand-dark:#005447;
    --ck-brand-light:rgba(0,104,88,.05);
    --ck-brand-glow:rgba(0,104,88,.12);
    --ck-ink:#111827;
    --ck-ink-2:#1f2937;
    --ck-body:#374151;
    --ck-subtle:#4b5563;
    --ck-muted:#6b7280;
    --ck-light:#9ca3af;
    --ck-surface:#ffffff;
    --ck-bg:#f8fafb;
    --ck-bg-2:#f3f4f6;
    --ck-border:rgba(0,0,0,.07);
    --ck-border-2:rgba(0,0,0,.11);
    --ck-shadow:0 6px 24px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.06);
    --ck-shadow-lg:0 20px 60px rgba(0,0,0,.16),0 4px 16px rgba(0,0,0,.08);
    --ck-radius:16px;
    --ck-ease:cubic-bezier(.4,0,.2,1);
    --ck-safe:env(safe-area-inset-bottom,0px);
}

/* ═══════════════════ BANNER ═══════════════════ */
.cc-banner{
    position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:999998!important;
    padding:0 20px calc(20px + var(--ck-safe))!important;
    pointer-events:none;
    opacity:0;transform:translateY(20px);
    transition:opacity .4s var(--ck-ease),transform .45s var(--ck-ease);
    will-change:transform,opacity;
}
.cc-banner.cc-visible{opacity:1;transform:translateY(0);pointer-events:auto}

.cc-card{
    max-width:420px!important;
    background:var(--ck-surface)!important;
    border:1px solid var(--ck-border)!important;
    border-radius:var(--ck-radius)!important;
    box-shadow:var(--ck-shadow)!important;
    padding:22px 24px 18px!important;
    position:relative;overflow:hidden;
}
.cc-card::before{
    content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:3px!important;
    background:linear-gradient(90deg,#006858 0%,#0d9488 40%,#10b981 70%,#34d399 100%)!important;
}

.cc-head{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:6px!important}
.cc-emoji{font-size:26px!important;line-height:1!important;flex-shrink:0!important}
.cc-title{font-size:17px!important;font-weight:700!important;color:var(--ck-ink)!important;letter-spacing:-.3px!important}

.cc-desc{
    font-size:14.5px!important;line-height:1.6!important;color:var(--ck-body)!important;
    margin-bottom:16px!important;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
.cc-actions{display:flex!important;gap:8px!important}
.cc-b{
    font-size:14px!important;font-weight:600!important;letter-spacing:.01em!important;
    padding:11px 22px!important;border-radius:10px!important;border:none!important;cursor:pointer!important;
    line-height:1.2!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    transition:all .2s var(--ck-ease)!important;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cc-b:active{transform:scale(.97)!important}
.cc-b:focus-visible{outline:2px solid var(--ck-brand)!important;outline-offset:2px!important}

.cc-b-accept{
    background:var(--ck-brand)!important;color:#fff!important;flex:1.2!important;
    box-shadow:0 2px 8px rgba(0,104,88,.25)!important;
}
.cc-b-accept:hover{background:var(--ck-brand-dark)!important;box-shadow:0 4px 14px rgba(0,104,88,.3)!important}

.cc-b-reject{
    background:var(--ck-bg)!important;color:var(--ck-subtle)!important;
    border:1px solid var(--ck-border-2)!important;flex:.8!important;
}
.cc-b-reject:hover{background:var(--ck-bg-2)!important;color:var(--ck-ink-2)!important;border-color:rgba(0,0,0,.16)!important}

.cc-b-custom{
    background:transparent!important;color:var(--ck-muted)!important;
    font-size:14px!important;font-weight:500!important;padding:8px 0!important;width:100%!important;
    text-decoration:none!important;gap:5px!important;
    border:none!important;letter-spacing:.01em!important;
}
.cc-b-custom:hover{color:var(--ck-brand)!important}
.cc-b-custom svg{width:13px!important;height:13px!important;stroke:currentColor!important;fill:none!important;stroke-width:2!important;flex-shrink:0!important}

/* ═══════════════════ OVERLAY ═══════════════════ */
.cc-overlay{
    position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:999999!important;
    background:rgba(0,0,0,.42)!important;
    backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:16px!important;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ck-ease),visibility .3s;
}
.cc-overlay.cc-visible{opacity:1;visibility:visible;pointer-events:auto}

/* ═══════════════════ MODAL ═══════════════════ */
.cc-modal{
    width:100%!important;max-width:500px!important;
    max-height:calc(100vh - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
    background:var(--ck-surface)!important;
    border-radius:var(--ck-radius)!important;
    box-shadow:var(--ck-shadow-lg)!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
    position:relative!important;
    transform:translateY(12px) scale(.98);
    transition:transform .35s var(--ck-ease);
    will-change:transform;
}
.cc-overlay.cc-visible .cc-modal{transform:translateY(0) scale(1)}

.cc-modal::before{
    content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:3px!important;z-index:1!important;
    background:linear-gradient(90deg,#006858 0%,#0d9488 40%,#10b981 70%,#34d399 100%)!important;
}

.cc-grab{display:none!important}

.cc-m-head{
    padding:20px 24px 16px!important;
    border-bottom:1px solid var(--ck-border)!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    flex-shrink:0!important;
}
.cc-m-head-l{display:flex!important;align-items:center!important;gap:10px!important}
.cc-m-title{font-size:18px!important;font-weight:700!important;color:var(--ck-ink)!important;letter-spacing:-.3px!important}

.cc-m-close{
    width:34px!important;height:34px!important;border-radius:50%!important;border:none!important;
    background:var(--ck-bg)!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    transition:all .15s var(--ck-ease)!important;flex-shrink:0!important;
    -webkit-tap-highlight-color:transparent;
}
.cc-m-close:hover{background:var(--ck-bg-2)!important;transform:scale(1.05)!important}
.cc-m-close:active{transform:scale(.95)!important}
.cc-m-close svg{width:14px!important;height:14px!important;stroke:var(--ck-muted)!important;stroke-width:2.5!important;fill:none!important}

.cc-m-body{
    padding:18px 24px!important;overflow-y:auto!important;flex:1!important;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.cc-m-intro{font-size:14.5px!important;line-height:1.6!important;color:var(--ck-body)!important;margin-bottom:18px!important}

/* ═══════════════════ CATEGORIES ═══════════════════ */
.cc-cat{
    border-radius:10px!important;margin-bottom:6px!important;overflow:hidden!important;
    border:1px solid var(--ck-border)!important;
    transition:border-color .2s,background .2s,box-shadow .2s!important;
    background:var(--ck-surface)!important;
}
.cc-cat:last-child{margin-bottom:0!important}
.cc-cat:hover{border-color:var(--ck-border-2)!important;box-shadow:0 1px 4px rgba(0,0,0,.04)!important}
.cc-cat.cc-open{background:var(--ck-bg)!important;border-color:var(--ck-border-2)!important}

.cc-cat-head{
    display:flex!important;align-items:center!important;padding:14px 16px!important;gap:12px!important;
    cursor:pointer!important;-webkit-tap-highlight-color:transparent;
    -webkit-user-select:none!important;user-select:none!important;touch-action:manipulation;
}
.cc-cat-dot{width:10px!important;height:10px!important;border-radius:50%!important;flex-shrink:0!important}
.cc-cat-necessary .cc-cat-dot{background:linear-gradient(135deg,#10b981,#059669)!important}
.cc-cat-analytics .cc-cat-dot{background:linear-gradient(135deg,#60a5fa,#3b82f6)!important}
.cc-cat-marketing .cc-cat-dot{background:linear-gradient(135deg,#a78bfa,#7c3aed)!important}
.cc-cat-preferences .cc-cat-dot{background:linear-gradient(135deg,#fbbf24,#f59e0b)!important}

.cc-cat-info{flex:1!important;min-width:0!important}
.cc-cat-name{font-size:14.5px!important;font-weight:600!important;color:var(--ck-ink-2)!important;line-height:1.3!important}
.cc-cat-sub{font-size:12.5px!important;color:var(--ck-muted)!important;margin-top:2px!important;line-height:1.35!important}

.cc-chev{
    width:16px!important;height:16px!important;stroke:var(--ck-muted)!important;stroke-width:2!important;
    fill:none!important;flex-shrink:0!important;margin-right:2px!important;
    transition:transform .25s var(--ck-ease),stroke .2s!important;
}
.cc-cat.cc-open .cc-chev{transform:rotate(180deg)!important;stroke:var(--ck-subtle)!important}

/* ═══════════════════ TOGGLE ═══════════════════ */
.cc-tog{position:relative!important;width:44px!important;height:24px!important;flex-shrink:0!important;display:block!important}
.cc-tog input{position:absolute!important;opacity:0!important;width:0!important;height:0!important}
.cc-tog-tr{
    position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    background:#d1d5db!important;border-radius:12px!important;
    transition:background .2s var(--ck-ease)!important;cursor:pointer!important;
}
.cc-tog-tr::after{
    content:''!important;position:absolute!important;top:2px!important;left:2px!important;
    width:20px!important;height:20px!important;background:#fff!important;border-radius:50%!important;
    box-shadow:0 1px 4px rgba(0,0,0,.18)!important;
    transition:transform .2s var(--ck-ease)!important;
}
.cc-tog input:checked+.cc-tog-tr{background:var(--ck-brand)!important}
.cc-tog input:checked+.cc-tog-tr::after{transform:translateX(20px)!important}
.cc-tog input:disabled+.cc-tog-tr{background:var(--ck-brand)!important;opacity:.7!important;cursor:default!important}
.cc-tog input:focus-visible+.cc-tog-tr{outline:2px solid var(--ck-brand)!important;outline-offset:2px!important}

/* ═══════════════════ EXPAND ═══════════════════ */
.cc-cat-body{max-height:0!important;overflow:hidden!important;transition:max-height .3s var(--ck-ease)!important}
.cc-cat.cc-open .cc-cat-body{max-height:200px!important}
.cc-cat-desc{
    padding:0 16px 14px 38px!important;
    font-size:13.5px!important;line-height:1.65!important;color:var(--ck-subtle)!important;
}

/* ═══════════════════ MODAL FOOTER ═══════════════════ */
.cc-m-foot{
    padding:14px 24px calc(16px + var(--ck-safe))!important;
    border-top:1px solid var(--ck-border)!important;
    display:flex!important;gap:8px!important;flex-shrink:0!important;
    background:var(--ck-bg)!important;
}
.cc-m-foot .cc-b{flex:1!important}

.cc-b-save{
    background:var(--ck-brand)!important;color:#fff!important;
    box-shadow:0 2px 8px rgba(0,104,88,.22)!important;
}
.cc-b-save:hover{background:var(--ck-brand-dark)!important;box-shadow:0 4px 14px rgba(0,104,88,.28)!important}

.cc-b-rej{
    background:var(--ck-surface)!important;color:var(--ck-subtle)!important;
    border:1px solid var(--ck-border-2)!important;
}
.cc-b-rej:hover{background:var(--ck-bg-2)!important;color:var(--ck-ink-2)!important}

/* ═══════════════════════════════════════════════ */
/* RESPONSIVE                                     */
/* ═══════════════════════════════════════════════ */

/* Desktop 768+ */
@media(min-width:768px){
    .cc-banner{padding:0 28px calc(28px + var(--ck-safe))!important}
    .cc-card{padding:24px 26px 20px!important}
}

/* Tablet 601-767 */
@media(max-width:767px) and (min-width:601px){
    .cc-banner{padding:0 16px calc(16px + var(--ck-safe))!important}
    .cc-card{max-width:400px!important;padding:22px 22px 18px!important}
    .cc-modal{max-width:480px!important}
}

/* Mobile <=600 */
@media(max-width:600px){
    .cc-banner{padding:0 12px calc(12px + var(--ck-safe))!important}
    .cc-card{max-width:100%!important;padding:20px 18px 16px!important;border-radius:14px!important}
    .cc-title{font-size:16px!important}
    .cc-desc{font-size:14px!important;margin-bottom:14px!important}
    .cc-b{font-size:13.5px!important;padding:10px 16px!important}
    .cc-b-custom{font-size:12.5px!important}
    .cc-emoji{font-size:24px!important}
    .cc-head{gap:8px!important}

    .cc-overlay{padding:0!important;align-items:flex-end!important}
    .cc-modal{
        max-width:100%!important;max-height:85vh!important;max-height:85dvh!important;
        border-radius:16px 16px 0 0!important;
        transform:translateY(100%);
    }
    .cc-modal::before{border-radius:0!important}
    .cc-overlay.cc-visible .cc-modal{transform:translateY(0)}

    .cc-grab{
        display:flex!important;justify-content:center!important;padding:10px 0 2px!important;
    }
    .cc-grab span{
        width:36px!important;height:4px!important;border-radius:2px!important;
        background:var(--ck-light)!important;display:block!important;
    }

    .cc-m-head{padding:10px 18px 14px!important}
    .cc-m-body{padding:16px 18px!important}
    .cc-m-foot{padding:14px 18px calc(14px + var(--ck-safe))!important}
    .cc-m-title{font-size:18px!important}
    .cc-m-intro{font-size:15px!important}
    .cc-cat-head{padding:12px 14px!important;gap:10px!important}
    .cc-cat-name{font-size:15px!important}
    .cc-cat-sub{font-size:13px!important}
    .cc-cat-desc{font-size:14px!important;padding-left:32px!important}
}

/* Small mobile 381-480 */
@media(max-width:480px){
    .cc-card{padding:18px 16px 14px!important;border-radius:12px!important}
    .cc-title{font-size:16.5px!important}
    .cc-desc{font-size:14.5px!important;line-height:1.55!important}
    .cc-b{font-size:14px!important;padding:10px 14px!important;border-radius:9px!important}
    .cc-emoji{font-size:22px!important}
    .cc-head{margin-bottom:4px!important}
    .cc-cat{margin-bottom:5px!important}
}

/* Very small <=380 */
@media(max-width:380px){
    .cc-banner{padding:0 8px calc(8px + var(--ck-safe))!important}
    .cc-card{padding:16px 14px 12px!important;border-radius:10px!important}
    .cc-title{font-size:15px!important}
    .cc-desc{font-size:13px!important;margin-bottom:12px!important}
    .cc-b{font-size:12.5px!important;padding:9px 12px!important;border-radius:8px!important}
    .cc-actions{gap:6px!important}
    .cc-emoji{font-size:20px!important}
    .cc-modal{border-radius:14px 14px 0 0!important;max-height:88vh!important;max-height:88dvh!important}
    .cc-m-head{padding:8px 14px 12px!important}
    .cc-m-body{padding:12px 14px!important}
    .cc-m-foot{padding:12px 14px calc(12px + var(--ck-safe))!important;gap:6px!important}
    .cc-m-foot .cc-b{font-size:12.5px!important;padding:9px 10px!important}
    .cc-cat{border-radius:8px!important;margin-bottom:4px!important}
    .cc-cat-head{padding:10px 12px!important;gap:8px!important}
    .cc-cat-name{font-size:13.5px!important}
    .cc-cat-sub{font-size:11.5px!important}
    .cc-cat-dot{width:8px!important;height:8px!important}
    .cc-cat-desc{font-size:12.5px!important;padding-left:28px!important;padding-bottom:11px!important}
    .cc-tog{width:40px!important;height:22px!important}
    .cc-tog-tr{border-radius:11px!important}
    .cc-tog-tr::after{width:18px!important;height:18px!important}
    .cc-tog input:checked+.cc-tog-tr::after{transform:translateX(18px)!important}
}

/* Landscape phones */
@media(max-height:500px) and (orientation:landscape){
    .cc-banner{padding:0 12px calc(8px + var(--ck-safe))!important}
    .cc-card{max-width:360px!important;padding:14px 16px 12px!important}
    .cc-head{margin-bottom:4px!important}
    .cc-title{font-size:14.5px!important}
    .cc-desc{margin-bottom:10px!important;font-size:12.5px!important;line-height:1.5!important}
    .cc-b{padding:8px 14px!important;font-size:12.5px!important}
    .cc-b-custom{font-size:12px!important;padding:4px 0!important}
    .cc-emoji{font-size:20px!important}
    .cc-overlay{padding:8px!important;align-items:center!important}
    .cc-modal{max-height:calc(100vh - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:var(--ck-radius)!important}
    .cc-grab{display:none!important}
    .cc-m-head{padding:12px 16px 10px!important}
    .cc-m-body{padding:10px 16px!important}
    .cc-m-foot{padding:10px 16px calc(10px + var(--ck-safe))!important}
    .cc-m-title{font-size:15px!important}
    .cc-m-intro{font-size:13px!important;margin-bottom:10px!important}
    .cc-cat-head{padding:9px 12px!important}
    .cc-cat-name{font-size:13px!important}
    .cc-cat-sub{font-size:11px!important}
    .cc-cat-desc{font-size:12px!important;padding-bottom:8px!important}
    .cc-cat{margin-bottom:4px!important}
}

@media(prefers-reduced-motion:reduce){
    .cc-banner,.cc-modal,.cc-overlay,
    .cc-tog-tr,.cc-tog-tr::after,.cc-cat-body,.cc-chev,.cc-b,.cc-cat,.cc-m-close{
        transition-duration:.01ms!important;
    }
}