/* ==============================================
   Consent Suite Austria – Banner Styles
   DSGVO / DSB konform
   ============================================== */

:root {
    --csa-primary:  #1a56db;
    --csa-bg:       #ffffff;
    --csa-surface:  #f8fafc;
    --csa-border:   #e2e8f0;
    --csa-text:     #1e293b;
    --csa-muted:    #64748b;
    --csa-radius:   16px;
    --csa-shadow:   0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
}

/* ── Force hide – overrides any theme [hidden] weirdness ── */
.csa-hidden,
.csa-hidden.csa-banner,
.csa-hidden.csa-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Overlay ── */
.csa-overlay[hidden] { display: none !important; }
.csa-overlay:not([hidden]) { display: block !important; }
.csa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 999990;
    animation: csa-fade-in .2s ease;
}

/* ── Banner ── */
.csa-banner[hidden] { display: none !important; }
.csa-banner:not([hidden]) { display: flex !important; }
.csa-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    width: min(540px, calc(100vw - 2rem));
    max-height: 90vh;
    background: var(--csa-bg);
    border-radius: var(--csa-radius);
    box-shadow: var(--csa-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: csa-pop-in .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes csa-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes csa-pop-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Views ── */
.csa-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
}

/* ── Header ── */
.csa-banner-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1.5rem 0;
    flex-shrink: 0;
}
.csa-banner-icon { font-size: 1.75rem; line-height: 1; }
.csa-banner-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--csa-text);
}
.csa-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--csa-muted);
    padding: .25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color .15s;
    flex-shrink: 0;
}
.csa-back-btn:hover         { color: var(--csa-text); }
.csa-back-btn:focus-visible  { outline: 2px solid var(--csa-primary); outline-offset: 2px; }

/* ── Text ── */
.csa-banner-text {
    padding: 1rem 1.5rem 0;
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--csa-muted);
    flex-shrink: 0;
}

/* ── Links ── */
.csa-banner-links {
    display: flex;
    gap: 1rem;
    padding: .5rem 1.5rem 0;
    flex-shrink: 0;
}
.csa-banner-links a {
    font-size: .8rem;
    color: var(--csa-primary);
    text-decoration: underline;
}
.csa-banner-links a:focus-visible { outline: 2px solid var(--csa-primary); outline-offset: 2px; }

/* ── Actions ── */
.csa-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 1.25rem 1.5rem 1.5rem;
    flex-shrink: 0;
    border-top: 1px solid var(--csa-border);
    margin-top: 1rem;
    background: var(--csa-surface);
}

/* ── Buttons ── */
.csa-btn {
    padding: .6rem 1.1rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    transition: all .15s;
    white-space: nowrap;
}
.csa-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

.csa-btn-primary {
    background: var(--csa-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(26,86,219,.3);
}
.csa-btn-primary:hover { filter: brightness(1.1); }

.csa-btn-secondary {
    background: var(--csa-surface);
    color: var(--csa-text);
    border: 1px solid var(--csa-border);
}
.csa-btn-secondary:hover { background: #e2e8f0; }

.csa-btn-outline {
    background: transparent;
    color: var(--csa-primary);
    border: 1px solid var(--csa-primary);
}
.csa-btn-outline:hover { background: rgba(26,86,219,.06); }

/* ── Categories ── */
.csa-categories {
    overflow-y: auto;
    padding: .75rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.csa-category {
    border: 1px solid var(--csa-border);
    border-radius: 10px;
    padding: .875rem 1rem;
    background: var(--csa-bg);
    transition: border-color .15s;
}
.csa-category:has(.csa-cat-toggle.active) { border-color: var(--csa-primary); }

.csa-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .4rem;
}
.csa-category-info { display: flex; align-items: center; gap: .5rem; flex: 1; }
.csa-category-label { font-weight: 700; font-size: .9rem; color: var(--csa-text); }

.csa-badge-locked {
    display: inline-block;
    padding: .1rem .45rem;
    background: #dcfce7;
    color: #15803d;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
}

.csa-switch-locked {
    color: #15803d;
    display: flex;
    align-items: center;
}

.csa-category-desc {
    margin: 0 0 .5rem;
    font-size: .8rem;
    color: var(--csa-muted);
    line-height: 1.5;
}

/* ── Toggle Switch ── */
.csa-cat-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.csa-cat-toggle:focus-visible .csa-switch-track { outline: 3px solid #f59e0b; outline-offset: 2px; }
.csa-switch-track {
    display: flex;
    align-items: center;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 50px;
    padding: 2px;
    transition: background .2s;
}
.csa-switch-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: transform .2s;
}
.csa-cat-toggle[aria-checked="true"] .csa-switch-track  { background: var(--csa-primary); }
.csa-cat-toggle[aria-checked="true"] .csa-switch-thumb  { transform: translateX(20px); }
.csa-cat-toggle.active .csa-switch-track  { background: var(--csa-primary); }
.csa-cat-toggle.active .csa-switch-thumb  { transform: translateX(20px); }

/* ── Cookie Details ── */
.csa-cookie-details {
    margin-top: .5rem;
}
.csa-cookie-details summary {
    font-size: .78rem;
    color: var(--csa-primary);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.csa-cookie-details summary::before { content: '▶'; font-size: .6rem; transition: transform .2s; }
.csa-cookie-details[open] summary::before { transform: rotate(90deg); }
.csa-cookie-details summary:focus-visible { outline: 2px solid var(--csa-primary); outline-offset: 2px; border-radius: 2px; }

.csa-cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: .5rem;
    font-size: .75rem;
}
.csa-cookie-table th {
    background: var(--csa-surface);
    padding: .3rem .5rem;
    text-align: left;
    color: var(--csa-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--csa-border);
}
.csa-cookie-table td {
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--csa-border);
    color: var(--csa-text);
    vertical-align: top;
}
.csa-cookie-table tr:last-child td { border-bottom: none; }
.csa-cookie-table code {
    background: var(--csa-surface);
    padding: .1rem .3rem;
    border-radius: 3px;
    font-size: .7rem;
}

/* ── Re-open Button ── */
.csa-reopen-btn {
    position: fixed;
    bottom: 6rem;
    left: 1.5rem;
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    background: var(--csa-primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(26,86,219,.3);
    transition: filter .15s, transform .15s;
    opacity: .85;
}
.csa-reopen-btn:hover         { filter: brightness(1.1); transform: translateY(-1px); opacity: 1; }
.csa-reopen-btn:focus-visible  { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* ── Powered By ── */
.csa-powered-by {
    text-align: center;
    padding: .5rem;
    font-size: .7rem;
    color: var(--csa-muted);
    border-top: 1px solid var(--csa-border);
    background: var(--csa-surface);
}
.csa-powered-by strong { color: var(--csa-text); }

/* ── Responsive ── */
@media (max-width: 480px) {
    .csa-banner { width: calc(100vw - 1.5rem); border-radius: 12px; }
    .csa-banner-actions { flex-direction: column; }
    .csa-btn { width: 100%; justify-content: center; }
}