/* FA UI 0.1.0 components with account-specific layout and field adapters. */
body{font-family:var(--font-body);background:var(--color-surface-tertiary);color:var(--color-text-primary)}
.page-shell{min-height:calc(100svh - 153px)}
.main{padding:56px 24px 32px}
.card{max-width:600px;padding:40px 48px;text-align:left;border:1px solid var(--color-border-tertiary);border-radius:var(--radius-lg-card);box-shadow:0 8px 32px #09291e05;background:var(--color-surface-primary)}
.card h1{font-size:36px;line-height:1.12;font-weight:600;letter-spacing:-1px;margin:0 0 20px}
.intro{color:var(--color-text-secondary);margin-bottom:28px}
.button.fa-cta{width:100%;height:auto;min-height:52px;white-space:normal;border-radius:var(--radius-button);font-size:16px;line-height:1.5;padding:13px 22px}
.button.fa-cta--primary{border:0;background:linear-gradient(90deg,var(--color-cta-primary-surface),var(--color-cta-primary-surface-gradient));color:var(--color-cta-primary-text)}
.button.fa-cta--secondary{background:var(--color-cta-secondary-surface);color:var(--color-cta-secondary-text);border:1px solid var(--color-cta-secondary-border)}
.button.fa-cta--secondary:hover{background:var(--color-cta-secondary-surface-hover);color:var(--color-cta-secondary-text-hover)}
.button.w-auto{width:auto}.fa-cta__label{min-width:0}
.field label{font-size:14px;font-weight:600;color:var(--color-text-primary);margin-bottom:8px}
.field input,.field select{height:56px;border-radius:var(--radius-form);border:1px solid var(--color-border-secondary);padding:16px;font-family:var(--font-body);font-size:16px;color:var(--color-text-primary)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--color-border-accent);outline-offset:2px;border-color:var(--color-border-accent)}
.field input[aria-invalid=true]{border-color:var(--color-border-error)}
.checkbox{color:var(--color-text-secondary);font-size:14px}.checkbox input{accent-color:var(--color-green-brand)}
.hint{color:var(--color-text-secondary)}.text-link{color:var(--color-text-link)}.error{color:var(--color-text-error)}
.notice{border-color:var(--color-border-tertiary);border-radius:var(--radius-card);background:var(--color-surface-tertiary);color:var(--color-text-accent);padding:16px}
.summary-error{border-color:var(--color-border-error);color:var(--color-text-error);border-radius:var(--radius-form)}
.status{color:var(--color-text-accent);padding:0 2px}
.secondary-links{justify-content:flex-start;gap:12px 20px}.secondary-links a{text-decoration:underline;text-underline-offset:3px}
.payment{background:var(--color-surface-invert-primary);color:white}
.checkout-main{padding:48px max(24px,5vw)}.checkout-summary{background:var(--color-dark-green);padding:48px 40px}
.checkout .field input,.checkout .field select{border-radius:var(--radius-form);border-color:var(--color-fa-green-400)}
.checkout .field select{padding-right:40px;background-image:url('../fa_ui/icons/common/IconChevronDown.svg');background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.checkout .notice{background:#ffffff0a;border-color:var(--color-border-invert-secondary)}
.checkout .fa-cta.express{background:white;color:var(--color-text-primary)}.checkout .fa-cta.shop{background:#5a2aff;color:white}
.payment-box{border-radius:var(--radius-card);border-color:var(--color-fa-green-400)}.payment-fields{background:#ffffff05}.payment-box-title{border-color:var(--color-border-invert-secondary)}
.product-thumb{border-radius:var(--radius-card);background:var(--color-surface-invert-primary)}
#payment-locked .card,#payment-locked .button{color:var(--color-text-primary)}
button:disabled{cursor:not-allowed}[hidden]{display:none!important}
@media(max-width:640px){
.page-shell{min-height:calc(100svh - 126px)}.main{padding:24px 16px}.card{padding:28px 24px}.card h1{font-size:32px;line-height:1.15}.intro{font-size:16px}.button.fa-cta{min-height:48px;padding:12px 18px;font-size:16px}.field input,.field select{height:52px}.checkout-main,.checkout-summary{padding:28px 20px}.checkout-summary .field{min-width:0}.checkout-summary .button{padding-inline:18px}.payment-box-title{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* Explicit inverse colours for the payment surface, including form adapters. */
.checkout .field label,.checkout .hint,.checkout .checkbox{color:var(--color-text-secondary-invert)}
.checkout .field input,.checkout .field select{color:var(--color-text-primary-invert);background-color:transparent}
.checkout .field input::placeholder{color:var(--color-fa-green-200)}
.checkout .notice{color:var(--color-text-secondary-invert)}
.checkout .status{color:var(--color-text-primary-invert)}
.checkout a{color:var(--color-gold)}
.checkout .field select{background-image:none;appearance:auto;color-scheme:dark}

/* Supplied global header and footer retain their own scoped component styling. */
body{padding-top:var(--fa-header-height,144px)}
.fa-header{background:var(--color-surface-invert-primary)}
.page-shell{min-height:55svh}
.fa-footer{margin-top:0; padding-top:0;}
.payment .checkout{min-height:70svh}
#main{scroll-margin-top:var(--fa-header-height,144px)}
.fa-header .fa-menu-toggle{background:#ffffff1a;border-color:#ffffff4d;color:white}
.fa-header:is(.fa-header--scrolled,.fa-header--panel-drawer,.fa-header--panel-brands) .fa-menu-toggle{background:var(--color-fa-green-50);border-color:var(--color-fa-green-200);color:var(--color-fa-green-900)}

/* Disabled account email uses existing brand colours. */
.card .field input:disabled{background:var(--color-surface-tertiary);color:var(--color-text-secondary);cursor:not-allowed;opacity:1}