/**
 * Select2 Custom Styles - סגנונות מותאמים ל-Select2
 * עיצוב עם border מכל הצדדים
 */

/* ========================================
   CONTAINER - מיכל ראשי
   ======================================== */

.select2-container--clinic-queue .select2-selection--single {
    height: 56px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 8px !important;
    background-color: var(--color-white) !important;
    padding-inline: var(--spacing-12) 34px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.select2-container--clinic-queue:not(.select2-container--disabled) .select2-selection--single:hover {
    border-color: var(--color-gray-900) !important;
}

.select2-container--clinic-queue.select2-container--focus .select2-selection--single {
    border: 1px solid var(--color-primary) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.select2-container--clinic-queue.select2-container--focus .select2-selection--single:hover {
    border-color: var(--color-primary) !important;
}

/* ========================================
   TEXT - טקסט
   ======================================== */

.select2-container--clinic-queue .select2-selection--single .select2-selection__rendered {
    color: var(--color-gray-900) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0 12px !important;
    text-align: right !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--font-primary) !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.select2-container--clinic-queue.select2-container--focus .select2-selection--single .select2-selection__rendered {
    color: var(--color-primary) !important;
}

/* ========================================
   ARROW - חץ
   ======================================== */

.select2-container--clinic-queue .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    top: 0 !important;
    width: 24px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-gray-600) !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.select2-container--clinic-queue.select2-container--focus .select2-selection--single .select2-selection__arrow {
    color: var(--color-primary) !important;
}

.select2-container--clinic-queue .select2-selection--single .select2-selection__arrow b {
    border: none !important;
    width: 24px !important;
    height: 24px !important;
    position: relative !important;
}

.select2-container--clinic-queue .select2-selection--single .select2-selection__arrow b::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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: center !important;
    background-size: contain !important;
    display: block !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* אנימציה של סיבוב 180 מעלות כשהדרופדאון פתוח */
.select2-container--clinic-queue.select2-container--open .select2-selection--single .select2-selection__arrow b::before {
    transform: translate(-50%, -50%) rotate(180deg) !important;
}

/* ========================================
   DROPDOWN - תפריט נפתח
   ======================================== */

.select2-container--clinic-queue .select2-dropdown {
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 4px !important;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
    background-color: #ffffff !important;
    margin-top: 8px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

.select2-container--clinic-queue .select2-results {
    padding: 8px 0 !important;
}

.select2-container--clinic-queue .select2-results__option {
    padding: 12px 16px !important;
    font-size: 16px !important;
    color: var(--color-gray-900) !important;
    text-align: right !important;
    cursor: pointer !important;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: var(--font-primary) !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--clinic-queue .select2-results__option:not(.select2-results__option--group):hover {
    background-color: var(--color-gray-100) !important;
}

.select2-container--clinic-queue .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(216, 36, 102, 0.08) !important;
    color: var(--color-primary) !important;
}

.select2-container--clinic-queue .select2-results__option[aria-selected=true] {
    background-color: rgba(216, 36, 102, 0.12) !important;
    color: var(--color-primary) !important;
    font-weight: 500 !important;
}   
.clinic-queue-doctor-result {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    
    .clinic-queue-doctor-thumbnail {
        width: 40px !important;
        height: 40px !important;
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
        background-color: var(--color-gray-100, #f1f5f9) !important;

        img {
            width: 100% !important;
            border-radius: 4px !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }
    }

    .clinic-queue-doctor-info {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .clinic-queue-doctor-name {
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .clinic-queue-doctor-license {
        font-size: 13px !important;
        color: var(--color-gray-500, #64748b) !important;
        white-space: nowrap !important;
    }

    .clinic-queue-doctor-specialties {
        flex-shrink: 0 !important;
        margin-inline-start: auto !important;
        display: flex !important;
        align-items: flex-end !important;
        gap: 3px !important;
    }

    .clinic-queue-doctor-specialty {
        display: inline-flex !important;
        align-items: center !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        background-color: rgba(193, 226, 243, 0.5) !important;
        color: var(--color-secondary) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;

        &--more {
            background-color: rgba(193, 226, 243, 0.9) !important;
            font-weight: 700 !important;
            padding-inline: 8px !important;
        }
    }
}

/* ========================================
   WIDTH - רוחב
   ======================================== */

.select2-container--clinic-queue {
    width: 100% !important;
}

/* ========================================
   JETFORMBUILDER OVERRIDE - ביטול פסאודו אלמנט של JetFormBuilder
   ======================================== */

/* ביטול הפסאודו אלמנט ::after של JetFormBuilder על שדות בחירה עם Select2 */
.jet-form-builder:not(.jfb-skin-disable) .field-type-select-field::after,
.clinic-add-schedule-form .jet-form-builder:not(.jfb-skin-disable) .field-type-select-field::after {
    content: none !important;
    display: none !important;
}

/* ביטול גם על שדות בחירה רגילים (ללא Select2) */
.jet-form-builder:not(.jfb-skin-disable) .field-type-select-field select + ::after,
.clinic-add-schedule-form .jet-form-builder:not(.jfb-skin-disable) .field-type-select-field select + ::after {
    content: none !important;
    display: none !important;
}

/* ========================================
   DISABLED - מושבת
   ======================================== */

.select2-container--clinic-queue.select2-container--disabled .select2-selection--single {
    background-color: var(--color-gray-100) !important;
    border: 1px solid var(--color-gray-300) !important;
    color: var(--color-gray-500) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.select2-container--clinic-queue.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--color-gray-500) !important;
}

.select2-container--clinic-queue.select2-container--disabled .select2-selection--single .select2-selection__arrow {
    color: var(--color-gray-400) !important;
}

/* ========================================
   SMALL SELECT FIELDS - שדות בחירה קטנים (כמו שדות זמן)
   ======================================== */

/* שדות בחירה קטנים שומרים על גובה קטן יותר */
.field-type-select-field .select2-container--clinic-queue .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 8px !important;
    background-color: var(--color-white) !important;
}

.field-type-select-field .select2-container--clinic-queue .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    font-size: 14px !important;
}

.field-type-select-field .select2-container--clinic-queue .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    width: 20px !important;
}

.field-type-select-field .select2-container--clinic-queue .select2-selection--single .select2-selection__arrow b {
    width: 20px !important;
    height: 20px !important;
}

.field-type-select-field .select2-container--clinic-queue .select2-selection--single .select2-selection__arrow b::before {
    width: 20px !important;
    height: 20px !important;
}

/* ========================================
   MOBILE - מובייל
   ======================================== */

@media (max-width: 768px) {
    .select2-container--clinic-queue .select2-selection--single {
        height: 56px !important;
        border: 1px solid var(--color-gray-300) !important;
        border-radius: 8px !important;
        background-color: var(--color-white) !important;
    }
    
    .select2-container--clinic-queue .select2-selection--single .select2-selection__rendered {
        padding: 0 12px !important;
        font-size: 16px !important;
    }
    
    .select2-container--clinic-queue .select2-selection--single .select2-selection__arrow {
        height: 56px !important;
    }
    
    /* שדות קטנים נשארים קטנים גם במובייל */
    .field-type-select-field .select2-container--clinic-queue .select2-selection--single {
        height: 40px !important;
        border: 1px solid var(--color-gray-300) !important;
        border-radius: 8px !important;
        background-color: var(--color-white) !important;
    }
    
    .field-type-select-field .select2-container--clinic-queue .select2-selection--single .select2-selection__rendered {
        padding: 0 8px !important;
        font-size: 14px !important;
    }
    
    .field-type-select-field .select2-container--clinic-queue .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }
}

/* ========================================
   HIERARCHICAL OPTIONS - אופציות היררכיות
   ======================================== */

/* Hide disabled options in time-select dropdowns */
.time-select-dropdown .select2-results__option[aria-disabled="true"] {
    display: none !important;
}

/* Parent options (disabled headers) in dropdown */
.select2-container--clinic-queue .select2-results__option[aria-disabled="true"] {
    font-weight: 700 !important;
    color: var(--color-text-primary, #0c1c4a) !important;
    background-color: #f5f5f5 !important;
    cursor: default !important;
    padding: 8px 12px !important;
}

/* Hover state for child options only */
.select2-container--clinic-queue .select2-results__option:not([aria-disabled="true"]):not(.select2-results__option--group):hover,
.select2-container--clinic-queue .select2-results__option--highlighted:not([aria-disabled="true"]):not(.select2-results__option--group) {
    background-color: rgba(0, 163, 163, 0.1) !important;
    color: var(--color-primary, #00a3a3) !important;
}

/* ========================================
   CQ-SEARCHABLE - שדה סינון בתוך תפריט בחירה
   Convention: הוסף class `cq-searchable` לכל <select> שרוצים בו תיבת סינון.
   Select2 מציג תיבת חיפוש בראש הדרופדאון שמסננת את הרשימה תוך כדי הקלדה.
   ראה assets/js/select2-inline-search.js
   ======================================== */

.clinic-queue-filterable .select2-search--dropdown {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--color-gray-200, #e0e0e0) !important;
}

.clinic-queue-filterable .select2-search__field {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    font-family: var(--font-primary) !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 4px !important;
    outline: none !important;
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
    background: var(--color-white, #fff) !important;
    color: var(--color-gray-900) !important;
    box-sizing: border-box !important;
}

.clinic-queue-filterable .select2-search__field::placeholder {
    color: var(--color-gray-400, #9e9e9e) !important;
}

.clinic-queue-filterable .select2-search__field:focus {
    border-color: var(--color-primary, #00a3a3) !important;
    outline: none !important;
    box-shadow: none !important;
}