/* Elementor Form Phone Validation & Country Flag Frontend Styles */

/* Inherit Font Family & Typography from Elementor Theme */
.iti,
.iti * {
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.elementor-field-group .iti,
.iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    min-height: 42px !important;
}

.elementor-field-group .iti input[type="tel"],
.iti input[type="tel"] {
    width: 100% !important;
    min-height: 42px !important;
    height: 100% !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    box-sizing: border-box !important;
}

/* Flag Styling & Display Rules */
.iti__flag-box {
    display: inline-block !important;
    width: 20px !important;
    height: 15px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

.iti__flag {
    display: inline-block !important;
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4) !important;
    vertical-align: middle !important;
}

/* Hide Flags ONLY when show_flags option is disabled (.iti--hide-flags) */
.iti--hide-flags .iti__flag,
.iti--hide-flags .iti__flag-box {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Clean Selected Dial Code Badge Styling */
.iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 10px 0 12px !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top-left-radius: inherit !important;
    border-bottom-left-radius: inherit !important;
    transition: background-color 0.2s ease !important;
}

.iti__selected-flag:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.iti__selected-dial-code {
    font-family: inherit !important;
    font-weight: 600 !important;
    color: inherit !important;
    font-size: 0.95em !important;
    margin-left: 6px !important;
    margin-right: 4px !important;
}

.iti--hide-flags .iti__selected-dial-code {
    margin-left: 0 !important;
}

.iti__arrow {
    margin-left: 6px !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid currentColor !important;
    opacity: 0.7 !important;
    transition: transform 0.2s ease !important;
}

.iti__arrow--up {
    border-top: none !important;
    border-bottom: 5px solid currentColor !important;
}

.iti__flag-container {
    display: flex !important;
    align-items: center !important;
    z-index: 2 !important;
}

/* Dropdown List Styling - Inherits Theme Fonts */
.iti__country-list {
    position: absolute !important;
    z-index: 999999 !important;
    list-style: none !important;
    text-align: left !important;
    padding: 6px 0 !important;
    margin: 4px 0 0 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    font-family: inherit !important;
}

.iti__country {
    padding: 8px 14px !important;
    font-size: 0.9em !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: #f4f6f9 !important;
}

.iti__country-name {
    color: #2c3e50 !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    flex-grow: 1 !important;
}

.iti__dial-code {
    color: #6c757d !important;
    font-weight: 500 !important;
    font-family: inherit !important;
}

/* Single Country Mode Styling (No Dropdown Arrow, Fixed Code) */
.iti--single-country .iti__selected-flag {
    cursor: default !important;
    pointer-events: none !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.iti--single-country .iti__arrow,
.iti--single-country .iti__country-list,
.iti--single-country ul.iti__country-list {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

.iti--single-country .iti__selected-flag:hover {
    background-color: transparent !important;
}

/* RTL Support */
.rtl .iti__flag-container {
    right: 0 !important;
    left: auto !important;
}

.rtl .iti input[type="tel"] {
    padding-left: 12px !important;
    padding-right: 70px !important;
}

/* Validation Status Styles */
input.epvf-invalid-input {
    border-color: #d9534f !important;
    box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.25) !important;
}

input.epvf-valid-input {
    border-color: #5cb85c !important;
}

.epvf-field-error-msg {
    color: #d9534f;
    font-size: 0.85em;
    margin-top: 4px;
    font-family: inherit !important;
    display: none;
}

/* Elementor Popup & Modal z-index fix */
.elementor-popup-modal .iti__country-list {
    z-index: 9999999 !important;
}