/* ============================================================
   GRAVITY FORMS — GLOBAL FIELD STYLING WITH SHADOWS
   Enqueue this AFTER Gravity Forms' own stylesheets so it wins
   the cascade without needing !important on basic layouts.
   ============================================================ */

/* ---- Base variables (edit these, rest of file uses them) ---- */
.gform_wrapper {
    --gf-border-color: #d0d5dd;
    --gf-border-color-focus: #0a3144;
    --gf-border-radius: 5px;
    --gf-text-color: #1a1f36;
    --gf-label-color: #1a1f36;
    --gf-placeholder-color: #98a2b3;
    --gf-error-color: #dc2626;
    --gf-error-bg: #fef2f2;
    --gf-accent-color: #0073aa;
    --gf-field-bg: #ffffff;
    --gf-field-height: 38px;       /* compact "sm" field size */
    --gf-font: 'Inter', sans-serif;

    /* Subtle modern shadow variables — enhanced for richer depth */
    --gf-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
    --gf-shadow-md: 0 6px 12px -2px rgba(16, 24, 40, 0.08), 0 3px 6px -2px rgba(16, 24, 40, 0.04);
    --gf-shadow-form: 0 24px 48px -8px rgba(16, 24, 40, 0.2), 0 10px 20px -4px rgba(16, 24, 40, 0.1);
}

/* ---- Layout / spacing ---- */
.gform_wrapper form {
    font-family: var(--gf-font);
}
.gform_wrapper .gform_fields { row-gap: 18px; }
.gform_wrapper .gfield { margin-bottom: 16px; }

/* Global Form Container Drop Shadow styling */
.gform_wrapper {
    background: #ffffff;
    padding: 32px;
    border-radius: calc(var(--gf-border-radius) * 2);
    border: 1px solid var(--gf-border-color);
    box-shadow: var(--gf-shadow-form); /* Adds deep, clean modern depth to the form box */
}

/* ---- Labels (applies to every field type) ---- */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gform_fileupload_rules,
.gform_wrapper label.gfield_consent_label {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: var(--gf-label-color);
    margin-bottom: 5px;
}
.gform_wrapper .gfield_required { color: var(--gf-error-color); margin-left: 3px; }
.gform_wrapper .gfield_description { font-size: 0.78rem; color: #667085; margin-top: 4px; }

/* ---- Every text-like input ---- */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=number],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=password],
.gform_wrapper input[type=date],
.gform_wrapper input[type=time],
.gform_wrapper input[type=search],
.gform_wrapper .ginput_container input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper .chosen-container .chosen-single {
    width: 100%;
    min-height: var(--gf-field-height);
    padding: 8px 12px;
    background: var(--gf-field-bg);
    border: 1px solid var(--gf-border-color);
    border-radius: var(--gf-border-radius);
    color: var(--gf-text-color);
    font-family: var(--gf-font);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: var(--gf-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gform_wrapper textarea { min-height: 96px; padding-top: 10px; resize: vertical; }

/* ---- Product fields ONLY ---- */
.gform_wrapper .gfield.gfield_price input,
.gform_wrapper .gfield.gfield_quantity input,
.gform_wrapper .gfield.gfield_product input,
.gform_wrapper .gfield.gfield_product select,
.gform_wrapper .gfield.gfield_shipping input,
.gform_wrapper .gfield.gfield_shipping select {
    max-width: 220px;
}

/* Placeholder text */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--gf-placeholder-color);
    opacity: 1;
}

/* Hover state */
.gform_wrapper input:not(:disabled):not(:focus):hover,
.gform_wrapper textarea:not(:disabled):not(:focus):hover,
.gform_wrapper select:not(:disabled):hover {
    border-color: #98a2b3;
}

/* Focus state */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus,
.gform_wrapper .chosen-container-active .chosen-single {
    border-color: var(--gf-border-color-focus);
    box-shadow: 0 0 0 1px var(--gf-border-color-focus), 0 0 0 3px rgba(10, 49, 68, 0.1) !important;
    outline: none;
}

/* Disabled / readonly */
.gform_wrapper input:disabled,
.gform_wrapper textarea:disabled,
.gform_wrapper select:disabled {
    background: #f2f4f7;
    color: #98a2b3;
    cursor: not-allowed;
    box-shadow: none;
}

/* Dropdowns */
.gform_wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.gform_wrapper select[multiple] { background-image: none; padding-right: 12px; min-height: 90px; }
.gform_wrapper .chosen-container { width: 100% !important; }
.gform_wrapper .chosen-container .chosen-drop { border-color: var(--gf-border-color); border-radius: var(--gf-border-radius); box-shadow: var(--gf-shadow-md); }
.gform_wrapper .chosen-container .chosen-results li.highlighted { background: var(--gf-accent-color); }

/* ---- Date field ---- */
.gform_wrapper .ginput_container_date input.datepicker {
    width: 100%;
    text-align: left;
}
.gform_wrapper .gfield_date_month input,
.gform_wrapper .gfield_date_day input,
.gform_wrapper .gfield_date_year input,
.gform_wrapper .ginput_container_date > span:not(.datepicker_icon) input {
    width: 62px;
    text-align: center;
}
.gform_wrapper .ginput_container_date {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Time field ---- */
.gform_wrapper .ginput_container_time {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gform_wrapper .ginput_container_time input {
    width: 54px;
    text-align: center;
}
.gform_wrapper .gfield_date_dropdown_day select,
.gform_wrapper .gfield_date_dropdown_month select,
.gform_wrapper .gfield_date_dropdown_year select { width: auto; }

/* ---- Name field ---- */
.gform_wrapper .ginput_complex,
.gform_wrapper .ginput_container_name,
.gform_wrapper .ginput_container_address {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.gform_wrapper .ginput_complex > span,
.gform_wrapper .name_first,
.gform_wrapper .name_last,
.gform_wrapper .address_line_1,
.gform_wrapper .address_line_2,
.gform_wrapper .address_city,
.gform_wrapper .address_state,
.gform_wrapper .address_zip,
.gform_wrapper .address_country {
    flex: 1 1 180px;
}
.gform_wrapper .ginput_complex label,
.gform_wrapper .ginput_full label { font-weight: 400; font-size: 0.78rem; color: #667085; margin-top: 4px; }

/* ---- List field ---- */
/* .gform_wrapper table.gfield_list {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gf-border-color);
    border-radius: var(--gf-border-radius);
    overflow: hidden;
} */

/* ---- List field ---- */
.gform_wrapper table.gfield_list {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gf-border-color);
    border-radius: var(--gf-border-radius);
    overflow: visible;   /* was: hidden — let cells scroll/expand instead of clipping */
}

.gform_wrapper table.gfield_list th {
    background: #f9fafb;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #667085;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gf-border-color);
}
.gform_wrapper table.gfield_list td { padding: 6px 10px; }
.gform_wrapper .add_list_item,
.gform_wrapper .delete_list_item { cursor: pointer; }

/* ---- File upload ---- */
.gform_wrapper .ginput_container_fileupload input[type=file] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--gf-border-color);
    border-radius: var(--gf-border-radius);
    background: #f9fafb;
    min-height: 0;
    box-shadow: none;
}
.gform_wrapper .gform_drop_area {
    border: 1px dashed var(--gf-border-color);
    border-radius: var(--gf-border-radius);
    padding: 20px;
    text-align: center;
}

/* ---- Range/slider ---- */
.gform_wrapper input[type=range] { accent-color: var(--gf-accent-color); }

/* ---- Consent field ---- */
.gform_wrapper .gfield_consent_label { display: inline; margin-left: 8px; }

/* ---- Section & HTML fields ---- */
.gform_wrapper .gsection { border-bottom: 1px solid #e4e7ec; padding-bottom: 6px; margin-bottom: 16px; }
.gform_wrapper .gsection_title { font-size: 1.05rem; font-weight: 600; color: var(--gf-text-color); }
.gform_wrapper .gsection_description { color: #667085; font-size: 0.82rem; }

/* ---- Validation / error states ---- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: var(--gf-error-color);
    background: var(--gf-error-bg);
    box-shadow: none;
}
.gform_wrapper .validation_message,
.gform_wrapper .gfield_description.validation_message {
    color: var(--gf-error-color);
    font-size: 0.78rem;
    margin-top: 4px;
}
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
    border: 1px solid var(--gf-error-color);
    background: var(--gf-error-bg);
    color: var(--gf-error-color);
    border-radius: var(--gf-border-radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: var(--gf-shadow-sm);
}

/* ---- Submit / Next / Previous buttons (Option B: Elongated Pillars + Strict Hovers) ---- */
body .gform_wrapper .gform_footer input.gform_button,
body .gform_wrapper .gform_footer button.gform_button,
body .gform_wrapper .gform_page_footer input.button,
body .gform_wrapper input[type=submit] {
    min-width: 220px !important;                
    padding: 10px 54px !important;              
    background: var(--gf-accent-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 45px !important;            
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--gf-shadow-md) !important; 
    text-shadow: none !important;
    transition: background .15s ease, transform 0.1s ease, box-shadow .15s ease !important;
}

/* Target explicit variations of hover elements aggressively to override core styles */
body .gform_wrapper .gform_footer input.gform_button:hover,
body .gform_wrapper .gform_footer button.gform_button:hover,
body .gform_wrapper .gform_page_footer input.button:hover,
body .gform_wrapper input[type=submit]:hover {
    background: #005a87 !important;            /* Distinct darker blue hover shift */
    box-shadow: var(--gf-shadow-sm) !important; /* Slightly compresses shadow to simulate physically stepping down */
}

body .gform_wrapper .gform_footer input.gform_button:active,
body .gform_wrapper input[type=submit]:active {
    transform: translateY(1px) !important;
}

body .gform_wrapper .gform_previous_button {
    min-width: 220px !important;
    padding: 10px 54px !important;
    background: #fff !important;
    color: var(--gf-text-color) !important;
    border: 1.5px solid var(--gf-border-color) !important;
    border-radius: 45px !important;            
    box-shadow: var(--gf-shadow-sm) !important;
    font-size: 0.88rem !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

/* Secondary/Back button hover state */
body .gform_wrapper .gform_previous_button:hover {
    background: #f9fafb !important;
    border-color: #98a2b3 !important;
    color: var(--gf-border-color-focus) !important;
}

/* ---- Multi-page progress bar ---- */
.gform_wrapper .gf_progressbar_wrapper .gf_progressbar_percentage {
    background: var(--gf-accent-color);
    border-radius: var(--gf-border-radius);
}

/* ---- Confirmation message ---- */
.gform_confirmation_message,
.gform_wrapper .gform_confirmation_message {
    padding: 16px 18px;
    border-radius: var(--gf-border-radius);
    background: #ecfdf3;
    color: #027a48;
    border: 1.5px solid #a6f4c5;
    box-shadow: var(--gf-shadow-md);
}