/* ═══════════════════════════════════════════════════════════════════
   plan-cards-v3.css
   ──────────────────────────────────────────────────────────────────
   Isolated stylesheet for the pixel-perfect v3 rendering of the
   /my/create-company?step=plan cards. Included ONLY when the partial
   my.partial.plan_step_v3 is rendered (query flag ?planv=3 today).

   Nothing in this file leaks to the default plan step — every selector
   is scoped under .mz-planv3 wrapper. Rollback = delete this file +
   partial + the @if toggle in create-company.blade.php.
   ═══════════════════════════════════════════════════════════════════ */

.mz-planv3 {
    /* All text tokens use one opaque near-black — hierarchy via weight/size,
       not colour. */
    --ink-1: #0F172A;
    --ink-2: #0F172A;
    --ink-3: #0F172A;
    --ink-4: #0F172A;
    --ink-5: #0F172A;
    --line: #E2E8F0;
    --line-2: #F1F5F9;
    --sparkle: #A78BFA;

    /* Warning tokens (Solo only) */
    --warn-bg: #FEF2F2;
    --warn-border: #FECACA;
    --warn-ink: #B91C1C;
    --warn-strong: #991B1B;

    /* Save tokens (Pro only) */
    --save-bg: #F0FDF4;
    --save-border: #BBF7D0;
    --save-ink: #166534;
    --save-strong: #15803D;
}

/* ── Grid ─────────────────────────────────────────────── */
/* Desktop: 2 cards top row (Solo + Pro), Premium spans both columns
   on row 2 with tight max-width so it doesn't stretch to full width.
   align-items: start → each card sizes to its own content, no stretch. */
.mz-planv3 .planv3-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
/* Desktop visual trick: Solo shorter than Pro, vertically centred in
   Pro's row → Solo starts lower AND ends higher, so it looks "smaller /
   airier" than Pro. */
.mz-planv3 .planv3-grid > .planv3-card[data-tier="solo"] {
    align-self: center;
}
/* Kill the CTA "margin-top: auto" push on Solo so the button sits close
   under the feature list. */
.mz-planv3 .planv3-card[data-tier="solo"] .planv3-cta-wrap {
    margin-top: 6px;
}
/* Desktop: Premium sits under Solo on the left, occupies column 1 only,
   with the right column left blank. Sola dayalı, iki üstteki kartla
   aynı hizada. */
.mz-planv3 .planv3-grid > .planv3-card[data-tier="premium"] {
    grid-column: 1 / 2;
    justify-self: stretch;
    width: 100%;
    max-width: none;
}
/* Mobile: single column stack. Cards fill the row and appear centred by
   virtue of the sole-column layout. Solo card resumes normal stretch +
   auto CTA push so it looks consistent with the other cards. */
@media (max-width: 900px) {
    .mz-planv3 .planv3-grid { grid-template-columns: 1fr; }
    .mz-planv3 .planv3-grid > .planv3-card[data-tier="premium"] {
        grid-column: auto;
        max-width: 100%;
    }
    .mz-planv3 .planv3-grid > .planv3-card[data-tier="solo"] {
        align-self: stretch;
    }
    .mz-planv3 .planv3-card[data-tier="solo"] .planv3-cta-wrap {
        margin-top: auto;
    }
}

/* ── Card shell ───────────────────────────────────────── */
.mz-planv3 .planv3-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 26px 22px 22px;
    background: #FFFFFF;
    border: 1.5px solid var(--tier-border);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.mz-planv3 .planv3-card:hover {
    border-color: var(--tier-main);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.mz-planv3 .planv3-card:has(input[type=radio]:checked) {
    border-color: var(--tier-main);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
.mz-planv3 .planv3-card input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}

/* Tier tokens */
.mz-planv3 .planv3-card.tier-solo {
    --tier-main: #3B82F6;
    --tier-strong: #2563EB;
    --tier-soft: #EFF6FF;
    --tier-soft-2: #DBEAFE;
    --tier-border: #DBEAFE;
    --tier-ink: #1D4ED8;
}
.mz-planv3 .planv3-card.tier-pro {
    --tier-main: #8B5CF6;
    --tier-strong: #7C3AED;
    --tier-soft: #F5F3FF;
    --tier-soft-2: #EDE9FE;
    --tier-border: #DDD6FE;
    --tier-ink: #6D28D9;
}
.mz-planv3 .planv3-card.tier-premium {
    --tier-main: #6366F1;
    --tier-strong: #4F46E5;
    --tier-soft: #EEF2FF;
    --tier-soft-2: #E0E7FF;
    --tier-border: #C7D2FE;
    --tier-ink: #4338CA;
}

/* ── Radio-style tick (top-left) — always visible ─────────────
   Unselected cards show an empty white circle with a grey border.
   Selected card fills with the tier colour and reveals the check.  */
.mz-planv3 .planv3-check-tick {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px; /* RTL-aware: left in LTR, right in RTL */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #CBD5E1;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 2;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.mz-planv3 .planv3-check-tick svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity .15s;
}
.mz-planv3 .planv3-card:has(input[type="radio"]:checked) .planv3-check-tick,
.mz-planv3 .planv3-card.is-selected .planv3-check-tick {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}
.mz-planv3 .planv3-card:has(input[type="radio"]:checked) .planv3-check-tick svg,
.mz-planv3 .planv3-card.is-selected .planv3-check-tick svg {
    opacity: 1;
}

/* ── Head: icon SOL + text stack SAĞ (yan yana) ───── */
.mz-planv3 .planv3-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-top: 8px;   /* ticker with the top-left tick */
}
.mz-planv3 .planv3-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}
.mz-planv3 .planv3-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* PNG icon already carries the tinted background at 88x88 — no CSS bg. */
}
.mz-planv3 .planv3-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin-top: 18px;
}

.mz-planv3 .planv3-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    line-height: 1.15;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mz-planv3 .planv3-sparkle {
    width: 14px; height: 14px;
    color: var(--sparkle);
    flex-shrink: 0;
}
.mz-planv3 .planv3-sub {
    font-size: 13px;
    color: var(--ink-4);
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}
.mz-planv3 .planv3-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--tier-soft-2);
    color: var(--tier-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 2px;
}
.mz-planv3 .planv3-chip svg { width: 11px; height: 11px; }

/* ── Body copy (last sentence bold) ───────────────────── */
.mz-planv3 .planv3-body {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.55;
    margin: 4px 0 0;
    font-weight: 400;
}
.mz-planv3 .planv3-body strong {
    color: var(--ink-1);
    font-weight: 700;
}

/* ── Solo warning card (amber/red) ────────────────────── */
.mz-planv3 .planv3-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 4px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--warn-ink);
    font-weight: 500;
    line-height: 1.5;
}
.mz-planv3 .planv3-warn svg {
    width: 18px;
    height: 18px;
    color: var(--warn-strong);
    flex-shrink: 0;
    margin-top: 1px;
}
.mz-planv3 .planv3-warn strong {
    color: var(--warn-strong);
    font-weight: 800;
}

/* ── Pro save badge (green) ───────────────────────────── */
.mz-planv3 .planv3-save {
    padding: 12px 14px;
    background: var(--save-bg);
    border: 1px solid var(--save-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mz-planv3 .planv3-save-headline {
    font-size: 13px;
    font-weight: 800;
    color: var(--save-strong);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
}
.mz-planv3 .planv3-save-sub {
    font-size: 12px;
    color: var(--save-ink);
    line-height: 1.5;
    font-weight: 500;
}
.mz-planv3 .planv3-save-sub s {
    color: #DC2626;           /* canlı kırmızı red-600 */
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.mz-planv3 .planv3-save-strong {
    color: #15803D;           /* koyu yeşil green-700 */
    font-weight: 700;
}

/* Save-with-annual chip — Premium annual view kısayolu, renewal pill'in
   yanında yeşil pill. */
.mz-planv3 .planv3-save-annual {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: #DCFCE7;      /* green-100 */
    color: #15803D;           /* green-700 */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 8px;
}

/* ── Price block ──────────────────────────────────────── */
.mz-planv3 .planv3-pay-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    line-height: 1.2;
    /* Fully opaque dotted separator from the header/warning/save block above. */
    border-top: 1px dotted #0F172A;
    margin: 14px 0 6px;
    padding-top: 14px;
    margin: 6px 0 6px;
}
.mz-planv3 .planv3-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    line-height: 1;
}
.mz-planv3 .planv3-price .amt {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--ink-1);
    line-height: 1;
}
.mz-planv3 .planv3-price .unit {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-4);
}
.mz-planv3 .planv3-price-sub {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 6px;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Premium segmented toggle ─────────────────────────── */
.mz-planv3 .planv3-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: var(--tier-soft);
    border: 1px solid var(--tier-border);
    border-radius: 12px;
    margin-bottom: 8px;
}
.mz-planv3 .planv3-toggle-btn {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--ink-4);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.mz-planv3 .planv3-toggle-btn.active {
    background: var(--tier-main);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.mz-planv3 .planv3-toggle-btn .save-chip {
    padding: 2px 6px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #15803D;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.mz-planv3 .planv3-toggle-btn.active .save-chip {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

/* ── Renewal pill ─────────────────────────────────────── */
.mz-planv3 .planv3-renew {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 4px;
    background: var(--tier-soft);
    color: var(--tier-ink);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
}
.mz-planv3 .planv3-renew svg {
    width: 14px;
    height: 14px;
    color: var(--tier-main);
    flex-shrink: 0;
}

/* ── Mini icon grid (Pro 2×2, Premium 3-col) ─────────── */
.mz-planv3 .planv3-mini-grid {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}
.mz-planv3 .planv3-mini-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.mz-planv3 .planv3-mini-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mz-planv3 .planv3-mini-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mz-planv3 .planv3-mini-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--tier-soft);
    border-radius: 12px;
    text-align: center;
}

/* Single-row variant with vertical dividers between cells.
   Cells share one rounded pill background; each cell has a 1px right
   divider except the last. Used by Pro's 4-column mini stats row. */
.mz-planv3 .planv3-mini-grid.has-dividers {
    background: var(--tier-soft);
    border-radius: 14px;
    padding: 12px 4px;
    gap: 0;
}
.mz-planv3 .planv3-mini-grid.has-dividers > .planv3-mini-cell {
    background: transparent;
    padding: 4px 6px;
    border-right: 1px solid var(--tier-border);
    border-radius: 0;
    gap: 5px;
}
.mz-planv3 .planv3-mini-grid.has-dividers > .planv3-mini-cell:last-child {
    border-right: none;
}
.mz-planv3 .planv3-mini-grid.has-dividers .planv3-mini-icon {
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--tier-strong);
}
.mz-planv3 .planv3-mini-grid.has-dividers .planv3-mini-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 3;
}
.mz-planv3 .planv3-mini-grid.has-dividers .planv3-mini-label {
    font-size: 10.5px;
    line-height: 1.25;
}
/* Mobile: 4-col Pro divided grid collapses to 2×2 pills. 3-col Premium
   KEEPS the desktop 3-across layout with vertical dividers — cells stay
   inline so the row reads as one strip, not stacked buttons. */
@media (max-width: 900px) {
    .mz-planv3 .planv3-mini-grid.cols-4.has-dividers {
        background: transparent;
        padding: 0;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }
    .mz-planv3 .planv3-mini-grid.cols-4.has-dividers > .planv3-mini-cell {
        background: var(--tier-soft);
        border-right: none;
        border-radius: 12px;
        padding: 12px 8px;
    }
}
.mz-planv3 .planv3-mini-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tier-soft-2);
    color: var(--tier-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mz-planv3 .planv3-mini-icon svg { width: 16px; height: 16px; }
.mz-planv3 .planv3-mini-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-2);
    line-height: 1.3;
}

/* ── Divider ─────────────────────────────────────────── */
.mz-planv3 .planv3-divider {
    height: 1px;
    margin-top: 8px;
    background: var(--line-2);
}

/* ── Includes label ──────────────────────────────────── */
.mz-planv3 .planv3-includes-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-1);
    line-height: 1.2;
    margin: 8px 0 0;
}

/* ── Feature list ────────────────────────────────────── */
.mz-planv3 .planv3-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mz-planv3 .planv3-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
    line-height: 1.45;
}
.mz-planv3 .planv3-features li > svg {
    width: 15px;
    height: 15px;
    color: var(--tier-main);
    stroke-width: 3;
    flex-shrink: 0;
    margin-top: 2px;
}
.mz-planv3 .planv3-features li > span { flex: 1; min-width: 0; }
.mz-planv3 .planv3-features li small {
    display: block;
    color: var(--ink-4);
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.4;
    font-size: 12px;
}
.mz-planv3 .planv3-inc-tag {
    display: inline-flex;
    align-self: center;
    width: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--tier-soft-2);
    color: var(--tier-ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    flex-grow: 0;
    line-height: 1.35;
    white-space: nowrap;
}

/* Rows that carry an "Included" tag switch to a 3-column grid so the
   label reserves ~75% of the row and the tag column ~25% (pill still
   sits at the right edge of its column via justify-self). Solo rows
   have no tag and stay on the plain flex layout above. */
.mz-planv3 .planv3-features li:has(.planv3-inc-tag) {
    display: grid;
    grid-template-columns: auto minmax(0, 3fr) 1fr;
    align-items: start;
    gap: 10px;
}
.mz-planv3 .planv3-features li:has(.planv3-inc-tag) > svg { grid-column: 1; }
.mz-planv3 .planv3-features li:has(.planv3-inc-tag) > span:first-of-type { grid-column: 2; }
.mz-planv3 .planv3-features li:has(.planv3-inc-tag) .planv3-inc-tag {
    grid-column: 3;
    justify-self: end;
    align-self: center;
}

/* ── CTA ─────────────────────────────────────────────── */
.mz-planv3 .planv3-cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.mz-planv3 .planv3-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, border-color .15s, transform .08s;
}
/* Unchecked cards get a muted CTA so the chosen card visually pops. */
.mz-planv3 .planv3-card:not(:has(input[type="radio"]:checked)) .planv3-cta {
    opacity: 0.55;
}
.mz-planv3 .planv3-cta.cta-solid {
    background: var(--tier-main);
    color: #FFFFFF;
    border: 2px solid var(--tier-main);
}
.mz-planv3 .planv3-cta.cta-solid:hover {
    background: var(--tier-strong);
    border-color: var(--tier-strong);
}
.mz-planv3 .planv3-cta.cta-outline {
    background: #FFFFFF;
    color: var(--tier-strong);
    border: 2px solid var(--tier-main);
}
.mz-planv3 .planv3-cta.cta-outline:hover {
    background: var(--tier-soft);
}
.mz-planv3 .planv3-cta:active { transform: translateY(1px); }
.mz-planv3 .planv3-cta svg.cta-arrow { width: 16px; height: 16px; }

/* ── Fine print ──────────────────────────────────────── */
.mz-planv3 .planv3-fine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-5);
    font-weight: 400;
    line-height: 1.3;
}
.mz-planv3 .planv3-fine svg { width: 12px; height: 12px; color: var(--ink-5); }

/* ── Featured floating pill (MOST POPULAR) ────────────── */
.mz-planv3 .planv3-card.is-featured {
    overflow: visible;
    margin-top: 8px;
}
.mz-planv3 .planv3-popular {
    position: absolute;
    top: -13px;
    /* Direction-agnostic centering: `left: 50%` + `translateX(-50%)`
       gives true horizontal center in both LTR and RTL. Using
       `inset-inline-start: 50%` would shift the pill to the wrong side
       in Arabic because transforms don't mirror with dir. */
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.35),
        0 0 0 4px rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.mz-planv3 .planv3-popular svg { width: 12px; height: 12px; }

/* ── Bottom info bar (Why Pro or Premium?) ──────────── */
.mz-planv3 .planv3-info-bar {
    margin-top: 24px;
    padding: 16px 20px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.mz-planv3 .planv3-info-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #EDE9FE;
    color: #7C3AED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mz-planv3 .planv3-info-icon svg { width: 18px; height: 18px; }
.mz-planv3 .planv3-info-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-1);
    margin: 0 0 3px;
    line-height: 1.35;
}
.mz-planv3 .planv3-info-desc {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 900px) {
    .mz-planv3 .planv3-card { padding: 22px 18px 20px; }
    .mz-planv3 .planv3-price .amt { font-size: 38px; }
    .mz-planv3 .planv3-mini-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; margin: 8px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile accordion (≤ 900px)
   ──────────────────────────────────────────────────────────────────
   Default: only .planv3-collapsed-view is visible on each card. Tap
   the chevron to add .is-mobile-open → expanded view unhides, chevron
   rotates. Desktop hides collapsed-view + chevron entirely so the
   existing pixel-perfect layout is untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop defaults — hide mobile-only widgets */
.mz-planv3 .planv3-collapsed-view { display: none; }
.mz-planv3 .planv3-chevron { display: none; }
.mz-planv3 .planv3-expanded-view { display: block; }

/* Belt-and-suspenders — some cascade / viewport-boundary edge cases were
   letting the mobile collapsed view leak onto desktop screens (visible as
   the whole card rendering twice: once collapsed, once expanded). This
   explicit min-width block forcefully hides mobile-only widgets from
   901px up and re-affirms the expanded view. */
@media (min-width: 901px) {
    .mz-planv3 .planv3-collapsed-view { display: none !important; }
    .mz-planv3 .planv3-chevron { display: none !important; }
    .mz-planv3 .planv3-card .planv3-expanded-view { display: block !important; }
}

@media (max-width: 900px) {
    /* Contain any accidental horizontal overflow (long labels, absolute
       badges, translated content). The wrapper clips; the card itself
       stays overflow:visible so the Most Popular pill can float above. */
    .mz-planv3 {
        overflow-x: hidden;
        max-width: 100%;
    }
    .mz-planv3 .planv3-grid {
        max-width: 100%;
        gap: 14px;
    }
    /* Card gains a right inset so the absolute chevron doesn't overlay
       the content, plus tighter horizontal padding for narrow phones.
       overflow-x: clip stops any child (long labels, absolute pills)
       from creating horizontal page scroll — the parent form/main and
       the right-sidebar all sit on the same viewport row on mobile, so
       any overflow inside a card pushes them all sideways. */
    .mz-planv3 .planv3-card {
        padding: 18px 16px 18px 16px;
        position: relative;
        border-radius: 18px;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: clip;
    }
    /* Ensure every flex parent inside the card can actually shrink —
       missing min-width:0 is the classic cause of a flex child forcing
       intrinsic min-content width upward through the layout. */
    .mz-planv3 .planv3-card,
    .mz-planv3 .planv3-collapsed-view,
    .mz-planv3 .planv3-mini-head,
    .mz-planv3 .planv3-mini-head-text,
    .mz-planv3 .planv3-mini-features,
    .mz-planv3 .planv3-mini-features li,
    .mz-planv3 .planv3-mini-features li > span,
    .mz-planv3 .planv3-mini-warn,
    .mz-planv3 .planv3-mini-warn > span {
        min-width: 0;
        max-width: 100%;
    }
    /* Absolute Most Popular pill can be wider than a narrow phone if the
       translated label is long — cap it so translateX(-50%) never pokes
       outside the card. */
    .mz-planv3 .planv3-popular {
        max-width: calc(100% - 24px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Collapsed view visible by default; expanded view hidden until open. */
    .mz-planv3 .planv3-card .planv3-collapsed-view { display: block; }
    .mz-planv3 .planv3-card .planv3-expanded-view { display: none; }
    .mz-planv3 .planv3-card.is-mobile-open .planv3-collapsed-view { display: none; }
    .mz-planv3 .planv3-card.is-mobile-open .planv3-expanded-view { display: block; }

    /* Chevron toggle */
    .mz-planv3 .planv3-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: absolute;
        top: 10px;
        inset-inline-end: 12px; /* RTL-aware: right in LTR, left in RTL */
        min-height: 22px;
        padding: 3px 7px;
        border: none;
        border-radius: 8px;
        background: #F1F5F9;
        color: var(--tier-main);
        cursor: pointer;
        /* Heartbeat pulse on page load — draws the eye to the tap
           target. Two-beat rhythm × 4 cycles, then stops so it
           doesn't pester. Only fires while the panel is collapsed. */
        animation: mz-chevron-attn 1.2s ease-in-out 0.5s 4;
    }
    .mz-planv3 .planv3-chevron[aria-expanded="true"] { animation: none; }
    @keyframes mz-chevron-attn {
        0%, 28%, 70%, 100% { transform: scale(1); }
        14%, 42%           { transform: scale(1.25); }
    }
        z-index: 3;
        transition: background .12s;
    }
    .mz-planv3 .planv3-chevron:hover { background: var(--tier-soft); }
    .mz-planv3 .planv3-chevron svg {
        width: 14px;
        height: 14px;
        transition: transform .2s;
    }
    .mz-planv3 .planv3-chevron[aria-expanded="true"] svg { transform: rotate(180deg); }
    .mz-planv3 .planv3-chevron-label {
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: currentColor;
        line-height: 1;
    }

    .mz-planv3 .planv3-check-tick { top: 10px; inset-inline-start: 10px; }

    /* Featured Most Popular pill shrinks on mobile so it doesn't wrap */
    .mz-planv3 .planv3-popular { font-size: 9.5px; padding: 4px 10px; }

    /* ── Collapsed-view layout ───────────────────────────────────── */
    /* No inner padding — the card's own 16px padding already sets the
       side gutter, and matches what the expanded view uses. Only the
       first row (head) reserves room for the absolute chevron so the
       title doesn't sit under it; every row below is full width. */
    .mz-planv3 .planv3-collapsed-view {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    /* Match expanded .planv3-head's padding-top so the title anchors to
       the same Y-coordinate whether the card is collapsed or open — no
       jumpy title shift on toggle. */
    .mz-planv3 .planv3-card .planv3-mini-head { padding-top: 8px; }
    /* Head block mirrors expanded .planv3-head: icon LEFT, stacked text
       (title / sub / chip) RIGHT. Same sizes/weights as the expanded
       state so the collapsed view reads as a compact preview instead of
       a shrunken second design. */
    .mz-planv3 .planv3-mini-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        min-width: 0;
    }
    .mz-planv3 .planv3-mini-icon-tile {
        width: 58px;
        height: 58px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mz-planv3 .planv3-mini-icon-tile img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        margin-top: 18px;
    }
    .mz-planv3 .planv3-mini-head-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 2px;
    }
    .mz-planv3 .planv3-mini-title {
        font-size: 22px;
        font-weight: 800;
        color: var(--ink-1);
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin: 0;
        /* Only the title row leaves room for the absolute chevron; the
           chip and sub sit below the chevron's y-range and use full
           head-text width (so "Best for most founders" stays 1 line).
           RTL-aware — chevron flips to the start edge in Arabic. */
        padding-inline-end: 46px;
    }
    .mz-planv3 .planv3-mini-head-text .planv3-chip {
        white-space: nowrap;
    }
    .mz-planv3 .planv3-mini-sub {
        font-size: 13px;
        color: var(--ink-4);
        font-weight: 500;
        line-height: 1.3;
        margin: 0;
    }
    /* Chip inherits desktop .planv3-chip visuals (pill bg + tier ink), just
       snap alignment to head-text column and add 2px breathing room. */
    .mz-planv3 .planv3-mini-head-text .planv3-chip {
        align-self: flex-start;
        margin-top: 2px;
    }

    /* Body copy paragraph — mirrors expanded .planv3-body. Kept as a
       plain block <p> (NOT flex) so inline text + <strong> stay on the
       same line instead of splitting into anonymous flex items. */
    .mz-planv3 .planv3-mini-copy {
        font-size: 13.5px;
        color: var(--ink-3);
        line-height: 1.55;
        margin: 4px 0 0;
        font-weight: 400;
    }
    .mz-planv3 .planv3-mini-copy strong {
        color: var(--ink-1);
        font-weight: 700;
    }
    /* Price container only — needs flex-column to stack amt/unit + sub. */
    .mz-planv3 .planv3-mini-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 4px;
    }
    .mz-planv3 .planv3-mini-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
        line-height: 1;
        padding-top: 8px;
        padding-bottom: 12px;
    }
    .mz-planv3 .planv3-mini-price .amt {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--ink-1);
    }
    .mz-planv3 .planv3-mini-price .unit {
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-1);
    }
    .mz-planv3 .planv3-mini-price-sub {
        font-size: 12px;
        color: var(--ink-1);
        font-weight: 500;
        margin-top: 2px;
    }

    /* Solo compact warning — red inline text */
    .mz-planv3 .planv3-mini-warn {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        margin-top: 4px;
        background: #FEF2F2;
        border: 1px solid #FECACA;
        border-radius: 10px;
        font-size: 12px;
        color: #B91C1C;
        font-weight: 500;
        line-height: 1.4;
    }
    .mz-planv3 .planv3-mini-warn svg {
        width: 16px;
        height: 16px;
        color: #DC2626;
        flex-shrink: 0;
        margin-top: 1px;
    }
    .mz-planv3 .planv3-mini-warn strong {
        color: #991B1B;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Pro compact save — green counterpart to .planv3-mini-warn. Same
       shape / typography so Solo (red) and Pro (green) read as siblings. */
    .mz-planv3 .planv3-mini-save {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        margin: 4px 0 0;
        background: #ECFDF5;
        border: 1px solid #A7F3D0;
        border-radius: 10px;
        font-size: 12px;
        color: #065F46;
        font-weight: 500;
        line-height: 1.4;
    }
    .mz-planv3 .planv3-mini-save svg {
        width: 16px;
        height: 16px;
        color: #059669;
        flex-shrink: 0;
        margin-top: 1px;
    }
    .mz-planv3 .planv3-mini-save strong {
        color: #064E3B;
        font-weight: 800;
    }

    /* Pro/Premium compact feature check list */
    .mz-planv3 .planv3-mini-features {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .mz-planv3 .planv3-mini-features li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12.5px;
        color: var(--ink-1);
        font-weight: 500;
        line-height: 1.35;
    }
    .mz-planv3 .planv3-mini-features li svg {
        width: 14px;
        height: 14px;
        color: #16A34A;   /* green check, matches design's positive tone */
        flex-shrink: 0;
        margin-top: 2px;
        stroke-width: 3;
    }
    .mz-planv3 .planv3-mini-features li span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Expanded-block spacing mirrored into mobile — same values as the
       desktop rules above so cascade stays consistent across breakpoints
       (kept explicit for readability, not because desktop wouldn't
       inherit). */
    .mz-planv3 .planv3-body { margin: 4px 0 0; }
    .mz-planv3 .planv3-warn { margin-top: 4px; }
    .mz-planv3 .planv3-pay-label { margin: 14px 0 6px; }
    .mz-planv3 .planv3-renew { margin-top: 4px; }
    .mz-planv3 .planv3-divider { margin-top: 8px; }
    .mz-planv3 .planv3-includes-label { margin: 8px 0 0; }
    .mz-planv3 .planv3-icon img { margin-top: 18px; }
}

/* Very small phones (≤ 380px) — slightly tighter typography */
@media (max-width: 380px) {
    .mz-planv3 .planv3-card { padding: 16px 14px 16px 14px; border-radius: 16px; }
    .mz-planv3 .planv3-collapsed-view { gap: 10px; }
    .mz-planv3 .planv3-mini-title { font-size: 16px; }
    .mz-planv3 .planv3-mini-price .amt { font-size: 26px; }
    .mz-planv3 .planv3-mini-icon-tile { width: 38px; height: 38px; }
    .mz-planv3 .planv3-check-tick { top: 10px; left: 10px; width: 20px; height: 20px; }
    .mz-planv3 .planv3-chevron { top: 10px; inset-inline-end: 10px; }
}

.mz-planv3 .planv3-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    margin-bottom: 16px;
    color: #065f46;
    font-size: 14px;
    line-height: 1.5;
    animation: mz-intro-slide-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.mz-planv3 .planv3-intro-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #059669;
    margin-top: 1px;
}
.mz-planv3 .planv3-intro-icon svg { width: 100%; height: 100%; }
.mz-planv3 .planv3-intro-copy { flex: 1 1 auto; font-weight: 500; }
.mz-planv3 .planv3-intro-copy strong { font-weight: 700; color: #064e3b; }
.mz-planv3 .planv3-intro-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #065f46;
    opacity: 0.6;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.mz-planv3 .planv3-intro-close:hover { opacity: 1; background: rgba(6, 95, 70, 0.08); }
.mz-planv3 .planv3-intro-close svg { width: 16px; height: 16px; }

@keyframes mz-intro-slide-in {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.mz-planv3 .planv3-compare-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}
.mz-planv3 .planv3-compare-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-width: 0;
    line-height: 1.2;
}
.mz-planv3 .planv3-compare-link:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}
.mz-planv3 .planv3-compare-link svg { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; }

@media (min-width: 901px) {
    .mz-planv3 .planv3-compare-bar {
        justify-content: center;
        gap: 12px;
    }
    .mz-planv3 .planv3-compare-link {
        padding: 8px 14px;
        font-size: 13px;
        gap: 8px;
    }
    .mz-planv3 .planv3-compare-link svg { width: 15px; height: 15px; }
}

.mz-planv3 .planv3-card {
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mz-planv3 .planv3-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.10);
}
.mz-planv3 .planv3-card.is-selected {
    border-color: #16a34a !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12), 0 8px 24px -8px rgba(22, 163, 74, 0.25) !important;
}
.mz-planv3 .planv3-card.is-selected.is-pulse {
    animation: mz-select-pulse 550ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes mz-select-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12), 0 8px 24px -8px rgba(22, 163, 74, 0.25); }
    35%  { transform: scale(1.012); box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.20), 0 12px 32px -8px rgba(22, 163, 74, 0.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12), 0 8px 24px -8px rgba(22, 163, 74, 0.25); }
}


.mz-planv3 .planv3-tap-hint {
    position: absolute;
    top: 10px;
    inset-inline-end: 84px;
    display: none;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 900px) {
    .mz-planv3 .planv3-card:not(.is-selected) .planv3-tap-hint {
        display: inline-flex;
    }
}