/* Checkout restyle, from QE_FINAL_HANDOFF/14-full-checkout-page.html, 14b-checkout-terms-scroll-accept-component.html, and the 14c Ikhlaas gold variant (body.qe-ikhlaas, set server-side when cart contains an Ikhlaas item). Field SET was untouched here (restyle only) until 2026-08-17 - the 6-field simplification now lives in inc/checkout-simplified-fields.php. Selector scoped to body.woocommerce-checkout, 2026-08-19 (mobile audit) - WooCommerce assigns the "woocommerce-checkout" class to BOTH AND the checkout

, so the old bare ".woocommerce-checkout" selector applied this exact padding twice in the same ancestor chain (body, then form again) - see page-checkout.php for the other half of this fix (a third, unrelated padding layer from the theme's generic fallback template, which had no dedicated checkout template to override it). */ body.woocommerce-checkout{ max-width:1100px; margin:0 auto; padding:32px 6vw 60px; } .woocommerce-checkout h3{ font-family:'Fraunces',serif; } .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order-table{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 8px 24px rgba(20,20,15,0.06); } body.qe-ikhlaas .woocommerce-checkout #order_review{ border:2px solid var(--gold); box-shadow:0 12px 30px rgba(217,143,41,0.18); } .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{ color:var(--green); font-family:'Fraunces',serif; font-weight:700; } body.qe-ikhlaas .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{ color:var(--gold); } #place_order{ background:var(--gold); color:var(--black); border:none; padding:14px; border-radius:12px; font-weight:700; font-size:0.94rem; width:100%; cursor:not-allowed; opacity:0.5; } #place_order:not(:disabled){ opacity:1; cursor:pointer; } body.qe-ikhlaas #place_order:not(:disabled){ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); } /* Terms scroll-lock block */ .qe-terms-block{ margin-top:22px; } .qe-terms-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .qe-terms-head h3{ font-size:0.86rem; font-weight:600; margin:0; } .qe-terms-status{ font-size:0.7rem; color:#C0392B; font-weight:600; } .qe-terms-status.ok{ color:var(--green); } .qe-terms-scroll{ height:150px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:0.72rem; line-height:1.65; color:#5C6A62; background:#FCFBF8; } /* Payment-method description text (WooCommerce core .payment_box, e.g. NEFT/UPI instructions) and the terms-scroll box above both sit tall enough on mobile that their text can scroll into the same fixed screen zone the floating WhatsApp button occupies (.qe-whatsapp-float in qe-header-footer.css: right:16px, width:48px, bottom:104px, height:48px on mobile) - confirmed via screenshot during the 2026-08-19 mobile audit. Same fix applied to the matching product-page CTA button in qe-product.css. 72px = button width (48) + its right offset (16) + an 8px buffer, so text never runs under it regardless of scroll position. */ @media (max-width:760px){ .payment_box{ padding-right:72px; } .qe-terms-scroll{ padding-right:72px; } } .qe-terms-scroll p{ margin-bottom:10px; } .qe-scroll-hint{ font-size:0.68rem; color:#8A968E; margin-top:6px; } .qe-scroll-hint.hidden{ display:none; } .qe-agree-row{ display:flex; align-items:flex-start; gap:9px; margin-top:14px; opacity:0.4; pointer-events:none; transition:opacity .25s; } .qe-agree-row.enabled{ opacity:1; pointer-events:auto; } .qe-agree-row input{ margin-top:2px; width:16px; height:16px; accent-color:var(--green); } .qe-agree-row label{ font-size:0.78rem; color:#4A5750; line-height:1.5; } .qe-agree-row a{ color:var(--green); font-weight:600; } body.qe-ikhlaas .qe-agree-row a{ color:var(--gold); } /* Payment method list - matches the 3-option requirement (Airpay / UPI / NEFT) */ ul.wc_payment_methods{ list-style:none; margin:0 0 16px; padding:0; } ul.wc_payment_methods li{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px; } ul.wc_payment_methods li label{ font-weight:600; font-size:0.9rem; }