/* ==========================================================================
   Gush Cart Progress Bar — V3.7 (final)
   Palette: gush.bg — warm whites, earth greens, sand
   Positions: (i+1)/N — 33%,67%,100% for N=3 — fill visible before first bubble
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --gcp-green:       #4a7c59;
    --gcp-green-light: #e8f2ec;
    --gcp-green-dark:  #3a6347;
    --gcp-sand:        #e8e4df;
    --gcp-sand-dark:   #d4cfc9;
    --gcp-text:        #3d3935;
    --gcp-text-muted:  #7a756f;
    --gcp-white:       #ffffff;
    --gcp-bubble:      36px;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.gcp-progress-wrap {
    font-family: inherit;
    padding: 12px 0 6px;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    width: 100%;
}

/* ── Message ──────────────────────────────────────────────────────────────── */
.gcp-msg {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--gcp-text-muted);
    line-height: 1.5;
}
.gcp-msg strong { color: var(--gcp-text); font-weight: 600; }
.gcp-msg--done  { color: var(--gcp-green); font-weight: 500; }
.gcp-icon-inline { font-size: 16px; flex-shrink: 0; line-height: 1.5; margin-top: 1px; }

/* ── Track outer
   Padding = half bubble so edge bubbles are never clipped.
   Labels are absolute inside this, sharing the same padding.
   margin-bottom = labels height below track.
──────────────────────────────────────────────────────────────────────────── */
.gcp-track-outer {
    padding: 0 18px;
    margin-bottom: 28px;  /* space between bubbles and reward list */
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

/* ── Track ────────────────────────────────────────────────────────────────── */
.gcp-track {
    position: relative;
    height: 8px;
    background: var(--gcp-sand);
    border-radius: 100px;
    overflow: visible;
}

/* ── Fill ─────────────────────────────────────────────────────────────────── */
.gcp-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: var(--gcp-green);
    border-radius: 100px;
    max-width: 100%;
    /* No transition — prevents double-animation on cart update */
}

/* ── Milestone bubbles ────────────────────────────────────────────────────── */
.gcp-milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);   /* default: centered */
    z-index: 2;
}

/* First bubble: left edge anchored — fill has full visible run before it */
.gcp-milestone--first { transform: translate(0%, -50%); }
/* Last bubble: right edge anchored */
.gcp-milestone--last  { transform: translate(-100%, -50%); }

.gcp-milestone--reached.gcp-milestone--first { transform: translate(0%, -50%) scale(1.08); }
.gcp-milestone--reached.gcp-milestone--last  { transform: translate(-100%, -50%) scale(1.08); }

.gcp-milestone-bubble {
    width: var(--gcp-bubble);
    height: var(--gcp-bubble);
    border-radius: 50%;
    background: var(--gcp-white);
    border: 2px solid var(--gcp-sand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    box-sizing: border-box;
}

.gcp-milestone--reached .gcp-milestone-bubble {
    background: var(--gcp-green);
    border-color: var(--gcp-green);
    transform: scale(1.08);
}

.gcp-milestone-checkmark {
    color: var(--gcp-white);
    font-size: 14px;
    font-weight: 700;
}

/* Icon inside unlocked bubble (emoji) — proportional to bubble size */
.gcp-milestone-icon {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pop animation removed — prevented double-fire on cart update */

/* ── Amount labels
   Absolute inside .gcp-track-outer — same left% as bubble above.
   Default transform: -50% (centered). First: 0% (left edge). Last: -100% (right edge).
──────────────────────────────────────────────────────────────────────────── */
.gcp-track-labels { display: none; }

.gcp-amount-label { display: none; }




/* ── Chips ────────────────────────────────────────────────────────────────── */










/* ── Floating bar ─────────────────────────────────────────────────────────── */
.gcp-floating-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--gcp-white);
    border-top: 1px solid var(--gcp-sand);
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -3px 16px rgba(0,0,0,0.08);
    display: none;
}
.gcp-floating-bar.gcp-visible { display: block; /* no slide animation */ }
 to { transform: translateY(0); opacity:1; } }
.gcp-floating-bar .gcp-progress-wrap { max-width: 860px; margin: 0 auto; padding: 0; }

/* ── Mini cart: compact layout (narrow width) ────────────────────────────── */
/* Hide labels (overlap) and chips (too much space) — msg + bubbles suffice */


/* ── Cart page ────────────────────────────────────────────────────────────── */
.woocommerce-cart .gcp-progress-wrap {
    background: #faf9f7;
    border: 1px solid var(--gcp-sand);
    border-radius: 10px;
    padding: 14px 16px 14px;
    margin-bottom: 20px;
}

/* ── Checkout ─────────────────────────────────────────────────────────────── */
.woocommerce-checkout .gcp-progress-wrap {
    background: #faf9f7;
    border: 1px solid var(--gcp-sand);
    border-radius: 10px;
    padding: 14px 16px 12px;
    margin-bottom: 20px;
}

/* ── Mobile (≤600px) ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    :root { --gcp-bubble: 32px; }

    .gcp-track-outer  { padding: 0 16px; margin-bottom: 22px; }
    .gcp-track-labels { display: none; }
    .gcp-msg          { font-size: 12px; }
    .gcp-amount-label { display: none; }
    

    /* Hide middle labels ONLY when 4+ thresholds (class added by PHP) */
    .gcp-track-labels.gcp-labels--many .gcp-amount-label:not(.gcp-amount-label--first):not(.gcp-amount-label--last) {
        display: none;
    }

    /* Slightly smaller icon on mobile (32px bubble) */
    .gcp-milestone-icon {
        font-size: 17px;
    }
    .gcp-milestone-checkmark { font-size: 13px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gcp-fill, .gcp-milestone-bubble, 
    
}


/* ── V3 extras ────────────────────────────────────────────────────────────── */
.gcp-cat-label { font-size: 11px; color: var(--gcp-text-muted); opacity: 0.8; margin-left: 4px; }
.gcp-compact 
.gcp-compact .gcp-msg   { margin-bottom: 10px; }
.gcp-shortcode-wrap .gcp-progress-wrap {
    background: #faf9f7;
    border: 1px solid var(--gcp-sand);
    border-radius: 10px;
    padding: 14px 16px 12px;
}


/* ── Mini cart bar — dedicated compact component ─────────────────────────── */
.gcp-mini-cart-bar {
    border-top: 1px solid var(--gcp-sand);
    padding: 12px 16px 8px;
}

/* Mini message */
.gcp-mini-msg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--gcp-text-muted);
    line-height: 1.4;
}
.gcp-mini-msg strong { color: var(--gcp-text); font-weight: 500; }
.gcp-mini-msg--done  { color: var(--gcp-green); }
.gcp-mini-ico        { font-size: 14px; flex-shrink: 0; line-height: 1.4; }

/* Mini track */
.gcp-mini-track-outer {
    padding: 0 14px;
    margin-bottom: 4px;
    position: relative;
    box-sizing: border-box;
}

.gcp-mini-track {
    position: relative;
    height: 6px;
    background: var(--gcp-sand);
    border-radius: 100px;
    overflow: visible;
}

.gcp-mini-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: var(--gcp-green);
    border-radius: 100px;
    max-width: 100%;
}

/* Mini bubbles — smaller than main bar */
.gcp-mini-bub {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gcp-white);
    border: 2px solid var(--gcp-sand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 2;
}
.gcp-mini-bub--first { transform: translate(0%, -50%); }
.gcp-mini-bub--last  { transform: translate(-100%, -50%); }
.gcp-mini-bub--ok    { background: var(--gcp-green); border-color: var(--gcp-green); }

.gcp-mini-chk {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.gcp-mini-ico-bub {
    font-size: 11px;
    line-height: 1;
}

/* ── Mini cart: скриване на несъвместими елементи (fallback за кеширан fragment) */
.cart-sidebar .gcp-track-labels,
.cart-sidebar .gcp-rewards,
.cart-sidebar .gcp-chips,
.cart-sidebar .gcp-amount-label,
.ux-side-panel .gcp-track-labels,
.ux-side-panel .gcp-rewards,
.ux-side-panel .gcp-chips {
    display: none !important;
}
.cart-sidebar .gcp-track-outer,
.ux-side-panel .gcp-track-outer {
    margin-bottom: 10px !important;
}

/* ── Variant A: rounded pill chips with amount suffix ────────────────────── */
.gcp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.gcp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 9px;
    border-radius: 100px;
    border: 1.5px solid var(--gcp-sand-dark);
    background: transparent;
    font-size: 12px;
    color: var(--gcp-text-muted);
}

.gcp-chip--done {
    border-color: var(--gcp-green);
    background: var(--gcp-green-light);
    color: var(--gcp-green-dark);
}

.gcp-chip-icon { font-size: 13px; line-height: 1; flex-shrink: 0; }
.gcp-chip-text { font-weight: 500; }

.gcp-chip-amount {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 1px;
}
.gcp-chip-amount::before { content: "·"; margin-right: 3px; }
.gcp-chip--done .gcp-chip-amount { opacity: 0.8; }

.gcp-chip-done-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--gcp-green);
    margin-left: 2px;
    flex-shrink: 0;
}

/* Mini cart: hide chips (too much vertical space) */
.gcp-mini-cart-bar .gcp-chips { display: none; }