/* * Saudi Short Address — conditional visibility. * * Strategy: * - Hide the field wrapper by default on both Block and Classic checkout. * - When has the .saudi-sa-active class (added by checkout.js only * when billing/shipping country == SA), reveal the wrapper. * - Helper text is injected via a ::after pseudo-element so we don't have * to mutate React's DOM. The text comes from a CSS custom property * (--ssa-help-text) set from PHP so it stays translatable. * * Browser baseline: uses :has(). Supported in Chrome 105+, Safari 15.4+, * Firefox 121+ — all browsers used to place WooCommerce orders today. */ /* ==== Hide by default ==== */ /* Block Checkout: wrapper containing our input */ .wc-block-components-text-input:has( > input[id$="saudi-sa-short-address"] ), .wc-block-components-text-input:has( input[id$="saudi-sa-short-address"] ) { display: none !important; } /* Classic Checkout: WC renders a

*/ #saudi-sa-short-address_field, p.form-row[id*="saudi-sa-short-address"], .form-row[id*="saudi-sa-short-address"] { display: none !important; } /* ==== Reveal when Saudi Arabia is the selected country ==== */ html.saudi-sa-active .wc-block-components-text-input:has( > input[id$="saudi-sa-short-address"] ), html.saudi-sa-active .wc-block-components-text-input:has( input[id$="saudi-sa-short-address"] ), html.saudi-sa-active #saudi-sa-short-address_field, html.saudi-sa-active p.form-row[id*="saudi-sa-short-address"], html.saudi-sa-active .form-row[id*="saudi-sa-short-address"] { display: block !important; } /* ==== Polish ==== */ input[id$="saudi-sa-short-address"] { text-transform: uppercase; letter-spacing: 0.05em; } /* Helper text below the field — content comes from --ssa-help-text set in PHP. */ html.saudi-sa-active .wc-block-components-text-input:has( input[id$="saudi-sa-short-address"] )::after, html.saudi-sa-active #saudi-sa-short-address_field::after { content: var( --ssa-help-text, "" ); display: block; margin-top: 4px; font-size: 0.85em; line-height: 1.4; color: #6b7280; opacity: 0.9; }