(search input + results list, shown while open, chosen toggles display/.chosen-container-active itself - no JS needed here for that part). */ #codplugin_woo_single_form select.hfe-ff-chosen-source { /* chosen() already sets display:none inline - this is only a safety net in case that inline style is ever stripped by a caching/ minifying plugin that rewrites inline attributes. */ display: none !important; } #codplugin_woo_single_form .chosen-container { display: block; position: relative; width: 100% !important; box-sizing: border-box; font-family: inherit; font-size: 14px; } #codplugin_woo_single_form .chosen-container .chosen-single { box-sizing: border-box; display: flex; align-items: center; width: 100%; height: 50px; line-height: normal; padding: 0; padding-inline-start: 12px; padding-inline-end: 32px; border: 2px solid #bce0f7; border-radius: 3px; background: #fff !important; box-shadow: none; color: #000 !important; cursor: pointer; transition: border-color .15s ease; } /* Matches #codplugin_woo_single_form select:valid { border: 2px solid #69bf29 !important; } in codplugin.css - the hidden source on the site, recolored/repositioned to sit where chosen's own arrow div renders instead of shipping a second, visually different arrow. */ #codplugin_woo_single_form .chosen-container .chosen-single div { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); width: 9px; height: 11px; background: none; } #codplugin_woo_single_form .chosen-container .chosen-single div b { display: block; width: 100%; height: 100%; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat center / 9px; } /* Base position/visibility for the dropdown panel - normally provided by the theme's own chosen.min.css (enqueued alongside this file, see includes/frontend.php); declared here too as a safety net so the panel never renders permanently expanded if that file is ever missing for any reason. */ #codplugin_woo_single_form .chosen-container .chosen-drop { position: absolute; display: none; inset-inline-start: 0; top: 100%; box-sizing: border-box; width: 100%; margin-top: 4px; border: 2px solid #bce0f7; border-radius: 3px; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); overflow: hidden; z-index: 20; } #codplugin_woo_single_form .chosen-container-active .chosen-drop, #codplugin_woo_single_form .chosen-container.chosen-with-drop .chosen-drop { display: block; } #codplugin_woo_single_form .chosen-container .chosen-search { padding: 8px; background: #fff; } #codplugin_woo_single_form .chosen-container .chosen-search input { box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 2px solid #bce0f7; border-radius: 3px; background: #fff; color: #333; font-size: 13px; outline: none; } #codplugin_woo_single_form .chosen-container .chosen-search input:focus { border-color: #259bea; } #codplugin_woo_single_form .chosen-container .chosen-results { box-sizing: border-box; max-height: 240px; margin: 0; padding: 4px; overflow-y: auto; } #codplugin_woo_single_form .chosen-container .chosen-results li { box-sizing: border-box; padding: 8px 10px; border-radius: 3px; font-size: 13px; color: #333; cursor: pointer; } #codplugin_woo_single_form .chosen-container .chosen-results li.highlighted { background: #eaf4fd; color: #185fa5; } #codplugin_woo_single_form .chosen-container .chosen-results li.no-results, #codplugin_woo_single_form .chosen-container .chosen-results li.disabled-result { color: #999; cursor: default; } /* Baladiya locked (empty/disabled) until a Wilaya is chosen - toggled by assets/js/searchable-dropdowns.js directly on the rule below covers that case on its own). */ #codplugin_woo_single_form select.hfe-locked, #codplugin_woo_single_form select.hfe-locked ~ .chosen-container .chosen-single { cursor: not-allowed; opacity: .55; background: #f5f5f5 !important; } @media (prefers-reduced-motion: reduce) { #codplugin_woo_single_form .chosen-container .chosen-single { transition: none; } }