/* ==========================================================================
   SO Cookie Consent — Banner Styles
   Designed to match Salons Objekts website aesthetic
   ========================================================================== */

:root {
    --so-cookie-primary: #009688;
    --so-cookie-primary-dark: #00796B;
    --so-cookie-primary-light: #B2DFDB;
    --so-cookie-text: #333333;
    --so-cookie-text-light: #666666;
    --so-cookie-white: #FFFFFF;
    --so-cookie-bg: rgba(255, 255, 255, 0.97);
    --so-cookie-border: #E0E0E0;
    --so-cookie-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
    --so-cookie-radius: 16px;
    --so-cookie-radius-sm: 8px;
    --so-cookie-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --so-cookie-font: inherit;
}

/* ==========================================================================
   Banner Container
   ========================================================================== */

.so-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    padding: 0 16px 16px;
    font-family: var(--so-cookie-font);
    animation: soCookieSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes soCookieSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes soCookieSlideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

.so-cookie-banner--hiding {
    animation: soCookieSlideDown 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.so-cookie-banner__inner {
    max-width: 960px;
    margin: 0 auto;
    background: var(--so-cookie-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--so-cookie-radius);
    box-shadow: var(--so-cookie-shadow);
    border: 1px solid rgba(0, 150, 136, 0.12);
    padding: 24px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

/* ==========================================================================
   Cookie Icon
   ========================================================================== */

.so-cookie-banner__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--so-cookie-primary), var(--so-cookie-primary-dark));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--so-cookie-white);
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.3);
}

.so-cookie-banner__icon img {
    width: 32px;
    height: 32px;
    display: block;
}

/* ==========================================================================
   Content Area
   ========================================================================== */

.so-cookie-banner__content {
    flex: 1;
    min-width: 240px;
}

.so-cookie-banner__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--so-cookie-text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.so-cookie-banner__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--so-cookie-text-light);
    margin: 0;
}

.so-cookie-banner__link {
    color: var(--so-cookie-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--so-cookie-transition);
    margin-left: 4px;
}

.so-cookie-banner__link:hover {
    color: var(--so-cookie-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.so-cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.so-cookie-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--so-cookie-font);
    border: none;
    border-radius: var(--so-cookie-radius-sm);
    cursor: pointer;
    transition: all var(--so-cookie-transition);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
}

.so-cookie-btn:focus-visible {
    outline: 2px solid var(--so-cookie-primary);
    outline-offset: 2px;
}

/* Primary: Accept All */
.so-cookie-btn--primary {
    background: linear-gradient(135deg, var(--so-cookie-primary), var(--so-cookie-primary-dark));
    color: var(--so-cookie-white);
    box-shadow: 0 2px 8px rgba(0, 150, 136, 0.3);
}

.so-cookie-btn--primary:hover {
    background: linear-gradient(135deg, var(--so-cookie-primary-dark), #004D40);
    box-shadow: 0 4px 16px rgba(0, 150, 136, 0.4);
    transform: translateY(-1px);
}

.so-cookie-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 150, 136, 0.3);
}

/* Secondary: Necessary Only */
.so-cookie-btn--secondary {
    background: transparent;
    color: var(--so-cookie-text);
    border: 1.5px solid var(--so-cookie-border);
}

.so-cookie-btn--secondary:hover {
    border-color: var(--so-cookie-primary);
    color: var(--so-cookie-primary);
    background: rgba(0, 150, 136, 0.04);
}

/* Ghost: Settings */
.so-cookie-btn--ghost {
    background: transparent;
    color: var(--so-cookie-text-light);
    padding: 11px 16px;
}

.so-cookie-btn--ghost svg {
    transition: transform var(--so-cookie-transition);
}

.so-cookie-btn--ghost:hover {
    color: var(--so-cookie-primary);
}

.so-cookie-btn--ghost:hover svg {
    transform: rotate(60deg);
}

/* ==========================================================================
   Settings Panel
   ========================================================================== */

.so-cookie-settings {
    width: 100%;
    border-top: 1px solid var(--so-cookie-border);
    margin-top: 4px;
    padding-top: 20px;
    animation: soCookieFadeIn 0.35s ease forwards;
}

@keyframes soCookieFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.so-cookie-settings__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.so-cookie-settings__actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   Cookie Category
   ========================================================================== */

.so-cookie-category {
    background: #F8F9FA;
    border-radius: var(--so-cookie-radius-sm);
    padding: 16px 18px;
    transition: background var(--so-cookie-transition);
}

.so-cookie-category:hover {
    background: #F0F4F3;
}

.so-cookie-category__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.so-cookie-category__info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.so-cookie-category__info strong {
    font-size: 14px;
    color: var(--so-cookie-text);
}

.so-cookie-category__desc {
    font-size: 12.5px;
    color: var(--so-cookie-text-light);
    margin: 8px 0 0 54px;
    line-height: 1.5;
}

/* Badge */
.so-cookie-badge {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
}

.so-cookie-badge--always {
    background: var(--so-cookie-primary-light);
    color: var(--so-cookie-primary-dark);
}

/* ==========================================================================
   Toggle Switch
   ========================================================================== */

.so-cookie-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.so-cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.so-cookie-toggle__slider {
    position: absolute;
    inset: 0;
    background: #CCC;
    border-radius: 22px;
    transition: all var(--so-cookie-transition);
}

.so-cookie-toggle__slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: var(--so-cookie-white);
    border-radius: 50%;
    transition: transform var(--so-cookie-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.so-cookie-toggle input:checked+.so-cookie-toggle__slider {
    background: var(--so-cookie-primary);
}

.so-cookie-toggle input:checked+.so-cookie-toggle__slider::before {
    transform: translateX(18px);
}

.so-cookie-toggle input:disabled+.so-cookie-toggle__slider {
    opacity: 0.6;
    cursor: not-allowed;
}

.so-cookie-toggle input:focus-visible+.so-cookie-toggle__slider {
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.25);
}

/* ==========================================================================
   Re-open Button (floating cookie icon)
   Uses CSS background-image with data URI — immune to theme overrides
   ========================================================================== */

@keyframes soCookiePop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

button#so-cookie-reopen.so-cookie-reopen {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 999998 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #009688 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80.65 70.34'%3E%3Cpath fill='%23ffffff' d='M46.49.04c-4.34-.18-8.62.21-12.03.97-5.01%2C1.12-6.13%2C3.14-6.13%2C3.14%2C0%2C0-5.06-.52-13.77%2C6.15s-8.97%2C13.29-8.97%2C13.29C5.58%2C23.6.16%2C26.78%2C0%2C39.29c-.16%2C12.51%2C7.46%2C18.25%2C7.46%2C18.25%2C0%2C0%2C3.34%2C4.17%2C6.26%2C6.73%2C2.92%2C2.55%2C9.44%2C5.73%2C19.24%2C6.05%2C9.8.31%2C18.88-3.49%2C21.8-5.32%2C2.92-1.82%2C2.24-5.37%2C2.24-5.37%2C4.69-2.19%2C6.36-4.88%2C6.36-4.88l3.69%2C1.5c3.1%2C1.25%2C8.41-2.58%2C12.39-15.56%2C3.98-12.98-3.09-20.73-3.09-20.73%2C0%2C0%2C.47-9.71-17.52-17.41C55.21%2C1%2C50.83.23%2C46.49.05h0ZM43.41%2C2.57c2.14%2C0%2C2.32.81%2C3.17%2C1.18.85.37%2C3.5%2C1.25%2C3.32%2C2.84-.14%2C1.18-1.54%2C1.64-2.06%2C1.7-1.4.15-2.41-.54-3.3-.39-.89.15-2.23%2C1.01-3.74.64%2C0%2C0-2.07-.37-2.1-1.62s1.95-4.35%2C4.72-4.35h0ZM23.97%2C9.55c1.3.16%2C2.83%2C1.31%2C2.44%2C2.91-.45%2C1.88-2.24%2C3.21-3.16%2C3.35-3.61.56-4.61.42-5.7-1.11-1.25-1.77%2C1.81-4.03%2C1.81-4.03%2C1.89-1.14%2C2.45-1.09%2C4.61-1.12h0ZM55.95%2C14.26c.57%2C0%2C1.23.11%2C1.97.41%2C1.84.76%2C3.4%2C2.96%2C3%2C4.31-1.12%2C3.78-4.07%2C2.02-5.22%2C2.1-1.16.07-4.89%2C1.17-5.34-2.4-.23-1.86.67-2.34.67-2.34%2C1.61-1.18%2C1.87-.94%2C2.46-1.29.37-.22%2C1.2-.79%2C2.45-.8h0ZM38.17%2C20.26c.24%2C0%2C.5.02.81.05%2C1.3.16%2C3.46%2C1.9%2C2.92%2C4.57-.38%2C1.89-1.75%2C4.02-4.71%2C4.53-3.7.64-6.03-2.7-6.03-4.57s1.22-3.04%2C1.22-3.04c1.61-1.18%2C2.76-.72%2C3.38-.77.55-.05.75-.79%2C2.41-.77h0ZM68.2%2C24.23c.94.05%2C1.72%2C1.15%2C1.67%2C3.5-.05%2C2.35-1.41%2C3.13-2.29%2C3.13s-3.11-1.61-3.18-3.02c-.06-1.04%2C1.67-1.67%2C2.09-2.14s.78-1.51%2C1.72-1.46h0ZM17.14%2C25.57c.25%2C0%2C.52.03.82.06%2C1.3.16%2C3.35%2C1.71%2C2.81%2C4.39-.38%2C1.89-1.65%2C4.16-4.6%2C4.71-4.18.79-5.85-2.55-5.85-4.43s.96-2.74.96-2.74c1.61-1.18%2C2.61-.83%2C3.16-1.14.48-.27.96-.9%2C2.69-.86h0ZM49.83%2C34.96c.36-.02.82%2C0%2C1.42.11.97.16%2C3.44%2C1.98%2C3.11%2C4.28-.36%2C2.45-1.9%2C4.64-5.81%2C4.75-3.91.11-5.33-2.95-5.34-4.83%2C0-1.88%2C1.48-3%2C1.48-3%2C1.98-1.51%2C2.76-.72%2C3.38-.77.47-.04.67-.48%2C1.75-.53h0ZM30.37%2C43.97c2.15-.1%2C3.75%2C1.79%2C3.73%2C3.73-.01%2C1.84-1.93%2C5.21-5.84%2C5.32-3.91.11-5.79-2.97-5.79-4.85s1.41-2.81%2C1.41-2.81c1.98-1.51%2C2.87-.31%2C3.49-.37.62-.05.56-.9%2C3-1.02h0ZM16.31%2C50.11s.08%2C0%2C.12%2C0c1.33.11.78%2C1.33%2C1.28%2C1.98.5.65%2C1.23.94%2C1.2%2C1.98-.03%2C1.04-1.09%2C1.64-2.27%2C1.7%2C0%2C0-2.48.11-2.48-1.67%2C0-.6.29-1.02.47-1.33.18-.3.45-2.61%2C1.68-2.66h0ZM72.37%2C59.21c-1.01.02-.86.67-.87%2C1.55-.02.78-1.59.7-.79%2C2.27.55%2C1.08%2C3.01.63%2C3.2-1.21.25-2.36-.93-2.63-1.54-2.61h0ZM61.35%2C62.83c-.26%2C0-.55.1-.87.35-.95.75-.3%2C4%2C2.36%2C4.17%2C2.36.15%2C3.07-2.46%2C2.66-2.91-.81-.89-1.25-.18-2.03-.26-.61-.06-1.19-1.35-2.11-1.35h0Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 28px 28px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 150, 136, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: soCookiePop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    -webkit-appearance: none !important;
    appearance: none !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    color: transparent !important;
}

button#so-cookie-reopen.so-cookie-reopen:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 24px rgba(0, 150, 136, 0.55) !important;
}

button#so-cookie-reopen.so-cookie-reopen:active {
    transform: scale(0.95) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .so-cookie-banner {
        padding: 0 8px 8px;
    }

    .so-cookie-banner__inner {
        padding: 20px 18px;
        gap: 14px;
        flex-direction: column;
    }

    .so-cookie-banner__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .so-cookie-banner__icon img {
        width: 26px;
        height: 26px;
    }

    .so-cookie-banner__title {
        font-size: 15px;
    }

    .so-cookie-banner__text {
        font-size: 12.5px;
    }

    .so-cookie-banner__actions {
        width: 100%;
    }

    .so-cookie-btn {
        flex: 1;
        justify-content: center;
        padding: 12px 14px;
        font-size: 12.5px;
    }

    .so-cookie-btn--ghost {
        flex: none;
        width: 100%;
    }

    .so-cookie-category__desc {
        margin-left: 0;
        margin-top: 10px;
    }

    button#so-cookie-reopen.so-cookie-reopen {
        bottom: 14px !important;
        left: 14px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        background-size: 24px 24px !important;
    }
}

@media (max-width: 380px) {
    .so-cookie-banner__actions {
        flex-direction: column;
    }

    .so-cookie-btn {
        width: 100%;
    }
}