/* ========================================================== WonderLab CartFlow — Checkout Page Styles Extracted from the original custom-checkout snippet. Colors: #851625 / #E8A9B8 / #FFFBF1 / #2E2E2E ========================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --terra: #851625; --terra-dk: #5E0F1A; --terra-lt: #F7E8EC; --terra-mid: #E8A9B8; --terra-pale: #FDF4F6; --ink: #2E2E2E; --ink-mid: #5A4A4C; --ink-soft: #8C7678; --ink-faint: #C4AAAD; --ivory: #FFFBF1; --ivory-dark: #F7F0E6; --rule: rgba(133, 22, 37, 0.10); --rule-dark: rgba(133, 22, 37, 0.18); --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --red: #B83232; --green: #2E7D32; } /* v1.0.17: explicit Geologica brand font for the checkout (loaded via in template-checkout.php). The theme's font wasn't pulling through reliably, so we own the typography here. 16px base. */ body.wl-co-body, body.wl-co-body .woocommerce, body.wl-co-body .woocommerce-checkout { background: var(--ivory); color: var(--ink); font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Apply Geologica everywhere — sometimes WC's wrapper divs win against the body selector. Belt-and-braces. */ body.wl-co-body * { font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .wl-co-wrap { display: grid; grid-template-columns: 1fr 420px; min-height: 100vh; max-width: 1400px; margin: 0 auto; background: var(--ivory); } /* Desktop: hide the mobile-only Order Summary at the Review step. The right-side "Your Order" sidebar carries that information. */ .wlcf-mobile-only { display: none; } @media (max-width: 900px) { .wl-co-wrap { grid-template-columns: 1fr; min-height: auto; } /* Mobile: hide the sidebar entirely (it stacked awkwardly + took the whole first screen). The Order Summary block on Step 3 takes over. */ .wl-co-sidebar { display: none; } /* Show the mobile-only Order Summary block at the Review step. */ .wlcf-mobile-only { display: block; } } .wl-co-main { padding: 3rem 3.5rem 5rem; max-width: 640px; margin: 0 auto; width: 100%; } @media (max-width: 900px) { .wl-co-main { padding: 2rem 1.75rem 3rem; } } @media (max-width: 480px) { .wl-co-main { padding: 1.5rem 1.25rem 2.5rem; } } .wl-co-sidebar { background: var(--ivory-dark); border-left: 1px solid var(--rule-dark); padding: 3rem 2.5rem 3rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .wl-sidebar-title { color: var(--ink); margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-dark); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.2px; } .wl-s-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .wl-s-img-wrap { position: relative; flex-shrink: 0; } .wl-s-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule-dark); } .wl-s-img-placeholder { width: 60px; height: 60px; border-radius: var(--radius); background: var(--terra-lt); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .wl-s-qty-badge { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--terra); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border: 2px solid var(--ivory-dark); } .wl-s-name { color: var(--ink); font-weight: 500; margin-bottom: 4px; font-size: 0.9rem; } .wl-s-sku { color: var(--ink-faint); font-size: 0.7rem; text-transform: uppercase; } .wl-s-price { margin-left: auto; font-weight: 600; color: var(--ink); white-space: nowrap; padding-top: 2px; font-size: 0.9rem; } .wl-s-totals { margin-top: 1.5rem; } .wl-s-tot-row { display: flex; justify-content: space-between; color: var(--ink-soft); padding: 7px 0; font-size: 0.875rem; } /* v1.0.32: applied-coupon block (header + per-coupon rows) */ .wl-s-coupon-header { margin-top: 4px; } .wl-s-coupon-header > span:first-child { color: var(--ink); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; } .wl-s-coupon-row { padding-left: 8px; align-items: center; } .wl-s-coupon-label { color: var(--ink); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; } .wl-s-coupon-amount { color: var(--terra); font-weight: 600; } /* v1.0.32: Order Total row sits between the deductions block and shipping */ .wl-s-order-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); } .wl-s-order-total > span:first-child, .wl-s-order-total > span:last-child { color: var(--ink); font-weight: 700; font-size: 0.95rem; } .wl-s-grand { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 0; margin-top: 10px; border-top: 1px solid var(--rule-dark); font-weight: 600; font-size: 1.125rem; } .wl-s-grand-label { color: var(--ink); } .wl-s-grand-val { color: var(--terra); font-weight: 700; } /* v1.3.11: points-earned preview row, server-rendered by template-checkout.php just below Grand Total. Sits as a soft tinted card so it feels rewarding without competing with the Grand Total + Place Order CTA above and below it. */ .wl-s-points-preview { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; background: #fff5f6; border: 1px solid rgba(133, 22, 37, 0.15); border-radius: 8px; font-size: 0.875rem; line-height: 1.45; color: #4a3936; } .wl-s-points-preview .wl-s-pp-icon { flex-shrink: 0; color: var(--terra, #851625); font-size: 1.05rem; line-height: 1.4; } .wl-s-points-preview .wl-s-pp-text { flex: 1; min-width: 0; } .wl-s-points-preview .wl-s-pp-value { color: var(--terra, #851625); font-weight: 700; } .wl-s-points-preview .wl-s-pp-nudge { color: #555; font-size: 0.825rem; } .wl-s-points-preview .wl-s-pp-nudge a { color: var(--terra, #851625); font-weight: 600; text-decoration: underline; } .wl-s-points-preview .wl-s-pp-nudge a:hover, .wl-s-points-preview .wl-s-pp-nudge a:focus { text-decoration: none; } .wl-co-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 3rem; text-decoration: none; } .wl-co-brand img { height: 40px; width: auto; display: block; } @media (max-width: 480px) { .wl-co-brand img { height: 32px; } .wl-co-brand { margin-bottom: 2rem; } } /* ─── Progress bar ─── 2px track with a burgundy progress fill; numbered dots with a generous touch target and a soft ring on the active step. */ .wl-progress { display: flex; align-items: flex-start; margin-bottom: 2.75rem; position: relative; } .wl-progress::before { content: ''; position: absolute; top: 15px; left: 16px; right: 16px; height: 2px; background: var(--rule-dark); border-radius: 2px; } .wl-prog-fill { position: absolute; top: 15px; left: 16px; height: 2px; background: var(--terra); border-radius: 2px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .wl-prog-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; } .wl-prog-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; color: var(--ink-faint); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } .wl-prog-node:hover .wl-prog-dot { border-color: var(--terra-mid); } .wl-prog-node.active .wl-prog-dot { background: var(--terra); border-color: var(--terra); color: #fff; box-shadow: 0 0 0 5px rgba(133, 22, 37, 0.12); } /* v1.0.19: done step keeps its number (no checkmark) — cleaner look. */ .wl-prog-node.done .wl-prog-dot { background: var(--terra); border-color: var(--terra); color: #fff; } .wl-prog-label { font-weight: 600; text-transform: uppercase; color: var(--ink-faint); font-size: 0.7rem; letter-spacing: 0.12em; transition: color 0.25s ease; user-select: none; } .wl-prog-node.active .wl-prog-label { color: var(--terra); } .wl-prog-node.done .wl-prog-label { color: var(--ink); } @media (max-width: 480px) { .wl-progress { margin-bottom: 2rem; } .wl-prog-label { font-size: 0.65rem; letter-spacing: 0.08em; } .wl-prog-dot { width: 28px; height: 28px; font-size: 0.75rem; } .wl-progress::before, .wl-prog-fill { top: 13px; } } .wl-panel { display: none; } .wl-panel.active { display: block; animation: wlReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes wlReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .wl-sec-head { margin-bottom: 2rem; } .wl-sec-eyebrow { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 10px; font-size: 0.72rem; } .wl-sec-title { color: var(--ink); font-size: 1.65rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; margin: 0; } @media (max-width: 480px) { .wl-sec-title { font-size: 1.4rem; } .wl-sec-eyebrow { font-size: 0.68rem; } .wl-sec-head { margin-bottom: 1.5rem; } } .wl-sec-title em { color: var(--terra); font-style: italic; font-weight: 400; } /* =========================================== */ /* WOOCOMMERCE FORM FIELD STYLES */ /* =========================================== */ /* v1.0.17: consistent field styling across all checkout inputs. Labels are clean lowercase weight-600 (no scream uppercase). Inputs are 44px tall on mobile (touch-friendly), 42px on desktop, with a 2px-tinted focus ring matching the brand. */ .woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row { margin-bottom: 1.1rem !important; padding: 0 !important; } .form-row-first { width: calc(50% - 8px) !important; float: left !important; margin-right: 16px !important; } .form-row-last { width: calc(50% - 8px) !important; float: left !important; } .woocommerce-billing-fields .clear, .woocommerce-shipping-fields .clear { clear: both !important; } .woocommerce-billing-fields .form-row label, .woocommerce-shipping-fields .form-row label, .wl-co-main label { display: block !important; font-weight: 600 !important; text-transform: none !important; color: var(--ink) !important; margin-bottom: 6px !important; font-size: 0.82rem !important; letter-spacing: 0 !important; line-height: 1.4 !important; } .woocommerce-billing-fields .form-row label .required, .woocommerce-shipping-fields .form-row label .required, .wl-co-main label .required { color: var(--red) !important; margin-left: 3px !important; font-weight: 700; } .woocommerce-billing-fields .form-row input.input-text, .woocommerce-shipping-fields .form-row input.input-text, .woocommerce-billing-fields .form-row input[type="text"], .woocommerce-billing-fields .form-row input[type="email"], .woocommerce-billing-fields .form-row input[type="tel"], .woocommerce-shipping-fields .form-row input[type="text"], .woocommerce-shipping-fields .form-row input[type="email"], .woocommerce-shipping-fields .form-row input[type="tel"], .wl-co-main input.input-text, .wl-co-main input[type="text"], .wl-co-main input[type="email"], .wl-co-main input[type="tel"] { width: 100% !important; height: 44px; padding: 0 14px !important; background: #fff !important; border: 1px solid var(--rule-dark) !important; border-radius: var(--radius) !important; color: var(--ink) !important; font-family: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.95rem; line-height: 1.4; transition: border-color 0.2s, box-shadow 0.2s !important; box-sizing: border-box !important; -webkit-appearance: none; appearance: none; } .woocommerce-billing-fields .form-row input:hover, .woocommerce-shipping-fields .form-row input:hover { border-color: var(--terra-mid) !important; } .woocommerce-billing-fields .form-row input:focus, .woocommerce-shipping-fields .form-row input:focus, .wl-co-main input:focus { border-color: var(--terra) !important; box-shadow: 0 0 0 3px rgba(133, 22, 37, 0.12) !important; outline: none !important; } /* --------------------------------------------------------------------- * intl-tel-input integration (v1.4.9+). * * Account Suite v1.15.15 lights up the country-code widget on the * checkout phone input via the `was_needs_phone_input` filter. The * library wraps the input in `
` * and needs left-padding inside the input for the country chip — but * our generic `.wl-co-main input { padding: 0 14px !important }` above * blows that away, so the dial code overlaps the typed number. * * Mirror Account Suite's `.wl-acc-card .iti …` skin, scoped to the * checkout container so we don't restyle iti instances on any other * page that might happen to render inside .wl-co-main. * ------------------------------------------------------------------ */ .wl-co-main .form-row .iti { display: block; width: 100%; } .wl-co-main .form-row .iti input.iti__tel-input, .wl-co-main .form-row .iti input[type="tel"][data-was-phone] { width: 100% !important; height: 44px !important; padding-left: 92px !important; /* room for the flag + dial code chip */ padding-right: 14px !important; border: 1px solid var(--rule-dark) !important; border-radius: var(--radius) !important; background: #fff !important; } .wl-co-main .iti__selected-country { height: 44px !important; } .wl-co-main .iti__dropdown-content { border-radius: var(--radius) !important; border: 1px solid var(--rule-dark) !important; box-shadow: 0 8px 24px -8px rgba(133, 22, 37, 0.20) !important; overflow: hidden; } .wl-co-main .iti__country.iti__highlight, .wl-co-main .iti__country:hover { background-color: rgba(133, 22, 37, 0.06) !important; } .woocommerce-billing-fields .form-row select, .woocommerce-shipping-fields .form-row select { width: 100% !important; height: 44px; padding: 0 36px 0 14px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23851625' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center; background-size: 10px 7px; border: 1px solid var(--rule-dark) !important; border-radius: var(--radius) !important; color: var(--ink) !important; font-family: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.95rem; cursor: pointer !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box !important; } .woocommerce-billing-fields .form-row select:hover, .woocommerce-shipping-fields .form-row select:hover { border-color: var(--terra-mid) !important; } .woocommerce-billing-fields .form-row select:focus, .woocommerce-shipping-fields .form-row select:focus { border-color: var(--terra) !important; box-shadow: 0 0 0 3px rgba(133, 22, 37, 0.12) !important; outline: none !important; } /* Stack 2-col form rows on mobile so fields are full-width + tappable. */ @media (max-width: 600px) { .form-row-first, .form-row-last { width: 100% !important; float: none !important; margin-right: 0 !important; } } .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: auto !important; padding: 13px 16px !important; background: #fff !important; border: 1px solid rgba(133, 22, 37, 0.2) !important; border-radius: var(--radius) !important; } .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--terra) !important; box-shadow: 0 0 0 3px rgba(133, 22, 37, 0.1) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink) !important; font-size: 0.95rem; line-height: 1.4 !important; padding: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; right: 12px !important; } .select2-dropdown { border: 1px solid rgba(133, 22, 37, 0.2) !important; border-radius: var(--radius) !important; background: #fff !important; } .select2-search--dropdown .select2-search__field { border: 1px solid rgba(133, 22, 37, 0.2) !important; border-radius: var(--radius-sm) !important; padding: 8px 12px !important; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--terra) !important; outline: none !important; } .select2-results__option { padding: 10px 14px !important; font-size: 0.9rem; color: var(--ink) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--terra-pale) !important; color: var(--terra) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--terra-lt) !important; color: var(--terra) !important; } .woocommerce-invalid input.input-text, .woocommerce-invalid select { border-color: var(--red) !important; } .woocommerce-validated input.input-text, .woocommerce-validated select { border-color: var(--green) !important; } /* =========================================== */ /* SHIPPING METHODS STYLES */ /* =========================================== */ .wl-shipping-methods { margin-top: 2rem; } .woocommerce-shipping-methods { list-style: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-shipping-methods li { margin-bottom: 12px !important; list-style: none !important; } .woocommerce-shipping-methods input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } .woocommerce-shipping-methods li label { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; border: 1.5px solid var(--rule-dark) !important; border-radius: var(--radius-lg) !important; cursor: pointer !important; background: #fff !important; transition: all 0.22s ease !important; font-size: 0.92rem; color: var(--ink) !important; } .woocommerce-shipping-methods li label::before { content: '' !important; display: inline-flex !important; flex-shrink: 0 !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 2px solid var(--terra-mid) !important; background: #fff !important; margin-right: 12px !important; transition: all 0.22s ease !important; } .woocommerce-shipping-methods li label:hover { border-color: var(--terra-mid) !important; background: var(--terra-pale) !important; } .woocommerce-shipping-methods li.wl-ship-selected label { border-color: var(--terra) !important; background: var(--terra-pale) !important; box-shadow: 0 4px 18px rgba(133, 22, 37, 0.1) !important; } .woocommerce-shipping-methods li.wl-ship-selected label::before { border-color: var(--terra) !important; background: var(--terra) !important; box-shadow: inset 0 0 0 3px #fff !important; } .wl-ship-price-badge { margin-left: auto !important; font-weight: 600 !important; color: var(--terra) !important; font-size: 0.88rem; white-space: nowrap !important; } /* Shipping message blocks (replaces inline error styles) */ .wlcf-ship-msg { padding: 20px; text-align: center; border-radius: 8px; } .wlcf-ship-msg-error { background: #fef5f5; border-left: 3px solid var(--red); } .wlcf-ship-msg-title { color: var(--red); margin-bottom: 8px; } .wlcf-ship-msg p { color: #666; font-size: 0.85rem; margin: 0; } /* =========================================== */ /* BUTTONS AND ACTIONS */ /* =========================================== */ /* v1.0.17: cleaner button styling — primary is a solid burgundy pill with a subtle lift; back is text-link style. Touch-friendly height (48px). */ .wl-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; gap: 16px; flex-wrap: wrap; } .wl-btn-back { color: var(--ink-soft); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; padding: 12px 4px; font-size: 0.9rem; font-family: inherit; font-weight: 500; line-height: 1; } .wl-btn-back:hover, .wl-btn-back:focus { color: var(--terra); } .wl-btn-next { color: #fff !important; background: var(--terra) !important; border: 1px solid var(--terra) !important; border-radius: 999px !important; padding: 14px 36px !important; min-height: 48px; cursor: pointer !important; text-transform: none !important; font-weight: 600 !important; letter-spacing: 0 !important; font-size: 0.95rem !important; font-family: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif !important; line-height: 1.2; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important; -webkit-tap-highlight-color: transparent; } .wl-btn-next:hover, .wl-btn-next:focus { background: var(--terra-dk) !important; border-color: var(--terra-dk) !important; box-shadow: 0 6px 20px rgba(133, 22, 37, 0.22) !important; transform: translateY(-1px) !important; outline: none !important; } .wl-btn-next:active { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(133, 22, 37, 0.2) !important; } .wl-btn-next:disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } @media (max-width: 480px) { .wl-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; } .wl-btn-next { width: 100%; padding: 14px 24px !important; } .wl-btn-back { text-align: center; padding: 10px; } } /* =========================================== */ /* AUTOFILL BAR & SECTION DIVIDERS */ /* =========================================== */ .wl-autofill-bar { display: flex; align-items: center; justify-content: space-between; background: var(--terra-pale); border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 1.75rem; gap: 12px; flex-wrap: wrap; } .wl-autofill-text { color: var(--ink-soft); font-size: 0.85rem; } .wl-autofill-btn { background: var(--terra); color: #fff; border: none; border-radius: 50px; padding: 8px 18px; font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.2s; white-space: nowrap; } .wl-autofill-btn:hover { background: var(--terra-dk); } /* Section divider used in WC form to delineate Billing / Shipping address. */ .wl-section-divider { display: flex; align-items: center; margin: 1.5rem 0 1.25rem; gap: 14px; } .wl-section-divider::before, .wl-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule-dark); } .wl-section-divider span { color: var(--ink); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } /* Ship-to-same toggle — generous touch target, brand-tinted checkbox. v1.0.19: bumped selector specificity (body.wl-co-body prefix) + added explicit alignment so the checkbox + label sit on the same baseline even when other plugins or the theme inject their own form-row styling. */ body.wl-co-body .wl-ship-toggle-wrap { margin: 0 0 1.5rem; background: var(--terra-pale); border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: 14px 16px; } body.wl-co-body .wl-toggle-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; padding: 0; line-height: 1; } body.wl-co-body .wl-toggle-label input[type="checkbox"], body.wl-co-body #wlShipSameBilling { width: 18px; height: 18px; accent-color: var(--terra); cursor: pointer; flex-shrink: 0; margin: 0; padding: 0; vertical-align: middle; /* Tiny baseline nudge so the checkbox visually centres against the label's x-height (which sits slightly above the line's vertical midpoint in most fonts, including Geologica). */ position: relative; top: 1px; } body.wl-co-body .wl-toggle-text { color: var(--ink); font-size: 0.92rem; font-weight: 500; line-height: 1.4; padding: 0; vertical-align: middle; margin-left: 8px !important; } .wl-field-group.wl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 1.25rem; } .wl-field-group.wl-two-col .form-row { margin-bottom: 0 !important; float: none !important; width: 100% !important; } @media (max-width: 500px) { .wl-field-group.wl-two-col { grid-template-columns: 1fr; } } /* =========================================== */ /* REVIEW PANEL STYLES */ /* =========================================== */ /* v1.0.17: cleaner review cards — softer background, larger heading, readable rows with consistent spacing. */ .wl-rv-block { background: #fff; border: 1px solid var(--rule-dark); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.25rem; margin-bottom: 1rem; position: relative; } .wl-rv-edit { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--terra); text-decoration: none; cursor: pointer; background: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; font-family: inherit; font-weight: 600; transition: background 0.2s, border-color 0.2s; } .wl-rv-edit:hover, .wl-rv-edit:focus { background: var(--terra-pale); border-color: var(--rule-dark); color: var(--terra-dk); outline: none; } .wl-rv-heading { text-transform: none; color: var(--ink); margin: 0 0 1rem; font-weight: 700; letter-spacing: -0.2px; font-size: 1rem; } .wl-rv-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); gap: 16px; } .wl-rv-row:last-child { border-bottom: none; } /* Previously `flex-shrink: 0` — long product names ("Anti-Aging Hyaluronic Acid Serum 30ml × 2") couldn't shrink and pushed the price column off-screen on phones. Allow shrinking + force a shrinkable min-width so flex respects the wrap. The label stays on the left, price on the right with text wrapping inside its column. */ .wl-rv-key { color: var(--ink-soft); font-weight: 500; font-size: 0.85rem; flex: 1 1 auto; min-width: 0; word-break: break-word; line-height: 1.4; } .wl-rv-val { color: var(--ink); text-align: right; font-weight: 500; font-size: 0.9rem; word-break: break-word; flex: 0 0 auto; max-width: 50%; } .wl-rv-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 0; margin-top: 14px; border-top: 1px solid var(--rule-dark); font-weight: 700; font-size: 1.15rem; color: var(--terra); gap: 12px; } /* Narrow screens — the mobile-only Order Summary block under Step 3 gets cramped fast. Drop the block padding, shrink the row gap, and tighten the heading so item lines fit cleanly. */ @media (max-width: 600px) { .wl-rv-block { padding: 1.25rem 1.1rem 1rem; } .wl-rv-heading { font-size: 0.95rem; margin-bottom: 0.75rem; } .wl-rv-row { gap: 10px; padding: 8px 0; } .wl-rv-key { font-size: 0.82rem; } .wl-rv-val { font-size: 0.85rem; } .wl-rv-total-row { font-size: 1.05rem; padding-top: 12px; margin-top: 10px; } .wl-rv-edit { top: 1rem; right: 1rem; padding: 3px 10px; font-size: 0.72rem; } } /* Even narrower — single-line item rows finally stack so very long product names get full width before the price drops onto its own line. */ @media (max-width: 380px) { .wlcf-mobile-only .wl-rv-row { flex-direction: column; align-items: stretch; gap: 2px; } .wlcf-mobile-only .wl-rv-row .wl-rv-val { text-align: left; max-width: 100%; font-weight: 600; } } /* =========================================== */ /* UTILITY AND MISC STYLES */ /* =========================================== */ .wl-back-to-cart { text-align: center; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); } .wl-back-to-cart a { color: var(--ink-soft); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: color 0.2s; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; } .wl-back-to-cart a:hover, .wl-back-to-cart a:focus { color: var(--terra); } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, .woocommerce-checkout-payment, .place-order, #order_review_heading, .woocommerce-terms-and-conditions-wrapper, #ship-to-different-address { display: none !important; } .woocommerce-shipping-fields { display: block !important; } .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper { display: none !important; } /* ─── Inline field error (v1.2.0) ─── Shown directly below a required / invalid field so the customer knows exactly what to fix, without needing to scroll up to a global notice. */ .wlcf-field-error { margin: 4px 0 0 !important; padding: 0 !important; color: #b71c1c !important; font-size: 0.78rem !important; font-weight: 500 !important; line-height: 1.35 !important; background: transparent !important; border: none !important; } /* v1.2.5: live character counter for address-line fields. Hidden until customer approaches the 50-char cap, then surfaces in the bottom-right of the field row. Color escalates to brand red at the cap so it's clear they've hit the limit. */ .wlcf-char-counter { display: block; text-align: right; margin-top: 4px; font-size: 0.72rem; font-weight: 500; color: #999; transition: color 0.2s ease; } .wlcf-char-counter.is-hidden { display: none; } .wlcf-char-counter.is-near-limit { color: #b56304; } .wlcf-char-counter.is-at-limit { color: #b71c1c; font-weight: 600; } .form-row.wlcf-has-error input, .form-row.wlcf-has-error select, .form-row.wlcf-has-error textarea, .wlcf-has-error input, .wlcf-has-error select { border-color: #b71c1c !important; box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.10) !important; } #wl_pay_error { display: none; margin-top: 1.25rem; padding: 14px 16px; background: #fdf0f0; border: 1px solid #f5b8b0; border-left: 4px solid var(--red); border-radius: var(--radius); color: #8a2020; font-size: 0.9rem; line-height: 1.5; } #wl_pay_error .wlcf-error-box { margin: 0; } .wl-loading { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } .wl-loading-dark { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--terra-mid); border-top-color: var(--terra); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .wl-co-sidebar::-webkit-scrollbar { width: 3px; } .wl-co-sidebar::-webkit-scrollbar-track { background: transparent; } .wl-co-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; } .wl-co-sidebar:hover::-webkit-scrollbar-thumb { background: var(--terra-mid); } /* ========================================================== SHIPPING METHOD LIST (v1.0.2+) Previously inlined in PHP via style="..." attributes; now owned by this stylesheet so the markup stays semantic. ========================================================== */ .wlcf-ship-list { list-style: none; margin: 0; padding: 0; } .wlcf-ship-option { list-style: none; margin-bottom: 12px; } .wlcf-ship-label { display: flex; align-items: center; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wlcf-ship-label:hover { border-color: rgba(133, 22, 37, 0.4); } .wl-ship-selected .wlcf-ship-label, .wlcf-ship-radio:checked ~ * .wlcf-ship-label, .wlcf-ship-option:has(.wlcf-ship-radio:checked) .wlcf-ship-label { border-color: #851625; box-shadow: 0 0 0 3px rgba(133, 22, 37, 0.08); } .wlcf-ship-radio { margin-right: 12px; } .wlcf-ship-name { flex: 1; } .wlcf-ship-cost { font-weight: 600; color: #2E2E2E; } /* Shipping status messages (info / error) */ .wlcf-ship-msg { padding: 16px; border-radius: 8px; background: #fff5f6; border: 1px solid rgba(133, 22, 37, 0.15); color: #2E2E2E; } .wlcf-ship-msg-error { background: #fdf0f0; border-color: #e0bebe; } .wlcf-ship-msg-title { font-weight: 600; margin-bottom: 4px; } .wlcf-ship-loading { text-align: center; padding: 40px; } .wlcf-ship-loading p { margin-top: 15px; color: var(--ink-soft); } /* ========================================================== PAYMENT METHOD PICKER (v1.0.3+) Shown on the Review step ONLY when WC has > 1 enabled gateway. ========================================================== */ .wlcf-payment-list { list-style: none; margin: 0; padding: 0; } .wlcf-payment-option { margin-bottom: 10px; list-style: none; } .wlcf-payment-option:last-child { margin-bottom: 0; } .wlcf-payment-label { display: flex; align-items: center; padding: 14px 16px; border: 1px solid var(--rule-dark); border-radius: var(--radius); cursor: pointer; background: #fff; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; min-height: 48px; } .wlcf-payment-label:hover { border-color: var(--terra-mid); background: var(--terra-pale); } .wlcf-payment-option:has(.wlcf-payment-radio:checked) .wlcf-payment-label { border-color: var(--terra); background: var(--terra-pale); box-shadow: 0 0 0 3px rgba(133, 22, 37, 0.10); } .wlcf-payment-radio { margin: 0 12px 0 0; width: 18px; height: 18px; accent-color: var(--terra); cursor: pointer; flex-shrink: 0; } .wlcf-payment-name { flex: 1; font-size: 0.95rem; font-weight: 500; color: var(--ink); } /* ========================================================== ERROR BOX (v1.0.3+) — was previously inlined in JS ========================================================== */ .wlcf-error-box { padding: 12px 16px; background: #fdf0f0; border-left: 3px solid #B83232; border-radius: 4px; } /* Site-name fallback when there's no custom logo (v1.0.3+) */ .wl-co-brand-text { font-weight: 700; font-size: 1.25rem; color: var(--terra, #851625); }