/* ==========================================================================
   mailkoo — Pricing page
   Loads after variables.css + marketing.css. Scoped to body.mc-page-pricing
   and body.mc-page-lifetime (both render the comparison matrix).
   ========================================================================== */

/* ---------- Billing toggle ----------
   Segmented two-state switch. Real <button>s with aria-pressed, inside a
   labelled role=group — the state change is announced by aria-pressed, so no
   live region is needed. */

.mcl-toggle {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-active-bg);
    border: 1px solid var(--color-border);
}

.mcl-toggle-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.mcl-toggle-opt.is-active {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.mcl-toggle-save {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-success-bg);
    color: var(--color-success);
    letter-spacing: var(--tracking-wide);
}

/* ---------- Cycle scoping ----------
   Both prices are rendered server-side; the toggle only flips this attribute.
   No fetch, no reflow, no flash of the wrong price, and with JS disabled the
   monthly set simply stays visible and every CTA still works. */

.mcl-pricing[data-cycle="monthly"] [data-cycle="yearly"],
.mcl-pricing[data-cycle="yearly"]  [data-cycle="monthly"] { display: none; }

/* Pre-paint override. The <html data-mc-cycle> hint is set by an inline head
   script from localStorage before the section is parsed, so a returning yearly
   shopper never sees the monthly price first. Higher specificity than the
   rules above, and marketing-widgets.js removes the attribute the moment it
   has applied the real state — so the two never both apply. */
html[data-mc-cycle="yearly"] .mcl-pricing [data-cycle="monthly"] { display: none; }
html[data-mc-cycle="yearly"] .mcl-pricing [data-cycle="yearly"]  { display: inline; }

/* ---------- Plan cards ---------- */

.mcl-plans {
    display: grid;
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-10);
}
.mcl-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.mcl-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcl-plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mcl-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-xs);
    height: 100%;
}

.mcl-plan.is-popular {
    border-color: var(--color-teal);
    box-shadow: var(--shadow-lg);
}

.mcl-plan-badge {
    position: absolute;
    top: calc(var(--space-3) * -1);
    inset-inline-start: var(--space-7);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--mcl-gradient-cta);
    color: #FFFFFF;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.mcl-plan-name { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.mcl-plan-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); min-height: 2.6em; }

.mcl-plan-price { margin: var(--space-5) 0; }
.mcl-plan-amount {
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mcl-plan-per { font-size: var(--text-sm); color: var(--color-text-muted); margin-inline-start: var(--space-1); }
.mcl-plan-note { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

.mcl-plan-trial {
    display: inline-block;
    margin-bottom: var(--space-4);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.mcl-plan-limits { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.mcl-plan-limits li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.mcl-plan-limits dt { color: var(--color-text-muted); }
.mcl-plan-limits dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; text-align: end; }

.mcl-plan-cta { margin-top: auto; }
.mcl-plan-cta .mcl-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- "Every plan includes" chips ---------- */

.mcl-included {
    display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
    margin-top: var(--space-10);
}

/* ---------- Comparison matrix ---------- */

/* Group heading row inside the single desktop table. Sits below the sticky
   header, so it needs its own background or rows scroll visibly through it. */
.mcl-matrix-section th {
    padding-top: var(--space-8);
    padding-bottom: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-align: start;
    background: var(--color-page-bg);
    border-bottom: 2px solid var(--color-border-strong);
}
.mcl-matrix tbody:first-of-type .mcl-matrix-section th { padding-top: var(--space-4); }

/* Used by the mobile list, which keeps the collapsible <details> grouping —
   there is no sticky header there to conflict with. */
.mcl-matrix-group { margin-bottom: var(--space-5); }
.mcl-matrix-group > summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    border-bottom: 1px solid var(--color-border);
}
.mcl-matrix-group > summary::-webkit-details-marker { display: none; }
.mcl-matrix-group > summary .mc-icon { transition: transform var(--transition-fast); }
.mcl-matrix-group[open] > summary .mc-icon { transform: rotate(180deg); }

.mcl-matrix { width: 100%; border-collapse: collapse; }
.mcl-matrix th, .mcl-matrix td { padding: var(--space-3) var(--space-4); text-align: start; }
.mcl-matrix tbody tr { border-bottom: 1px solid var(--color-border); }
.mcl-matrix tbody tr:hover { background: var(--color-hover-bg); }
.mcl-matrix th[scope="row"] { font-weight: var(--weight-normal); color: var(--color-text-secondary); }
.mcl-matrix td { text-align: center; font-variant-numeric: tabular-nums; }

/* Sticky plan header. top is --mcl-sticky-top so it lands below the nav AND
   below the announcement bar when one is showing. */
.mcl-matrix-head {
    position: sticky;
    top: var(--mcl-sticky-top);
    z-index: 2;
    background: var(--color-card-bg);
    box-shadow: 0 1px 0 var(--color-border);
}
.mcl-matrix-head th { padding: var(--space-4); text-align: center; vertical-align: top; }
.mcl-matrix-head .mcl-plan-name { font-size: var(--text-base); }
.mcl-matrix-head .mcl-mh-price { font-size: var(--text-sm); color: var(--color-text-muted); }

/* The four value states, kept visually distinct.
   `--` (not included) and `0` must never look the same: one means the feature
   is absent from the plan, the other means it is present with nothing
   allocated. Both use decorative-grade contrast, which is exactly why each
   carries an .sr-only label in the markup. */
.mcl-cell.is-no        { color: var(--color-text-disabled); }
.mcl-cell.is-zero      { color: var(--color-text-muted); }
.mcl-cell.is-number    { color: var(--color-text); font-weight: var(--weight-semibold); }
.mcl-cell.is-unlimited { color: var(--color-teal); font-weight: var(--weight-semibold); }
.mcl-cell.is-yes       { color: var(--color-success); }
.mcl-cell.is-unlimited .mc-icon { vertical-align: -4px; }

/* Row-label tooltip. Shown on hover AND focus — never `title=`, which is
   keyboard- and touch-inaccessible. */
.mcl-tip-wrap { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); }
.mcl-tip-btn {
    border: 0; background: transparent; cursor: help; padding: 0;
    color: var(--color-text-disabled); display: inline-flex;
}
.mcl-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 5;
    width: max-content;
    max-width: 280px;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--gray-900);
    color: #FFFFFF;
    font-size: var(--text-xs);
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
}
.mcl-tip[hidden] { display: none; }
.mcl-tip-btn:hover + .mcl-tip,
.mcl-tip-btn:focus-visible + .mcl-tip { display: block; }

/* ---------- Mobile plan switcher ---------- */

.mcl-matrix-mobile { display: none; }

.mcl-plan-switch {
    position: sticky;
    top: var(--mcl-sticky-top);
    z-index: 3;
    background: var(--color-page-bg);
    padding: var(--space-3) 0;
    display: flex;
    justify-content: center;
}

.mcl-mrow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.mcl-mrow dt { color: var(--color-text-secondary); }
.mcl-mrow dd { margin: 0; text-align: end; }

/* Cell visibility is toggled by marketing-widgets.js via the `hidden`
   attribute (CSS cannot match a cell against an interpolated plan uid). This
   rule is the no-JS fallback: without the script every value would stack, so
   all but the first are hidden and the first plan's column reads correctly. */
.mcl-matrix-mobile [data-plan-cell] ~ [data-plan-cell] { display: none; }
.mcl-matrix-mobile [data-plan-cell][hidden] { display: none; }

/* ---------- Lifetime cross-sell ---------- */

.mcl-crosssell {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--mcl-accent-brd, var(--color-warning-border));
    border-radius: var(--radius-lg);
    background: var(--mcl-accent-bg, var(--color-warning-bg));
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .mcl-plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Horizontal scroll with a sticky first column. The region is focusable
       and labelled so it is reachable and announced by keyboard and screen
       reader, which a bare overflow container is not. */
    .mcl-matrix-scroll {
        overflow-x: auto;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
                mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
    .mcl-matrix th[scope="row"],
    .mcl-matrix thead th:first-child {
        position: sticky;
        inset-inline-start: 0;
        background: var(--color-card-bg);
        box-shadow: 1px 0 0 var(--color-border);
        min-width: 220px;
    }
}

@media (max-width: 991px) {
    .mcl-plans-3, .mcl-plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Below this width the table stops being readable at any zoom, so it is
       replaced outright by a one-column list with a sticky plan picker —
       rather than a 4x-repeated stack or a pinch-to-zoom table. */
    .mcl-matrix-desktop { display: none; }
    .mcl-matrix-mobile { display: block; }
}

@media (max-width: 767px) {
    .mcl-plans-2, .mcl-plans-3, .mcl-plans-4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
    .mcl-crosssell { flex-direction: column; align-items: flex-start; }
    .mcl-toggle { width: 100%; justify-content: center; }
}