/* Country Phone Group Styling */
.country-phone-group {
    display: flex;
    width: 100%;
}

/* Country Select Styling */
.country-select {
    flex: 0 0 30%; /* 30% width */
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 14px;
    padding: 0.75rem 0.5rem;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Phone Input Styling */
.phone-input {
    flex: 0 0 70%; /* 70% width */
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-width: 0; /* Important for flex shrinking */
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .country-phone-group {
        flex-direction: row;
        width: 100%;
    }
    
    .country-select {
        flex: 0 0 35%; /* Slightly larger on mobile for better usability */
        font-size: 13px;
        padding: 0.75rem 0.25rem;
    }
    
    .phone-input {
        flex: 0 0 65%; /* 65% on mobile */
        min-width: 0;
    }
    
    /* Ensure the input group doesn't overflow */
    .col-md-6 .country-phone-group {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .country-select {
        flex: 0 0 40%; /* 40% on small screens */
        font-size: 12px;
        padding: 0.75rem 0.2rem;
    }
    
    .country-select option {
        font-size: 12px;
    }
    
    .phone-input {
        flex: 0 0 60%; /* 60% on small screens */
        font-size: 14px;
    }
}

/* Fix for Bootstrap Input Group Focus */
.country-phone-group .country-select:focus {
    z-index: 3;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.country-phone-group .phone-input:focus {
    z-index: 3;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Country Info Display - Removed since we don't want to show info below dropdown */

/* Dropdown arrow adjustment for smaller width */
.country-select {
    background-size: 16px 12px;
    background-position: right 0.5rem center;
}

/* Ensure proper alignment */
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Fix any overflow issues */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

/* Prevent text overflow in country select */
.country-select option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Additional mobile fixes */
@media (max-width: 480px) {
    .country-select {
        flex: 0 0 42%; /* 42% on very small screens */
        font-size: 11px;
    }
    
    .country-select option {
        font-size: 11px;
        padding: 2px;
    }
    
    .phone-input {
        flex: 0 0 58%; /* 58% on very small screens */
    }
}

/* Extra small screens */
@media (max-width: 320px) {
    .country-select {
        flex: 0 0 45%; /* 45% on extra small screens */
        font-size: 10px;
        padding: 0.75rem 0.15rem;
    }
    
    .phone-input {
        flex: 0 0 55%; /* 55% on extra small screens */
        font-size: 13px;
    }
}

/* Ensure input group maintains proper spacing */
.country-phone-group {
    min-height: 48px;
}

.country-phone-group .form-select,
.country-phone-group .form-control {
    min-height: 48px;
}