/* WebToSpec Econt – Checkout styles (minimal, theme-friendly). Everything is scoped under #wte-econt-fields so it never leaks into the theme. */ #wte-econt-fields { box-sizing: border-box; width: 100%; margin: 12px 0; } #wte-econt-fields h4 { margin: 0 0 10px; font-weight: 600; } #wte-econt-fields .wte-row { margin-bottom: 10px; } #wte-econt-fields .wte-label { display: block; margin-bottom: 4px; font-weight: 500; } #wte-econt-fields .wte-label .required { color: #c8102e; text-decoration: none; } /* Let the theme style the inputs; we only enforce full width. */ #wte-econt-fields .wte-input { box-sizing: border-box; width: 100%; } /* Delivery-type radios on one wrapping row. */ #wte-econt-fields .wte-delivery-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0; } #wte-econt-fields .wte-delivery-tabs label { display: inline-flex; align-items: center; gap: 5px; margin: 0; cursor: pointer; } /* Number-field grids. */ #wte-econt-fields .wte-row-half, #wte-econt-fields .wte-row-quad { display: grid; gap: 10px; margin-bottom: 10px; } #wte-econt-fields .wte-row-half { grid-template-columns: 1fr 1fr; } #wte-econt-fields .wte-row-quad { grid-template-columns: repeat(4, 1fr); } /* Some themes force `select { width/height/appearance ... !important }` on every native select inside the checkout, which un-hides the original select that select2 replaces (so it shows as a duplicate next to the widget). Re-assert select2's visually-hidden pattern. Two IDs (#wte-econt-fields + the select's own id) outrank the theme's single-ID rule even with !important. */ #wte-econt-fields select#wte_city_id.select2-hidden-accessible, #wte-econt-fields select#wte_office_code.select2-hidden-accessible, #wte-econt-fields select#wte_aps_code.select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; -webkit-appearance: none !important; appearance: none !important; } /* Select2 width. The dropdown is appended to (select2 default) so it positions correctly under the field and can't affect the form's layout. */ #wte-econt-fields .select2-container { box-sizing: border-box; } /* Safety cap so the body-appended dropdown never overflows small viewports. */ .select2-container--open .select2-dropdown { max-width: calc(100vw - 24px); } /* Align the select2 box with the theme's text inputs (height/centering only — colours, radius and borders are left for the theme / custom SCSS). */ #wte-econt-fields .select2-container--default .select2-selection--single { height: auto; min-height: 40px; display: flex; align-items: center; } #wte-econt-fields .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; padding-left: 4px; } #wte-econt-fields .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } @media (max-width: 600px) { #wte-econt-fields .wte-row-half { grid-template-columns: 1fr; } #wte-econt-fields .wte-row-quad { grid-template-columns: 1fr 1fr; } } /* Checkout Tooltips — pure CSS, no JS. A small "?" badge that reveals a text bubble on hover/focus (focus so it's reachable by keyboard). */ #wte-econt-fields .wte-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #787c82; color: #fff; font-size: 11px; line-height: 1; cursor: help; position: relative; vertical-align: middle; } #wte-econt-fields .wte-tip::after { content: attr(data-tip); position: absolute; bottom: 130%; left: 0; width: max-content; max-width: 220px; padding: 6px 9px; border-radius: 4px; background: #23282d; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 20; } #wte-econt-fields .wte-tip:hover::after, #wte-econt-fields .wte-tip:focus::after { opacity: 1; visibility: visible; } /* * Hiding that survives a theme. * * jQuery's .hide() writes an inline `display:none`, which any theme rule * carrying !important outranks — PetVitaminStore ships * `.woocommerce-checkout label { display: block !important }`, which silently * un-hides every delivery-type choice we mean to withhold. A class of our own * with the same weight is the only hiding that holds, and it also wins against * a sibling plugin's .show() on the WooCommerce address fields we borrow. */ .wte-hidden, #wte-econt-fields .wte-hidden { display: none !important; } /* * Blocks checkout: WooCommerce's own address fields. * * The classic checkout hides these from JavaScript, field by field. The Blocks * one renders them from React, so reaching into them is not ours to do — the * picker toggles a class on instead and the hiding happens here. * * Deliberately NOT scoped to the shipping-address block. Which form stands in * for the destination depends on the shop: with "force shipping to the * customer's billing address" there is no shipping form at all and the billing * one is the address the parcel goes to. Matching on the address form itself * covers both, and it is the same set of fields the classic checkout hides. * * Only the destination half goes: name, phone and e-mail stay. The fields are * hidden rather than removed because they are still submitted — ExtendStore * fills them from the chosen destination, so whatever WooCommerce requires of * them is already satisfied. */ body.wte-econt-hide-wc-address .wc-block-components-address-form__address_1, body.wte-econt-hide-wc-address .wc-block-components-address-form__address_2, body.wte-econt-hide-wc-address .wc-block-components-address-form__city, body.wte-econt-hide-wc-address .wc-block-components-address-form__state, body.wte-econt-hide-wc-address .wc-block-components-address-form__postcode { display: none !important; } /* "Show Country Field in Checkout" — only when the merchant turned it off. */ body.wte-econt-hide-wc-country .wc-block-components-address-form__country { display: none !important; } /* * The whole billing-address step. * * The picker is the destination and ExtendStore writes it into WooCommerce's * address, so a second address form asking the same questions is only a way for * the customer to contradict themselves. WooCommerce already hides this step * while "use the same address for billing" is ticked; this takes it off the * screen when they untick it too. * * The name and phone inside it are mirrored from the shipping step, so nothing * required is left unanswered — but note this is the one place a customer could * have given a *different* invoicing address, and they no longer can. * * Its own class, set only when a separate shipping form exists. Under "force * shipping to the customer billing address" there is no shipping step and this * block IS the address form — hiding it there would take the customer's name, * phone and the whole destination off the screen with it. */ body.wte-econt-hide-wc-billing .wp-block-woocommerce-checkout-billing-address-block { display: none !important; }