/* Pricing Page Styles
 *
 * Ported from the pricing page design handoff (lc-pages.css + design tokens).
 * Global classes (.lc-table, .lc-stack, .basic-container, .btn, .field-input,
 * .lc-h1/.lc-h3, .lc-link-accent, ...) come from lunarcat_global.css and are
 * not duplicated here.
 */

/* ── Design tokens not yet defined in lunarcat_global.css ─────────────────── */
:root {
    --space-2xs: calc(0.25 * var(--space));  /* 4px  */
    --space-xs:  calc(0.5 * var(--space));   /* 8px  */
    --space-sm:  calc(0.75 * var(--space));  /* 12px */
    --space-lg:  calc(1.5 * var(--space));   /* 24px */
    --space-xl:  calc(2 * var(--space));     /* 32px */
    --space-2xl: calc(3 * var(--space));     /* 48px */
    --space-3xl: calc(4 * var(--space));     /* 64px */

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --button-height: 38px;
    --container-max: 1200px;
    --tracking-wide: 0.08em;
    --transition-fast: 0.2s ease;

    --color-accent-soft: rgba(255, 158, 181, 0.18);
    --color-accent-faint: rgba(255, 158, 181, 0.08);
    --color-surface-card: #ffffff;
}

[data-theme="dark"] {
    --color-accent-soft: rgba(255, 205, 57, 0.18);
    --color-accent-faint: rgba(255, 205, 57, 0.08);
    --color-surface-card: #2a2a2a; /* dark cards (never white) */
}

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.fees-wrapper {
    font-family: var(--font-primary);
    background: var(--color-bg-main);
    color: var(--color-text-primary);
    padding: var(--space-3xl) var(--space-xl) calc(5 * var(--space));
}
@media (max-width: 600px) {
    .fees-wrapper { padding: var(--space-xl) var(--space) calc(3 * var(--space)); }
}

.fees-wrapper .section-header {
    max-width: var(--container-max);
    margin: 0 auto calc(2.5 * var(--space));
}

.pricing-simulator-full {
    width: 100%;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border-light);
}
.pricing-simulator-full > .lc-h3 {
    margin-bottom: var(--space-lg);
}

/* ── Shared field helpers (also used by the simulator) ────────────────────── */
.lc-meta-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-secondary);
}
.lc-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space);
}
.lc-field-row[hidden] {
    display: none;
}

/* ── Collapsibles (guide page dependency) ─────────────────────────────────── */
.lc-details {
    border: 1px solid var(--color-border-lighter);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-card);
}
.lc-details > summary {
    padding: var(--space) calc(1.25 * var(--space));
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-primary);
    user-select: none;
    transition: background var(--transition-fast);
}
.lc-details > summary:hover { background: var(--color-accent-faint); }
.lc-details > summary::-webkit-details-marker { display: none; }
.lc-details > summary::before {
    content: '▶';
    font-size: 10px;
    color: var(--color-accent-pressed);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.lc-details[open] > summary::before { transform: rotate(90deg); }
.lc-details[open] > summary { border-bottom: 1px solid var(--color-border-lighter); }
.lc-details-body { padding: var(--space) calc(1.25 * var(--space)); }