/* ==========================================================================
   Registration Wizard — QEN-8776 frontend refresh
   Scope: body.page-register (pre-auth anonymous page, NO sidebar-nav).
   Self-contained: does NOT co-class sidebar-nav (navigation.css would add
   margin-left for a sidebar that doesn't exist on the anonymous layout).
   Primary indigo = #4F46E5 (--raw-indigo-600); re-declared in the body.page-register
   block below since var(--primary)/var(--brand-primary) resolve to legacy cyan/navy
   in the absence of body.sidebar-nav.
   ========================================================================== */

/* ==========================================================================
   §1  Page scaffold — constrain the wizard card inside the legacy layout
   ========================================================================== */

/* The anonymous page body has class "BodyStyle page-register". The legacy
   Default.master table-layout provides the outer chrome (top nav + footer bar).
   We just need to ensure the wizard card is readable with a light background. */
body.page-register {
    background-color: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;

    /* QEN-8831: this anonymous page has NO body.sidebar-nav, so the global brand
       tokens fall back to legacy :root cyan/navy. Re-declare them from the raw
       palette here so the tokenized rules below resolve to the Q88 brand (indigo
       buttons + indigo links) instead. Q88-only page → not portal-aware. */
    --primary: var(--raw-indigo-600);
    --button-primary-hover: var(--raw-indigo-700);
    --text-link: var(--raw-indigo-600);
    --link-hover: var(--raw-indigo-700);
    --primary-tint: 79, 70, 229;   /* indigo-600 rgb — focus-ring tint (Q88-only page) */
}

/* ==========================================================================
   §2  ModuleTemplate V1 chrome — replace legacy navy with refresh card
   Register.ascx uses <uc:ModuleTemplate> which renders:
     .modContainerStd > table > tbody:
       tr.modTitle > td.modTLeft | td.modTRight
       tr.modSub1  > td (SubHeader1 slot)
       tr.modMain  > td (Main slot)
       tr.modFooter2 > td (Footer2 slot)
     wrapped in .modInnerContainer
   ========================================================================== */

/* Outer container — white card with slate border + shadow */
body.page-register .modContainerStd {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.10),
                0px 1px 2px -1px rgba(0,0,0,0.10) !important;
    margin: 24px 48px !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Reset the inner table that ModuleTemplate generates */
body.page-register .modContainerStd > table {
    border-collapse: collapse !important;
    width: 100% !important;
    background: none !important;
}

body.page-register .modContainerStd > table > tbody > tr,
body.page-register .modContainerStd > table > tbody > tr > td {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Inner container row — reset legacy styles */
body.page-register .modInnerContainer {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   §2.1  Title bar (modTitle row) — teal header strip
   -------------------------------------------------------------------------- */
body.page-register .modTitle {
    background-color: var(--primary) !important;
    border-bottom: none !important;
    padding: 0 !important;
}

body.page-register .modTitleHeader {
    background-color: var(--primary) !important;
    border: none !important;
    padding: 0 !important;
}

body.page-register .modTLeft {
    background-color: var(--primary) !important;
    padding: 10px 16px !important;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Title icon — hide the legacy .gif (user.gif) sprite */
body.page-register .modTLeft img[src*="user.gif"] {
    display: none !important;
}

body.page-register .modTRight {
    background-color: var(--primary) !important;
    padding: 10px 16px !important;
    color: #ffffff !important;
    border: none !important;
    text-align: right !important;
    vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   §2.2  SubHeader1 row — wizard step header (h1 text + description)
   -------------------------------------------------------------------------- */
body.page-register .modSub1 {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 !important;
}

/* tblStdHeader inside SubHeader1 */
body.page-register #tblStdHeader {
    background: none !important;
    border: none !important;
}

body.page-register #tblStdHeader td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    background: none !important;
    border: none !important;
}

body.page-register #tblStdHeader h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body.page-register #tblStdHeader td:last-child {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   §2.3  Main content area
   -------------------------------------------------------------------------- */
body.page-register .modMain {
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 !important;
}

/* Alert error band (trAlert) */
body.page-register .modMain td.alert {
    background-color: #fef2f2 !important;
    border-bottom: 1px solid #fca5a5 !important;
    padding: 12px 16px !important;
    color: #991b1b !important;
    font-size: 13px !important;
}

body.page-register .modMain td.alert ul {
    margin: 4px 0 0 16px !important;
    padding: 0 !important;
    color: #991b1b !important;
}

/* Main content table wrapper (the outer table in Main slot) */
body.page-register .modMain > td > table {
    border-collapse: collapse !important;
    width: 100% !important;
}

body.page-register .modMain > td > table > tbody > tr > td {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* --------------------------------------------------------------------------
   §2.4  Footer2 row — action buttons
   -------------------------------------------------------------------------- */
body.page-register .modFooter2 {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}

body.page-register .modFooter2 > td > table {
    border-collapse: collapse !important;
    width: 100% !important;
    background: none !important;
}

body.page-register .modFooter2 > td > table > tbody > tr > td {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   §3  LinkButton overrides — must beat MainWhiteout.css L671 !important navy
   ========================================================================== */

/* All LinkButtons in the wizard footer */
body.page-register a.LinkButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin-left: 8px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Hide <ins>&nbsp;</ins> spacer that asp:LinkButton emits */
body.page-register a.LinkButton > ins {
    display: none !important;
}

/* Primary action buttons: Continue, Process Payment, Complete, Home
   — teal fill, white text */
body.page-register a.LinkButton[id$="_btnContinue"],
body.page-register a.LinkButton[id$="_btnProcessPayment"],
body.page-register a.LinkButton[id$="_btnComplete"],
body.page-register a.LinkButton[id$="_btnHome"] {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
}

body.page-register a.LinkButton[id$="_btnContinue"]:hover,
body.page-register a.LinkButton[id$="_btnProcessPayment"]:hover,
body.page-register a.LinkButton[id$="_btnComplete"]:hover,
body.page-register a.LinkButton[id$="_btnHome"]:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

/* Back button — ghost/secondary: slate border, dark text, white bg */
body.page-register a.LinkButton[id$="_btnBack"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

body.page-register a.LinkButton[id$="_btnBack"]:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* SubscriptionCompare Select buttons (inside the grid body) */
body.page-register a.LinkButton[id$="_btnSubscription1"],
body.page-register a.LinkButton[id$="_btnSubscription2"],
body.page-register a.LinkButton[id$="_btnSubscription3"] {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}

body.page-register a.LinkButton[id$="_btnSubscription1"]:hover,
body.page-register a.LinkButton[id$="_btnSubscription2"]:hover,
body.page-register a.LinkButton[id$="_btnSubscription3"]:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

/* Invoice / Credit Card choice buttons in CompanyInformation */
body.page-register a.LinkButton[id$="_btnInvoice"],
body.page-register a.LinkButton[id$="_btnCreditCard"] {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
}

body.page-register a.LinkButton[id$="_btnInvoice"]:hover,
body.page-register a.LinkButton[id$="_btnCreditCard"]:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

/* Change Subscription SiteFooter link */
body.page-register a.SiteFooter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #475569 !important;
    text-decoration: underline !important;
    font-weight: normal !important;
}

body.page-register a.SiteFooter:hover {
    color: var(--text-link) !important;
}

/* ==========================================================================
   §4  StdTable — form/grid shared by all steps
   ========================================================================== */

body.page-register .StdTable {
    border-collapse: collapse !important;
    width: 100% !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #0f172a !important;
}

body.page-register .StdTable td {
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
    background-color: #ffffff !important;
    font-family: inherit;
    font-size: 13px !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   §4.1  Header1 section bands — slate-50 bg, medium weight label
   Replaces legacy navy (#003366 / #2D3663) header bands.
   -------------------------------------------------------------------------- */
body.page-register .StdTable td.Header1,
body.page-register .StdTable tr.Header1 > td {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
}

/* Neutralize legacy navy (#2D3663) painted on the section-header ROW elements
   themselves by MainWhiteout/Main.css. The <td> is restyled above, but a
   <tr class="Header1"> with a bare <td> (e.g. the "Terms" band in
   RegistrationUserInfo) keeps its navy row background — visually masked by the
   cell, but it bleeds through cell gaps and fails the no-navy computed-style
   check. Covers all header-row variants used across the wizard steps. */
body.page-register .StdTable tr.Header1,
body.page-register .StdTable tr.Header2,
body.page-register .StdTable tr.SubHeader1,
body.page-register .StdTable tr.SubHeader2 {
    background-color: #f1f5f9 !important;
}

/* --------------------------------------------------------------------------
   §4.2  Header2 (SubscriptionCompare "Select Subscription" row)
   -------------------------------------------------------------------------- */
body.page-register .StdTable tr.Header2 > td {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
}

/* --------------------------------------------------------------------------
   §4.3  SubHeader1 rows (SubscriptionCompare sub-sections)
   -------------------------------------------------------------------------- */
body.page-register .StdTable tr.SubHeader1 > td,
body.page-register .StdTable td.SubHeader1 {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
}

/* --------------------------------------------------------------------------
   §4.4  SubHeader2 rows (SubscriptionCompare Fees sub-header)
   -------------------------------------------------------------------------- */
body.page-register .StdTable tr.SubHeader2 > td {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 12px !important;
}

/* --------------------------------------------------------------------------
   §4.5  Label cells — right-aligned, medium weight
   -------------------------------------------------------------------------- */
body.page-register .StdTable td.Label {
    background-color: #f8fafc !important;
    color: #374151 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
}

/* Required asterisk */
body.page-register .StdTable td.Label label.required,
body.page-register label.required {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   §4.6  Alt rows — very light stripe
   -------------------------------------------------------------------------- */
body.page-register .StdTable tr.Alt > td {
    background-color: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   §4.7  BorderV1Left / BorderV1Right / NoBorderBottom helpers
         (used in CompanyInformation payment method section)
   -------------------------------------------------------------------------- */
body.page-register .StdTable td.BorderV1Left {
    border-left: 1px solid #e2e8f0 !important;
}

body.page-register .StdTable td.BorderV1Right {
    border-right: 1px solid #e2e8f0 !important;
}

body.page-register .StdTable td.NoBorderBottom {
    border-bottom: none !important;
}

/* BorderV2Bottom adds a thick legacy NAVY bottom border in MainWhiteout.css
   (used by a payment/section table in CompanyInformation). The card frame is
   the only boundary now — same neutralization as q88status.css / requestaccess.css. */
body.page-register .StdTable.BorderV2Bottom,
body.page-register table.BorderV2Bottom {
    border-bottom: 0 !important;
}

/* ==========================================================================
   §5  Form controls — InputField (TextBox / DropDownList)
   ========================================================================== */

body.page-register input.InputField,
body.page-register select.InputField,
body.page-register textarea.InputField {
    height: 32px !important;
    padding: 4px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s ease !important;
    vertical-align: middle !important;
}

body.page-register input.InputField:focus,
body.page-register select.InputField:focus,
body.page-register textarea.InputField:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15) !important;
}

/* Stretch EVERY dropdown to fill the free space in its column cell. The legacy
   <select> shrink-wraps to its widest option, leaving empty space (e.g. "How
   Did You Hear" was 137px in a 226px cell). NOTE: ccHearAbout renders
   <select class="NormalTextBox"> — NOT InputField — so we target every <select>
   in the form table, not just .InputField, to catch (and chrome) all of them.
   width:100% fills the cell's content box; box-sizing keeps border/padding in.
   Text inputs keep their natural width; the phone country-code/number boxes
   keep the fixed widths set below. */
body.page-register .StdTable select {
    width: 100% !important;
    height: 32px !important;
    padding: 4px 24px 4px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

body.page-register .StdTable select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15) !important;
    outline: none !important;
}

/* Narrow country-code phone prefix boxes */
body.page-register input.InputField[id$="_txtCountryCode"],
body.page-register input.InputField[id$="_txtPhoneCountryCode"],
body.page-register input.InputField[id$="_txtFaxCountryCode"] {
    width: 40px !important;
    text-align: center !important;
}

/* Phone / fax field cell: keep the country-code box, number box and info icon
   all on ONE line, and stretch the NUMBER box to fill the rest of the column.
   The cell stays a table-cell (display:flex on a <td> drops it out of the
   column model and shrinks it) with white-space:nowrap so the three items never
   wrap. The number box is sized via calc against the cell content box: ~70px
   reserved = country-code 40 + info icon 16 + inline whitespace gaps, leaving a
   safety margin so nothing wraps or overflows. */
body.page-register .StdTable td:has(> input[id$="_txtCountryCode"]),
body.page-register .StdTable td:has(> input[id$="_txtPhoneCountryCode"]),
body.page-register .StdTable td:has(> input[id$="_txtFaxCountryCode"]) {
    white-space: nowrap !important;
}

body.page-register input.InputField[id$="_txtPhoneNumber"],
body.page-register input.InputField[id$="_txtFaxNumber"] {
    width: calc(100% - 70px) !important;
}

/* --------------------------------------------------------------------------
   §5.1  cc1:DropDownList (ComponentArt editable combo — "How Did You Hear")
         Renders as a table with class swapping on hover/focus.
   -------------------------------------------------------------------------- */
body.page-register table[class*="comboBox"] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    height: 32px !important;
    width: 100% !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
}

body.page-register table[class*="comboBox"] input {
    border: none !important;
    background: transparent !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #0f172a !important;
    outline: none !important;
    padding: 4px 8px !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   §5.2  Checkbox — Terms acceptance + Same as Company Address
   -------------------------------------------------------------------------- */
body.page-register input[type="checkbox"] {
    accent-color: var(--primary) !important;
    width: 15px !important;
    height: 15px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    margin-right: 6px !important;
}

/* Checkbox label text */
body.page-register input[type="checkbox"] + span,
body.page-register span:has(> input[type="checkbox"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   §5.3  RadioButtonList — NoBorder RepeatDirection="Horizontal"
         Renders as <input type="radio"> + <label> siblings inside a <span>.
         Use adjacent-sibling combinator for :checked state (NOT :has()).
   -------------------------------------------------------------------------- */
body.page-register input[type="radio"] {
    accent-color: var(--primary) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
}

body.page-register input[type="radio"] + label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    margin-right: 16px !important;
    vertical-align: middle !important;
    font-weight: 400 !important;
}

body.page-register input[type="radio"]:checked + label {
    color: var(--text-link) !important;
    font-weight: 500 !important;
}

/* NoBorder / NoPadding class on RadioButtonList tables */
body.page-register table.NoBorder,
body.page-register table.NoBorder td {
    border: none !important;
    background: none !important;
    padding: 2px 4px !important;
}

body.page-register table.NoPadding,
body.page-register table.NoPadding td {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* ==========================================================================
   §6  Terms iframe (RegistrationUserInfo)
       Frame the iframe — cannot style inner content (separate document).
   ========================================================================== */

body.page-register iframe[name="frmTerms"],
body.page-register iframe#Iframe1 {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    width: 100% !important;
    height: 250px !important;
    display: block !important;
    background-color: #ffffff !important;
}

/* Terms row wrapper padding */
body.page-register .StdTable tr > td[colspan="4"]:has(iframe) {
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   §7  help.gif tooltip icon swap (phone field in UserInfo + CompanyInfo)
       Swap legacy help.gif to a Lucide circle-help mask icon.
       --icon-circle-help is defined in tokens.css.
   ========================================================================== */

body.page-register img[src*="help.gif"] {
    width: 16px !important;
    height: 16px !important;
    /* Hide the pixel image */
    opacity: 0 !important;
    position: relative !important;
}

body.page-register span:has(> img[src*="help.gif"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    position: relative !important;
}

body.page-register span:has(> img[src*="help.gif"])::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #64748b !important;
    -webkit-mask: var(--icon-circle-help) center / contain no-repeat !important;
    mask: var(--icon-circle-help) center / contain no-repeat !important;
    pointer-events: none !important;
}

/* ==========================================================================
   §8  SubscriptionCompare — pricing comparison table specifics
   ========================================================================== */

/* Override .StdTable.BorderV1 which may carry legacy border styles */
body.page-register .StdTable.BorderV1 {
    border: 1px solid #e2e8f0 !important;
    border-collapse: collapse !important;
}

/* Feature include/exclude icons — keep them natural size */
body.page-register #tblSubscriptions img {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
}

/* Legend row below the grid */
body.page-register #spanLegend {
    padding: 8px 12px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px !important;
    color: #475569 !important;
}

body.page-register #spanLegend table.NoBorder td {
    padding: 4px 0 !important;
    background: none !important;
    border: none !important;
}

body.page-register #spanLegend a {
    color: var(--text-link) !important;
    text-decoration: underline !important;
}

/* Hint tooltip boxes (.hint) */
body.page-register .hint {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px !important;
    padding: 8px 10px !important;
}

body.page-register .hint a {
    color: #94a3b8 !important;
    font-size: 11px !important;
}

/* Hint down/up pointer: legacy HintPointerBottom.gif (MainWhiteout/Main.css)
   is a gray GIF triangle that clashes with the dark refreshed .hint box.
   components.css repaints it only under body.sidebar-nav (absent here), so
   repaint as a CSS triangle in the hint bg colour. Only visible when a
   "What is…?" tooltip is open. */
body.page-register .hint .hint-pointer,
body.page-register .hint .hint-pointerTop {
    background: none !important;
    background-color: #1e293b !important;
    width: 14px !important;
    height: 8px !important;
}

body.page-register .hint .hint-pointer {
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body.page-register .hint .hint-pointerTop {
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
}

/* StdPadding utility used in SubscriptionCompare for "What is..." links */
body.page-register .StdPadding {
    padding: 4px 12px !important;
    display: inline-block !important;
    font-size: 12px !important;
    color: #475569 !important;
}

body.page-register .StdPadding a,
body.page-register a[href*="ShowHint"] {
    color: var(--text-link) !important;
    text-decoration: underline !important;
}

/* Disclaimer text (small note) */
body.page-register .Disclaimer,
body.page-register .disclaimer {
    font-size: 11px !important;
    color: #64748b !important;
    font-style: normal !important;
}

/* NormalBold labels ("Offices:", "Period:") */
body.page-register .NormalBold {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #0f172a !important;
}

/* "New!" badge in feature list */
body.page-register .new {
    color: #059669 !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

/* ==========================================================================
   §9  RegistrationComplete / SubscriptionRenewalComplete message step
       Padding-only content div — ensure text renders cleanly.
   ========================================================================== */

body.page-register .modMain div[style*="padding: 5px"],
body.page-register .modMain div[style*="padding:5px"] {
    padding: 20px 24px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    color: #0f172a !important;
    line-height: 1.6 !important;
}

body.page-register .modMain div[style*="padding"] a {
    color: var(--text-link) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   §10  Validation error markup
   ========================================================================== */

body.page-register span.required,
body.page-register .required {
    color: #dc2626 !important;
    font-size: 12px !important;
}

/* ValidationSummary bullet list */
body.page-register ul.required {
    margin: 4px 0 0 16px !important;
    padding: 0 !important;
}

body.page-register ul.required li {
    font-size: 12px !important;
    color: #dc2626 !important;
    line-height: 1.5 !important;
}

/* alertVal.gif image inside error messages — swap to a small red icon mask */
body.page-register img[src*="alertVal.gif"] {
    filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(4890%) hue-rotate(340deg) brightness(90%) contrast(100%) !important;
    vertical-align: middle !important;
    width: 14px !important;
    height: 14px !important;
}

/* ==========================================================================
   §11  Captcha section (RegistrationCompanyInformation BotDetect)
   ========================================================================== */

body.page-register .disclaimer#spanCaptchaInsructions {
    font-size: 12px !important;
    color: #475569 !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
   §12  Misc legacy resets — prevent bleed-through of other global styles
   ========================================================================== */

/* Hide legacy table borders on the shell (Register.ascx outer table) */
body.page-register .modMain table[border="0"] {
    border: none !important;
}

/* Phone "+" bold divider in Label cells */
body.page-register .StdTable td.Label div[style*="font-size:12pt"] {
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Ensure native form controls inherit Inter font */
body.page-register input,
body.page-register select,
body.page-register textarea,
body.page-register button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Constrain the page at 2363px — prevent right-overflow */
@media (min-width: 1680px) {
    body.page-register .modContainerStd {
        margin: 24px 48px !important;
        width: auto !important;
        max-width: calc(100vw - 96px) !important;
    }
}