/* Public pages (PublicLayout): one look shared with atomicx.app — white cards with hairline
   borders, Inter headings, coral pill buttons. Scoped to .ax-public so console pages are untouched. */
.ax-public {
    color: var(--ax-fg-1);

    /* Page shells */
    .payment-result-page, .plan-selection-page, .registration-page, .checkout-page {
        min-height: calc(100vh - 140px);
        padding: 56px 16px;
        background: var(--ax-bg-page);
    }
    .payment-result-container, .plan-selection-container, .registration-container, .checkout-container {
        max-width: 760px;
        margin: 0 auto;
    }

    /* Cards */
    .error-card, .success-card, .cancelled-card, .plan-selection-card, .registration-card, .checkout-card {
        background: var(--ax-paper);
        border: 1px solid var(--ax-border);
        border-radius: 18px;
        box-shadow: var(--ax-shadow-sm);
        overflow: hidden;
    }
    .error-card, .success-card, .cancelled-card {
        max-width: 560px;
        margin: 0 auto;
        padding: 40px 32px;
        text-align: center;
    }
    .error-card > svg, .error-card > i, .success-icon svg, .cancelled-icon svg {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
        display: block;
    }
    .error-card > svg, .error-card > i { color: var(--ax-danger); }
    .success-icon svg { color: var(--ax-success); }
    .cancelled-icon svg { color: var(--ax-fg-3); }

    /* Type */
    .error-card h2, .error-card h3, .success-card h2, .cancelled-card h2,
    .plan-header h2, .registration-header h2, .checkout-header h2 {
        font-size: 32px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: var(--ax-tracking-display);
        color: var(--ax-fg-1);
        margin: 0 0 8px;
    }
    .error-card h3 { font-size: 24px; }
    .error-card p, .success-message, .cancelled-message, .plan-header p, .registration-header p, .checkout-header p {
        color: var(--ax-fg-2);
        font-size: 15px;
        line-height: 1.55;
        margin: 0 0 24px;
    }
    .order-details h3, .next-steps h3, .help-section h3, .billing-frequency-section h4, .plan-features h4,
    .order-summary h3, .form-section h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--ax-fg-1);
        margin: 0 0 12px;
    }

    /* Headers inside cards: centered, no coloured banner */
    .plan-header, .registration-header, .checkout-header {
        padding: 40px 32px 8px;
        text-align: center;
        background: none;
        color: var(--ax-fg-1);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: var(--ax-radius-pill);
        border: 1px solid transparent;
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 220ms var(--ax-ease-out), border-color 220ms var(--ax-ease-out);
    }
    .btn:focus-visible { outline: 2px solid var(--ax-coral-500); outline-offset: 2px; }
    .btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .btn-primary { background: var(--ax-coral-500); border-color: var(--ax-coral-500); color: #fff; }
    .btn-primary:hover:not(:disabled) { background: var(--ax-coral-400); border-color: var(--ax-coral-400); }
    .btn-outline, .btn-secondary { background: var(--ax-paper); border-color: var(--ax-border-strong); color: var(--ax-fg-1); }
    .btn-outline:hover, .btn-secondary:hover { background: var(--ax-bg-sunken); }
    .btn-large { padding: 14px 32px; min-width: 220px; }
    .error-actions, .success-actions, .cancelled-actions, .secondary-actions, .plan-actions, .form-actions, .checkout-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 24px;
    }
    .cancelled-actions { flex-direction: column; align-items: center; }
    .plan-actions, .checkout-actions, .form-actions {
        flex-direction: column;
        align-items: center;
        padding: 24px 32px 32px;
        margin: 0;
        background: none;
        border-top: 1px solid var(--ax-divider);
    }

    /* Links */
    :is(.error-card, .success-card, .cancelled-card, .plan-selection-card, .registration-card, .checkout-card) :is(a:not(.btn), .link) {
        color: var(--ax-coral-700);
        text-decoration: none;
    }
    :is(.error-card, .success-card, .cancelled-card, .plan-selection-card, .registration-card, .checkout-card) :is(a:not(.btn), .link):hover { text-decoration: underline; }
    .additional-links, .form-footer, .checkout-footer { color: var(--ax-fg-2); font-size: 14px; margin-top: 16px; }

    /* Detail lists, steps, help options */
    .order-details, .help-section, .next-steps {
        background: var(--ax-bg-page);
        border: 1px solid var(--ax-border);
        border-radius: var(--ax-radius-lg);
        padding: 20px 24px;
        margin: 24px 0;
        text-align: left;
    }
    .detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ax-divider); font-size: 14px; }
    .detail-row:last-child { border-bottom: 0; }
    .detail-row .label { color: var(--ax-fg-2); }
    .detail-row .value { color: var(--ax-fg-1); font-weight: 600; }
    .steps-list { display: flex; flex-direction: column; gap: 14px; }
    .step { display: flex; gap: 12px; align-items: flex-start; }
    .step-number {
        flex: none; width: 28px; height: 28px; border-radius: 999px;
        display: flex; align-items: center; justify-content: center;
        background: var(--ax-coral-50); color: var(--ax-coral-700); font-weight: 700; font-size: 13px;
    }
    .step-content h4, .help-content h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--ax-fg-1); }
    .step-content p, .help-content p { margin: 0; font-size: 13px; color: var(--ax-fg-2); line-height: 1.5; }
    .help-options { display: flex; flex-direction: column; gap: 12px; }
    .help-option { display: flex; gap: 12px; align-items: flex-start; padding: 0; background: none; }
    .help-option > svg { flex: none; color: var(--ax-coral-500); margin-top: 2px; }

    /* Plan selection */
    .plan-details { padding: 16px 32px 24px; display: grid; gap: 16px; }
    .plan-info h3 { font-family: var(--ax-font-display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ax-fg-2); font-weight: 600; margin: 0 0 4px; }
    .plan-description { color: var(--ax-fg-2); font-size: 14px; margin: 0; }
    .plan-features { display: block; }
    .plan-features ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
    .plan-features li { display: flex; gap: 8px; align-items: center; padding: 0; border: 0; font-size: 14px; color: var(--ax-fg-1); }
    .plan-features li > svg { flex: none; color: var(--ax-coral-500); }
    .billing-frequency-section { padding: 24px 32px; border-top: 1px solid var(--ax-divider); }
    .billing-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
    .billing-option {
        border: 1px solid var(--ax-border);
        border-radius: var(--ax-radius-lg);
        padding: 20px;
        background: var(--ax-paper);
        cursor: pointer;
        transition: border-color 220ms var(--ax-ease-out);
    }
    .billing-option:hover { border-color: var(--ax-border-strong); }
    .billing-option.selected { border: 2px solid var(--ax-coral-500); padding: 19px; background: var(--ax-paper); box-shadow: var(--ax-shadow-md); }
    .billing-option input[type="radio"] { accent-color: var(--ax-coral-500); }
    .billing-option-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    .billing-title { font-weight: 600; }
    .savings-badge {
        margin-left: auto; background: var(--ax-coral-500); color: #fff; font-family: var(--ax-font-mono);
        font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
    }
    .billing-price .amount { font-family: var(--ax-font-display); font-weight: 700; font-size: 32px; color: var(--ax-fg-1); }
    .billing-price .period, .billing-total { color: var(--ax-fg-2); font-size: 13px; }

    /* Forms */
    .form-section { padding: 24px 32px; border-bottom: 1px solid var(--ax-divider); }
    .form-group label { color: var(--ax-fg-1); font-weight: 500; font-size: 14px; }
    .form-control, .form-group select, .form-group textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--ax-border);
        border-radius: var(--ax-radius-md);
        background: var(--ax-paper);
        font: inherit;
        font-size: 15px;
    }
    .form-control:focus, .form-group select:focus, .form-group textarea:focus {
        outline: none;
        border-color: var(--ax-coral-500);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-coral-500) 15%, transparent);
    }
    .form-group input[type="checkbox"], .checkbox-label input[type="checkbox"] { accent-color: var(--ax-coral-500); }
    .form-text, .form-hint { color: var(--ax-fg-2); font-size: 13px; }

    /* Loading */
    .loading-section { color: var(--ax-fg-2); }
    .spinner { border-color: var(--ax-border); border-top-color: var(--ax-coral-500); }

    @media (max-width: 640px) {
        .plan-header, .registration-header, .checkout-header { padding: 32px 20px 8px; }
        .plan-details, .billing-frequency-section, .form-section, .plan-actions, .checkout-actions, .form-actions { padding-left: 20px; padding-right: 20px; }
        .error-card h2, .error-card h3, .success-card h2, .cancelled-card h2,
        .plan-header h2, .registration-header h2, .checkout-header h2 { font-size: 26px; }
    }
}