/* Clean, professional country selector styling */
.iti {
    width: 100%;
    position: relative;
    display: inline-block;
}

.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 1px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-right: none;
    border-radius: 4px 0 0 4px;
    min-width: 80px;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.iti__selected-flag {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 80px;
    background-color: #f8f9fa;
}

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

.iti__selected-dial-code {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    margin-right: 8px;
    display: block !important;
    visibility: visible !important;
}

.iti__arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6c757d;
    transition: transform 0.2s ease;
    display: block !important;
    visibility: visible !important;
}

.iti__arrow--up {
    border-top: none;
    border-bottom: 5px solid #6c757d;
}

/* Ensure phone input has proper spacing */
.iti--separate-dial-code input {
    padding-left: 90px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Country list styling - Fixed positioning */
.iti__country-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 2px;
    list-style: none;
    padding: 0;
}

.iti__country {
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.iti__country:hover {
    background-color: #f8f9fa;
}

.iti__country.iti__highlight {
    background-color: #e9ecef;
}

.iti__country-name {
    font-size: 14px;
    color: #495057;
    flex: 1;
}

.iti__dial-code {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

/* Flag styling with emoji flags */
.iti__flag-box {
    display: inline-block;
    width: 24px;
    height: 18px;
    margin-right: 8px;
    text-align: center;
    line-height: 18px;
    font-size: 16px;
}

.iti__flag {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #6c757d;
    border-radius: 2px;
    position: relative;
}

/* Add emoji flags for common countries */
.iti__flag.iti__us::before { content: "🇺🇸"; background: none; }
.iti__flag.iti__gb::before { content: "🇬🇧"; background: none; }
.iti__flag.iti__de::before { content: "🇩🇪"; background: none; }
.iti__flag.iti__fr::before { content: "🇫🇷"; background: none; }
.iti__flag.iti__it::before { content: "🇮🇹"; background: none; }
.iti__flag.iti__es::before { content: "🇪🇸"; background: none; }
.iti__flag.iti__ca::before { content: "🇨🇦"; background: none; }
.iti__flag.iti__au::before { content: "🇦🇺"; background: none; }
.iti__flag.iti__nl::before { content: "🇳🇱"; background: none; }
.iti__flag.iti__jp::before { content: "🇯🇵"; background: none; }
.iti__flag.iti__cn::before { content: "🇨🇳"; background: none; }
.iti__flag.iti__in::before { content: "🇮🇳"; background: none; }
.iti__flag.iti__br::before { content: "🇧🇷"; background: none; }
.iti__flag.iti__ru::before { content: "🇷🇺"; background: none; }
.iti__flag.iti__kr::before { content: "🇰🇷"; background: none; }
.iti__flag.iti__mx::before { content: "🇲🇽"; background: none; }
.iti__flag.iti__id::before { content: "🇮🇩"; background: none; }
.iti__flag.iti__sa::before { content: "🇸🇦"; background: none; }
.iti__flag.iti__ch::before { content: "🇨🇭"; background: none; }
.iti__flag.iti__se::before { content: "🇸🇪"; background: none; }
.iti__flag.iti__no::before { content: "🇳🇴"; background: none; }
.iti__flag.iti__dk::before { content: "🇩🇰"; background: none; }
.iti__flag.iti__fi::before { content: "🇫🇮"; background: none; }
.iti__flag.iti__pl::before { content: "🇵🇱"; background: none; }

/* Fallback for countries without emoji flags */
.iti__flag:not([class*="iti__us"]):not([class*="iti__gb"]):not([class*="iti__de"]):not([class*="iti__fr"]):not([class*="iti__it"]):not([class*="iti__es"]):not([class*="iti__ca"]):not([class*="iti__au"]):not([class*="iti__nl"]):not([class*="iti__jp"]):not([class*="iti__cn"]):not([class*="iti__in"]):not([class*="iti__br"]):not([class*="iti__ru"]):not([class*="iti__kr"]):not([class*="iti__mx"]):not([class*="iti__id"]):not([class*="iti__sa"]):not([class*="iti__ch"]):not([class*="iti__se"]):not([class*="iti__no"]):not([class*="iti__dk"]):not([class*="iti__fi"]):not([class*="iti__pl"]) {
    background: linear-gradient(45deg, #6c757d 25%, transparent 25%), linear-gradient(-45deg, #6c757d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #6c757d 75%), linear-gradient(-45deg, transparent 75%, #6c757d 75%);
    background-size: 4px 4px;
    background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
}

/* Dropdown positioning fixes */
.iti--container {
    position: absolute;
    top: -1000px;
    left: -1000px;
    z-index: 1060;
    padding: 1px;
}

/* Mobile responsive */
@media (max-width: 500px) {
    .iti__country-list {
        white-space: normal;
        max-height: 150px;
    }
    
    .iti__country {
        padding: 8px 10px;
    }
}

/* Force visibility of essential elements */
.iti__flag-container,
.iti__selected-flag,
.iti__selected-dial-code,
.iti__arrow {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure the container is visible */
.iti {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}