/* Pakistan Phone Field Styles */
.contact-form-group {
    position: relative;
}

.contact-form-group .phone-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: 500;
    z-index: 2;
    background: white;
    padding-right: 8px;
    pointer-events: none;
    font-size: 14px;
}

.contact-form-input[data-prefix="+92"] {
    padding-left: 50px !important;
}

/* Valid Pakistan phone styling */
.contact-form-input[data-prefix="+92"].is-valid {
    border-color: #28a745;
    background-color: #f8fff9;
}

.contact-form-input[data-prefix="+92"].is-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

/* Phone field focus state */
.contact-form-input[data-prefix="+92"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.contact-form-input[data-prefix="+92"]:focus + .phone-prefix {
    color: #007bff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .phone-prefix {
        left: 10px;
        font-size: 13px;
    }
    
    .contact-form-input[data-prefix="+92"] {
        padding-left: 45px !important;
    }
}

/* Error message styling */
.contact-form-group .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Success state */
.contact-form-group .valid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #28a745;
}

/* Help text for phone field */
.contact-form-group .form-text {
    margin-top: 0.25rem;
    font-size: 0.8em;
    color: #6c757d;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .phone-prefix {
        background: #2d3748;
        color: #a0aec0;
    }
    
    .contact-form-input[data-prefix="+92"].is-valid {
        background-color: #2d5a3d;
        border-color: #48bb78;
    }
    
    .contact-form-input[data-prefix="+92"].is-invalid {
        background-color: #5a2d2d;
        border-color: #f56565;
    }
}