/* =========================================================
   RealCash — cookie consent banner
   ========================================================= */

.cc {
    /* visible only when state changes */
}

.cc[data-cc-state="hidden"] .cc__bar,
.cc[data-cc-state="hidden"] .cc__modal {
    display: none;
}

.cc[data-cc-state="bar"] .cc__bar     { display: block; }
.cc[data-cc-state="bar"] .cc__modal   { display: none;  }

.cc[data-cc-state="modal"] .cc__bar   { display: none;  }
.cc[data-cc-state="modal"] .cc__modal { display: flex;  }

/* =========================================================
   Bottom bar
   ========================================================= */
.cc__bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-cookie);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 32px rgba(28, 25, 23, 0.10);
    animation: ccSlideUp var(--d-base) var(--ease-out);
}

@keyframes ccSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.cc__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
}

.cc__bar-text {
    flex: 1 1 360px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fz-sm);
    line-height: var(--lh-normal);
}

.cc__bar-text strong { color: var(--color-text); }

.cc__link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-light);
    text-underline-offset: 2px;
    margin-left: 4px;
}

.cc__link:hover { color: var(--color-primary-dark); }

.cc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

@media (max-width: 600px) {
    .cc__bar-inner { padding-block: var(--sp-3); }
    .cc__actions   { width: 100%; }
    .cc__actions .btn { flex: 1 1 0; min-width: 0; }
}

/* =========================================================
   Settings modal
   ========================================================= */
.cc__modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.cc__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: ccFade var(--d-base) var(--ease-out);
}

@keyframes ccFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cc__modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 64px rgba(28, 25, 23, 0.2);
    overflow: hidden;
    animation: ccPop var(--d-base) var(--ease-out);
}

@keyframes ccPop {
    from { transform: translateY(20px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.cc__modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--color-border);
}

.cc__modal-head h2 {
    font-size: var(--fz-xl);
    margin: 0;
}

.cc__close {
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--color-surface-alt);
    color: var(--color-text-soft);
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--d-fast) var(--ease-out),
                color var(--d-fast) var(--ease-out);
}

.cc__close:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.cc__modal-body {
    padding: var(--sp-6);
    overflow-y: auto;
    flex: 1 1 auto;
}

.cc__intro {
    margin: 0 0 var(--sp-5);
    color: var(--color-text-muted);
    font-size: var(--fz-sm);
    line-height: var(--lh-relaxed);
}

.cc__categories {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.cc__category {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    transition: border-color var(--d-fast) var(--ease-out);
}

.cc__category:has(input:checked) {
    border-color: var(--color-primary-light);
    background: var(--color-primary-soft);
}

.cc__category-label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
}

.cc__category-label input[disabled] { cursor: not-allowed; }

.cc__category-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--color-border-strong);
    position: relative;
    cursor: pointer;
    transition: background-color var(--d-fast) var(--ease-out);
    flex-shrink: 0;
    margin: 0;
}

.cc__category-label input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform var(--d-fast) var(--ease-out);
}

.cc__category-label input[type="checkbox"]:checked {
    background: var(--color-primary);
}

.cc__category-label input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}

.cc__category-label input[type="checkbox"][disabled]:checked {
    background: var(--color-success);
}

.cc__category-name {
    flex: 1;
    font-size: var(--fz-md);
}

.cc__category-status--required {
    font-size: var(--fz-xs);
    font-weight: 600;
    color: var(--color-success);
    background: var(--color-success-soft);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cc__category-desc {
    margin: 8px 0 0 50px;
    color: var(--color-text-soft);
    font-size: var(--fz-sm);
    line-height: var(--lh-normal);
}

@media (max-width: 480px) {
    .cc__category-desc { margin-left: 0; }
}

.cc__modal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

@media (max-width: 600px) {
    .cc__modal-foot { flex-direction: column-reverse; }
    .cc__modal-foot .btn { width: 100%; }
}

/* Lock body scroll while modal is open */
body.cc-locked { overflow: hidden; }