/* ===============================================
   WoodCorner - Custom Select2 Styles
   ===============================================
   Custom styling for Select2 dropdowns to match
   the WoodCorner design system
   =============================================== */

/* === Select2 Container === */
.select2-container {
    width: 100% !important;
}

/* Use site main fonts for all Select2 elements (country/city dropdowns)
   - default to Arabic font (dashboard and most pages)
   - switch to English font when body has .lang-en class */
.select2-container,
.select2-container .select2-selection__rendered,
.select2-container .select2-results__option,
.select2-container .select2-search__field {
    font-family: var(--wc-font-ar, 'AvenirArabic'), sans-serif !important;
}

body.lang-en .select2-container,
body.lang-en .select2-container .select2-selection__rendered,
body.lang-en .select2-container .select2-results__option,
body.lang-en .select2-container .select2-search__field {
    font-family: var(--wc-font-en, 'AvenirArabic'), sans-serif !important;
}

.select2-container--default .select2-selection--single {
    height: auto !important;
    border: none !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.13) !important;
}

/* === For Measurement & Jobs Forms (Dark Background) === */
.wc-measure-page .select2-container--default .select2-selection--single,
.wc-jobs-page .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.13) !important;
    border: none !important;
    padding: 0.65rem 1rem;
    min-height: 42px;
}

.wc-measure-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.wc-jobs-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    padding-left: 2rem !important;
}

.wc-measure-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.wc-jobs-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    left: 1rem !important;
    right: auto !important;
}

.wc-measure-page .select2-container--default .select2-selection--single .select2-selection__arrow b,
.wc-jobs-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent !important;
}

.wc-measure-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.wc-jobs-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent !important;
}

.wc-measure-page .select2-container--default .select2-selection--single .select2-selection__placeholder,
.wc-jobs-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* === For Checkout Form (Light Background) === */
.wc-checkout-page .select2-container--default .select2-selection--single {
    background: #fff !important;
    border: 1.5px solid var(--wc-border, #e0e0e0) !important;
    padding: 0.65rem 1rem;
    min-height: 42px;
}

.wc-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wc-dark, #333) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    padding-right: 2rem !important;
}

.wc-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 1rem !important;
}

.wc-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wc-primary, #493628) transparent transparent transparent !important;
}

.wc-checkout-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wc-primary, #493628) transparent !important;
}

.wc-checkout-page .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--wc-accent, #C9A84C) !important;
}

/* === For Dashboard Forms === */
.dash-card .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.65rem 1rem;
    min-height: 42px;
    border-radius: 6px !important;
}

.dash-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    padding-left: 2rem !important;
}

.dash-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    left: 1rem !important;
    right: auto !important;
}

.dash-card .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent !important;
}

.dash-card .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent !important;
}

.dash-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.dash-card .select2-container--default .select2-selection--single:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.dash-card .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: rgba(201, 168, 76, 0.6) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.15) !important;
}

/* === Dropdown Styles === */
.select2-container--default .select2-dropdown {
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin-top: 4px;
}

/* === Dark Theme Dropdown (for Measurement & Jobs) === */
.wc-measure-page .select2-dropdown,
.wc-jobs-page .select2-dropdown {
    background-color: var(--wc-brown, #7B4F2E) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.wc-measure-page .select2-search--dropdown .select2-search__field,
.wc-jobs-page .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.wc-measure-page .select2-search--dropdown .select2-search__field::placeholder,
.wc-jobs-page .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.wc-measure-page .select2-results__option,
.wc-jobs-page .select2-results__option {
    color: #fff !important;
}

.wc-measure-page .select2-results__option--highlighted[aria-selected],
.wc-jobs-page .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

.wc-measure-page .select2-results__option[aria-selected=true],
.wc-jobs-page .select2-results__option[aria-selected=true] {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.wc-measure-page .select2-results__message,
.wc-jobs-page .select2-results__message {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* === Dashboard Dropdown (Dark Theme) === */
.dash-card .select2-dropdown {
    background-color: var(--wc-brown, #5C3D2E) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dash-card .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 6px !important;
}

.dash-card .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.dash-card .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(201, 168, 76, 0.5) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.dash-card .select2-results__option {
    color: #fff !important;
    padding: 0.8rem 1rem !important;
    background-color: transparent !important;
}

.dash-card .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(201, 168, 76, 0.4) !important;
    color: #fff !important;
}

.dash-card .select2-results__option[aria-selected=true] {
    background-color: rgba(201, 168, 76, 0.25) !important;
    color: #fff !important;
}

.dash-card .select2-results__message {
    color: rgba(255, 255, 255, 0.7) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    outline: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wc-accent, #C9A84C) !important;
}

.select2-container--default .select2-results__option {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
    transition: background-color 0.2s;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wc-accent, #C9A84C) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(201, 168, 76, 0.1) !important;
    color: var(--wc-primary, #493628) !important;
}

/* === RTL Support === */
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 0 !important;
    padding-left: 2rem !important;
    text-align: right;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1rem !important;
    right: auto !important;
}

.select2-container--default[dir="rtl"] .select2-search--dropdown {
    direction: rtl;
}

/* === Disabled State === */
.select2-container--default .select2-selection--single.select2-selection--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f8f8 !important;
}

.wc-measure-page .select2-container--default .select2-selection--single.select2-selection--disabled,
.wc-jobs-page .select2-container--default .select2-selection--single.select2-selection--disabled {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dash-card .select2-container--default .select2-selection--single.select2-selection--disabled {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* === Responsive === */
@media (max-width: 768px) {
    .select2-container--default .select2-results__option {
        padding: 0.7rem 0.9rem !important;
    }
    
    .select2-container--default .select2-search--dropdown .select2-search__field {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}