/*
 * Forms stylesheet this mirror owns (public/, never public/assets/themes/thrive-agency/
 * css/ — those files belong to the CSS agent). Linked by src/lib/lead-forms.ts's
 * LEAD_FORM_STYLE_TAG right next to lead-form.js's own <script> tag.
 *
 * QA round 4, ticket F: /contact/'s submit button hover reads white-on-white on staging
 * instead of live's white background + orange text/border. Root cause (measured via
 * getComputedStyle on live vs staging :hover, and confirmed by reading the actual cascade):
 * public/assets/themes/thrive-agency/css/only-contact-form.css line 157 carries
 *   body .custom_layout_gform #gform_wrapper_100 form .gform_footer input {
 *     color: #fff !important; border: 2px solid #fff !important; ...
 *   }
 * with NO :hover in its own selector, so it applies in EVERY state. That file's OWN hover
 * override two lines later (line 164) only reaches class-level specificity
 * (`.gform_wrapper.custom-contact-gform-layout`), which a plain `#gform_wrapper_100` ID
 * selector always outranks regardless of source order — so the state-agnostic white
 * pins color/border and the hover rule never wins, on CSS specificity alone (confirmed this
 * is the exact mechanism, not a missing rule: the stylesheet IS linked, the hover rule DOES
 * fire on :hover, it just loses). Not a staging-only bug introduced by the mirror; it's a
 * pre-existing theme CSS specificity bug, confirmed via a direct cascade read, that happens
 * to work out on live only because something else there (not reproduced here) lands with
 * yet higher priority. Fixing the theme file is out of scope here (another agent owns
 * public/assets/themes/thrive-agency/css/*), so this file's own rule below matches the
 * SAME #gform_wrapper_100 ID specificity and ADDS :hover plus the type selector on top,
 * which is strictly more specific than either theme rule and wins outright, no matter which
 * stylesheet loads last.
 */
body .custom_layout_gform #gform_wrapper_100 form .gform_footer input[type="submit"]:hover,
body .custom_layout_gform #gform_wrapper_100 form .gform_footer button[type="submit"]:hover {
  background: #fff !important;
  color: #db7803 !important;
  border: 2px solid #db7803 !important;
  border-radius: 42px !important;
}

/* QA4 T2 (2026-10-09): the Smart Phone Field plugin writes inline `padding-left: <flag width + 6>px`
   on the tel input. When the field is initialised while hidden (multi-page form step 2, popup
   form 101, Thrive-for-agencies "Let's talk") it measures a bogus width (the viewport, 1926px),
   so the input grows past its column. Live neutralises it with an !important rule (US) and
   box-sizes the input to its container; mirror both. Other countries are handled in lead-form.js. */
body .gform_wrapper .gfield .iti { width: 100%; max-width: 100%; }
body .gform_wrapper .gfield .iti input.iti__tel-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.iti:has(.iti__selected-flag[title="United States"]) input.iti__tel-input { padding-left: 71px !important; }

/* JAS-1022 (reviewer sheet 10/22, Forms tab: "Authentication message" on iPad/mobile, 6 forms).
 * Source: the Worker-served /antispam.js renders a Cloudflare Turnstile widget (appearance
 * interaction-only) INSIDE the form, just before the submit button, on the visitor's first touch
 * of the form (a click on a blank form's Submit counts). When Cloudflare wants a click (emulated
 * iPad/iPhone sessions, VPNs) the script's before-interactive-callback gives the box
 * `max-width:100%;margin:8px 0` and a visible "Verify you are human" checkbox appears: 300px wide
 * inside flex rows it pushes the Submit button out of the card, and it sits over the button label.
 * Live thriveagency.com has no such widget on any form. The Worker client thriveagency runs with
 * turnstile.enforce:false, so the token is advisory (no hold signal); a challenge that is never
 * answered costs the visitor nothing but the script's own 4s wait. Keep the box out of flow and
 * invisible. !important beats the script's inline cssText. If enforce is ever turned on for this
 * client, revisit: an unanswerable hidden challenge would then hold those leads. */
.thrive-antispam{position:absolute !important;width:0 !important;height:0 !important;min-width:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important;visibility:hidden !important}

/* JAS-1022 AI Strategy Session item 1: live greys an unchosen <select> via an inline style Gravity
 * Forms' JS sets (rgba(118,118,118,.62)); the mirror does not run that JS so the placeholder option
 * ("Industry", "Monthly Marketing Budget*") rendered as dark as a real value. Same colour, by CSS. */
select:has(> option.gf_placeholder:checked){color:rgba(118,118,118,.62)}
/* QA 10/30 form 126 (and 125): the theme's id-heavy rule `.fixaireviewform div#gform_wrapper_126 form select#input_126_33{color:#333}`
 * beats the rule above, so the unchosen "Industry" option read as a real value. Live renders rgb(118,118,118). Form 130 is left alone on purpose: live's `.local-popup-section ... select#input_130_33{color:#333!important}`
 * beats the Forms inline rgb(118,118,118), so live itself computes rgb(51,51,51) there and so does the mirror. */
div#gform_wrapper_125 form select:has(> option.gf_placeholder:checked),
div#gform_wrapper_126 form select:has(> option.gf_placeholder:checked){color:rgb(118,118,118)!important}

/* 2026-10-30 gform_button hover (bottom "SEND MY FREE PROPOSAL" on the service pages, form 94).
 * Live's theme only-contact-form.css now carries these three rules (live NitroPack combined
 * stylesheet, verbatim) because the form's submit is a <button type="submit">, not an <input>.
 * The mirrored copy of that theme file (and the files.thriveagency.com bucket copy) predates the
 * change and only has the input[type="submit"] variants, so on staging the hover fell through to
 * white text on white and a 6px radius. Restored verbatim: same selectors, same values. */
body .custom_layout_gform #gform_wrapper_94.custom-contact-gform-layout form .gform_footer button[type="submit"]{position:relative;border-radius:52px !important}
body .custom_layout_gform #gform_wrapper_94.custom-contact-gform-layout form .gform_footer input[type="submit"],body .custom_layout_gform #gform_wrapper_94.custom-contact-gform-layout form .gform_footer button[type="submit"]{width:auto !important;margin-right:20px}
body .custom_layout_gform .gform_wrapper.custom-contact-gform-layout form .gform_footer button[type="submit"]:hover{background:#fff;border:solid 2px #db7803 !important;color:#db7803 !important}

/* Recheck 4, F15: live's submit button on /thrive-local/ pages is `font-size:0` with a button::after label
   ("REQUEST FREE PROPOSAL NOW"). Staging links files.thriveagency.com/.../thrive-local-pages.css?1793364805,
   a stale copy of that sheet (the CDN serves a different body for that query string than for the bare URL, and
   the bare one is what live ships): the stale copy only knows `input[type=submit]` and paints the label on
   `.gform_footer::after`, so the <button> keeps its 20px "GET STARTED" text on top of the label. These are
   live's own rules for the <button> form (copied verbatim from live's combined stylesheet) and the stale
   footer overlay is switched off so the label is drawn once. */
body .custom-local-pages-form .gform_wrapper form .gform_footer { position: relative; }
body .custom-local-pages-form .gform_wrapper form .gform_footer input[type="submit"],
body .custom-local-pages-form .gform_wrapper form .gform_footer button[type="submit"] { padding: 20px 20px !important; font-size: 0 !important; width: 360px; }
body .custom-local-pages-form .gform_wrapper form .gform_footer::after { content: none !important; }
body .custom-local-pages-form .gform_wrapper form .gform_footer button::after { content: "REQUEST FREE PROPOSAL NOW"; z-index: 99; position: absolute; left: 55%; top: 50%; transform: translate(-54%, -50%); color: #fff; font-size: 19px; font-family: 'ProximaNova-Extrabld', Arial; pointer-events: none; width: 100%; text-align: center; }
@media (min-width: 100px) and (max-width: 767px) { html body .custom-local-pages-form .gform_wrapper form .gform_footer button::after { font-size: 16px; } }
@media (max-width: 520px) {
  body .custom-local-pages-form .gform_wrapper form .gform_footer { width: 100%; }
  body .custom-local-pages-form .gform_wrapper form .gform_footer input[type="submit"],
  body .custom-local-pages-form .gform_wrapper form .gform_footer button[type="submit"] { padding: 20px 10px !important; font-size: 0 !important; width: 100%; max-width: 350px; min-width: 100%; margin-right: 0 !important; }
}

/* Recheck 4, F11 / TP9-30-1: WebKit (Safari, iPad) ignores @font-face ascent-override/descent-override, so
   with the Adobe Fonts ProximaNova-Extrabld (hhea 1079/-383) `line-height: normal` resolves to ~1.46em and
   the 20px submit label gets a 29px line box (button 58px tall, live 48px). Live's self-hosted file is
   790/-210, so its `normal` is exactly 1em. Pin 1 to get live's line box in every engine. */
body .gform_wrapper .gform_footer button.gform_button,
body .gform_wrapper .gform_footer input.gform_button { line-height: 1; }