/* Jeanettemai Psychology — free shipping progress bar (cart + flyout cart).
   Ported from fabricly-psychology.css, progress-bar block only; palette
   mapped to jm tokens (pink = accent, yellow = emphasis). */

.jm-shipping-progress {
    background: #F7F6F3;
    border-radius: 8px;
    padding: 1em 1.25em;
    margin-bottom: 1.5em;
    border-left: 3px solid #E27297;
}

.jm-shipping-progress__content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jm-ship-icon {
    flex-shrink: 0;
    color: #E27297;
}

.jm-shipping-msg {
    font-size: 1em;
    color: #333E48;
    margin-bottom: 0.5em;
    font-weight: 500;
}

.jm-shipping-remaining {
    color: #C75B80;
    font-size: 1.1em;
}

.jm-shipping-free {
    color: #27ae60;
    font-weight: 600;
}

.jm-shipping-achieved {
    background: #e8f7e8;
    border-left-color: #27ae60;
}

.jm-shipping-achieved .jm-ship-icon {
    color: #27ae60;
}

.jm-progress-bar {
    height: 10px;
    background: #ECEAE6;
    border-radius: 5px;
    overflow: hidden;
}

.jm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #E27297, #27ae60);
    border-radius: 5px;
    transition: width 0.5s ease;
}

@keyframes jmShipPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.jm-progress-fill.jm-almost {
    animation: jmShipPulse 2s ease infinite;
}

/* Flyout mini-cart variant — tighter spacing */
.jm-shipping-progress.jm-sp-minicart {
    padding: 0.7em 1em;
    margin: 0.75em 0 0;
    font-size: 0.85em;
    border-left-width: 2px;
}

.jm-shipping-progress.jm-sp-minicart .jm-progress-bar {
    height: 6px;
}

.jm-shipping-progress.jm-sp-minicart .jm-ship-icon {
    width: 16px;
    height: 16px;
}

/* ── B7: announcement banner + price reframe (2026-07-23) ── */
.jm-announcement { position: relative; background: var(--jm-pink-light, #FAEDF2); color: var(--text, #333E48); font-size: 13.5px; font-weight: 600; text-align: center; padding: 9px 44px; z-index: 900; }
.jm-announcement-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; min-width: 28px; max-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-muted, #5D7184); display: flex; align-items: center; justify-content: center; }
.jm-price-reframe { font-size: 13.5px; color: var(--text-muted, #5D7184); margin: 2px 0 10px; }
.jm-price-reframe strong { color: var(--jm-pink-dark, #C75B80); }