/* * Altaris Multi-Step Checkout — checkout.css * Brand: teal #0B1F3A, navy #0B1F3A * * Approach: CSS classes on control which sections are * visible. No WooCommerce DOM elements are removed. * altaris-step-1 → billing (.col-1) * altaris-step-2 → shipping (.col-2) * altaris-step-3 → order review + payment (#order_review) */ /* ─── Custom Properties ──────────────────────────────────────── */ :root { --altaris-primary: #0B1F3A; --altaris-primary-dark: #0B1F3A; --altaris-primary-light: #F2F4F7; --altaris-navy: #0B1F3A; --altaris-grey: #6b7280; --altaris-border: #F2F4F7; --altaris-error: #dc2626; --altaris-success: #8CC63F; --altaris-bg: #F2F4F7; --altaris-white: #ffffff; --altaris-radius: 8px; --altaris-transition: 0.25s ease; } /* Hide pre-rendered WooCommerce success / info notices on checkout before JS runs, so load-time shipping-zone messages do not flash on screen. The plugin's `.altaris-msc-notice` block is the only banner that should appear at the top of the form. */ body.woocommerce-checkout .woocommerce-notices-wrapper>.woocommerce-message, body.woocommerce-checkout .woocommerce-notices-wrapper>.woocommerce-info { display: none !important; } /* Raw WooCommerce error blocks duplicate our custom notice; hide them. The plugin harvests their text on checkout_error and re-renders inside .altaris-msc-notice with field-targeted messaging. */ body.woocommerce-checkout .woocommerce-notices-wrapper>.woocommerce-error:not(.altaris-msc-notice), body.woocommerce-checkout .woocommerce-notices-wrapper>.woocommerce-NoticeGroup-checkout:not(.altaris-msc-notice) { display: none !important; } /* Inline per-field error message, rendered under invalid inputs. */ .altaris-field-error-msg { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: #b81c23; font-weight: 600; } .form-row.woocommerce-invalid .altaris-field-error-msg { color: #b81c23; } .woocommerce-error { background-color: rgb(184 28 35 / 5%); } /* ═══════════════════════════════════════════════════════════════ STEP INDICATOR ═══════════════════════════════════════════════════════════════ */ #altaris-step-indicator { max-width: 680px; margin: 0 auto 36px; padding: 0 16px; } .altaris-indicator__list { display: flex; align-items: flex-start; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 0; } .altaris-indicator__item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; cursor: default; transition: opacity var(--altaris-transition); } /* Connector line */ .altaris-indicator__item:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--altaris-border); transition: background var(--altaris-transition); z-index: 0; } .altaris-indicator__item.is-completed:not(:last-child)::after { background: var(--altaris-primary); } /* Bubble */ .altaris-indicator__bubble { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--altaris-border); background: var(--altaris-white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--altaris-grey); position: relative; z-index: 1; transition: background var(--altaris-transition), border-color var(--altaris-transition), color var(--altaris-transition); } .altaris-indicator__check { display: none; width: 18px; height: 18px; } /* Active */ .altaris-indicator__item.is-active .altaris-indicator__bubble { background: var(--altaris-primary); border-color: var(--altaris-primary); color: var(--altaris-white); box-shadow: 0 0 0 4px var(--altaris-primary-light); } /* Completed */ .altaris-indicator__item.is-completed .altaris-indicator__bubble { background: var(--altaris-primary); border-color: var(--altaris-primary); color: var(--altaris-white); cursor: pointer; } .altaris-indicator__item.is-completed .altaris-indicator__number { display: none; } .altaris-indicator__item.is-completed .altaris-indicator__check { display: block; } .altaris-indicator__item.is-completed:hover .altaris-indicator__bubble { background: var(--altaris-primary-dark); border-color: var(--altaris-primary-dark); } /* Label */ .altaris-indicator__label { margin-top: 8px; color: var(--altaris-grey); text-align: center; letter-spacing: 0.04em; transition: color var(--altaris-transition); font-family: "Source Sans Pro", Sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; line-height: 33px; } .altaris-indicator__item.is-active .altaris-indicator__label { color: var(--altaris-primary); } .altaris-indicator__item.is-completed .altaris-indicator__label { color: var(--altaris-primary); } /* ═══════════════════════════════════════════════════════════════ LAYOUT OVERRIDES — Make each section full-width ═══════════════════════════════════════════════════════════════ */ form.checkout.altaris-multistep-active .col2-set#customer_details { display: block !important; width: 100% !important; max-width: 100% !important; } form.checkout.altaris-multistep-active .col2-set>.col-1, form.checkout.altaris-multistep-active .col2-set>.col-2 { width: 100% !important; max-width: 100% !important; float: none !important; flex: none !important; padding: 0; } form.checkout.altaris-multistep-active #order_review_heading, form.checkout.altaris-multistep-active #order_review { width: 100% !important; max-width: 100% !important; float: none !important; flex: none !important; } /* Force Elementor checkout columns to display correctly */ form.checkout.altaris-multistep-active .e-checkout__container { display: block !important; } form.checkout.altaris-multistep-active .e-checkout__column { width: 100% !important; max-width: 100% !important; } form.checkout.altaris-multistep-active .e-checkout__column-end { width: 100% !important; max-width: 100% !important; } #altaris-account-step { background: var(--altaris-white); border-radius: 12px; padding: 24px; margin: 0 auto 20px; width: 100%; } #altaris-account-step .altaris-account-grid>.form-row { width: 100% !important; } .altaris-account-tabs { margin-top: 15px; } button.altaris-account-tab { padding: 10px 30px !important; border: 0 solid #0B1F3A !important; border-left-width: 1px !important; border-top-width: 1px !important; border-right-width: 1px !important; border-radius: 10px 10px 0px 0px !important; background-color: #fff !important; color: #0B1F3A !important; } .altaris-account-title { margin: 0 0 10px 0 !important; color: var(--altaris-navy) !important; } .altaris-account-tabs>button:first-child { /* border-right-width: 0px !important; */ } .altaris-account-tabs { display: flex; gap: 10px; margin-bottom: 14px; border-bottom: 1px solid rgb(0 0 0 / 10%); } .altaris-account-tab { border: 1px solid var(--altaris-border); background: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; } .altaris-account-tab.is-active { background: var(--altaris-primary) !important; color: #fff !important; border-color: var(--altaris-primary) !important; } .altaris-account-panel { display: none; } .altaris-account-panel.is-active { display: block; } .altaris-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .altaris-account-grid>.form-row, .altaris-account-grid>p.form-row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; flex: none !important; grid-column: auto; } .altaris-account-grid>.form-row-first, .altaris-account-grid>.form-row-last { grid-column: span 1 !important; } .altaris-account-grid>.form-row-wide { grid-column: 1 / -1 !important; } .altaris-account-grid>.form-row>input, .altaris-account-grid>.form-row>.woocommerce-input-wrapper, .altaris-account-grid>.form-row>.woocommerce-input-wrapper>input, .altaris-account-grid>.form-row>.altaris-password-wrap, .altaris-account-grid>.form-row>.altaris-password-wrap>input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Email & Password side-by-side (each takes one column) */ .altaris-account-grid>.form-row-wide:has(#altaris_signup_email), .altaris-account-grid>.form-row-wide:has(#altaris_signup_password) { grid-column: auto; } .altaris-account-grid input { width: 100% !important; border-radius: 10px !important; padding: 10px !important; } /* Use high-specificity selector so WC's .woocommerce form .password-input rule (which JS adds to our wrapper) cannot override display or overflow. */ #altaris-account-step .altaris-password-wrap { position: relative !important; display: block !important; overflow: visible !important; } .altaris-password-wrap input { padding-right: 44px !important; -webkit-text-security: disc; } #altaris-account-step .altaris-password-wrap.is-visible input { -webkit-text-security: none; } /* Suppress browser-injected icons inside the password input that overlay our custom .altaris-password-toggle and can intercept the user's clicks. Each browser uses a different pseudo-element; rules are kept separate because mixing vendor-specific selectors in one rule causes the entire rule to be discarded in any browser that doesn't recognise even one of the selectors. */ /* Safari / Chrome / Edge (WebKit/Blink): autofill credential key + strong-password shield */ #altaris-account-step .altaris-password-wrap input::-webkit-credentials-auto-fill-button, #altaris-account-step .altaris-password-wrap input::-webkit-strong-password-auto-fill-button { visibility: hidden !important; pointer-events: none !important; width: 0 !important; margin: 0 !important; } /* Edge / Internet Explorer: native password reveal-eye button */ #altaris-account-step .altaris-password-wrap input::-ms-reveal, #altaris-account-step .altaris-password-wrap input::-ms-clear { display: none !important; } /* Firefox 118+: native password reveal button */ #altaris-account-step .altaris-password-wrap input::-moz-reveal { display: none !important; } /* Cross-browser autofill detection via the CSS-animation trick. When the browser fills a password field it applies :-webkit-autofill, which starts this named animation. JS listens for animationstart with this name and uses it to restore the field to type="password" if the browser rendered the autofilled value as visible text. */ @keyframes altarisPasswordAutofill { from { /* intentionally empty */ } } #altaris-account-step .altaris-password-wrap input:-webkit-autofill { animation-name: altarisPasswordAutofill; animation-duration: 0.01s; animation-fill-mode: both; } /* Belt-and-suspenders: WooCommerce's woocommerce.js auto-injects a .show-password-input after every password input. Our fields already have a .altaris-password-toggle, so the WC button must not be visible or interactive. */ #altaris-account-step .altaris-password-wrap .show-hide-password, #altaris-account-step .altaris-password-wrap .show-password-input { display: none !important; } .altaris-password-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 24px; height: 24px; padding: 0 !important; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--altaris-grey); display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; line-height: 1; appearance: none; -webkit-appearance: none; z-index: 2; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } .altaris-password-toggle:hover, .altaris-password-toggle:focus { color: var(--altaris-primary); outline: none; } /* Inline SVG markup is replaced by the ::before mask icons below. */ .altaris-password-toggle__icon { display: none !important; } /* Icons swapped: hidden password (default) → eye-off; visible password (.is-visible) → open eye. */ .altaris-password-toggle::before { content: ''; display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; pointer-events: none; } .altaris-password-toggle.is-visible::before { -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .altaris-account-actions { margin-top: 14px; display: flex; justify-content: flex-end; } .altaris-account-actions .altaris-account-submit { min-width: auto; } /* ═══════════════════════════════════════════════════════════════ DEFAULT INITIAL STATE — Account step first ═══════════════════════════════════════════════════════════════ */ form.checkout #customer_details, form.checkout .e-checkout__column-start, form.checkout #order_review_heading, form.checkout #order_review, form.checkout #payment, form.checkout .woocommerce-checkout-review-order, form.checkout .woocommerce-checkout-payment, form.checkout .e-checkout__column-end { display: none !important; } form.checkout #altaris-account-step { display: block !important; } /* ═══════════════════════════════════════════════════════════════ STEP VISIBILITY ═══════════════════════════════════════════════════════════════ */ /* ── Step 1 : Account ─────────────────────────────────────────── */ form.checkout.altaris-step-1 #altaris-account-step { display: block !important; } form.checkout.altaris-step-1 #customer_details, form.checkout.altaris-step-1 .e-checkout__column-start, form.checkout.altaris-step-1 #order_review_heading, form.checkout.altaris-step-1 #order_review, form.checkout.altaris-step-1 .woocommerce-checkout-review-order, form.checkout.altaris-step-1 #payment, form.checkout.altaris-step-1 .woocommerce-checkout-payment, form.checkout.altaris-step-1 .e-checkout__column-end, form.checkout.altaris-step-1 .altaris-nav-step-2, form.checkout.altaris-step-1 .altaris-nav-step-3 { display: none !important; } /* ── Step 2 : Shipping + Billing ─────────────────────────────── */ form.checkout.altaris-step-2 .e-checkout__column-start, form.checkout.altaris-step-2 #customer_details, form.checkout.altaris-step-2 #customer_details .col-1, form.checkout.altaris-step-2 #customer_details .col-2, form.checkout.altaris-step-2 .shipping_address, form.checkout.altaris-step-2 .woocommerce-additional-fields { display: block !important; } #customer_details>.col-1 { box-shadow: unset; } /* Add visible gap between the Shipping block (col-2) and Billing block (col-1). */ form.checkout.altaris-step-2 #customer_details .col-2 { margin-bottom: 28px; } /* Order Notes field — flush spacing so it sits naturally at the end of Billing. */ form.checkout.altaris-step-2 .woocommerce-additional-fields { margin-top: 0 !important; padding-top: 0 !important; } /* "Use the same details" checkbox row — extra breathing room. */ #billing_same_as_shipping_field { margin-bottom: 10px !important; } #billing_same_as_shipping_field label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; color: var(--altaris-navy); } #billing_same_as_shipping_field input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--altaris-primary); } form.checkout.altaris-step-2 #altaris-account-step { display: none !important; } form.checkout.altaris-step-2 #order_review_heading, form.checkout.altaris-step-2 #order_review, form.checkout.altaris-step-2 .woocommerce-checkout-review-order, form.checkout.altaris-step-2 #payment, form.checkout.altaris-step-2 .woocommerce-checkout-payment, form.checkout.altaris-step-2 .e-checkout__column-end, form.checkout.altaris-step-2 .altaris-nav-step-1, form.checkout.altaris-step-2 .altaris-nav-step-3 { display: none !important; } /* ── Step 3 : Payment & Order ─────────────────────────────────── */ form.checkout.altaris-step-3 #order_review_heading, form.checkout.altaris-step-3 #order_review, form.checkout.altaris-step-3 #payment, form.checkout.altaris-step-3 .woocommerce-checkout-review-order, form.checkout.altaris-step-3 .woocommerce-checkout-payment, form.checkout.altaris-step-3 .e-checkout__column-end { display: block !important; } form.checkout.altaris-step-3 #altaris-account-step, form.checkout.altaris-step-3 #customer_details, form.checkout.altaris-step-3 .col2-set, form.checkout.altaris-step-3 .e-checkout__column-start, form.checkout.altaris-step-3 .altaris-nav-step-1, form.checkout.altaris-step-3 .altaris-nav-step-2 { display: none !important; } form.checkout.altaris-step-3 .e-checkout__column-end { display: block !important; } /* Hide the "Ship to different address?" checkbox — shipping is its own step */ form.checkout.altaris-multistep-active #ship-to-different-address { display: none !important; } /* Always keep shipping address fields visible once multistep is active */ form.checkout.altaris-multistep-active .shipping_address { display: block !important; } /* Ensure payment section is visible on step 3 */ form.checkout.altaris-step-3 #payment, form.checkout.altaris-step-3 .woocommerce-checkout-payment { display: block !important; } /* ═══════════════════════════════════════════════════════════════ NAVIGATION BUTTONS ═══════════════════════════════════════════════════════════════ */ .altaris-step__nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 32px; gap: 12px; } /* Step 3 nav positioned outside the container */ .altaris-nav-step-3 { margin-top: 20px; padding-top: 20px; padding-bottom: 20px; } .altaris-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px !important; font-size: 15px; font-weight: 600; cursor: pointer; line-height: 1; padding: 10px 30px !important; border: 1px solid #0B1F3A !important; transition: background var(--altaris-transition), color var(--altaris-transition), border-color var(--altaris-transition), box-shadow var(--altaris-transition); } .altaris-btn--next { background: var(--altaris-primary); color: var(--altaris-white); border-color: var(--altaris-primary); margin-left: auto; } .altaris-btn--next:hover:not(:disabled), button.form_option_billing:hover, button.form_option_shipping:hover, form.checkout.altaris-step-3 #payment .form-row.place-order #place_order:hover { background: var(--altaris-primary-dark) !important; border-color: var(--altaris-primary-dark); box-shadow: 0 4px 12px rgba(42, 127, 143, 0.35); } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order:hover { color: #fff !important; } .altaris-btn--next:disabled { opacity: 0.65; cursor: not-allowed; } .altaris-btn--back { background: var(--altaris-primary); color: var(--altaris-white); border-color: var(--altaris-primary); } .altaris-btn--back:hover:not(:disabled), .altaris-btn--back:focus:not(:disabled) { background: var(--altaris-primary-dark) !important; border-color: var(--altaris-primary-dark); color: var(--altaris-white); box-shadow: 0 4px 12px rgba(42, 127, 143, 0.35); outline: none; } .altaris-btn--back:active { background: var(--altaris-primary-dark) !important; border-color: var(--altaris-primary-dark); color: var(--altaris-white); } .altaris-btn--back:disabled { opacity: 0.65; cursor: not-allowed; } .altaris-nav-step-3 .altaris-btn--back { margin-left: 20px !important; } /* ═══════════════════════════════════════════════════════════════ SAVING SPINNER ═══════════════════════════════════════════════════════════════ */ @keyframes altaris-spin { to { transform: rotate(360deg); } } .altaris-btn--saving::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: altaris-spin 0.7s linear infinite; margin-right: 6px; } /* ═══════════════════════════════════════════════════════════════ ERROR STATES ═══════════════════════════════════════════════════════════════ */ .altaris-field--error, input.altaris-field--error, select.altaris-field--error, textarea.altaris-field--error { border-color: var(--altaris-error) !important; background-color: #fef2f2 !important; } .altaris-field-error-msg { display: block; color: var(--altaris-error); font-size: 12px; font-weight: 500; margin-top: 4px; } .altaris-global-error { margin-bottom: 16px; border-left: 4px solid var(--altaris-error); border-radius: var(--altaris-radius); } /* ═══════════════════════════════════════════════════════════════ STEP 3 — PAYMENT AREA OVERRIDES ═══════════════════════════════════════════════════════════════ */ form.checkout.altaris-step-3 #payment { background: transparent; border-radius: 0; } form.checkout.altaris-step-3 #place_order { width: 100%; font-size: 16px; padding: 16px; border-radius: var(--altaris-radius); } /* Keep legal copy below the CTA in step 3. */ form.checkout.altaris-step-3 #payment .form-row.place-order { display: flex; flex-direction: column; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order { order: 1; margin-top: 10px; } form.checkout.altaris-step-3 #payment .form-row.privacy.woocommerce-privacy-policy-text { order: 2; margin-top: 10px; } .form-row { margin-left: 0 !important; margin-right: 0 !important; } form.checkout .form-row.form-row-first, form.checkout .form-row.form-row-last, .altaris-account-grid .form-row.form-row-first, .altaris-account-grid .form-row.form-row-last { width: 50% !important; } .woocommerce-billing-fields__field-wrapper>div#custom-city-state-wrapper { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; gap: 3px !important; } .woocommerce-billing-fields__field-wrapper>div#custom-city-state-wrapper>p { width: 50% !important; } /* ═══════════════════════════════════════════════════════════════ STEP 2 — 3-COLUMN FORM GRID ═══════════════════════════════════════════════════════════════ */ form.checkout.altaris-step-2 .woocommerce-billing-fields__field-wrapper, form.checkout.altaris-step-2 .woocommerce-shipping-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; column-gap: 16px; align-items: start; } /* Reset width / float on every field row so it fills its grid cell */ form.checkout.altaris-step-2 .woocommerce-billing-fields__field-wrapper>p, form.checkout.altaris-step-2 .woocommerce-shipping-fields__field-wrapper>p { width: 100% !important; max-width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* "Same as shipping" checkbox row → full width */ form.checkout.altaris-step-2 #billing_same_as_shipping_field { grid-column: 1 / -1 !important; } /* Disable billing address controls when "same as shipping" is active */ .dsabafw_selectt.altaris-billing-controls-disabled { opacity: 0.5 !important; pointer-events: none !important; } /* Street address lines → full width */ form.checkout.altaris-step-2 #billing_address_1_field, form.checkout.altaris-step-2 #billing_address_2_field, form.checkout.altaris-step-2 #shipping_address_1_field, form.checkout.altaris-step-2 #shipping_address_2_field { grid-column: 1 / -1 !important; } /* Order notes / comments → full width */ form.checkout.altaris-step-2 #billing_order_notes_field, form.checkout.altaris-step-2 #shipping_order_comments_field { grid-column: 1 / -1 !important; } /* Email → 2 cols so Phone + Email sit in a balanced pair */ form.checkout.altaris-step-2 #billing_email_field, form.checkout.altaris-step-2 #shipping_email_field { grid-column: span 2 !important; } /* WC-injected city/state wrapper (City + State): span 2 cols so ZIP sits in col 3 */ form.checkout.altaris-step-2 #custom-city-state-wrapper { grid-column: span 2 !important; display: flex !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } form.checkout.altaris-step-2 #custom-city-state-wrapper>p { flex: 1 !important; width: auto !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════ ADDRESS SELECTOR ROW — dropdown + "Add New" button on one line ═══════════════════════════════════════════════════════════════ */ .dsabafw_selectt, .dsabafw_select_shippingg { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; margin-bottom: 14px !important; } /* Select takes all available space (wider) */ .dsabafw_selectt select.dsabafw_select, .dsabafw_select_shippingg select.dsabafw_select_shipping { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 44px !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 8px !important; border: 1px solid var(--altaris-border) !important; cursor: pointer !important; } /* If Select2 enhances these dropdowns, force the generated container to follow the same responsive flex sizing as the native select. */ .dsabafw_selectt .select2-container, .dsabafw_select_shippingg .select2-container { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; } .dsabafw_selectt .select2-container .select2-selection--single, .dsabafw_select_shippingg .select2-container .select2-selection--single { height: 44px !important; border-radius: 8px !important; } /* Button stays compact and never wraps. Overrides child-theme rule that sets width:100% on .form_option_billing */ button.form_option_billing, button.form_option_shipping { width: auto !important; flex-shrink: 0 !important; white-space: nowrap !important; } /* ═══════════════════════════════════════════════════════════════ DSABAFW POPUP — fixed overlay, only the form content scrolls ═══════════════════════════════════════════════════════════════ */ /* Fixed full-screen overlay */ .dsabafw_billing_popup_class, .dsabafw_shipping_popup_class { position: fixed !important; z-index: 99999 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain; padding: 40px 20px !important; box-sizing: border-box !important; background-color: rgba(0, 0, 0, 0.6) !important; } /* The form card itself may scroll if content is tall */ .dsabafw_modal-content { border-radius: 12px !important; position: relative !important; margin: 0 auto !important; max-height: none !important; overflow-y: visible !important; } /* Body scroll lock — class toggled by JS when a popup is open. On iOS Safari, overflow:hidden alone does not prevent elastic/rubber-band scrolling of the background; position:fixed with a scroll-offset is the only reliable fix. The --altaris-scroll-y variable is set from JS. */ body.altaris-popup-lock { overflow: hidden !important; position: fixed !important; top: var(--altaris-scroll-y, 0px); width: 100% !important; } /* iOS: momentum scroll for the dsabafw address-selection choice popups */ .address_selection_popup_main, .shipping_address_selection_popup_main { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .dsabafw_woocommerce-address-fields #shipping_country_field .woocommerce-input-wrapper, .dsabafw_woocommerce-address-fields #billing_country_field .woocommerce-input-wrapper { padding: 0 !important; border: 0 !important; } .dsabafw_woocommerce-address-fields .form-row.form-row-first, .dsabafw_woocommerce-address-fields .form-row.form-row-last { width: 100% !important; margin-top: 12px; } .e-checkout__order_review, .e-checkout__order_review-2 { box-shadow: unset !important; } .woocommerce-checkout .blockUI.blockOverlay { background: transparent !important; } .woocommerce-order .woocommerce-customer-details .woocommerce-column__title { padding-bottom: 0; padding-top: 20px; } .woocommerce-order .woocommerce-customer-details address { border: 0 !important; } .woocommerce-table__line-item td.woocommerce-table__product-name.product-name { padding: 10px 0 !important; } .woocommerce-order .woocommerce-table--order-details tfoot>tr>th { padding: 10px 0 !important; } .elementor-widget-woocommerce-checkout-page .woocommerce h3.custom-shipping-heading, .woocommerce-checkout .col2-set .col-1 .woocommerce-billing-fields>h3 { padding-left: 10px !important; } button.form_option_billing, button.form_option_shipping { margin: 0 !important; } .woocommerce-order th.product-total, .woocommerce-order td.product-total, .woocommerce-order tfoot td { text-align: right; } .woocommerce-order ul+p { background: #0B1F3A; text-align: center; font-size: 20px !important; color: #fff !important; padding: 10px; border-radius: 6px; } /* table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details { border: 2px solid #0B1F3A; } */ /* .woocommerce-order .woocommerce-customer-details .woocommerce-column { box-shadow: 0px 14px 74px rgba(0, 0, 0, 0.1) !important; border-radius: 20px; border: 2px solid #0B1F3A; overflow:hidden; } */ .woocommerce-order .woocommerce-customer-details .woocommerce-column { border: none !important; } .altaris-account-title, h2.woocommerce-order-details__title, h2.woocommerce-column__title, div#customer_details h3, h3#order_review_heading { /* font-family: "Impact", Sans-serif !important; */ font-size: 30px !important; line-height: 40px !important; letter-spacing: 1px !important; text-transform: capitalize; font-weight: 500 !important; } /* Two-column inline phone/email — only on the order-received (thankyou) page. View-order under My Account uses the same DOM but needs a normal stacked layout, so the rule must be scoped. */ body.woocommerce-order-received section.woocommerce-customer-details address { display: flex; position: relative; height: auto !important; } body.woocommerce-order-received section.woocommerce-customer-details address p { padding: 0 !important; width: 50%; margin-left: auto; } body.woocommerce-order-received section.woocommerce-customer-details address p.woocommerce-customer-details--email { position: absolute; right: 15px; top: 50px; } h3#order_review_heading { text-align: center !important; } div#order_review tr, section.woocommerce-order-details tr { all: unset; border-bottom: 1px solid var(--altaris-border) !important; display: flex; width: 100%; justify-content: space-between; align-items: center; } .woocommerce-order section.woocommerce-order-details tbody td strong { font-weight: 400 !important; } div#order_review thead th, section.woocommerce-order-details thead th { font-size: 18px; font-weight: bold !important; font-family: "Source Sans Pro", Sans-serif; } div#order_review tbody td, section.woocommerce-order-details tbody td, section.woocommerce-order-details tbody td span.woocommerce-Price-amount.amount { font-size: 16px !important; font-weight: bold !important; font-family: "Source Sans Pro", Sans-serif; max-width: 100%; color: #0B1F3A !important; } section.woocommerce-order-details tbody td a, section.woocommerce-order-details tbody td strong { color: #0B1F3A !important; } div#order_review tfoot tr td, section.woocommerce-order-details tfoot tr td { max-width: 100% !important; } div#order_review tbody td.product-name, section.woocommerce-order-details tbody td { display: grid; gap: 5px; } section.woocommerce-order-details th, section.woocommerce-order-details td { border: none !important; } div#order_review tfoot th, div#order_review tfoot td, div#order_review tfoot ul li label, section.woocommerce-order-details tfoot th, section.woocommerce-order-details tfoot td, section.woocommerce-order-details tfoot td span, section.woocommerce-order-details tfoot ul li label { color: #333333 !important; font-size: 17px !important; font-weight: 500 !important; } div#order_review tfoot ul li { margin: 0 !important; } div#order_review tfoot tr:last-child, section.woocommerce-order-details tfoot tr:last-child { border-bottom: none !important; } ul.wc_payment_methods.payment_methods.methods label { color: #0B1F3A; font-size: 18px; margin-left: -10px !important; } ul.wc_payment_methods.payment_methods.methods input, ul.wc_payment_methods.payment_methods.methods label { cursor: pointer; } ul.wc_payment_methods.payment_methods.methods li { margin-bottom: 20px !important; } ul.wc_payment_methods.payment_methods.methods fieldset { border: 0 !important; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox { display: flex !important; gap: 10px; margin-top: 10px; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span { display: block; top: 0; font-size: 14px; color: #333; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input { top: 3px; position: relative; cursor: pointer; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span a:hover { color: #0B1F3A; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span a { transition: .5s all ease; } div#order_review tbody tr, section.woocommerce-order-details tbody tr { border: none !important; } div#order_review tbody, section.woocommerce-order-details tbody { margin-top: 0px; margin-bottom: 40px; display: block; } .woocommerce-order .woocommerce-thankyou-order-details li strong { margin-top: 5px !important; } section.woocommerce-order-details { padding: 0; background: #fff; border-radius: 20px; } .woocommerce-order-details .woocommerce-table td { width: auto !important; } section.woocommerce-order-details .my-wrapper { display: flex; align-items: center; justify-content: space-between; } section.woocommerce-order-details .my-wrapper a { all: unset; font-family: "Source Sans Pro", Sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 26px !important; background: #0B1F3A !important; padding: 15px 20px !important; color: #fff !important; border-radius: 16px !important; cursor: pointer; transition: .5s all ease; display: block; margin: 0 !important; } section.woocommerce-order-details .my-wrapper a:hover { background: #0B1F3A !important; box-shadow: 0 4px 12px rgba(42, 127, 143, 0.35); } section.woocommerce-order-details br { display: none; } .woocommerce-message { background: #F2F4F7 !important; } .woocommerce-order .woocommerce-thankyou-order-details li { font-size: 16px !important; font-weight: bold !important; } .purchaSe_suMmery address { font-weight: 600 !important; } .purchaSe_suMmery .woocommerce-message { background: #fff !important; color: #8CC63F !important; border-color: #8CC63F !important; } .dsabafw_modal-content form .dsabafw_woocommerce-address-fields_field-wrapper { height: 75vh; overflow: hidden; overflow: auto; scrollbar-width: thin; padding-right: 5px; } /* ═══════════════════════════════════════════════════════════════ PO BOX FIELD (country-specific postcode replacement) ═══════════════════════════════════════════════════════════════ */ .altaris-po-box-field.altaris-po-box-hidden { display: none !important; } .altaris-po-box-field label { font-weight: 700; color: var(--altaris-navy); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { #altaris-account-step { padding: 20px; } .altaris-step__nav { padding: 18px 0 26px; } .altaris-btn { padding: 10px 24px !important; } } @media (max-width: 1024px) { #altaris-step-indicator { margin-bottom: 24px; padding: 0 10px; } .altaris-indicator__label { font-size: 11px; } form.checkout.altaris-step-2 .woocommerce-billing-fields__field-wrapper, form.checkout.altaris-step-2 .woocommerce-shipping-fields__field-wrapper { grid-template-columns: repeat(2, 1fr) !important; column-gap: 14px; } form.checkout.altaris-step-2 #billing_email_field, form.checkout.altaris-step-2 #shipping_email_field { grid-column: span 2 !important; } .dsabafw_selectt, .dsabafw_select_shippingg { gap: 15px !important; margin-bottom: 0 !important; flex-direction: row !important; } button.form_option_billing, button.form_option_shipping { margin: 0 !important; } form.checkout.altaris-step-2 #billing_same_as_shipping_field { margin: 5px 0 !important; } .dsabafw_selectt select.dsabafw_select, .dsabafw_select_shippingg select.dsabafw_select_shipping { height: 45px !important; } button.form_option_billing, button.form_option_shipping { padding: 10px 18px !important; font-size: 13px !important; } .altaris-nav-step-3 .altaris-btn--back { margin-left: 0 !important; } .dsabafw_modal-content { max-width: min(720px, 100%) !important; } .checkOut_forms #billing_city_field { margin-top: 0 !important; margin-bottom: 5px !important; } } @media (max-width: 1024px) { .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2 { margin-top: 30px; } } @media (max-width: 768px) { .purchaSe_suMmery .woocommerce-order .woocommerce-thankyou-order-details li { border-bottom: 1px solid #0B1F3A !important; } .woocommerce ul.order_details li:last-of-type { border: none !important; } section.woocommerce-order-details { padding: 20px 10px; overflow-x: scroll; } body.woocommerce-order-received section.woocommerce-customer-details address { flex-direction: column; } body.woocommerce-order-received section.woocommerce-customer-details address p.woocommerce-customer-details--email { position: relative; top: 0; right: 0; margin: 0; } body.woocommerce-order-received section.woocommerce-customer-details address p { width: 100%; text-align: left; padding-left: 30px !important; margin-top: 20px; } section.woocommerce-order-details .my-wrapper { flex-direction: column; gap: 15px; } .dsabafw_woocommerce-address-fields .form-row.form-row-first, .dsabafw_woocommerce-address-fields .form-row.form-row-last { width: 100% !important; } #altaris-account-step { padding: 16px; } .altaris-account-grid { grid-template-columns: 1fr; } form.checkout.altaris-step-2 #customer_details .col-2 { margin-bottom: 18px; } form.checkout.altaris-step-2 .woocommerce-billing-fields__field-wrapper, form.checkout.altaris-step-2 .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr !important; row-gap: 2px; } form.checkout.altaris-step-2 #billing_same_as_shipping_field, form.checkout.altaris-step-2 #billing_address_1_field, form.checkout.altaris-step-2 #billing_address_2_field, form.checkout.altaris-step-2 #shipping_address_1_field, form.checkout.altaris-step-2 #shipping_address_2_field, form.checkout.altaris-step-2 #billing_order_notes_field, form.checkout.altaris-step-2 #shipping_order_comments_field, form.checkout.altaris-step-2 #billing_email_field, form.checkout.altaris-step-2 #shipping_email_field, form.checkout.altaris-step-2 #custom-city-state-wrapper { grid-column: 1 / -1 !important; } form.checkout.altaris-step-2 #custom-city-state-wrapper { flex-wrap: wrap; gap: 10px !important; } form.checkout.altaris-step-2 #custom-city-state-wrapper>p { width: 100% !important; flex: 1 1 100% !important; } .dsabafw_selectt, .dsabafw_select_shippingg { flex-wrap: wrap !important; } .dsabafw_selectt select.dsabafw_select, .dsabafw_select_shippingg select.dsabafw_select_shipping, .dsabafw_selectt .select2-container, .dsabafw_select_shippingg .select2-container, button.form_option_billing, button.form_option_shipping { flex: 1 1 100% !important; width: 100% !important; } /* Enforce single-column rows on narrow screens even if upstream CSS tries to keep first/last fields at 50%. */ form.checkout.altaris-step-2 .woocommerce-billing-fields__field-wrapper>p, form.checkout.altaris-step-2 .woocommerce-shipping-fields__field-wrapper>p { width: 100% !important; } .altaris-step__nav { flex-direction: row; padding: 14px 0 18px; } /* Next / Back stay content-width and sit on opposite ends of the row (parent .altaris-step__nav uses justify-content: space-between) instead of stretching full width on tablet / mobile. */ .altaris-btn--next, .altaris-btn--back { width: auto; flex: 0 0 auto; justify-content: center; } .altaris-nav-step-3 { margin-top: 12px; padding-top: 12px; padding-bottom: 14px; } .altaris-account-actions { justify-content: flex-start; } /* Shipping / Billing / account action button — content width (with a comfortable tap minimum) instead of stretching the full row. */ .altaris-account-actions .altaris-account-submit { width: auto; min-width: 200px; } .dsabafw_billing_popup_class, .dsabafw_shipping_popup_class { padding: 16px 10px !important; } .dsabafw_modal-content { max-height: calc(100vh - 32px) !important; overflow-y: auto !important; /* Extra top padding so content clears the repositioned close button */ padding-top: 44px !important; } /* Reposition close button inside the modal on narrow screens. The plugin default of right:-10px / top:-10px overflows off-screen when the modal fills the viewport width. */ .dsabafw_close { right: 10px !important; top: 10px !important; } } @media (max-width: 768px) { .altaris-indicator__label { font-size: 10px; } .altaris-indicator__bubble { width: 32px; height: 32px; font-size: 13px; } .altaris-indicator__item:not(:last-child)::after { top: 16px; } .altaris-btn { padding: 12px 18px; font-size: 14px; } .dsabafw_selectt .select2-container .select2-selection--single, .dsabafw_select_shippingg .select2-container .select2-selection--single { height: 42px !important; } #billing_same_as_shipping_field label { line-height: 1.4; font-size: 14px; } /* Stack email & password vertically on small screens */ .altaris-account-grid>.form-row-wide:has(#altaris_signup_email), .altaris-account-grid>.form-row-wide:has(#altaris_signup_password) { grid-column: 1 / -1; } } @media (max-width: 480px) { #altaris-step-indicator { padding: 0 4px; } .altaris-indicator__bubble { width: 30px; height: 30px; font-size: 12px; } .altaris-indicator__item:not(:last-child)::after { top: 15px; } .altaris-indicator__label { font-size: 10px; letter-spacing: 0.02em; } .altaris-btn { padding: 11px 14px !important; font-size: 13px; } } /* ─── Shipping field visibility ─────────────────────────────────── Hide the legacy WC company field and any generic altaris-hidden-field elements, but keep first name and last name visible. ─────────────────────────────────────────────────────────────── */ #shipping_company_field, .woocommerce-shipping-fields__field-wrapper .altaris-hidden-field { display: none !important; } /* Hide billing Job Title — collected during account creation, not needed at checkout */ #billing_job_title_field { display: none !important; } #shipping_first_name_field, #shipping_last_name_field { display: block !important; } input[type="email"] { text-transform: lowercase !important; } /* ═══════════════════════════════════════════════════════════════ ALTARIS THEME OVERRIDE — retargets altaris-* tokens to site palette Appended last so it wins over the legacy teal/navy palette above. Uses Altaris design-system tokens (--blue-*, --green-*, --ink-*). ═══════════════════════════════════════════════════════════════ */ :root { --altaris-primary: var(--blue-900, #0B1F3A); --altaris-primary-dark: var(--blue-800, #0B1F3A); --altaris-primary-light: var(--blue-50, #F2F4F7); --altaris-accent: var(--green-500, #8CC63F); --altaris-accent-dark: var(--green-600, #8CC63F); --altaris-navy: var(--blue-900, #0B1F3A); --altaris-grey: var(--ink-500, #6a7a8f); --altaris-border: var(--line-100, #F2F4F7); --altaris-error: #c0392b; --altaris-success: var(--green-600, #8CC63F); --altaris-bg: var(--bg-muted, #F2F4F7); --altaris-white: #ffffff; --altaris-radius: 8px; --altaris-radius-sm: 6px; --altaris-shadow: 0 1px 2px rgba(3, 23, 46, 0.04), 0 4px 12px rgba(3, 23, 46, 0.06); --altaris-shadow-soft: 0 1px 2px rgba(3, 23, 46, 0.05); --altaris-transition: 0.18s ease; --altaris-text: var(--ink-700, #2d3e52); --altaris-text-strong: var(--blue-900, #0B1F3A); } /* ── Indicator ────────────────────────────────────────────────── */ #altaris-step-indicator { margin: 0 auto 32px; padding: 0 12px; } .altaris-indicator__list { align-items: center; } .altaris-indicator__bubble { width: 36px; height: 36px; border-width: 2px; border-color: var(--altaris-border); background-color: #fff; color: var(--altaris-grey); font-family: var(--sans, inherit); font-size: 14px; } .altaris-indicator__item:not(:last-child)::after { top: 17px; height: 2px; background-color: var(--altaris-border); } .altaris-indicator__item.is-active .altaris-indicator__bubble { background-color: var(--altaris-primary); border-color: var(--altaris-primary); color: #fff; box-shadow: 0 0 0 4px rgba(142, 187, 55, 0.18); } .altaris-indicator__item.is-completed .altaris-indicator__bubble { background-color: var(--altaris-accent); border-color: var(--altaris-accent); color: var(--altaris-primary); } .altaris-indicator__item.is-completed:not(:last-child)::after { background-color: var(--altaris-accent); } .altaris-indicator__item.is-completed:hover .altaris-indicator__bubble { background-color: var(--altaris-accent-dark); border-color: var(--altaris-accent-dark); color: #fff; } .altaris-indicator__label { font-family: var(--sans, inherit); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; color: var(--altaris-grey); margin-top: 10px; } .altaris-indicator__item.is-active .altaris-indicator__label, .altaris-indicator__item.is-completed .altaris-indicator__label { color: var(--altaris-primary); } /* ── Step pane chrome ─────────────────────────────────────────── */ form.checkout.altaris-multistep-active { background-color: var(--altaris-white); border: 1px solid var(--altaris-border); border-radius: 12px; padding: 28px 32px; box-shadow: var(--altaris-shadow); } form.checkout.altaris-multistep-active #altaris-account-step, form.checkout.altaris-multistep-active #customer_details, form.checkout.altaris-multistep-active #order_review { margin-top: 4px; } form.checkout.altaris-multistep-active h3, form.checkout.altaris-multistep-active #order_review_heading { font-family: var(--display, var(--sans, inherit)); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--altaris-text-strong); position: relative; padding-left: 14px; margin: 0 0 14px; } form.checkout.altaris-multistep-active h3::before, form.checkout.altaris-multistep-active #order_review_heading::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; background-color: var(--altaris-accent); border-radius: 2px; } /* ── Form inputs ──────────────────────────────────────────────── */ form.checkout.altaris-multistep-active .form-row label, form.checkout.altaris-multistep-active .altaris-account-grid label { display: block; margin-bottom: 6px; font-family: var(--sans, inherit); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--altaris-grey); } form.checkout.altaris-multistep-active .form-row input.input-text, form.checkout.altaris-multistep-active .form-row select, form.checkout.altaris-multistep-active .form-row textarea, form.checkout.altaris-multistep-active .altaris-account-grid input, form.checkout.altaris-multistep-active .select2-selection--single { width: 100%; padding: 12px 14px !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius-sm) !important; background-color: #fff !important; color: var(--altaris-text-strong) !important; font: 400 14px/1.4 var(--sans, inherit) !important; transition: border-color var(--altaris-transition), box-shadow var(--altaris-transition); } form.checkout.altaris-multistep-active .form-row input.input-text:focus, form.checkout.altaris-multistep-active .form-row select:focus, form.checkout.altaris-multistep-active .form-row textarea:focus, form.checkout.altaris-multistep-active .altaris-account-grid input:focus { outline: none; border-color: var(--blue-600, #0B1F3A) !important; box-shadow: 0 0 0 3px rgba(29, 83, 144, 0.15) !important; } form.checkout.altaris-multistep-active .form-row.woocommerce-invalid input.input-text, form.checkout.altaris-multistep-active .form-row.woocommerce-invalid select, form.checkout.altaris-multistep-active .altaris-field--error { border-color: var(--altaris-error) !important; background-color: #fdecea !important; } form.checkout.altaris-multistep-active .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; color: var(--altaris-text-strong); } form.checkout.altaris-multistep-active .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 8px !important; } /* ── Buttons (Next / Back) ────────────────────────────────────── */ .altaris-step__nav { padding: 24px 0 4px; border-top: 1px solid var(--altaris-border); margin-top: 24px; } .altaris-btn { border: 1px solid var(--altaris-primary) !important; border-radius: var(--altaris-radius-sm) !important; padding: 12px 26px !important; font: 600 13px/1.3 var(--sans, inherit) !important; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color var(--altaris-transition), color var(--altaris-transition), border-color var(--altaris-transition), transform 0.05s ease; } .altaris-btn:active { transform: translateY(1px); } .altaris-btn--next { background-color: var(--altaris-primary) !important; color: #fff !important; border-color: var(--altaris-primary) !important; } .altaris-btn--next:hover:not(:disabled) { background-color: var(--altaris-accent) !important; border-color: var(--altaris-accent) !important; color: var(--altaris-primary) !important; box-shadow: 0 4px 14px rgba(142, 187, 55, 0.30) !important; } .altaris-btn--back { background-color: var(--altaris-primary) !important; color: #fff !important; border-color: var(--altaris-primary) !important; } .altaris-btn--back:hover:not(:disabled), .altaris-btn--back:focus:not(:disabled) { background-color: var(--altaris-accent) !important; border-color: var(--altaris-accent) !important; color: var(--altaris-primary) !important; box-shadow: 0 4px 14px rgba(142, 187, 55, 0.30) !important; outline: none; } .altaris-btn--back:disabled { opacity: 0.65; cursor: not-allowed; } /* ── Place Order (Step 3) ─────────────────────────────────────── */ form.checkout.altaris-step-3 #payment .form-row.place-order #place_order { background-color: var(--altaris-accent) !important; border: 1px solid var(--altaris-accent) !important; color: var(--altaris-primary) !important; border-radius: var(--altaris-radius-sm) !important; padding: 14px 32px !important; font: 700 14px/1.3 var(--sans, inherit) !important; text-transform: uppercase; letter-spacing: 0.06em; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order:hover { background-color: var(--altaris-accent-dark) !important; border-color: var(--altaris-accent-dark) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(106, 140, 41, 0.35) !important; } /* ── Account step (Sign Up / Login) ───────────────────────────── */ .altaris-account-tabs { display: inline-flex; margin-bottom: 18px; border-radius: var(--altaris-radius-sm); background-color: var(--altaris-bg); padding: 4px; gap: 4px; } .altaris-account-tab { appearance: none; background: transparent; border: 0; padding: 8px 18px; border-radius: var(--altaris-radius-sm); font: 600 12px/1.4 var(--sans, inherit); text-transform: uppercase; letter-spacing: 0.06em; color: var(--altaris-grey); cursor: pointer; transition: background-color var(--altaris-transition), color var(--altaris-transition); } .altaris-account-tab.is-active { background-color: #fff; color: var(--altaris-primary); box-shadow: var(--altaris-shadow-soft); } .altaris-account-tab:hover:not(.is-active) { color: var(--altaris-text-strong); } .altaris-account-actions { margin-top: 18px; display: flex; justify-content: flex-end; } .altaris-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; } .altaris-account-grid .form-row-wide { grid-column: 1 / -1; } /* ── Notices ─────────────────────────────────────────────────── */ .altaris-msc-notice .woocommerce-error { background-color: #fdecea !important; border-left: 4px solid var(--altaris-error); border-radius: var(--altaris-radius-sm); padding: 14px 18px; color: var(--altaris-error); font: 500 14px/1.5 var(--sans, inherit); } /* ═══════════════════════════════════════════════════════════════ STEP 3 — REVIEW & PAY (polished) ═══════════════════════════════════════════════════════════════ */ /* "Your Order" heading — centered, clean */ form.checkout.altaris-step-3 #order_review_heading { text-align: center !important; font: 600 22px/1.3 var(--display, var(--sans, inherit)) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--altaris-text-strong) !important; margin: 0 0 18px !important; padding: 0 !important; } form.checkout.altaris-step-3 #order_review_heading::before { display: none !important; } /* ── Order review table — borderless rows, clean dividers ────── */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table { width: 100%; margin: 0 0 0 !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; box-shadow: none !important; table-layout: auto; overflow: visible; } /* Header row — bold, navy, single underline */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead tr { border-bottom: 1px solid var(--altaris-border) !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th { background: transparent !important; color: var(--altaris-text-strong) !important; font: 700 14px/1.4 var(--sans, inherit) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 0 12px !important; border: 0 !important; text-align: left !important; white-space: nowrap; vertical-align: bottom; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th.product-quantity, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th.altaris-qty-col { text-align: center !important; width: 80px; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th.product-total { text-align: right !important; width: 120px; } /* Body rows — no internal dividers, just whitespace; thin underline below tbody */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody { border-bottom: 1px solid var(--altaris-border) !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td { padding: 8px 0 !important; border: 0 !important; font: 400 13.5px/1.5 var(--sans, inherit) !important; color: var(--altaris-text-strong); vertical-align: middle !important; background: transparent !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr:first-child td { padding-top: 14px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(1) { width: 70%; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(2), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(3) { width: 15%; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(1) { form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr: first-child td; width: 70%; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(2), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(3) { width: 15%; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr:last-child td { padding-bottom: 14px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-name { font: 600 13.5px/1.5 var(--sans, inherit) !important; color: var(--altaris-text-strong) !important; text-transform: none !important; word-break: break-word; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-quantity, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.altaris-qty-col { text-align: center !important; width: 80px; color: var(--altaris-text-strong); } /* Plain qty number — no pill, matches reference */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-quantity strong.product-quantity, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.altaris-qty-col strong.product-quantity { display: inline; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font: 500 13.5px/1.5 var(--sans, inherit) !important; color: var(--altaris-text-strong); } /* Hide the "× " glyph WC injects so qty is just a number */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-quantity strong.product-quantity { font-size: 0; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-quantity strong.product-quantity::after { content: attr(data-qty); font-size: 13.5px; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-total { text-align: right !important; width: 120px; font: 600 13.5px/1.5 var(--sans, inherit) !important; color: var(--altaris-text-strong) !important; white-space: nowrap; } /* Footer — each row: label left, amount right, thin divider below each */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot td { padding: 14px 0 !important; border: 0 !important; /* border-bottom: 1px solid var(--altaris-border) !important; */ font: 500 13.5px/1.5 var(--sans, inherit) !important; background: transparent !important; vertical-align: middle !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot th { text-align: left !important; font-weight: 600 !important; color: var(--altaris-text-strong); width: 35%; white-space: nowrap; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot td { text-align: right !important; font-weight: 600 !important; color: var(--altaris-text-strong); white-space: nowrap; } /* Shipping warning — italic-grey copy, normal whitespace */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.shipping td { text-align: left !important; font: 400 12.5px/1.55 var(--sans, inherit) !important; color: var(--altaris-grey) !important; white-space: normal !important; font-weight: 400 !important; } /* Total row — bold navy, no bottom divider */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.order-total th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.order-total td { font: 700 15px/1.4 var(--sans, inherit) !important; color: var(--altaris-text-strong) !important; border-bottom: 0 !important; padding-top: 14px !important; padding-bottom: 0 !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.order-total td strong { color: var(--altaris-text-strong) !important; font-weight: 700; } /* #order_review wraps both the order table and the #payment block. We want them as TWO separate cards per the reference design, so leave #order_review transparent and card-style each child individually. */ form.checkout.altaris-step-3 #order_review { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } /* Order table card */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table { background: #fff !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius) !important; border-collapse: separate !important; border-spacing: 0 !important; box-shadow: var(--altaris-shadow-soft, 0 1px 2px rgba(3, 23, 46, 0.05)); margin: 0 0 18px !important; overflow: hidden; } /* Inset padding on cells (since can't be padded directly) */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot td { padding-left: 26px !important; padding-right: 26px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th { padding-top: 22px !important; padding-bottom: 14px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr:first-child td { padding-top: 18px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr:last-child td { padding-bottom: 18px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.order-total th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.order-total td { padding-bottom: 22px !important; } /* Currency symbol same weight as amount */ form.checkout.altaris-step-3 .woocommerce-Price-currencySymbol { margin-right: 1px; } /* ════════════════════════════════════════════════════════════════ PAYMENT SUMMARY (Step 3) — responsive order table The desktop table uses table-layout:auto + nowrap headers/price + 70/15/15 columns, which overflows and clips the Subtotal on narrow screens. On tablet/mobile switch to a fixed layout, let cells wrap, rebalance the columns so the price column always has room, and tighten the cell insets. Same selector prefix as the desktop rules so these reliably win. */ @media (max-width: 768px) { form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table { table-layout: fixed !important; width: 100% !important; } form.checkout.altaris-step-3 #order_review, form.checkout.altaris-step-3 .woocommerce-checkout-review-order { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Tighter cell insets free up horizontal space. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot td { padding-left: 14px !important; padding-right: 14px !important; } /* Columns: Product / Qty / Subtotal — keep the price column wide enough. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(1), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(1) { width: 54% !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(2), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(2) { width: 16% !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(3), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(3), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th.product-total, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-total { width: 30% !important; } /* Headers + product name wrap instead of forcing the table to overflow. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-name { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } /* Price stays on one line but now fits inside its column. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-total { white-space: nowrap !important; } /* Shipping row — when the "no shipping options available" message shows, the long copy crams the rigid 3-column grid (label cell collapses + breaks char-by-char, message forces overflow). Take ONLY this row out of the table grid: stack its label + message as full-width blocks so the text wraps cleanly inside the summary card and never widens the table. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.shipping { display: block; width: 100%; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.shipping th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.shipping td { display: block; width: 100% !important; max-width: 100% !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; padding-left: 14px !important; padding-right: 14px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot tr.shipping th { padding-bottom: 4px !important; font-weight: 600 !important; } /* Header labels (Product / Qty / Subtotal) — keep them readable and vertically centered on the header row. Horizontal alignment stays per column: Product left, Qty centered, Subtotal right (from base rules). */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th { font-size: 14px !important; line-height: 1.3 !important; vertical-align: middle !important; padding-bottom: 12px !important; } } @media (max-width: 480px) { form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot td { padding-left: 12px !important; padding-right: 12px !important; font-size: 12.5px !important; } /* Give the Subtotal column a touch more room on the narrowest phones. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(1), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(1) { width: 50% !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th:nth-child(3), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody tr td:nth-child(3), form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th.product-total, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td.product-total { width: 34% !important; } /* Keep the header labels readable on phones (override the cell-shrink above) and vertically centered across the row. */ form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th { font-size: 13.5px !important; line-height: 1.3 !important; vertical-align: middle !important; } } /* ── Payment block — single white card wrapper ──────────────── */ form.checkout.altaris-step-3 #payment, form.checkout.altaris-step-3 .woocommerce-checkout-payment { margin: 0 !important; padding: 22px 26px !important; background-color: #fff !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius) !important; box-shadow: var(--altaris-shadow-soft, 0 1px 2px rgba(3, 23, 46, 0.05)) !important; } /* Methods list — flat (no per-method cards), method label sits flush */ form.checkout.altaris-step-3 #payment ul.payment_methods, form.checkout.altaris-step-3 #payment ul.payment_methods.methods { list-style: none !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 8px !important; box-shadow: none !important; } form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method:last-child { margin-bottom: 0 !important; } /* Payment method label — primary-color heading, no radio dot */ form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method>label, form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method>label[for] { display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px !important; padding: 0 !important; font: 500 15px/1.3 var(--sans, inherit) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--altaris-primary) !important; cursor: pointer; width: 100%; } form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method>label::before { display: none !important; content: none !important; } form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method>input[type="radio"] { display: none !important; } /* Brand icon strip (Visa / MC / Amex / Discover) */ form.checkout.altaris-step-3 #payment .wc-stripe-card-icons-container { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } form.checkout.altaris-step-3 #payment .wc-stripe-card-icon, form.checkout.altaris-step-3 #payment ul.payment_methods>li.wc_payment_method>label img { height: 22px !important; width: auto !important; max-height: 22px !important; vertical-align: middle; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--altaris-border); } /* Payment_box inner area (Stripe card element, etc.) */ form.checkout.altaris-step-3 #payment .payment_box { margin: 14px 0 0 !important; padding: 14px !important; background: var(--altaris-bg) !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius-sm) !important; font: 400 13px/1.5 var(--sans, inherit) !important; color: var(--altaris-text) !important; } form.checkout.altaris-step-3 #payment .payment_box::before { display: none !important; } form.checkout.altaris-step-3 #payment .payment_box input.input-text, form.checkout.altaris-step-3 #payment .payment_box .StripeElement, form.checkout.altaris-step-3 #payment .payment_box .wc-stripe-elements-field { background: #fff !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius-sm) !important; padding: 12px 14px !important; width: 100% !important; font: 400 14px/1.4 var(--sans, inherit) !important; color: var(--altaris-text-strong) !important; box-sizing: border-box; } form.checkout.altaris-step-3 #payment .payment_box label { font: 600 12px/1.4 var(--sans, inherit) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--altaris-text) !important; margin-bottom: 6px !important; } /* Stripe "Save Card" — checkbox + label sit inline */ form.checkout.altaris-step-3 #payment .payment_box .wc-stripe-save-source { display: flex !important; align-items: center !important; gap: 8px !important; margin: 14px 0 0 !important; padding: 0 !important; } form.checkout.altaris-step-3 #payment .payment_box .wc-stripe-save-source>label.checkbox { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center; line-height: 1; cursor: pointer; } form.checkout.altaris-step-3 #payment .payment_box .wc-stripe-save-source>label.save-source-label { margin: 0 !important; padding: 0 !important; font: 400 13px/1.4 var(--sans, inherit) !important; color: var(--altaris-text) !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; overflow: visible !important; white-space: normal !important; text-indent: 0 !important; } form.checkout.altaris-step-3 #payment .payment_box .wc-stripe-save-source .save-source-checkbox { display: none; } form.checkout.altaris-step-3 #payment .payment_box input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; accent-color: var(--altaris-accent) !important; cursor: pointer; opacity: 1 !important; position: static !important; appearance: auto !important; -webkit-appearance: auto !important; } /* Stripe payment-method tabs (Card / US bank account) — when shown */ form.checkout.altaris-step-3 #payment .wc-stripe-payment-method-buttons-container, form.checkout.altaris-step-3 #payment .wc-stripe-payment-method-tabs { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 0 14px !important; } form.checkout.altaris-step-3 #payment .wc-stripe-payment-method-button, form.checkout.altaris-step-3 #payment .wc-stripe-tab-button { flex: 1 1 200px; padding: 11px 14px !important; background: #fff !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius-sm) !important; font: 600 13px/1.3 var(--sans, inherit) !important; color: var(--altaris-text-strong) !important; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } form.checkout.altaris-step-3 #payment .wc-stripe-payment-method-button.is-active, form.checkout.altaris-step-3 #payment .wc-stripe-tab-button.is-active, form.checkout.altaris-step-3 #payment .wc-stripe-payment-method-button[aria-selected="true"] { border-color: var(--altaris-primary) !important; background: #fff !important; color: var(--altaris-primary) !important; box-shadow: 0 0 0 2px rgba(29, 83, 144, 0.12) !important; } /* Privacy / terms text */ form.checkout.altaris-step-3 #payment .woocommerce-terms-and-conditions-wrapper { margin: 14px 0 0 !important; } form.checkout.altaris-step-3 #payment .woocommerce-privacy-policy-text, form.checkout.altaris-step-3 #payment .wc-terms-and-conditions { margin: 0 !important; padding: 0 !important; } form.checkout.altaris-step-3 #payment .woocommerce-privacy-policy-text p { margin: 0 !important; font: 400 12px/1.6 var(--sans, inherit) !important; color: var(--altaris-grey) !important; } form.checkout.altaris-step-3 #payment .woocommerce-privacy-policy-text a, form.checkout.altaris-step-3 #payment .wc-terms-and-conditions a { color: var(--altaris-accent-deep) !important; text-decoration: underline; text-underline-offset: 2px; } form.checkout.altaris-step-3 #payment .woocommerce-privacy-policy-text a:hover, form.checkout.altaris-step-3 #payment .wc-terms-and-conditions a:hover { color: var(--altaris-primary) !important; } /* Place Order button — primary navy, full width */ form.checkout.altaris-step-3 #payment .form-row.place-order { margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; display: block !important; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order, form.checkout.altaris-step-3 #payment #place_order { width: 100% !important; padding: 16px 24px !important; background-color: var(--altaris-primary) !important; background-image: none !important; border: 1px solid var(--altaris-primary) !important; border-radius: var(--altaris-radius-sm) !important; color: #fff !important; font: 700 13px/1.3 var(--sans, inherit) !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; text-shadow: none !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order:hover, form.checkout.altaris-step-3 #payment #place_order:hover { background-color: var(--altaris-accent) !important; border-color: var(--altaris-accent) !important; color: var(--altaris-primary) !important; box-shadow: 0 6px 18px rgba(142, 187, 55, 0.30) !important; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order:active, form.checkout.altaris-step-3 #payment #place_order:active { transform: translateY(1px); } /* Privacy / terms — sit BELOW the Place Order button as horizontal row with checkbox + paragraph, per reference design. */ form.checkout.altaris-step-3 #payment .woocommerce-terms-and-conditions-wrapper { order: 2; margin: 14px 0 0 !important; padding: 0 !important; display: flex !important; align-items: flex-start; gap: 10px; } form.checkout.altaris-step-3 #payment .woocommerce-terms-and-conditions-wrapper::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--altaris-border); border-radius: 3px; background: #fff; margin-top: 2px; } form.checkout.altaris-step-3 #payment .woocommerce-privacy-policy-text p { margin: 0 !important; font: 400 12.5px/1.6 var(--sans, inherit) !important; color: var(--altaris-text) !important; } /* DOM order: WC outputs terms-wrapper BEFORE place-order button. Visually we want it AFTER — flip via flex column on the parent row. */ form.checkout.altaris-step-3 #payment .form-row.place-order { display: flex !important; flex-direction: column; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order { order: 1; } form.checkout.altaris-step-3 #payment .woocommerce-terms-and-conditions-wrapper { order: 2; } /* The terms wrapper actually sits OUTSIDE .form-row.place-order in some WC versions — give it a top margin so it lands below the button. */ form.checkout.altaris-step-3 #payment>.woocommerce-terms-and-conditions-wrapper { margin-top: 14px !important; } /* Step-3 nav (Back) — match other step nav style */ form.checkout.altaris-step-3 .altaris-nav-step-3 { margin-top: 18px !important; padding: 18px 0 0 !important; border-top: 1px solid var(--altaris-border) !important; } /* Mobile pass for review table */ @media (max-width: 768px) { form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tbody td, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot th, form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table tfoot td { padding: 8px 10px !important; font-size: 12px !important; } form.checkout.altaris-step-3 .woocommerce-checkout-review-order-table thead th { font-size: 14px !important; margin: 5px 0; } div#order_review .woocommerce-checkout-review-order-table tbody td { font-size: 14px !important; } form.checkout.altaris-step-3 #payment { padding: 14px !important; } form.checkout.altaris-step-3 #payment .form-row.place-order #place_order { padding: 12px 18px !important; font-size: 13px !important; } } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 768px) { form.checkout.altaris-multistep-active { padding: 18px 16px; border-radius: 10px; } .altaris-indicator__bubble { width: 32px; height: 32px; font-size: 13px; } .altaris-indicator__item:not(:last-child)::after { top: 15px; } .altaris-indicator__label { font-size: 10px; margin-top: 6px; } .altaris-account-grid { grid-template-columns: 1fr; } /* Keep the step nav as a single row on phones too — Back on the left, Next on the right — with content-width buttons (no full-width stretch). */ .altaris-step__nav { flex-direction: row; align-items: center; } .altaris-btn { width: auto; justify-content: center; } } @media (max-width: 480px) { form.checkout.altaris-multistep-active { padding: 14px 12px; } .altaris-indicator__label { font-size: 10px; letter-spacing: 0.04em; } } /* ═══════════════════════════════════════════════════════════════ STEP 2 — SHIPPING / BILLING FORMS (theme-aligned) ═══════════════════════════════════════════════════════════════ */ /* Section headings — "Shipping Address" / "Billing Address" */ form.checkout.altaris-multistep-active .altaris-msc-section-title, form.checkout.altaris-multistep-active .woocommerce-billing-fields>h3, form.checkout.altaris-multistep-active .woocommerce-shipping-fields>h3:not(#ship-to-different-address) { font-family: var(--display, var(--sans, inherit)); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--altaris-text-strong); margin: 0 0 16px; padding: 0 0 0 14px; position: relative; line-height: 1.25; } form.checkout.altaris-multistep-active .altaris-msc-section-title::before, form.checkout.altaris-multistep-active .woocommerce-billing-fields>h3::before, form.checkout.altaris-multistep-active .woocommerce-shipping-fields>h3:not(#ship-to-different-address)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; background-color: var(--altaris-accent); border-radius: 2px; } /* Hide the default "Ship to a different address?" checkbox heading – we force-check it from JS and provide our own "Shipping Address" heading. */ form.checkout.altaris-multistep-active #ship-to-different-address { display: none !important; } /* Shipping / Billing field wrappers: card surface + breathing room */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields, form.checkout.altaris-multistep-active .woocommerce-billing-fields { margin-bottom: 24px; } form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 14px 16px !important; width: 100% !important; } /* Reset every form-row in the wrapper: no float, no width%, full grid cell. NOTE: deliberately no `display: block !important` — that would beat WooCommerce's locale-driven `display: none` (used to hide fields like postcode/state for countries that don't require them). */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row, form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>p.form-row, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>p.form-row { grid-column: span 12 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; flex: none !important; } /* Locale-driven hide: WC sets inline display:none on rows it doesn't want for a given country. Honour that and remove the row from the grid. */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row[style*="display: none"], form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row[style*="display: none"], form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row.altaris-hidden-field, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row.altaris-hidden-field { display: none !important; } /* WC class-based widths */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row.form-row-first, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row.form-row-first, form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row.form-row-last, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row.form-row-last { grid-column: span 6 !important; } form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row.form-row-third, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row.form-row-third { grid-column: span 4 !important; } form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>.form-row.form-row-wide, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>.form-row.form-row-wide { grid-column: span 12 !important; } /* Force the first visible field (Address Label) to start at column 1 of the grid, so any earlier zero-height / hidden row that WC injects (e.g. a tracking hidden field that we cannot easily strip) does not leave a visible empty cell before Address Label. */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper>#shipping_reference_field_field, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper>#billing_reference_field_field { grid-column: 1 / span 4 !important; } /* ID-based safety net — guarantees a 3-up row for the address-detail fields even if the WC locale layer overwrites our class assignments. */ form.checkout.altaris-multistep-active #shipping_reference_field_field, form.checkout.altaris-multistep-active #shipping_first_name_field, form.checkout.altaris-multistep-active #shipping_last_name_field, form.checkout.altaris-multistep-active #shipping_company_name_field, form.checkout.altaris-multistep-active #shipping_job_title_field, form.checkout.altaris-multistep-active #shipping_country_field, form.checkout.altaris-multistep-active #shipping_city_field, form.checkout.altaris-multistep-active #shipping_state_field, form.checkout.altaris-multistep-active #shipping_postcode_field, form.checkout.altaris-multistep-active #billing_reference_field_field, form.checkout.altaris-multistep-active #billing_first_name_field, form.checkout.altaris-multistep-active #billing_last_name_field, form.checkout.altaris-multistep-active #billing_city_field, form.checkout.altaris-multistep-active #billing_state_field, form.checkout.altaris-multistep-active #billing_postcode_field { grid-column: span 4 !important; } form.checkout.altaris-multistep-active #billing_company_name_field, form.checkout.altaris-multistep-active #billing_country_field, form.checkout.altaris-multistep-active #billing_phone_field, form.checkout.altaris-multistep-active #billing_email_field, form.checkout.altaris-multistep-active #shipping_phone_field, form.checkout.altaris-multistep-active #shipping_email_field { grid-column: span 6 !important; } form.checkout.altaris-multistep-active #shipping_address_1_field, form.checkout.altaris-multistep-active #shipping_address_2_field, form.checkout.altaris-multistep-active #billing_address_1_field, form.checkout.altaris-multistep-active #billing_address_2_field, form.checkout.altaris-multistep-active #shipping_order_comments_field, form.checkout.altaris-multistep-active #billing_order_notes_field, form.checkout.altaris-multistep-active #billing_same_as_shipping_field { grid-column: span 12 !important; } /* Inputs / select2 widgets must stretch to the full grid cell. Exclude checkboxes / radios so they keep their natural size. */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper .woocommerce-input-wrapper, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper, form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper input:not([type="checkbox"]):not([type="radio"]), form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper input:not([type="checkbox"]):not([type="radio"]), form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper select, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper select, form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper textarea, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper textarea, form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper .select2-container, form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper .select2-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Restore native sizing for checkboxes / radios so the label can flow inline. */ form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper input[type="checkbox"], form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper input[type="checkbox"], form.checkout.altaris-multistep-active .woocommerce-shipping-fields__field-wrapper input[type="radio"], form.checkout.altaris-multistep-active .woocommerce-billing-fields__field-wrapper input[type="radio"] { width: 18px !important; height: 18px !important; margin: 0 !important; flex: 0 0 auto !important; accent-color: var(--altaris-accent); cursor: pointer; } /* Required asterisk: theme accent color */ form.checkout.altaris-multistep-active .form-row label .required, form.checkout.altaris-multistep-active .altaris-account-grid label .required { color: var(--altaris-accent-dark); text-decoration: none; margin-left: 2px; } /* "(optional)" hint after labels */ form.checkout.altaris-multistep-active .form-row .optional { color: var(--altaris-grey); font-weight: 600; font-size: 11px; text-transform: lowercase; margin-left: 4px; } /* Phone is required — WooCommerce renders the "*" via abbr.required. (Legacy rule hid the "(optional)" suffix back when phone was optional; no longer emitted now that the field is required.) */ /* "Use the same details" checkbox row — single inline line, no wrap */ form.checkout.altaris-multistep-active #billing_same_as_shipping_field { grid-column: span 12 !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px !important; /* padding: 12px 16px !important; */ margin: 0 0 8px !important; /* background-color: var(--altaris-bg) !important; */ /* border: 1px solid var(--altaris-border) !important; */ /* border-radius: var(--altaris-radius-sm) !important; */ width: 100% !important; } form.checkout.altaris-multistep-active #billing_same_as_shipping_field>label, form.checkout.altaris-multistep-active #billing_same_as_shipping_field>.woocommerce-input-wrapper, form.checkout.altaris-multistep-active #billing_same_as_shipping_field>span { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important; width: auto !important; max-width: 100% !important; flex: 0 1 auto !important; } form.checkout.altaris-multistep-active #billing_same_as_shipping_field label { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--altaris-text-strong) !important; line-height: 1.4 !important; cursor: pointer; white-space: normal; } form.checkout.altaris-multistep-active #billing_same_as_shipping_field input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; flex: 0 0 auto !important; accent-color: var(--altaris-accent); cursor: pointer; } form.checkout.altaris-multistep-active #billing_same_as_shipping_field .optional { margin-left: 4px; color: var(--altaris-grey); font-weight: 500; text-transform: lowercase; font-size: 12px; } /* Order notes textarea: nicer height + spacing */ form.checkout.altaris-multistep-active textarea { min-height: 90px; resize: none; } /* ── Select2 (Country / State) — match input styling ────────── */ form.checkout.altaris-multistep-active .select2-container .select2-selection--single { height: auto !important; min-height: 44px !important; padding: 8px 12px !important; border: 1px solid var(--altaris-border) !important; border-radius: var(--altaris-radius-sm) !important; background-color: #fff !important; box-shadow: none !important; display: flex; align-items: center; line-height: 1.4 !important; } form.checkout.altaris-multistep-active .select2-container .select2-selection__rendered { flex: 1 1 auto; padding: 0 !important; color: var(--altaris-text-strong) !important; font: 400 14px/1.4 var(--sans, inherit) !important; line-height: 1.4 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } form.checkout.altaris-multistep-active .select2-container .select2-selection__placeholder { color: var(--altaris-grey) !important; } form.checkout.altaris-multistep-active .select2-container .select2-selection__arrow { position: absolute !important; top: 0 !important; right: 10px !important; height: 100% !important; width: 16px !important; } form.checkout.altaris-multistep-active .select2-container .select2-selection__arrow b { border-color: var(--altaris-text) transparent transparent transparent !important; border-width: 6px 5px 0 5px !important; margin-left: -5px !important; margin-top: -3px !important; } form.checkout.altaris-multistep-active .select2-container--open .select2-selection__arrow b, form.checkout.altaris-multistep-active .select2-container--focus .select2-selection__arrow b { border-color: transparent transparent var(--altaris-text) transparent !important; border-width: 0 5px 6px 5px !important; } form.checkout.altaris-multistep-active .select2-container--focus .select2-selection--single, form.checkout.altaris-multistep-active .select2-container--open .select2-selection--single { border-color: var(--blue-600, #0B1F3A) !important; box-shadow: 0 0 0 3px rgba(29, 83, 144, 0.15) !important; outline: none !important; } /* Select2 dropdown panel (open) — match palette */ .select2-container--default .select2-dropdown { border: 1px solid var(--altaris-border, #F2F4F7) !important; border-radius: var(--altaris-radius-sm, 6px) !important; box-shadow: 0 12px 28px rgba(3, 23, 46, 0.15) !important; overflow: hidden; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--altaris-border, #F2F4F7) !important; border-radius: var(--altaris-radius-sm, 6px) !important; padding: 8px 10px !important; font: 400 14px/1.4 var(--sans, inherit) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--blue-900, #0B1F3A) !important; color: #fff !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--blue-50, #F2F4F7) !important; color: var(--blue-900, #0B1F3A) !important; } /* ─── Native country / state dropdowns ──────────────────────── WooCommerce auto-applies select2 (selectWoo) to .country_select / .state_select. The widget look does not match the rest of the form, so suppress it visually and restore the raw