/**
 * inzc-subscription-plans.css
 *
 * Page-specific styles for pages/subscription-plans.php
 *
 * Sections:
 *  1. Page intro / header accent
 *  2. Billing toggle
 *  3. Plan cards grid
 *  4. Plan card anatomy
 *  5. Popular badge
 *  6. Price display
 *  7. Feature list
 *  8. Current plan state
 *  9. Mobile responsive
 * 10. Dark mode
 */

/* =============================================================================
   1. PAGE INTRO
   ============================================================================= */

.inzc-sub-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--inzc-spacing-8);
}

.inzc-sub-intro-title {
    font-size: var(--inzc-font-size-3xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-sub-intro-subtitle {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    line-height: 1.6;
}

/* =============================================================================
   2. BILLING TOGGLE
   ============================================================================= */

.inzc-sub-billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-3);
    margin-bottom: var(--inzc-spacing-8);
}

.inzc-sub-billing-toggle-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    cursor: pointer;
    transition: var(--inzc-transition-colors);
}

.inzc-sub-billing-toggle-label.inzc-active {
    color: var(--inzc-text-primary);
    font-weight: var(--inzc-font-weight-semibold);
}

.inzc-sub-billing-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.inzc-sub-billing-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.inzc-sub-billing-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--inzc-primary);
    border-radius: var(--inzc-radius-full);
    transition: var(--inzc-transition-colors);
}

.inzc-sub-billing-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--inzc-radius-full);
    background: #fff;
    transition: transform var(--inzc-transition-all);
    box-shadow: var(--inzc-shadow-xs);
}

.inzc-sub-billing-toggle-input:checked~.inzc-sub-billing-toggle-track {
    background: var(--inzc-primary);
}

.inzc-sub-billing-toggle-input:checked~.inzc-sub-billing-toggle-thumb {
    transform: translateX(20px);
}

.inzc-sub-annual-savings-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--inzc-spacing-1) var(--inzc-spacing-2);
    background: color-mix(in srgb, var(--inzc-success) 15%, transparent);
    color: var(--inzc-success);
    border-radius: var(--inzc-radius-full);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
}

/* =============================================================================
   3. PLAN CARDS GRID
   ============================================================================= */

.inzc-sub-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inzc-spacing-5);
    margin-bottom: var(--inzc-spacing-10);
    align-items: start;
}

/* =============================================================================
   4. PLAN CARD ANATOMY
   ============================================================================= */

.inzc-sub-plan-card {
    background: var(--inzc-bg-card);
    border: 2px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-2xl);
    box-shadow: var(--inzc-card-shadow);
    padding: var(--inzc-spacing-6);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--inzc-transition-all);
}

.inzc-sub-plan-card:hover {
    box-shadow: var(--inzc-shadow-md);
    transform: translateY(-2px);
}

.inzc-sub-plan-card--featured {
    border-color: var(--inzc-primary);
    box-shadow: 0 0 0 1px var(--inzc-primary), var(--inzc-shadow-lg);
}

.inzc-sub-plan-card--current {
    border-color: var(--inzc-success);
}

.inzc-sub-plan-card-top {
    margin-bottom: var(--inzc-spacing-5);
}

.inzc-sub-plan-name {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-sub-plan-tagline {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
}

/* =============================================================================
   5. POPULAR BADGE
   ============================================================================= */

.inzc-sub-popular-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-3);
    background: var(--inzc-primary);
    color: #fff;
    border-radius: var(--inzc-radius-full);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    position: absolute;
    top: calc(-1 * var(--inzc-spacing-3));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.inzc-sub-current-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-3);
    background: var(--inzc-success);
    color: #fff;
    border-radius: var(--inzc-radius-full);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    position: absolute;
    top: calc(-1 * var(--inzc-spacing-3));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* =============================================================================
   6. PRICE DISPLAY
   ============================================================================= */

.inzc-sub-price-wrap {
    margin-bottom: var(--inzc-spacing-5);
}

.inzc-sub-price {
    display: flex;
    align-items: flex-end;
    gap: var(--inzc-spacing-1);
    line-height: 1;
}

.inzc-sub-price-currency {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    padding-bottom: 4px;
}

.inzc-sub-price-amount {
    font-size: var(--inzc-font-size-4xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    font-variant-numeric: tabular-nums;
}

.inzc-sub-price-period {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-muted);
    padding-bottom: 6px;
}

.inzc-sub-price-annual-note {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-muted);
    margin-top: var(--inzc-spacing-1);
}

.inzc-sub-price-annual-note .inzc-sub-annual-savings-badge {
    display: inline-flex;
    vertical-align: middle;
    margin-left: var(--inzc-spacing-1);
}

.inzc-sub-fee-tag {
    display: inline-flex;
    align-items: center;
    margin-top: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-2);
    border-radius: var(--inzc-radius-md);
    background: var(--inzc-bg-subtle);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-secondary);
    gap: var(--inzc-spacing-1);
}

/* =============================================================================
   7. FEATURE LIST
   ============================================================================= */

.inzc-sub-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--inzc-spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-2);
    flex: 1;
}

.inzc-sub-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
}

.inzc-sub-feature-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.inzc-sub-feature-icon--check {
    color: var(--inzc-success);
}

.inzc-sub-feature-icon--cross {
    color: var(--inzc-border-medium);
}

.inzc-sub-feature-item-text {
    flex: 1;
}

.inzc-sub-feature-item-text strong {
    color: var(--inzc-text-primary);
}

/* Plan CTA button fills full width at bottom */
.inzc-sub-plan-cta {
    margin-top: auto;
}

/* =============================================================================
   8. CURRENT PLAN STATE
   ============================================================================= */

.inzc-sub-current-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-1);
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    border-radius: var(--inzc-radius-md);
    background: color-mix(in srgb, var(--inzc-success) 12%, transparent);
    color: var(--inzc-success);
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
}

/* =============================================================================
   9. MOBILE RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {
    .inzc-sub-plans-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .inzc-sub-intro-title {
        font-size: var(--inzc-font-size-2xl);
    }
}

/* =============================================================================
   10. DARK MODE
   ============================================================================= */

[data-inzc-theme="dark"] .inzc-sub-plan-card {
    background: var(--inzc-bg-card);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-sub-plan-card--featured {
    border-color: var(--inzc-primary);
}