/* Custom styles for intl-tel-input to match the login form design */

/* Wrapper to ensure full width */
.iti {
    display: block;
    width: 100%;
}

/* In the login form grid: force the intl-tel-input wrapper to behave like other inputs */
.login__label .iti {
    grid-column: 1 / -1;
}

/* Input field styling */
.iti input.iti__tel-input {
    background: #192352;
    border: 2px solid transparent !important;
    border-radius: 28px !important;
    color: #fff !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 64px !important;
    padding-right: 24px !important;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 24px !important;
    width: 100%;
    transition: border-color 0.3s ease;
}

/* Validation states */
.iti.iti--valid input.iti__tel-input {
    border-color: #10B981 !important; /* green */
}

.iti.iti--invalid input.iti__tel-input {
    border-color: #EF4444 !important; /* red */
}

/* Placeholder styling */
.iti input.iti__tel-input::placeholder {
    color: #718096;
    opacity: 1; /* Firefox */
}

/* Selected dial code should look like placeholder when empty, white when filled */
.iti__selected-dial-code {
    color: #718096 !important;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 24px !important;
    transition: color 0.2s ease;
}

.iti.iti--has-value .iti__selected-dial-code {
    color: #fff !important;
}

/* Flag container (the button) */
.iti__flag-container {
    border-radius: 28px 0 0 28px;
}

/* Selected flag background */
.iti__selected-flag {
    background-color: transparent !important;
    border-radius: 28px 0 0 28px;
    transition: background-color 0.3s ease;
    padding: 0 6px 0 24px !important;
}

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

/* Dropdown arrow */
.iti__arrow {
    border-top-color: #718096 !important;
}

.iti__arrow.iti__arrow--up {
    border-top: none !important;
    border-bottom-color: #718096 !important;
}

/* Dropdown Menu (Country List) */
/* Dropdown container (wraps search + list). Needed because the library adds its own border/background */
.iti__dropdown-content,
.iti--inline-dropdown .iti__dropdown-content {
    background-color: #192352 !important;
    border: 1px solid #272B30 !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
}

.iti__country-list {
    background-color: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    padding: 6px 0 !important;
    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Dropdown items */
.iti__country {
    font-size: 14px !important;
    padding: 12px 16px !important;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.iti__country:last-child {
    border-bottom: 0;
}

/* Interact states for dropdown items */
.iti__country:hover, 
.iti__country.iti__highlight {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.iti__country.iti__highlight {
    box-shadow: none;
}

.iti__country-name {
    color: #fff !important;
    font-weight: 600;
}

/* Dial code text color */
.iti__dial-code {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Divider inside dropdown */
.iti__divider {
    border-bottom-color: #272B30 !important;
}

/* Search input in dropdown (if enabled) */
.iti__search-input {
    background-color: rgba(0, 10, 53, 0.55) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin: 10px 10px 6px 10px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    outline: none !important;
}

.iti__search-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1;
}

.iti__search-input:focus {
    border-color: rgba(255, 255, 255, 0.24) !important;
}

/* WebKit scrollbar styling */
.iti__country-list::-webkit-scrollbar {
    width: 10px;
}

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

.iti__country-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.26);
}

/* Ensure typed text is always white, background always blue */
.iti input.iti__tel-input:not(:placeholder-shown) {
    color: #fff !important;
    background: #192352 !important;
}