/*
 * Free Presets Accounts — styles for [fp_login], [fp_register], [fp_forgot_password], [fp_edit_profile].
 * Enqueued only on /login/, /signup/, /forgot-password/, /edit-profile/, /account/.
 * Uses theme.json preset variables so it tracks the design system automatically.
 */

.fp-form {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--wp--preset--spacing--50, 1.5rem);
}

.fp-form .fp-field {
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--wp--preset--spacing--30, 1rem);
}

.fp-form .fp-field label {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    margin-bottom: 0.25rem;
}

/* Input chrome is owned by mu-plugins/freepresets-account-ui/account-ui.css
 * (single source of truth across fp-form + cert modals + EDD blocks). */

.fp-form .fp-field-inline label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.fp-form .fp-submit {
    margin: var(--wp--preset--spacing--40, 1.25rem) 0 var(--wp--preset--spacing--30, 1rem);
}

.fp-form .fp-submit .wp-block-button__link {
    width: 100%;
    cursor: pointer;
}

.fp-form .fp-links {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    text-align: center;
}

.fp-form .fp-form-error {
    padding: 0.75rem 1rem;
    margin: 0 0 var(--wp--preset--spacing--30, 1rem);
    border-left: 3px solid #c00;
    background: rgba(204, 0, 0, 0.06);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.fp-form .fp-form-success {
    padding: 0.75rem 1rem;
    margin: 0 0 var(--wp--preset--spacing--30, 1rem);
    border-left: 3px solid #060;
    background: rgba(0, 102, 0, 0.06);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.fp-already-logged-in,
.fp-needs-login,
.fp-pw-sent {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--wp--preset--spacing--50, 1.5rem);
    text-align: center;
}

.fp-account-summary {
    max-width: 720px;
    margin: 0 auto;
}

.fp-account-notice {
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
    padding: var(--wp--preset--spacing--40, 1.25rem);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.fp-account-notice p {
    margin: 0;
}

/* Brief one-time success right after signup (only when already confirmed). */
.fp-account-notice--success {
    border-color: rgba(0, 102, 0, 0.18);
    background: rgba(0, 102, 0, 0.05);
}

/* Persistent gate: shown until the email is confirmed. Caution, not success. */
.fp-account-notice--warning {
    border-color: rgba(176, 108, 0, 0.30);
    background: rgba(214, 138, 0, 0.08);
}

.fp-account-notice--warning a {
    white-space: nowrap;
}

.fp-account-kicker {
    margin: 0 0 var(--wp--preset--spacing--20, 0.75rem);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.72;
}

.fp-account-summary h2 {
    margin-top: 0;
}

.fp-account-plan {
    font-size: var(--wp--preset--font-size--md, 1rem);
}

.fp-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--wp--preset--spacing--50, 1.5rem);
}

.fp-account-actions .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Upgrade is the secondary action next to the filled primary (Browse). */
.fp-account-actions a.fp-account-btn-secondary {
    background: transparent;
    color: var(--wp--preset--color--custom-accent);
    box-shadow: inset 0 0 0 1px currentColor;
}

/* Log out is low-frequency: a quiet text link, not a button. */
.fp-account-actions .fp-account-logout {
    color: var(--wp--preset--color--custom-contrast-2, #555);
    text-decoration: underline;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.fp-account-billing {
    display: grid;
    gap: var(--wp--preset--spacing--40, 1rem);
}

/* The empty state is a single narrow card. The --narrow variant centres itself
   (margin: 0 auto); inside the billing grid we want it left aligned at the top,
   matching the Overview and Profile cards. The wide data tables (plain
   .fp-acct-card) still fill the grid. */
.fp-account-billing > .fp-acct-card--narrow {
    justify-self: start;
    margin-inline: 0 auto;
    margin-top: 0;
}

/* The billing section wrapper carries padding that insets and lowers its
   content. Only when billing is empty (a lone narrow card), drop that padding so
   the card lands at the same top left as the Overview and Profile cards. When
   there is real data (tables), the padding stays. */
.wp-block-group:has(> .fp-account-billing > .fp-acct-card--narrow) {
    /* The block editor sets this padding as an inline style, so !important is
       needed to drop it for the empty state only. */
    padding-top: 0 !important;
    padding-inline: 0 !important;
}