/* Custom styles for International Telephone Input */
/* Flag/globe assets: /assets/images/ (flags.png, flags-2x.png, globe.webp, globe-2x.webp). Ensure these are deployed to production. */
/* Override flag image paths - must be after intlTelInput.min.css */
/* Use CSS variables to set flag image paths with higher specificity */
html:root,
:root,
html,
body {
    --iti-path-flags-1x: url("/assets/images/flags.png");
    --iti-path-flags-2x: url("/assets/images/flags-2x.png");
    --iti-path-globe-1x: url("/assets/css/plugins/img/globe.webp");
    --iti-path-globe-2x: url("/assets/css/plugins/img/globe-2x.webp");
    /* Ensure sprite dimensions are set correctly */
    --iti-flag-sprite-width: 3904px;
    --iti-flag-sprite-height: 12px;
}

/* Direct flag background image override as fallback */
/* This ensures flags display even if CSS variables fail */
/* CRITICAL: Do NOT use !important on background-position - it prevents CSS variable from working */
/* FLAG SIZE: Keep container at normal size, scale down flag image inside */
.iti__flag,
.iti .iti__flag {
    background-image: url("/assets/images/flags-2x.png") !important;
    /* Scale down background-size to make flag smaller - use 50% scale (25-30% smaller) for perfect fit */
    background-size: calc(var(--iti-flag-sprite-width, 3904px) * 0.5) calc(var(--iti-flag-sprite-height, 12px) * 0.5) !important;
    /* Scale background-position offsets by same amount (0.5) - NO !important to allow CSS variable */
    /* background-position: calc(var(--iti-flag-offset, 100px) * 0.5) 0; */
    background-repeat: no-repeat !important;
    display: inline-block !important;
    /* Keep container at normal size */
    width: var(--iti-flag-width, 16px) !important;
    height: var(--iti-flag-height, 12px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Ensure selected flag is visible and uses correct background-position */
.iti__selected-flag .iti__flag,
.iti .iti__selected-flag .iti__flag {
    background-image: url("/assets/images/flags-2x.png") !important;
    /* Scale down background-size to make flag smaller - use 50% scale (25-30% smaller) for perfect fit */
    background-size: calc(var(--iti-flag-sprite-width, 3904px) * 0.5) calc(var(--iti-flag-sprite-height, 12px) * 0.5) !important;
    /* Scale background-position offsets by same amount (0.5) - NO !important to allow CSS variable */
    background-position: calc(var(--iti-flag-offset, 100px) * 0.5) 0;
    background-repeat: no-repeat !important;
    display: inline-block !important;
    /* Keep container at normal size */
    width: var(--iti-flag-width, 16px) !important;
    height: var(--iti-flag-height, 12px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.iti__globe,
.iti .iti__globe {
    background-image: url("/assets/css/plugins/img/globe.webp") !important;
    background-size: contain !important;
}

/* High-resolution displays */
@media (min-resolution: 2x),
(-webkit-min-device-pixel-ratio: 2) {

    .iti__flag,
    .iti .iti__flag,
    .iti__selected-flag .iti__flag,
    .iti .iti__selected-flag .iti__flag {
        background-image: url("/assets/images/flags-2x.png") !important;
        /* Scale down 2x image by 50% to make flag smaller inside container */
        background-size: calc(7808px * 0.5) calc(24px * 0.5) !important;
        /* For 2x images, offset needs to be doubled then scaled by 0.5 - NO !important to allow CSS variable */
        background-position: calc(var(--iti-flag-offset, 100px) * 2 * 0.5) 0;
        /* Keep container at normal size */
        width: var(--iti-flag-width, 16px) !important;
        height: var(--iti-flag-height, 12px) !important;
        transform: scale(1) !important;
        transform-origin: center center !important;
    }

    .iti__globe,
    .iti .iti__globe {
        background-image: url("/assets/css/plugins/img/globe-2x.webp") !important;
    }
}

/* Ensure ITI container takes full width */
.iti,
.intl-tel-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure form-control with ITI takes full width */
.form-control.intl-tel-input-field,
.form-control.iti__tel-input {
    width: 100% !important;
    display: block !important;
    max-width: 100% !important;
}

/* Ensure ITI container works properly in form groups and columns */
.form-group .iti,
.col-md-12 .iti,
.col-6 .iti,
.col-md-3 .iti,
.col-md-4 .iti,
.col-md-6 .iti,
.col-lg-3 .iti,
.col-lg-4 .iti,
.col-lg-6 .iti {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.intl-tel-input .iti__flag-container {
    z-index: 2;
}

.intl-tel-input .iti__selected-flag {
    padding: 0 8px 0 12px;
    border-right: 1px solid #ddd;
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.intl-tel-input .iti__selected-flag:hover {
    background-color: #e9ecef;
}

.intl-tel-input .iti__selected-flag:focus {
    outline: none;
    background-color: #e9ecef;
}

.intl-tel-input .iti__arrow {
    margin-left: 6px;
    border-top: 4px solid #666;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
}

.intl-tel-input .iti__country-list {
    z-index: 9999;
    max-height: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 1px;
}

.iti__country {
    position: relative;
}

.iti__country::before {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--iti-spacer-horizontal, 8px);
    transform: translateY(-50%);
    background-image: var(--iti-path-flags-2x);

    background-repeat: no-repeat;
    background-size: var(--iti-flag-sprite-width, 3904px) var(--iti-flag-sprite-height, 12px);
    background-position: var(--iti-flag-offset, 0px) 0;
    display: inline-block !important;
    width: var(--iti-flag-width, 16px);
    height: var(--iti-flag-height, 12px);
    box-sizing: border-box;
    overflow: hidden;
}

[dir="rtl"] .iti__country::before {
    right: auto;
    left: var(--iti-spacer-horizontal, 8px);
}

.intl-tel-input .iti__country {
    padding: 8px 12px;
    transition: background-color 0.2s ease;
}

.intl-tel-input .iti__country:hover,
.intl-tel-input .iti__country.iti__highlight {
    background-color: #f0f0f0;
}

.intl-tel-input .iti__country-name,
.intl-tel-input .iti__dial-code {
    color: #333;
}

.intl-tel-input input[type="tel"],
.intl-tel-input input[type="text"],
.iti input[type="tel"],
.iti input[type="text"],
.iti input.iti__tel-input,
input.iti__tel-input,
input.intl-tel-input-field {
    padding-left: 84px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .intl-tel-input .iti__selected-flag {
        background-color: #2d2d2d;
        border-right-color: #444;
    }

    .intl-tel-input .iti__selected-flag:hover {
        background-color: #3d3d3d;
    }

    .intl-tel-input .iti__country-list {
        background-color: #2d2d2d;
        border-color: #444;
    }

    .intl-tel-input .iti__country:hover,
    .intl-tel-input .iti__country.iti__highlight {
        background-color: #3d3d3d;
    }

    .intl-tel-input .iti__country-name,
    .intl-tel-input .iti__dial-code {
        color: #fff;
    }
}

/* RTL support */
[dir="rtl"] .intl-tel-input .iti__selected-flag,
[dir="rtl"] .iti .iti__selected-flag {
    border-right: none;
    border-left: 1px solid #ddd;
    padding: 0 12px 0 8px;
}

/* [dir="rtl"] .intl-tel-input input[type="tel"],
[dir="rtl"] .intl-tel-input input[type="text"],
[dir="rtl"] .iti input[type="tel"],
[dir="rtl"] .iti input[type="text"],
[dir="rtl"] .iti input.iti__tel-input,
[dir="rtl"] input.iti__tel-input,
[dir="rtl"] input.intl-tel-input-field {
    padding-left: 12px !important;
    padding-right: 84px !important;
} */

/* Error state */
.intl-tel-input-field.is-invalid {
    border-color: #dc3545;
}

.intl-tel-input-error {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

/* Valid state */
.intl-tel-input-field.is-valid {
    border-color: #28a745;
}

/* Focus state */
.intl-tel-input input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Responsive adjustments */
@media (max-width: 576px) {

    .intl-tel-input .iti__selected-flag,
    .iti .iti__selected-flag {
        padding: 0 6px 0 8px;
    }

    .intl-tel-input input[type="tel"],
    .intl-tel-input input[type="text"],
    .iti input[type="tel"],
    .iti input[type="text"],
    .iti input.iti__tel-input,
    input.iti__tel-input,
    input.intl-tel-input-field {
        padding-left: 70px !important;
    }
}