/* * OSTADEEZ — the enhanced-dropdown layer (select2 / selectWoo), reimplemented. * * WooCommerce's own select2 stylesheet is dequeued along with everything else it ships. That sheet * carried MECHANICS, not just a look: the dropdown is teleported to the end of and * absolutely positioned, so without any stylesheet at all it renders as a stray block of text in * the page corner and the control is unusable rather than merely unstyled. * * This file supplies those mechanics ourselves, in our own design language. It is deliberately a * separate file from the general baseline because it is the one part that must survive on markup * printed OUTSIDE our root element — the dropdown is a sibling of , so it cannot inherit * anything from `.ostz` and every value here carries a literal fallback. * * Used by: the country/state selects on checkout and the address form. */ /* ---------------------------------------------------------------- the closed control */ .select2-container { position: relative; display: block; box-sizing: border-box; margin: 0; max-width: 100%; vertical-align: middle; } .select2-container .select2-selection--single { display: flex; align-items: center; box-sizing: border-box; height: auto; min-height: 46px; padding: 10px 14px; border: 1px solid var(--ostz-line, #2a2f3a); border-radius: var(--ostz-radius-sm, 10px); background: var(--ostz-bg-sunken, #0f1219); color: var(--ostz-text, #f2f4f8); font-family: inherit; font-size: 14px; line-height: 1.6; cursor: pointer; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; flex: 1 1 auto; min-width: 0; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; } .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--ostz-text-faint, #6b7280); } /* The caret. Rotates when open, so the control states are distinguishable without colour. */ .select2-container .select2-selection--single .select2-selection__arrow { flex: 0 0 auto; width: 12px; height: 12px; margin-inline-start: 10px; border-inline-end: 2px solid var(--ostz-text-dim, #9aa3b2); border-block-end: 2px solid var(--ostz-text-dim, #9aa3b2); transform: rotate(45deg) translateY(-3px); transition: transform .18s ease; } .select2-container .select2-selection--single .select2-selection__arrow b { display: none; } .select2-container--open .select2-selection--single .select2-selection__arrow { transform: rotate(-135deg) translate(-3px, 0); } .select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single { border-color: var(--ostz-accent, #00e0d5); box-shadow: 0 0 0 3px rgba(0, 224, 213, .16); } .select2-container .select2-selection--single:focus { outline: none; } /* Multi-select is not used on this store today, but leaving it shapeless would be a trap for whoever adds one, so it gets the same shell. */ .select2-container .select2-selection--multiple { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--ostz-line, #2a2f3a); border-radius: var(--ostz-radius-sm, 10px); background: var(--ostz-bg-sunken, #0f1219); } .select2-container .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--ostz-line-strong, #333846); border-radius: 999px; background: var(--ostz-bg-raised-2, #1b1e27); color: var(--ostz-text, #f2f4f8); font-size: 13px; } /* ---------------------------------------------------------------- the dropdown ⚠ MECHANICS, not decoration. select2 moves this element to the end of and positions it with inline top/left it computes itself; without `position: absolute` and a stacking context it lands in the page flow at the bottom of the document. */ .select2-container--open .select2-dropdown { position: absolute; z-index: 10000; box-sizing: border-box; width: 100%; border: 1px solid var(--ostz-line-strong, #333846); border-radius: var(--ostz-radius-sm, 10px); background: var(--ostz-bg-raised, #14171f); color: var(--ostz-text, #f2f4f8); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); overflow: hidden; } .select2-dropdown { display: block; font-family: var(--ostz-font, Vazirmatn, Tahoma, sans-serif); font-size: 14px; direction: rtl; text-align: start; } .select2-search--dropdown { display: block; padding: 8px; border-block-end: 1px solid var(--ostz-line, #2a2f3a); } .select2-search--dropdown.select2-search--hide { display: none; } .select2-search--dropdown .select2-search__field { box-sizing: border-box; width: 100%; padding: 9px 12px; border: 1px solid var(--ostz-line, #2a2f3a); border-radius: 8px; background: var(--ostz-bg-sunken, #0f1219); color: var(--ostz-text, #f2f4f8); font-family: inherit; font-size: 14px; } .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--ostz-accent, #00e0d5); } .select2-results { display: block; } .select2-results__options { display: block; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; list-style: none; } .select2-results__option { padding: 9px 12px; border-radius: 8px; line-height: 1.7; cursor: pointer; user-select: none; -webkit-user-select: none; } .select2-results__option--highlighted, .select2-results__option--highlighted[aria-selected], .select2-results__option--highlighted[data-selected] { background: var(--ostz-accent, #00e0d5); color: var(--ostz-accent-ink, #04170f); } .select2-results__option[aria-selected='true'], .select2-results__option[data-selected='true'] { font-weight: 700; } .select2-results__option[aria-disabled='true'] { color: var(--ostz-text-faint, #6b7280); cursor: not-allowed; } .select2-results__message { padding: 12px; color: var(--ostz-text-dim, #9aa3b2); } /* select2 keeps a 1px off-screen input for keyboard handling; it must stay reachable but invisible, and it must NOT be parked with a negative inline offset — in an RTL document that extends the scrollable area and gives the whole page a horizontal scrollbar. */ .select2-container .select2-search--inline .select2-search__field { border: 0; background: transparent; color: inherit; font-family: inherit; outline: none; } .select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }