/**
 * International Telephone Input Styles
 * Country selector with flags for checkout
 */

/* Phone input wrapper */
.intl-tel-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Country selector button */
.country-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: white;
    border: 1px solid rgb(209, 213, 219);
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 90px;
}

.country-selector:hover {
    background-color: rgb(249, 250, 251);
}

.country-selector:focus {
    outline: none;
    border-color: rgb(139, 92, 246);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    z-index: 1;
}

/* Phone input field adjustments */
.intl-tel-input-wrapper input[type="tel"] {
    flex: 1;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    border-left: none !important;
}

.intl-tel-input-wrapper input[type="tel"]:focus {
    border-left: 1px solid rgb(139, 92, 246) !important;
    margin-left: -1px;
}

/* Country code display */
.country-selector .country-code {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

/* Dropdown arrow */
.country-selector .dropdown-arrow {
    font-size: 0.625rem;
    color: #6b7280;
    margin-left: auto;
}

/* Country dropdown */
.country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid rgb(209, 213, 219);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    margin-top: 4px;
    max-width: 320px;
    overflow: hidden;
}

/* Search input */
.country-search {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid rgb(229, 231, 235);
    font-size: 0.875rem;
    outline: none;
}

.country-search:focus {
    background-color: rgb(249, 250, 251);
}

/* Country list */
.country-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

/* Country item */
.country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.country-item:hover {
    background-color: rgb(249, 250, 251);
}

.country-item .country-name {
    flex: 1;
    font-size: 0.875rem;
    color: #111827;
}

.country-item .dial-code {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* Scrollbar styling */
.country-list::-webkit-scrollbar {
    width: 6px;
}

.country-list::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.country-list::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 3px;
}

.country-list::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Flag sprites */
.flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Using emoji flags as a fallback - modern and universally supported */
.flag::before {
    display: block;
    width: 20px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 16px;
}

/* Country flag emojis */
.flag-ad::before { content: "🇦🇩"; }
.flag-ae::before { content: "🇦🇪"; }
.flag-af::before { content: "🇦🇫"; }
.flag-ag::before { content: "🇦🇬"; }
.flag-ai::before { content: "🇦🇮"; }
.flag-al::before { content: "🇦🇱"; }
.flag-am::before { content: "🇦🇲"; }
.flag-ao::before { content: "🇦🇴"; }
.flag-ar::before { content: "🇦🇷"; }
.flag-as::before { content: "🇦🇸"; }
.flag-at::before { content: "🇦🇹"; }
.flag-au::before { content: "🇦🇺"; }
.flag-aw::before { content: "🇦🇼"; }
.flag-az::before { content: "🇦🇿"; }
.flag-ba::before { content: "🇧🇦"; }
.flag-bb::before { content: "🇧🇧"; }
.flag-bd::before { content: "🇧🇩"; }
.flag-be::before { content: "🇧🇪"; }
.flag-bf::before { content: "🇧🇫"; }
.flag-bg::before { content: "🇧🇬"; }
.flag-bh::before { content: "🇧🇭"; }
.flag-bi::before { content: "🇧🇮"; }
.flag-bj::before { content: "🇧🇯"; }
.flag-bm::before { content: "🇧🇲"; }
.flag-bn::before { content: "🇧🇳"; }
.flag-bo::before { content: "🇧🇴"; }
.flag-br::before { content: "🇧🇷"; }
.flag-bs::before { content: "🇧🇸"; }
.flag-bt::before { content: "🇧🇹"; }
.flag-bw::before { content: "🇧🇼"; }
.flag-by::before { content: "🇧🇾"; }
.flag-bz::before { content: "🇧🇿"; }
.flag-ca::before { content: "🇨🇦"; }
.flag-cd::before { content: "🇨🇩"; }
.flag-cf::before { content: "🇨🇫"; }
.flag-cg::before { content: "🇨🇬"; }
.flag-ch::before { content: "🇨🇭"; }
.flag-ci::before { content: "🇨🇮"; }
.flag-ck::before { content: "🇨🇰"; }
.flag-cl::before { content: "🇨🇱"; }
.flag-cm::before { content: "🇨🇲"; }
.flag-cn::before { content: "🇨🇳"; }
.flag-co::before { content: "🇨🇴"; }
.flag-cr::before { content: "🇨🇷"; }
.flag-cu::before { content: "🇨🇺"; }
.flag-cv::before { content: "🇨🇻"; }
.flag-cy::before { content: "🇨🇾"; }
.flag-cz::before { content: "🇨🇿"; }
.flag-de::before { content: "🇩🇪"; }
.flag-dj::before { content: "🇩🇯"; }
.flag-dk::before { content: "🇩🇰"; }
.flag-dm::before { content: "🇩🇲"; }
.flag-do::before { content: "🇩🇴"; }
.flag-dz::before { content: "🇩🇿"; }
.flag-ec::before { content: "🇪🇨"; }
.flag-ee::before { content: "🇪🇪"; }
.flag-eg::before { content: "🇪🇬"; }
.flag-er::before { content: "🇪🇷"; }
.flag-es::before { content: "🇪🇸"; }
.flag-et::before { content: "🇪🇹"; }
.flag-fi::before { content: "🇫🇮"; }
.flag-fj::before { content: "🇫🇯"; }
.flag-fk::before { content: "🇫🇰"; }
.flag-fm::before { content: "🇫🇲"; }
.flag-fo::before { content: "🇫🇴"; }
.flag-fr::before { content: "🇫🇷"; }
.flag-ga::before { content: "🇬🇦"; }
.flag-gb::before { content: "🇬🇧"; }
.flag-gd::before { content: "🇬🇩"; }
.flag-ge::before { content: "🇬🇪"; }
.flag-gf::before { content: "🇬🇫"; }
.flag-gh::before { content: "🇬🇭"; }
.flag-gi::before { content: "🇬🇮"; }
.flag-gl::before { content: "🇬🇱"; }
.flag-gm::before { content: "🇬🇲"; }
.flag-gn::before { content: "🇬🇳"; }
.flag-gp::before { content: "🇬🇵"; }
.flag-gq::before { content: "🇬🇶"; }
.flag-gr::before { content: "🇬🇷"; }
.flag-gt::before { content: "🇬🇹"; }
.flag-gu::before { content: "🇬🇺"; }
.flag-gw::before { content: "🇬🇼"; }
.flag-gy::before { content: "🇬🇾"; }
.flag-hk::before { content: "🇭🇰"; }
.flag-hn::before { content: "🇭🇳"; }
.flag-hr::before { content: "🇭🇷"; }
.flag-ht::before { content: "🇭🇹"; }
.flag-hu::before { content: "🇭🇺"; }
.flag-id::before { content: "🇮🇩"; }
.flag-ie::before { content: "🇮🇪"; }
.flag-il::before { content: "🇮🇱"; }
.flag-in::before { content: "🇮🇳"; }
.flag-iq::before { content: "🇮🇶"; }
.flag-ir::before { content: "🇮🇷"; }
.flag-is::before { content: "🇮🇸"; }
.flag-it::before { content: "🇮🇹"; }
.flag-jm::before { content: "🇯🇲"; }
.flag-jo::before { content: "🇯🇴"; }
.flag-jp::before { content: "🇯🇵"; }
.flag-ke::before { content: "🇰🇪"; }
.flag-kg::before { content: "🇰🇬"; }
.flag-kh::before { content: "🇰🇭"; }
.flag-ki::before { content: "🇰🇮"; }
.flag-km::before { content: "🇰🇲"; }
.flag-kn::before { content: "🇰🇳"; }
.flag-kp::before { content: "🇰🇵"; }
.flag-kr::before { content: "🇰🇷"; }
.flag-kw::before { content: "🇰🇼"; }
.flag-ky::before { content: "🇰🇾"; }
.flag-kz::before { content: "🇰🇿"; }
.flag-la::before { content: "🇱🇦"; }
.flag-lb::before { content: "🇱🇧"; }
.flag-lc::before { content: "🇱🇨"; }
.flag-li::before { content: "🇱🇮"; }
.flag-lk::before { content: "🇱🇰"; }
.flag-lr::before { content: "🇱🇷"; }
.flag-ls::before { content: "🇱🇸"; }
.flag-lt::before { content: "🇱🇹"; }
.flag-lu::before { content: "🇱🇺"; }
.flag-lv::before { content: "🇱🇻"; }
.flag-ly::before { content: "🇱🇾"; }
.flag-ma::before { content: "🇲🇦"; }
.flag-mc::before { content: "🇲🇨"; }
.flag-md::before { content: "🇲🇩"; }
.flag-me::before { content: "🇲🇪"; }
.flag-mg::before { content: "🇲🇬"; }
.flag-mh::before { content: "🇲🇭"; }
.flag-mk::before { content: "🇲🇰"; }
.flag-ml::before { content: "🇲🇱"; }
.flag-mm::before { content: "🇲🇲"; }
.flag-mn::before { content: "🇲🇳"; }
.flag-mo::before { content: "🇲🇴"; }
.flag-mp::before { content: "🇲🇵"; }
.flag-mq::before { content: "🇲🇶"; }
.flag-mr::before { content: "🇲🇷"; }
.flag-ms::before { content: "🇲🇸"; }
.flag-mt::before { content: "🇲🇹"; }
.flag-mu::before { content: "🇲🇺"; }
.flag-mv::before { content: "🇲🇻"; }
.flag-mw::before { content: "🇲🇼"; }
.flag-mx::before { content: "🇲🇽"; }
.flag-my::before { content: "🇲🇾"; }
.flag-mz::before { content: "🇲🇿"; }
.flag-na::before { content: "🇳🇦"; }
.flag-nc::before { content: "🇳🇨"; }
.flag-ne::before { content: "🇳🇪"; }
.flag-nf::before { content: "🇳🇫"; }
.flag-ng::before { content: "🇳🇬"; }
.flag-ni::before { content: "🇳🇮"; }
.flag-nl::before { content: "🇳🇱"; }
.flag-no::before { content: "🇳🇴"; }
.flag-np::before { content: "🇳🇵"; }
.flag-nr::before { content: "🇳🇷"; }
.flag-nu::before { content: "🇳🇺"; }
.flag-nz::before { content: "🇳🇿"; }
.flag-om::before { content: "🇴🇲"; }
.flag-pa::before { content: "🇵🇦"; }
.flag-pe::before { content: "🇵🇪"; }
.flag-pf::before { content: "🇵🇫"; }
.flag-pg::before { content: "🇵🇬"; }
.flag-ph::before { content: "🇵🇭"; }
.flag-pk::before { content: "🇵🇰"; }
.flag-pl::before { content: "🇵🇱"; }
.flag-pr::before { content: "🇵🇷"; }
.flag-ps::before { content: "🇵🇸"; }
.flag-pt::before { content: "🇵🇹"; }
.flag-pw::before { content: "🇵🇼"; }
.flag-py::before { content: "🇵🇾"; }
.flag-qa::before { content: "🇶🇦"; }
.flag-re::before { content: "🇷🇪"; }
.flag-ro::before { content: "🇷🇴"; }
.flag-rs::before { content: "🇷🇸"; }
.flag-ru::before { content: "🇷🇺"; }
.flag-rw::before { content: "🇷🇼"; }
.flag-sa::before { content: "🇸🇦"; }
.flag-sb::before { content: "🇸🇧"; }
.flag-sc::before { content: "🇸🇨"; }
.flag-sd::before { content: "🇸🇩"; }
.flag-se::before { content: "🇸🇪"; }
.flag-sg::before { content: "🇸🇬"; }
.flag-si::before { content: "🇸🇮"; }
.flag-sk::before { content: "🇸🇰"; }
.flag-sl::before { content: "🇸🇱"; }
.flag-sm::before { content: "🇸🇲"; }
.flag-sn::before { content: "🇸🇳"; }
.flag-so::before { content: "🇸🇴"; }
.flag-sr::before { content: "🇸🇷"; }
.flag-ss::before { content: "🇸🇸"; }
.flag-st::before { content: "🇸🇹"; }
.flag-sv::before { content: "🇸🇻"; }
.flag-sy::before { content: "🇸🇾"; }
.flag-sz::before { content: "🇸🇿"; }
.flag-tc::before { content: "🇹🇨"; }
.flag-td::before { content: "🇹🇩"; }
.flag-tg::before { content: "🇹🇬"; }
.flag-th::before { content: "🇹🇭"; }
.flag-tj::before { content: "🇹🇯"; }
.flag-tk::before { content: "🇹🇰"; }
.flag-tl::before { content: "🇹🇱"; }
.flag-tm::before { content: "🇹🇲"; }
.flag-tn::before { content: "🇹🇳"; }
.flag-to::before { content: "🇹🇴"; }
.flag-tr::before { content: "🇹🇷"; }
.flag-tt::before { content: "🇹🇹"; }
.flag-tv::before { content: "🇹🇻"; }
.flag-tw::before { content: "🇹🇼"; }
.flag-tz::before { content: "🇹🇿"; }
.flag-ua::before { content: "🇺🇦"; }
.flag-ug::before { content: "🇺🇬"; }
.flag-us::before { content: "🇺🇸"; }
.flag-uy::before { content: "🇺🇾"; }
.flag-uz::before { content: "🇺🇿"; }
.flag-va::before { content: "🇻🇦"; }
.flag-vc::before { content: "🇻🇨"; }
.flag-ve::before { content: "🇻🇪"; }
.flag-vg::before { content: "🇻🇬"; }
.flag-vi::before { content: "🇻🇮"; }
.flag-vn::before { content: "🇻🇳"; }
.flag-vu::before { content: "🇻🇺"; }
.flag-wf::before { content: "🇼🇫"; }
.flag-ws::before { content: "🇼🇸"; }
.flag-xk::before { content: "🇽🇰"; }
.flag-ye::before { content: "🇾🇪"; }
.flag-za::before { content: "🇿🇦"; }
.flag-zm::before { content: "🇿🇲"; }
.flag-zw::before { content: "🇿🇼"; }

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .country-dropdown {
        left: 0;
        right: 0;
        max-width: none;
    }
    
    .country-selector {
        min-width: 80px;
    }
    
    .country-selector .country-code {
        font-size: 0.8125rem;
    }
}