/* ============================================================
   TopToy GDPR Cookie Banner — Frontend Styles
   ============================================================ */

:root {
    --toptoy-accent:       #ff6b35;
    --toptoy-accent-hover: #e85a24;
    --toptoy-bg:           #ffffff;
    --toptoy-text:         #1a1a1a;
    --toptoy-text-muted:   #6b7280;
    --toptoy-border:       #e5e7eb;
    --toptoy-shadow:       0 -4px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    --toptoy-modal-shadow: 0 20px 60px rgba(0,0,0,.18);
    --toptoy-radius:       14px;
    --toptoy-radius-btn:   8px;
    --toptoy-font:         -apple-system, 'Segoe UI', Roboto, sans-serif;
    --toptoy-z:            999990;
    --toptoy-transition:   0.3s cubic-bezier(.4,0,.2,1);
}

/* Dark theme */
[data-toptoy-theme="dark"] {
    --toptoy-bg:       #1e1e2e;
    --toptoy-text:     #e2e8f0;
    --toptoy-text-muted: #94a3b8;
    --toptoy-border:   #334155;
    --toptoy-shadow:   0 -4px 32px rgba(0,0,0,.4);
}

/* Hidden state */
.toptoy-hidden { display: none !important; }

/* ---- Wrapper ---- */
#toptoy-cookie-wrapper {
    font-family:  var(--toptoy-font);
    font-size:    15px;
    line-height:  1.5;
    color:        var(--toptoy-text);
    box-sizing:   border-box;
}
#toptoy-cookie-wrapper *, #toptoy-cookie-wrapper *::before, #toptoy-cookie-wrapper *::after {
    box-sizing: inherit;
}

/* ---- Banner ---- */
#toptoy-cookie-banner {
    position:        fixed;
    z-index:         var(--toptoy-z);
    left:            0;
    right:           0;
    bottom:          0;
    background:      var(--toptoy-bg);
    box-shadow:      var(--toptoy-shadow);
    border-top:      3px solid var(--toptoy-accent);
    padding:         20px 24px;
    animation:       toptoySlideUp var(--toptoy-transition) both;
}

/* Position variants */
.toptoy-pos-bottom-left #toptoy-cookie-banner {
    left:          16px;
    right:         auto;
    bottom:        16px;
    max-width:     480px;
    border-radius: var(--toptoy-radius);
    border-top:    none;
    border-left:   4px solid var(--toptoy-accent);
    border:        1px solid var(--toptoy-border);
    border-left:   4px solid var(--toptoy-accent);
    animation:     toptoyFadeUp var(--toptoy-transition) both;
}

.toptoy-pos-bottom-right #toptoy-cookie-banner {
    left:          auto;
    right:         16px;
    bottom:        16px;
    max-width:     480px;
    border-radius: var(--toptoy-radius);
    border-top:    none;
    border-left:   4px solid var(--toptoy-accent);
    border:        1px solid var(--toptoy-border);
    border-left:   4px solid var(--toptoy-accent);
    animation:     toptoyFadeUp var(--toptoy-transition) both;
}

@keyframes toptoySlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes toptoyFadeUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.toptoy-banner-inner {
    max-width:      1140px;
    margin:         0 auto;
    display:        flex;
    align-items:    center;
    gap:            24px;
    flex-wrap:      wrap;
}

.toptoy-banner-text { flex: 1 1 280px; }

.toptoy-banner-text h3 {
    margin:      0 0 6px;
    font-size:   17px;
    font-weight: 700;
    color:       var(--toptoy-text);
    line-height: 1.3;
}

.toptoy-banner-text p {
    margin:    0 0 8px;
    font-size: 14px;
    color:     var(--toptoy-text-muted);
}

.toptoy-banner-text a {
    font-size:      13px;
    color:          var(--toptoy-accent);
    text-decoration:none;
}
.toptoy-banner-text a:hover { text-decoration: underline; }

.toptoy-banner-actions {
    display:     flex;
    gap:         10px;
    align-items: center;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

/* ---- Buttons ---- */
.toptoy-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    padding:        10px 20px;
    border-radius:  var(--toptoy-radius-btn);
    font-size:      14px;
    font-weight:    600;
    font-family:    var(--toptoy-font);
    cursor:         pointer;
    border:         2px solid transparent;
    transition:     all 0.2s ease;
    white-space:    nowrap;
    line-height:    1;
    text-decoration:none;
}

.toptoy-btn-primary {
    background: var(--toptoy-accent);
    color:      #fff;
    border-color: var(--toptoy-accent);
}
.toptoy-btn-primary:hover {
    background:  var(--toptoy-accent-hover);
    border-color:var(--toptoy-accent-hover);
    transform:   translateY(-1px);
    box-shadow:  0 4px 14px rgba(255,107,53,.35);
}

.toptoy-btn-secondary {
    background:   transparent;
    color:        var(--toptoy-text);
    border-color: var(--toptoy-border);
}
.toptoy-btn-secondary:hover {
    border-color: var(--toptoy-accent);
    color:        var(--toptoy-accent);
}

.toptoy-btn-outline {
    background:   transparent;
    color:        var(--toptoy-text-muted);
    border-color: transparent;
    padding-left: 8px;
    padding-right:8px;
}
.toptoy-btn-outline:hover {
    color:        var(--toptoy-accent);
    background:   rgba(255,107,53,.06);
}

/* ---- Modal Overlay ---- */
#toptoy-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.55);
    z-index:    calc(var(--toptoy-z) + 1);
    display:    flex;
    align-items:center;
    justify-content:center;
    padding:    16px;
    animation:  toptoyFadeIn 0.2s ease both;
}
@keyframes toptoyFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Modal ---- */
#toptoy-modal {
    background:    var(--toptoy-bg);
    border-radius: var(--toptoy-radius);
    box-shadow:    var(--toptoy-modal-shadow);
    max-width:     560px;
    width:         100%;
    max-height:    90vh;
    overflow-y:    auto;
    animation:     toptoyModalIn 0.25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes toptoyModalIn {
    from { transform: scale(.92) translateY(20px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.toptoy-modal-header {
    display:       flex;
    align-items:   center;
    justify-content:space-between;
    padding:       20px 24px 16px;
    border-bottom: 1px solid var(--toptoy-border);
}
.toptoy-modal-header h2 {
    margin:     0;
    font-size:  20px;
    font-weight:700;
    color:      var(--toptoy-text);
}

.toptoy-modal-close {
    background: transparent;
    border:     none;
    cursor:     pointer;
    padding:    6px;
    color:      var(--toptoy-text-muted);
    border-radius: 6px;
    display:    flex;
    transition: all 0.15s;
}
.toptoy-modal-close:hover {
    background: var(--toptoy-border);
    color:      var(--toptoy-text);
}

.toptoy-modal-body {
    padding: 20px 24px;
}
.toptoy-modal-body > p {
    margin:    0 0 20px;
    font-size: 14px;
    color:     var(--toptoy-text-muted);
}

.toptoy-modal-footer {
    display:       flex;
    gap:           10px;
    justify-content:flex-end;
    padding:       16px 24px 20px;
    border-top:    1px solid var(--toptoy-border);
}

/* ---- Category Items ---- */
.toptoy-category {
    border:        1px solid var(--toptoy-border);
    border-radius: 10px;
    padding:       16px;
    margin-bottom: 10px;
    transition:    border-color 0.2s;
}
.toptoy-category:last-child { margin-bottom: 0; }
.toptoy-category:has(.toptoy-toggle:checked) {
    border-color: var(--toptoy-accent);
    background:   rgba(255,107,53,.03);
}

.toptoy-category-header {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.toptoy-category-info { flex: 1; }
.toptoy-category-info strong {
    display:     block;
    font-size:   15px;
    font-weight: 600;
    color:       var(--toptoy-text);
    margin-bottom: 3px;
}
.toptoy-category-info span {
    font-size: 13px;
    color:     var(--toptoy-text-muted);
}

/* Toggle Switch */
.toptoy-toggle-wrap {
    flex-shrink: 0;
    position:    relative;
}
.toptoy-toggle {
    position:  absolute;
    opacity:   0;
    width:     0;
    height:    0;
}
.toptoy-toggle-track {
    display:       block;
    width:         48px;
    height:        26px;
    border-radius: 999px;
    background:    var(--toptoy-border);
    cursor:        pointer;
    transition:    background 0.25s;
    position:      relative;
}
.toptoy-toggle-track::after {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    #fff;
    box-shadow:    0 1px 4px rgba(0,0,0,.2);
    transition:    transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.toptoy-toggle:checked + .toptoy-toggle-track {
    background: var(--toptoy-accent);
}
.toptoy-toggle:checked + .toptoy-toggle-track::after {
    transform: translateX(22px);
}
.toptoy-toggle:disabled + .toptoy-toggle-track {
    opacity: 0.5;
    cursor:  not-allowed;
}
.toptoy-toggle:focus-visible + .toptoy-toggle-track {
    outline: 2px solid var(--toptoy-accent);
    outline-offset: 2px;
}

.toptoy-badge-required {
    display:       inline-block;
    background:    #dcfce7;
    color:         #166534;
    font-size:     11px;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: 999px;
    margin-left:   8px;
    vertical-align: middle;
}
[data-toptoy-theme="dark"] .toptoy-badge-required {
    background: #14532d;
    color:      #86efac;
}

/* ---- Revoke Button ---- */
.toptoy-revoke-btn {
    position:       fixed;
    bottom:         20px;
    left:           20px;
    z-index:        calc(var(--toptoy-z) - 1);
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    padding:        9px 16px;
    background:     var(--toptoy-bg);
    color:          var(--toptoy-text-muted);
    border:         1px solid var(--toptoy-border);
    border-radius:  999px;
    font-size:      13px;
    font-family:    var(--toptoy-font);
    font-weight:    500;
    cursor:         pointer;
    box-shadow:     0 2px 12px rgba(0,0,0,.10);
    transition:     all 0.2s ease;
}
.toptoy-revoke-btn:hover {
    border-color: var(--toptoy-accent);
    color:        var(--toptoy-accent);
    transform:    translateY(-1px);
    box-shadow:   0 4px 16px rgba(0,0,0,.14);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .toptoy-banner-inner     { flex-direction: column; align-items: flex-start; gap: 16px; }
    .toptoy-banner-actions   { width: 100%; }
    .toptoy-btn              { flex: 1; text-align: center; justify-content: center; }
    .toptoy-modal-footer     { flex-direction: column; }
    .toptoy-modal-footer .toptoy-btn { width: 100%; }
    .toptoy-pos-bottom-left #toptoy-cookie-banner,
    .toptoy-pos-bottom-right #toptoy-cookie-banner {
        left: 8px; right: 8px; max-width: 100%;
    }
}