/* SunFire Owner's Garage — registration form (Fluent Forms form 12).
   Fluent Forms' default accent is blue (#1a7efb) on checked radios/checkboxes, focus rings,
   the flatpickr date picker and the intl-tel-input dropdown. Recolor to SunFire red. */
:root{--og-red:#ad172b;--og-red-soft:rgba(173,23,43,.18)}
/* Fluent Forms derives its blue from this variable (focus borders, active states, step nav) - point it at SunFire red for this form */
.fluentform .fluent_form_12,.fluent_form_12,.ff-default .fluent_form_12{--fluentform-primary:#ad172b}

/* Radios + checkboxes */
.fluent_form_12 .ff-el-form-check-input{accent-color:var(--og-red)}
.fluent_form_12 .ff-el-form-check-input:checked,
.fluent_form_12 .ff-el-form-check-input:checked:focus,
.fluent_form_12 .ff-el-form-check-input:checked:hover{background-color:var(--og-red)!important;border-color:var(--og-red)!important}
.fluent_form_12 .ff-el-form-check-input:focus,
.fluent_form_12 .ff-el-form-check-input:focus-visible{border-color:var(--og-red)!important;box-shadow:0 0 0 3px var(--og-red-soft)!important;outline:none!important}

/* Text inputs, selects, textareas */
.fluent_form_12 .ff-el-form-control:focus,
.fluent_form_12 .ff-el-form-control:focus-visible,
.fluent_form_12 select.ff-el-form-control:focus,
.fluent_form_12 .ff-el-input--content .iti input:focus{border-color:var(--og-red)!important;box-shadow:0 0 0 3px var(--og-red-soft)!important;outline:none!important}
.fluent_form_12 .ff-el-form-control::selection{background:var(--og-red-soft)}

/* Links + buttons inside the form */
.fluent_form_12 a,.fluent_form_12 a:hover,.fluent_form_12 a:focus{color:var(--og-red)}
.fluent_form_12 .ff-btn-submit:focus,.fluent_form_12 .ff-btn-submit:focus-visible,
.fluent_form_12 .ff-btn:focus{box-shadow:0 0 0 3px var(--og-red-soft)!important;outline:none!important}
.fluent_form_12 .ff-el-progress-bar,.fluent_form_12 .ff-el-progress-status{background:var(--og-red)!important}
.fluent_form_12 .ff-step-header .ff-el-progress-status{color:#fff}

/* Date picker (flatpickr, appended to <body>) */
.flatpickr-calendar .flatpickr-day.selected,.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange,.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected.inRange{background:var(--og-red)!important;border-color:var(--og-red)!important;color:#fff!important}
.flatpickr-calendar .flatpickr-day.today{border-color:var(--og-red)}
.flatpickr-calendar .flatpickr-day.today:hover{background:var(--og-red-soft);border-color:var(--og-red);color:#111}
.flatpickr-calendar .flatpickr-day:hover,.flatpickr-calendar .flatpickr-day:focus{background:#f4e6e8;border-color:#f4e6e8}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg{fill:var(--og-red)}
.flatpickr-calendar .flatpickr-monthDropdown-months:focus,.flatpickr-calendar .numInput:focus{outline-color:var(--og-red)}

/* Phone country dropdown (intl-tel-input) */
.iti__country-list .iti__country.iti__highlight,.iti__country-list .iti__country:hover{background:#f4e6e8}
.iti--container .iti__search-input:focus{outline:none;border-color:var(--og-red);box-shadow:0 0 0 3px var(--og-red-soft)}
.fluent_form_12 .iti__selected-country:focus,.fluent_form_12 .iti__selected-country:hover{background:#f4e6e8;outline:none}

/* Alignment: a site-wide inline rule caps every Fluent input at max-width 88% (added for the review form, form 24,
   but written against the generic .ff-default .ff-el-form-control). Inside half-width name cells and the SF
   input-group that 88% is measured against a different box, so those rows overshoot the other fields' right edge.
   For this form the controls fill their containers, and the whole form is capped instead. */
.fluent_form_12 .ff-el-form-control,
.fluent_form_12 .ff-el-form-control.ff-el-datepicker,
.fluent_form_12 select.ff-el-form-control{max-width:100%!important;width:100%!important}
.fluent_form_12 .ff_input-group{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;width:100%}
.fluent_form_12 .ff_input-group .ff_input-group-prepend,.fluent_form_12 .ff_input-group .ff_input-group-append{display:flex;flex:0 0 auto}
.fluent_form_12 .ff_input-group .ff-el-form-control{flex:1 1 auto;width:1%!important;min-width:0}
.fluent_form_12 .ff-t-container{width:100%}
.fluent_form_12 .ff-t-cell{min-width:0}
form.fluent_form_12{max-width:88%}
@media (max-width:768px){form.fluent_form_12{max-width:100%}}