/**
 * Mobile Native Select Styles
 * Universal styling for native select on all mobile devices
 */

/* Mobile native select base styles */
.mobile-native-select {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 45px 12px 15px !important;
    font-size: 16px !important; /* Prevents zoom on mobile browsers */
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;

    /* Arrow indicator */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l6 6 6-6' stroke='%236c757d' stroke-width='2' fill='none' fill-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 15px center !important;
    background-size: 14px !important;

    /* Smooth transitions */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* RTL support */
html[dir="rtl"] .mobile-native-select {
    padding: 12px 15px 12px 45px !important;
    background-position: right 15px center !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Focus state */
.mobile-native-select:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

/* Hover state (for devices that support it) */
@media (hover: hover) {
    .mobile-native-select:hover {
        border-color: #b0b8c1 !important;
    }
}

/* Hide Select2 on mobile devices */
@media (max-width: 1024px) {
    /* Hide Select2 container for main service */
    #main_service_id + .select2-container,
    #main_service_id ~ .select2-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ensure native select is visible */
    #main_service_id:not(.select2-hidden-accessible) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force native select styles */
    select#main_service_id {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
}

/* Android-specific fixes */
@media (max-width: 1024px) {
    .mobile-native-select option {
        padding: 15px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    .mobile-native-select {
        /* iOS needs specific handling */
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }

    .mobile-native-select option {
        padding: 12px !important;
    }
}

/* Service section specific styles */
.service-section .mobile-native-select {
    background-color: #ffffff !important;
    margin-top: 0.5rem !important;
}

/* Dark mode support (if applicable) */
@media (prefers-color-scheme: dark) {
    .mobile-native-select {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border-color: #404040 !important;
    }

    .mobile-native-select:focus {
        border-color: #3b82f6 !important;
    }
}

/* Ensure option text is readable */
.mobile-native-select option {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 10px !important;
    font-size: 16px !important;
}

/* Style for disabled placeholder option */
.mobile-native-select option[disabled] {
    color: #6c757d !important;
    font-style: normal !important;
}

/* Ensure selected option is visible */
.mobile-native-select option:checked:not([disabled]) {
    font-weight: 600 !important;
    background-color: #e7f1ff !important;
}

/* iOS specific - ensure first option is visible */
@supports (-webkit-touch-callout: none) {
    .mobile-native-select option:first-child {
        display: block !important;
        visibility: visible !important;
    }

    /* Ensure the select shows the placeholder text */
    .mobile-native-select:invalid,
    .mobile-native-select:has(option[value=""]:checked) {
        color: #495057 !important;
    }
}

/* Loading state */
.mobile-native-select:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Error state */
.mobile-native-select.is-invalid {
    border-color: #dc3545 !important;
}

.mobile-native-select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Success state */
.mobile-native-select.is-valid {
    border-color: #28a745 !important;
}

.mobile-native-select.is-valid:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Ensure proper layering */
.service-section {
    position: relative !important;
    z-index: 1 !important;
}

/* Remove any Select2 search box on mobile */
@media (max-width: 1024px) {
    .select2-search,
    .select2-search__field {
        display: none !important;
    }
}

/* Tablet-specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-native-select {
        font-size: 18px !important;
        min-height: 55px !important;
        padding: 14px 50px 14px 20px !important;
    }

    html[dir="rtl"] .mobile-native-select {
        padding: 14px 20px 14px 50px !important;
    }
}