/* Forms behind an e-mail code (trial sign-up, patient inquiry): verification step, then a paged form.
   Markup in Pages/Shared/_TrialSignupForm.cshtml and _PatientInquiry.cshtml, behaviour in /js/gated-form.js. */
.gated-form [hidden] { display: none !important; }
.gated-form { padding-bottom: 100px; }
.gated-form .ts-card {
    position: relative;
    z-index: 2;
    margin-top: -40px;
    padding: 40px 45px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(20, 40, 60, 0.09);
}
.gated-form .ts-heading { font-size: 1.5rem; font-weight: 600; text-align: center; margin-bottom: 25px; }
.gated-form .ts-field { margin-bottom: 26px; }
.gated-form .ts-label { display: block; font-weight: 600; color: #333; margin-bottom: 6px; }
.gated-form .ts-hint { font-size: 0.9rem; line-height: 1.45; color: #6c757d; margin-bottom: 8px; }
.gated-form .ts-req { color: #d9534f; }
.gated-form .form-control,
.gated-form .form-select { height: 50px; border-radius: 8px; font-size: 1rem; }
.gated-form textarea.form-control { height: auto; min-height: 110px; }
.gated-form .form-control:focus,
.gated-form .form-select:focus,
.gated-form .form-check-input:focus { border-color: #00b4b6; box-shadow: 0 0 0 0.2rem rgba(0, 180, 182, 0.2); }
.gated-form .form-check-input:checked { background-color: #00b4b6; border-color: #00b4b6; }
.gated-form .form-check { margin-bottom: 4px; }
.gated-form .form-check-label { line-height: 1.4; }
.gated-form .ts-options { display: grid; grid-template-columns: 1fr; gap: 4px 24px; }
.gated-form .ts-other { margin-top: 10px; }
.gated-form .ts-invalid .form-control,
.gated-form .ts-invalid .form-select,
.gated-form .ts-invalid .form-check-input { border-color: #dc3545; }
.gated-form .ts-feedback { margin-top: 6px; font-size: 0.875rem; color: #dc3545; }
.gated-form .ts-feedback:empty { display: none; }
.gated-form .ts-alert,
.gated-form .ts-info { border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.95rem; }
.gated-form .ts-alert { background: #fdecea; color: #a12622; }
.gated-form .ts-info { background: #e6f7f7; color: #00787a; }
.gated-form .ts-intro { margin-bottom: 22px; color: #555; }
.gated-form .ts-intro ol { padding-left: 1.25rem; margin: 6px 0 0; }
.gated-form .ts-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gated-form .ts-code-input { max-width: 260px; margin: 0 auto; font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; }
.gated-form .ts-links { margin-top: 18px; text-align: center; font-size: 0.9rem; color: #9aa5b1; }
.gated-form .ts-link { padding: 0; border: 0; background: none; color: #00b4b6; text-decoration: underline; cursor: pointer; }
.gated-form .ts-progress { display: flex; list-style: none; padding: 0; margin: 0 0 35px; }
.gated-form .ts-progress li { position: relative; flex: 1; text-align: center; font-size: 0.85rem; line-height: 1.3; color: #9aa5b1; }
.gated-form .ts-progress li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #dfe5ea;
}
.gated-form .ts-progress li:first-child::before { display: none; }
.gated-form .ts-progress li.active,
.gated-form .ts-progress li.done { color: #333; }
.gated-form .ts-progress li.active { font-weight: 600; }
.gated-form .ts-progress li.active::before,
.gated-form .ts-progress li.done::before { background: #00b4b6; }
.gated-form .ts-progress-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #dfe5ea;
    color: #fff;
    font-weight: 700;
}
.gated-form .ts-progress li.active .ts-progress-dot,
.gated-form .ts-progress li.done .ts-progress-dot { background: #00b4b6; }
.gated-form .ts-page { min-width: 0; }
.gated-form .ts-page-title { float: none; width: auto; font-size: 1.35rem; font-weight: 600; color: #333; margin-bottom: 22px; }
.gated-form .ts-nav { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 24px; border-top: 1px solid #eef1f4; }
.gated-form .ts-step-count { font-size: 0.85rem; color: #9aa5b1; }
.gated-form .ts-nav .ts-next,
.gated-form .ts-nav .ts-submit { margin-left: auto; }
.gated-form .ts-success { padding: 20px 0; text-align: center; }
.gated-form .ts-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #00b4b6;
    color: #fff;
    font-size: 2rem;
}
@media (min-width: 768px) {
    .gated-form .ts-options.ts-cols-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .gated-form .ts-card { padding: 28px 20px; border-radius: 12px; }
    .gated-form .ts-progress-title { display: none; }
    .gated-form .ts-step-count { display: none; }
}