/* ==========================================================
   STOCK LEARNERS - INTERNATIONAL PHONE SELECTOR
   ========================================================== */

.iti {
    width: 100%;
}

/* Main phone field */
.iti input[type="tel"] {
    width: 100%;
}

/* Country button */
.iti__selected-country {
    border-radius: 10px 0 0 10px;
    transition: background-color .18s ease, transform .18s ease;
}

.iti__selected-country:hover,
.iti__selected-country:focus {
    background: rgba(13, 125, 82, 0.10);
}

/* Desktop dropdown */
.iti__dropdown-content {
    width: 340px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 360px !important;

    border: 1px solid rgba(7, 17, 15, 0.12) !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
        0 18px 45px rgba(7, 17, 15, 0.18),
        0 4px 12px rgba(7, 17, 15, 0.08) !important;

    overflow: hidden !important;
}

/* Search area */
.iti__search-input {
    width: calc(100% - 20px) !important;
    margin: 10px !important;
    padding: 10px 12px !important;

    border: 1px solid rgba(7, 17, 15, 0.15) !important;
    border-radius: 9px !important;

    background: #f6f8f5 !important;
    color: #07110f !important;

    outline: none !important;
}

.iti__search-input:focus {
    border-color: #0d7d52 !important;
    box-shadow: 0 0 0 3px rgba(13, 125, 82, 0.10) !important;
}

/* Scrollable country list */
.iti__country-list {
    max-height: 285px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Individual country */
.iti__country {
    min-height: 42px !important;
    padding: 9px 12px !important;

    transition:
        background-color .15s ease,
        padding-left .15s ease !important;
}

/* Hover */
.iti__country:hover,
.iti__country.iti__highlight {
    background: rgba(13, 125, 82, 0.09) !important;
    padding-left: 15px !important;
}

/* Country name */
.iti__country-name {
    color: #07110f !important;
    font-weight: 500;
}

/* Dial code */
.iti__dial-code {
    color: #0d7d52 !important;
    font-weight: 600;
}

/* Flag spacing */
.iti__flag-box {
    margin-right: 10px !important;
}

/* Scrollbar */
.iti__country-list::-webkit-scrollbar {
    width: 7px;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(7, 17, 15, 0.20);
    border-radius: 20px;
}

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

/* Mobile */
@media (max-width: 600px) {
    .iti__dropdown-content {
        width: min(340px, calc(100vw - 24px)) !important;
        max-height: 390px !important;
        border-radius: 14px !important;
    }

    .iti__country-list {
        max-height: 300px !important;
    }

    .iti__country {
        min-height: 44px !important;
    }
}


/* ==========================================================
   STABLE COUNTRY DROPDOWN POSITION
   Dropdown remains anchored to intl-tel-input's own wrapper.
   ========================================================== */

.iti {
    position: relative !important;
    width: 100%;
}

.iti > .iti__dropdown-content {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 10000 !important;
}