/**
 * Jengjavilla Phone Input Styles
 * Custom styles for intl-tel-input integration with WPForms
 */

/* ==========================================================================
   Phone Input Container
   ========================================================================== */

.wpforms-field-number .iti,
.wpforms-field-text.phone-number .iti,
.wpforms-field.phone-number .iti {
    display: block;
    width: 100%;
    position: relative;
}

.wpforms-field-number .iti__flag-container,
.wpforms-field-text.phone-number .iti__flag-container,
.wpforms-field.phone-number .iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    left: 0;
    z-index: 1;
}

.wpforms-field-number .iti__selected-flag,
.wpforms-field-text.phone-number .iti__selected-flag,
.wpforms-field.phone-number .iti__selected-flag {
    padding: 0 10px;
    height: 100%;
    display: flex !important;
    align-items: center;
    cursor: pointer;
    background-color: #f9f9f9;
    border-right: 1px solid #d3ced2;
    position: relative;
}

/* Hide flag, show only dial code */
.iti__selected-flag .iti__flag {
    display: none !important;
}

.iti__selected-dial-code {
    display: inline-block !important;
    margin-left: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.wpforms-field-number .iti input[type="tel"],
.wpforms-field-text.phone-number .iti input[type="tel"],
.wpforms-field.phone-number .iti input[type="tel"] {
    padding-left: 75px !important;
    width: 100%;
}

/* Country dropdown */
.iti__country-list {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    max-height: 250px;
    overflow-y: auto !important;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 10000 !important;
    background: #fff !important;
    border: 1px solid #ccc;
    position: absolute;
    width: 320px;
    margin-top: 4px;
}

.iti__dropdown-content {
    background: #fff !important;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.iti__dropdown-content:not(.iti__hide) {
    display: block !important;
}

/* Override CDN relative path with absolute URL - no !important to allow position styles */
.iti__flag {
    background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.6/build/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.6/build/img/flags@2x.png");
    }
}

.iti__selected-flag .iti__flag {
    margin-right: 6px;
}

.iti__country {
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: #fff;
    border: none;
    outline: none;
    display: block;
    width: 100%;
    text-align: left;
}

.iti__country:hover {
    background-color: #f5f5f5 !important;
}

.iti__country.iti__highlight {
    background-color: #e8f4f8 !important;
}

.iti__country.iti__active {
    background-color: #d4e9f2 !important;
    font-weight: 600;
}

.iti__flag-box {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    width: 20px;
}

.iti__country-name {
    margin-right: 6px;
    vertical-align: middle;
    color: #333;
    font-size: 14px;
}

.iti__dial-code {
    color: #999;
    vertical-align: middle;
    font-size: 13px;
}

/* Search box in dropdown */
.iti__search-input {
    padding: 8px 10px;
    margin: 8px 8px 4px 8px;
    width: calc(100% - 36px);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

.iti__search-input:focus {
    outline: none;
    border-color: #1B3A42;
    box-shadow: 0 0 0 1px rgba(27, 58, 66, 0.2);
}

/* Flag - already defined above */

/* Arrow */
.iti__arrow {
    border-top: 5px solid #555;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.iti__arrow--up {
    border-top: none;
    border-bottom: 5px solid #555;
}

/* Validation styles */
.wpforms-field-number input.iti-valid,
.wpforms-field-text.phone-number input.iti-valid,
.wpforms-field.phone-number input.iti-valid {
    border-color: #28a745 !important;
}

.wpforms-field-number input.iti-invalid,
.wpforms-field-text.phone-number input.iti-invalid,
.wpforms-field.phone-number input.iti-invalid {
    border-color: #dc3545 !important;
}

/* Dial code */
.iti__selected-dial-code {
    margin-left: 6px;
    font-weight: 600;
    color: #333;
}

/* Dropdown divider */
.iti__divider {
    border-bottom: 1px solid #e0e0e0;
    margin: 4px 0;
    padding: 0;
}

/* ==========================================================================
   WPForms Integration
   ========================================================================== */

/* Ensure proper spacing with WPForms */
.wpforms-field-number,
.wpforms-field-text.phone-number,
.wpforms-field.phone-number {
    position: relative;
}

/* Match WPForms input styling */
.wpforms-field-number .iti input[type="tel"],
.wpforms-field-text.phone-number .iti input[type="tel"],
.wpforms-field.phone-number .iti input[type="tel"] {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid #d3ced2;
    border-radius: 4px;
    padding: 10px 15px 10px 90px;
    transition: border-color 0.2s ease;
}

.wpforms-field-number .iti input[type="tel"]:focus,
.wpforms-field-text.phone-number .iti input[type="tel"]:focus,
.wpforms-field.phone-number .iti input[type="tel"]:focus {
    border-color: #1B3A42;
    outline: none;
    box-shadow: 0 0 0 1px rgba(27, 58, 66, 0.2);
}

/* Selected flag styling */
.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Force scrollable dropdown */
.iti__country-list {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

/* Ensure dropdown is above everything */
.iti--container {
    z-index: 10000 !important;
    position: absolute !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .iti__country-list {
        max-height: 200px;
    }

    .wpforms-field-number .iti input[type="tel"],
    .wpforms-field-text.phone-number .iti input[type="tel"],
    .wpforms-field.phone-number .iti input[type="tel"] {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Loading state */
.iti--loading {
    opacity: 0.7;
}

/* Hide default number spinner */
.wpforms-field-number input[type="tel"]::-webkit-inner-spin-button,
.wpforms-field-number input[type="tel"]::-webkit-outer-spin-button,
.wpforms-field-text.phone-number input[type="tel"]::-webkit-inner-spin-button,
.wpforms-field-text.phone-number input[type="tel"]::-webkit-outer-spin-button,
.wpforms-field.phone-number input[type="tel"]::-webkit-inner-spin-button,
.wpforms-field.phone-number input[type="tel"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wpforms-field-number input[type="tel"],
.wpforms-field-text.phone-number input[type="tel"],
.wpforms-field.phone-number input[type="tel"] {
    -moz-appearance: textfield;
}