/* =============================================================
   Gravity Forms Modern Stylizer — Light Theme
   Clean whites · Bold blue accents · Light grey background
   ============================================================= */

/* ── CSS Custom Properties (scoped to the wrapper) ─────────── */
:root {
    --gfms-primary:        #2563eb;
    --gfms-primary-dark:   #1d4ed8;
    --gfms-primary-light:  #dbeafe;
    --gfms-accent:         #1d4ed8;
    --gfms-bg:             #f1f3f5;
    --gfms-form-bg:        #ffffff;
    --gfms-border:         #e2e8f0;
    --gfms-input-border:   #d1d5db;
    --gfms-text:           #1e293b;
    --gfms-text-muted:     #64748b;
    --gfms-text-ph:        #a0aec0;
    --gfms-error:          #ef4444;
    --gfms-success:        #22c55e;
    --gfms-radius:         12px;
    --gfms-radius-lg:      20px;
    --gfms-shadow:         0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04);
    --gfms-shadow-focus:   0 0 0 3px rgba(37,99,235,.2);
    --gfms-ease:           0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────────── */
html body .gform_wrapper,
html body div.gform_wrapper {
    background:    transparent !important;
    padding:       32px !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    border:        none !important;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif !important;
}

/* ── Form Title & Description ────────────────────────────────── */
html body .gform_wrapper .gform_title,
html body .gform_wrapper h3.gform_title {
    font-size:      1.5rem !important;
    font-weight:    700 !important;
    color:          var(--gfms-text) !important;
    letter-spacing: -0.02em !important;
    margin-bottom:  6px !important;
    line-height:    1.3 !important;
}

html body .gform_wrapper .gform_description {
    color:         var(--gfms-text-muted) !important;
    font-size:     0.9rem !important;
    margin-bottom: 28px !important;
    line-height:   1.55 !important;
}

/* ── Section Titles (gsection h2) ───────────────────────────── */
html body .gform_wrapper .gsection .gsection_title,
html body .gform_wrapper .gsection h2.gsection_title,
html body .gform_wrapper h2.gsection_title {
    font-size:      22px !important;
    font-weight:    700 !important;
    color:          var(--gfms-text) !important;
    letter-spacing: -0.01em !important;
    margin-bottom:  4px !important;
    line-height:    1.3 !important;
}

/* ── Field Descriptions (helpful/instructional text) ─────────── */
html body .gform_wrapper .gfield .gfield_description,
html body .gform_wrapper .gfield_description,
html body div.gform_wrapper .gfield .gfield_description {
    font-size:   14px !important;
    font-weight: 400 !important;
    color:       var(--gfms-text-muted) !important;
    line-height: 1.5 !important;
    margin-top:  6px !important;
}

/* ── Fields List ─────────────────────────────────────────────── */
html body .gform_wrapper ul.gform_fields,
html body .gform_wrapper .gfields {
    padding:    0 !important;
    margin:     0 !important;
    list-style: none !important;
}

/* ── Individual Field ────────────────────────────────────────── */
html body .gform_wrapper .gfield {
    margin-bottom: 20px !important;
    padding:       0 !important;
}

/* ── Field Labels ────────────────────────────────────────────── */
html body .gform_wrapper label.gfield_label,
html body .gform_wrapper .gfield_label {
    font-weight:    700 !important;
    font-size:      17px !important;
    color:          var(--gfms-text) !important;
    margin-bottom:  8px !important;
    display:        block !important;
    letter-spacing: -0.01em !important;
}

html body .gform_wrapper .gfield_required,
html body .gform_wrapper .gfield_required_text {
    color:       var(--gfms-error) !important;
    margin-left: 3px !important;
}

/* ── Text / Email / Phone / URL / Password Inputs ───────────── */
html body .gform_wrapper input[type="text"],
html body .gform_wrapper input[type="email"],
html body .gform_wrapper input[type="tel"],
html body .gform_wrapper input[type="number"],
html body .gform_wrapper input[type="url"],
html body .gform_wrapper input[type="password"],
html body .gform_wrapper input[type="search"],
html body .gform_wrapper textarea,
html body .gform_wrapper select {
    -webkit-appearance: none !important;
    appearance:         none !important;
    background:         var(--gfms-form-bg) !important;
    border:             1.5px solid var(--gfms-input-border) !important;
    border-radius:      var(--gfms-radius) !important;
    padding:            13px 16px !important;
    font-size:          16px !important;
    color:              var(--gfms-text) !important;
    width:              100% !important;
    box-sizing:         border-box !important;
    box-shadow:         var(--gfms-shadow) !important;
    transition:         border-color var(--gfms-ease),
                        box-shadow var(--gfms-ease) !important;
    outline:            none !important;
    line-height:        1.5 !important;
}

html body .gform_wrapper input[type="text"]:focus,
html body .gform_wrapper input[type="email"]:focus,
html body .gform_wrapper input[type="tel"]:focus,
html body .gform_wrapper input[type="number"]:focus,
html body .gform_wrapper input[type="url"]:focus,
html body .gform_wrapper input[type="password"]:focus,
html body .gform_wrapper textarea:focus,
html body .gform_wrapper select:focus {
    border-color: var(--gfms-primary) !important;
    box-shadow:   var(--gfms-shadow), var(--gfms-shadow-focus) !important;
}

html body .gform_wrapper input::placeholder,
html body .gform_wrapper textarea::placeholder {
    color: var(--gfms-text-ph) !important;
}

/* Textarea */
html body .gform_wrapper textarea {
    min-height: 120px !important;
    resize:     vertical !important;
}

/* Select — custom arrow + line-height fix (browsers ignore line-height on select) */
html body .gform_wrapper select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 14px center !important;
    padding-right:       40px !important;
    cursor:              pointer !important;
    line-height:         normal !important;
    height:              auto !important;
    min-height:          50px !important;
}

/* ── Toggle-style Checkboxes ─────────────────────────────────── */
html body .gform_wrapper .gfield_checkbox,
html body .gform_wrapper ul.gfield_checkbox {
    list-style:     none !important;
    padding:        0 !important;
    margin:         0 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
}

html body .gform_wrapper .gfield_checkbox li,
html body .gform_wrapper ul.gfield_checkbox li {
    background:  var(--gfms-form-bg) !important;
    border:      1.5px solid var(--gfms-border) !important;
    border-radius: var(--gfms-radius) !important;
    padding:     13px 16px !important;
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    cursor:      pointer !important;
    transition:  border-color var(--gfms-ease),
                 background var(--gfms-ease),
                 box-shadow var(--gfms-ease) !important;
    box-shadow:  var(--gfms-shadow) !important;
}

/* Highlight row when checked — modern :has() with fallback graceful degradation */
html body .gform_wrapper .gfield_checkbox li:has(input:checked),
html body .gform_wrapper ul.gfield_checkbox li:has(input:checked) {
    border-color: var(--gfms-primary) !important;
    background:   var(--gfms-primary-light) !important;
}

/* Kill any checkmark/arrow injected by themes or GF default stylesheet */
html body .gform_wrapper .gfield_checkbox input[type="checkbox"]::before,
html body .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked::before {
    content:    none !important;
    display:    none !important;
    background: none !important;
}

/* The toggle pill itself */
html body .gform_wrapper .gfield_checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance:         none !important;
    width:              50px !important;
    min-width:          50px !important;
    height:             28px !important;
    background:         #cbd5e1 !important;
    border:             none !important;
    border-radius:      14px !important;
    position:           relative !important;
    cursor:             pointer !important;
    transition:         background var(--gfms-ease) !important;
    box-shadow:         none !important;
    padding:            0 !important;
    flex-shrink:        0 !important;
    outline-offset:     3px !important;
}

html body .gform_wrapper .gfield_checkbox input[type="checkbox"]::after {
    content:       '' !important;
    position:      absolute !important;
    top:           4px !important;
    left:          4px !important;
    width:         20px !important;
    height:        20px !important;
    border-radius: 50% !important;
    background:    #ffffff !important;
    box-shadow:    0 1px 4px rgba(0,0,0,.22) !important;
    transition:    transform var(--gfms-ease) !important;
}

html body .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked {
    background: var(--gfms-primary) !important;
}

html body .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked::after {
    content:          '' !important;
    background-image: none !important;
    transform:        translateX(22px) !important;
}

/* Checkbox label text */
html body .gform_wrapper .gfield_checkbox li label,
html body .gform_wrapper ul.gfield_checkbox li label {
    font-size:   15px !important;
    font-weight: 500 !important;
    color:       var(--gfms-text) !important;
    cursor:      pointer !important;
    flex:        1 !important;
    margin:      0 !important;
}

/* ── Modern Radio Buttons ────────────────────────────────────── */

/*
 * Suppress Gravity Forms Orbital / theme-framework custom radio indicator.
 * GF 2.5+ injects its own circle via label::before on .gform-field-label--type-inline.
 * Without this, forms using GF's built-in theme show TWO circles side-by-side.
 */
html body .gform_wrapper .gfield_radio .gform-field-label--type-inline::before,
html body .gform_wrapper .gfield_radio .gform-field-label--type-inline::after,
html body .gform_wrapper .gfield_radio .gchoice label::before,
html body .gform_wrapper .gfield_radio .gchoice label::after,
html body .gform_wrapper ul.gfield_radio li label::before,
html body .gform_wrapper ul.gfield_radio li label::after {
    display:  none !important;
    content:  none !important;
    width:    0 !important;
    height:   0 !important;
    position: static !important;
}

html body .gform_wrapper .gfield_radio,
html body .gform_wrapper ul.gfield_radio {
    list-style:     none !important;
    padding:        0 !important;
    margin:         0 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
}

html body .gform_wrapper .gfield_radio li,
html body .gform_wrapper ul.gfield_radio li,
html body .gform_wrapper .gfield_radio .gchoice {
    background:    var(--gfms-form-bg) !important;
    border:        1.5px solid var(--gfms-border) !important;
    border-radius: var(--gfms-radius) !important;
    padding:       13px 16px !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           14px !important;
    cursor:        pointer !important;
    transition:    border-color var(--gfms-ease),
                   box-shadow var(--gfms-ease) !important;
    box-shadow:    var(--gfms-shadow) !important;
}

html body .gform_wrapper .gfield_radio li:has(input:checked),
html body .gform_wrapper ul.gfield_radio li:has(input:checked),
html body .gform_wrapper .gfield_radio .gchoice:has(input:checked) {
    border-color: var(--gfms-primary) !important;
    background:   var(--gfms-primary-light) !important;
}

/* Radio input */
html body .gform_wrapper .gfield_radio input[type="radio"] {
    -webkit-appearance: none !important;
    appearance:         none !important;
    width:              22px !important;
    min-width:          22px !important;
    height:             22px !important;
    border:             2px solid var(--gfms-input-border) !important;
    border-radius:      50% !important;
    position:           relative !important;
    cursor:             pointer !important;
    transition:         border-color var(--gfms-ease) !important;
    box-shadow:         none !important;
    padding:            0 !important;
    background:         var(--gfms-form-bg) !important;
    flex-shrink:        0 !important;
    outline-offset:     3px !important;
}

html body .gform_wrapper .gfield_radio input[type="radio"]::after {
    content:       '' !important;
    position:      absolute !important;
    top:           50% !important;
    left:          50% !important;
    width:         10px !important;
    height:        10px !important;
    border-radius: 50% !important;
    background:    var(--gfms-primary) !important;
    transform:     translate(-50%,-50%) scale(0) !important;
    transition:    transform var(--gfms-ease) !important;
}

html body .gform_wrapper .gfield_radio input[type="radio"]:checked {
    border-color: var(--gfms-primary) !important;
}

html body .gform_wrapper .gfield_radio input[type="radio"]:checked::after {
    transform: translate(-50%,-50%) scale(1) !important;
}

/* Radio label */
html body .gform_wrapper .gfield_radio li label,
html body .gform_wrapper ul.gfield_radio li label,
html body .gform_wrapper .gfield_radio .gchoice label {
    font-size:      15px !important;
    font-weight:    500 !important;
    color:          var(--gfms-text) !important;
    cursor:         pointer !important;
    flex:           1 !important;
    margin-top:     0 !important;
    margin-right:   0 !important;
    margin-bottom:  0 !important;
    margin-left:    0 !important;
    padding-left:   0 !important;
}

/* ── Date Picker Input ───────────────────────────────────────── */
html body .gform_wrapper .ginput_container_date input[type="text"] {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: left 14px center !important;
    padding-left:        42px !important;
}

/* ── jQuery UI Datepicker ────────────────────────────────────── */
html body .ui-datepicker {
    background:    #ffffff !important;
    border:        1px solid var(--gfms-border) !important;
    border-radius: var(--gfms-radius-lg) !important;
    box-shadow:    0 20px 60px rgba(0,0,0,.12) !important;
    padding:       16px !important;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif !important;
    width:         300px !important;
}

html body .ui-datepicker .ui-datepicker-header {
    background:      transparent !important;
    border:          none !important;
    padding:         0 0 14px 0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    position:        static !important;
    border-radius:   0 !important;
}

html body .ui-datepicker .ui-datepicker-title {
    font-size:   0.95rem !important;
    font-weight: 700 !important;
    color:       var(--gfms-text) !important;
    flex:        1 !important;
    text-align:  center !important;
    line-height: 1 !important;
    margin:      0 !important;
}

html body .ui-datepicker .ui-datepicker-prev,
html body .ui-datepicker .ui-datepicker-next {
    position:        static !important;
    top:             auto !important;
    cursor:          pointer !important;
    width:           32px !important;
    height:          32px !important;
    border-radius:   8px !important;
    background:      var(--gfms-bg) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transition:      background var(--gfms-ease) !important;
    float:           none !important;
}

html body .ui-datepicker .ui-datepicker-prev:hover,
html body .ui-datepicker .ui-datepicker-next:hover {
    background: var(--gfms-primary-light) !important;
}

html body .ui-datepicker .ui-datepicker-prev span,
html body .ui-datepicker .ui-datepicker-next span {
    display: none !important;
}

html body .ui-datepicker .ui-datepicker-prev::after {
    content: '‹' !important;
    font-size: 1.2rem !important;
    color: var(--gfms-text-muted) !important;
    line-height: 1 !important;
}

html body .ui-datepicker .ui-datepicker-next::after {
    content: '›' !important;
    font-size: 1.2rem !important;
    color: var(--gfms-text-muted) !important;
    line-height: 1 !important;
}

html body .ui-datepicker table {
    width:            100% !important;
    border-collapse:  collapse !important;
}

html body .ui-datepicker th {
    font-size:      0.72rem !important;
    font-weight:    600 !important;
    color:          var(--gfms-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding:        4px 0 10px !important;
    text-align:     center !important;
    border:         none !important;
    background:     none !important;
}

html body .ui-datepicker td {
    text-align: center !important;
    padding:    2px !important;
    border:     none !important;
}

html body .ui-datepicker td a,
html body .ui-datepicker td span {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           36px !important;
    height:          36px !important;
    border-radius:   50% !important;
    font-size:       0.875rem !important;
    color:           var(--gfms-text) !important;
    text-decoration: none !important;
    transition:      background var(--gfms-ease), color var(--gfms-ease) !important;
    margin:          0 auto !important;
    border:          none !important;
    background:      none !important;
    padding:         0 !important;
}

html body .ui-datepicker td a:hover {
    background: var(--gfms-primary-light) !important;
    color:      var(--gfms-primary) !important;
}

html body .ui-datepicker td.ui-datepicker-current-day a,
html body .ui-datepicker td .ui-state-active {
    background: var(--gfms-primary) !important;
    color:      #ffffff !important;
}

html body .ui-datepicker td.ui-datepicker-today a {
    font-weight:  700 !important;
    color:        var(--gfms-primary) !important;
    border-bottom: 2px solid var(--gfms-primary) !important;
    border-radius: 0 !important;
    background:   transparent !important;
}

html body .ui-datepicker td.ui-datepicker-other-month span {
    color:   var(--gfms-text-ph) !important;
    opacity: 0.5 !important;
}

html body .ui-datepicker .ui-datepicker-buttonpane {
    border-top:    1px solid var(--gfms-border) !important;
    margin-top:    12px !important;
    padding-top:   12px !important;
    text-align:    center !important;
    background:    none !important;
}

html body .ui-datepicker .ui-datepicker-buttonpane button {
    background:  none !important;
    border:      none !important;
    color:       var(--gfms-primary) !important;
    font-weight: 600 !important;
    cursor:      pointer !important;
    font-size:   0.88rem !important;
    box-shadow:  none !important;
}

/* ── Submit Button ───────────────────────────────────────────── */
html body .gform_wrapper input[type="submit"],
html body .gform_wrapper button[type="submit"],
html body .gform_wrapper .gform_button,
html body .gform_wrapper .gform_next_button,
html body .gform_wrapper .gform_previous_button {
    background:       #1c1c1c !important;
    background-image: none !important;
    color:            #ffffff !important;
    border:           none !important;
    border-radius:    var(--gfms-radius) !important;
    padding:          15px 32px !important;
    font-size:        17px !important;
    font-weight:      700 !important;
    text-transform:   uppercase !important;
    letter-spacing:   0.06em !important;
    cursor:           pointer !important;
    transition:       background var(--gfms-ease),
                      transform var(--gfms-ease),
                      box-shadow var(--gfms-ease) !important;
    width:            100% !important;
    box-shadow:       0 4px 16px rgba(0,0,0,.25) !important;
    line-height:      1.5 !important;
    white-space:      normal !important;
    overflow:         visible !important;
    height:           auto !important;
    word-break:       break-word !important;
}

/* ── Mobile: extra vertical padding so wrapped button text breathes ── */
@media (max-width: 600px) {
    html body .gform_wrapper input[type="submit"],
    html body .gform_wrapper button[type="submit"],
    html body .gform_wrapper .gform_button,
    html body .gform_wrapper .gform_next_button,
    html body .gform_wrapper .gform_previous_button {
        padding: 18px 20px !important;
        font-size: 15px !important;
    }
}

html body .gform_wrapper input[type="submit"]:hover,
html body .gform_wrapper button[type="submit"]:hover,
html body .gform_wrapper .gform_button:hover {
    background:  #878787 !important;
    background-image: none !important;
    opacity:     1 !important;
    transform:   translateY(-1px) !important;
    box-shadow:  0 8px 24px rgba(0,0,0,.18) !important;
}

html body .gform_wrapper input[type="submit"]:active,
html body .gform_wrapper button[type="submit"]:active,
html body .gform_wrapper .gform_button:active {
    transform: translateY(0) !important;
}

/* ── Form Footer ─────────────────────────────────────────────── */
html body .gform_wrapper .gform_footer {
    margin-top: 24px !important;
    padding:    0 !important;
}

/* ── Multi-step Page Footer (forces gap between Prev / Next) ─── */
html body .gform_wrapper .gform_page_footer {
    display:        flex !important;
    flex-direction: column !important;
    gap:            12px !important;
    margin-top:     24px !important;
    padding:        0 !important;
}

/* Ensure individual buttons inside page footer have no rogue margin
   that could collapse the gap on some sites */
html body .gform_wrapper .gform_page_footer input[type="submit"],
html body .gform_wrapper .gform_page_footer button[type="submit"],
html body .gform_wrapper .gform_page_footer .gform_button,
html body .gform_wrapper .gform_page_footer .gform_next_button,
html body .gform_wrapper .gform_page_footer .gform_previous_button {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}

/* ── Validation / Error States ───────────────────────────────── */
html body .gform_wrapper .gform_validation_errors,
html body .gform_wrapper .validation_error {
    background:    #fef2f2 !important;
    border:        1px solid #fecaca !important;
    border-radius: var(--gfms-radius) !important;
    padding:       14px 18px !important;
    color:         #dc2626 !important;
    font-size:     0.88rem !important;
    margin-bottom: 20px !important;
    box-shadow:    none !important;
}

html body .gform_wrapper .gfield_error label.gfield_label,
html body .gform_wrapper .gfield_error .gfield_label {
    color: var(--gfms-error) !important;
}

html body .gform_wrapper .gfield_error input,
html body .gform_wrapper .gfield_error textarea,
html body .gform_wrapper .gfield_error select {
    border-color: var(--gfms-error) !important;
}

html body .gform_wrapper .validation_message,
html body .gform_wrapper .gfield_validation_message {
    color:      var(--gfms-error) !important;
    font-size:  0.8rem !important;
    margin-top: 6px !important;
}

/* ── Confirmation Message ────────────────────────────────────── */
html body .gform_confirmation_wrapper,
html body .gform_confirmation_message {
    background:    #f0fdf4 !important;
    border:        1px solid #bbf7d0 !important;
    border-radius: var(--gfms-radius-lg) !important;
    padding:       28px 32px !important;
    color:         #15803d !important;
    font-size:     16px !important;
    line-height:   1.6 !important;
}

/* ── Progress Bar (multi-step forms) ─────────────────────────── */
html body .gform_wrapper .gf_progressbar_wrapper {
    margin-bottom: 24px !important;
}

html body .gform_wrapper .gf_progressbar {
    background:    var(--gfms-border) !important;
    border-radius: 100px !important;
    height:        8px !important;
    overflow:      hidden !important;
    border:        none !important;
    box-shadow:    none !important;
}

html body .gform_wrapper .gf_progressbar_percentage {
    background:    linear-gradient(90deg, var(--gfms-primary), var(--gfms-accent)) !important;
    border-radius: 100px !important;
    height:        100% !important;
}

html body .gform_wrapper .gf_progressbar_percentage span {
    display: none !important;
}

html body .gform_wrapper .gf_step {
    color: var(--gfms-text-muted) !important;
    font-size: 0.85rem !important;
}

html body .gform_wrapper .gf_step_active {
    color: var(--gfms-primary) !important;
    font-weight: 600 !important;
}