/**
 * Osmova Cookie Consent — front-end styles.
 *
 * Neutral defaults, fully overridable via CSS custom properties.
 * All selectors are namespaced under .osmova-consent__* to avoid collisions.
 * No Tailwind utilities — this file is enqueued standalone without a build step.
 *
 * Design tokens (all overridable by the active theme):
 *   --oc-font-size, --oc-font-family
 *   --oc-banner-bg, --oc-banner-color, --oc-banner-border
 *   --oc-panel-bg, --oc-panel-color
 *   --oc-btn-primary-bg, --oc-btn-primary-color
 *   --oc-btn-secondary-bg, --oc-btn-secondary-color
 *   --oc-btn-refuse-bg, --oc-btn-refuse-color
 *   --oc-overlay-bg
 *   --oc-radius, --oc-shadow, --oc-z
 */

:root {
    --oc-font-size:           0.9375rem;
    --oc-font-family:         inherit;
    --oc-banner-bg:           #fff;
    --oc-banner-color:        #111827;
    --oc-banner-border:       1px solid #e5e7eb;
    --oc-panel-bg:            #fff;
    --oc-panel-color:         #111827;
    --oc-btn-primary-bg:      #111827;
    --oc-btn-primary-color:   #fff;
    --oc-btn-secondary-bg:    #f3f4f6;
    --oc-btn-secondary-color: #111827;
    --oc-btn-refuse-bg:       #f3f4f6;
    --oc-btn-refuse-color:    #111827;
    --oc-overlay-bg:          rgba(0,0,0,0.45);
    --oc-radius:              0.5rem;
    --oc-shadow:              0 4px 24px rgba(0,0,0,0.12);
    --oc-z:                   99999;
}

/* ---- Banner ---- */

.osmova-consent__banner {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          var(--oc-z);
    background:       var(--oc-banner-bg);
    color:            var(--oc-banner-color);
    border-top:       var(--oc-banner-border);
    box-shadow:       0 -2px 16px rgba(0,0,0,0.08);
    font-family:      var(--oc-font-family);
    font-size:        var(--oc-font-size);
}

.osmova-consent__banner-inner {
    max-width:    60rem;
    margin:       0 auto;
    padding:      1.25rem 1.5rem;
    display:      flex;
    flex-wrap:    wrap;
    align-items:  center;
    gap:          0.75rem 1.5rem;
}

.osmova-consent__banner-title {
    font-weight:  700;
    font-size:    1rem;
    margin:       0;
    flex:         0 0 100%;
}

.osmova-consent__banner-body {
    margin:       0;
    flex:         1 1 16rem;
    line-height:  1.5;
}

.osmova-consent__policy-link {
    color:           inherit;
    text-decoration: underline;
    white-space:     nowrap;
}

.osmova-consent__banner-actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.5rem;
    align-items: center;
    flex:        0 0 auto;
}

/* ---- Buttons (shared) ---- */

.osmova-consent__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-height:      2.75rem;
    padding:         0.5rem 1.125rem;
    border:          1px solid transparent;
    border-radius:   var(--oc-radius);
    font-size:       var(--oc-font-size);
    font-family:     var(--oc-font-family);
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    line-height:     1;
    transition:      opacity 0.15s;
}
.osmova-consent__btn:hover { opacity: 0.85; }
.osmova-consent__btn:focus-visible {
    outline:        2px solid var(--oc-btn-primary-bg);
    outline-offset: 2px;
}

.osmova-consent__btn--accept {
    background: var(--oc-btn-primary-bg);
    color:      var(--oc-btn-primary-color);
}

.osmova-consent__btn--refuse {
    background: var(--oc-btn-refuse-bg);
    color:      var(--oc-btn-refuse-color);
    border-color: #d1d5db;
}

.osmova-consent__btn--manage {
    background: var(--oc-btn-secondary-bg);
    color:      var(--oc-btn-secondary-color);
}

.osmova-consent__btn--close {
    background:    transparent;
    border:        none;
    font-size:     1.4rem;
    line-height:   1;
    padding:       0.25rem 0.5rem;
    min-width:     2.75rem;
    min-height:    2.75rem;
    color:         inherit;
    margin-left:   auto;
}

/* ---- Modal overlay ---- */

.osmova-consent__modal {
    position:     fixed;
    inset:        0;
    z-index:      calc(var(--oc-z) + 1);
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-family:  var(--oc-font-family);
    font-size:    var(--oc-font-size);
}

.osmova-consent__modal[hidden] {
    display: none;
}

.osmova-consent__overlay {
    position:   absolute;
    inset:      0;
    background: var(--oc-overlay-bg);
}

/* ---- Modal panel ---- */

.osmova-consent__panel {
    position:     relative;
    background:   var(--oc-panel-bg);
    color:        var(--oc-panel-color);
    border-radius: var(--oc-radius);
    box-shadow:   var(--oc-shadow);
    max-width:    36rem;
    width:        calc(100% - 2rem);
    max-height:   calc(100vh - 4rem);
    overflow-y:   auto;
    display:      flex;
    flex-direction: column;
}

.osmova-consent__panel-header {
    display:     flex;
    align-items: center;
    padding:     1.25rem 1.5rem 0;
    gap:         0.5rem;
}

.osmova-consent__panel-title {
    font-size:   1.125rem;
    font-weight: 700;
    margin:      0;
    flex:        1;
}

.osmova-consent__panel-desc {
    padding:     0.75rem 1.5rem;
    margin:      0;
    color:       inherit;
    opacity:     0.75;
    line-height: 1.5;
    font-size:   0.875rem;
}

/* ---- Category list ---- */

.osmova-consent__category-list {
    list-style:  none;
    margin:      0;
    padding:     0 1.5rem;
    flex:        1;
    overflow-y:  auto;
}

.osmova-consent__category-item {
    padding:     0.875rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.osmova-consent__category-item:last-child { border-bottom: none; }

.osmova-consent__category-label {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    cursor:      pointer;
}

.osmova-consent__toggle {
    flex-shrink:   0;
    width:         1.125rem;
    height:        1.125rem;
    margin-top:    0.125rem;
    accent-color:  var(--oc-btn-primary-bg);
    cursor:        pointer;
}
.osmova-consent__toggle:disabled { cursor: not-allowed; opacity: 0.6; }

.osmova-consent__category-text {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    line-height:    1.4;
}

.osmova-consent__category-desc {
    font-size:  0.8125rem;
    opacity:    0.7;
    display:    block;
}

.osmova-consent__category-required {
    font-size:    0.75rem;
    font-style:   italic;
    opacity:      0.65;
    display:      block;
}

/* ---- Modal footer ---- */

.osmova-consent__panel-footer {
    display:     flex;
    gap:         0.5rem;
    padding:     1rem 1.5rem 1.25rem;
    flex-wrap:   wrap;
    justify-content: flex-end;
    border-top:  1px solid #f3f4f6;
}

/* ---- Reduced-motion ---- */

@media (prefers-reduced-motion: reduce) {
    .osmova-consent__btn { transition: none; }
}

/* ---- Responsive ---- */

@media (max-width: 37.5em) {
    .osmova-consent__banner-inner {
        flex-direction: column;
        align-items:    stretch;
        gap:            0.6rem;
        padding:        1rem;
    }
    .osmova-consent__banner-title {
        font-size: 0.95rem;
    }
    .osmova-consent__banner-body {
        flex: 0 1 auto;
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .osmova-consent__banner-actions {
        flex-direction: column;
        gap: 0.4rem;
    }
    .osmova-consent__btn {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.55rem 1rem;
        justify-content: center;
    }
}