/**
 * CibatoSelect — Universal Form Dropdown Design System
 * 
 * Single centralized stylesheet for all selectpickers across storefront and admin:
 * - Clean, modern design (8px radius, soft shadow, 1px border)
 * - 38px search box with 8px padding & clear focus ring
 * - 36px Select All / Deselect All buttons with 8px gap & clear hover state
 * - 36-40px options with right-aligned tick and soft blue highlight
 * - Slim visible scrollbar, proper "no results" state
 * - Total hiding of native <select> (zero pointer events, zero native popup)
 * - Strict transform reset (disables Popper.js translations)
 */

:root {
    --cibato-dd-radius: 8px;
    --cibato-dd-btn-height: 40px;
    --cibato-dd-btn-height-sm: 36px;
    --cibato-dd-border: #cbd5e1;
    --cibato-dd-border-hover: #94a3b8;
    --cibato-dd-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.2);
    --cibato-dd-focus-border: #0ea5e9;
    --cibato-dd-panel-bg: #ffffff;
    --cibato-dd-panel-border: #e2e8f0;
    --cibato-dd-panel-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    --cibato-dd-item-height: 38px;
    --cibato-dd-item-radius: 6px;
    --cibato-dd-item-text: #1e293b;
    --cibato-dd-item-hover-bg: #f1f5f9;
    --cibato-dd-item-hover-text: #0f172a;
    --cibato-dd-item-selected-bg: #f0f9ff;
    --cibato-dd-item-selected-text: #0284c7;
    --cibato-dd-actions-height: 36px;
    --cibato-dd-actions-gap: 8px;
}

/* ==========================================================================
   1. STRICT NATIVE SELECT ELIMINATION (R4 FIX)
   Ensure the real native <select> is NEVER visible, clickable, or receiving pointer events
   ========================================================================== */
.bootstrap-select > select,
.bootstrap-select > select.pos-filter-select,
.bootstrap-select > select.form-control,
.bootstrap-select select {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -9999 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: default !important;
}

/* Base reset for bootstrap-select wrapper element */
html body .bootstrap-select,
html body .bootstrap-select.sel,
html body .bootstrap-select.form-control,
html body .bootstrap-select.cibato-selectpicker,
html body .bootstrap-select.aiz-selectpicker {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

/* ==========================================================================
   2. TOGGLE BUTTON DESIGN (NORMAL HEIGHT, CLEAN CHEVRON, UNIFIED LOOK)
   ========================================================================== */
html body .bootstrap-select > .dropdown-toggle {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: var(--cibato-dd-btn-height) !important;
    min-height: var(--cibato-dd-btn-height) !important;
    padding: 0 14px 0 12px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--cibato-dd-border) !important;
    border-radius: var(--cibato-dd-radius) !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--cibato-dd-item-text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-align: left !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    cursor: pointer !important;
}

/* Small / compact variant */
html body .bootstrap-select.form-control-sm > .dropdown-toggle,
html body .bootstrap-select.pos-filter-control > .dropdown-toggle,
html body .bootstrap-select.pos-filter-select > .dropdown-toggle {
    height: var(--cibato-dd-btn-height-sm) !important;
    min-height: var(--cibato-dd-btn-height-sm) !important;
    font-size: 12.5px !important;
    padding: 0 12px 0 10px !important;
}

/* Hover and focus states */
html body .bootstrap-select:not(.disabled) > .dropdown-toggle:hover {
    border-color: var(--cibato-dd-border-hover) !important;
    background-color: #f8fafc !important;
}

html body .bootstrap-select.show > .dropdown-toggle,
html body .bootstrap-select.open > .dropdown-toggle,
html body .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--cibato-dd-focus-border) !important;
    box-shadow: var(--cibato-dd-focus-ring) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

/* Disabled state */
html body .bootstrap-select.disabled > .dropdown-toggle,
html body .bootstrap-select > .dropdown-toggle.disabled {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.75 !important;
}

/* Filter option text inside button */
html body .bootstrap-select > .dropdown-toggle .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    float: none !important;
    position: static !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

html body .bootstrap-select > .dropdown-toggle .filter-option-inner {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
}

html body .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
    color: inherit !important;
    background: transparent !important;
}

/* Placeholder styling */
html body .bootstrap-select > .dropdown-toggle.bs-placeholder,
html body .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: #94a3b8 !important;
}

/* Hide legacy caret elements */
html body .bootstrap-select > .dropdown-toggle .bs-caret,
html body .bootstrap-select > .dropdown-toggle .caret {
    display: none !important;
}

/* Clean modern rotating chevron */
html body .bootstrap-select > .dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    border-right: 1.8px solid #64748b !important;
    border-bottom: 1.8px solid #64748b !important;
    border-top: 0 !important;
    border-left: 0 !important;
    transform: translateY(-2px) rotate(45deg) !important;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
}

html body .bootstrap-select.show > .dropdown-toggle::after,
html body .bootstrap-select.open > .dropdown-toggle::after {
    transform: translateY(2px) rotate(-135deg) !important;
    border-color: var(--cibato-dd-focus-border) !important;
}

/* ==========================================================================
   3. DROPDOWN MENU CONTAINER (FIXED POSITIONING, STRICT TRANSFORM RESET)
   ========================================================================== */
html body > .bs-container,
html body > .bs-container.dropdown,
html body > .bs-container.bootstrap-select,
html body > .bs-container.show,
html body > .bs-container *,
html body > .bs-container *::before,
html body > .bs-container *::after {
    transition: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    -webkit-animation: none !important;
}

html body > .bs-container {
    z-index: 1060 !important;
    position: fixed !important;
    box-sizing: border-box !important;
    transition: none !important;
    animation: none !important;
}

html body > .bs-container.bs-container--in-modal {
    z-index: 1070 !important;
}

html body .bootstrap-select:not(.show):not(.open) > .dropdown-menu,
html body > .bs-container:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body > .bs-container.show {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* The actual dropdown menu panel */
html body .bootstrap-select.show > .dropdown-menu,
html body .bootstrap-select.open > .dropdown-menu,
html body > .bs-container.show > .dropdown-menu {
    position: static !important;
    transform: none !important;
    will-change: auto !important;
    background: var(--cibato-dd-panel-bg) !important;
    border: 1px solid var(--cibato-dd-panel-border) !important;
    border-radius: var(--cibato-dd-radius) !important;
    box-shadow: var(--cibato-dd-panel-shadow) !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    animation: none !important;
    transition: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   4. SEARCH BOX REDESIGN (R1 & R3 FIX: 38PX HEIGHT, 8PX PADDING, FOCUS RING)
   ========================================================================== */
html body .bootstrap-select .dropdown-menu .bs-searchbox,
html body > .bs-container .dropdown-menu .bs-searchbox {
    flex: 0 0 auto !important;
    padding: 8px 8px 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body .bootstrap-select .dropdown-menu .bs-searchbox input.form-control,
html body > .bs-container .dropdown-menu .bs-searchbox input.form-control {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid var(--cibato-dd-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    background: #ffffff !important;
    color: var(--cibato-dd-item-text) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html body .bootstrap-select .dropdown-menu .bs-searchbox input:focus,
html body > .bs-container .dropdown-menu .bs-searchbox input:focus {
    border-color: var(--cibato-dd-focus-border) !important;
    box-shadow: var(--cibato-dd-focus-ring) !important;
    outline: none !important;
}

/* ==========================================================================
   5. ACTIONS BOX REDESIGN (R3 FIX: 36PX HEIGHT, 8PX GAP, PROPER BUTTONS)
   ========================================================================== */
html body .bootstrap-select .dropdown-menu .bs-actionsbox,
html body > .bs-container .dropdown-menu .bs-actionsbox {
    flex: 0 0 auto !important;
    padding: 4px 8px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
}

html body .bootstrap-select .dropdown-menu .bs-actionsbox .btn-group,
html body > .bs-container .dropdown-menu .bs-actionsbox .btn-group {
    display: flex !important;
    gap: var(--cibato-dd-actions-gap) !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body .bootstrap-select .dropdown-menu .bs-actionsbox .btn-group button,
html body > .bs-container .dropdown-menu .bs-actionsbox .btn-group button {
    flex: 1 1 50% !important;
    height: var(--cibato-dd-actions-height) !important;
    min-height: var(--cibato-dd-actions-height) !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

html body .bootstrap-select .dropdown-menu .bs-actionsbox .btn-group button:hover,
html body > .bs-container .dropdown-menu .bs-actionsbox .btn-group button:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html body .bootstrap-select .dropdown-menu .bs-actionsbox .btn-group button:focus {
    box-shadow: var(--cibato-dd-focus-ring) !important;
    outline: none !important;
}

/* ==========================================================================
   6. INNER LIST SCROLL CONTAINER & SLIM VISIBLE SCROLLBAR
   ========================================================================== */
html body .bootstrap-select .dropdown-menu .inner,
html body > .bs-container .dropdown-menu .inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

html body .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar,
html body > .bs-container .dropdown-menu .inner::-webkit-scrollbar {
    width: 6px;
}

html body .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb,
html body > .bs-container .dropdown-menu .inner::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

html body .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb:hover,
html body > .bs-container .dropdown-menu .inner::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Presentation list resets */
html body .bootstrap-select .dropdown-menu ul.inner,
html body > .bs-container .dropdown-menu ul.inner {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .bootstrap-select .dropdown-menu li,
html body > .bs-container .dropdown-menu li {
    padding: 0 !important;
    margin: 0 0 1px 0 !important;
    list-style: none !important;
    position: relative !important;
}

/* ==========================================================================
   7. OPTION ITEMS (36-40PX HEIGHT, 8PX 12PX PADDING, RIGHT TICK, BANGLA TEXT)
   ========================================================================== */
html body .bootstrap-select .dropdown-menu li > a,
html body .bootstrap-select .dropdown-menu .dropdown-item,
html body > .bs-container .dropdown-menu li > a,
html body > .bs-container .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: var(--cibato-dd-item-height) !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: var(--cibato-dd-item-radius) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--cibato-dd-item-text) !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

/* Option text container */
html body .bootstrap-select .dropdown-menu li > a span.text,
html body .bootstrap-select .dropdown-menu .dropdown-item span.text,
html body > .bs-container .dropdown-menu li > a span.text,
html body > .bs-container .dropdown-menu .dropdown-item span.text {
    flex: 1 1 auto !important;
    display: inline-block !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    font-family: inherit !important;
}

/* Hover and keyboard active states */
html body .bootstrap-select .dropdown-menu li > a:hover,
html body .bootstrap-select .dropdown-menu li > a:focus,
html body .bootstrap-select .dropdown-menu li.active > a,
html body > .bs-container .dropdown-menu li > a:hover,
html body > .bs-container .dropdown-menu li > a:focus,
html body > .bs-container .dropdown-menu li.active > a {
    background-image: none !important;
    background-color: var(--cibato-dd-item-hover-bg) !important;
    color: var(--cibato-dd-item-hover-text) !important;
    outline: none !important;
}

/* Selected option highlight */
html body .bootstrap-select .dropdown-menu li.selected > a,
html body > .bs-container .dropdown-menu li.selected > a {
    background-image: none !important;
    background-color: var(--cibato-dd-item-selected-bg) !important;
    color: var(--cibato-dd-item-selected-text) !important;
    font-weight: 500 !important;
}

/* Right-aligned tick checkmark */
html body .bootstrap-select .dropdown-menu li.selected .check-mark,
html body > .bs-container .dropdown-menu li.selected .check-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    color: var(--cibato-dd-item-selected-text) !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

/* Unselected checkmark is hidden */
html body .bootstrap-select .dropdown-menu li:not(.selected) .check-mark,
html body > .bs-container .dropdown-menu li:not(.selected) .check-mark {
    display: none !important;
}

/* Disabled option */
html body .bootstrap-select .dropdown-menu li.disabled > a,
html body > .bs-container .dropdown-menu li.disabled > a {
    color: #94a3b8 !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Section divider */
html body .bootstrap-select .dropdown-menu .dropdown-divider,
html body > .bs-container .dropdown-menu .dropdown-divider,
html body .bootstrap-select .dropdown-menu .divider,
html body > .bs-container .dropdown-menu .divider {
    height: 1px !important;
    margin: 4px 0 !important;
    overflow: hidden !important;
    background-color: #f1f5f9 !important;
    border: 0 !important;
}

/* Section headers */
html body .bootstrap-select .dropdown-menu .dropdown-header,
html body > .bs-container .dropdown-menu .dropdown-header {
    padding: 6px 12px 4px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
}

/* "No results" state */
html body .bootstrap-select .dropdown-menu .no-results,
html body > .bs-container .dropdown-menu .no-results {
    padding: 16px 12px !important;
    font-size: 13px !important;
    color: #64748b !important;
    text-align: center !important;
    background: transparent !important;
    margin: 0 !important;
    white-space: normal !important;
}

/* RTL layout support */
[dir="rtl"] html body .bootstrap-select > .dropdown-toggle {
    text-align: right !important;
}

[dir="rtl"] html body .bootstrap-select > .dropdown-toggle::after {
    margin-left: 0 !important;
    margin-right: 10px !important;
}

[dir="rtl"] html body .bootstrap-select .dropdown-menu li.selected .check-mark,
[dir="rtl"] html body > .bs-container .dropdown-menu li.selected .check-mark {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
}