/* ==========================================================================
   ElementX Form - Base Styling
   ========================================================================== */

/* Base Form Wrapper */
.elementx-form-wrapper {
    position: relative;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Uploaded Files List (Already exists above)
   -------------------------------------------------------------------------- */
.exb-file-remove:hover {
    background: #ffe6e6;
    color: #ff4d4f;
}

/* --------------------------------------------------------------------------
   Layout Specific Styles
   -------------------------------------------------------------------------- */

/* Layout 1 (Default Vertical Dropzone) */
.exb-layout-1 .exb-internal-labels { display: none !important; }
.exb-layout-1 .exb-dropzone-left-group { display: contents; }
.exb-layout-1 .exb-dropzone-max-size { order: 10; margin-top: 12px; }

/* Layout 2 (Compact Horizontal) */
.exb-layout-2 .exb-external-labels { display: none !important; }
.exb-layout-2 .exb-dropzone-title,
.exb-layout-2 .exb-dropzone-or,
.exb-layout-2 .exb-dropzone-max-size { display: none !important; }

.exb-layout-2 .exb-upload-dropzone {
    border-style: solid;
    padding: 16px 24px;
    border-color: #eaeaea;
    background-color: #ffffff;
}

.exb-layout-2 .exb-dropzone-content {
    flex-direction: row;
    justify-content: space-between;
}

.exb-layout-2 .exb-dropzone-left-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.exb-layout-2 .exb-internal-labels {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.exb-layout-2 .exb-form-label {
    margin-bottom: 2px;
    font-size: 15px;
    font-weight: 600;
}

.exb-layout-2 .exb-form-sub-label {
    margin-bottom: 0;
    font-size: 13px;
    color: #777;
}

.exb-layout-2 .exb-dropzone-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    background-color: #f6f0ff; /* Purple tint matching the image */
    color: #1B00FF;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Message Styles
   -------------------------------------------------------------------------- */
.exb-form-message {
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.exb-form-message.exb-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.exb-form-message.exb-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* --------------------------------------------------------------------------
   Password Features (Toggle & Strength)
   -------------------------------------------------------------------------- */
.ex-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.ex-input-with-icon input {
    flex-grow: 1;
    padding-right: 40px; /* Make room for the eye icon */
}

.ex-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    background: transparent;
    border: none !important;
    outline: none !important;
    color: #777;
    cursor: pointer;
    font-size: 16px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.ex-password-toggle:focus {
    outline: none !important;
    border: none !important;
}

.ex-password-toggle:hover {
    color: #333;
}

.ex-password-strength-meter {
    margin-top: 5px;
    font-size: 12px;
}

.ex-password-strength-bar {
    height: 4px;
    width: 100%;
    background-color: #eee;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
    position: relative;
}

.ex-password-strength-bar::before {
    content: '';
    display: block;
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.ex-password-strength-bar[data-strength="1"]::before { width: 25%; background-color: #ff4b4b; }
.ex-password-strength-bar[data-strength="2"]::before { width: 50%; background-color: #f9a826; }
.ex-password-strength-bar[data-strength="3"]::before { width: 75%; background-color: #2bca7e; }
.ex-password-strength-bar[data-strength="4"]::before { width: 100%; background-color: #00d282; }

.ex-password-strength-text {
    color: #666;
}

/* --------------------------------------------------------------------------
   Input Icon Styles
   -------------------------------------------------------------------------- */
.ex-input-wrapper {
    position: relative;
    width: 100%;
}
.ex-input-icon {
    position: absolute;
    left: var(--ex-input-padding-left, 15px); /* Dynamically moves with input padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.3s ease;
    z-index: 2;
    pointer-events: none; /* Let clicks pass through to input */
}

.ex-dropdown-arrow {
    position: absolute;
    right: var(--ex-input-padding-right, 15px); /* Dynamically moves with input padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    pointer-events: none;
    z-index: 2;
}

select.ex-form-input {
    padding-right: calc(var(--ex-input-padding-right, 15px) + 20px) !important;
}

.ex-input-icon i,
.ex-input-icon svg {
    font-size: 16px;
    width: 1em;
    height: 1em;
}

.ex-has-icon .ex-form-input:not(.iti__tel-input) {
    padding-left: calc(var(--ex-input-padding-left, 15px) + var(--ex-icon-spacing, 10px) + 20px) !important;
}

/* Remove default browser focus outline */
.ex-form-input:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Email Typo Suggestion & Validation Styles
   -------------------------------------------------------------------------- */
.ex-email-suggestion {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

.ex-suggestion-link {
    color: #0073e6;
    cursor: pointer;
    text-decoration: underline;
}

.ex-email-error-message {
    font-size: 13px;
    color: #ff4b4b;
    margin-top: 5px;
}

.ex-form-input.ex-error,
.ex-has-error .ex-form-input {
    border-color: #ff4b4b !important;
}

/* --------------------------------------------------------------------------
   Password Checklist & Match Styles
   -------------------------------------------------------------------------- */
.ex-password-checklist {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    font-size: 12px;
    color: #666;
}

.ex-password-checklist li {
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.ex-password-checklist-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ex-password-checklist-inline li {
    margin-bottom: 0;
    white-space: nowrap;
}

.ex-password-checklist li.ex-valid {
    color: #2bca7e; /* Overridden by settings if provided */
}

.ex-caps-warning {
    color: #ff4b4b; /* Overridden by settings if provided */
    font-size: 12px;
    margin-top: 5px;
}

.ex-password-match-error {
    color: #ff4b4b; /* Overridden by settings if provided */
    font-size: 12px;
    margin-top: 5px;
}

/* ==========================================================================
   10. Advanced Phone Field (Intl-Tel-Input)
   ========================================================================== */
.ex-input-wrapper .iti {
    width: 100%;
}
.ex-input-wrapper .iti__country-container {
    z-index: 4;
}
.ex-input-wrapper .iti__selected-country {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 10px !important;
    height: 100% !important;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    color: inherit !important;
}
.ex-input-wrapper .iti__selected-dial-code {
    color: var(--ex-text-color, #333) !important;
}
.ex-input-wrapper .iti__arrow {
    border-top-color: var(--ex-text-color, #333) !important;
}
.ex-input-wrapper .iti__dropdown-content {
    /* Let intlTelInput handle position natively, we will inject width via JS */
    overflow: hidden !important;
}
.ex-input-wrapper .iti__search-input {
    padding: 7px 10px !important;
    border-radius: 0px !important;
    border: 1px solid #C5C5C5;
}
.ex-input-wrapper .iti__search-input:focus {
    outline: none !important;
}
.ex-input-wrapper .iti__country-list {
    white-space: normal;
    z-index: 9999;
    border: 1px solid var(--ex-border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: var(--ex-border-radius);
    background-color: var(--ex-bg-color);
    color: var(--ex-text-color);
}
.ex-input-wrapper .iti__country-list .iti__country {
    padding: 8px 10px;
    font-size: 14px;
}
.ex-input-wrapper .iti__country-list .iti__country.iti__highlight {
    background-color: rgba(0,0,0,0.05);
}
.ex-input-wrapper .iti__country-list .iti__divider {
    border-bottom: 1px solid var(--ex-border-color);
}
.ex-phone-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #dc3232;
    animation: exFadeIn 0.3s ease;
}

/* ==========================================================================
   Checkbox Widget Styles
   ========================================================================== */

/* Layout */
.ex-checkbox-group {
    display: flex;
    gap: var(--ex-checkbox-group-gap, 15px);
}

.ex-layout-block .ex-checkbox-group {
    flex-direction: column;
}

.ex-layout-inline .ex-checkbox-group {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Item */
.ex-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--ex-checkbox-text-gap, 8px);
    cursor: pointer;
}

/* Checkbox (Appearance None) */
.ex-checkbox-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--ex-checkbox-bg, #fff);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: var(--ex-checkbox-size, 18px);
    height: var(--ex-checkbox-size, 18px);
    border: var(--ex-checkbox-border-width, 1px) solid var(--ex-checkbox-border-color, #ccc);
    border-radius: var(--ex-checkbox-border-radius, 4px);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Checked State - Background & Border */
.ex-checkbox-item input[type="checkbox"]:checked {
    background-color: var(--ex-checkbox-checked-bg, #1B00FF);
    border-color: var(--ex-checkbox-checked-border-color, #1B00FF);
}

/* Checkmark Icon (Clip-path inside ::before) */
.ex-checkbox-item input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--ex-checkbox-checkmark-color, #ffffff);
    transform-origin: center;
    /* Custom SVG Checkmark Path */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Show checkmark when checked */
.ex-checkbox-item input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Checkbox Text Label */
.ex-checkbox-label {
    cursor: pointer;
}

/* ==========================================================================
   Radio Widget Styles
   ========================================================================== */

/* Layout */
.ex-radio-group {
    display: flex;
    gap: var(--ex-radio-group-gap, 15px);
}

.ex-layout-block .ex-radio-group {
    flex-direction: column;
}

.ex-layout-inline .ex-radio-group {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Item */
.ex-radio-item {
    display: flex;
    align-items: center;
    gap: var(--ex-radio-text-gap, 8px);
    cursor: pointer;
}

/* Radio (Appearance None) */
.ex-radio-item input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--ex-radio-bg, #fff);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: var(--ex-radio-size, 18px);
    height: var(--ex-radio-size, 18px);
    border: var(--ex-radio-border-width, 1px) solid var(--ex-radio-border-color, #ccc);
    border-radius: 50%;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Checked State - Background & Border */
.ex-radio-item input[type="radio"]:checked {
    background-color: var(--ex-radio-checked-bg, transparent);
    border-color: var(--ex-radio-checked-border-color, #1B00FF);
    border-width: var(--ex-radio-checked-border-width, var(--ex-radio-border-width, 1px));
}

/* Inner Dot (Clip-path inside ::before) */
.ex-radio-item input[type="radio"]::before {
    content: "";
    width: var(--ex-radio-dot-size, 50%);
    height: var(--ex-radio-dot-size, 50%);
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--ex-radio-dot-color, #1B00FF);
    transform-origin: center;
}

/* Show dot when checked */
.ex-radio-item input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Radio Text Label */
.ex-radio-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Radio Widget Presets
   ========================================================================== */

/* Preset: Square Dot */
.ex-radio-preset-square_dot .ex-radio-item input[type="radio"] {
    border-radius: 4px;
}
.ex-radio-preset-square_dot .ex-radio-item input[type="radio"]::before {
    border-radius: 2px;
}

/* Preset: Circle Checkmark */
.ex-radio-preset-circle_check .ex-radio-item input[type="radio"]::before {
    border-radius: 0 !important;
    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
.ex-radio-preset-circle_check .ex-radio-item input[type="radio"]:checked::before {
    transform: scale(1.4) !important;
}

/* Preset: Square Checkmark */
.ex-radio-preset-square_check .ex-radio-item input[type="radio"] {
    border-radius: 4px !important;
}
.ex-radio-preset-square_check .ex-radio-item input[type="radio"]::before {
    border-radius: 0 !important;
    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
.ex-radio-preset-square_check .ex-radio-item input[type="radio"]:checked::before {
    transform: scale(1.4) !important;
}

/* ==========================================================================
   Date & Time Picker Widget
   ========================================================================== */

/* Modernizing Native Date Picker Icon */
.exb-date-picker-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1; /* Override native browser dimming */
}

/* For Date and Datetime */
.exb-date-picker-input[type="date"]::-webkit-calendar-picker-indicator,
.exb-date-picker-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-color: var(--ex-calendar-icon-color, #666);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

/* For Time */
.exb-date-picker-input[type="time"]::-webkit-calendar-picker-indicator {
    background-color: var(--ex-calendar-icon-color, #666);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

/* ==========================================================================
   Premium Flatpickr Theme (Vibrant Blue / Ant Design Style)
   ========================================================================== */

/* Variables for easy theming */
:root {
    --fx-primary: #1677ff; /* Vibrant Blue */
    --fx-primary-shadow: rgba(22, 119, 255, 0.3);
    --fx-bg: #ffffff;
    --fx-surface: #f8fafc;
    --fx-surface-hover: #f1f5f9;
    --fx-border: #f1f5f9;
    --fx-border-dark: #e2e8f0;
    --fx-text: #0f172a;
    --fx-text-muted: #64748b;
    --fx-text-light: #cbd5e1;
}

/* Calendar Container */
.flatpickr-calendar {
    background: var(--fx-bg) !important;
    border: 1px solid var(--fx-border) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    font-family: inherit ;
    width: 320px !important;
    padding: 10px 0 0 0 !important;
}
.flatpickr-calendar:before, .flatpickr-calendar:after {
    display: none !important; /* Hide pointers */
}

/* Months Header */
.flatpickr-months {
    padding: 0 16px 12px 16px !important;
    display: flex !important;
    align-items: center !important;
}
.flatpickr-month {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flatpickr-current-month {
    font-size: 110% ;
    font-weight: 700 ;
    color: var(--fx-text) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
.flatpickr-current-month .numInputWrapper {
    width: 60px;
}
.flatpickr-current-month input.cur-year {
    font-weight: 700 ;
    color: var(--fx-text) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 700 ;
    background: transparent !important;
    border-radius: 6px;
    padding: 2px;
    appearance: none;
    -webkit-appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: transparent !important;
}

/* Left / Right Arrows (Styled like the screenshot squircles) */
.flatpickr-prev-month, .flatpickr-next-month {
    position: static !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-border) !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    background: var(--fx-surface-hover) !important;
    border-color: var(--fx-border-dark) !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg {
    fill: var(--fx-primary) !important; /* Blue icons */
    width: 12px !important;
    height: 12px !important;
}

/* Weekdays */
.flatpickr-weekdays {
    height: 36px !important;
}
span.flatpickr-weekday {
    color: var(--fx-text-muted) !important;
    font-weight: 600 ;
    font-size: 13px ;
}

/* Days */
.flatpickr-days {
    width: 100% !important;
}
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px 12px 12px !important;
    box-sizing: border-box !important;
}
.flatpickr-day, 
.flatpickr-day.nextMonthDay, 
.flatpickr-day.prevMonthDay {
    color: var(--fx-text) !important;
}
.flatpickr-day {
    border-radius: 10px !important; /* Squircle */
    font-weight: 500 ;
    font-size: 14px ;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
    margin: 2px 0 !important;
    max-width: 38px !important;
    height: 38px !important;
    line-height: 38px ;
}
.flatpickr-day:hover {
    background: var(--fx-surface-hover) !important;
    border-color: var(--fx-surface-hover) !important;
    color: var(--fx-text) !important;
}
.flatpickr-day.today {
    border-color: var(--fx-border-dark) !important;
    background: var(--fx-surface) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
    background: var(--fx-primary) !important;
    border-color: var(--fx-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--fx-primary-shadow) !important;
    font-weight: 600 ;
}
.flatpickr-day.disabled {
    color: var(--fx-text-light) !important;
    background: transparent !important;
}

/* Time Picker Section - Boxed with Spinners */
.flatpickr-time {
    border-top: 1px solid var(--fx-border) !important;
    height: 64px !important;
    max-height: 64px !important;
    line-height: 64px ;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    gap: 8px !important;
}

/* Time Inputs Wrapper */
.flatpickr-time .numInputWrapper {
    height: 40px !important;
    width: 70px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--fx-border-dark) !important;
    border-radius: 8px !important;
    background: var(--fx-bg) !important;
    display: flex !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}
.flatpickr-time .numInputWrapper:hover {
    border-color: var(--fx-primary) !important;
}

/* Actual Input inside Box */
.flatpickr-time input {
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px ;
    outline: none !important;
    color: var(--fx-text) !important;
    font-weight: 600 ;
    font-size: 15px ;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    -webkit-appearance: none !important;
}

/* Bring back the custom Flatpickr spinners but make them blue */
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
    display: block !important;
    border-left: 1px solid var(--fx-border) !important;
    width: 20px !important;
    right: 0 !important;
    background: var(--fx-surface) !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:hover,
.flatpickr-time .numInputWrapper span.arrowDown:hover {
    background: var(--fx-surface-hover) !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--fx-primary) !important;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--fx-primary) !important;
}

/* Hide Native Browser Spinners */
.flatpickr-time input::-webkit-outer-spin-button,
.flatpickr-time input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.flatpickr-time input[type=number] {
  -moz-appearance: textfield !important;
}

/* Separator */
.flatpickr-time .flatpickr-time-separator {
    color: var(--fx-text) !important;
    font-weight: 700 ;
    font-size: 16px ;
    height: 40px !important;
    line-height: 40px ;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* AM / PM Toggle (Solid Blue Pill) */
.flatpickr-time .flatpickr-am-pm {
    height: 40px !important;
    line-height: 40px ;
    color: #ffffff !important;
    font-weight: 600 ;
    font-size: 14px ;
    background: var(--fx-primary) !important;
    border: none !important;
    width: 50px !important;
    text-align: center !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    margin-left: auto !important; /* Push to right */
    box-shadow: 0 4px 10px var(--fx-primary-shadow) !important;
}

.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus {
    background: #0958d9 !important; /* Darker blue */
}

/* Hide top border of time section when only time picker is used (no calendar) */
.flatpickr-calendar.noCalendar .flatpickr-time {
    border-top: none !important;
}

/* Style Year Hover State in Calendar Header */
.flatpickr-current-month .numInputWrapper:hover {
    background: transparent !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    border: none !important;
    background: transparent !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--fx-text) !important;
    opacity: 0.7;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--fx-text) !important;
    opacity: 0.7;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:hover:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:hover:after {
    opacity: 1;
}

/* Style Year Hover State in Calendar Header */
.flatpickr-current-month .numInputWrapper:hover {
    background: transparent !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    border: none !important;
    background: transparent !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:hover,
.flatpickr-current-month .numInputWrapper span.arrowDown:hover {
    opacity: 1;
}


/* Default Font Weight for all Form Labels */
.ex-form-label,
.exb-field-label,
.ex-checkbox-label,
.ex-radio-label,
.exb-form-label {
    font-weight: 500;
}

/* ==========================================================================
   ElementX Submit Button Advanced Styles
   ========================================================================== */

/* Wrapper and Block Button */
.ex-form-submit-wrapper {
    position: relative;
    width: auto;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Responsive Justified Button Alignment */
.elementor-align-justify .ex-form-submit-wrapper,
.elementor-align-tablet-justify .ex-form-submit-wrapper,
.elementor-align-mobile-justify .ex-form-submit-wrapper {
    display: block;
    width: 100%;
}
.elementor-align-justify .ex-submit-button,
.elementor-align-tablet-justify .ex-submit-button,
.elementor-align-mobile-justify .ex-submit-button {
    width: 100%;
}

/* Base Submit Button */
button.ex-submit-button,
.ex-submit-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    outline: 0;
    box-shadow: none;
    background-color: #1B00FF; /* fallback */
    color: #fff;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
    z-index: 1;
}

/* Button Content Wrapper */
.ex-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Managed by settings */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ex-button-text {
    position: relative;
    z-index: 2;
}
.ex-align-icon-left, .ex-align-icon-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.ex-align-icon-left svg,
.ex-align-icon-right svg,
.ex-align-icon-left svg path,
.ex-align-icon-right svg path {
    fill: currentColor;
    color: currentColor;
}
.ex-align-icon-left i,
.ex-align-icon-right i {
    color: currentColor;
}


/* Loading State */
.ex-submit-button.ex-is-loading {
    pointer-events: none;
}
.ex-submit-button.ex-is-loading .ex-button-content-wrapper {
    opacity: 0;
    transform: scale(0.9);
}
.ex-button-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 3;
}
.ex-submit-button.ex-is-loading .ex-button-loader {
    opacity: 1;
    visibility: visible;
}

/* SVG Spinner Animation */
.ex-spinner {
    animation: ex-rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
}
.ex-spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: ex-dash 1.5s ease-in-out infinite;
}
@keyframes ex-rotate {
    100% { transform: rotate(360deg); }
}
@keyframes ex-dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* Success State */
.ex-submit-button.ex-is-success {
    pointer-events: none;
    background-color: #28a745 !important;
    color: #fff !important;
    border-color: #28a745 !important;
}
.ex-submit-button.ex-is-success .ex-button-content-wrapper,
.ex-submit-button.ex-is-success .ex-button-loader {
    opacity: 0;
    visibility: hidden;
}
.ex-button-success-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 24px;
    height: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 4;
}
.ex-submit-button.ex-is-success .ex-button-success-icon {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Error State */
.ex-submit-button.ex-is-error {
    animation: ex-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
@keyframes ex-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Shimmer Hover Effect (CSS Only) */
.ex-button-shimmer {
    position: relative;
    overflow: hidden;
}
.ex-button-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
    z-index: 10;
}
.ex-button-shimmer:hover::after {
    animation: ex-shimmer-sweep 0.75s ease-in-out;
}
@keyframes ex-shimmer-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ==========================================================================
   Modern Drag & Drop File Upload Widget Styles
   ========================================================================== */

.exb-file-upload-group {
    font-family: inherit;
}

.exb-form-sub-label {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 12px;
}

.exb-upload-dropzone {
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    background-color: #fafafa;
    text-align: center;
    padding: 30px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.exb-upload-dropzone:hover,
.exb-upload-dropzone.exb-dragover {
    border-color: #1B00FF;
    background-color: #f0f7ff;
}

.exb-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.exb-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.exb-dropzone-icon {
    width: 60px;
    height: 60px;
    background-color: #e6f7ff;
    color: #1B00FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.exb-dropzone-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.exb-dropzone-or {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}

.exb-form-group .exb-dropzone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1B00FF;
    background-color: transparent;
    border: 1px solid #1B00FF;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

.exb-form-group .exb-dropzone-btn:focus {
    outline: none;
    background-color: transparent;
    color: #1B00FF;
}

.exb-form-group .exb-dropzone-btn:hover,
.exb-form-group .exb-dropzone-btn:focus:hover {
    background-color: #1B00FF;
    color: #fff;
}

.exb-dropzone-max-size {
    font-size: 12px;
    color: #999;
    margin-top: 12px;
}

/* Uploaded Files Container */
.exb-uploaded-files-container {
    margin-top: 20px;
}

.exb-uploaded-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.exb-uploaded-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exb-file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.exb-file-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exb-file-icon {
    width: 40px;
    height: 40px;
    background-color: #ffebeb;
    color: #ff4d4f;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    position: relative;
}

.exb-file-icon svg {
    margin-bottom: 2px;
}

.exb-file-icon-pdf { background-color: #ffebeb; color: #ff4d4f; }
.exb-file-icon-img { background-color: #e6f7ff; color: #1890ff; }
.exb-file-icon-doc { background-color: #f0f5ff; color: #2f54eb; }
.exb-file-icon-generic { background-color: #f5f5f5; color: #595959; }

.exb-file-info {
    display: flex;
    flex-direction: column;
}

.exb-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exb-file-meta {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 2px;
}

.exb-file-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exb-file-success {
    color: #52c41a;
    display: flex;
    align-items: center;
}

.exb-file-remove {
    color: #8c8c8c;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exb-file-remove:hover {
    color: #ff4d4f;
    background-color: #fff1f0;
}
/* ==========================================================================
   Input Field Layout 2 (Icon Left with Inner Label)
   ========================================================================== */
.ex-form-field-wrapper.layout-2 {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Icon, Content, (optional) Eye toggle */
    grid-template-rows: auto auto;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    background-color: #fff;
    column-gap: 16px;
    transition: border-color 0.3s ease;
}

.ex-form-field-wrapper.layout-2:focus-within {
    border-color: #1B00FF;
}

.ex-form-field-wrapper.layout-2 .ex-input-wrapper {
    display: contents; /* Unwraps the input wrapper so children participate in grid */
}

/* Label: Top right of icon */
.ex-form-field-wrapper.layout-2 .ex-form-label {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a; /* Dark slate */
    display: block;
}

/* Input: Bottom right of icon */
.ex-form-field-wrapper.layout-2 .ex-form-input,
.ex-form-field-wrapper.layout-2 .iti {
    grid-column: 2;
    grid-row: 2;
    border: none !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    /* Do NOT set padding-left: 0 !important globally here, as intl-tel-input needs to dynamically set it */
    height: auto !important;
    font-size: 15px;
    color: #64748b;
    box-shadow: none !important;
    outline: none !important;
}

/* For normal inputs, set padding-left to 0 */
.ex-form-field-wrapper.layout-2 .ex-form-input:not(.iti__tel-input) {
    padding-left: 0 !important;
}

.ex-form-field-wrapper.layout-2 .ex-form-input::placeholder {
    color: #94a3b8;
}

/* Icon: Far left spanning both rows */
:where(.ex-form-field-wrapper.layout-2) .ex-input-icon {
    position: static !important;
    transform: none !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    color: #1B00FF; /* Brand color */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Default fallback size when Elementor editor styles temporarily drop during condition evaluation */
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Select Dropdown Arrow: Far right spanning both rows */
:where(.ex-form-field-wrapper.layout-2) .ex-dropdown-arrow {
    position: static !important;
    transform: none !important;
    grid-column: 3;
    grid-row: 1 / span 2;
}

/* Smart Country Phone specific styles for Layout 2 */
.ex-form-field-wrapper.layout-2 .iti__selected-country {
    padding-left: 0px !important; /* Icon already acts as left padding */
}
.ex-form-field-wrapper.layout-2 .iti__selected-dial-code {
    color: inherit !important; /* Match the slate color of the input */
}
.ex-form-field-wrapper.layout-2 .iti .ex-form-input {
    /* We cannot set padding-left: 8px !important here, because intl-tel-input dynamically calculates the width of the country code flag (e.g. 93px) and applies it inline. If we override it, the typed text will overlap the flag! */
    flex: 1 1 auto !important;
    width: 100% !important;
}

/* Ensure our layout-2 padding: 0 doesn't break intl-tel-input's dynamic padding */
.ex-form-field-wrapper.layout-2 .iti .ex-form-input.iti__tel-input {
    /* Kept empty or just preserve variable fallback if needed */
    padding-left: var(--iti-padding-left, 90px);
}

.ex-form-field-wrapper.layout-2 .ex-input-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2px;
}

/* Password toggle: Far right spanning both rows */
.ex-form-field-wrapper.layout-2 .ex-password-toggle {
    grid-column: 3;
    grid-row: 1 / span 2;
    position: static !important;
    transform: none !important;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b;
}

/* Override floating label logic if layout 2 is used */
.ex-form-field-wrapper.layout-2.ex-floating-label .ex-form-label {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

/* Ensure password features always appear under the input in layout 2 */
.ex-form-field-wrapper.layout-2 .ex-password-strength-meter,
.ex-form-field-wrapper.layout-2 .ex-password-checklist,
.ex-form-field-wrapper.layout-2 .ex-password-match-error,
.ex-form-field-wrapper.layout-2 .ex-phone-error {
    grid-column: 2;
}

/* User Request: Smart Country Phone Number in layout-2 */
.ex-form-field-wrapper.layout-2 .iti__selected-country {
    padding-left: 0px !important;
}

/* Responsive Layout overrides for Tablet */
@media (max-width: 1024px) {
    .ex-layout-tablet-block .ex-checkbox-group,
    .ex-layout-tablet-block .ex-radio-group { flex-direction: column !important; }

    .ex-layout-tablet-inline .ex-checkbox-group,
    .ex-layout-tablet-inline .ex-radio-group { flex-direction: row !important; flex-wrap: wrap !important; }
}

/* Responsive Layout overrides for Mobile */
@media (max-width: 767px) {
    .ex-layout-mobile-block .ex-checkbox-group,
    .ex-layout-mobile-block .ex-radio-group { flex-direction: column !important; }

    .ex-layout-mobile-inline .ex-checkbox-group,
    .ex-layout-mobile-inline .ex-radio-group { flex-direction: row !important; flex-wrap: wrap !important; }
}

/* Preset 2 (Boxed Layout) for Radio and Checkbox */
.ex-style-layout-2 .ex-form-radio-wrapper,
.ex-style-layout-2 .ex-form-checkbox-wrapper {
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 15px 20px;
    transition: all 0.2s ease-in-out;
}

/* Checkbox Icon Styling */
.ex-checkbox-label {
    display: inline-flex;
    align-items: center;
}
.ex-checkbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Google reCAPTCHA v3 Badge Positioning and Legal Policy */
body:has(form[data-ex-recaptcha-badge="bottomleft"]) .grecaptcha-badge {
    left: 0 !important;
    right: auto !important;
}

body:has(form[data-ex-recaptcha-badge="hide"]) .grecaptcha-badge,
body:has(form[data-ex-recaptcha-badge="inline"]) .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.exb-recaptcha-legal {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
    margin-top: 10px;
    text-align: center;
}

.exb-recaptcha-legal a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.exb-recaptcha-legal a:hover {
    color: #475569;
}