/*------------------------------------*\

    Gravity Forms Custom Styling

    Custom styling for Gravity Forms to match the mobileivnurses theme design
    Uses theme CSS variables and design patterns for consistency

\*------------------------------------*/

/**
 * Form Container & Layout
 */
.gform_wrapper {
    margin: 0;
    max-width: none;
    border-radius: 12px;
    background: var(--White, #FFF);
    box-shadow: 0 0 10px 0 rgba(15, 35, 53, 0.20);
    padding: 40px 45px;
}

.gf_progressbar_wrapper {
    margin-bottom: 30px;
}

.gform_wrapper .gform_heading {
    display: none;
}

.gform_wrapper form {
    margin: 0;
    padding: 0;
}

.gform_wrapper .gform_body {
    margin: 0;
}

.gform_wrapper .gform_footer {
    margin: 20px 0 0 0;
    padding: 0;
    clear: both;
}
/**
 * Form Fields & Layout
 */
.gform_wrapper .gfield {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0;
    clear: both;
    width: 100%;
}

/* Multi-column layouts */
.gform_wrapper .gfield.gfield--width-half {
    margin-right: 0;
    display: inline-block;
}

.gform_wrapper .gfield.gfield--width-third {
    margin-right: 0;
    display: inline-block;
    vertical-align: top;
}

.gform_wrapper .gf_list_2col .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

/**
 * Field Labels
 */
.gform_wrapper .gfield_label {
    font-family: var(--secondary-font);
    font-size: 16px;
    font-weight: normal;
    color: var(--black);
    margin: 0 0 8px 0;
    display: block;
    line-height: 1.4em;
}

.gfield--type-text .gfield_label,
.gfield--type-email .gfield_label,
.gfield--type-phone .gfield_label {
    position: absolute;
    top: 19px;
    left: 11px;
    transition: all ease-in-out 0.3s;
    background: var(--white);
    padding: 0 5px;
    z-index: 1;
}

/* Move label above when input is focused or has content */
.gfield--type-text.gfield-has-value .gfield_label,
.gfield--type-email.gfield-has-value .gfield_label,
.gfield--type-phone.gfield-has-value .gfield_label {
    top: -10px;
    font-size: 14px;
    color: var(--sky-blue);
}

.gfield--type-text.gfield-has-value .gfield_label .gfield_required {
    color: var(--sky-blue);
}

.gform_wrapper .gfield_required {
    color: var(--black);
    margin-left: 2px;
}

.gform_wrapper .gfield_description {
    font-family: var(--primary-font);
    font-size: 14px;
    color: var(--deep-navy);
    margin: 5px 0 0 0;
    line-height: 1.4em;
}

/**
 * Input Fields
 */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100%;
    padding: 17px 15px;
    border: 2px solid #E3E3E3;
    background: var(--white);
    font-family: var(--primary-font);
    font-size: 16px;
    color: var(--black);
    line-height: 1.4em;
    transition: all ease-in-out 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border-radius: 6px;
}

/* Focus states */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none;
    border-color: var(--sky-blue);
    box-shadow: 0 0 0 2px rgba(87, 140, 201, 0.2);
}

/* Placeholder styling */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: rgba(48, 83, 121, 0.6);
    opacity: 1;
}

/**
 * Textarea specific styling
 */
.gform_wrapper textarea {
    min-height: 120px;
    resize: vertical;
}
/**
 * Choices Dropdown styling
 */
.gform_wrapper .choices__inner {
    padding: 17px 15px!important;
    max-height: 60.39px;
    border: 2px solid #E3E3E3;
    border-radius: 4px;
}

.gform_wrapper .choices__list--single {
    padding: 0;
}

.gfield--type-select .gfield_label {
    display: none;
}

/**
 * Radio Buttons & Checkboxes
 */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
    margin: 0;
}

.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
    margin: 0 0 15px 0;
    position: relative;
    display: block;
}

.gform_wrapper .gfield_radio .gchoice:last-child,
.gform_wrapper .gfield_checkbox .gchoice:last-child {
    margin-bottom: 0;
}

.gform_wrapper .gfield_radio input[type="radio"],
.gform_wrapper .gfield_checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
    font-family: var(--primary-font);
    font-size: 16px;
    color: var(--deep-navy);
    line-height: 1.4em;
    padding-left: 35px;
    position: relative;
    cursor: pointer;
    display: block;
    margin: 0;
}

/* Custom radio button styling */
.gform_wrapper .gfield_radio label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--deep-navy);
    border-radius: 50%;
    background: var(--white);
    transition: all ease-in-out 0.3s;
}

.gform_wrapper .gfield_radio input[type="radio"]:checked + label:before {
    background: var(--deep-navy);
    border-color: var(--deep-navy);
}

.gform_wrapper .gfield_radio input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white);
}

/* Custom checkbox styling */
.gform_wrapper .gfield_checkbox label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--deep-navy);
    border-radius: 4px;
    background: var(--white);
    transition: all ease-in-out 0.3s;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label:before {
    background: var(--deep-navy);
    border-color: var(--deep-navy);
}

.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    width: 6px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#gform_fields_9_4 .gfield--type-html {
    text-align: center;
}

#gform_fields_9_4 .gfield--type-html p {
    margin: 0 auto;
    max-width: 800px;
}

/**
 * Submit Button
 */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform-page-footer input[type="button"],
.gform_wrapper .gform-page-footer input[type="submit"] {
	position: relative;
	display: inline-block;
	border-radius: var(--btn-border-radius);
    background: var(--deep-navy);
    color: var(--white);
	text-decoration: none;
	border: 1px solid var(--deep-navy);
	font-size: 20px;
	font-weight: normal;
	line-height: 1.2em;
	font-family: var(--secondary-font);
	padding: 17px 44px;
	transition: all ease-in-out 0.3s;
	text-align: center;
	cursor: pointer;
}

.gform_wrapper .gform-page-footer input[type="button"].gform_previous_button {
	background: var(--white);
	color: var(--deep-navy);
    margin-right: 10px;
}

.gform_wrapper .gform-page-footer input[type="button"].gform_previous_button:hover {
    background: var(--grey);
    color: var(--deep-navy);
    border-color: var(--grey);
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform-page-footer input[type="button"]:hover,
.gform_wrapper .gform-page-footer input[type="submit"]:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

@media (max-width: 600px) {
    .gform_wrapper .gform-page-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/**
 * Validation & Error Messages
 */
.gform_wrapper .gfield_error {
    background: none;
    border: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.gform_wrapper .gfield_error .gfield_label {
    color: var(--deep-navy);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: #C95757;
}

.gform_wrapper .validation_message {
    color: #C95757;
    font-family: var(--primary-font);
    font-size: 15px;
    display: block;
    line-height: 1.4em;
    position: relative;
    padding-left: 30px;
    margin-top: -11px;
    background: white;
    width: fit-content;
    margin-left: 10px;
    padding-right: 10px;
}

.gform_wrapper .gfield--type-radio .validation_message {
    margin-left: -5px;
    background-color: transparent;
    margin-top: 10px;
}

.ginput_container_phone:has( .validation_message) + .validation_message {
    margin-top: 0;
}

.gform_wrapper .gfield_description + .validation_message {
    margin: 0;
}

.gform_wrapper .validation_message::before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5001 1.3124C15.5734 1.3124 19.6877 5.42672 19.6877 10.5C19.6877 15.5733 15.5734 19.6876 10.5001 19.6876C5.42682 19.6876 1.3125 15.5733 1.3125 10.5C1.3125 5.42672 5.42682 1.3124 10.5001 1.3124ZM9.5158 11.2906V6.56186C9.5158 6.01975 9.958 5.57756 10.5001 5.57756C11.0422 5.57756 11.4844 6.02386 11.4844 6.56186V11.2906C11.4844 11.8286 11.0422 12.2749 10.5001 12.2749C9.95799 12.2749 9.5158 11.8327 9.5158 11.2906ZM10.4958 13.3306C11.1119 13.3306 11.6115 13.8302 11.6115 14.4462C11.6115 15.0623 11.1119 15.5619 10.4958 15.5619C9.87987 15.5619 9.38024 15.0623 9.38024 14.4462C9.38024 13.8302 9.87987 13.3306 10.4958 13.3306Z" fill="%23C95757"/></svg>');
    position: absolute;
    left: 5px;
    top: -1px;
}

/* Form-wide validation message */
.gform_wrapper .validation_error,
.gform_wrapper .gform_submission_error {
    background: #fdf2f2;
    border: 1px solid #C95757;
    border-radius: 4px;
    color: #C95757;
    font-family: var(--primary-font);
    font-size: 16px;
    margin: 0 0 20px 0;
    padding: 20px;
    line-height: 1.4em;
}

/**
 * Success Message
 */
.gform_confirmation_wrapper .gform_confirmation_message {
    background: #f0f9f0;
    border: 1px solid #4caf50;
    border-radius: var(--border-radius);
    color: #2e7d32;
    font-family: var(--primary-font);
    font-size: 16px;
    margin: 0 0 20px 0;
    padding: 20px;
    line-height: 1.4em;
}

/**
* Gravity Forms Multi-Step Progress Bar
*/

.gform-theme--framework .gf_progressbar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 11px;
    overflow: hidden;
    border-radius: 100px;
    background: #F1F1F2;
    border: none;
}

#gform_wrapper_9 .gf_progressbar .gf_progressbar_percentage {
    background-color: var(--deep-navy);
    height: 100%;
    border-radius: 100px;
}

#gform_wrapper_9 .gf_progressbar .gf_progressbar_percentage.percentbar_0 {
    width: 25%!important;
}

#gform_wrapper_9 .gf_progressbar .gf_progressbar_percentage.percentbar_25 {
    width: 50%!important;
}

#gform_wrapper_9 .gf_progressbar .gf_progressbar_percentage.percentbar_50 {
    width: 75%!important;
}

#gform_wrapper_9 .gf_progressbar .gf_progressbar_percentage.percentbar_75 {
    width: 100%!important;
}

#gform_wrapper_9 .gf_progressbar span {
    color: transparent;
}

.gform-theme--framework .gf_progressbar .gf_progressbar_percentage {
    background-color: var(--deep-navy);
    height: 100%;
    border-radius: 100px;
}

.gform-theme--framework .gf_progressbar span {
    color: transparent;
}

@media (min-width: 600px) {
    .gform_wrapper .gfield.gfield--width-half {
        width: calc(50% - 2px);
    }

    .gform_wrapper .gfield.gfield--width-half {
        padding-right: 15px;
    }

    .gform_wrapper .gfield.gfield--width-half + .gfield.gfield--width-half {
        padding-left: 15px;
        padding-right: 0;
    }

    .gform_wrapper .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half {
        padding-left: 0;
        padding-right: 15px;
    }

    .gform_wrapper .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half {
        padding-left: 15px;
        padding-right: 0;
    }

    .gform_wrapper .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half {
        padding-left: 0;
        padding-right: 15px;
    }

    .gform_wrapper .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half + .gfield.gfield--width-half {
        padding-left: 15px;
        padding-right: 0;
    }

    .gform_wrapper .gfield.gfield--width-third {
        width: calc(33.33333333333333% - 3px);
    }

    .gform_wrapper .gfield.gfield--width-third {
        padding-right: 15px;
    }

    .gform_wrapper .gfield.gfield--width-third + .gfield.gfield--width-third,
    .gform_wrapper .gfield.gfield--width-third + .gfield.gfield--width-third + .gfield.gfield--width-third {
        padding-left: 15px;
        padding-right: 0;
    }


    .gform_wrapper .gfield.gfield--width-third + .gfield.gfield--width-third {
        padding-right: 15px;
    }

    .gform_wrapper .gfield.gfield--width-third + .gfield.gfield--width-third + .gfield.gfield--width-third .gfield_label {
        left: 26px;
    }

    .gfield--width-half + .gfield--width-half .gfield_label {
        left: 26px;
    }

    .gfield--width-half + .gfield--width-half + .gfield--width-half .gfield_label {
        left: 11px;
    }

    .gfield--width-half + .gfield--width-half + .gfield--width-half + .gfield--width-half .gfield_label {
        left: 26px;
    }

    .gfield--width-half + .gfield--width-half + .gfield--width-half + .gfield--width-half + .gfield--width-half .gfield_label {
        left: 11px;
    }
}

/**
 * Custom Multi-Step Progress Bar
 */
.custom-step-progress {
    margin: 0 0 30px 0;
    padding: 0;
}

.linear-progress-bar {
    width: 100%;
    height: 11px;
    background: #E3E3E3;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background-color: var(--sky-blue) ;
    border-radius: 100px;
    transition: width 0.4s ease-in-out;
    position: relative;
    border-radius: 100px;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--sky-blue);
    border-radius: 100px;
}

.progress-text {
    font-family: var(--secondary-font);
    font-size: 16px;
    color: var(--deep-navy);
    text-align: left;
    font-weight: 500;
    margin-bottom: 15px;
}

.progress-text .current-step {
    font-weight: 700;
    color: var(--sky-blue);
}

/* Hide the progress container's default content */
#field_9_31 .ginput_container {
    display: none;
}

#field_9_31 .gfield_label {
    display: none;
}

/* Smooth transition for step fields */
#field_9_32,
#field_9_33,
#field_9_34,
#field_9_35,
#field_9_36 {
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

/* Hidden state for completed steps (excluding last step) */
/* Only hide if NOT hidden by conditional logic */
#field_9_32.step-completed:not([data-conditional-logic="hidden"]),
#field_9_33.step-completed:not([data-conditional-logic="hidden"]),
#field_9_34.step-completed:not([data-conditional-logic="hidden"]),
#field_9_35.step-completed:not([data-conditional-logic="hidden"]) {
    display: none !important;
}

/* Respect Gravity Forms conditional logic - keep hidden if GF says so */
#field_9_32[data-conditional-logic="hidden"],
#field_9_33[data-conditional-logic="hidden"],
#field_9_34[data-conditional-logic="hidden"],
#field_9_35[data-conditional-logic="hidden"],
#field_9_36[data-conditional-logic="hidden"] {
    display: none !important;
}

/* Last step should remain visible even with step-completed class - but respect conditional logic */
#field_9_36.step-completed:not([data-conditional-logic="hidden"]) {
    display: block !important;
}

/* Responsive design */
@media (max-width: 600px) {
    .linear-progress-bar {
        height: 8px;
    }

    .progress-text {
        font-size: 13px;
    }
}