/**
 * DRIVIGO — Phone Input styles
 * Customizes intl-tel-input v18 to match DRIVIGO design system.
 */

/* Container takes full width */
.iti {
    display: block !important;
    width: 100%;
}

/* The input itself respects existing booking-input / form-control sizing */
.iti__tel-input {
    width: 100%;
}

/* Country selector button */
.iti__country-list {
    border-radius: 10px;
    border: 1px solid #e8e4de;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    font-size: 0.9rem;
}

.iti__country {
    padding: 8px 12px;
    transition: background 0.15s;
}

.iti__country.iti__highlight,
.iti__country:hover {
    background: #faf6f0;
}

.iti__country-name {
    color: #1a1a1a;
}

.iti__dial-code {
    color: #888;
}

/* Selected flag area */
.iti--separate-dial-code .iti__selected-flag {
    background: #faf6f0;
    border-right: 1px solid #e8e4de;
    border-radius: 8px 0 0 8px;
}

.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag:focus {
    background: #f0e8d8;
}

.iti__selected-dial-code {
    color: #8b6914;
    font-weight: 600;
}

/* Invalid state — applied by phone-input.js on blur */
.drv-phone-invalid,
.drv-phone-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Admin context (Bootstrap form-control compatibility) */
.iti .form-control {
    border-radius: 0 6px 6px 0;
}

/* Booking context (booking-input compatibility) */
.iti .booking-input {
    border-radius: 0 8px 8px 0 !important;
}

/* Driver app dark theme support */
.d-input.iti__tel-input,
.iti .d-input {
    border-radius: 0 8px 8px 0;
}

[data-bs-theme="dark"] .iti__country-list,
.dark-theme .iti__country-list {
    background: #1a1a1a;
    border-color: #333;
}

[data-bs-theme="dark"] .iti__country.iti__highlight,
[data-bs-theme="dark"] .iti__country:hover {
    background: #2a2a2a;
}

[data-bs-theme="dark"] .iti__country-name {
    color: #fff;
}

[data-bs-theme="dark"] .iti--separate-dial-code .iti__selected-flag {
    background: #1a1510;
    border-right-color: #333;
}