/* Shared form components. Colors, surfaces and spacing come from storefront.css :root. */
body{background:var(--theme-background);color:var(--theme-text);font-family:var(--theme-font)}
.otp-panel{width:min(440px,calc(100% - 32px));margin:6vh auto;padding:28px;border:1px solid var(--theme-border);border-radius:var(--theme-radius);background:var(--theme-surface)}
.otp-panel h1{font-size:clamp(24px,5vw,32px);margin:22px 0}
.otp-panel input{display:block;width:100%;padding:14px;margin:12px 0;border:1px solid var(--theme-border);border-radius:var(--theme-radius);background:var(--theme-surface);color:var(--theme-text);font-size:18px;direction:ltr;text-align:left}
.otp-panel input:focus-visible,.otp-panel button:focus-visible,.otp-panel a:focus-visible{outline:2px solid var(--theme-focus);outline-offset:2px}
.otp-panel button{padding:12px 16px;border:1px solid var(--theme-primary);border-radius:var(--theme-radius);background:var(--theme-primary);color:var(--theme-surface);cursor:pointer}
.otp-panel button:hover:not(:disabled){background:var(--theme-secondary)}
.otp-panel button:disabled{opacity:.48;cursor:not-allowed}
.otp-panel #change{background:var(--theme-surface);color:var(--theme-primary)}
.otp-panel #send,.otp-panel #verify{min-width:160px}
.otp-panel .otp-error{color:var(--theme-danger);min-height:1.5em}
.otp-panel .otp-actions{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.otp-panel [hidden]{display:none!important}
.otp-panel .test-hint{background:color-mix(in srgb,var(--theme-accent) 16%,var(--theme-surface));border-inline-start:3px solid var(--theme-accent);padding:12px;border-radius:var(--theme-radius);line-height:1.9}
.otp-panel a{color:var(--theme-link)}
@media(max-width:480px){.otp-panel{margin:18px auto;padding:20px}.otp-panel .otp-actions{flex-wrap:wrap}}