/* ==========================================================
   Pricing Table — Universal Module Styles
   Module: pricing_table
   Tokens: uses --mt-* only (see /web/assets/css/00-tokens.css)
   No hardcoded colors. No template-specific selectors.
   Loaded once per page from /web/partials/pricing_table.php
   via $GLOBALS['_pricing_table_css_emitted'] guard.
   ========================================================== */


/* ── §1  Section frame ─────────────────────────────────── */
.pricing-table-section {
    padding: var(--mt-section-py) 0;
    background: var(--mt-neutral-50);
}


/* ── §2  Header (eyebrow / title / subtitle) ───────────── */
.pricing-table-section .pt-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--mt-space-10);
}

.pricing-table-section .pt-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mt-brand-primary);
    background: var(--mt-brand-primary-soft);
    padding: 4px 12px;
    border-radius: var(--mt-radius-full);
    margin-bottom: var(--mt-space-3);
}

.pricing-table-section .pt-title {
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    font-weight: 800;
    color: var(--mt-text-heading);
    margin: 0 0 var(--mt-space-3);
    line-height: var(--mt-leading-tight);
}

.pricing-table-section .pt-subtitle {
    font-size: 1rem;
    color: var(--mt-text-muted);
    margin: 0;
    line-height: var(--mt-leading-relaxed);
}


/* ── §3  Grid — responsive 1/2/3/4 columns ─────────────── */
.pricing-table-section .pt-grid {
    display: grid;
    gap: var(--mt-space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 576px) {
    .pricing-table-section .pt-grid-2,
    .pricing-table-section .pt-grid-3,
    .pricing-table-section .pt-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .pricing-table-section .pt-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .pricing-table-section .pt-grid-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ── §4  Card ──────────────────────────────────────────── */
.pricing-table-section .pt-card {
    position: relative;
    background: var(--mt-neutral-0);
    border: 1px solid var(--mt-border-light);
    border-radius: var(--mt-radius-xl);
    padding: var(--mt-space-6);
    box-shadow: var(--mt-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-3);
    transition: transform var(--mt-duration-normal) var(--mt-ease-out),
                box-shadow var(--mt-duration-normal) var(--mt-ease-out),
                border-color var(--mt-duration-normal) var(--mt-ease-out);
}
.pricing-table-section .pt-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mt-shadow-lg);
    border-color: var(--mt-brand-primary-soft);
}
.pricing-table-section .pt-card.is-highlight {
    border-color: var(--mt-brand-primary);
    box-shadow: 0 12px 32px rgba(var(--mt-brand-primary-rgb), 0.18);
}


/* ── §5  Badge / Icon / Title ──────────────────────────── */
.pricing-table-section .pt-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    padding: 4px 10px;
    border-radius: var(--mt-radius-full);
    white-space: nowrap;
}

.pricing-table-section .pt-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mt-radius-md);
    background: var(--mt-brand-primary-soft);
    color: var(--mt-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.pricing-table-section .pt-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mt-text-heading);
    margin: 0;
    line-height: var(--mt-leading-snug);
}


/* ── §6  Price row ─────────────────────────────────────── */
.pricing-table-section .pt-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.pricing-table-section .pt-price {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 800;
    color: var(--mt-text-heading);
    line-height: 1;
}
.pricing-table-section .pt-price-suffix {
    font-size: 0.85rem;
    color: var(--mt-text-muted);
    font-weight: 500;
}


/* ── §7  Description ───────────────────────────────────── */
.pricing-table-section .pt-desc {
    font-size: 0.9rem;
    color: var(--mt-text-body);
    margin: 0;
    line-height: var(--mt-leading-relaxed);
}


/* ── §8  Features list (fallback when no plans) ────────── */
.pricing-table-section .pt-features {
    list-style: none;
    padding: 0;
    margin: var(--mt-space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pricing-table-section .pt-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--mt-text-body);
    line-height: var(--mt-leading-snug);
}
.pricing-table-section .pt-feature-icon {
    color: var(--mt-success);
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 0.85rem;
}


/* ── §9  Plans list (structured grid) ──────────────────── */
.pricing-table-section .pt-plans {
    list-style: none;
    padding: 0;
    margin: var(--mt-space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pricing-table-section .pt-plan {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label price"
        "meta  meta";
    column-gap: var(--mt-space-3);
    row-gap: 2px;
    padding: var(--mt-space-3) 0;
    border-bottom: 1px solid var(--mt-border-light);
}
.pricing-table-section .pt-plan:last-child {
    border-bottom: none;
}
.pricing-table-section .pt-plan-label {
    grid-area: label;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mt-text-heading);
}
.pricing-table-section .pt-plan-price {
    grid-area: price;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mt-text-heading);
    text-align: right;
    white-space: nowrap;
}
.pricing-table-section .pt-plan-meta {
    grid-area: meta;
    font-size: 0.78rem;
    color: var(--mt-text-muted);
    line-height: var(--mt-leading-snug);
}


/* ── §10  CTA button ───────────────────────────────────── */
.pricing-table-section .pt-card-cta {
    margin-top: auto;
    padding-top: var(--mt-space-2);
}
.pricing-table-section .pt-cta-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    border: 1px solid var(--mt-brand-primary);
    padding: 10px 14px;
    border-radius: var(--mt-radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background var(--mt-duration-fast) ease,
                transform var(--mt-duration-fast) ease;
}
.pricing-table-section .pt-cta-btn:hover {
    background: var(--mt-brand-primary-hover);
    transform: translateY(-1px);
}
.pricing-table-section .pt-card:not(.is-highlight) .pt-cta-btn {
    background: transparent;
    color: var(--mt-brand-primary);
}
.pricing-table-section .pt-card:not(.is-highlight) .pt-cta-btn:hover {
    background: var(--mt-brand-primary-soft);
}


/* ── §11  Footer note ──────────────────────────────────── */
.pricing-table-section .pt-note {
    margin: var(--mt-space-6) auto 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--mt-text-muted);
    max-width: 720px;
}