/* Pattern Section */
.patterns .gfield {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    background: #fafafa;
}

.patterns .gfield .gfield_label {
    font-size: 1.2em;
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 1px solid #bdc3c7;
    padding-bottom: 5px;
}

/* Section Headers */
.southerncooler-main-form .gsection {
    background: #3498db;
    color: white;
    padding: 15px;
    border-radius: 5px;
    margin: 30px 0 20px 0;
}

.southerncooler-main-form .gsection .gsection_title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
}

/* Checkbox Styles */
.southerncooler-main-form .gfield_checkbox .gchoice {
    margin-bottom: 10px;
}

.southerncooler-main-form .gfield_checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: #3498db; /* modern native tint */
    vertical-align: middle;
}

/* Ensure checkbox labels are readable on dark backgrounds */
.southerncooler-main-form .gfield_checkbox label,
.southerncooler-main-form .gfield_checkbox .gchoice label {
    color: #ffffff !important;
    line-height: 1.4;
}

/* Improve focus visibility for accessibility */
.southerncooler-main-form .gfield_checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid #2980b9;
    outline-offset: 2px;
}

/* File Upload Styles */
.southerncooler-main-form .ginput_container_fileupload {
    border: 2px dashed #bdc3c7;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.southerncooler-main-form .ginput_container_fileupload:hover {
    border-color: #3498db;
    background: #000000;
}

.gform-theme--framework .gfield:where(.gfield--type-fileupload,.gfield--input-type-fileupload) .ginput_preview .gfield_fileupload_progress {
    align-items: center;
    display: block !important;
    gap: var(--gf-ctrl-file-prog-ui-gap);
    color: white;
}   
.southerncooler-main-form input[type="file"] {
    width: auto;
    background: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

/* Logo and Fish Ruler Entries */
.logo-entries,
.fish-ruler-entries {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
    background: #f8f9fa;
}

.logo-entry,
.fish-ruler-entry {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-logo-btn,
.delete-fish-ruler-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.delete-logo-btn:hover,
.delete-fish-ruler-btn:hover {
    background: #c0392b;
}

.add-logo-btn,
.add-fish-ruler-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.add-logo-btn:hover,
.add-fish-ruler-btn:hover {
    background: #219a52;
}

/* Add-on Sections */
.addon-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    background: #fafafa;
    transition: all 0.3s ease;
}

.addon-section.disabled {
    background: #f5f5f5;
    opacity: 0.6;
}

.addon-section .addon-title {
    background: #34495e;
    color: white;
    padding: 10px 15px;
    margin: -20px -20px 20px -20px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 1.1em;
}

.addon-section .none-checkbox {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
}

/* Shipping Fields */
.shipping-fields {
    display: none;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}

.shipping-fields.show {
    display: block;
}

.shipping-fields .gfield {
    margin-bottom: 15px;
}

/* Button Styles */
.southerncooler-main-form .gform_button,
.southerncooler-main-form .gform_next_button,
.southerncooler-main-form .gform_previous_button {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 5px;
}

.southerncooler-main-form .gform_button:hover,
.southerncooler-main-form .gform_next_button:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.southerncooler-main-form .gform_previous_button {
    background: #95a5a6;
}

.southerncooler-main-form .gform_previous_button:hover {
    background: #7f8c8d;
}

.southerncooler-main-form .gform_button.disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
}

/* Navigation Buttons Container */
.southerncooler-main-form .gform_page_footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #bdc3c7;
}

/* Confirmation Message */
.southerncooler-confirmation {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    margin: 20px 0;
}

.southerncooler-confirmation h3 {
    color: #155724 !important;
    margin-bottom: 15px;
}

/* Validation Messages */
.southerncooler-main-form .gfield_error {
    border-color: #e74c3c !important;
}

.southerncooler-main-form .validation_error {
    color: #e74c3c;
    background: #fdf2f2;
    border: 1px solid #e74c3c;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.southerncooler-main-form .gfield_error_message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    font-style: italic;
}

/* Required Field Indicators */
/* .southerncooler-main-form .gfield_required:before {
    content: "*";
    color: #e74c3c;
    margin-right: 3px;
} */

/* Loading States */
.southerncooler-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.southerncooler-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #3498db;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .southerncooler-main-form {
        padding: 15px;
        margin: 10px;
    }
    
    .southerncooler-order-type .gfield_radio {
        grid-template-columns: 1fr;
    }
    
    .southerncooler-main-form .gform_title {
        font-size: 1.5em;
    }
    
    .logo-entry,
    .fish-ruler-entry {
        flex-direction: column;
        text-align: center;
    }
    
    .logo-entry span,
    .fish-ruler-entry span {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .southerncooler-main-form {
        padding: 10px;
    }
    
    .southerncooler-main-form .gform_button,
    .southerncooler-main-form .gform_next_button,
    .southerncooler-main-form .gform_previous_button {
        width: 100%;
        margin: 5px 0;
    }
    
    .addon-section .addon-title {
        font-size: 1em;
        padding: 8px 12px;
    }
}

/* Print Styles */
@media print {
    .southerncooler-main-form .gform_page_footer,
    .southerncooler-main-form .gf_progressbar_wrapper {
        display: none;
    }
    
    .southerncooler-main-form {
        box-shadow: none;
        max-width: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .southerncooler-main-form input,
    .southerncooler-main-form select,
    .southerncooler-main-form textarea {
        border-width: 3px;
    }
    
    .southerncooler-main-form .gform_button,
    .southerncooler-main-form .gform_next_button {
        border: 2px solid #000;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .southerncooler-main-form * {
        transition: none !important;
        animation: none !important;
    }
}
    /**
 * Southern Cooler Form CSS
 * Custom styling for the multi-step order form
 */

/* Main Form Container */
.southerncooler-main-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.southerncooler-main-form .gform_wrapper {
    background: transparent;
}

/* Form Title */
.southerncooler-main-form .gform_title {
    color: #2c3e50;
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 2px solid #3498db;
    padding-bottom: 15px;
}

.southerncooler-main-form .gform_description {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 30px;
}

/* Step Progress Bar */
.southerncooler-main-form .gf_progressbar_wrapper {
    margin-bottom: 30px;
}

.southerncooler-main-form .gf_progressbar_wrapper .gf_progressbar {
    background: #ecf0f1;
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
}

.southerncooler-main-form .gf_progressbar_wrapper .gf_progressbar_percentage {
    background: linear-gradient(45deg, #3498db, #2980b9);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Ensure file upload progress bars are not affected by step progress styles */
.southerncooler-main-form .ginput_container_fileupload .gf_progressbar {
    background: transparent;
    height: 4px;
    border-radius: 0;
    overflow: hidden;
}

.southerncooler-main-form .ginput_container_fileupload .gf_progressbar_percentage {
    background: #3b82f6; /* simple blue line for upload */
    height: 4px;
    border-radius: 0;
}

/* Page Headers */
.southerncooler-main-form .gform_page_title {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #bdc3c7;
}

/* Field Groups */
.southerncooler-main-form .gfield {
    margin-bottom: 20px;
}

.southerncooler-main-form .gfield_label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    display: block;
}

.southerncooler-main-form .gfield_required {
    color: #fff;
}

/* Input Styles */
.southerncooler-main-form input[type="text"],
.southerncooler-main-form input[type="number"],
.southerncooler-main-form input[type="email"],
.southerncooler-main-form input[type="tel"],
.southerncooler-main-form input[type="date"],
.southerncooler-main-form select,
.southerncooler-main-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #bdc3c7;
    border-radius: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #fff;
}

.southerncooler-main-form input:focus,
.southerncooler-main-form select:focus,
.southerncooler-main-form textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.southerncooler-main-form input.disabled,
.southerncooler-main-form select.disabled,
.southerncooler-main-form textarea.disabled {
    background: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

/* Radio Button Styles */
.southerncooler-order-type .gfield_radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}
.gform-page-footer .gform_previous_button {
    margin-left: auto !important;
}
.southerncooler-order-type .gchoice {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.southerncooler-order-type .gchoice:hover {
    background: #0077ba;
    border-color: #0077ba;
}
#gform_wrapper_5[data-form-index="0"].gform-theme, [data-parent-form="5_0"] {
    --gf-color-primary: #0077ba;
}
.southerncooler-order-type .gchoice input[type="radio"]:checked + label {
    background: #0077ba;
    color: white;
}

.southerncooler-order-type .gchoice input[type="radio"] {
    display: none;
}

.southerncooler-order-type .gchoice label {
    font-weight: 600;
    cursor: pointer;
    display: block;
    text-align: center;
    margin: 0;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Color Selection Fields */
.southerncooler-top-color,
.southerncooler-bottom-color,
.southerncooler-center-color {
    display: none; /* Initially hidden */
}

.color-preview {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    border: 2px solid #ddd;
}

/* Measurement Fields */
.southerncooler-or-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.southerncooler-or-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #bdc3c7;
    z-index: 1;
}

.southerncooler-or-divider h3 {
    background: rgb(54, 54, 54);
    padding: 0 20px;
    margin: 0;
    position: relative;
    z-index: 2;
    color: #7f8c8d;
}

/* Inventory and Pricing Display */
.southerncooler-inventory-status,
.southerncooler-estimated-price,
.southerncooler-required-sheets {
    /*background: #f8f9fa;*/
    /*border: 1px solid #dee2e6;*/
    /*border-radius: 5px;*/
    /*padding: 15px;*/
    /*margin: 10px 0;*/
    /*color: black;*/
}
@media (min-width: 640px) {
    .gform-theme--foundation .gform_fields { 
        row-gap: 0 !important;
    }
}
.southerncooler-inventory-status #inventory-status.in-stock {
    color: #27ae60;
    font-weight: bold;
}

.southerncooler-inventory-status #inventory-status.out-of-stock {
    color: #e74c3c;
    font-weight: bold;
}

.southerncooler-estimated-price .tooltip {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 5px;
    font-style: italic;
}

/* Pattern Section */
.patterns .gfield {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    background: #fafafa;
}

.patterns .gfield .gfield_label {
    font-size: 1.2em;
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 1px solid #bdc3c7;
    padding-bottom: 5px;
}
.gform_wrapper .gfield_label,
.gform_wrapper .gsection_title,
.gform_wrapper .gfield_description,
.gform_wrapper legend.gfield_label {
    color: #fff !important;
}
.gfield.gfield--type-html {
    background-color: #000 !important;
    color: #fff !important;
    padding: 16px;
    border-radius: 6px;
}

/* ------------------------------------------------------------------
   Custom select styling: arrow + value color change
------------------------------------------------------------------- */
.southerncooler-main-form select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px; /* space for arrow */
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    /* grey arrow by default */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%236c757d'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* hide default arrow in old Edge/IE */
.southerncooler-main-form select::-ms-expand {
    display: none;
}

/* arrow accent on focus */
.southerncooler-main-form select:focus:not([multiple]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%233498db'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* show placeholder color until a real value is chosen
   Works when the field is required and the placeholder option has value="" */
.southerncooler-main-form select:invalid {
    color: #6c757d; /* muted */
}

.southerncooler-main-form select:valid {
    color: #2c3e50; /* normal text color */
}

/* ensure the placeholder option itself is grey in dropdown */
.southerncooler-main-form select option[disabled][value=""],
.southerncooler-main-form select option[value=""]:disabled {
    color: #6c757d;
}

/* Gravity Forms specific container + robust placeholder detection */
.southerncooler-main-form .ginput_container_select select {
    color: #6c757d; /* default to muted until a real value is chosen */
}

/* When a non-empty option is selected, force readable color */
.southerncooler-main-form .ginput_container_select select:has(option:not([value=""]):checked) {
    color: #2c3e50;
}

/* JS fallback: when .has-value is present, ensure visible color */
.southerncooler-main-form select.has-value {
    color: #ffffff !important;
}

/* Force visible text for all selects with values */
.southerncooler-main-form select option:checked {
    color: #2c3e50 !important;
}

/* Override any theme conflicts */
.southerncooler-main-form select {
    color: #2c3e50 !important;
}

/* Ensure placeholder text is visible but muted */
.southerncooler-main-form select option[value=""] {
    color: #6c757d !important;
} 

/* When no real value is selected, show placeholder color */
.southerncooler-main-form select:not(.has-value) {
    color: #6c757d !important;
}

/* Force white text for all selects to ensure visibility */
.southerncooler-main-form select,
.southerncooler-main-form select option,
.southerncooler-main-form select option:checked,
.southerncooler-main-form select option:selected {
    color: #ffffff !important;
    background-color: #000000 !important;
}

/* Override any inline styles that might be hiding the text */
.southerncooler-main-form select[style*="color"] {
    color: #ffffff !important;
}

/* Ensure the select container doesn't override our styles */
.southerncooler-main-form .ginput_container_select select,
.southerncooler-main-form .gfield select {
    color: #ffffff !important;  
    background-color: #1a1d1c !important;
}
.southerncooler-main-form .ginput_container_select select, .southerncooler-main-form .gfield select {
    line-height: 17px;
    padding-top: 7px !important;
    padding-bottom: 8px !important;
}
.admin-hidden-markup {
    display: none;
}

/* ---------------------------------------------------------------
   Gravity Forms List (Repeater) field fixes
   - readable labels on dark bg
   - full-width inputs
   - aligned add/remove icons
---------------------------------------------------------------- */
.southerncooler-main-form table.gfield_list,
.southerncooler-main-form .gfield_list_container {
    width: 100%;
}

.southerncooler-main-form table.gfield_list th,
.southerncooler-main-form table.gfield_list td {
    color: #ffffff;
    border-color: #3a3a3a;
}

.southerncooler-main-form table.gfield_list th {
    font-weight: 600;
}

.southerncooler-main-form table.gfield_list input[type="text"],
.southerncooler-main-form table.gfield_list input[type="number"],
.southerncooler-main-form table.gfield_list input[type="email"],
.southerncooler-main-form table.gfield_list input[type="tel"],
.southerncooler-main-form table.gfield_list select,
.southerncooler-main-form table.gfield_list textarea {
    width: 100% !important;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #4b4b4b;
    border-radius: 5px;
}

/* Icon row (GF 2.5+) */
.southerncooler-main-form .gfield_list_icons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.southerncooler-main-form .gfield_list_icons .add_list_item,
.southerncooler-main-form .gfield_list_icons .delete_list_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #3498db;
    background: #0b1b2a;
    color: #ffffff;
    cursor: pointer;
    font-size: 0; /* hide button text, keep for a11y */
    line-height: 1;
    position: relative;
}

.southerncooler-main-form .gfield_list_icons .add_list_item:hover {
    background: #1d3a57;
}

.southerncooler-main-form .gfield_list_icons .delete_list_item {
    border-color: #e74c3c;
    background: #2a0b0b;
}

.southerncooler-main-form .gfield_list_icons .delete_list_item:hover {
    background: #571d1d;
}

/* In some themes the icons are positioned far right; normalize */
.southerncooler-main-form .gfield_list .gfield_list_row td:last-child {
    white-space: nowrap;
}

/* Replace button labels with symbols while keeping accessible labels */
.southerncooler-main-form .gfield_list_icons .add_list_item::before {
    content: "+";
    font-size: 18px;
}

.southerncooler-main-form .gfield_list_icons .delete_list_item::before {
    content: "\2212"; /* minus sign */
    font-size: 18px;
}

/* Header/legend visibility and grid alignment for provided markup */
.southerncooler-main-form .gfield--type-list legend.gfield_label,
.southerncooler-main-form .gfield--type-list .gfield_list_header .gform-field-label {
    color: #ffffff !important;
}

.southerncooler-main-form .gfield--type-list .gfield_list_group.gform-grid-row {
    align-items: center;
}

/* ==========================================================================
   GRAVITY FORMS STEP INDICATORS (PAGINATION)
   ========================================================================== */

/* Step indicator container */
.gform_page_footer .gform_page_footer_buttons {
    margin-top: 20px;
}

/* Step indicators/pagination */
.gform_page_footer .gform_page_footer_buttons .gform_button,
.gform_page_footer .gform_page_footer_buttons .gform_next_button,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button {
    margin: 0 5px;
}

/* Step indicator circles - this targets the numbered step indicators */
.gform_page_footer .gform_page_footer_buttons .gform_button:before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button:before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button:before {
    content: attr(data-step);
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
    font-size: 14px;
}

/* Active/current step indicator - white circle */
.gform_page_footer .gform_page_footer_buttons .gform_button.active:before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button.active:before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button.active:before {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #3498db;
}

/* Inactive step indicators - gray circles */
.gform_page_footer .gform_page_footer_buttons .gform_button:not(.active):before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button:not(.active):before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button:not(.active):before {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border: 2px solid #6c757d;
}

/* Alternative approach: Target Gravity Forms built-in step indicators */
.gform_page_footer .gform_page_footer_buttons .gform_button[data-step]:before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button[data-step]:before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button[data-step]:before {
    content: attr(data-step);
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
    font-size: 14px;
}

/* Active step with white circle */
.gform_page_footer .gform_page_footer_buttons .gform_button[data-step].active:before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button[data-step].active:before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button[data-step].active:before {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #3498db;
}

/* Inactive steps with gray circles */
.gform_page_footer .gform_page_footer_buttons .gform_button[data-step]:not(.active):before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button[data-step]:not(.active):before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button[data-step]:not(.active):before {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border: 2px solid #6c757d;
}

/* ==========================================================================
   GRAVITY FORMS STEP INDICATORS ABOVE FORM CONTENT
   ========================================================================== */

/* Target the step indicators that appear above the form */
.gform_wrapper .gf_step_indicator,
.gform_wrapper .gf_step_indicator_step,
.gform_wrapper .gf_step_indicator_step_number {
    display: inline-block;
    margin: 0 5px;
}

/* Step indicator step container */
.gform_wrapper .gf_step_indicator_step {
    position: relative;
    text-align: center;
}

/* Step number circle */
.gform_wrapper .gf_step_indicator_step_number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Active step - white circle with blue border */
.gform_wrapper .gf_step_indicator_step.active .gf_step_indicator_step_number {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #3498db !important;
}

/* Inactive steps - gray circles */
.gform_wrapper .gf_step_indicator_step:not(.active) .gf_step_indicator_step_number {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* Step label text */
.gform_wrapper .gf_step_indicator_step_label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Active step label */
.gform_wrapper .gf_step_indicator_step.active .gf_step_indicator_step_label {
    color: #3498db !important;
    font-weight: 600;
}

/* Step indicator container styling */
.gform_wrapper .gf_step_indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0 30px 0;
    padding: 20px;
    background: rgba(52, 73, 94, 0.1);
    border-radius: 10px;
    gap: 20px;
}

/* Alternative: Target any step indicator elements */
.gform_wrapper [class*="step"],
.gform_wrapper [class*="indicator"],
.gform_wrapper [class*="pagination"] {
    display: inline-block;
    margin: 0 5px;
}

/* Step circles - general approach */
.gform_wrapper [class*="step"] [class*="number"],
.gform_wrapper [class*="indicator"] [class*="number"],
.gform_wrapper [class*="pagination"] [class*="number"] {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Active step circles - white background */
.gform_wrapper [class*="step"].active [class*="number"],
.gform_wrapper [class*="indicator"].active [class*="number"],
.gform_wrapper [class*="pagination"].active [class*="number"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #3498db !important;
}

/* Inactive step circles - gray background */
.gform_wrapper [class*="step"]:not(.active) [class*="number"],
.gform_wrapper [class*="indicator"]:not(.active) [class*="number"],
.gform_wrapper [class*="pagination"]:not(.active) [class*="number"] {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* ==========================================================================
   GRAVITY FORMS ERROR MESSAGE STYLING
   ========================================================================== */

/* Field validation errors - red color */
.gform_wrapper .gfield_error {
    border-color: #e74c3c !important;
    background-color: #fdf2f2 !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: #e74c3c !important;
    background-color: #fdf2f2 !important;
}

/* Error message text - red color */
.gform_wrapper .gfield_error_message,
.gform_wrapper .validation_message {
    color: #e74c3c !important;
    font-size: 14px;
    margin-top: 5px;
    font-style: italic;
    font-weight: 500;
}

/* Form validation error summary - red color */
.gform_wrapper .validation_error {
    color: #e74c3c !important;
    background: #fdf2f2 !important;
    border: 2px solid #e74c3c !important;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: 500;
}

.gform_wrapper .validation_error h3 {
    color: #e74c3c !important;
    margin-bottom: 10px;
}

/* Required field indicators - red color */
.gform_wrapper .gfield_required:before {


    color: #e74c3c !important;
    margin-right: 3px;
    font-weight: bold;
}

/* ==========================================================================
   COMPREHENSIVE ERROR MESSAGE STYLING
   ========================================================================== */

/* Additional error styling for better visibility */
.gform_wrapper .gfield_error .ginput_container_list .gfield_list_container .gfield_list_header .gform-field-label, .gform_wrapper .gfield_error .gfield_label {
    color: #e74c3c !important;
}



.gform_wrapper .gfield_error .gfield_description {
    color: #e74c3c !important;
}

/* Error state for specific field types */
.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container select,
.gform_wrapper .gfield_error .ginput_container textarea {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
    background-color: black !important;
    color: white;
}
.gform-theme--framework .gfield:where(.gfield--type-fileupload,.gfield--input-type-fileupload) .ginput_preview .gfield_fileupload_filename {
    color: white !important;
}

/* Error styling for radio and checkbox fields */
.gform_wrapper .gfield_error .gfield_radio,
.gform_wrapper .gfield_error .gfield_checkbox {
    border: 2px solid #e74c3c !important;
    padding: 10px;
    border-radius: 5px;
    background-color: #fdf2f2 !important;
}

.gform_wrapper .gfield_error{
    border: 2px solid #e74c3c !important;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Error styling for file upload fields */
.gform_wrapper .gfield_error .ginput_container_fileupload {
    border-color: #e74c3c !important;
    background-color: #fdf2f2 !important;
}

/* Error styling for list fields */
.gform_wrapper .gfield_error .gfield_list {
    border-color: #e74c3c !important;
}

.gform_wrapper .gfield_error .gfield_list th,
.gform_wrapper .gfield_error .gfield_list td {
    border-color: #e74c3c !important;
}

/* Error state for form sections */
.gform_wrapper .gsection.gfield_error {
    border: 2px solid #e74c3c !important;
    background-color: #fdf2f2 !important;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Error styling for conditional logic fields */
.gform_wrapper .gfield.gfield_error.gfield_contains_required {
border: 0px solid #e74c3c !important;
    background-color: transparent !important;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
}

/* Make error messages more prominent */
.gform_wrapper .gfield_error_message:before {
    content: "⚠ ";
    margin-right: 5px;
    font-weight: bold;
}

.gform_wrapper .validation_error:before {
    content: "⚠ ";
    margin-right: 5px;
    font-weight: bold;
}

/* Error message animations */
.gform_wrapper .gfield_error_message,
.gform_wrapper .validation_error {
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ==========================================================================
   ERROR MESSAGE AUTO-HIDE AND FADE-OUT ANIMATIONS
   ========================================================================== */

/* Error fade-out animation class */
.error-fade-out {
    animation: errorFadeOut 3s ease-in-out forwards;
}

/* Fade-out animation keyframes */
@keyframes errorFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Smooth transition for error messages */
.gform_wrapper .gfield_error_message,
.gform_wrapper .validation_error {
    transition: all 0.5s ease;
}

/* Error message countdown indicator */
.gform_wrapper .gfield_error_message::after,
.gform_wrapper .validation_error::after {
    content: "⏰";
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 12px;
    opacity: 0.7;
    animation: countdownPulse 3s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.3; }
}

/* Enhanced error styling with auto-hide support */
.gform_wrapper .gfield_error_message,
.gform_wrapper .validation_error {
    position: relative;
    overflow: hidden;
}

/* Error message slide-in animation */
.gform_wrapper .gfield_error_message,
.gform_wrapper .validation_error {
    animation: errorSlideIn 0.5s ease-out;
}

@keyframes errorSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

/* Auto-hide progress bar for error messages */
.gform_wrapper .gfield_error_message::before,
.gform_wrapper .validation_error::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    animation: errorProgressBar 3s linear forwards;
}

@keyframes errorProgressBar {
    0% { width: 100%; }
    100% { width: 0%; }
}

/* ==========================================================================
   ENHANCED ERROR DISPLAY WITH AUTO-HIDE
   ========================================================================== */

/* Error message container with auto-hide support */
.gform_wrapper .error-container {
    position: relative;
    margin-bottom: 15px;
}

/* Error message with countdown */
.gform_wrapper .error-with-countdown {
    position: relative;
    padding-right: 30px;
}

/* Countdown timer display */
.gform_wrapper .error-countdown {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 11px;
    color: #e74c3c;
    font-weight: bold;
    background: rgba(231, 76, 60, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid #e74c3c;
}

/* Error message types with different auto-hide behaviors */
.gform_wrapper .gfield_error_message.field-error,
.gform_wrapper .validation_error.form-error {
    border-left: 4px solid #e74c3c;
}

/* Auto-hide notification for users */
.gform_wrapper .error-auto-hide-notice {
    font-size: 11px;
    color: #7f8c8d;
    font-style: italic;
    margin-top: 5px;
    text-align: right;
}

/* ==========================================================================
   ENHANCED STEP INDICATOR STYLING
   ========================================================================== */

/* Additional step indicator styles for better visibility */
.gform_page_footer .gform_page_footer_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #bdc3c7;
}

/* Step indicator button styling */
.gform_page_footer .gform_page_footer_buttons .gform_button,
.gform_page_footer .gform_page_footer_buttons .gform_next_button,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button {
    position: relative;
    padding: 12px 20px 12px 50px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
}

/* Step number positioning */
.gform_page_footer .gform_page_footer_buttons .gform_button:before,
.gform_page_footer .gform_page_footer_buttons .gform_next_button:before,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button:before {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
}

/* Hover effects for step indicators */
.gform_page_footer .gform_page_footer_buttons .gform_button:hover,
.gform_page_footer .gform_page_footer_buttons .gform_next_button:hover,
.gform_page_footer .gform_page_footer_buttons .gform_previous_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   RESPONSIVE STEP INDICATORS
   ========================================================================== */

@media (max-width: 768px) {
    .gform_page_footer .gform_page_footer_buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .gform_page_footer .gform_page_footer_buttons .gform_button,
    .gform_page_footer .gform_page_footer_buttons .gform_next_button,
    .gform_page_footer .gform_page_footer_buttons .gform_previous_button {
        width: 100%;
        max-width: 300px;
    }
    
    /* Mobile step indicators */
    .gform_wrapper .gf_step_indicator {
        flex-direction: column;
        gap: 15px;
    }
    
    .gform_wrapper .gf_step_indicator_step {
        margin: 5px 0;
    }
}

/* ==========================================================================
   GRID-BASED STEP INDICATOR SYSTEM (SPECIFIC TO YOUR LAYOUT)
   ========================================================================== */

/* Target the grid container for step indicators */
.gform_wrapper .step-grid,
.gform_wrapper .step-indicator-grid,
.gform_wrapper [class*="step-grid"],
.gform_wrapper [class*="step-indicator-grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    margin: 20px 0 30px 0;
    padding: 20px;
    background: rgba(52, 73, 94, 0.1);
    border-radius: 10px;
}

/* Individual step columns */
.gform_wrapper .step-column,
.gform_wrapper .step-col,
.gform_wrapper [class*="step-column"],
.gform_wrapper [class*="step-col"] {
    text-align: center;
    position: relative;
}

/* Step circles in the grid */
.gform_wrapper .step-circle,
.gform_wrapper .step-number,
.gform_wrapper [class*="step-circle"],
.gform_wrapper [class*="step-number"] {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    margin: 5px auto;
    display: inline-block;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Active step circles - WHITE background with blue border */
.gform_wrapper .step-circle.active,
.gform_wrapper .step-number.active,
.gform_wrapper [class*="step-circle"].active,
.gform_wrapper [class*="step-number"].active,
.gform_wrapper .step-column.active .step-circle,
.gform_wrapper .step-column.active .step-number,
.gform_wrapper .step-col.active .step-circle,
.gform_wrapper .step-col.active .step-number {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #3498db !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

/* Inactive step circles - gray background */
.gform_wrapper .step-circle:not(.active),
.gform_wrapper .step-number:not(.active),
.gform_wrapper [class*="step-circle"]:not(.active),
.gform_wrapper [class*="step-number"]:not(.active),
.gform_wrapper .step-column:not(.active) .step-circle,
.gform_wrapper .step-column:not(.active) .step-number,
.gform_wrapper .step-col:not(.active) .step-circle,
.gform_wrapper .step-col:not(.active) .step-number {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* Step labels below circles */
.gform_wrapper .step-label,
.gform_wrapper .step-title,
.gform_wrapper [class*="step-label"],
.gform_wrapper [class*="step-title"] {
    font-size: 12px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 8px;
    display: block;
}

/* Active step label */
.gform_wrapper .step-column.active .step-label,
.gform_wrapper .step-column.active .step-title,
.gform_wrapper .step-col.active .step-label,
.gform_wrapper .step-col.active .step-title {
    color: #3498db !important;
    font-weight: 600;
}

/* Step numbers below labels */
.gform_wrapper .step-category-number,
.gform_wrapper .step-section-number,
.gform_wrapper [class*="step-category-number"],
.gform_wrapper [class*="step-section-number"] {
    font-size: 14px;
    color: #7f8c8d;
    font-weight: 400;
    margin-top: 5px;
    display: block;
}

/* ==========================================================================
   ALTERNATIVE SELECTORS FOR GRID SYSTEM
   ========================================================================== */

/* Target any grid-like step indicator system */
.gform_wrapper [class*="grid"] [class*="step"],
.gform_wrapper [class*="grid"] [class*="column"],
.gform_wrapper [class*="grid"] [class*="col"] {
    text-align: center;
    margin: 10px 0;
}

/* Target numbered circles in any grid */
.gform_wrapper [class*="grid"] [class*="circle"],
.gform_wrapper [class*="grid"] [class*="number"],
.gform_wrapper [class*="grid"] [class*="step"] [class*="circle"],
.gform_wrapper [class*="grid"] [class*="step"] [class*="number"] {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    margin: 5px auto;
    display: inline-block;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Active state for any grid-based step */
.gform_wrapper [class*="grid"] [class*="active"] [class*="circle"],
.gform_wrapper [class*="grid"] [class*="active"] [class*="number"],
.gform_wrapper [class*="grid"] [class*="step"][class*="active"] [class*="circle"],
.gform_wrapper [class*="grid"] [class*="step"][class*="active"] [class*="number"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #3498db !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

/* Inactive state for any grid-based step */
.gform_wrapper [class*="grid"] [class*="circle"]:not([class*="active"]),
.gform_wrapper [class*="grid"] [class*="number"]:not([class*="active"]),
.gform_wrapper [class*="grid"] [class*="step"]:not([class*="active"]) [class*="circle"],
.gform_wrapper [class*="grid"] [class*="step"]:not([class*="active"]) [class*="number"] {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* ==========================================================================
   ENHANCED GRID STEP INDICATOR STYLING
   ========================================================================== */

/* Hover effects for step circles */
.gform_wrapper .step-circle:hover,
.gform_wrapper .step-number:hover,
.gform_wrapper [class*="step-circle"]:hover,
.gform_wrapper [class*="step-number"]:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Active step with blue checkmark or indicator */
.gform_wrapper .step-circle.active::after,
.gform_wrapper .step-number.active::after,
.gform_wrapper [class*="step-circle"].active::after,
.gform_wrapper [class*="step-number"].active::after {
    content: "✓";
    position: absolute;
    top: -5px;
    right: -5px;
    background: #3498db;
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
}

/* ==========================================================================
   RESPONSIVE GRID STEP INDICATORS
   ========================================================================== */

@media (max-width: 768px) {
    .gform_wrapper .step-grid,
    .gform_wrapper .step-indicator-grid,
    .gform_wrapper [class*="step-grid"],
    .gform_wrapper [class*="step-indicator-grid"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
    
    .gform_wrapper .step-column,
    .gform_wrapper .step-col,
    .gform_wrapper [class*="step-column"],
    .gform_wrapper [class*="step-col"] {
        margin: 5px 0;
    }
}

@media (max-width: 480px) {
    .gform_wrapper .step-grid,
    .gform_wrapper .step-indicator-grid,
    .gform_wrapper [class*="step-grid"],
    .gform_wrapper [class*="step-indicator-grid"] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
}

/* ==========================================================================
   STEP CHECKMARK AND ENHANCED STYLING
   ========================================================================== */

/* Step checkmark styling */
.step-checkmark {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #3498db;
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Alternative checkmark positioning for different layouts */
.gform_wrapper .step-column .step-checkmark,
.gform_wrapper .step-col .step-checkmark,
.gform_wrapper [class*="step-column"] .step-checkmark,
.gform_wrapper [class*="step-col"] .step-checkmark {
    position: absolute;
    top: -5px;
    right: -5px;
}

/* Checkmark for grid-based steps */
.gform_wrapper [class*="grid"] [class*="step"] .step-checkmark,
.gform_wrapper [class*="grid"] [class*="column"] .step-checkmark,
.gform_wrapper [class*="grid"] [class*="col"] .step-checkmark {
    position: absolute;
    top: -5px;
    right: -5px;
}

/* ==========================================================================
   ADDITIONAL GRID STEP INDICATOR STYLING
   ========================================================================== */

/* Ensure step containers are positioned relatively for checkmark positioning */
.gform_wrapper .step-column,
.gform_wrapper .step-col,
.gform_wrapper [class*="step-column"],
.gform_wrapper [class*="step-col"],
.gform_wrapper [class*="grid"] [class*="step"],
.gform_wrapper [class*="grid"] [class*="column"],
.gform_wrapper [class*="grid"] [class*="col"] {
    position: relative;
}

/* Enhanced active step styling */
.gform_wrapper .step-circle.active,
.gform_wrapper .step-number.active,
.gform_wrapper [class*="step-circle"].active,
.gform_wrapper [class*="step-number"].active {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Active step glow effect */
.gform_wrapper .step-column.active .step-circle,
.gform_wrapper .step-column.active .step-number,
.gform_wrapper .step-col.active .step-circle,
.gform_wrapper .step-col.active .step-number {
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.7);
}

/* ==========================================================================
   FALLBACK STYLES FOR UNKNOWN STEP INDICATOR SYSTEMS
   ========================================================================== */

/* Target any element that might be a step indicator */
.gform_wrapper [class*="step"],
.gform_wrapper [class*="indicator"],
.gform_wrapper [class*="pagination"] {
    position: relative;
}

/* Target any numbered elements */
.gform_wrapper [class*="step"] [class*="circle"],
.gform_wrapper [class*="step"] [class*="number"],
.gform_wrapper [class*="indicator"] [class*="circle"],
.gform_wrapper [class*="indicator"] [class*="number"],
.gform_wrapper [class*="pagination"] [class*="circle"],
.gform_wrapper [class*="pagination"] [class*="number"] {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    margin: 5px auto;
    display: inline-block;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Active state for any step system */
.gform_wrapper [class*="step"].active [class*="circle"],
.gform_wrapper [class*="step"].active [class*="number"],
.gform_wrapper [class*="indicator"].active [class*="circle"],
.gform_wrapper [class*="indicator"].active [class*="number"],
.gform_wrapper [class*="pagination"].active [class*="circle"],
.gform_wrapper [class*="pagination"].active [class*="number"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #3498db !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

/* Inactive state for any step system */
.gform_wrapper [class*="step"]:not(.active) [class*="circle"],
.gform_wrapper [class*="step"]:not(.active) [class*="number"],
.gform_wrapper [class*="indicator"]:not(.active) [class*="circle"],
.gform_wrapper [class*="indicator"]:not(.active) [class*="number"],
.gform_wrapper [class*="pagination"]:not(.active) [class*="circle"],
.gform_wrapper [class*="pagination"]:not(.active) [class*="number"] {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* ==========================================================================
   STEP STATES: completed, active, upcoming
   ========================================================================== */

/* Base circle */
.gform_wrapper .step-circle,
.gform_wrapper .step-number,
.gform_wrapper [class*="step-circle"],
.gform_wrapper [class*="step-number"] {
    position: relative;
}

/* Completed: solid blue with white check */
.gform_wrapper .completed .step-circle,
.gform_wrapper .completed .step-number,
.gform_wrapper [class*="completed"] [class*="circle"],
.gform_wrapper [class*="completed"] [class*="number"] {
    background: #0d47a1 !important; /* deep blue */
    color: #ffffff !important;
    border-color: #1e88e5 !important;
}

/* Active: white center with blue ring */
.gform_wrapper .active .step-circle,
.gform_wrapper .active .step-number,
.gform_wrapper [class*="active"] [class*="circle"],
.gform_wrapper [class*="active"] [class*="number"] {
    background: #ffffff !important;
    color: #0d47a1 !important;
    border-color: #1e88e5 !important;
    box-shadow: 0 0 0 3px rgba(30,136,229,0.2);
}

/* Upcoming: neutral grey */
.gform_wrapper .upcoming .step-circle,
.gform_wrapper .upcoming .step-number,
.gform_wrapper [class*="upcoming"] [class*="circle"],
.gform_wrapper [class*="upcoming"] [class*="number"] {
    background: #8e9aa6 !important;
    color: #ffffff !important;
    border-color: #8e9aa6 !important;
}

/* Ensure checkmark renders on completed */
.gform_wrapper .completed .step-checkmark {
    display: block;
}

/* Hide checkmark unless completed */
.gform_wrapper .step-checkmark { display:none; }
.gform-tooltip-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #666;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    margin-left: 5px;
    cursor: help;
    position: relative;
    vertical-align: middle;
}

.gform-tooltip-icon:hover {
    background: #333;
}

.gform_wrapper .gform-tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    text-align: left;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 9999;
    width: 280px;
    max-width: 90vw;
    font-size: 13px;
    line-height: 1.5;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    white-space: normal;
    word-wrap: break-word;
}

.gform_wrapper .gform-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.gform_wrapper .gform-tooltip-icon:hover .gform-tooltip-content {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .gform_wrapper .gform-tooltip-content {
        width: 240px;
        font-size: 12px;
        padding: 8px 12px;
        bottom: calc(100% + 5px);
    }
}

/* Fix for positioning issues in different containers */
.gform_wrapper .gfield_label {
    position: relative;
}

/* Ensure tooltip doesn't get cut off */
.gform_wrapper .gform_body .gform_fields .gfield {
    overflow: visible !important;
}

/* Alternative positioning for edge cases */
.gform_wrapper .gform-tooltip-icon.edge-case .gform-tooltip-content {
    bottom: auto;
    top: calc(100% + 8px);
}

.gform_wrapper .gform-tooltip-icon.edge-case .gform-tooltip-content::after {
    top: -6px;
    border-color: transparent transparent #333 transparent;
}
.gform_wrapper .gfield_description.instruction {
    display: none;
}