/*
 * Shipit consent banner
 *
 * CSS is authored defensively: themes like Woodmart, Divi, Astra aggressively style
 * buttons and inputs with !important rules. We use high-specificity selectors
 * (id#shipit-consent-root prefix) plus !important on visual primitives to guarantee
 * the banner renders the same on every site.
 */

/* ─── Reset & design tokens ──────────────────────────── */

/* Scoped reset — aggressive enough to neutralize theme inheritance without
 * using `all: unset` (which breaks Chrome's style recalc on attribute change). */
#shipit-consent-root,
#shipit-consent-root *,
#shipit-consent-root *::before,
#shipit-consent-root *::after {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
    text-shadow: none !important;
    text-indent: 0 !important;
    vertical-align: baseline !important;
    float: none !important;
    clear: none !important;
    animation: none !important;
}

#shipit-consent-root p,
#shipit-consent-root h1, #shipit-consent-root h2, #shipit-consent-root h3,
#shipit-consent-root h4, #shipit-consent-root h5, #shipit-consent-root h6,
#shipit-consent-root ul, #shipit-consent-root ol, #shipit-consent-root li,
#shipit-consent-root div, #shipit-consent-root span, #shipit-consent-root strong,
#shipit-consent-root a, #shipit-consent-root button, #shipit-consent-root input, #shipit-consent-root label {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    color: inherit;
    text-decoration: none !important;
    list-style: none !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    width: auto;
    height: auto;
    float: none !important;
    position: static;
}

#shipit-consent-root button {
    cursor: pointer;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#shipit-consent-root {
    /* design tokens — dark (default) */
    --sc-bg:            #0f1115;
    --sc-bg-raised:     #181b20;
    --sc-fg:            #f4f5f7;
    --sc-muted:         #c4c6cc;
    --sc-dim:           #8b8d93;
    --sc-border:        rgba(255,255,255,.12);
    --sc-primary:       #3b82f6;
    --sc-primary-hover: #2563eb;
    --sc-primary-fg:    #ffffff;
    --sc-ghost-bg:      transparent;
    --sc-ghost-hover:   rgba(255,255,255,.08);
    --sc-shadow:        0 18px 48px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    --sc-toggle-off:    #3f3f46;

    position: fixed !important;
    z-index: 2147483646 !important;
    background: var(--sc-bg) !important;
    color: var(--sc-fg) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    box-shadow: var(--sc-shadow) !important;
}

/* Light theme overrides — primary tuned to brand blue.
 * Sites that need a different brand can override --sc-primary via the Custom CSS box. */
#shipit-consent-root.shipit-consent--theme-light {
    --sc-bg:            #ffffff;
    --sc-bg-raised:     #f6f7f9;
    --sc-fg:            #111827;
    --sc-muted:         #4b5563;
    --sc-dim:           #9ca3af;
    --sc-border:        rgba(17,24,39,.08);
    --sc-primary:       #106CD8;
    --sc-primary-hover: #0a55b0;
    --sc-primary-fg:    #ffffff;
    --sc-ghost-bg:      transparent;
    --sc-ghost-hover:   rgba(17,24,39,.04);
    --sc-shadow:        0 18px 48px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.08);
    --sc-toggle-off:    #d1d5db;
    border: 1px solid var(--sc-border) !important;
}

/* Auto theme follows OS */
@media (prefers-color-scheme: light) {
    #shipit-consent-root.shipit-consent--theme-auto {
        --sc-bg:            #ffffff;
        --sc-bg-raised:     #f6f7f9;
        --sc-fg:            #111827;
        --sc-muted:         #4b5563;
        --sc-dim:           #9ca3af;
        --sc-border:        rgba(17,24,39,.08);
        --sc-primary:       #2271b1;
        --sc-primary-hover: #135e96;
        --sc-primary-fg:    #ffffff;
        --sc-ghost-bg:      transparent;
        --sc-ghost-hover:   rgba(17,24,39,.04);
        --sc-shadow:        0 18px 48px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.08);
        --sc-toggle-off:    #d1d5db;
        border: 1px solid var(--sc-border) !important;
    }
}

#shipit-consent-root[hidden] {
    display: none !important;
}

/* Entrance animation — applied once by banner.js when the banner is shown */
@keyframes shipit-consent-enter-bottom {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shipit-consent-enter-top {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shipit-consent-enter-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shipit-consent-enter-scale {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#shipit-consent-root.shipit-consent--entering.shipit-consent--bottom,
#shipit-consent-root.shipit-consent--entering.shipit-consent--bottom-left,
#shipit-consent-root.shipit-consent--entering.shipit-consent--bottom-right {
    animation: shipit-consent-enter-bottom 280ms cubic-bezier(0.2, 0, 0, 1) both;
}
#shipit-consent-root.shipit-consent--entering.shipit-consent--top {
    animation: shipit-consent-enter-top 280ms cubic-bezier(0.2, 0, 0, 1) both;
}
#shipit-consent-root.shipit-consent--entering.shipit-consent--center,
#shipit-consent-root.shipit-consent--entering.shipit-consent--modal {
    animation: shipit-consent-enter-scale 240ms cubic-bezier(0.2, 0, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    #shipit-consent-root.shipit-consent--entering {
        animation: shipit-consent-enter-fade 150ms linear both !important;
    }
}

/* Visually-hidden live region for screen reader announcements */
#shipit-consent-root .shipit-consent__live {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Cookie list inside each category card */
#shipit-consent-root .shipit-category__cookies {
    display: block !important;
    margin-top: 6px !important;
    font-size: 11px !important;
    color: var(--sc-dim) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    word-break: break-word !important;
}
#shipit-consent-root .shipit-category__cookies strong {
    color: var(--sc-muted) !important;
    font-weight: 500 !important;
    font-family: inherit !important;
}

/* ─── Position variants ──────────────────────────────── */

/* Full-width bars */
.shipit-consent.shipit-consent--bottom,
.shipit-consent.shipit-consent--top {
    left: 0 !important;
    right: 0 !important;
    padding: 20px 24px !important;
    border-radius: 0 !important;
}
.shipit-consent.shipit-consent--bottom { bottom: 0 !important; }
.shipit-consent.shipit-consent--top    { top: 0 !important; border-bottom: 1px solid var(--sc-border) !important; }

/* Floating corner cards */
.shipit-consent.shipit-consent--bottom-left,
.shipit-consent.shipit-consent--bottom-right {
    bottom: 20px !important;
    max-width: 400px !important;
    width: calc(100% - 40px) !important;
    padding: 22px !important;
    border-radius: 14px !important;
}
.shipit-consent.shipit-consent--bottom-left  { left: 20px !important; }
.shipit-consent.shipit-consent--bottom-right { right: 20px !important; }

/* Center popover */
.shipit-consent.shipit-consent--center,
.shipit-consent.shipit-consent--modal {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 480px !important;
    width: calc(100% - 40px) !important;
    padding: 24px !important;
    border-radius: 16px !important;
}

/* ─── Layout ─────────────────────────────────────────── */

#shipit-consent-root .shipit-consent__close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    color: var(--sc-dim) !important;
    font-size: 18px !important;
    line-height: 1 !important;
}
#shipit-consent-root .shipit-consent__close:hover {
    background: var(--sc-ghost-hover) !important;
    color: var(--sc-fg) !important;
}

.shipit-consent.shipit-consent--bottom .shipit-consent__close,
.shipit-consent.shipit-consent--top .shipit-consent__close {
    top: 10px !important;
    right: 14px !important;
}

#shipit-consent-root .shipit-consent__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Bar variants lay out horizontally on desktop */
.shipit-consent--bottom #shipit-consent-root__inner,
.shipit-consent--top .shipit-consent__inner {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#shipit-consent-root .shipit-consent__text {
    flex: 1 !important;
    min-width: 260px !important;
}

#shipit-consent-root .shipit-consent__title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sc-fg) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}
#shipit-consent-root .shipit-consent__title-icon {
    flex-shrink: 0 !important;
    color: var(--sc-primary) !important;
}

#shipit-consent-root .shipit-consent__message {
    display: block !important;
    color: var(--sc-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}
#shipit-consent-root .shipit-consent__message a {
    color: var(--sc-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

#shipit-consent-root .shipit-consent__actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* ─── Buttons ────────────────────────────────────────── */

#shipit-consent-root .shipit-consent__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    text-decoration: none !important;
    background: var(--sc-ghost-bg) !important;
    color: var(--sc-fg) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

#shipit-consent-root .shipit-consent__btn--primary {
    background: var(--sc-primary) !important;
    color: var(--sc-primary-fg) !important;
}
#shipit-consent-root .shipit-consent__btn--primary:hover,
#shipit-consent-root .shipit-consent__btn--primary:focus {
    background: var(--sc-primary-hover) !important;
    color: var(--sc-primary-fg) !important;
}

#shipit-consent-root .shipit-consent__btn--ghost {
    background: transparent !important;
    color: var(--sc-fg) !important;
    border: 1px solid var(--sc-border) !important;
}
#shipit-consent-root .shipit-consent__btn--ghost:hover,
#shipit-consent-root .shipit-consent__btn--ghost:focus {
    background: var(--sc-ghost-hover) !important;
}

#shipit-consent-root .shipit-consent__btn--link {
    background: transparent !important;
    color: var(--sc-muted) !important;
    padding: 10px 8px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 400 !important;
    min-height: 0 !important;
}
#shipit-consent-root .shipit-consent__btn--link:hover,
#shipit-consent-root .shipit-consent__btn--link:focus {
    color: var(--sc-fg) !important;
    text-decoration: underline !important;
}

/* ─── Customize panel ────────────────────────────────── */

#shipit-consent-root .shipit-consent__panel {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--sc-border) !important;
}

#shipit-consent-root .shipit-consent__panel[hidden] {
    display: none !important;
}

#shipit-consent-root .shipit-consent__panel-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sc-fg) !important;
    margin: 0 0 12px !important;
    letter-spacing: 0.01em !important;
}

#shipit-consent-root .shipit-consent__categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
}

#shipit-consent-root .shipit-category {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    background: var(--sc-bg-raised) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: 10px !important;
}

#shipit-consent-root .shipit-category__text {
    flex: 1 !important;
    min-width: 0 !important;
}

#shipit-consent-root .shipit-category__label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sc-fg) !important;
    margin: 0 0 2px !important;
}

#shipit-consent-root .shipit-category__desc {
    display: block !important;
    font-size: 12px !important;
    color: var(--sc-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#shipit-consent-root .shipit-category__lock {
    font-size: 11px !important;
    color: var(--sc-dim) !important;
    margin-left: 6px !important;
}

/* Toggle switch — button with role="switch".
 * Layout only in CSS; banner.js owns background + thumb position via inline style,
 * because some themes combined with certain Chrome CSS-var cascade paths refuse to
 * let stylesheet !important yield to later attribute changes (seen on Woodmart). */
#shipit-consent-root .shipit-toggle {
    position: relative !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    width: 40px !important;
    height: 22px !important;
    margin-top: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background-color 0.2s ease !important;
}
#shipit-consent-root .shipit-toggle[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}
#shipit-consent-root .shipit-toggle-thumb {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
    pointer-events: none !important;
}
#shipit-consent-root .shipit-toggle:focus-visible {
    outline: 2px solid var(--sc-primary) !important;
    outline-offset: 2px !important;
}

#shipit-consent-root .shipit-consent__panel-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* ─── Responsive ─────────────────────────────────────── */

@media (max-width: 560px) {
    .shipit-consent.shipit-consent--bottom-left,
    .shipit-consent.shipit-consent--bottom-right,
    .shipit-consent.shipit-consent--center,
    .shipit-consent.shipit-consent--modal {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
        padding: 20px !important;
    }

    #shipit-consent-root .shipit-consent__actions {
        width: 100% !important;
    }
    #shipit-consent-root .shipit-consent__btn {
        flex: 1 1 auto !important;
    }
}

/* ─── Persistent "manage cookies" floating button ───────────────────────
 * Visible only after the visitor has made a consent choice. Lets them
 * re-open the banner to change their mind without hunting for a privacy
 * page link. Sits in the bottom-left corner with a discreet icon-only
 * round button — same color theme as the banner.
 */
#shipit-consent-toggle-btn {
    position: fixed !important;
    z-index: 2147483645 !important; /* 1 below the banner so the banner overlaps when both visible briefly */
    bottom: 20px !important;
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(17,24,39,.08) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #106CD8 !important;
    box-shadow: 0 4px 16px rgba(17,24,39,.08), 0 1px 4px rgba(17,24,39,.04) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
}
#shipit-consent-toggle-btn[hidden] {
    display: none !important;
}
#shipit-consent-toggle-btn:hover {
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 8px 22px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.08) !important;
}
#shipit-consent-toggle-btn:focus-visible {
    outline: 2px solid #106CD8 !important;
    outline-offset: 3px !important;
}

/* Dark theme: invert the manage button to keep contrast on dark layouts. */
#shipit-consent-toggle-btn.shipit-consent-toggle-btn--dark {
    background: #181b20 !important;
    color: #f4f5f7 !important;
    border-color: rgba(255,255,255,.12) !important;
}

@media (max-width: 560px) {
    #shipit-consent-toggle-btn {
        bottom: 14px !important;
        left: 14px !important;
        width: 40px !important;
        height: 40px !important;
    }
}