/* =====================================================================
   LAYOUT & LABELS (1.6.0)
   Gravity Forms Modern Stylizer

   Loaded after the theme stylesheet and the Portal Refresh, so these
   rules win. Every rule is keyed to a marker class that
   includes/layout.php adds to the field, so switching a feature off in
   Settings > GF Modern Stylizer removes it completely:

     .gfms-half      two short fields share a row (wide forms only)
     .gfms-pill      field label inside a pill
     .gfms-choices   checkbox / radio choices as a grid of cards
     .gfms-cols-N    maximum choice columns for that field

   Colour tokens (--gfms-pill-*, --gfms-choice-*, --gfms-tick*) are
   printed per theme by the plugin right after this file. The values
   below are the Light-theme fallbacks.
   ===================================================================== */

:root {
    --gfms-pill-bg:        #eff6ff;
    --gfms-pill-border:    #bfdbfe;
    --gfms-pill-text:      #1e3a8a;
    --gfms-choice-bg:      #ffffff;
    --gfms-choice-border:  #dbe3ee;
    --gfms-choice-hover:   #93c5fd;
    --gfms-choice-on-bg:   #eff6ff;
    --gfms-choice-on-line: #2563eb;
    --gfms-choice-ring:    rgba(37,99,235,.12);
    --gfms-choice-text:    #1e293b;
    --gfms-tick:           #2563eb;
    --gfms-tick-line:      #94a3b8;
    --gfms-choice-gap:     10px;
}

/* ---------------------------------------------------------------------
   1. Two short fields per row on wide forms
   The breakpoint is the width of the FORM, not the screen: a form in a
   narrow column or sidebar stays single column on a big monitor, and
   every form is single column on a phone. assets/js/layout.js measures
   each form and adds .gfms-wide once it is at least 600px wide (and
   removes it when it shrinks). Without JavaScript forms stay single
   column.

   1.7.1: this used to be a CSS container query (container-type on
   .gform_body). Inline-size containment makes the browser size the form
   as if it had no width while working out the height of a flex item, so
   inside Elementor flex containers on phones the form's widget grew
   thousands of pixels taller than the form: a huge blank gap below it.

   Works with both Gravity Forms markups. Legacy markup (ul/li, which
   most of the fleet uses) is a plain block list, so a field list that
   holds paired fields is turned into a 12-column grid here, and any
   column classes already on its fields are mapped onto that grid.
   --------------------------------------------------------------------- */
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) {
    display:               grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap:            24px !important;
    align-items:           start;
}

/* everything full row unless told otherwise */
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > * {
    grid-column: 1 / -1;
    min-width:   0;
}

/* column widths set in the form editor (modern markup) */
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-eleven-twelfths { grid-column: span 11; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-five-sixths     { grid-column: span 10; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-three-quarter   { grid-column: span 9; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-two-thirds      { grid-column: span 8; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-seven-twelfths  { grid-column: span 7; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-half            { grid-column: span 6; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-five-twelfths   { grid-column: span 5; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-third           { grid-column: span 4; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-quarter         { grid-column: span 3; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-sixth           { grid-column: span 2; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gfield--width-twelfth         { grid-column: span 1; }

/* legacy "CSS ready" classes */
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :is(.gf_left_half, .gf_right_half),
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :is(.gf_left_third, .gf_middle_third, .gf_right_third),
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :is(.gf_first_quarter, .gf_second_quarter, .gf_third_quarter, .gf_fourth_quarter) {
    width:        auto !important;
    float:        none !important;
    padding-right: 0 !important;
}
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :is(.gf_left_half, .gf_right_half) { grid-column: span 6; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :is(.gf_left_third, .gf_middle_third, .gf_right_third) { grid-column: span 4; }
html body .gform_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :is(.gf_first_quarter, .gf_second_quarter, .gf_third_quarter, .gf_fourth_quarter) { grid-column: span 3; }

/* Legacy markup: block margins collapsed before; grid margins don't.
   Keep the same rhythm (field margin-bottom only, sections 36px). */
html body .gform_wrapper.gform_legacy_markup_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > :not(.gsection) {
    margin-top: 0 !important;
}
html body .gform_wrapper.gform_legacy_markup_wrapper.gfms-wide .gform_body .gform_fields:has(> .gfield.gfms-half) > .gsection {
    margin-top: 16px !important;
}

/* the pairs */
html body .gform_wrapper.gfms-wide .gform_body .gform_fields > .gfield.gfms-half {
    grid-column: span 6 !important;
    width:       auto !important;
    max-width:   none !important;
    float:       none !important;
}

/* ---------------------------------------------------------------------
   2. Field labels in a pill
   Left / right label placement and hidden labels are left alone.
   --------------------------------------------------------------------- */
html body .gform_wrapper .gform_body .gform_fields:not(.left_label):not(.right_label) > .gfield.gfms-pill:not(.hidden_label):not(.gfield--label-hidden) > .gfield_label.gfield_label:not(.screen-reader-text):not(.gform-visually-hidden) {
    display:        inline-block !important;
    float:          none !important;
    width:          auto !important;
    max-width:      100% !important;
    box-sizing:     border-box !important;
    padding:        6px 14px !important;
    margin-left:    0 !important;
    margin-right:   0 !important;
    margin-bottom:  10px !important;
    background:     var(--gfms-pill-bg) !important;
    border:         1px solid var(--gfms-pill-border) !important;
    border-radius:  18px !important;
    color:          var(--gfms-pill-text) !important;
    font-size:      14px !important;
    font-weight:    600 !important;
    line-height:    1.35 !important;
    letter-spacing: .005em !important;
    text-transform: none !important;
}

/* the required marker sits inside the pill; keep it tidy */
html body .gform_wrapper .gform_fields > .gfield.gfms-pill > .gfield_label .gfield_required {
    margin-left: 4px !important;
}

/* ---------------------------------------------------------------------
   3. Checkbox / radio choices as a grid of cards
   --------------------------------------------------------------------- */
html body .gform_wrapper .gfield.gfms-cols-1 { --gfms-cols: 1; }
html body .gform_wrapper .gfield.gfms-cols-2 { --gfms-cols: 2; }
html body .gform_wrapper .gfield.gfms-cols-3 { --gfms-cols: 3; }
html body .gform_wrapper .gfield.gfms-cols-4 { --gfms-cols: 4; }

/* The grid: up to --gfms-cols columns, never narrower than 220px, so it
   drops to fewer columns (and to one on a phone) on its own. */
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox,
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, calc((100% - (var(--gfms-cols, 2) - 1) * var(--gfms-choice-gap)) / var(--gfms-cols, 2) - 1px))), 1fr)) !important;
    gap:                   var(--gfms-choice-gap) !important;
    flex-direction:        initial !important;
    align-items:           stretch !important;
    width:                 100% !important;
    padding:               0 !important;
    margin:                0 !important;
    list-style:            none !important;
}

/* each choice is a card */
html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li) {
    position:      relative !important;
    display:       flex !important;
    flex-wrap:     wrap !important;
    align-items:   flex-start !important;
    gap:           0 12px !important;
    width:         auto !important;
    min-width:     0 !important;
    max-width:     none !important;
    box-sizing:    border-box !important;
    margin:        0 !important;
    padding:       0 0 0 14px !important;
    background:    var(--gfms-choice-bg) !important;
    border:        1.5px solid var(--gfms-choice-border) !important;
    border-radius: var(--gfms-radius, 12px) !important;
    box-shadow:    none !important;
    cursor:        pointer !important;
    transition:    border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li):hover {
    border-color: var(--gfms-choice-hover) !important;
}

/* selected */
html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li):has(> input:checked) {
    border-color: var(--gfms-choice-on-line) !important;
    background:   var(--gfms-choice-on-bg) !important;
    box-shadow:   inset 0 0 0 1px var(--gfms-choice-on-line) !important;
}

/* the label fills the card, so the whole card is clickable */
html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li) > label {
    display:      block !important;
    flex:         1 1 0 !important;
    min-width:    0 !important;
    max-width:    none !important;
    margin:       0 !important;
    padding:      12px 14px 12px 0 !important;
    font-size:    15px !important;
    font-weight:  500 !important;
    line-height:  1.45 !important;
    color:        var(--gfms-choice-text) !important;
    cursor:       pointer !important;
    overflow-wrap: anywhere;
}

/* --- the tick boxes --- */
html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li) > input:is([type="checkbox"], [type="radio"]) {
    -webkit-appearance: none !important;
    appearance:         none !important;
    position:           relative !important;
    flex:               0 0 20px !important;
    width:              20px !important;
    min-width:          20px !important;
    height:             20px !important;
    margin:             13px 0 0 !important;
    padding:            0 !important;
    background:         var(--gfms-choice-bg) !important;
    border:             1.5px solid var(--gfms-tick-line) !important;
    box-shadow:         none !important;
    cursor:             pointer !important;
    transition:         background-color .15s ease, border-color .15s ease !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(.gchoice, li) > input[type="checkbox"] {
    border-radius: 6px !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(.gchoice, li) > input[type="checkbox"]::before,
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(.gchoice, li) > input[type="checkbox"]::after,
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(.gchoice, li) > input[type="checkbox"]:checked::before,
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(.gchoice, li) > input[type="checkbox"]:checked::after {
    content: none !important;
    display: none !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(.gchoice, li) > input[type="checkbox"]:checked {
    background-color:    var(--gfms-tick) !important;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;
    background-size:     14px 14px !important;
    border-color:        var(--gfms-tick) !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio > :is(.gchoice, li) > input[type="radio"] {
    border-radius: 50% !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio > :is(.gchoice, li) > input[type="radio"]::after {
    content:       '' !important;
    display:       block !important;
    position:      absolute !important;
    top:           50% !important;
    left:          50% !important;
    width:         10px !important;
    height:        10px !important;
    border-radius: 50% !important;
    background:    var(--gfms-tick) !important;
    box-shadow:    none !important;
    transform:     translate(-50%, -50%) scale(0) !important;
    transition:    transform .15s ease !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio > :is(.gchoice, li) > input[type="radio"]:checked {
    border-color: var(--gfms-tick) !important;
    background:   var(--gfms-choice-bg) !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio > :is(.gchoice, li) > input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1) !important;
}

html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li) > input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline:        2px solid var(--gfms-choice-on-line) !important;
    outline-offset: 2px !important;
}

/* "Other" choice: its text box drops under the label, inside the card */
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio > :is(.gchoice, li) > input[type="text"] {
    flex:       1 1 100% !important;
    width:      auto !important;
    min-width:  0 !important;
    margin:     0 14px 12px 32px !important;
}

/* "Select All" button spans the grid, sits left */
html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_checkbox > :is(button, .gchoice_select_all, li.gchoice_select_all) {
    grid-column:  1 / -1 !important;
    justify-self: start !important;
}

/* ---------------------------------------------------------------------
   4. Phones
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
    html body .gform_wrapper .gform_body .gform_fields:not(.left_label):not(.right_label) > .gfield.gfms-pill:not(.hidden_label):not(.gfield--label-hidden) > .gfield_label.gfield_label:not(.screen-reader-text):not(.gform-visually-hidden) {
        padding:   5px 12px !important;
        font-size: 13.5px !important;
    }
    html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li) > label {
        font-size: 14.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li),
    html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li) > input,
    html body .gform_wrapper .gform_fields .gfield.gfms-choices .gfield_radio > :is(.gchoice, li) > input[type="radio"]::after {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
   5. Keyboard focus (1.7.0)
   A clear ring on whatever has keyboard focus. Mouse clicks don't show
   it (:focus-visible), keyboard and switch users always do.
   --------------------------------------------------------------------- */
html body .gform_wrapper :is(input[type="submit"], input[type="button"], input[type="reset"], button, .gform_button, .gform_next_button, .gform_previous_button, .gform_save_link, a):focus-visible {
    outline:        3px solid var(--gfms-choice-on-line) !important;
    outline-offset: 3px !important;
}

html body .gform_wrapper :is(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline:        2px solid var(--gfms-choice-on-line) !important;
    outline-offset: 2px !important;
}

/* choice cards: the whole card lights up while its box has focus */
html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li):has(> input:focus-visible) {
    border-color: var(--gfms-choice-on-line) !important;
    box-shadow:   0 0 0 3px var(--gfms-choice-ring) !important;
}
html body .gform_wrapper .gform_fields .gfield.gfms-choices :is(.gfield_checkbox, .gfield_radio) > :is(.gchoice, li):has(> input:checked:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--gfms-choice-on-line), 0 0 0 3px var(--gfms-choice-ring) !important;
}