/** * evov-sub — Native is visually hidden by WC/WM. * • body.wp-admin — WordPress admin has its own form styles. */ /* ── Reset + base ─────────────────────────────────────────────────────── */ body:not(.wp-admin) select:not(.select2-hidden-accessible) { /* Remove the OS-native dropdown arrow so our custom one takes over */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Dimensions — mirrors .select2-selection--single */ height: var(--wd-form-height, 42px); min-height: var(--wd-form-height, 42px); padding: 0 42px 0 15px; /* right padding = arrow zone (same as Select2) */ box-sizing: border-box; /* Border — mirrors .select2-selection */ border: var(--wd-form-brd-width, 1px) solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.1)); border-radius: var(--wd-form-brd-radius, 4px); /* Background + custom chevron arrow — same values as .select2-selection__arrow */ background-color: var(--wd-form-bg, transparent); background-image: var(--wd-form-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: auto 18px; /* Typography — mirrors .select2-selection--single .select2-selection__rendered */ color: var(--wd-form-color, inherit); font-size: 14px; line-height: 1; font-family: inherit; /* Behaviour */ cursor: pointer; outline: none; transition: border-color 0.4s ease; vertical-align: middle; } /* ── Focus state ──────────────────────────────────────────────────────── */ body:not(.wp-admin) select:not(.select2-hidden-accessible):focus { border-color: var(--wd-form-brd-color-focus, rgba(0, 0, 0, 0.15)); outline: none; } /* ── Dropdown list item padding ──────────────────────────────────────── */ /* * Mirrors WoodMart's own selector chain exactly so this rule wins via * cascade order (our stylesheet loads after WoodMart's) without needing * higher specificity. Applies to ALL Select2 dropdowns on the frontend: * our enhanced native selects, WooCommerce checkout/cart fields, etc. * WoodMart default: padding 10px 18px — reduced vertical by 5px each side. */ body .select2-container--default .select2-results__option { padding-top: 5px; padding-bottom: 5px; } /* ── Underline form-style variant ─────────────────────────────────────── */ /* * WoodMart theme option "Form style: Underlined" adds .form-style-underlined * to . WoodMart's own Select2 override removes the side/top borders and * tightens padding; we mirror exactly the same rules for native selects. */ .form-style-underlined body:not(.wp-admin) select:not(.select2-hidden-accessible), body:not(.wp-admin) .form-style-underlined select:not(.select2-hidden-accessible) { padding-inline-start: 2px; padding-inline-end: 15px; border-top-style: none; border-right-style: none; border-left-style: none; border-radius: 0; }