/**
 * Contentosapp Studio Admin — Buy Extra Quotas modal styles (Sprint B.3.5).
 *
 * Builds on the .fos-modal infrastructure defined in costudio-admin.css
 * (overlay, box, header, body, footer chrome). This stylesheet adds:
 *   - Width override for the addon modal box (640px instead of default 480)
 *   - Body scroll lock when the modal is open
 *   - Package grid (2x2 desktop, 1col mobile)
 *   - Card visual states: base, highlight (popular), skeleton (loading)
 *   - Sub-elements: badge, qty, label, price, unit, buy button
 *   - State views: error (icon + retry), redirecting (spinner)
 *   - Footer trust copy (.fos-addon-modal__legal)
 *   - Toast variant (.fos-addon-toast — sits on a WP .notice)
 *
 * Loaded only on pages where the modal partial is included
 * (License + Dashboard) — see B.3.6 wiring.
 */

/* ─── Modal box width override ─────────────────────────────────────────
 * Default .fos-modal__box maxes at 480px (great for confirmations);
 * we need 640px so the 2-column package grid breathes. The .--addon
 * modifier scopes the override to this modal only — peers stay 480.
 */
.fos-modal__box--addon {
    max-width: 640px;
}

/* ─── Body scroll lock ──────────────────────────────────────────────────
 * JS toggles .fos-modal-open on <body> when the modal opens/closes.
 * Without this, scrolling the page behind the overlay still works
 * which feels broken — the overlay should imply "this is the only
 * thing you can interact with right now".
 */
body.fos-modal-open {
    overflow: hidden;
}

/* ─── Modal content surface ─────────────────────────────────────────────
 * Reserve a min-height so the modal doesn't visibly resize when the
 * skeleton (4 cards) swaps to the real grid (4 cards) or to the error
 * state (which is shorter). 360px ≈ height of the cards row.
 */
.fos-addon-modal__content {
    min-height: 320px;
}

/* ─── Context line (Sprint B.3.6.1) ────────────────────────────────────
 * Sits between the header and body. Communicates current balance + plan
 * remaining so the purchase decision happens with full information. The
 * <strong> tags around the numbers (injected by JS) inherit the primary
 * color so they read as "your data" not just typography emphasis.
 */
.fos-addon-modal__context {
    padding: 14px 20px 0;
    text-align: center;
    color: var(--fos-text-sub);
    font-size: 13px;
    line-height: 1.5;
}

.fos-addon-modal__context strong {
    color: var(--fos-primary-dark);
    font-weight: 700;
}

/* Exhausted variant: warm warning tone so the user feels the urgency
 * without it being alarming. The whole copy switches color (numbers
 * inherit the warm tone too via 'color: inherit' below). */
.fos-addon-modal__context--exhausted {
    color: var(--fos-warning-dark);
    font-weight: 600;
}

.fos-addon-modal__context--exhausted strong {
    color: inherit;
}

/* Sprint B.4.3 — production_blocked variant. Used when the modal opens
 * because the user just tried to start a production and got blocked by
 * quota. Same warm warning tone as exhausted but with slight emphasis
 * via padded background — this is a "you're stuck" moment, the styling
 * acknowledges it visually without screaming. */
.fos-addon-modal__context--blocked {
    color: var(--fos-warning-dark);
    font-weight: 600;
    background: var(--fos-warning-light);
    padding-top: 12px;
    padding-bottom: 12px;
    margin: 0 20px;
    border-radius: var(--fos-radius-sm);
}

/* ─── Package grid ──────────────────────────────────────────────────────
 * 2 columns on desktop, 1 column on narrow widths. CSS Grid auto-stretches
 * all cells to the tallest one — packages with no badge end up the same
 * height as the highlighted one because the buy button is pushed to the
 * card bottom via flex (see .fos-addon-pkg-card__buy below).
 */
.fos-addon-pkg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* ─── Package card (base) ───────────────────────────────────────────────
 * Vertical stack with the buy button anchored to the bottom (margin-top:
 * auto). Cards are clickable surfaces — hover lifts subtly.
 */
.fos-addon-pkg-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 18px 16px;
    background: #fff;
    border: 1px solid var(--fos-border);
    border-radius: var(--fos-radius);
    transition: var(--fos-transition);
    position: relative;
    overflow: hidden;
}

.fos-addon-pkg-card:hover {
    border-color: var(--fos-primary-border);
    box-shadow: 0 4px 12px rgba(108, 71, 255, 0.08);
    transform: translateY(-1px);
}

/* ─── Highlight variant (pack_30: popular + highlight=true) ────────────
 * Stronger purple border + a faint purple tint so the recommended pack
 * pops without screaming. Pairs with the popular badge above.
 */
.fos-addon-pkg-card--highlight {
    border-color: var(--fos-primary);
    background: linear-gradient(180deg, var(--fos-primary-faint) 0%, #fff 60%);
    box-shadow: 0 2px 8px rgba(108, 71, 255, 0.10);
}

.fos-addon-pkg-card--highlight:hover {
    border-color: var(--fos-primary-dark);
    box-shadow: 0 6px 16px rgba(108, 71, 255, 0.16);
}

/* ─── Skeleton variant (loading) ────────────────────────────────────────
 * Same dimensions as a real card (so layout doesn't jump on swap)
 * with a gentle shimmer to signal "loading", not "broken".
 */
.fos-addon-pkg-card--skeleton {
    min-height: 240px;
    border-color: var(--fos-border);
    background: linear-gradient(
        90deg,
        #f3f4f6 0%,
        #e5e7eb 50%,
        #f3f4f6 100%
    );
    background-size: 200% 100%;
    animation: fos-addon-skeleton-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
}

.fos-addon-pkg-card--skeleton:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--fos-border);
}

@keyframes fos-addon-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ─── Card sub-elements ─────────────────────────────────────────────────
 * Visual hierarchy emphasizes WHAT YOU GET (qty) over what you pay (price)
 * because in an upsell modal, the credits are the value the user is
 * weighing — Stripe's checkout page surfaces the price prominently again.
 */

.fos-addon-pkg-card__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    margin-bottom: 8px;
    background: var(--fos-primary-light);
    color: var(--fos-primary-dark);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 999px;
    line-height: 1.4;
}

/* Sprint B.3.6.1 — differentiated badge variants.
 * popular = amber/warm (emotional pull, "others picked this")
 * best-value = green (rational pull, "math says this saves you most")
 * Different colors let the user scan and self-categorize at a glance
 * instead of treating both as a generic "recommended" signal. */
.fos-addon-pkg-card__badge--popular {
    background: var(--fos-warning-light);
    color: var(--fos-warning-dark);
}

.fos-addon-pkg-card__badge--best-value {
    background: var(--fos-success-light);
    color: var(--fos-success-dark);
}

/* Empty placeholder — same dimensions as a real badge so cards without
 * a badge reserve the same vertical space, keeping qty numbers aligned
 * horizontally across the row. visibility: hidden preserves layout
 * while removing visual weight; aria-hidden on the element keeps it
 * out of the screen-reader's announcement. */
.fos-addon-pkg-card__badge--placeholder {
    background: transparent;
    color: transparent;
    visibility: hidden;
}

.fos-addon-pkg-card__qty {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: var(--fos-primary-dark);
    margin-top: 4px;
}

.fos-addon-pkg-card__qty-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--fos-text-dim);
    margin-top: 4px;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

.fos-addon-pkg-card__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--fos-text);
    margin-top: 14px;
}

.fos-addon-pkg-card__unit {
    font-size: 12px;
    color: var(--fos-text-dim);
    margin-top: 2px;
}

/* Sprint B.3.6.1 — savings indicator computed client-side vs the most
 * expensive per-credit pack. Translates the unit_price math into a
 * plain-language win the user can see in one glance. */
.fos-addon-pkg-card__savings {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fos-success);
    letter-spacing: 0.2px;
}

/* Empty placeholder for the baseline pack (no savings to show). Reserves
 * the same vertical space as a real "Save X%" line so all 4 cards have
 * identical vertical rhythm — the Buy button sits at the same offset
 * from the unit price line in every card, instead of one card having
 * a giant gap that the others fill with content. */
.fos-addon-pkg-card__savings--placeholder {
    visibility: hidden;
}

/* Sprint B.3.6.1 — fixed margin (was margin-top: auto). With the badge
 * and savings placeholders above, every card has identical content
 * structure → no need for auto to distribute leftover space. A fixed
 * 18px gives a deliberate, consistent gap above the Buy button across
 * all 4 cards, replacing the previous "rubber band" rhythm where some
 * cards had tight content and others had giant empty gaps. */
.fos-addon-pkg-card__buy {
    margin-top: 18px;
    padding: 10px 14px;
    background: var(--fos-primary);
    color: #fff;
    border: none;
    border-radius: var(--fos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
    transition: var(--fos-transition);
}

.fos-addon-pkg-card__buy:hover,
.fos-addon-pkg-card__buy:focus-visible {
    background: var(--fos-primary-dark);
    box-shadow: 0 2px 6px rgba(108, 71, 255, 0.30);
}

.fos-addon-pkg-card__buy:focus-visible {
    outline: 2px solid var(--fos-primary);
    outline-offset: 2px;
}

.fos-addon-pkg-card__buy:active {
    transform: translateY(1px);
}

/* ─── Error state ───────────────────────────────────────────────────────
 * Centered icon + message + retry button. Used when fetch_addon_packages
 * or create_addon_checkout fails — the JS picks the right copy via
 * errorMessage(code).
 */
.fos-addon-modal__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    min-height: 320px;
    gap: 14px;
}

.fos-addon-modal__error-icon {
    font-size: 36px;
    line-height: 1;
    color: var(--fos-warning);
}

.fos-addon-modal__error-msg {
    font-size: 14px;
    color: var(--fos-text-sub);
    max-width: 380px;
    line-height: 1.5;
}

.fos-addon-modal__retry-btn {
    margin-top: 6px;
    padding: 9px 20px;
    background: #fff;
    color: var(--fos-primary-dark);
    border: 1px solid var(--fos-primary);
    border-radius: var(--fos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--fos-transition);
}

.fos-addon-modal__retry-btn:hover,
.fos-addon-modal__retry-btn:focus-visible {
    background: var(--fos-primary);
    color: #fff;
}

.fos-addon-modal__retry-btn:focus-visible {
    outline: 2px solid var(--fos-primary);
    outline-offset: 2px;
}

/* ─── Redirecting state ─────────────────────────────────────────────────
 * Shown briefly between "Buy clicked" and "window.location → Stripe".
 * Spinner + reassuring message. The user shouldn't be on this screen
 * for more than ~500ms in the happy path.
 */
.fos-addon-modal__redirecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    min-height: 320px;
    gap: 18px;
}

.fos-addon-modal__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--fos-primary-light);
    border-top-color: var(--fos-primary);
    border-radius: 50%;
    animation: fos-addon-spin 0.8s linear infinite;
}

@keyframes fos-addon-spin {
    to { transform: rotate(360deg); }
}

.fos-addon-modal__redirecting-msg {
    font-size: 14px;
    color: var(--fos-text-sub);
    text-align: center;
}

/* ─── Footer legal copy ─────────────────────────────────────────────────
 * Three short trust claims separated by middle dots, dimmed so they read
 * as supporting micro-copy rather than competing with the grid above.
 */
.fos-addon-modal__legal {
    font-size: 11.5px;
    color: var(--fos-text-dim);
    text-align: center;
    width: 100%;
    line-height: 1.5;
}

/* ─── Toast (WP-native admin notice variant) ───────────────────────────
 * The toast shown after a successful or cancelled return from Stripe.
 * Inherits .notice / .notice-success / .notice-info styling from WP core
 * — we just nudge spacing so it looks intentional (closer to the page
 * heading, not floating randomly in the wrap padding).
 */
.fos-addon-toast {
    margin: 12px 0 16px !important;
    padding: 12px 36px 12px 14px !important;
    position: relative;
}

.fos-addon-toast .notice-dismiss {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    margin: 0;
    padding: 9px;
    background: none;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.fos-addon-toast .notice-dismiss::before {
    content: "\f153"; /* WP dashicons-no-alt */
    font: 16px/20px dashicons;
    color: var(--fos-text-dim);
}

.fos-addon-toast .notice-dismiss:hover::before {
    color: var(--fos-text);
}

/* ─── Mobile / narrow viewport ──────────────────────────────────────────
 * Below 640px (where the modal box already wants to shrink), drop the
 * grid to a single column so cards aren't squeezed too thin to read.
 */
@media (max-width: 640px) {
    .fos-addon-pkg-grid {
        grid-template-columns: 1fr;
    }
    .fos-addon-pkg-card {
        min-height: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Sprint B.4.2 — Confirm Extra Credit Use modal (Caso A).
 *
 * Lighter, narrower variant of .fos-modal__box for a single yes/no
 * decision — distinct visually from the .--addon variant (which is
 * a multi-card buy flow). 420px feels appropriate for one paragraph
 * of body copy + two buttons; bigger would feel over-engineered for
 * a confirmation, smaller would crowd the buttons.
 * ═══════════════════════════════════════════════════════════════════ */

.fos-modal__box--confirm {
    max-width: 420px;
}

.fos-confirm-extra__body {
    text-align: center;
    padding: 8px 4px 4px;
}

.fos-confirm-extra__msg {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fos-text);
}

.fos-confirm-extra__remaining {
    margin: 0;
    font-size: 12.5px;
    color: var(--fos-text-dim);
    font-style: italic;
}

/* Footer reflows the buttons to align right (Cancel left of Confirm),
 * matching WP/macOS convention where the primary action sits last. */
.fos-confirm-extra__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Local button styles — using lightweight variants of the brand button
 * since this modal is dropped into Nova Produção where .cts-btn--primary
 * etc. may or may not be loaded. Keeping them scoped here avoids
 * cross-page surprises. */
.fos-confirm-extra__footer .fos-btn {
    padding: 9px 18px;
    border-radius: var(--fos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
    transition: var(--fos-transition);
    border: 1px solid transparent;
}

.fos-confirm-extra__footer .fos-btn--ghost {
    background: #fff;
    color: var(--fos-text-sub);
    border-color: var(--fos-border);
}

.fos-confirm-extra__footer .fos-btn--ghost:hover,
.fos-confirm-extra__footer .fos-btn--ghost:focus-visible {
    background: #f8fafc;
    color: var(--fos-text);
    border-color: var(--fos-text-dim);
}

.fos-confirm-extra__footer .fos-btn--primary {
    background: var(--fos-primary);
    color: #fff;
    border-color: var(--fos-primary);
}

.fos-confirm-extra__footer .fos-btn--primary:hover,
.fos-confirm-extra__footer .fos-btn--primary:focus-visible {
    background: var(--fos-primary-dark);
    border-color: var(--fos-primary-dark);
    box-shadow: 0 2px 6px rgba(108, 71, 255, 0.30);
}

.fos-confirm-extra__footer .fos-btn:focus-visible {
    outline: 2px solid var(--fos-primary);
    outline-offset: 2px;
}
