/**
 * Phone Field Styles
 *
 * Custom styling for intl-tel-input integration with BuddyBoss
 *
 * @package Incuimprovements
 * @since 2.1.0
 */

/* ============================================================================
   CSS VARIABLES - Easy customization from Elementor
   ========================================================================== */

:root {
    --phone-field-bg: #ffffff;
    --phone-field-border: #e0e0e0;
    --phone-field-radius: 6px;
    --phone-field-height: 50px;
    --phone-dropdown-bg: #ffffff;
    --phone-dropdown-hover: #f5f5f5;
    --phone-dropdown-selected: #007cba;
    --phone-dial-code-color: #000000;
}

/* ============================================================================
   FLAG SPRITES FIX - WordPress path correction
   ========================================================================== */

/**
 * CRITICAL: Override intl-tel-input relative paths with WordPress absolute paths
 * The library uses ../img/flags.png which breaks in WordPress structure
 */
.iti__flag {
    background-image: url('/wp-content/plugins/incuimprovements/assets/vendor/intl-tel-input/img/flags.png') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url('/wp-content/plugins/incuimprovements/assets/vendor/intl-tel-input/img/flags@2x.png') !important;
    }
}

/* ============================================================================
   Container Adjustments
   ========================================================================== */

/**
 * Ensure the intl-tel-input container takes full width
 */
.iti {
    display: block;
    width: 100% !important;
    position: relative;
}

.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    z-index: 1;
    border-right: 1px solid var(--phone-field-border);
    border-top-left-radius: var(--phone-field-radius);
    border-bottom-left-radius: var(--phone-field-radius);
    overflow: visible;
    pointer-events: auto;
}

/**
 * Make the input inside intl-tel-input full width
 * Default padding ensures room for flag or flag + dial code
 */
.iti input[type="tel"] {
    width: 100% !important;
    padding-left: 52px; /* Space for flag + dial code */
    padding-right: 10px;
}

/* ============================================================================
   PRE-INIT (anti-salto) - estado del input ANTES de que corra el JS
   ========================================================================== */

/**
 * El JS de intl-tel-input envuelve el <input> en un .iti recién en
 * $(document).ready(). Hasta ese momento el input crudo se ve sin el +54 y, al
 * inicializar, salta (reflow de ancho + el texto se corre por el padding del
 * flag). Reservamos desde el render server-side el ancho completo y el espacio
 * del flag para que la transición sea imperceptible.
 */
.incuimprovements-phone-input-container {
    width: 100%;
}

input.incuimprovements-phone-input {
    width: 100%;
    box-sizing: border-box;
    /* Hueco que el JS deja al input tras inicializar con separateDialCode +
       initialCountry 'ar' (bandera + "+54"). Lo fijamos igual acá para que el
       placeholder no se corra al transformarse en widget. */
    padding-left: 97px;
}

/* ============================================================================
   BuddyBoss Integration
   ========================================================================== */

/**
 * Integration with BuddyBoss editfield wrapper
 */
.editfield .iti {
    margin-bottom: 0;
}

.editfield .iti input[type="tel"] {
    height: 44px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: border-color 0.3s ease;
    padding-left: 52px;
}

.editfield .iti input[type="tel"]:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

/**
 * Integration with Incuimprovements forms
 */
.incuimprovements-field-wrapper .iti {
    margin-bottom: 0;
}

.incuimprovements-field-wrapper .iti input[type="tel"] {
    height: 44px;
    font-size: 16px;
    padding: 12px 10px 12px 52px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.incuimprovements-field-wrapper .iti input[type="tel"]:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

/**
 * CRITICAL: Force correct padding for all telephone inputs
 * Override any theme/BuddyBoss styles that might interfere
 */
input[type="tel"].iti__tel-input,
input[type="tel"].intl-tel-input-enhanced {
    padding-left: 52px;
}

/**
 * Selected flag button styling
 */
.iti__selected-flag {
    padding: 0 2px 0 6px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    background-color: var(--phone-field-bg);
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: var(--phone-dropdown-hover);
}

/**
 * Dial code styling when displayed next to the flag
 */
.iti--separate-dial-code .iti__selected-flag {
    gap: 6px;
    padding-right: 10px !important;
}

.iti--separate-dial-code .iti__selected-dial-code {
    color: var(--phone-dial-code-color);
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* ============================================================================
   Dropdown Styling
   ========================================================================== */

/**
 * Country dropdown container
 */
.iti__country-list {
    max-height: 250px !important;
    width: 100% !important;
    border-radius: var(--phone-field-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--phone-field-border) !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background-color: var(--phone-dropdown-bg) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    z-index: 999 !important;
    pointer-events: auto !important;

    /* Force hide scrollbar for all browsers */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

.iti__country-list::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: transparent !important;
}

.iti__country-list::-webkit-scrollbar-track {
    background: transparent !important;
}

/**
 * Country items in dropdown
 */
.iti__country {
    padding: 8px 12px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease;
    background-color: var(--phone-dropdown-bg) !important;
    color: #333 !important;
}

.iti__country:hover {
    background-color: var(--phone-dropdown-hover) !important;
}

.iti__country.iti__highlight {
    background-color: var(--phone-dropdown-selected) !important;
    color: white !important;
}

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

/**
 * Search box in dropdown
 */
.iti__search-input {
    width: calc(100% - 16px) !important;
    margin: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--phone-field-border) !important;
    border-radius: var(--phone-field-radius) !important;
    font-size: 14px !important;
    background-color: var(--phone-field-bg) !important;
    box-sizing: border-box !important;
}

.iti__search-input:focus {
    outline: none !important;
    border-color: var(--phone-dropdown-selected) !important;
    box-shadow: 0 0 0 1px var(--phone-dropdown-selected) !important;
}

/* ============================================================================
   Error States
   ========================================================================== */

/**
 * Error styling for invalid phone numbers
 */
input[type="tel"].phone-error {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 1px #d63638 !important;
}

/**
 * Error message styling
 */
.phone-error-message {
    display: none;
    color: #d63638;
    font-size: 14px;
    margin-top: 6px;
    padding: 6px 10px;
    background-color: #fcf0f1;
    border-left: 3px solid #d63638;
    border-radius: 3px;
}

.phone-error-message:before {
    content: "⚠ ";
    font-weight: bold;
}

/* ============================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /**
     * Larger touch targets on mobile
     */
    .iti input[type="tel"] {
        font-size: 16px; /* Prevents zoom on iOS */
        height: 48px;
    }

    .iti__flag-container {
        padding: 0;
    }

    /**
     * Larger country list on mobile
     */
    .iti__country-list {
        max-height: 200px;
    }

    .iti__country {
        padding: 12px 14px;
    }
}

/* ============================================================================
   Arrow Icon
   ========================================================================== */

/**
 * Dropdown arrow styling
 */
.iti__arrow {
    margin-left: 0 !important;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #666;
    transition: transform 0.2s ease;
}

.iti__arrow--up {
    border-top: none;
    border-bottom: 5px solid #666;
    transform: rotate(180deg);
}

/**
 * Ensure flag has minimal spacing
 */
.iti__flag {
    margin-right: 0 !important;
}

/* ============================================================================
   Loading State
   ========================================================================== */

/**
 * Loading state while utils.js loads
 */
.iti.iti--container-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================================
   RTL Support
   ========================================================================== */

/**
 * Right-to-left language support
 */
html[dir="rtl"] .iti input[type="tel"] {
    padding-left: 12px;
    padding-right: 90px;
}

html[dir="rtl"] .iti__flag-container {
    left: auto;
    right: 0;
}

html[dir="rtl"] .iti__selected-flag {
    padding: 0 60px 0 0;
}

html[dir="rtl"] .iti__arrow {
    margin-left: 0;
    margin-right: 6px;
}

/* ============================================================================
   Accessibility
   ========================================================================== */

/**
 * Focus visible for keyboard navigation
 */
.iti__selected-flag:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.iti__country:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: -2px;
}

/**
 * Screen reader text
 */
.iti__a11y-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================================
   Print Styles
   ========================================================================== */

@media print {
    /**
     * Hide dropdown functionality when printing
     */
    .iti__flag-container {
        display: none;
    }

    .iti input[type="tel"] {
        padding-left: 12px;
        border: 1px solid #000;
    }
}

/* ============================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .iti input[type="tel"] {
        border: 2px solid #000;
    }

    .iti__country-list {
        border: 2px solid #000;
    }

    .iti__country.iti__highlight {
        background-color: #000;
        color: #fff;
    }
}

/* Sin dark-mode: el form de registro no es dark-mode-aware, así que el campo
   teléfono debe usar el mismo fondo claro que el resto de los campos. Un
   @media (prefers-color-scheme: dark) acá pintaba el input de #1e1e1e (negro)
   mientras los demás quedaban blancos → inconsistencia. */