/* Shared checkout styles — used by every bca_checkout subscription page.
 * Install as a Ghost theme asset (bca/checkout.css) and load it only
 * on checkout pages (see pages/README.md). Scoped to #checkout-form / the
 * checkout markup so it is safe to load site-wide. */

#checkout-form { max-width: 560px; margin: 2rem auto; }
#checkout-form .form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
#checkout-form label { font-weight: 600; font-size: 0.95rem; }
.label-hint { font-weight: 400; font-size: 0.85rem; color: #666; display: block; margin-top: 2px; }
#checkout-form input[type="text"],
#checkout-form input[type="email"],
#checkout-form select,
#checkout-form textarea { padding: 8px 12px; border: 1px solid #d0d0d0; border-radius: 4px; font-size: 1rem; width: 100%; box-sizing: border-box; font-family: inherit; }
#checkout-form input.field-invalid,
#checkout-form select.field-invalid,
#checkout-form textarea.field-invalid { border-color: #c0392b; }
.field-error { color: #c0392b; font-size: 0.85rem; margin-top: 3px; }
.form-check .check-label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.form-check input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: auto; }
.billing-toggle { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 12px; }
.billing-option { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.billing-option input { width: auto; }
#months_count:disabled { opacity: 0.35; cursor: not-allowed; }
.order-total { font-size: 1.05rem; margin: 4px 0 0; }
.trial-notice { font-size: 0.9rem; color: #555; border-left: 3px solid #3d9be9; padding-left: 12px; margin: 20px 0; line-height: 1.5; }
.status-box { padding: 14px 18px; border-radius: 4px; margin-top: 16px; font-size: 0.95rem; }
.status-box.status-success { background: #eafaf1; border: 1px solid #27ae60; color: #1e6e42; }
.status-box.status-error   { background: #fdf2f2; border: 1px solid #c0392b; color: #7b241c; }
.consent-docs-block { margin-bottom: 16px; }
.consent-intro { font-size: 0.9rem; color: #444; margin-bottom: 8px; }
.consent-docs { padding-left: 1.2em; margin: 0; font-size: 0.9rem; }
.consent-docs li { margin-bottom: 4px; }
.consent-version { color: #888; font-size: 0.8em; }
.consent-loading { color: #888; font-size: 0.9rem; font-style: italic; }
.consent-error-text { color: #c0392b; font-size: 0.9rem; }