/* Public forms: theme review/finder forms, the plugin's submit form and account (magic link)
   forms. Loaded only on pages that render one of them. Uses tokens from main.css. */

/* ---------- Shared field styles ---------- */
.form, .bestaito-form, .bestaito-submit { display: grid; gap: var(--s4); margin: 0; text-align: left; }
.form__title { margin: 0; font-size: var(--fs-lg); }
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field, .bestaito-form__field, .bestaito-submit__field { display: grid; gap: var(--s1); margin: 0; }
.form label, .form legend, .bestaito-form__label, .bestaito-submit__field label, .bestaito-submit__group > legend { font-weight: 600; font-size: var(--fs-sm); }
.form__req { color: #b91c1c; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea,
.bestaito-form input[type="email"], .bestaito-submit input[type="text"], .bestaito-submit input[type="url"], .bestaito-submit input[type="email"], .bestaito-submit textarea {
	width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-md);
}
.form textarea, .bestaito-submit textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.form input:focus-visible, .form textarea:focus-visible, .bestaito-form input:focus-visible, .bestaito-submit input:focus-visible, .bestaito-submit textarea:focus-visible { outline-offset: 0; border-color: var(--c-focus); }
.form [aria-invalid="true"], .bestaito-form [aria-invalid="true"], .bestaito-submit [aria-invalid="true"] { border-color: #b91c1c; }
.form__hint, .form__note, .bestaito-form__intro, .bestaito-form__note, .bestaito-form__privacy, .bestaito-submit__note { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.form__error { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: #b91c1c; }
.form__check, .bestaito-form__consent label, .bestaito-submit__choice, .bestaito-submit__package { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; font-size: var(--fs-sm); font-weight: 400; cursor: pointer; }
.bestaito-form__consent { margin: 0; }
.form input[type="checkbox"], .form input[type="radio"], .bestaito-form input[type="checkbox"], .bestaito-submit input[type="checkbox"], .bestaito-submit input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-brand); }
.form__actions, .bestaito-form__actions, .bestaito-submit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0; }

/* Buttons rendered by the plugin. */
.bestaito-button, .bestaito-submit__next, .bestaito-submit__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s5); border: 0; border-radius: var(--radius); background: var(--c-brand); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.bestaito-button:hover, .bestaito-submit__next:hover, .bestaito-submit__submit:hover { background: var(--c-brand-strong); color: #fff; }
.bestaito-submit__back { min-height: 44px; padding: var(--s2) var(--s4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); font-weight: 600; cursor: pointer; }
.bestaito-submit__back:hover { border-color: var(--c-brand); color: var(--c-brand-strong); }
.bestaito-submit__submit { margin-left: auto; }
.form [aria-busy="true"], .finder [aria-busy="true"], .reviews [aria-busy="true"], .bestaito-form[aria-busy="true"] .bestaito-form__submit { opacity: .7; cursor: progress; }

/* Status messages. */
.form__message, .bestaito-form__status:not(:empty), .bestaito-form__notice, .bestaito-submit__message, .bestaito-consent__status:not(:empty), .bestaito-submit__unavailable {
	margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-size: var(--fs-sm);
}
.form__message.is-success, .bestaito-form.is-sent .bestaito-form__status, .bestaito-form__notice { background: var(--c-deal-bg); border-color: transparent; color: var(--c-deal); }
.form__message.is-error, .bestaito-form__status.is-error, .bestaito-submit__message { background: #fee2e2; border-color: transparent; color: #991b1b; }
.form.is-done > :not([data-form-message]) { display: none; }
.form-turnstile, .bestaito-form__turnstile, .bestaito-submit__turnstile { min-height: 65px; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Account pages (magic link sign-in, consent) ---------- */
.bestaito-auth, .bestaito-consent { display: grid; gap: var(--s4); max-width: 440px; margin: var(--s5) auto; padding: var(--s5); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg); box-shadow: var(--shadow); text-align: left; }
.bestaito-auth__hello { margin: 0; font-weight: 600; }
.bestaito-auth__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; }
.bestaito-consent__text { margin: 0; }

/* ---------- Multi-step submit form ---------- */
.submit-form-wrap { margin-block: var(--s6); scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.submit-form-wrap:focus { outline: none; }
.bestaito-submit { max-width: 720px; padding: var(--s5); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg); box-shadow: var(--shadow); }
.bestaito-submit__progress { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-brand-strong); text-transform: uppercase; letter-spacing: .04em; }
.bestaito-submit__step { display: grid; gap: var(--s4); min-width: 0; margin: 0; padding: 0; border: 0; }
.bestaito-submit__step[hidden] { display: none; }
.bestaito-submit__legend { margin-bottom: var(--s2); padding: 0; font-size: var(--fs-lg); font-weight: 700; }
.bestaito-submit__group { display: grid; gap: var(--s2); min-width: 0; margin: 0; padding: 0; border: 0; }
.bestaito-submit__group > legend { margin-bottom: var(--s2); padding: 0; }
.bestaito-submit__choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bestaito-submit__choice { align-items: center; min-height: 40px; padding: var(--s1) var(--s3); border: 1px solid var(--c-border); border-radius: 999px; }
.bestaito-submit__choice:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-soft); }
.bestaito-submit__choice:focus-within, .bestaito-submit__package:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.bestaito-submit__choice input:focus-visible, .bestaito-submit__package input:focus-visible { outline: none; }
.bestaito-submit__package { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--c-border); border-radius: var(--radius); font-size: var(--fs-md); }
.bestaito-submit__package:has(input:checked) { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); background: var(--c-brand-soft); }
.bestaito-submit__package:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.bestaito-submit__package-title { font-weight: 600; }
.bestaito-submit__package-price { font-weight: 800; }
.bestaito-submit__hp { position: absolute !important; left: -9999px; }
.bestaito-form__status:empty, .bestaito-consent__status:empty { display: none; }
/* Account settings ([bestaito_account_settings]) inside the account page card. */
.bestaito-account-settings { display: grid; gap: var(--s4); }
.bestaito-account-settings form { display: grid; gap: var(--s2); max-width: 440px; margin: 0; }
.bestaito-account-settings label { font-size: var(--fs-sm); font-weight: 600; }
.bestaito-account-settings input[type="text"] { width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; font-size: var(--fs-md); }
.bestaito-account-settings button, .bestaito-account-settings input[type="submit"] { justify-self: start; min-height: 44px; padding: var(--s2) var(--s5); border: 0; border-radius: var(--radius); background: var(--c-brand); color: #fff; font-weight: 600; cursor: pointer; }
.account-section .bestaito-consent { margin-inline: 0; box-shadow: none; }