/* ============================================================
   app.css � global styles always loaded regardless of theme
   ============================================================ */

/* Blazor error UI � must be global (not scoped) so blazor.web.js
   can toggle it by ID without a CSS scope attribute */
#blazor-error-ui {
    background: #1a1a2e;
    color: #ffffff;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 99999;
    font-family: sans-serif;
    font-size: 14px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
}

#blazor-error-ui a.reload {
    color: #ff4d24;
    margin-left: 0.5rem;
}

/* tc-hidden � temporary visibility toggle, remove class when TrialCatcher.com portal is live */
.tc-hidden {
    display: none !important;
}

/* Powered-by TrialCatcher link in Zonar nav footer */
.nav-footer-powered a {
    color: #9CCE5A !important;
    text-decoration: none !important;
}
.nav-footer-powered a:hover {
    text-decoration: underline !important;
}

/* Zonar nav footer powered-by line */
.nav-footer {
    height: auto !important;
    min-height: 70px;
    line-height: normal !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    bottom: 0 !important;
}

.nav-footer > span {
    line-height: 1;
}

.nav-footer-powered {
    margin-top: 6px;
    font-size: 10px;
    opacity: 0.7;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

.nav-footer-powered a {
    color: inherit;
    text-decoration: underline;
}

/* ── Zonar: .section-title h1 mirrors vendor .section-title h3 so swapping the
      heading tag for SEO (h1 = primary keyword) doesn't change the visual. ── */
.section-title h1 {
    font-size: 26px;
    text-align: left;
    text-transform: uppercase;
    color: #000;
    font-weight: 800;
    float: left;
    width: 100%;
    letter-spacing: 2px;
    padding-bottom: 10px;
    line-height: 34px;
}
.section-title h1::before {
    content: '';
    position: absolute;
    left: -90px;
    top: -10px;
    width: 150px;
    bottom: 4px;
    z-index: -1;
    background: #f2f2f2;
}
/* ⛔ No far-off-screen offset (2026-10-03, live walk): inside the apply card's 3D flip the mirrored face turned left:-9999px into
   ~10,000px of horizontal scroll on phones (Blackhawk). Clipped in place instead — still rendered, so bots that skip hidden
   inputs still fill it; still invisible and unfocusable for people (tabindex=-1 on the input). */
.tc-irb-ref {
    position: absolute;
    left: 0;
    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    white-space: nowrap;
    pointer-events: none;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Consent checkbox — sized for accessibility; Blackhawk overrides to 22px via !important */
.tc-consent-wrap input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* ⭐ 2026-10-03 (Marcos): the two consents are a 22px checkbox | 1fr text GRID (12px gap, no extra indent), 12px apart, text 13px/1.5 #d6d6d6.
   The box is drawn here (appearance:none, 2px #9aa0a6 border) because both vendor skins restyled `input` and Zonar's made it invisible on
   its dark card. Scoped to the apply card; the wording lives in the razor and is byte-for-byte what it was. */
.study-apply-wrapper .tc-consent-wrap { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 12px 0 0; }
.study-apply-wrapper .tc-consent-wrap input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; float: none !important; display: block; box-sizing: border-box;
    width: 22px !important; height: 22px !important; min-width: 22px; margin: 1px 0 0 !important; padding: 0 !important;
    border: 2px solid #9AA0A6 !important; border-radius: 4px !important; background: transparent !important; cursor: pointer; position: relative;
}
.study-apply-wrapper .tc-consent-wrap input[type="checkbox"]:checked {
    border-color: var(--brand-button, #0E7490) !important; background-color: var(--brand-button, #0E7490) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230F2A1E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 80% !important;
}
.study-apply-wrapper .tc-consent-wrap input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.study-apply-wrapper .tc-consent-label { display: block; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left; color: #D6D6D6; cursor: pointer; }
.study-apply-wrapper .tc-consent-label a, .study-apply-wrapper .tc-consent-alt a { color: #fff; text-decoration: underline; }
.study-apply-wrapper .tc-consent-alt { margin: 16px 0 14px; font-size: 13px; line-height: 1.5; font-weight: 400; text-align: left; color: #D6D6D6; text-transform: none; letter-spacing: 0; }

/* Study enrollment form close (×) control — real <button> now (ADA review 2026-07-04, was a
   div[role=button]) so it's reachable/activatable natively without JS key handlers. Reset the
   UA button chrome so it still matches the .close-contact_form visual spec in both themes'
   vendor/custom CSS (position/size/background/cursor there are unaffected — only border/
   padding/font default to strip). Shared here since the button is theme-agnostic markup. */
button.close-contact_form {
    border: 0;
    padding: 0;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* ⭐⭐ BEST TIME TO CALL — screen 1 of the study form, REQUIRED (Marcos 2026-10-03). ONE compact row of four pills (name + the
   desk's hours for that part of the day), theme-agnostic: text inherits the face's colour (white on Blackhawk's dark card,
   ink on Zonar), the picked pill takes the clinic's --brand-button. The native radio stays in the DOM (keyboard + screen
   reader) but is visually hidden; a picked pill also shows a ✓, so it is never colour alone. Vendor .custom-form label/input
   rules are reset here only for this block. */
.tc-besttime { border: 0; margin: 10px 0 4px; padding: 0; min-width: 0; text-align: left; }
.tc-besttime .tc-besttime-legend { float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: inherit; opacity: .92; }
/* 4 across, but 2 x 2 once the box is under ~340px (a 390px phone inside the dark card) - 4 across there truncated "Afternoon"/"Anytime". */
.tc-besttime-box { container-type: inline-size; }
.tc-besttime-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@container (max-width: 339px) { .tc-besttime-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-besttime .tc-time-pill { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    float: none !important; width: auto !important; min-width: 0; min-height: 48px; margin: 0 !important; padding: 6px 2px !important; cursor: pointer;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent);
    color: inherit; text-align: center; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; }
.tc-besttime .tc-time-pill:hover { border-color: currentColor; }
.tc-besttime .tc-time-pill input[type="radio"] { position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; pointer-events: none; }
.tc-besttime .tc-time-pill:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.tc-besttime .tc-time-pill .tp-name { font-size: 15px; font-weight: 600; line-height: 1.15; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tc-besttime .tc-time-pill .tp-hint { font-size: 12px; line-height: 1.2; opacity: .8; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tc-besttime .tc-time-pill.selected { background: var(--brand-button, #0E7490); border-color: var(--brand-button, #0E7490); color: #0F2A1E; transform: translateY(-1px);   /* dark ink on the mint fill, >=4.5:1; the check keeps it from being colour alone */
    box-shadow: 0 4px 12px rgb(0 0 0 / .18); }
/* 2026-10-03: no check-mark glyph (Marcos) - a picked pill = brand fill + 700 weight + the native radio's checked state. */
.tc-besttime .tc-time-pill.selected .tp-name { font-weight: 700; }
.tc-besttime .tc-time-pill.selected .tp-hint { opacity: 1; }
.tc-besttime.has-error .tc-besttime-pills { outline: 2px solid #e5484d; outline-offset: 3px; border-radius: 12px; }
/* Required-field red (Marcos 2026-10-03): screen 1 .tc-invalid and screen 2 .tc-q-invalid share the besttime error red. Toggled by study-details.js. */
.study-apply-wrapper .tc-invalid, .study-apply-wrapper .tc-q-invalid { outline: 2px solid #e5484d !important; outline-offset: 1px; border-color: #e5484d !important; }
.tc-besttime .tc-besthour-label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 600; line-height: 1.3; color: inherit; opacity: .92; }
/* The select shows only the value; full width, 48px, 15px (the Blackhawk skin forces 14px/padding with !important, so this one matches it). */
.tc-besttime select.tc-besthour { display: block; width: 100%; height: 48px; margin: 0 !important; padding: 0 14px !important; font-size: 16px !important; text-overflow: ellipsis; }
.tc-besttime .tc-besttime-hours { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; opacity: .8; }
.tc-besttime .tc-besttime-error { display: block; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tc-besttime .tc-time-pill { transition: none; } .tc-besttime .tc-time-pill.selected { transform: none; } }
/* Screen 2's Skip (2026-10-03) — a quiet text button beside "Send my answers"; screen 3's two short lines under the confirmation. */
/* SCREEN 2 (Marcos 2026-10-03, designer review): the application-submitted strip, the x in its own 44x44 slot, readable questions. */
/* In-panel title, both screens: eyebrow + study name + slim accent line. */
.study-apply-wrapper .tc-app-head, .study-apply-wrapper .tc-q-head, .study-apply-wrapper .question-form .question-group { font-family: "Mukta Vaani", sans-serif; }
.study-apply-wrapper .tc-app-head { margin: 0 0 22px; text-align: left; }
.study-apply-wrapper .tc-app-head .tc-app-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9CCE5A; line-height: 1.3; }
.study-apply-wrapper .tc-app-head .tc-app-study { margin: 6px 0 0; padding: 0; color: #fff; font-family: "Mukta Vaani", sans-serif; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; text-align: left; overflow-wrap: anywhere; }
.study-apply-wrapper .tc-app-head .tc-app-rule { display: block; width: 36px; height: 3px; margin-top: 12px; border-radius: 2px; background: #9CCE5A; }
.study-apply-wrapper .tc-q-head { margin: 0 0 22px; text-align: left; }
.study-apply-wrapper .tc-q-head p { margin: 0; padding: 0; text-transform: none; letter-spacing: 0; text-align: left; }
.study-apply-wrapper .tc-q-head .tc-q-title { color: #fff; font-family: "Mukta Vaani", sans-serif; font-size: 17px; font-weight: 600; line-height: 1.25; }
.study-apply-wrapper .tc-q-head .tc-q-sub { margin-top: 2px; color: #C9C9C9; font-family: "Mukta Vaani", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; }
.study-apply-wrapper .tc-sent-strip { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 52px 16px 0; padding: 6px 12px; background: rgba(156, 206, 90, .16); color: #E6F5D0; font-size: 14px; line-height: 1.3; text-align: left; }
.study-apply-wrapper .tc-sent-strip b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.study-apply-wrapper .tc-sent-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #9CCE5A; }
.study-apply-wrapper .tc-sent-mark svg { width: 12px; height: 12px; fill: none; stroke: #0F2A1E; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* SCREEN 2 questions (Marcos 2026-10-03, "too big / bold / unreadable"): the template's body font (Mukta Vaani, same as screen 1's labels), 16px / 500 / 1.45, #F2F2F2;
   28px between questions with a hairline, 12px question -> pills, a small letter-spaced n/N eyebrow, answers as pills. */
.study-apply-wrapper .content-back .question-form .question-group { margin-bottom: 0; padding: 22px 0 22px; border-top: 1px solid rgba(255,255,255,.1); }
.study-apply-wrapper .content-back .question-form .question-group:first-of-type, .study-apply-wrapper .content-back .question-form .tc-q-head + .row .question-group { border-top: 0; padding-top: 6px; }
.study-form-faq-container .study-apply-wrapper .content-back .question-form .question-group p.tc-q-text { margin: 0 0 12px; padding: 0; text-align: left; letter-spacing: 0; text-transform: none; font-family: "Mukta Vaani", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.45; color: #F2F2F2; }
.study-apply-wrapper .tc-q-text .tc-q-num { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .14em; color: rgba(156,206,90,.7); }
/* Answer pills: 3 across when there are 3 or fewer short answers, otherwise 2 across; a long answer takes the whole row; picked = ring + tint + bold (aria-checked carries it). */
.study-apply-wrapper .question-form .tc-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: 14px; }
.study-apply-wrapper .question-form .tc-pills:has(> .tc-pill:nth-child(3):last-child):not(:has(> .tc-pill.long)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.study-apply-wrapper .question-form .tc-pills button.tc-pill { box-sizing: border-box; display: flex; align-items: center; justify-content: center; float: none; width: 100%; min-width: 0; min-height: 44px; margin: 0 !important;
    padding: 8px 10px !important; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.06); color: #F2F2F2; font-family: "Mukta Vaani", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3;
    letter-spacing: 0; text-transform: none; text-align: center; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color .12s ease, border-color .12s ease; }
.study-apply-wrapper .question-form .tc-pills button.tc-pill.long { grid-column: 1 / -1; }
.study-apply-wrapper .question-form .tc-pills button.tc-pill:hover { border-color: rgba(255,255,255,.6); }
.study-apply-wrapper .question-form .tc-pills button.tc-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.study-apply-wrapper .question-form .tc-pills button.tc-pill[aria-checked="true"] { border-color: #9CCE5A; box-shadow: inset 0 0 0 1px #9CCE5A; background: rgba(156,206,90,.22); color: #fff; font-weight: 700; }
.study-apply-wrapper .question-form .tc-pills.tc-q-invalid { outline-offset: 4px; border-color: transparent !important; }
@media (prefers-reduced-motion: reduce) { .study-apply-wrapper .question-form .tc-pills button.tc-pill { transition: none; } }
/* Errors on screen 2 sit 8px under their pill group / text box (screen 1's negative pull assumes a field margin that these do not have). */
.study-apply-wrapper .question-form label.error, .study-apply-wrapper .question-form .validation-message { margin: 8px 0 0; }
/* "Send my answers": full width on a phone (like Apply Now), its own width and centred on web. */
.study-apply-wrapper .content-back .question-form { box-sizing: border-box; padding: 28px 20px 24px; }
@media (min-width: 769px) { .study-apply-wrapper .content-back .question-form { padding: 36px 40px 32px; } }
.study-apply-wrapper .question-form .submit-btn { display: block; float: none; width: 100%; margin: 8px 0 0; }
@media (min-width: 769px) { .study-apply-wrapper .question-form .submit-btn { width: auto; min-width: 220px; margin: 12px auto 0 !important; } }
/* ⭐⭐ THE LANDING IS ONE CENTRED STACK (Marcos 2026-10-03): the card is at most 560px and centred, 32px 20px inside; icon 56px, headline 22/700,
   body 16/1.5 in a 34ch column, the phone never splits, "Best time" is a pill, the email note is the one left-aligned inset block. The floating
   EN / chat buttons are cleared by the section's own padding-bottom (below), not by padding inside the card. */
.study-apply-wrapper:has(.confirmation-wrapper:not(.hidden)) { max-width: 560px; margin-inline: auto !important; }
.study-apply-wrapper .content-back .confirmation-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; width: 100%; margin: 0; padding: 32px 20px; }
.study-apply-wrapper .content-back .confirmation-wrapper.hidden { display: none !important; }
.study-apply-wrapper .content-back:has(.confirmation-wrapper:not(.hidden)) { padding: 0 !important; display: flex !important; flex-direction: column; }
/* The landing's content sits VERTICALLY CENTRED in whatever height the panel has (Marcos 2026-10-03). */
.study-apply-wrapper .content-back .confirmation-wrapper:not(.hidden) { justify-content: center; flex: 1 1 auto; min-height: 100%; }
/* SCREEN 3 (landing): readable body, bold phone + time, left-aligned paragraphs; the headline is personalised ("Maria, you're all set"). */
.study-apply-wrapper .confirmation-wrapper .application-confirmation { color: #E6E6E6; text-align: center; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400; line-height: 1.5; max-width: 34ch; margin: 0 auto 12px; }
.study-apply-wrapper .confirmation-wrapper .application-confirmation b { color: #fff; font-weight: 600; }
.study-apply-wrapper .confirmation-wrapper .tc-confirm-note { font-size: 14px; opacity: 1; }
.study-apply-wrapper .confirmation-wrapper .tc-nowrap { white-space: nowrap; }
.study-apply-wrapper .confirmation-wrapper .tc-done-h { color: #fff; text-align: center; text-transform: none; letter-spacing: 0; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 14px; }
.study-apply-wrapper .confirmation-wrapper .tc-done-mark { display: block; width: 56px; height: 56px; margin: 0 auto 16px; padding: 12px; border-radius: 50%; background: #9CCE5A; fill: none; stroke: #0F2A1E; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
    .study-apply-wrapper .confirmation-wrapper .tc-done-mark { animation: tc-done-pop 200ms ease-out both; }
    .study-apply-wrapper .confirmation-wrapper .tc-done-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tc-done-draw 300ms ease-out 200ms forwards; }
}
@keyframes tc-done-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes tc-done-draw { to { stroke-dashoffset: 0; } }
/* The fixed "More studies" bar (phones) sat over the form card: clearance under the form section (Blackhawk .bh-form-wrap, Zonar's form container). */
@media (max-width: 991px) { .bh-form-wrap, .study-form-faq-container { padding-bottom: 120px; } }   /* 2026-10-03: 72 -> 120 so the floating EN / chat buttons never sit over the last inputs or Apply */
/* 2026-10-03: the orange back-to-top ring is the third floating circle over the form on a phone - hidden under 576px on a page with the form. */
@media (max-width: 575.98px) { body:has(.study-apply-wrapper) .progress-wrap { display: none !important; } }
/* 2026-10-03: field text is 16px in both portals (iOS zooms the page on focus below 16px); placeholders keep the theme's own size. */
.study-apply-wrapper :is(input[type="text"], input[type="email"], select) { font-size: 16px !important; }
.study-apply-wrapper .confirmation-wrapper .tc-confirm-when { margin: 4px auto 12px; max-width: none; }
.study-apply-wrapper .tc-when-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #3A3A3A; color: #fff; font-size: 14px; line-height: 1.4; }
/* The email note: the ONE left-aligned block, inset (#333, radius 8, 12px 14px), a long address wraps anywhere. */
.study-apply-wrapper .confirmation-wrapper .tc-confirm-mail { box-sizing: border-box; width: 100%; max-width: 360px; margin: 4px auto 0; padding: 12px 14px; border-radius: 8px; background: #333; color: #E6E6E6; font-size: 14px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.study-apply-wrapper .confirmation-wrapper .tc-confirm-mail b { color: #fff; font-weight: 600; }
.study-apply-wrapper .tc-confirm-note { font-size: 13px; opacity: .85; margin-top: 4px; overflow-wrap: anywhere; }   /* a long email wraps, never runs off the card */

/* ⛔ Nothing floats over the application (Marcos 2026-10-03): Zonar's fixed "More studies" bar and its pop-up hide while the apply
   card is on screen (study-details.js toggles body.tc-form-in-view). */
body.tc-form-in-view .study-scroll-nav { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
/* Screen 2: the bootstrap row's -15px gutter margins pulled the questions out of the 20px inner padding (pills touched the card edge); neutralise them. */
.study-apply-wrapper .content-back .question-form .row { margin-left: 0; margin-right: 0; }
.study-apply-wrapper .content-back .question-form .row > .question-group { padding-left: 0; padding-right: 0; }
/* Blackhawk already carries its own panel title; the in-panel head is Zonar-only. */
.bh-form-wrap .study-apply-wrapper .tc-app-head { display: none; }