/* ===================================================================== * NeoYug checkout — classic [woocommerce_checkout] shell + components. * Brand: purple #8D22C3, orange #E96F46, deep purple #261A48, cream #FAF9F6. * Body/labels Poppins. Sentence case, no em dashes. The theme styles the * block checkout, not the classic one, so this file owns the classic look. * ===================================================================== */ :root{ --nyc-purple:#8D22C3; --nyc-orange:#E96F46; --nyc-deep:#261A48; --nyc-cream:#FAF9F6; --nyc-line:rgba(38,26,72,.12); --nyc-radius:14px; --nyc-field-h:48px; --nyc-font:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } /* ---------- Shell ---------- */ .woocommerce-checkout .woocommerce{font-family:var(--nyc-font);color:var(--nyc-deep);} .woocommerce-checkout form.checkout{margin:0;} /* Section headings: Billing details / Your order / Additional information */ .woocommerce-checkout #customer_details h3, .woocommerce-checkout .woocommerce-additional-fields h3, .woocommerce-checkout #order_review_heading{ font-family:var(--nyc-font); font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em; color:var(--nyc-deep);margin:0 0 18px;padding:0;border:0; } /* ---------- Form rows, labels, inputs ---------- */ .woocommerce-checkout .form-row{margin:0 0 16px;padding:0;} .woocommerce-checkout .form-row label{ display:block;font-size:13px;font-weight:500;color:var(--nyc-deep); opacity:.85;margin:0 0 6px;line-height:1.3;text-align:left; } .woocommerce-checkout .form-row .required{color:var(--nyc-orange);text-decoration:none;border:0;} .woocommerce-checkout .form-row .optional{opacity:.45;font-weight:400;} .woocommerce-checkout .form-row .description{font-size:12px;opacity:.6;margin:6px 0 0;} .woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout .select2-selection{ width:100%;height:var(--nyc-field-h);padding:0 14px; border:1px solid var(--nyc-line);border-radius:12px;background:#fff; font-size:15px;font-family:inherit;color:var(--nyc-deep); transition:border-color .15s ease,box-shadow .15s ease; } .woocommerce-checkout textarea.input-text{height:auto;min-height:92px;padding:12px 14px;line-height:1.5;} .woocommerce-checkout .input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout .select2-container--focus .select2-selection, .woocommerce-checkout .select2-container--open .select2-selection{ outline:0;border-color:var(--nyc-purple); box-shadow:0 0 0 3px rgba(141,34,195,.12); } .woocommerce-checkout .input-text::placeholder{color:rgba(38,26,72,.38);} /* select2 country/state pickers, aligned to our inputs */ .woocommerce-checkout .select2-container .select2-selection--single{height:var(--nyc-field-h);display:flex;align-items:center;} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:var(--nyc-field-h);padding:0;color:var(--nyc-deep);} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:8px;} /* ---------- Order review card ---------- */ .woocommerce-checkout #order_review{ background:#fff;border:1px solid var(--nyc-line);border-radius:16px; padding:24px 24px 10px;position:sticky;top:24px; box-shadow:0 1px 2px rgba(38,26,72,.04),0 10px 28px rgba(38,26,72,.06); } .woocommerce-checkout .woocommerce-checkout-review-order-table{ width:100%;border:0;border-collapse:collapse;font-size:14px; /* !important, and only on the top margin, for a specific reason: this rule's plain `margin:0` was losing to the theme's `.woocommerce table.shop_table` (0,2,1 against our 0,2,0 - the extra element wins), which sets 1.5em = 28.5px at Twenty Twenty's 19px base. Added to the card's own 24px padding, that put 52px of nothing between the top of the order card and the course. Measured, not guessed: card top y=272, item top y=326. */ margin:0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table th, .woocommerce-checkout .woocommerce-checkout-review-order-table td{ border:0;padding:12px 0;vertical-align:middle; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead{display:none;} .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item{border-bottom:1px solid var(--nyc-line);} .woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{padding-right:14px;color:var(--nyc-deep);line-height:1.45;} .woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity{opacity:.55;} .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td, .woocommerce-checkout .woocommerce-checkout-review-order-table .amount{ text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums; } .woocommerce-checkout .cart-subtotal th, .woocommerce-checkout .order-total th{text-align:left;font-weight:500;} .woocommerce-checkout .order-total th, .woocommerce-checkout .order-total td{padding-top:16px;font-size:18px;font-weight:600;} .woocommerce-checkout .order-total .amount{color:var(--nyc-deep);} /* ---------- Payment ---------- */ .woocommerce-checkout #payment{background:transparent;border:0;border-radius:0;margin-top:6px;} .woocommerce-checkout #payment ul.payment_methods{border:0;padding:10px 0 0;margin:0;list-style:none;} .woocommerce-checkout #payment ul.payment_methods li{margin:0 0 8px;padding:0;list-style:none;} .woocommerce-checkout #payment ul.payment_methods li label{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--nyc-deep);} .woocommerce-checkout #payment ul.payment_methods li img{margin-left:auto;} /* De-brand the payment step. The processor blurb (Razorpay's "Pay securely by Credit or Debit card..." and the Stripe redirect note) lives in the payment_box; both our gateways are redirect/modal and collect no inline card fields, so hiding the box removes the blurb with nothing lost. If a future gateway needs on-page fields, scope this rule to razorpay/nyc_stripe or remove it. */ .woocommerce-checkout #payment div.payment_box{display:none !important;} /* When only ONE gateway is routed (the usual case), the method row is pure noise: there is nothing to choose. Hide its label, radio and badge and let the pay button stand alone. The radio stays in the DOM and checked, so the payment method still posts. A "both" route has 2+ list items, :only-child no longer matches, and the (un-branded) labels return so the buyer can pick. */ .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:only-child > label{display:none !important;} .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:only-child > input[type=radio]{position:absolute;left:-9999px;} .woocommerce-checkout #payment ul.payment_methods:only-child li:only-child{margin-bottom:0;} .woocommerce-checkout #payment .place-order{padding:18px 0 0;} .woocommerce-checkout #payment .woocommerce-privacy-policy-text{font-size:12px;opacity:.7;line-height:1.55;margin:0 0 14px;} .woocommerce-checkout #payment .woocommerce-privacy-policy-text a{color:var(--nyc-purple);} /* ---------- Coupon / login toggles / notices ---------- */ .woocommerce-checkout .woocommerce-form-login-toggle, .woocommerce-checkout .woocommerce-form-coupon-toggle{margin:0 0 18px;} .woocommerce-checkout .woocommerce-info{ background:var(--nyc-cream);border-top:0;border-radius:10px;padding:12px 14px; font-size:13px;color:var(--nyc-deep);box-shadow:none; } .woocommerce-checkout .woocommerce-info::before{color:var(--nyc-purple);} .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-NoticeGroup{border-radius:10px;} /* ===================================================================== * Distraction-free checkout (v1.3.2, order-pay added v1.8.4) * Remove the site header/nav and the page title on the checkout FORM page * (body.nyc-checkout-form) and on the order-pay endpoint * (body.woocommerce-order-pay, a native WooCommerce class), on desktop and * phone, so both pages focus on completing the order and share one look. The * order-pay page gets the branded logo bar back via before_woocommerce_pay in * PHP. The order-received / thank-you endpoint is left untouched. To bring any * of these back, delete the relevant line. * ===================================================================== */ body.nyc-checkout-form #masthead, body.nyc-checkout-form .ehf-header, body.nyc-checkout-form .elementor-location-header, body.nyc-checkout-form [data-elementor-type="header"], body.nyc-checkout-form .entry-header, body.nyc-checkout-form .entry-title, body.woocommerce-order-pay #masthead, body.woocommerce-order-pay .ehf-header, body.woocommerce-order-pay .elementor-location-header, body.woocommerce-order-pay [data-elementor-type="header"], body.woocommerce-order-pay .entry-header, body.woocommerce-order-pay .entry-title{display:none !important;} /* The footer goes too (v1.9.20). Site nav, social links and policy columns under the pay button are exits from a page whose only job is to complete the order - and on a phone they were the last thing after the form. The policy links a buyer might genuinely want (refunds, T&Cs) belong in the order confirmation and the receipt email, not one tap from Complete Order. The thank-you page keeps its footer. */ body.nyc-checkout-form #colophon, body.nyc-checkout-form #site-footer, body.nyc-checkout-form .site-footer, body.nyc-checkout-form .footer-nav-widgets-wrapper, body.nyc-checkout-form .ehf-footer, body.nyc-checkout-form .elementor-location-footer, body.nyc-checkout-form [data-elementor-type="footer"], body.woocommerce-order-pay #colophon, body.woocommerce-order-pay #site-footer, body.woocommerce-order-pay .site-footer, body.woocommerce-order-pay .footer-nav-widgets-wrapper, body.woocommerce-order-pay .ehf-footer, body.woocommerce-order-pay .elementor-location-footer, body.woocommerce-order-pay [data-elementor-type="footer"]{display:none !important;} /* Reclaim the space the header reserved so the form sits near the top. */ body.nyc-checkout-form #site-content, body.woocommerce-order-pay #site-content{padding-top:40px !important;margin-top:0 !important;} /* The 100px above the logo, found by walking the ancestors rather than guessing at it: the .woocommerce wrapper carries a 50px margin-top AND a 50px padding-top from the theme's block spacing, and #site-content's 4px sat on top. That is the 104px the lockup started at. Neither .post-inner nor #site-content was ever holding it. (v1.9.24) */ body.nyc-checkout-form .woocommerce, body.woocommerce-order-pay .woocommerce{ margin-top:0 !important;padding-top:0 !important; } body.nyc-checkout-form .wp-block-group.alignfull, body.woocommerce-order-pay .wp-block-group.alignfull{margin-top:0 !important;} /* Kept from 1.9.23: Twenty Twenty also reserves top padding on .post-inner for the page title, which we hide. Hiding an element does not reclaim padding on its parent. This was a real find, just not the one that mattered here. */ body.nyc-checkout-form .post-inner, body.woocommerce-order-pay .post-inner{padding-top:0 !important;} body.nyc-checkout-form .entry-content, body.woocommerce-order-pay .entry-content{margin-top:0 !important;} /* Elementor containers add their own block padding on top of that. */ body.nyc-checkout-form .e-con > .e-con-inner:first-child, body.nyc-checkout-form .elementor-widget-container:first-child{padding-top:0 !important;} /* ---------- Responsive: stack on small screens ---------- */ @media (max-width:768px){ .woocommerce-checkout #order_review{ position:static;margin-top:20px;padding:16px 0 0; border:0 !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review{width:100%;float:none;} .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading{font-size:18px;} /* The delivery trust item and the subtotal are now hidden for every viewport (see the rules above the trust strip block), so the phone-only copies that used to live here have gone. */ /* The total is already in the sticky bar, permanently, two thumb-widths from the pay button. A second copy up here is just more scrolling. IMPORTANT: hidden, never removed. checkout.js reads this row to fill the sticky bar (sticky()) and the mini summary (syncMiniTotal()); a hidden node still has its text, a deleted one does not. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total{display:none;} /* The discount is relocated under the coupon panel by checkout.js, where the buyer just typed the code. Same rule as above: hidden, not removed, so the relocated copy always has a source to read. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount{display:none;} /* Social proof is gone on phones. It earns its place on a cold landing page; at checkout the buyer has already decided, and it was costing four lines directly above the pay bar. The trust strip stays - that one is about the transaction, not the brand. */ .woocommerce-checkout .nyc-social{display:none;} /* Discount, relocated under the coupon. Built by checkout.js from the row WooCommerce rendered, so the figure has one source. */ .nyc-coupon-discount{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin:8px 0 0;padding:10px 12px;border-radius:12px; background:rgba(15,110,86,.07);border:1px solid rgba(15,110,86,.18); font-size:13px;font-weight:500;color:#0F6E56; } .nyc-coupon-discount > span:first-child{flex:1 1 auto;min-width:0;} .nyc-coupon-discount .nyc-cd-amt{ font-family:var(--nyc-font);font-weight:700;font-size:15px;white-space:nowrap; } /* WooCommerce's own remove link, CLONED in here by relocateDiscount(). It keeps a.woocommerce-remove-coupon + data-coupon, and WooCommerce delegates its remove handler off document.body, so the clone behaves exactly like the original. This used to be `display:none` — which, together with the source .cart-discount row being hidden and the whole review table being hidden below, left phone buyers with NO way to take a coupon off. */ .nyc-coupon-discount .nyc-cd-remove{ flex:0 0 auto;font-size:12px;font-weight:600;white-space:nowrap; color:#0F6E56;opacity:.7;text-decoration:underline; } .nyc-coupon-discount .nyc-cd-remove:hover, .nyc-coupon-discount .nyc-cd-remove:focus{opacity:1;color:var(--nyc-orange);} /* ---- Equal gutters, and a logo that is actually centred (v1.9.18) ---- These were one bug, not two. The old rule gave the checkout 14px MARGINS and a max-width, but a parent's own padding pushed the box wider than the viewport, so it bled off the right edge: the left gutter looked right, the right gutter was gone, and everything centred inside that box - the logo included - sat left of the screen's true centre. Padding on a full-width box cannot do that, because the padding is inside the width. */ body.woocommerce-checkout #site-content .entry-content .woocommerce{ width:100% !important;max-width:100% !important; margin-left:0 !important;margin-right:0 !important; padding-left:14px !important;padding-right:14px !important; box-sizing:border-box !important; } /* Nothing on the checkout may exceed the viewport: a single over-wide child is what shifts every centred element off-centre. */ body.woocommerce-checkout{overflow-x:hidden;} body.woocommerce-checkout .woocommerce, body.woocommerce-checkout form.checkout, body.woocommerce-checkout #customer_details, body.woocommerce-checkout #order_review{max-width:100%;box-sizing:border-box;} /* Centre the lockup against the box, not against whatever it inherits. */ .nyc-checkout-head{margin-left:auto;margin-right:auto;} .nyc-checkout-head__logo{margin-left:auto;margin-right:auto;} /* Keep the Click-to-Chat WhatsApp bubble from colliding with the sticky pay bar on checkout. Hidden on checkout only; it still shows site-wide. */ body.woocommerce-checkout #ht-ctc-chat, body.woocommerce-checkout .ht-ctc, body.woocommerce-checkout [id^="ht_ctc"], body.woocommerce-checkout [class*="ht-ctc-chat"]{display:none !important;} /* Tighter vertical rhythm between fields on phones */ .woocommerce-checkout .form-row{margin-bottom:10px;} .woocommerce-checkout .form-row label{margin-bottom:4px;} .woocommerce-checkout #customer_details h3{margin-bottom:12px;} body.woocommerce-checkout #site-content{padding-top:20px !important;} /* Breathing room so line item / totals never touch the card border */ .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item, .woocommerce-checkout .cart-subtotal th,.woocommerce-checkout .cart-subtotal td, .woocommerce-checkout .order-total th,.woocommerce-checkout .order-total td{padding-left:4px;padding-right:4px;} /* ---- Vertical compaction (v1.9.16) ---- The phone checkout was scrolling far longer than it needed to, and the worst offender was a ~120px hole between the "Your order" heading and the course line. It is empty containers with margins: the express-checkout slot and its divider are printed on every load and only hidden by JS when no wallet button mounts, and an empty node with margins still occupies space until it does. Collapse anything that renders empty, then tighten the rhythm of the card itself. */ /* ---- Order card, phones (v1.9.17) ---- The course is already named, pictured and priced in the summary at the top of the page, so the "Your order" heading and its line item were the same information a second time, 110px lower down. Both go on phones; subtotal and total stay, because those are the numbers a buyer checks before paying. Desktop keeps the full review: it has no top summary, so the line item there is the only place the course is shown. */ .woocommerce-checkout #order_review_heading{display:none;} .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item{display:none;} /* Total is the first visible row now, so it owns the top rule. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{border-top:0;} /* Coupon panel, moved here by checkout.js: it sits between the order summary and Billing details. */ .woocommerce-checkout .nyc-coupon-slot{margin:12px 0 4px;} .woocommerce-checkout .nyc-coupon-slot:empty{display:none;} .woocommerce-checkout .nyc-coupon-slot .nyc-coupon{margin:0;} /* ---- The gap between State and the trust strip (v1.9.20) ---- Everything the order block used to render on a phone is now hidden: the heading, the line item, subtotal, discount and total. What was left was an EMPTY table plus the payment section's own boxes still holding their margins and padding - about 175px of nothing between the last field and the trust strip. Collapse all of it. The table is hidden, NOT removed: checkout.js reads .order-total out of it for the sticky bar and the mini summary, and a hidden node still has its text. */ .woocommerce-checkout .woocommerce-checkout-review-order-table{display:none;} .woocommerce-checkout #order_review{margin-top:0;padding:0;} .woocommerce-checkout #payment{margin-top:0;background:transparent;} .woocommerce-checkout #payment ul.payment_methods{padding:0;margin:0;} .woocommerce-checkout #payment ul.payment_methods li{margin:0;} .woocommerce-checkout #payment .place-order{padding:0;} .woocommerce-checkout #payment .woocommerce-privacy-policy-text{margin:0;} .woocommerce-checkout .nyc-trust.nyc-trust--row{margin-top:14px;} /* ---- No card around the checkout on phones (v1.9.20) ---- The rounded, bordered box came from the page wrapper (theme content box / Elementor container), not from this plugin. On a 393px screen a card inside a card is just a line the eye has to cross: the phone screen IS the card. Scoped to the checkout page and to phones, so the same containers keep their shape everywhere else. */ body.nyc-checkout-form #site-content .entry-content, body.nyc-checkout-form #site-content .entry-content > *, body.nyc-checkout-form .e-con, body.nyc-checkout-form .e-con-inner, body.nyc-checkout-form .elementor-widget-container, body.nyc-checkout-form .woocommerce, body.nyc-checkout-form form.checkout, body.nyc-checkout-form #customer_details{ border:0 !important;border-radius:0 !important;box-shadow:none !important; } /* Logo air on phones lives with the other .nyc-checkout-head rules further down this file. A copy here did nothing: same specificity, and the rule at the bottom wins on source order regardless of the media query. */ body.nyc-checkout-form #site-content{padding-top:4px !important;} .woocommerce-checkout #nyc-express-slot:empty, .woocommerce-checkout .nyc-express:empty, .woocommerce-checkout .nyc-express-mount:empty, .woocommerce-checkout .nyc-express-mount:empty + .nyc-express-divider, .woocommerce-checkout #order_review > div:empty, .woocommerce-checkout #order_review > p:empty{ display:none !important;margin:0 !important;padding:0 !important; } /* Row rhythm: 12px was generous for a one-line order. */ .woocommerce-checkout .woocommerce-checkout-review-order-table th, .woocommerce-checkout .woocommerce-checkout-review-order-table td{padding-top:8px;padding-bottom:8px;} .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-total{padding-top:10px;padding-bottom:10px;} .woocommerce-checkout .order-total th, .woocommerce-checkout .order-total td{padding-top:12px;} /* Trust strip and social proof sit closer to what they reassure about. */ .woocommerce-checkout .nyc-trust.nyc-trust--row{margin-top:10px;} .woocommerce-checkout .nyc-social{margin-top:12px;} /* Coupon toggle is a single tap target: it does not need 18px of air. */ .woocommerce-checkout .nyc-coupon{margin:6px 0;} } /* Express checkout block (native gateway button lives inside .nyc-express-mount) */ .nyc-express{margin:0 0 22px;font-family:"Poppins",system-ui,sans-serif} .nyc-express-title{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--nyc-deep);opacity:.6;margin-bottom:8px} .nyc-express-mount{display:flex;flex-direction:column;gap:10px} .nyc-express-mount > *{width:100%;min-height:46px} .nyc-express-divider{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--nyc-deep);opacity:.55;font-size:12px} .nyc-express-divider::before,.nyc-express-divider::after{content:"";flex:1;height:1px;background:var(--nyc-line)} /* Phone country-code picker (prefix glued to the phone input) */ .nyc-phone-wrap{display:flex;gap:8px} .nyc-dial{display:flex;align-items:center;gap:6px;height:44px;padding:0 10px;border:1px solid var(--nyc-line); border-radius:10px;background:#fff;font-size:14px;color:var(--nyc-deep);white-space:nowrap} .nyc-dial select{border:0;background:transparent;font-size:14px;color:var(--nyc-deep)} /* Reassurance + redirect note */ .nyc-pay-note{display:flex;gap:10px;align-items:flex-start;background:var(--nyc-cream); border:1px solid var(--nyc-line);border-radius:10px;padding:12px 14px;margin:16px 0;font-size:13px;color:var(--nyc-deep);line-height:1.5} .nyc-pay-note .nyc-lock{flex:0 0 auto;width:18px;height:18px;border-radius:4px;background:var(--nyc-purple);margin-top:1px} /* FX line */ .nyc-fx-line{display:flex;gap:8px;align-items:flex-start;background:rgba(141,34,195,.06); border-radius:10px;padding:10px 12px;margin:12px 0;font-size:12px;color:var(--nyc-purple)} /* Primary CTA inherits Woo button but brand it */ #place_order,.nyc-cta{background:var(--nyc-purple)!important;border:0!important;border-radius:10px!important; min-height:50px;font-weight:500!important;font-family:"Poppins",sans-serif} #place_order:hover,.nyc-cta:hover{filter:brightness(1.05)} /* Trust row */ .nyc-trust{display:flex;justify-content:center;gap:18px;margin-top:12px;font-size:11px;color:var(--nyc-deep);opacity:.6} /* GSTIN thank-you prompt */ .nyc-gstin-prompt{background:var(--nyc-cream);border:1px solid var(--nyc-line);border-radius:12px;padding:16px 18px;margin:18px 0;font-family:"Poppins",sans-serif} .nyc-gstin-q{margin:0 0 10px;color:var(--nyc-deep);font-size:14px} .nyc-gstin-form{display:flex;gap:8px} .nyc-gstin-input{flex:1;height:44px;border:1px solid var(--nyc-line);border-radius:10px;padding:0 12px;font-size:14px} .nyc-gstin-save{height:44px;padding:0 18px;background:var(--nyc-purple);color:#fff;border:0;border-radius:10px;font-weight:500;cursor:pointer} .nyc-gstin-msg{margin:8px 0 0;font-size:12px;color:var(--nyc-deep)} /* Phone input fills the row beside the dial picker; align dial height to fields */ .nyc-phone-wrap .input-text{flex:1;min-width:0;} .nyc-phone-wrap .nyc-dial{height:var(--nyc-field-h);border-radius:12px;} #place_order{width:100%;} /* ===================================================================== * Approved checkout redesign (v1.2) * Course image + mentor, coupon below the product, trust + social, * sticky mobile pay bar. Builds on the tokens and shell above. * ===================================================================== */ /* Brand display face for the order summary headings and totals */ .woocommerce-checkout #order_review_heading, .woocommerce-checkout .order-total th, .woocommerce-checkout .order-total td{font-family:var(--nyc-font);} /* Order summary heading a touch larger */ .woocommerce-checkout #order_review_heading{font-size:22px;font-weight:700;} /* ---------- Line item: image + name + mentor ---------- */ .woocommerce-checkout .woocommerce-checkout-review-order-table{width:100%;} .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name{ text-align:left;vertical-align:middle;padding:14px 0;min-width:0; } .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-total{ text-align:right;vertical-align:middle;padding:14px 0;white-space:nowrap; font-family:var(--nyc-font);font-weight:700;font-size:18px;color:var(--nyc-deep); } /* Every amount in the summary aligns to the same right edge, before and after coupon */ .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount td, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{ text-align:right !important; } /* Desktop's only coupon-remove control. WooCommerce renders it as a bare "[Remove]" anchor inside the discount cell (relabelled by NYC_Checkout::coupon_remove_link); unstyled it inherits the theme's link colour and is easy to miss next to a 15px amount. */ .woocommerce-checkout .nyc-remove-coupon{ display:inline-block;margin-left:10px;font-size:12px;font-weight:600; white-space:nowrap;color:var(--nyc-deep);opacity:.55;text-decoration:underline; } .woocommerce-checkout .nyc-remove-coupon:hover, .woocommerce-checkout .nyc-remove-coupon:focus{opacity:1;color:var(--nyc-orange);} .nyc-li{display:flex;gap:16px;align-items:center;} /* Same rule as the phone summary: a seats line is what pushes the text block past the 54px thumbnail, and that is when centring starts to float the image. Long titles alone stay centred - three lines is 59px against a 54px thumb, a 2px shift nobody sees. */ .nyc-li:has(.nyc-seats){align-items:flex-start;} .nyc-li:has(.nyc-seats) .nyc-li-thumb img{margin-top:2px;} .nyc-li-thumb img{ width:96px;aspect-ratio:16/9;object-fit:cover; border-radius:14px;display:block; box-shadow:0 10px 24px -12px rgba(141,34,195,.5); } .nyc-li-text{display:flex;flex-direction:column;} .nyc-li-name{font-weight:500;font-size:14.5px;color:var(--nyc-deep);line-height:1.35;} /* "5 seats · ₹2,400 each" - shared by the desktop line and the phone summary. */ .nyc-seats{ font-size:12px;color:var(--nyc-purple);font-weight:500;margin-top:4px; white-space:nowrap;line-height:1.3; } .nyc-seats .amount, .nyc-seats .woocommerce-Price-amount{font-weight:500;color:inherit;} .woocommerce-checkout .nyc-msum .nyc-seats{font-size:11.5px;margin-top:3px;} .nyc-mentor{font-size:12.5px;color:rgba(38,26,72,.6);margin-top:4px;} .nyc-mentor b{color:var(--nyc-deep);font-weight:500;} /* Remove the "x 1" quantity from the order summary (single-course purchases) */ .woocommerce-checkout .product-quantity, .woocommerce-checkout .cart_item .product-quantity{display:none !important;} /* .nyc-qty retired in 1.9.22: the inline "x 5" is replaced by the seats line under the title, which says the unit out loud and renders on the phone too. The rule is left as a no-op guard in case a cached page still prints one. */ .woocommerce-checkout .nyc-qty{display:none !important;} /* ---------- Coupon toggle, below the product ---------- */ .nyc-coupon-row td{padding:0 !important;border:0 !important;} .nyc-coupon{padding:4px 0;} .nyc-coupon-head{ display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer; padding:13px 2px;font-family:var(--nyc-font);color:var(--nyc-purple);font-weight:500;font-size:13.5px; } .nyc-coupon-head .tag{width:17px;height:17px;color:var(--nyc-orange);} .nyc-coupon-head .chev{margin-left:auto;transition:transform .2s;color:rgba(38,26,72,.5);} .nyc-coupon.open .chev{transform:rotate(180deg);} .nyc-coupon-body{display:none;padding:2px 2px 14px;gap:10px;} .nyc-coupon.open .nyc-coupon-body{display:flex;} .nyc-coupon-body input{ flex:1;height:var(--nyc-field-h);font-family:var(--nyc-font);font-size:14px;background:#fff; border:1px solid var(--nyc-line);border-radius:12px;padding:0 14px;color:var(--nyc-deep); } .nyc-coupon-body input:focus{outline:0;border-color:var(--nyc-purple);box-shadow:0 0 0 3px rgba(141,34,195,.12);} .nyc-coupon-apply{ height:var(--nyc-field-h);background:var(--nyc-purple);color:#fff;border:0;border-radius:12px;padding:0 20px; font-family:var(--nyc-font);font-weight:600;font-size:15px;cursor:pointer;letter-spacing:.4px; transition:background .15s ease,box-shadow .15s ease; } /* Solid purple rather than the pay button's gradient: this is the secondary action on the page and must not compete with Complete Purchase. */ .nyc-coupon-apply:hover, .nyc-coupon-apply:focus{background:#7a1cab;box-shadow:0 0 0 3px rgba(141,34,195,.14);} .nyc-coupon-apply:disabled{opacity:.55;cursor:default;box-shadow:none;} .nyc-coupon-notice{margin:0 2px 12px;} .nyc-coupon-notice .woocommerce-message, .nyc-coupon-notice .woocommerce-error{margin:0;font-size:12.5px;} /* ---------- Bigger, gradient pay button + purple total ---------- */ .woocommerce-checkout .order-total td .amount{color:var(--nyc-purple);font-size:26px;font-weight:700;} .woocommerce-checkout #place_order,.nyc-cta{ background:linear-gradient(100deg,var(--nyc-purple),#a93fd6)!important; border-radius:14px!important;min-height:54px;font-family:var(--nyc-font)!important; font-weight:700!important;font-size:17px!important;letter-spacing:.02em; box-shadow:0 12px 22px -16px rgba(141,34,195,.7); } /* Subtotal is dropped on desktop too (v1.9.22). With no shipping and no tax line, it repeats the total to the rupee unless a coupon is on - and when one is, the discount row carries the story. The total keeps the rule above it so it does not float loose in the card. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal{display:none;} /* The delivery promise leaves the desktop trust strip too, at Kunal's call, so the strip is two items on every build. Note it was NOT a duplicate here the way it was on the phone: on desktop the email hint is in the left column and this strip is in the right card, so they never sat together. */ .woocommerce-checkout .nyc-trust-item--delivery{display:none;} /* ---------- Trust strip + social proof ---------- */ .nyc-trust--row{display:flex;justify-content:center;gap:16px;margin-top:6px;flex-wrap:wrap;opacity:1;} .nyc-trust-item{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(38,26,72,.65);font-weight:500;} .nyc-trust-item svg{width:14px;height:14px;color:var(--nyc-purple);flex-shrink:0;} .nyc-social{ display:flex;align-items:center;gap:13px;background:var(--nyc-cream); border:1px solid var(--nyc-line);border-radius:14px;padding:13px 15px;margin-top:16px; } .nyc-stars{color:#f2a93b;font-size:15px;letter-spacing:1px;white-space:nowrap;} .nyc-stxt{font-size:12px;color:rgba(38,26,72,.7);line-height:1.45;} .nyc-stxt b{color:var(--nyc-deep);font-weight:600;} /* ---------- Geo hint under the country field ---------- */ .nyc-geohint{font-size:11.5px;color:var(--nyc-purple);margin-top:8px;display:flex;align-items:center;gap:6px;font-weight:500;} .nyc-geohint svg{width:13px;height:13px;flex-shrink:0;} /* ---------- Sticky mobile pay bar ---------- */ /* --nyc-sb-h is the bar's real measured height, written by checkout.js on load and on resize. Everything that needs to clear the bar reads this var, so the form never hides behind it and nothing is hardcoded to one bar height. */ .nyc-stickybar{ /* Above any field. The old 99999 lost to the select2 containers' 9999999, which is how a closed Country/State box came to draw on top of the pay button. The rule that puts those containers back to z-index:auto is the real fix; this is the belt, in case anything else on the page lifts a field again. Still below an OPEN picker panel (2147483000), so a list can always be read over the bar. */ display:none;position:fixed;left:0;right:0;bottom:0;z-index:100000000 !important; background:#fff;border-top:1px solid var(--nyc-line); box-shadow:0 -8px 26px -16px rgba(38,26,72,.6); /* Clear the iPhone home indicator: the bar's own padding grows by the safe-area inset instead of the button sitting on top of the gesture bar. */ padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px)); /* Stack the [total | button] row over a full-width trust note, matching the program landing sticky. The note is its own row, so it can never crowd the button off the edge in the Instagram in-app browser. */ flex-direction:column;align-items:stretch;gap:8px; transform:translateY(0); transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s ease; /* Own compositing layer. Without one, iOS Safari repaints a fixed bar in stale positions during momentum scroll, which is what smeared the form controls across the bar and the status bar in testing. `layout` is enough for that; the previous `paint` clipped the CTA's lower edge in the in-app browser, so it is gone. */ will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; contain:layout; } /* The total sits tight to its content, the button takes the rest of the row. */ .nyc-stickybar .nyc-sb-row{display:flex;align-items:center;gap:14px;} .nyc-stickybar .sb-t{flex:none;} .nyc-stickybar .nyc-sb-note{text-align:center;color:rgba(38,26,72,.6);font-weight:600;font-size:12.5px;line-height:1.3;} /* Parked off-screen while the OS owns the bottom of the screen. The keyboard or picker covers the bar anyway, so hiding it costs nothing and stops the bar floating mid-screen above the keyboard. (Note: an earlier version of this file blamed the field-over-bar overlap on iOS lifting focused controls above fixed elements. That was wrong. It was a plain z-index loss - see the select2-container rule below.) */ .nyc-stickybar.nyc-sb-away{ transform:translateY(calc(100% + 12px));opacity:0;pointer-events:none; } /* 18px, not 20: Poppins sets far wider than the Dosis this was sized against, and this block shares a 393px bar with the CTA. */ .nyc-stickybar .sb-t{font-family:var(--nyc-font);font-weight:700;font-size:18px;color:var(--nyc-deep);line-height:1.05;letter-spacing:-.01em;} .nyc-stickybar .sb-t small{display:block;margin-top:4px;font-family:var(--nyc-font);font-size:10px;font-weight:400;letter-spacing:.07em;color:rgba(38,26,72,.6);} .nyc-stickybar button{ flex:1;background:linear-gradient(100deg,var(--nyc-purple),#a93fd6);color:#fff;border:0;border-radius:12px; padding:14px 10px;font-family:var(--nyc-font);font-weight:700;font-size:15px;cursor:pointer;letter-spacing:.02em; } @media (prefers-reduced-motion:reduce){ .nyc-stickybar{transition:none;} } @media (max-width:768px){ .nyc-stickybar{display:flex;} .woocommerce-checkout #payment .place-order #place_order{position:relative;} /* Reserve exactly the bar's height (plus the safe area, which is already inside the measured value) so the last field can always be scrolled clear of it. The old flat 92px was a guess and left the State field trapped under the bar on tall-text and small-screen devices. */ body.woocommerce-checkout{padding-bottom:calc(var(--nyc-sb-h,84px) + 16px);} /* When the browser scrolls a focused field into view, stop it parking the field under the bar (or under the compact summary pinned at the top). */ body.woocommerce-checkout .form-row, body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > *, body.woocommerce-checkout #nyc-coupon{ scroll-margin-bottom:calc(var(--nyc-sb-h,84px) + 24px); scroll-margin-top:16px; } } /* The select2 panel must clear EVERY field, not just the sticky bar. * * The country panel was being pierced by the State row below it: the fields * that follow country in the DOM were painting through the open list. A field * can only do that if it is positioned with a z-index of its own (an * unpositioned reads exactly like a text field. */ body.woocommerce-checkout select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23261A48' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } body.woocommerce-checkout select::-ms-expand{display:none;} /* select2 single (country / state) lines up with the inputs exactly. */ body.woocommerce-checkout .select2-container .select2-selection--single{ display:flex;align-items:center;padding-right:40px; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:normal;padding:0;color:var(--nyc-deep); } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%;top:0;right:12px; } /* The phone dial is a field box too. Match the box; the select inside is borderless with a small chevron of its own. */ body.woocommerce-checkout .nyc-phone-wrap .nyc-dial{gap:6px;} body.woocommerce-checkout .nyc-phone-wrap .nyc-dial select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; height:auto;min-height:0;border:0;border-radius:0;background-color:transparent; padding:0 16px 0 0;font-size:15px;color:var(--nyc-deep); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23261A48' stroke-opacity='0.55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right center;background-size:12px; } /* One focus treatment shared by every control. */ body.woocommerce-checkout .input-text:focus, body.woocommerce-checkout select:focus, body.woocommerce-checkout .nyc-coupon-body input:focus, body.woocommerce-checkout .select2-container--focus .select2-selection--single, body.woocommerce-checkout .select2-container--open .select2-selection--single, body.woocommerce-checkout .nyc-phone-wrap .nyc-dial:focus-within{ outline:0;border-color:var(--nyc-purple); box-shadow:0 0 0 3px rgba(141,34,195,.12); } /* ---- 2) Subtle back link (sits top left inside the logo bar) ---- */ .nyc-checkout-head{position:relative;} .nyc-back{ position:absolute;left:0;top:50%;transform:translateY(-50%); display:inline-flex;align-items:center;gap:5px; font-family:var(--nyc-font);font-size:13px;font-weight:500;line-height:1; color:var(--nyc-deep);opacity:.45;text-decoration:none; transition:opacity .15s ease;cursor:pointer; } .nyc-back:hover,.nyc-back:focus{opacity:.75;color:var(--nyc-deep);text-decoration:none;} .nyc-back svg{width:15px;height:15px;flex-shrink:0;} .nyc-back span{line-height:1;} @media (max-width:768px){ .nyc-back{font-size:12px;} .nyc-back svg{width:14px;height:14px;} } /* ---- 1) Phone: only the sticky bar pays; hide the in-form button ---- */ @media (max-width:768px){ /* Scoped to .nyc-sb-ready, which checkout.js adds ONLY after the sticky bar's button exists. If the JS fails to load or throws before building the bar, this rule never matches and the buyer keeps the plain WooCommerce button - ugly, but it takes payments. Hiding it unconditionally made the script a single point of failure for every mobile purchase. */ body.woocommerce-checkout.nyc-sb-ready #payment .place-order #place_order{display:none !important;} /* Tidy the gap the hidden button leaves above the trust line. */ body.woocommerce-checkout #payment .place-order{padding-top:10px;} } /* ---- 4) Desktop: pay button centred between the Total row and the trust line ---- */ @media (min-width:769px){ /* It used to sit ~58px below Total and 5px above the trust line, so it read as glued to the trust strip rather than as the anchor of the card. The air above is the emptied method list: #payment's margin-top, the list's padding-top, and the row's own bottom margin - the :only-child rule earlier in this file never zeroed that last one, because it tests the UL, and the UL is not the only child of #payment (the .place-order div is its sibling). Collapse it only where the list is genuinely empty (a single routed gateway), then give the button equal air on both sides. */ body.woocommerce-checkout #payment:has(li.wc_payment_method:only-child){margin-top:0;} body.woocommerce-checkout #payment ul.payment_methods:has(li.wc_payment_method:only-child){padding-top:0;} body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:only-child{margin-bottom:0;} body.woocommerce-checkout #payment .place-order{padding-top:0;} body.woocommerce-checkout #payment .place-order #place_order{margin:26px 0;} body.woocommerce-checkout .nyc-trust.nyc-trust--row{margin-top:0;} } /* ---- 6) No underline on any CTA, hover or focus ---- */ body.woocommerce-checkout #place_order, body.woocommerce-checkout #place_order:hover, body.woocommerce-checkout #place_order:focus, body.woocommerce-checkout .nyc-cta, body.woocommerce-checkout .nyc-cta:hover, body.woocommerce-checkout .nyc-cta:focus, body.woocommerce-checkout #payment .place-order .button, body.woocommerce-checkout #payment .place-order .button:hover, body.woocommerce-checkout .nyc-coupon-head, body.woocommerce-checkout .nyc-coupon-head:hover, body.woocommerce-checkout .nyc-coupon-head:focus, body.woocommerce-checkout .nyc-coupon-apply, body.woocommerce-checkout .nyc-coupon-apply:hover, body.woocommerce-checkout .nyc-coupon-apply:focus, .nyc-stickybar button, .nyc-stickybar button:hover, .nyc-stickybar button:focus, body.woocommerce-checkout .nyc-back, body.woocommerce-checkout .nyc-back:hover, body.woocommerce-checkout .nyc-back:focus{ text-decoration:none !important; } /* ===================================================================== * Email hint line (v1.7.2) * Replaces the email field's tooltip bubble with a small, quiet line that * sits directly under the input. Also hides any leftover description bubble * a theme might still attach to the email field. * ===================================================================== */ .woocommerce-checkout .nyc-field-hint{ display:block;margin:6px 2px 0; font-family:var(--nyc-font);font-size:12px;line-height:1.4; color:rgba(38,26,72,.55); /* !important because the centring comes from the theme, not from here: the hint is a child of the email row and inherits its text-align. It reads as a caption for the field above it, and a caption lines up with its field. */ text-align:left !important; } .woocommerce-checkout #billing_email_field .description{ display:none !important; } /* ===================================================================== * Already-owned program notice (v1.7.5) * A cleaner, branded version of the checkout error banner, with a remove * button per program the billing email already owns. * ===================================================================== */ .woocommerce-checkout .woocommerce-error:has(.nyc-owned-notice){ list-style:none;margin:0 0 20px;padding:16px 18px;border:0;border-radius:16px; background:linear-gradient(180deg,#fff,var(--nyc-cream)); box-shadow:0 1px 2px rgba(38,26,72,.05),0 12px 30px -18px rgba(233,111,70,.5); border:1px solid rgba(233,111,70,.28); font-family:var(--nyc-font);color:var(--nyc-deep); } .woocommerce-checkout .woocommerce-error:has(.nyc-owned-notice) li{ list-style:none;margin:0;padding:0; } .woocommerce-checkout .woocommerce-error:has(.nyc-owned-notice)::before{content:none;} .nyc-owned-notice{display:flex;flex-direction:column;gap:14px;} .nyc-owned-head{display:flex;align-items:flex-start;gap:11px;} .nyc-owned-ic{ width:20px;height:20px;flex-shrink:0;color:var(--nyc-orange);margin-top:1px; } .nyc-owned-text{font-size:15px;line-height:1.5;color:var(--nyc-deep);} .nyc-owned-text a{color:var(--nyc-purple);font-weight:600;text-decoration:none;} .nyc-owned-text a:hover{text-decoration:none;opacity:.85;} .nyc-owned-list{display:flex;flex-direction:column;gap:8px;} .nyc-owned-row{ display:flex;align-items:center;gap:12px; background:#fff;border:1px solid var(--nyc-line);border-radius:12px; padding:9px 10px 9px 14px; } .nyc-owned-name{ flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--nyc-deep); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .nyc-remove-owned{ display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer; background:var(--nyc-orange);color:#fff;border:0;border-radius:10px; padding:8px 14px;font-family:var(--nyc-font);font-weight:600;font-size:13px;line-height:1; transition:filter .15s ease,opacity .15s ease; } .nyc-remove-owned svg{width:14px;height:14px;} .nyc-remove-owned:hover{filter:brightness(1.05);text-decoration:none;} .nyc-remove-owned[disabled]{opacity:.6;cursor:default;} /* ---------- Order review row centering (v1.9.0) ---------- * Thumbnail, name and price sit centered between the divider lines, * regardless of image height. !important guards against theme overrides. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-total{ vertical-align:middle !important; padding-top:16px !important; padding-bottom:16px !important; } /* Collapse the empty phantom line box in the name cell that lifts the * flex line item off-centre. The name (.nyc-li-name) and mentor * (.nyc-mentor) set their own font-size, so visible text is unaffected. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name{ font-size:0 !important; line-height:0 !important; } /* ---------- iOS auto-zoom guard (v1.9.29) ---------- * Mobile Safari zooms the page (~1.3x) whenever a focused form control has a * font-size under 16px, and the zoom PERSISTS after the keyboard closes. That * is not just cosmetic here: visualViewport.height is reported divided by the * pinch scale, so a zoomed page looks permanently "keyboard up" to * stickyChrome() and the pay bar never comes back. 16 is a hard threshold - * 15.5px still zooms. * * !important, and last in the file, because 15px/14px are declared in earlier * blocks on the same selectors and a media query does NOT raise specificity; * source order alone would decide it. * * Desktop keeps 15px - the rule is scoped to phones. */ @media (max-width:768px){ .woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-checkout .select2-selection, .woocommerce-checkout .select2-search__field, .nyc-dial, .nyc-dial select, .nyc-coupon-body input, .nyc-gstin-input{ font-size:16px !important; } /* The rendered text inside select2's single-select box inherits its own size in some themes; pin it too so the tap target never zooms. */ .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ font-size:16px !important; } } /* ===================================================================== * Order-pay receipt redesign (v1.9.37) * Branded "Complete your payment" card (.nyc-op) replaces WooCommerce's * order-receipt bullets and woo-razorpay's default Thank-you + Pay Now / * Cancel chrome. The real #btn-razorpay is kept in the DOM but hidden; * checkout.js proxies clicks to it so the overlay re-opens on every tap. * Scoped to body.woocommerce-order-pay. * ===================================================================== */ body.woocommerce-order-pay .woocommerce-order-overview, body.woocommerce-order-pay ul.order_details, body.woocommerce-order-pay #btn-razorpay, body.woocommerce-order-pay #btn-razorpay-cancel, body.woocommerce-order-pay #msg-razorpay-success{display:none !important;} /* The mobile nav can render open and overlap the pay page (its collapse JS does not run once the header is hidden), and a body-appended off-canvas panel escapes the header hide. Cast a wide net: named HFE/Elementor/theme nav widgets, any