/* * 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. * * ⚠⚠ DELETED 2026-09-02 AND RESTORED THE SAME DAY — read this before touching it again. * * A coverage scan reported 0 of its 26 rules matching on the shop, cart, checkout, account and * product pages, and it was removed as dead weight. Both halves of that measurement were invalid: * select2 builds its markup at RUNTIME, so it is never in the server HTML the scan parsed, and the * «checkout» page it scanned was the forced-login gate, because the scan ran as a guest. On the * real checkout, logged in, `selectWoo.full.min.js` loads and FOUR `.select2-container` elements * are built for the country and state fields. With this file gone they measured 27×23 with no * background and no border — the address dropdowns on the money page were destroyed. * * The rule that would have caught it is written at the top of this very file. Deleting a stylesheet * because a scan says nothing matches it is only safe when the scan ran on the state where its * markup can exist: logged in, on the template that builds it, after the script has run. */ /* ---------------------------------------------------------------- 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, #262a35); border-radius: var(--ostz-radius-sm, 10px); background: var(--ostz-bg-sunken, #111318); color: var(--ostz-text, #f2f4f8); font-family: inherit; font-size: var(--ostz-text-base); line-height: var(--ostz-leading-snug); 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, #828a9c); } /* 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, #aab0be); border-block-end: 2px solid var(--ostz-text-dim, #aab0be); 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, #262a35); border-radius: var(--ostz-radius-sm, 10px); background: var(--ostz-bg-sunken, #111318); } .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: var(--ostz-text-sm); } /* ---------------------------------------------------------------- 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, #15171e); 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: var(--ostz-text-base); direction: rtl; text-align: start; } .select2-search--dropdown { display: block; padding: 8px; border-block-end: 1px solid var(--ostz-line, #262a35); } .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, #262a35); border-radius: 8px; background: var(--ostz-bg-sunken, #111318); color: var(--ostz-text, #f2f4f8); font-family: inherit; font-size: var(--ostz-text-base); } .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: var(--ostz-leading-snug); 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, #08090c); } .select2-results__option[aria-selected='true'], .select2-results__option[data-selected='true'] { font-weight: var(--ostz-weight-bold); } .select2-results__option[aria-disabled='true'] { color: var(--ostz-text-faint, #828a9c); cursor: not-allowed; } .select2-results__message { padding: 12px; color: var(--ostz-text-dim, #aab0be); } /* 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; }