.app-hidden { visibility: hidden; height: 0; overflow: hidden; }

/* Widget page background — white per redesign */
body {
    background-color: #FFFFFF;
}

.mq-meta.show-border {
    border-top: 1px solid #DBD6D3;
}

.flex-row-space-around {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mq-actions .mq-btn-text {
    color: #424242;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all ease-in-out .1s;
}

.mq-actions .mq-btn-text:hover {
    color: #246C7B;
    text-decoration: underline;
}

.luxon-main h2.hide-header {
    display: none;
}

/* Page 11 loader */

#lx-page-loader {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Widget-matching shell for the horse-quick-rater loader only.
   Scoped via :has() so other widgets that reuse #quote-loader keep
   their original transparent background. */
body:has(.horse-quick-rater-root) #quote-loader.page-section {
    background-color: #FFFFFF;
}

#lx-page-loader div {
    display: flex;
    flex-direction: row;
}

#lx-page-loader p {
    margin: 0 10px 0 0;  
    color: #424242;
}
  
.loader-dots {
    margin-top: 9px;
    display: block;
    width: 8px;
    height: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1.2s infinite ease-in-out alternate;
}
@keyframes l5 {
    0%  {box-shadow: 14px 0 rgba(66,66,66,1), -14px 0 rgba(66,66,66,.5);background: rgba(66,66,66,1);  }
    33% {box-shadow: 14px 0 rgba(66,66,66,1), -14px 0 rgba(66,66,66,.5);background: rgba(66,66,66,.5)}
    66% {box-shadow: 14px 0 rgba(66,66,66,.5),-14px 0 rgba(66,66,66,1); background: rgba(66,66,66,.5)}
    100%{box-shadow: 14px 0 rgba(66,66,66,.5),-14px 0 rgba(66,66,66,1) ; background: rgba(66,66,66,1) }
}

/* Select options popup */
.MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected="true"].Mui-focused,
.MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-focused,
.MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected="true"] {
    background-color: #f0f7f8 !important;
}

.MuiAutocomplete-popper .MuiPaper-root.MuiAutocomplete-paper {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Autocomplete options — 44px min tap target for friendlier touch */
.MuiAutocomplete-popper .MuiAutocomplete-option,
.MuiAutocomplete-listbox .MuiAutocomplete-option {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Calendar popup */
.MuiButtonBase-root.MuiRadio-root:hover {
    background-color: rgba(0, 0, 0, .04);
}

.lx-cat-Disclosures .luxon-json-forms div div:nth-last-of-type(3) .luxon-radio-group .luxon-custom-input.custom-radio-group .MuiFormLabel-root {
    font-size: 1rem;
}

/* Never display the View Estimates Luxon screen */
.lx-cat-ViewEstimates,
.lx-cat-ViewEstimates + .luxon-action-btns {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* Hide the "Basic Information" section title.
   Needs !important + padding:0 to override .luxon-main h2 (higher
   specificity) which otherwise leaves a ~96px gap from its padding
   and bottom margin. */
.lx-cat-BasicInformation .MuiTypography-h2 {
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Hide the "Add another horse" toolbar button.
   display:none is required — MuiToolbar's default min-height (56-64px)
   would otherwise leave a visible gap even with height:0. */
.luxon-root.horse-quick-rater-root .MuiToolbar-root {
    display: none !important;
}

@media screen and (min-width: 640px) {
    .MuiTypography-body2 {
        font-size: 1rem;
    }
}

#quote-loader {
    transition: height .1s ease-in-out;
}

#quote-loader.app-hidden {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

/* ==========================================================================
   Equine / Horse Mini Rater — Widget Redesign
   Scoped under .luxon-root.horse-quick-rater-root so nothing else is affected.

   TESTING: To test on a deployed version —
   1. In DevTools, add class "horse-quick-rater-root" to the <section class="luxon-root ..."> element
   2. Paste this entire file into a <style> tag at the top of <body>
   ========================================================================== */


/* ------------------------------------------------------------------
   WIDGET SHELL
   White background replaces the default off-white (#F4F2EB).

   NOTE: Try adjusting border-radius and box-shadow here to control
   how "card-like" the widget feels. Larger radius = softer.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root {
    background-color: #FFFFFF;
    border-radius: 16px;
    max-width: 1140px;
    margin: 2rem auto;
}

/* `overflow: hidden` is only needed on page 1 to clip the full-bleed
   "Start Your Ride" title bar back to the widget edges. On page 2
   (micro-quote), overflow must stay visible — otherwise the
   micro-quote's `.hmr-summary-bar-stuck` (position: sticky) is killed
   because `overflow: hidden` on any ancestor breaks sticky descendants.

   The bundled `_equine.scss` (line 23) ships `overflow: hidden` on
   `.luxon-root.horse-quick-rater-root` unconditionally. That bundle CSS may be
   injected after this file, so `!important` is used here to guarantee
   the reset wins on pages 2 and 3 regardless of cascade order. */
section.luxon-root.horse-quick-rater-root:not(:has(.category-item.active.lx-cat-BasicInformation)) {
    overflow: visible !important;
}
.luxon-root.horse-quick-rater-root:has(.category-item.active.lx-cat-BasicInformation) {
    overflow: hidden;
}

/* Widget title bar — light teal band at the top of the widget, matching
   the section-heading bookend style so it reads as part of the widget
   frame. Injected via ::before so no HTML/React change is needed.

   Scoped with :has(.category-item.active.lx-cat-BasicInformation) so the
   title only shows on the first page (Basic Information). On subsequent
   steps (Venue / Disclosures / Payment) a different .lx-cat-* category
   has the .active class, :has() fails, and the ::before does not render.

   Full-bleed trick: at the lg breakpoint (1058px+), the luxon-form layout
   reshapes into a flex row with a 275px sidebar allotment, which would
   otherwise inset the bar. `width: 100vw; left: 50%; margin-left: -50vw`
   forces the bar to span the viewport; the widget's overflow:hidden
   clips it cleanly at the 960px widget edges. */
.luxon-root.horse-quick-rater-root:has(.category-item.active.lx-cat-BasicInformation)::before {
    content: "Start your ride";
    display: block;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    padding: 1.5rem;
    border-radius: 0;
    color: #424242;
    font-family: 'Markel Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .luxon-root.horse-quick-rater-root:has(.category-item.active.lx-cat-BasicInformation)::before {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 2rem;
    }
}

.luxon-root.horse-quick-rater-root .luxon-form {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 0.75rem;
}

@media (min-width: 768px) {
    .luxon-root.horse-quick-rater-root .luxon-form {
        padding: 0 1.5rem;
    }
}

@media (min-width: 992px) {
    .luxon-root.horse-quick-rater-root .luxon-form {
        padding: 0 2rem;
    }
}


/* ------------------------------------------------------------------
   PAGE / SECTION HEADINGS
   Style guide: Header 4 = 24px/700 for section headings.

   NOTE: Increase font-size or switch to font-weight 400 for a
   lighter, more editorial feel. Try 2.5rem for a bigger hero heading.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-main h2 {
    font-family: 'Markel Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #246C7B;
    text-align: center;
    background-color: #f0f7f8;
    padding: 2rem 1.5rem;
    margin: 0 0 1.5rem;
    border-radius: 2px 2px 0 0;
    position: relative;
}

@media (min-width: 768px) {
    .luxon-root.horse-quick-rater-root .luxon-main h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
}


/* ------------------------------------------------------------------
   CARDS (Horse entry panels, form sections)
   Style guide: 1px #A39990 border, 2px radius, white bg.

   NOTE: Increase border-radius to 8px or 12px for rounded modern cards.
   Add box-shadow on default state for a floating card effect.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .MuiPaper-root.MuiCard-root {
    background-color: #FFFFFF;
    border: 1px solid #DBD6D3;
    border-radius: 2px;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.luxon-root.horse-quick-rater-root .MuiPaper-root.MuiCard-root:hover {
    border-color: #246C7B;
    box-shadow: 0 4px 12px rgba(36, 108, 123, 0.10);
}

.luxon-root.horse-quick-rater-root .MuiPaper-root.MuiCard-root > .MuiCardContent-root .luxon-cell-boolean {
    margin-bottom: 0;
}

.luxon-root.horse-quick-rater-root .MuiPaper-root.MuiCard-root > .MuiCardContent-root > div:last-child {
    margin-bottom: 1.5rem;
}

.luxon-root.horse-quick-rater-root .MuiCardHeader-root {
    padding: 1rem 0 0;
}

.luxon-root.horse-quick-rater-root .MuiCardHeader-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #246C7B;
}


/* ------------------------------------------------------------------
   FORM FIELD LABELS
   Style guide: 14px (0.875rem), weight 400, #424242.

   NOTE: Try weight 700 or bump to 1rem for bolder labels.
   Try color #757575 for a lighter, secondary feel.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputLabel-root,
.luxon-root.horse-quick-rater-root .luxon-form .MuiFormLabel-root {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: #424242;
}

/* Required asterisk — Danger red */
.luxon-root.horse-quick-rater-root .luxon-form .MuiFormLabel-asterisk,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputLabel-asterisk,
.luxon-root.horse-quick-rater-root .luxon-form .luxon-required-asterisk {
    color: #A23434;
    font-weight: 700;
}


/* ------------------------------------------------------------------
   TEXT INPUTS / SELECTS / OUTLINED INPUTS
   Style guide: border #A39990, 2px radius, white bg.
   Focus: 2px solid #424242, outline-offset 3px.

   NOTE: Key modernization knobs:
   - border-radius: try 6px or 8px for modern rounded inputs
   - border-color: #DBD6D3 for even lighter/softer borders
   - Focus outline-offset: 0 for tight focus, 3px for ring effect
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root,
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root {
    border: 1px solid #DBD6D3;
    background-color: #FFFFFF;
    border-radius: 2px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root:hover:not(.Mui-disabled):not(.Mui-error),
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root:hover:not(.Mui-disabled):not(.Mui-error),
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root:hover:not(.Mui-disabled):not(.Mui-error) {
    border-color: #246C7B;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root.Mui-focused,
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root.Mui-focused,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused {
    border: 1px solid #246C7B !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(36, 108, 123, 0.15) !important;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root.Mui-disabled,
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root.Mui-disabled,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled {
    background-color: #F4F2EB;
    border: 1px solid #DBD6D3;
    cursor: not-allowed;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root.Mui-error,
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root.Mui-error,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root.Mui-error {
    border-color: #A23434;
}

/* Input text padding and sizing — 48px min tap target */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-input.MuiInput-input,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-input.MuiOutlinedInput-input {
    padding: 0.875rem 0.875rem;
    font-size: 1rem;
    line-height: 1.375;
    color: #424242;
    min-height: 1.5rem;
    box-sizing: content-box;
}

/* Placeholder text — warm gray to match borders */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-input::placeholder {
    font-family: 'Markel Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    color: #A39990;
    opacity: 1;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-input::-webkit-input-placeholder {
    font-family: 'Markel Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    color: #A39990;
    opacity: 1;
}

/* Disabled input inner */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-input.MuiInput-input.Mui-disabled {
    background-color: #F4F2EB;
    border: none;
    cursor: not-allowed;
}

/* Kill MUI's default notched outline — we use our own border.
   !important needed to beat MUI's focused-state theme color
   (#FF4E00 orange) injected via CSS-in-JS generated classes. */
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-notchedOutline {
    border: 0 !important;
    outline: 0 !important;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border: 0 !important;
    outline: 0 !important;
}


/* ------------------------------------------------------------------
   AUTOCOMPLETE / SELECT DROPDOWN
   Orange chevron indicator per style guide.

   NOTE: Try #A39990 or #424242 for a more subdued chevron.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-form .MuiAutocomplete-endAdornment .MuiAutocomplete-popupIndicator.MuiButtonBase-root.MuiIconButton-root {
    color: #424242;
}

.luxon-root.horse-quick-rater-root .luxon-form .MuiAutocomplete-endAdornment .MuiAutocomplete-popupIndicator.MuiButtonBase-root.MuiIconButton-root.Mui-disabled {
    color: #DBD6D3;
}


/* ------------------------------------------------------------------
   HELPER / ERROR TEXT
   Style guide: Danger-500 #A23434 for errors.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-form .MuiFormHelperText-root.Mui-error {
    color: #A23434;
    font-size: 0.75rem;
    font-weight: 400;
}


/* ------------------------------------------------------------------
   ACCORDION ARRAY (Horse entry panels) — flattened
   The BasicInformation grid below sets display: contents on the
   accordion shell, Card, CardContent, and collapse chain, which strips
   their layout boxes entirely. Only rules that affect text children
   (hiding the "Horse name" heading, hiding the summary row) remain —
   display: contents can't hide descendants, only strip the wrapper.
------------------------------------------------------------------ */

/* Hide "Horse name" group heading inside each panel */
.luxon-root.horse-quick-rater-root .luxon-form .luxon-accordion-array .MuiTypography-h5,
.luxon-root.horse-quick-rater-root .luxon-form .luxon-accordion-array .MuiTypography-h6 {
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Summary row — kills avatar, header text, and expand icon in one go */
.luxon-root.horse-quick-rater-root .lx-generic-accordion-item .MuiAccordionSummary-root,
.luxon-root.horse-quick-rater-root .lx-generic-accordion-item .MuiAccordionSummary-root.Mui-expanded {
    display: none !important;
}


/* ------------------------------------------------------------------
   BUTTONS — PRIMARY CTA (Next, Submit)
   Style guide: #FF4E00 bg, white text, 6px radius, 48px height.

   NOTE: Key knobs:
   - border-radius: 6px slightly rounded, 24px for pill shape
   - height: 48px standard, 52px for larger tappable target
   - Hover: #BF3B00 (Rust), Active: #802700
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-action-btns .MuiButton-root {
    background-color: #BF3B00 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 2px !important;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    height: 48px;
    min-width: 120px;
    padding: 0 2rem;
    box-shadow: 0 2px 6px rgba(191, 59, 0, 0.24);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.luxon-root.horse-quick-rater-root .luxon-action-btns .MuiButton-root:hover {
    background-color: #9C2F00 !important;
    box-shadow: 0 4px 12px rgba(191, 59, 0, 0.32);
    transform: translateY(-1px);
}

.luxon-root.horse-quick-rater-root .luxon-action-btns .MuiButton-root:active {
    background-color: #802700 !important;
    transform: translateY(0);
}

.luxon-root.horse-quick-rater-root .luxon-action-btns .MuiButton-root.Mui-disabled {
    background-color: #DBD6D3 !important;
    color: #A39990 !important;
    box-shadow: none;
    transform: none;
}


/* ------------------------------------------------------------------
   BUTTONS — SECONDARY (+Add Another Horse, Remove Horse)
   Style guide: outlined, #A39990 border, #424242 text, 8px radius.

   NOTE: !important overrides inline styles on components.
   - border-radius: 8px standard, 24px for pill
   - Hover: border darkens, bg fills off-white
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .lx-generic-accordion-item .MuiButton-root.MuiButton-outlined,
.luxon-root.horse-quick-rater-root .MuiToolbar-root .MuiButton-root {
    background: transparent !important;
    color: #424242 !important;
    border: 1px solid #A39990 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    height: 40px;
    padding: 0 1.25rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.luxon-root.horse-quick-rater-root .lx-generic-accordion-item .MuiButton-root.MuiButton-outlined:hover,
.luxon-root.horse-quick-rater-root .MuiToolbar-root .MuiButton-root:hover {
    border-color: #246C7B !important;
    background-color: #f0f7f8 !important;
    color: #246C7B !important;
}


/* ------------------------------------------------------------------
   DIVIDERS / SEPARATORS
   Hide the default hr divider and the .luxon-submit bottom border —
   both render as stray horizontal rules beneath the State field.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-form hr {
    display: none;
}

.luxon-root.horse-quick-rater-root .luxon-form .luxon-submit {
    border-bottom: none;
}

/* ------------------------------------------------------------------
   ACTION BUTTONS FOOTER
   Right-align the Next button inside the widget's content width.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-action-btns {
    margin-top: 1.5rem;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}


/* ------------------------------------------------------------------
   FIELD SPACING
   Controls vertical rhythm between form fields.

   NOTE: 0.75rem for more breathing room, 0.25rem for compact/dense.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-form .MuiGrid-item .MuiFormControl-root {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Grid gutters */
.luxon-root.horse-quick-rater-root .luxon-form .MuiGrid-container > .MuiGrid-item {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


/* ------------------------------------------------------------------
   TOOLTIP ICONS
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .MuiSvgIcon-root.luxon-tooltip-icon {
    color: #A39990;
    font-size: 1.125rem;
}


/* ------------------------------------------------------------------
   SNACKBAR / ALERT
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .MuiSnackbar-root .MuiPaper-root.MuiSnackbarContent-root {
    border-radius: 2px;
}

.luxon-root.horse-quick-rater-root .MuiPaper-root.MuiAlert-root {
    border-radius: 2px;
}


/* ------------------------------------------------------------------
   FOCUS RING — keyboard accessibility
   Teal to match the info-accent system; gray would compete with
   the default border and MUI's orange primary leaks through here.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root *:focus-visible {
    outline: 2px solid #246C7B;
    outline-offset: 2px;
}


/* ------------------------------------------------------------------
   RADIO GROUP — PILL TOGGLES
   Renders JSON-forms radio groups as tile-style pill toggles
   (Mare / Gelding / Stallion-style). Native radio input is visually
   hidden but remains keyboard-accessible and screen-reader-readable.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiRadioGroup-root {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiFormControlLabel-root {
    flex: 1 1 0;
    min-width: 96px;
    min-height: 48px;
    margin: 0;
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #DBD6D3;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiFormControlLabel-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #424242;
    line-height: 1.2;
}

/* Visually hide the native radio but keep it keyboard/SR accessible */
.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiFormControlLabel-root .MuiRadio-root {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiFormControlLabel-root:hover {
    border-color: #246C7B;
    background-color: #f0f7f8;
}

.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiFormControlLabel-root:has(.Mui-checked) {
    background-color: #246C7B;
    border-color: #246C7B;
}

.luxon-root.horse-quick-rater-root .luxon-radio-group .MuiFormControlLabel-root:has(.Mui-checked) .MuiFormControlLabel-label {
    color: #FFFFFF;
}


/* ------------------------------------------------------------------
   BOOKEND FOOTER ZONE
   Teal-tint band framing the disclosures/disclaimer area at the
   bottom of the widget — pairs with the white action zone above.
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .lx-cat-Disclosures {
    background-color: #f0f7f8;
    padding: 2rem 1.5rem;
    margin: 2rem -0.75rem 0;
    border-radius: 0 0 16px 16px;
}

@media (min-width: 768px) {
    .luxon-root.horse-quick-rater-root .lx-cat-Disclosures {
        margin: 2rem -1.5rem 0;
    }
}

@media (min-width: 992px) {
    .luxon-root.horse-quick-rater-root .lx-cat-Disclosures {
        margin: 2rem -2rem 0;
    }
}


/* ------------------------------------------------------------------
   ATTRIBUTE CHIP
   Small informational chip — teal-tint bg with teal text.
   Reusable utility for horse metadata (age, breed, use, state).
------------------------------------------------------------------ */
.luxon-root.horse-quick-rater-root .hmr-attr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background-color: #f0f7f8;
    color: #246C7B;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 3px;
}


/* ------------------------------------------------------------------
   MOUNT ANIMATION
   Subtle slide-up fade-in on cards and accordion items.
   Honors prefers-reduced-motion.
------------------------------------------------------------------ */
@keyframes hmr-fade-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .luxon-root.horse-quick-rater-root .MuiPaper-root.MuiCard-root {
        animation: hmr-fade-in 0.4s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .luxon-root.horse-quick-rater-root .luxon-action-btns .MuiButton-root:hover {
        transform: none;
    }
}


/* ==========================================================================
   BASIC INFORMATION — Unified 2-col grid
   Flattens the accordion + sibling State wrappers so DOB / Gender / Breed /
   Use / Value / State render as three 2-column rows inside one card.

   Strategy: promote the outer column container to `display: grid`, then
   apply `display: contents` to every intermediate wrapper so the field
   leaves (`.MuiGrid-item` holding a datepicker / autocomplete / input)
   bubble up as direct grid cells.
   ========================================================================== */

/* 1. Promote the outer column container to a 2-col CSS grid.
      row-gap is the sole source of vertical spacing between rows;
      inner MuiFormControl margins are zeroed below so the gap is
      consistent across all rows (otherwise datepicker / autocomplete
      intrinsic margins stack unevenly). */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-json-forms .MuiGrid-container.MuiGrid-direction-xs-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.25rem;
    align-items: start;
    grid-auto-rows: min-content;
    flex-direction: unset !important;
    max-width: unset !important;
}

/* Zero out every wrapper margin between the grid item and the input,
   so the label-to-input-to-next-row rhythm is identical across field types
   (datepicker / autocomplete / prefixed / plain input). */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-form .MuiGrid-item .MuiFormControl-root,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-datepicker-input,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-custom-input,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-prefixed-input,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-formatted-inputs,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-date-helper-text {
    margin: 0 !important;
    padding: 0 !important;
}

/* Empty helper <p> collapse to zero. The non-empty ones are already
   absolute-positioned by _general.scss, so they don't occupy flow either. */
.luxon-root.horse-quick-rater-root .luxon-form .MuiFormHelperText-root:empty {
    display: none !important;
}

/* Normalize input height across outlined (DOB/State) and underline
   (autocomplete/value) variants — otherwise DOB's calendar icon and
   State's clear icon stretch their rows taller than autocomplete rows. */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-form .MuiInputBase-root {
    min-height: 48px;
    box-sizing: border-box;
}

/* 2. Flatten every layout wrapper between the grid and the field leaves.
      `:not(.MuiGrid-direction-xs-column)` exempts the top grid itself.
      Card/CardContent included because horse fields live inside a MuiCard
      under the accordion — without flattening those, all 5 fields would
      share one grid cell instead of bubbling up as individual cells. */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiGrid-container:not(.MuiGrid-direction-xs-column),
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-accordion-array,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .lx-generic-accordion-item,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiAccordion-root,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiAccordion-region,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiCollapse-root,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiCollapse-wrapper,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiCollapse-wrapperInner,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiAccordionDetails-root,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiPaper-root.MuiCard-root,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiCardContent-root,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiGrid-item:has(.MuiGrid-container),
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiGrid-item:has(.luxon-accordion-array),
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-accordion-array > div {
    display: contents !important;
}

/* 3. Hide siblings that would otherwise claim grid cells.
      - .lx-accordion-right-panel: empty 64px spacer from the accordion layout
      - .MuiAccordion-heading (h3): its only child .MuiAccordionSummary-root
        is already display:none, but the h3 itself still lays out.
      - Any .MuiGrid-item that survives flattening without a form control
        inside is a phantom spacer (array footer, empty column). Catch-all
        uses :not(:has(...)) to hide only truly empty cells. */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .lx-accordion-right-panel,
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .MuiAccordion-heading {
    display: none !important;
}

.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-json-forms .MuiGrid-item:not(:has(input, select, textarea, [role="combobox"], .MuiInputBase-root, .MuiAutocomplete-root, .luxon-datepicker-input, .luxon-radio-group, .MuiGrid-container, .luxon-accordion-array, .lx-generic-accordion-item, .MuiAccordion-root, .luxon-html)) {
    display: none !important;
}

/* Sitecore HTML Block advisory (e.g. "Specified Perils only" notice for 21+
   horses) — pin it to the empty bottom-right grid cell (row 4, col 2) so
   it doesn't reflow the form. The 7 input fields (Name / DOB / Gender /
   Breed / Use / Value / State) auto-fill cells (1,1)–(4,1); this leaves
   the message in the otherwise-empty (4,2) slot. When the rule hides the
   message, `Hidden` returns null and the phantom-spacer rule above hides
   the empty wrapper, so (4,2) stays empty as it does today. */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-json-forms .MuiGrid-item:has(.luxon-html) {
    grid-column: 2;
    grid-row: 4;
}

/* Style the message like a MUI helper note — small red text, indented to
   align with the input padding. */
.luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-json-forms .luxon-html {
    line-height: 1.66;
    letter-spacing: 0.03333em;
    padding: 14px 14px;
}

/* 4. Collapse to single column on mobile */
@media (max-width: 576px) {
    .luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-json-forms .MuiGrid-container.MuiGrid-direction-xs-column {
        grid-template-columns: 1fr;
    }

    /* In a 1-col layout there is no col 2 — let the message flow in source
       order (it lands right after horseDOB, which is the natural "below DOB"
       position when stacked vertically). */
    .luxon-root.horse-quick-rater-root .lx-cat-BasicInformation .luxon-json-forms .MuiGrid-item:has(.luxon-html) {
        grid-column: auto;
        grid-row: auto;
    }
}


/* ==========================================================================
   INLINE VALIDATION STYLING
   Uses MUI's existing Mui-error class + :has() to tint inputs as they
   transition through error / filled-valid states. CSS-only, no JS.
   ========================================================================== */

/* Error glow — complements the existing red border at .Mui-error */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root.Mui-error,
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root.Mui-error,
.luxon-root.horse-quick-rater-root .luxon-form .MuiInputBase-root.MuiOutlinedInput-root.Mui-error {
    box-shadow: 0 0 0 3px rgba(162, 52, 52, 0.08);
}

/* Filled + valid → teal tint (teal = informational accent per style guide) */
.luxon-root.horse-quick-rater-root .luxon-form .MuiInput-root:not(.Mui-error):not(.Mui-focused):has(input:not([value=""]):not(:placeholder-shown)),
.luxon-root.horse-quick-rater-root .luxon-form .MuiOutlinedInput-root:not(.Mui-error):not(.Mui-focused):has(input:not([value=""]):not(:placeholder-shown)) {
    border-color: #246C7B;
}


/* ==========================================================================
   DATE PICKER CALENDAR — override MUI's primary-theme orange on day cells
   with the widget's teal palette. The calendar popup renders via MUI Portal
   at the document body (outside .luxon-root), so selectors target the
   MuiPickersDay classes globally — safe because this CSS file is only
   injected on the equine widget page.
   ========================================================================== */

/* Day cell hover — light teal bookend tint, teal text */
.MuiPickersDay-root:hover,
.MuiPickersDay-root:focus {
    background-color: #f0f7f8 !important;
    color: #246C7B !important;
}

/* Selected day — solid teal fill, white text */
.MuiPickersDay-root.Mui-selected,
.MuiPickersDay-root.Mui-selected:hover,
.MuiPickersDay-root.Mui-selected:focus {
    background-color: #246C7B !important;
    color: #ffffff !important;
}

/* Today (un-selected) — subtle teal ring so it's obvious without orange */
.MuiPickersDay-root.MuiPickersDay-today:not(.Mui-selected) {
    border-color: #246C7B !important;
    color: #246C7B !important;
}


/* ==========================================================================
   PAGE 3 — ESTIMATE RESULTS
   Reuses the widget-shell conventions from the Luxon equine redesign:
   teal #f0f7f8 bookend bands, 2px sharp corners, #424242 dark CTAs,
   #246C7B teal for info accents.
   ========================================================================== */

#estimate-results-root .estimate-results {
    max-width: 1140px;
    margin: 2rem auto;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    color: #424242;
    font-family: 'Markel Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.estimate-bookend {
    background: #FFFFFF;
    padding: 1.5rem 2rem;
}

.estimate-bookend-bottom {
    border-top: 1px solid #DBD6D3;
}

.estimate-intro {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #424242;
}

.estimate-intro:last-child { margin-bottom: 0; }

.estimate-hero {
    padding: 2rem;
}

.estimate-title {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1rem 0;
    color: #424242;
}

@media (min-width: 768px) {
    .estimate-title {
        font-size: 2rem;
    }
}

.estimate-premium {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0 0 1.25rem 0;
    color: #424242;
}

.estimate-premium strong {
    font-weight: 700;
    color: #BF3B00;
}

.estimate-paragraph {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #424242;
}

.estimate-ctas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 2rem 2rem 2rem;
}

@media (min-width: 768px) {
    .estimate-ctas {
        grid-template-columns: 1fr 1fr;
    }
}

.estimate-cta-card {
    background: #F8F7F3;
    border: 1px solid #A39990;
    border-radius: 2px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.estimate-cta-heading {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375;
    margin: 0;
    color: #424242;
}

.estimate-cta-phone {
    margin: 0;
    font-size: 1rem;
}

.estimate-cta-phone a {
    color: #BF3B00;
    font-weight: 400;
    text-decoration: underline;
}

.estimate-cta-phone a:hover {
    color: #9C2F00;
    text-decoration: underline;
}

.estimate-btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    height: 48px;
    padding: 0 1.5rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    align-self: flex-start;
    min-width: 200px;
    /* Pin to bottom of card so the two CTAs align on the same row even
       when card body content has different heights (cards stretch to
       equal height inside the .estimate-ctas grid). */
    margin-top: auto;
}

.estimate-btn-primary {
    background: #BF3B00;
    color: #FFFFFF;
    border: 2px solid #BF3B00;
    box-shadow: 0 2px 6px rgba(191, 59, 0, 0.24);
}

.estimate-btn-primary:hover:not(:disabled) {
    background: #9C2F00;
    border-color: #9C2F00;
    box-shadow: 0 4px 12px rgba(191, 59, 0, 0.32);
}

.estimate-btn-primary:disabled {
    background: #DBD6D3;
    border-color: #DBD6D3;
    color: #A39990;
    cursor: not-allowed;
    box-shadow: none;
}

.estimate-btn-secondary {
    background: #BF3B00;
    color: #FFFFFF;
    border: 2px solid #BF3B00;
    box-shadow: 0 2px 6px rgba(191, 59, 0, 0.24);
}

.estimate-btn-secondary:hover:not(:disabled) {
    background: #9C2F00;
    border-color: #9C2F00;
    box-shadow: 0 4px 12px rgba(191, 59, 0, 0.32);
}

.estimate-btn-text {
    background: transparent;
    border: none;
    color: #424242;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
}

.estimate-btn-text:hover {
    color: #246C7B;
    text-decoration: underline;
}

/* Embedded inside .estimate-cta-card — no own background or border so it
   reads as a continuation of the card. */
.estimate-email-form {
    padding: 0;
    background: transparent;
    border-top: none;
}

.estimate-email-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #424242;
}

.estimate-email-input {
    width: 100%;
    max-width: 400px;
    padding: 0.875rem;
    font-size: 1rem;
    border: 1px solid #DBD6D3;
    border-radius: 2px;
    background: #FFFFFF;
    color: #424242;
    font-family: inherit;
    min-height: 48px;
    box-sizing: border-box;
}

.estimate-email-input:focus {
    outline: none;
    border-color: #246C7B;
    box-shadow: 0 0 0 3px rgba(36, 108, 123, 0.15);
}

.estimate-email-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.estimate-status {
    padding: 0 2rem;
    min-height: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #424242;
}

.estimate-status-success {
    color: #BF3B00;
    font-weight: 700;
}

.estimate-status-error {
    color: #A23434;
    font-weight: 700;
}

.estimate-disclaimer {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #424242;
}