/* Modern Form Styles */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Country Selector Styles */
.country-selector {
    position: relative;
}

.country-selector-button {
    transition: all 0.2s ease;
    min-height: 42px;
}

.country-selector-button:hover {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.country-dropdown {
    z-index: 1000;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    backdrop-filter: blur(8px);
}

.country-option {
    transition: all 0.15s ease;
}

.country-option:hover {
    background-color: #dbeafe;
    transform: translateX(2px);
}

.country-option:active {
    background-color: #bfdbfe;
}

.country-search {
    transition: all 0.2s ease;
}

.country-search:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Phone Input Styles */
.phone-container {
    min-height: 42px;
}

.phone-container:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dial-code-display {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
}

.phone-flag {
    border: 1px solid #e2e8f0;
}

/* Form Input Improvements */
.form-input {
    min-height: 42px;
    transition: all 0.2s ease;
    border: 1px solid #d1d5db;
}

.form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .country-dropdown {
        max-height: 250px;
    }
    
    .countries-list {
        max-height: 200px;
    }
    
    .dial-code-display {
        min-width: 70px;
        font-size: 0.875rem;
    }
}

/* Animation for dropdown */
.country-dropdown {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Flag emoji fallback */
.flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.25rem;
}

/* Loading state for phone validation */
.phone-input.validating {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}