/* ========================================
   X-Caliber ADA / WCAG 2.1 AA Compliance
   ADA26 stylesheet (loaded only by *_ADA26 master pages)
   ======================================== */

/* ----------------------------------------
   1. Skip Links (WCAG 2.4.1)
   ---------------------------------------- */
.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 12px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ----------------------------------------
   2. Screen Reader Only
   ---------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------
   3. Focus Indicators (WCAG 2.4.7)
   ---------------------------------------- */
input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus,
.button:focus,
[tabindex]:focus {
    outline: 2px solid #005a9e;
    outline-offset: 2px;
}

.RadInput:focus-within,
.RadComboBox:focus-within,
.RadButton:focus,
.RadButton:focus-within,
.RadButton.rbFocused,
.RadButton input:focus,
.RadButton button:focus,
.RadTabStrip a.rtsLink:focus,
.riTextBox:focus {
    outline: 2px solid #005a9e !important;
    outline-offset: 1px !important;
}

/* ----------------------------------------
   4. Validation Summary (WCAG 3.3.1)
   ---------------------------------------- */
.validation-summary {
    border: 2px solid #B30000;
    border-left-width: 4px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #fff6f6;
}

.validation-summary::before {
    content: "\26A0\00A0"; /* warning sign + nbsp */
    font-size: 1.2rem;
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.5rem;
}

.validation-summary li {
    margin-bottom: 0.25rem;
}

/* ----------------------------------------
   5. Required Field Indicator
   ---------------------------------------- */
.required-indicator {
    color: #B30000;
    font-weight: bold;
    margin-left: 2px;
}

/* ----------------------------------------
   6. Header organization name contrast (WCAG 1.4.3)
   The org name can render as light text over a variable banner photo.
   Add a dark scrim behind the text so contrast is guaranteed regardless of image.
   NOTE: if the org name is baked into the banner IMAGE itself, CSS cannot fix it
   and the remedy is a header-image/design change. Tune to the live design.
   ---------------------------------------- */
.courtName .info,
.courtName span,
.courtName label,
.CourtNameInner {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 2px 8px;
    border-radius: 2px;
    text-shadow: none;
}

/* ----------------------------------------
   7. Form control border contrast (WCAG 1.4.11)
   Boundaries of inputs/selects/textareas must be >= 3:1 vs adjacent background.
   Dark navy #1F3864 on #fff is ~10:1 (well above 3:1). Covers native + Telerik.
   ---------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
select,
textarea,
.riTextBox,
.RadInput .riTextBox,
.rcbInput,
.RadComboBox .rcbInputCell {
    border: 1px solid #1F3864;
}

/* ----------------------------------------
   8. Placeholder / helper text contrast (WCAG 1.4.3)
   Default placeholders render too light; #595959 on #fff is ~7:1.
   ---------------------------------------- */
::placeholder { color: #595959; opacity: 1; }
:-ms-input-placeholder { color: #595959; }
::-ms-input-placeholder { color: #595959; }

/* ----------------------------------------
   8b. Email / tel input styling parity
   Main.css styles only INPUT[type="text"]/password/select inside .entryValue, so
   TextMode="Email" fields (type="email") render unstyled and look out of place.
   Mirror the site's text-input styling so they match the rest of the form.
   (Border color comes from section 7's navy rule above.)
   ---------------------------------------- */
.entryValue input[type="email"], .entryValueCol input[type="email"],
.entryValue input[type="tel"], .entryValueCol input[type="tel"] {
    width: 90%;
    padding: 6px;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1em !important;
    color: #444;
    background-color: #FFFFFF !important; /* match the other text inputs' white background */
    border-radius: 3px;
    box-shadow: 1px 2px 5px rgba(0,0,0,.41);
    box-sizing: content-box;
}

/* ----------------------------------------
   9. High Contrast Mode Support
   ---------------------------------------- */
@media (prefers-contrast: high) {
    .field-error,
    .required-indicator {
        text-decoration: underline;
    }

    .button,
    button {
        border: 2px solid currentColor;
    }
}

/* ----------------------------------------
   8. Reduced Motion Support
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Transaction-grid header cells: white on light blue (~2.9:1) -> darken (WCAG 1.4.3) */
.rgHeader,
.RadGrid th.rgHeader,
.RadGrid .rgHeader,
th.rgHeader {
    background-color: #3a6ea8 !important;
    color: #ffffff !important;
}

/* WCAG 1.4.3: section headings were ~3.5:1 on light section background. Darken to ~5.7:1. */
#mainContent h1, #mainContent h2, #mainContent h3,
.contentSection h1, .contentSection h2, .contentSection h3,
.entrySection h1, .entrySection h2, .entrySection h3 {
    color: #1a5fa0 !important;
}

/* ADA26 transaction card (TransactionTable_ADA26.ascx). */
.transactionCardAda { width: 100%; box-sizing: border-box; margin-bottom: 1.5em; }
/* Tighten the card's top/bottom padding around the Items table (sides keep the
   entrySection 30px); drop the h2 default top margin and the grid's trailing margin. */
.entrySection.transactionCardAda { padding-top: 14px; padding-bottom: 14px; }
.transactionCardAda .sectionTitle { margin-top: 0; margin-bottom: 12px; }
.transactionCardAda .rgMasterTable { margin-bottom: 0; }
.transactionCardAda .transCourtInfo { margin-bottom: 10px; }
.transactionCardAda .rgMasterTable { width: 100% !important; border-collapse: collapse; }

/* Flat navy new-look header + clean rows for the transaction card's data grid
   (grvCitationList) — flattens the dated Telerik gradient header to match the
   AllInformation "Saved Information" table. (Kept in sync with ada26-newlook.css.) */
.transactionCardAda .rgHeader,
.transactionCardAda th.rgHeader {
    background: #084594 !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: bold;
    font-size: 14px !important;
    padding: 2px 6px !important;
    border: 0 !important;
}
.transactionCardAda .rgHeader a { color: #fff !important; text-decoration: none; }
.transactionCardAda .rgRow td,
.transactionCardAda .rgAltRow td {
    padding: 2px 6px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #d7e0ee !important;
    border-right: 1px solid #d7e0ee !important;
    background: #fff !important;
}
.transactionCardAda .rgAltRow td { background: #f4f7fb !important; }
.transactionCardAda .rgRow td:last-child,
.transactionCardAda .rgAltRow td:last-child { border-right: 0 !important; }
.transactionCardAda .rgFooter td {
    background: #eef3fb !important;
    color: #084594 !important;
    font-weight: bold;
    font-size: 14px !important;
    padding: 2px 6px !important;
    border-top: 2px solid #084594 !important;
    border-right: 1px solid #d7e0ee !important;
}
.transactionCardAda .rgFooter td:last-child { border-right: 0 !important; }

.transactionCardAda input[type="image"],
.transactionCardAda a.rgActionButton img,
.transactionCardAda .rgGroupCol input[type="image"] { padding: 6px; min-width: 24px; min-height: 24px; cursor: pointer; }
.transactionCardAda input[type="image"]:focus,
.transactionCardAda input[type="image"]:focus-visible,
.transactionCardAda a:focus img { outline: 2px solid #005FCC; outline-offset: 2px; }

/* Error / success status block inside the card -- was in ada26-newlook.css only,
   despite the "kept in sync" claim above. */
.transactionCardAda .transError { margin: 10px 0; }
.transactionCardAda .tdError,
.transactionCardAda .tdSuccess { display: flex; align-items: center; gap: 10px; padding: 10px; }

.cartEmptyMessage {
    display: block; padding: 14px 16px; margin: 10px 0;
    border: 1px solid #1F3864; border-radius: 5px; background: #f4f7fb; color: #1F3864; font-weight: bold;
}

/* ----------------------------------------
   10. Step buttons (ported verbatim from ada26-newlook.css for parity — this
   stylesheet had never had it, so every org on this stylesheet's masters
   (X-Cal-Main_ADA26.Master, MADefault-X-Cal-Main_ADA26.Master) fell through to
   Main.css's plain pre-ADA .stepButton look. Found 2026-08-07 on AZChandler.
   ---------------------------------------- */

/* #2 Step buttons — modern "connected circles" wizard.
   StepButtons renders one of TWO markups depending on org/theme:
     (a) SetStepIconNew: .breadcrumbWrapper > .crumbs > .numberWrapper >
         (.numberCircle[.activeCircle] + .crumbText)   -- has real number circles
     (b) SetStepIcon:    .stepbuttonSection > .stepButton(.on) > .name (inline width:%)
                                                        -- text only, no circles
   We style BOTH into the same look: one equal-width row (never wraps), a connector
   line behind a numbered circle (real for (a), CSS-counter ::before for (b)), and
   the circle as the progress indicator -- filled navy = done/current,
   white+outline = upcoming (.activeCircle for (a), .on for (b)). */

/* Row container — flex for BOTH paths. For (a) its single child is the
   .breadcrumbWrapper (also flex); for (b) the .stepButton panels are direct
   children. counter-reset seeds the (b) step numbers. */
.stepbuttonSection,
.stepbuttonSection.d-flex-old,
.d-flex-old {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    box-sizing: border-box;          /* width:100% + padding must not exceed the viewport (1.4.10 reflow) */
    margin: 1.25em 0 !important;
    padding: 0.5em 1em;
    counter-reset: stepc;
}
.breadcrumbWrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    flex: 1 1 auto;
    max-width: 900px;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* A "step" in either path */
.breadcrumbWrapper .crumbs,
.stepbuttonSection .stepButton,
.stepbuttonSection .stepButton.on {
    position: relative;
    flex: 1 1 0 !important;
    width: auto !important;          /* override New.css 25% / inline 33% */
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;     /* kill the theme's per-step background-color (#deebf7 etc) */
    counter-increment: stepc;
}
/* (b) path only: the circle below is now position:absolute (out of flow), so .stepButton needs
   its OWN top padding to reserve the space it used to occupy via margin -- otherwise .name jumps
   up to fill the gap. 2.5rem circle + 0.55rem gap. Overrides the padding:0 above for THIS
   selector only -- (a) path's .crumbs is untouched, still padding:0.
   MUST repeat the .stepButton.on arm explicitly: the shared rule above lists .on as a separate
   3-class selector (0,3,0), one class more specific than a plain .stepButton, .on arm here. Both
   are !important, so on the current/.on step specifically the shared rule's padding:0 kept
   winning over this one even though this rule is declared later -- specificity beat source order.
   Confirmed 2026-08-10: only the "Your Information" (.on) step overlapped its label; the other
   three (plain .stepButton, tied specificity, decided by source order) were already correct. */
.stepbuttonSection .stepButton,
.stepbuttonSection .stepButton.on {
    padding: 3.05rem 0 0 !important;
}

/* Every App_Themes theme folder's Main.css (Blue, FTWorthBlue, GACobb, ...) sets a colored
   ::before/::after triangle on .stepButton -- a border-left-color trick faking a chevron
   connector (e.g. Blue theme's #deebf7/#83a1c7). The circle rule below already beats ::before
   with !important; ::after was never touched, so the theme's triangle kept rendering
   alongside/behind the connector line -- the "combo of old and new" look reported on AZChandler
   2026-08-10. Kill it explicitly on both pseudo-elements. */
.stepbuttonSection .stepButton::before,
.stepbuttonSection .stepButton::after {
    border: none !important;
}

/* Connector line: behind the circles, this circle's center to the next */
.breadcrumbWrapper .crumbs:not(:last-child)::after,
.stepbuttonSection .stepButton:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.25rem;                    /* vertical center of a 2.5rem circle */
    left: 50%;
    width: 100%;
    height: 3px;
    background: #c3cedd !important;  /* light navy-grey track */
    z-index: 0;
}

/* Numbered circle, (a) path: real .numberCircle/.activeCircle DOM elements inside the flex
   .numberWrapper column -- margin:auto centering is correct here, untouched. */
.breadcrumbWrapper .numberCircle,
.breadcrumbWrapper .activeCircle {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #223C63 !important;
    background: #FFFFFF !important;
    color: #223C63 !important;
    font: 600 1rem/2.35rem Arial, sans-serif !important;
    text-align: center;
    margin: 0 auto 0.55rem !important;
}

/* Numbered circle, (b) path: a generated ::before pseudo-element. margin:auto centering inside
   .stepButton's flex column (as used for path (a) above) measured consistently ~1 step-width off
   center in practice on AZChandler 2026-08-10 -- rather than chase why, position:absolute +
   left:50%/translateX(-50%) is the exact technique the connector line below already uses
   successfully, anchored to the same .stepButton (position:relative) containing block, so this
   is guaranteed to center on THIS step regardless of whatever the flex centering was doing. */
.stepbuttonSection .stepButton::before {
    content: counter(stepc);
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;                      /* above the connector line */
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #223C63 !important;
    background: #FFFFFF !important;
    color: #223C63 !important;
    font: 600 1rem/2.35rem Arial, sans-serif !important;
    text-align: center !important;
    text-indent: 0 !important;       /* Main.css's .stepButton sets text-indent:30px, inherited */
    margin: 0 !important;
    line-height: 2.35rem !important;
}
/* done + current = filled navy */
.breadcrumbWrapper .activeCircle,
.stepbuttonSection .stepButton.on::before {
    background: #223C63 !important;
    color: #FFFFFF !important;
}

/* keep the crumbs (a) inner wrapper above the line */
.breadcrumbWrapper .numberWrapper {
    position: relative;
    z-index: 1;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Labels */
.breadcrumbWrapper .crumbText,
.stepbuttonSection .stepButton .name {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 6px;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #223C63;
    word-break: break-word;
}

/* phones: keep one row, just scale down (no broken 2nd line) */
@media screen and (max-width: 600px) {
    .stepbuttonSection, .stepbuttonSection.d-flex-old, .d-flex-old { padding: 0.5em 0.25em; }
    .breadcrumbWrapper .numberCircle,
    .breadcrumbWrapper .activeCircle,
    .stepbuttonSection .stepButton::before {
        width: 2rem !important; height: 2rem !important; font-size: 0.85rem !important; line-height: 1.85rem !important;
    }
    .breadcrumbWrapper .crumbs:not(:last-child)::after,
    .stepbuttonSection .stepButton:not(:last-child)::after { top: 1rem; }
    .breadcrumbWrapper .crumbText,
    .stepbuttonSection .stepButton .name { font-size: 0.7rem; }
}

/* ----------------------------------------
   11. RadButton checkbox toggles (ported verbatim from ada26-newlook.css for parity —
   same gap class as section 10 above). "International Address" / "Same as previous" /
   "I Accept" toggles render as Telerik's old square sprite on this stylesheet's masters.
   Confirmed 2026-08-07 on AZChandler's Payment_ADA26 "I Agree" toggle via screenshot —
   reported as the checkbox "not working," which a checked/unchecked state with no visible
   difference would look exactly like even if the value posts correctly.
   ---------------------------------------- */
.RadButton .rbToggleCheckbox,
.RadButton .rbToggleCheckboxChecked {
    background-image: none !important;
    background-color: #FFFFFF !important;
    border: 2px solid #223C63 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    box-shadow: none !important;
    vertical-align: middle;
}
.RadButton .rbToggleCheckboxChecked {
    background-color: #223C63 !important;
    box-shadow: inset 0 0 0 2px #FFFFFF !important; /* inner ring -> filled dot look */
}

/* ----------------------------------------
   12. Red text contrast (WCAG 1.4.3) — ported from ada26-newlook.css. NOT New.css-specific:
   #FF0000 fails AA on plain white too (~4.0:1), so any org whose config-driven message HTML
   or ForeColor="Red" markup renders inline red text has the same failure on this stylesheet's
   masters as on the new-look ones.
   ---------------------------------------- */
.importantInfoBulletsRed { color: #B30000 !important; }

/* Catches inline color:red (any case/spacing), color:#FF0000/#ff0000, and <font color="red">,
   e.g. DB-stored Custom_Payment_Page_Message HTML or ForeColor="red" rendering style="color:Red". */
[style*="color:red"], [style*="color: red"],
[style*="color:Red"], [style*="color: Red"],
[style*="color:#FF0000"], [style*="color: #FF0000"],
[style*="color:#ff0000"], [style*="color: #ff0000"],
font[color="red"], font[color="Red"], font[color="#FF0000"] {
    color: #B30000 !important;
}

/* ----------------------------------------
   13. Receipt (Receipt_ADA26) status text — ported from ada26-newlook.css. The shared
   TransactionTable renders the court-info band on yellow and the "Transaction Processed
   Successfully" band on green with WHITE text; once Receipt_ADA26's JS unwraps those layout
   tables, the bands lose their background and the text goes invisible (white on white). Not
   New.css-specific — any _ADA26 receipt using the shared TransactionTable has this same gap.
   ---------------------------------------- */
[id$="_lblError"], [id$="_lblError"] *,
[id$="_lblCourtInfo"], [id$="_lblCourtInfo"] * {
    color: #223C63 !important;
}
td[bgcolor="#ffffcc"], td[bgcolor="#FFFFCC"] { background-color: #EDF3FC !important; color: #223C63 !important; }

/* ...but the Payment_ADA26 "Processing Error" grid (TransactionTable.ascx's SetError) reuses the
   same lblError for a genuine failed-payment banner, still inside a tr[bgcolor="Red"|"Green"] row.
   The navy-text rule above was written for the receipt's unwrapped (backgroundless) bands and is
   near-invisible there; and the row's own background can't be trusted either -- .tdError's CSS
   background (#E6CDCA) paints over the tr's bgcolor for the failure icon/text cell. Pair an
   explicit, guaranteed-contrast background with the text color instead of assuming either the
   navy rule's target (transparent) or whatever happens to render underneath. */
tr[bgcolor="red" i] [id$="_lblError"] {
    color: #FFFFFF !important;
    background-color: #B30000 !important;
    padding: 2px 8px;
    display: inline-block;
}
tr[bgcolor="green" i] [id$="_lblError"] {
    color: #FFFFFF !important;
    background-color: #1E7B4D !important;
    padding: 2px 8px;
    display: inline-block;
}

/* ----------------------------------------
   14. Responsive / mobile — payment layout (WCAG 1.4.10 Reflow) — ported from
   ada26-newlook.css. Main.css's own Main_MedDisplay.css/Main_SmallDisplay.css only stack
   .halfSection (at a narrower 600px breakpoint); they have no equivalent for DivCont action-bar
   stacking, full-width form fields, or scrolling the citation RadGrid instead of letting it
   overflow. Layered on top of Main's own responsive CSS, not a replacement for it.
   ---------------------------------------- */
@media screen and (max-width: 768px) {
    .entrySection.halfSection,
    .pageSection .halfSection {
        width: 100% !important;
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }

    .DivCont,
    .DivContNoHeight {
        display: block;
    }
    .DivCont > .leftCol,
    .DivCont > .rightCol,
    .DivContNoHeight > .leftCol,
    .DivContNoHeight > .rightCol,
    .headerFootertext .leftCol,
    .headerFootertext .rightCol,
    .courtDetailsSection .leftCol,
    .courtDetailsSection .rightCol {
        width: 100% !important;
        float: none !important;
    }

    .entryValue input, .entryValue select, .entryValue textarea,
    .entryValueCol input, .entryValueCol select, .entryValueCol textarea,
    .entryValue .RadInput, .entryValue .riTextBox {
        width: 100% !important;
        box-sizing: border-box;
    }

    .DivCont > div {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
    .DivCont .button,
    .DivCont input[type="submit"],
    .DivCont input[type="button"] {
        width: 100%;
        margin-top: 10px;
    }

    .contentSection .RadGrid,
    .contentSection .rgMasterTable,
    .SearchTable,
    .SearchTable table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
    }
    /* The transaction card table stays a real table: as display:block its rows shrink to their
       content and the table looks half-width. The RadGrid wrapper above still scrolls if needed. */
    .transactionCardAda .rgMasterTable {
        display: table !important;
    }

    /* Main's small-screen footer columns are width:100% plus padding */
    .footerSection .leftCol,
    .footerSection .rightCol {
        box-sizing: border-box;
    }

    .entrySection {
        box-sizing: border-box;
        padding: 15px !important;
    }
    .pageSection,
    .contentSection,
    .mainSection,
    .entryValue,
    .entryValueCol {
        box-sizing: border-box;
        max-width: 100%;
    }
}