/**
 * Contact Form 7 Override Styles
 * Đảm bảo provinces dropdown hiển thị đúng trong Contact Form 7
 */

/* Override Contact Form 7 select styles - Tăng cường specificity */
.wpcf7-form .provinces-api-cf7-container select,
.wpcf7-form select.province-select,
.wpcf7-form select.ward-select,
.wpcf7-form .form-row select,
.wpcf7-form select,
.wpcf7-form .wpcf7-form-control-wrap select,
.wpcf7-form .wpcf7-select {
    background: white !important;
    color: #2c3e50 !important;
    border: 2px solid #e1e8ed !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-indent: 0 !important;
    text-align: left !important;
    direction: ltr !important;
}

/* Hover state */
.wpcf7-form .provinces-api-cf7-container select:hover,
.wpcf7-form select.province-select:hover,
.wpcf7-form select.ward-select:hover,
.wpcf7-form .form-row select:hover,
.wpcf7-form select:hover,
.wpcf7-form .wpcf7-form-control-wrap select:hover,
.wpcf7-form .wpcf7-select:hover {
    border-color: #b8c5f6 !important;
    box-shadow: 0 5px 15px rgba(102,126,234,0.1) !important;
    background: white !important;
    color: #2c3e50 !important;
}

/* Focus state */
.wpcf7-form .provinces-api-cf7-container select:focus,
.wpcf7-form select.province-select:focus,
.wpcf7-form select.ward-select:focus,
.wpcf7-form .form-row select:focus,
.wpcf7-form select:focus,
.wpcf7-form .wpcf7-form-control-wrap select:focus,
.wpcf7-form .wpcf7-select:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1) !important;
    transform: translateY(-2px) !important;
    background: white !important;
    color: #2c3e50 !important;
}

/* Disabled state */
.wpcf7-form .provinces-api-cf7-container select:disabled,
.wpcf7-form select.province-select:disabled,
.wpcf7-form select.ward-select:disabled,
.wpcf7-form .form-row select:disabled,
.wpcf7-form select:disabled,
.wpcf7-form .wpcf7-form-control-wrap select:disabled,
.wpcf7-form .wpcf7-select:disabled {
    background: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Options styling */
.wpcf7-form .provinces-api-cf7-container select option,
.wpcf7-form select.province-select option,
.wpcf7-form select.ward-select option,
.wpcf7-form .form-row select option,
.wpcf7-form select option,
.wpcf7-form .wpcf7-form-control-wrap select option,
.wpcf7-form .wpcf7-select option {
    background: white !important;
    color: #2c3e50 !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Selected option */
.wpcf7-form .provinces-api-cf7-container select option:checked,
.wpcf7-form select.province-select option:checked,
.wpcf7-form select.ward-select option:checked,
.wpcf7-form .form-row select option:checked,
.wpcf7-form select option:checked,
.wpcf7-form .wpcf7-form-control-wrap select option:checked,
.wpcf7-form .wpcf7-select option:checked {
    background: #667eea !important;
    color: white !important;
}

/* Hover option */
.wpcf7-form .provinces-api-cf7-container select option:hover,
.wpcf7-form select.province-select option:hover,
.wpcf7-form select.ward-select option:hover,
.wpcf7-form .form-row select option:hover,
.wpcf7-form select option:hover,
.wpcf7-form .wpcf7-form-control-wrap select option:hover,
.wpcf7-form .wpcf7-select option:hover {
    background: #667eea !important;
    color: white !important;
}

/* Container styling */
.wpcf7-form .provinces-api-cf7-container {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef) !important;
    padding: 25px !important;
    border-radius: 15px !important;
    margin: 20px 0 !important;
    border: 2px solid #667eea !important;
    box-shadow: 0 10px 30px rgba(102,126,234,0.1) !important;
}

/* Labels */
.wpcf7-form .provinces-api-cf7-container label {
    display: block !important;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Wrapper spacing */
.wpcf7-form .province-select-wrapper,
.wpcf7-form .ward-select-wrapper {
    margin-bottom: 25px !important;
    position: relative !important;
}

.wpcf7-form .province-select-wrapper:last-child,
.wpcf7-form .ward-select-wrapper:last-child {
    margin-bottom: 0 !important;
}

/* Force text visibility - Tăng cường */
.wpcf7-form .provinces-api-cf7-container select,
.wpcf7-form select.province-select,
.wpcf7-form select.ward-select,
.wpcf7-form .form-row select,
.wpcf7-form select,
.wpcf7-form .wpcf7-form-control-wrap select,
.wpcf7-form .wpcf7-select {
    text-indent: 0 !important;
    text-align: left !important;
    direction: ltr !important;
    color: #2c3e50 !important;
    background: white !important;
}

/* Override any conflicting styles - Tăng cường */
.wpcf7-form .provinces-api-cf7-container select *,
.wpcf7-form select.province-select *,
.wpcf7-form select.ward-select *,
.wpcf7-form .form-row select *,
.wpcf7-form select *,
.wpcf7-form .wpcf7-form-control-wrap select *,
.wpcf7-form .wpcf7-select * {
    color: inherit !important;
    background: inherit !important;
}

/* Force background và color cho tất cả select trong CF7 */
.wpcf7-form select {
    background: white !important;
    color: #2c3e50 !important;
}

.wpcf7-form select option {
    background: white !important;
    color: #2c3e50 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .wpcf7-form .provinces-api-cf7-container select,
    .wpcf7-form select.province-select,
    .wpcf7-form select.ward-select,
    .wpcf7-form .form-row select,
    .wpcf7-form select,
    .wpcf7-form .wpcf7-form-control-wrap select,
    .wpcf7-form .wpcf7-select {
        padding: 14px 18px !important;
        font-size: 14px !important;
        padding-right: 45px !important;
    }
    
    .wpcf7-form .provinces-api-cf7-container {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .wpcf7-form .provinces-api-cf7-container select,
    .wpcf7-form select.province-select,
    .wpcf7-form select.ward-select,
    .wpcf7-form .form-row select,
    .wpcf7-form select,
    .wpcf7-form .wpcf7-form-control-wrap select,
    .wpcf7-form .wpcf7-select {
        padding: 12px 16px !important;
        font-size: 14px !important;
        padding-right: 40px !important;
    }
    
    .wpcf7-form .provinces-api-cf7-container {
        padding: 15px !important;
        border-radius: 10px !important;
    }
}