/* ============================================================
   Advanced Free Shipping Bar – Public Stylesheet
   BEM notation: .afsb-bar, .afsb-bar__*, .afsb-bar--*
   All design tokens driven by CSS custom properties
   ============================================================ */

/* ── Reset / Custom Properties ── */
.afsb-bar {
    --afsb-bg:          #eae7df;   /* Track background: warm off-white */
    --afsb-fill:        #7a8466;   /* Fill: brand dark green */
    --afsb-text:        #333333;
    --afsb-height:      12px;
    --afsb-radius:      6px;
    --afsb-padding:     12px 16px;
    --afsb-margin:      0 0 16px;
    --afsb-font-size:   14px;
    --afsb-font-weight: 400;
    --afsb-font-family: inherit;
    --afsb-anim-speed:  600ms;
    --afsb-glow-color:  #7a8466;   /* Glow matches fill */

    box-sizing: border-box;
    padding:    var(--afsb-padding);
    margin:     var(--afsb-margin);
    font-family: var(--afsb-font-family);
    font-size:   var(--afsb-font-size);
    font-weight: var(--afsb-font-weight);
    color:       var(--afsb-text);
    width: 100%;
}

/* ── Message – Standard Cart: inline, eine Zeile ────────────────────────────
   white-space: nowrap verhindert Umbruch in Cart, Checkout, Global Bar.
   ────────────────────────────────────────────────────────────────────────── */
.afsb-bar__message {
    margin-bottom: 8px;
    line-height:   1.4;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Success spans: inline überall außer Mini Cart ──────────────────────────
   Standard Cart, Checkout, Global Bar → beide Spans inline → eine Zeile:
   "Glückwunsch! Du hast kostenlosen Versand erreicht."
   Mini Cart → CSS weiter unten macht sie block → zwei Zeilen.
   ────────────────────────────────────────────────────────────────────────── */
.afsb-bar__success-title,
.afsb-bar__success-text {
    display: inline;
}

/* ── Track (outer container) ── */
.afsb-bar__track {
    position:      relative;
    height:        var(--afsb-height);
    background:    var(--afsb-bg);
    border-radius: var(--afsb-radius);
    overflow:      hidden;
    width: 100%;
}

/* ── Fill (progress indicator) ── */
.afsb-bar__fill {
    position:      absolute;
    top:           0;
    bottom:        0;
    left:          0;
    height:        100%;
    background:    var(--afsb-fill);
    border-radius: inherit;
    transition:    width var(--afsb-anim-speed) cubic-bezier(0.4, 0, 0.2, 1);
    will-change:   width;
    box-shadow:    none;   /* Kein Default-Glow — nur via .afsb-bar__fill--glow aktiv */
}

/* ── Glow: NUR bei aktiviertem Setting ───────────────────────────────────────
   PHP schreibt die Klasse .afsb-bar__fill--glow nur wenn color_glow = true.
   Ohne aktiviertes Setting ist niemals ein Glow sichtbar.
   ────────────────────────────────────────────────────────────────────────── */
.afsb-bar__fill--glow {
    box-shadow:
        0 0 6px  rgba(122, 132, 102, 0.4),
        0 0 12px rgba(122, 132, 102, 0.2);
    animation: afsb-glow-pulse 2s ease-in-out infinite;
}

@keyframes afsb-glow-pulse {
    0%   { box-shadow: 0 0 4px  rgba(122, 132, 102, 0.3); }
    50%  { box-shadow: 0 0 12px rgba(122, 132, 102, 0.6); }
    100% { box-shadow: 0 0 4px  rgba(122, 132, 102, 0.3); }
}

/* ── Shimmer: sanfter Glanzeffekt auf dem Fill ───────────────────────────────
   Läuft immer wenn Fill sichtbar ist — subtil genug um nicht zu stören.
   Für vollständiges Opt-in: diesen Block in .afsb-bar__fill--glow verschieben.
   ────────────────────────────────────────────────────────────────────────── */
.afsb-bar__fill::after {
    content:         '';
    position:        absolute;
    inset:           0;
    background:      linear-gradient(
        90deg,
        transparent              0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent              100%
    );
    background-size: 200% 100%;
    animation:       afsb-shimmer 2.5s linear infinite;
    border-radius:   inherit;
    pointer-events:  none;
}

@keyframes afsb-shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}

/* ── Reached state ── */
.afsb-bar--reached .afsb-bar__fill {
    width: 100% !important;
}

.afsb-bar--reached .afsb-bar__message {
    font-weight: 600;
}

/* ── Global sticky bar ── */
.afsb-global-bar {
    position: fixed;
    left:     0;
    right:    0;
    z-index:  99999;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.afsb-global-bar--top {
    top: 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.afsb-global-bar--bottom {
    bottom: 0;
    border-top: 1px solid rgba(0,0,0,.08);
}

.afsb-global-bar .afsb-bar {
    margin: 0;
    max-width: 1200px;
    margin-inline: auto;
}

/* ── Offset WP admin bar ── */
.admin-bar .afsb-global-bar--top {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .afsb-global-bar--top {
        top: 46px;
    }
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .afsb-bar {
        --afsb-font-size: 13px;
    }
}

/* ── Elementor preview fix ── */
.afsb-bar.elementor-preview .afsb-bar__fill {
    width: 60% !important;
    transition: none;
}

/* ============================================================
   Elementor Side Cart / Menu Cart – Mini Bar
   ============================================================

   Injection target (set by JS):
     .elementor-menu-cart__main   ← inner scroll area above products
   Fragment anchor (hidden, footer):
     .afsb-mini-anchor > .free-shipping-bar-wrapper-mini
   ============================================================ */

/* ── Hidden anchor in page footer ───────────────────────────────────────────
   The .free-shipping-bar-wrapper-mini lives here until JS moves it into
   .elementor-menu-cart__main.

   We use the SR-only pattern (clip / size:1px) instead of display:none.
   wc-cart-fragments.js checks :visible internally — display:none nodes
   can be skipped, breaking fragment updates. clip keeps the node "visible"
   to jQuery while being invisible to users.
   ────────────────────────────────────────────────────────────────────────── */
.afsb-mini-anchor {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0, 0, 0, 0);
    white-space: normal;   /* was: nowrap — that leaked into child message nodes */
    border:      0;
    /* Prevent any accidental layout contribution */
    pointer-events: none;
}

.afsb-mini-anchor:empty {
    display: none;
}

/* ── Mini bar — base reset when inside the Side Cart ────────────────────────
   Scoped to .elementor-menu-cart__main so these rules ONLY apply inside the
   Side Cart panel and never affect the bar in other positions (cart page,
   checkout, global bar). No !important needed — specificity wins.
   ────────────────────────────────────────────────────────────────────────── */
.elementor-menu-cart__main .free-shipping-bar-wrapper-mini {
    display:   block;  /* override any potential hidden state from anchor */
    width:     100%;
}

/* Override the global CSS custom properties with compact values.
   All layout tokens are reset here so the mini bar is self-contained
   regardless of what the admin has set for the standard bar size. */
.elementor-menu-cart__main .afsb-bar--mini {
    /* ── Compact sizing tokens ── */
    --afsb-height:       6px;
    --afsb-radius:       3px;
    --afsb-font-size:    11px;
    --afsb-font-weight:  400;
    --afsb-margin:       0;
    --afsb-padding:      10px 14px 12px;  /* top | sides | bottom */
    --afsb-anim-speed:   400ms;           /* snappier in compact context */

    /* Structural reset */
    width:      100%;
    box-sizing: border-box;

    /* Visual separator between bar and cart items below */
    border-bottom: 1px solid rgba(122, 132, 102, 0.15);   /* warm green-tinted divider */
}

/* Compact message line */
.elementor-menu-cart__main .afsb-bar--mini .afsb-bar__message {
    margin-bottom: 5px;
    line-height:   1.2;
}

/* ── Mini Cart: Success-Nachricht in ZWEI Zeilen ─────────────────────────────
   Gilt NUR innerhalb von .free-shipping-bar-wrapper-mini (Elementor Side Cart).

   PHP rendert im reached-State:
     <span class="afsb-bar__success-title">Glückwunsch!</span>
     <span class="afsb-bar__success-text">Du hast kostenlosen Versand erreicht.</span>

   Standard Cart: beide Spans sind display:inline → eine Zeile.
   Mini Cart:     Flex-Column + display:block → zwei saubere Zeilen.
   ────────────────────────────────────────────────────────────────────────── */
.free-shipping-bar-wrapper-mini .afsb-bar__message {
    white-space:    normal;   /* hebt das globale nowrap auf      */
    overflow:       visible;
    text-overflow:  clip;
    display:        flex;
    flex-direction: column;
    gap:            1px;
}

.free-shipping-bar-wrapper-mini .afsb-bar__success-title {
    display:     block;
    font-weight: 600;
    font-size:   inherit;   /* erbt 11px vom .afsb-bar--mini-Token */
}

.free-shipping-bar-wrapper-mini .afsb-bar__success-text {
    display:   block;
    font-size: 12px;
    opacity:   0.85;
}

/* Progress-Message: bleibt auch im Mini Cart horizontal fließend */
.free-shipping-bar-wrapper-mini .afsb-bar--progress .afsb-bar__message {
    flex-direction: row;
    flex-wrap:      wrap;
}

/* 6 px track height (overrides the CSS custom property on __track itself) */
.elementor-menu-cart__main .afsb-bar--mini .afsb-bar__track {
    height: var(--afsb-height);   /* picks up the 6px token above */
}

/* ── Hello Theme specifics ───────────────────────────────────────────────────
   Hello Elementor applies aggressive padding resets to widget containers.
   This rule counteracts any zero-padding inheritance that would collapse
   the mini bar's internal spacing.
   ────────────────────────────────────────────────────────────────────────── */
.hello-elementor .elementor-menu-cart__main .afsb-bar--mini {
    padding: 10px 14px 12px;
}

/* ── Prevent shimmer bleed outside the 6 px track ───────────────────────── */
.elementor-menu-cart__main .afsb-bar--mini .afsb-bar__fill::after {
    border-radius: inherit;
}