/**
 * File Path: assets/css/front/mbs-front-coming-soon-badge.css
 * Coming Soon Badge (Phase 2.4 — Token Completion & Badge/Pills Overhaul)
 * Component of mbs-front.css — registered and enqueued in MBS_Front_Assets.
 * Enqueued by MBS_Front_Assets with dep: mbs-front (all registered tiers).
 *
 * Three variants rendered by templates/partials/coming-soon-badge.php:
 *   Variant 1 — bare:             .mbs-coming-soon-variant-1
 *   Variant 2 — dated:            .mbs-coming-soon-variant-2
 *   Variant 3 — dated + pre-order CTA: .mbs-coming-soon-variant-3
 *
 * Token: --mbs-coming-soon-bg  (default #F59E0B) — admin-controlled (PRO)
 * Token: --mbs-coming-soon-text (default #FFFFFF) — admin-controlled (PRO)
 * Dark mode overrides: mbs-front-dark.css
 */
/* ==========================================================================
   Coming Soon Badge
   ========================================================================== */

/* Badge wrapper ------------------------------------------------------------ */

.mbs-coming-soon-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 8px;
}

/* Label pill --------------------------------------------------------------- */

.mbs-coming-soon-label {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
    background: var(--mbs-coming-soon-bg, #F59E0B);
    color: var(--mbs-coming-soon-text, #FFFFFF);
    border: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

/* Pre-order CTA button (variant 3 only) ------------------------------------ */

.mbs-coming-soon-preorder {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: var(--mbs-button-bg, var(--mbs-navy));
    color: var(--mbs-button-text, #FFFFFF);
    border: 1px solid transparent;
    transition: opacity 0.15s ease;
    cursor: pointer;
    align-self: flex-start;
}

.mbs-coming-soon-preorder:hover,
.mbs-coming-soon-preorder:focus-visible {
    opacity: 0.88;
    text-decoration: none;
    color: var(--mbs-button-text, #FFFFFF);
}

/* Variant spacing adjustments ---------------------------------------------- */

.mbs-coming-soon-variant-1 .mbs-coming-soon-label {
    /* Bare variant — no extra adjustments needed */
}

.mbs-coming-soon-variant-2 .mbs-coming-soon-label {
    /* Dated variant — label includes the pub date */
}

.mbs-coming-soon-variant-3 .mbs-coming-soon-label {
    /* Dated + CTA variant — sits above the pre-order button */
}

@media (max-width: 480px) {
    .mbs-coming-soon-label {
        font-size: 10px;
        padding: 2px 10px;
    }

    .mbs-coming-soon-preorder {
        font-size: 11px;
        padding: 4px 12px;
    }
}