/* ============================================================ NewAsNew — Custom Cart, Checkout, Account Styling Production-grade, mobile-first, brand-consistent ============================================================ */ /* ═══ CRITICAL CASCADE OVERRIDES (v11.6) ═══ These rules MUST come first to defeat any plugin/WC default styles that try to apply floats, dark backgrounds, or width constraints to our cart and checkout containers. ============================================================ */ /* ── Cart: kill ALL WC floats that shift layout ── In v11.6 the cart template puts the form INSIDE .nan-cart-grid as a sibling of the summary aside, so even if .woocommerce-cart-form gets a float from WC, it can no longer break the grid. These rules are defensive belt-and-suspenders. */ .woocommerce-cart .woocommerce, .woocommerce-cart .woocommerce > *, .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart .cart-collaterals, .woocommerce-cart table.shop_table, .woocommerce-cart .woocommerce-cart-form ~ *, .nan-cart-page, .nan-cart-page > * { float: none !important; width: 100% !important; clear: both !important; box-sizing: border-box !important; } /* The grid itself must stay grid (the rule above sets * width:100%, fine for it). The form-wrapped items column and the summary are siblings inside the grid. */ .woocommerce-cart .nan-cart-grid { display: grid !important; } .woocommerce-cart .nan-cart-grid > .nan-cart-items-form, .woocommerce-cart .nan-cart-grid > .nan-cart-summary { width: auto !important; float: none !important; clear: none !important; } /* ── Checkout: force LIGHT backgrounds on every container ── Defensive rules so no plugin/cached CSS can turn the page dark. The page-level background lives in page.php inline (#f4f4f5). Inner WC wrapper must be transparent so inline bg shows through. */ .woocommerce-checkout, .woocommerce-checkout #content, .woocommerce-checkout #primary, .woocommerce-checkout main, .woocommerce-checkout #main { background: #f4f4f5 !important; color: #18181b !important; } .woocommerce-checkout .woocommerce, .woocommerce-checkout #content .woocommerce { float: none !important; width: 100% !important; background: transparent !important; color: inherit !important; } /* JS-loaded fallback: if main.js fails to add .js-loaded to , the body stays opacity:0 and the whole page looks blank. We force the body visible on cart/checkout/account regardless. */ html body.woocommerce-cart, html body.woocommerce-checkout, html body.woocommerce-account { opacity: 1 !important; } /* ═══ COMMON VARIABLES ═══ */ .nan-cart-page, .nan-checkout-page, .nan-account-page { font-family: var(--s, system-ui, sans-serif); color: #18181b; max-width: 1280px; margin: 0 auto; padding: 32px 20px; } /* ═══════════════════════════════════════════════════════════ CART PAGE ═══════════════════════════════════════════════════════════ */ .nan-cart-page { padding: 28px 20px 80px; } /* Trust badges row */ .nan-cart-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; } .nctb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #6b7280; } .nctb-i { font-size: 22px; flex-shrink: 0; } .nctb strong { display: block; font-size: 12.5px; color: #18181b; font-weight: 700; line-height: 1.3; } .nctb span:not(.nctb-i) { display: block; font-size: 10.5px; color: #9ca3af; } /* Grid: items + summary */ .nan-cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; } /* Items column */ .nan-cart-items { background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 24px; } .nan-cart-title { font-size: 22px; font-weight: 800; color: #18181b; margin: 0 0 20px; display: flex; align-items: baseline; gap: 10px; } .nan-cart-count { font-size: 13px; font-weight: 600; color: #6b7280; } /* Cart item card */ .nan-cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f3f4f6; } .nan-cart-item:last-of-type { border-bottom: none; } .nci-thumb img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; border: 1px solid #f3f4f6; } .nci-info { min-width: 0; } .nci-brand { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; } .nci-name { font-size: 14px; font-weight: 600; color: #18181b; margin-bottom: 6px; line-height: 1.4; } .nci-name a { color: inherit; text-decoration: none; } .nci-name a:hover { color: var(--blue, #2563EB); } .nci-meta { font-size: 12px; color: #6b7280; margin-bottom: 8px; } .nci-meta dl, .nci-meta p { margin: 0; } .nci-meta dt { display: inline; font-weight: 700; } .nci-meta dd { display: inline; margin: 0 8px 0 4px; } .nci-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .nci-badge { font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: 600; } .nci-badge-warranty { background: #fef3c7; color: #92400e; } .nci-badge-qc { background: #f0fdf4; color: #15803d; } .nci-bottom { display: flex; align-items: center; gap: 14px; } /* Quantity */ .nci-qty .quantity { display: flex; align-items: center; } .nci-qty input.qty { width: 60px !important; height: 36px !important; text-align: center; border: 1.5px solid #e4e4e7; border-radius: 8px; padding: 4px 6px !important; font-size: 14px !important; background: #fff; font-weight: 600; } .nci-remove { font-size: 12px; color: #dc2626; text-decoration: none; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .nci-remove:hover { color: #991b1b; text-decoration: underline; } .nci-price { font-size: 16px; font-weight: 800; color: #18181b; white-space: nowrap; text-align: right; } /* Bottom actions: coupon + update */ .nan-cart-bottom-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; } .nan-coupon-box { flex: 1; max-width: 380px; } .nan-coupon-box label { display: block; font-size: 13px; font-weight: 700; color: #18181b; margin-bottom: 6px; } .nan-coupon-row { display: flex; gap: 8px; } .nan-coupon-input { flex: 1; padding: 10px 12px; border: 1.5px solid #e4e4e7; border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; } .nan-coupon-input:focus { outline: none; border-color: var(--blue, #2563EB); } .nan-coupon-btn { padding: 10px 18px; background: #fff; border: 1.5px solid #18181b; color: #18181b; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; } .nan-coupon-btn:hover { background: #18181b; color: #fff; } .nan-update-cart-btn { padding: 10px 18px; background: #fff; border: 1.5px solid #e4e4e7; color: #4b5563; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; } .nan-update-cart-btn:hover { border-color: #18181b; color: #18181b; } /* ── Summary box (right) ── */ .nan-cart-summary { position: sticky; top: 24px; } .nan-summary-box { background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 24px; } .nan-summary-title { font-size: 16px; font-weight: 800; color: #18181b; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; } .nan-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #4b5563; margin-bottom: 10px; } .nan-summary-row strong { color: #18181b; font-weight: 700; } .nan-summary-coupon span:first-child { color: #15803d; font-weight: 600; font-size: 13px; } .nan-summary-discount { color: #15803d; font-weight: 700; } .nan-summary-divider { height: 1px; background: #e4e4e7; margin: 14px 0; } .nan-summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .nan-summary-total span { font-size: 16px; font-weight: 700; color: #18181b; } .nan-summary-total strong { font-size: 22px; font-weight: 900; color: #18181b; } .nan-summary-tax-note { font-size: 11px; color: #6b7280; text-align: right; margin-bottom: 16px; } .nan-checkout-btn { display: block; width: 100%; background: #18181b; color: #fff !important; text-align: center; padding: 15px 20px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; margin-top: 16px; transition: background .15s, transform .1s; } .nan-checkout-btn:hover { background: #000; transform: translateY(-1px); } .nan-summary-pay-icons { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .nan-summary-pay-icons span { font-size: 10px; font-weight: 600; color: #6b7280; background: #f9fafb; padding: 4px 8px; border-radius: 4px; border: 1px solid #e4e4e7; } .nan-cart-why { background: #f9fafb; border: 1px solid #e4e4e7; border-radius: 12px; padding: 18px; margin-top: 16px; } .nan-cart-why-title { font-size: 13px; color: #18181b; margin: 0 0 10px; } .nan-cart-why-title strong { color: var(--blue, #2563EB); } .nan-cart-why ul { list-style: none; padding: 0; margin: 0; } .nan-cart-why li { font-size: 12.5px; color: #4b5563; padding: 4px 0; } /* ── Cart Mobile ── */ @media (max-width: 900px) { .nan-cart-trust { grid-template-columns: 1fr 1fr; gap: 8px; } .nan-cart-grid { grid-template-columns: 1fr; gap: 16px; } .nan-cart-summary { position: relative; top: auto; } .nan-cart-items { padding: 18px; } .nan-cart-item { grid-template-columns: 80px 1fr; gap: 12px; } .nci-thumb img { width: 80px; height: 80px; } .nci-price { grid-column: 1 / -1; text-align: right; padding-top: 6px; border-top: 1px dashed #f3f4f6; } .nan-cart-bottom-actions { flex-direction: column; align-items: stretch; } .nan-coupon-box { max-width: 100%; } .nan-update-cart-btn { width: 100%; } } @media (max-width: 480px) { .nan-cart-trust { grid-template-columns: 1fr 1fr; } .nan-summary-total strong { font-size: 18px; } } /* ═══════════════════════════════════════════════════════════ CHECKOUT PAGE ═══════════════════════════════════════════════════════════ */ .nan-checkout-page { padding: 24px 20px 80px; } .nan-checkout-trust-top { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 16px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 12px; color: #15803d; font-weight: 600; margin-bottom: 24px; } .nan-checkout-h1 { font-size: 28px; font-weight: 900; color: #18181b; margin: 0 0 24px; letter-spacing: -0.5px; } .nan-checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; } /* Form sections */ .nan-section { background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; } .nan-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f3f4f6; } .nan-section-num { width: 28px; height: 28px; background: #18181b; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; } .nan-section-title { font-size: 16px; font-weight: 800; color: #18181b; } .nan-section-body { font-size: 14px; } .nan-login-note { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #1e40af; margin: 0 0 16px; } .nan-login-note a { color: #2563EB; font-weight: 700; text-decoration: underline; } /* Form fields - clean modern inputs */ .nan-checkout-form .form-row { margin-bottom: 14px; } .nan-checkout-form .form-row label { display: block; font-size: 13px; font-weight: 700; color: #18181b; margin-bottom: 5px; } .nan-checkout-form .form-row label .optional { display: none; } .nan-checkout-form .form-row.validate-required label::after { content: ' *'; color: #dc2626; } .nan-checkout-form .form-row input.input-text, .nan-checkout-form .form-row textarea, .nan-checkout-form .form-row select, .nan-checkout-form .form-row .select2-selection { width: 100% !important; padding: 12px 14px !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 15px !important; background: #fff !important; color: #18181b !important; font-family: inherit !important; transition: border-color .15s, box-shadow .15s !important; min-height: 48px !important; box-shadow: none !important; } .nan-checkout-form .form-row input:focus, .nan-checkout-form .form-row textarea:focus, .nan-checkout-form .form-row select:focus { outline: none !important; border-color: var(--blue, #2563EB) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important; } .nan-checkout-form .select2-selection { height: 48px !important; padding: 0 14px !important; display: flex !important; align-items: center !important; } .nan-checkout-form .select2-selection__rendered { line-height: 48px !important; padding: 0 !important; } .nan-checkout-form .form-row.form-row-first, .nan-checkout-form .form-row.form-row-last { width: calc(50% - 8px); display: inline-block; } .nan-checkout-form .form-row.form-row-first { margin-right: 16px; } .nan-ship-toggle { font-size: 14px !important; font-weight: 600 !important; color: #4b5563 !important; margin: 14px 0 !important; padding: 12px 14px; background: #f9fafb; border-radius: 8px; cursor: pointer; } .nan-ship-toggle label { cursor: pointer; } .nan-ship-toggle input { margin-right: 8px; } /* ── Right column: order summary ── */ .nan-checkout-summary-col { position: sticky; top: 24px; } .nan-checkout-summary-sticky { background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 22px; } .nan-checkout-summary-sticky .nan-summary-title { font-size: 16px; font-weight: 800; color: #18181b; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; } /* Style the WC review order table inside our summary box */ #order_review .shop_table { width: 100% !important; border: none !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; } #order_review .shop_table thead { display: none; } #order_review .shop_table tbody td.product-name { font-size: 13px !important; font-weight: 600; color: #18181b; padding: 10px 0 !important; border: none !important; background: transparent !important; } #order_review .shop_table tbody td.product-total { font-size: 13px !important; font-weight: 700; text-align: right; padding: 10px 0 !important; border: none !important; background: transparent !important; white-space: nowrap; } #order_review .shop_table tfoot tr { background: transparent !important; } #order_review .shop_table tfoot th, #order_review .shop_table tfoot td { padding: 8px 0 !important; border-top: 1px solid #f3f4f6 !important; font-size: 13px !important; background: transparent !important; } #order_review .shop_table tfoot tr.order-total th, #order_review .shop_table tfoot tr.order-total td { border-top: 1px solid #18181b !important; padding-top: 14px !important; font-size: 16px !important; font-weight: 900 !important; color: #18181b !important; } /* Payment methods */ #payment { background: transparent !important; border-radius: 0 !important; margin-top: 18px; } #payment ul.payment_methods { border-bottom: none !important; padding: 0 !important; margin: 0 !important; } #payment ul.payment_methods li { background: #fff !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; padding: 12px 14px !important; margin-bottom: 8px !important; list-style: none; transition: border-color .15s, background .15s; } #payment ul.payment_methods li:has(input:checked) { border-color: #18181b !important; background: #f9fafb !important; } #payment ul.payment_methods label { font-size: 14px !important; font-weight: 600 !important; color: #18181b !important; margin-left: 8px; cursor: pointer; } #payment .payment_box { background: transparent !important; padding: 8px 0 0 !important; font-size: 12.5px !important; color: #6b7280 !important; } #payment .payment_box::before { display: none !important; } /* Place order button */ #place_order { width: 100% !important; padding: 16px 24px !important; background: #18181b !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 800 !important; cursor: pointer !important; font-family: inherit !important; margin-top: 16px !important; text-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; min-height: 56px !important; } #place_order:hover { background: #000 !important; transform: translateY(-1px) !important; } .woocommerce-terms-and-conditions-wrapper { font-size: 12px !important; color: #6b7280 !important; margin-top: 14px !important; } .nan-summary-secure-note { margin-top: 16px; padding: 12px 14px; background: #f9fafb; border-radius: 8px; text-align: center; } .nan-summary-secure-note p { font-size: 11.5px; color: #6b7280; margin: 0; } /* ── Checkout Mobile ── */ @media (max-width: 900px) { .nan-checkout-grid { grid-template-columns: 1fr; gap: 16px; } /* Move summary above form on mobile */ .nan-checkout-summary-col { order: -1; position: relative; top: auto; } .nan-checkout-trust-top { gap: 8px; font-size: 11px; padding: 8px 12px; } .nan-section { padding: 18px; } .nan-checkout-h1 { font-size: 22px; } .nan-checkout-form .form-row.form-row-first, .nan-checkout-form .form-row.form-row-last { width: 100%; display: block; margin-right: 0; } } /* ════════════════════════════════════════════════════════════════════════════ CART POLISH — Fix cramped item layout, broken total, quantity buttons ════════════════════════════════════════════════════════════════════════════ */ /* Item meta — display variations inline (Colour: Black, RAM: 8GB, Storage: 256GB) */ .nci-meta { font-size: 12px; color: #6b7280; margin-bottom: 8px; line-height: 1.6; } .nci-meta dl { display: flex !important; flex-wrap: wrap; gap: 4px 12px; margin: 0 !important; } .nci-meta dt, .nci-meta dd { display: inline !important; margin: 0 !important; padding: 0 !important; } .nci-meta dt { font-weight: 700; color: #4b5563; } .nci-meta dt::after { content: ':'; margin-right: 4px; } .nci-meta dd { color: #18181b; } .nci-meta dd + dt { margin-left: 8px !important; } /* Quantity input — clean modern look (NOTE: native browser +/- shows on focus) */ .nci-qty .quantity { display: inline-flex; align-items: center; border: 1.5px solid #e4e4e7; border-radius: 8px; overflow: hidden; background: #fff; } .nci-qty input.qty { width: 56px !important; height: 38px !important; text-align: center !important; border: none !important; background: transparent !important; font-size: 14px !important; font-weight: 700; color: #18181b; padding: 0 8px !important; -moz-appearance: textfield; appearance: textfield; outline: none; } .nci-qty input.qty::-webkit-outer-spin-button, .nci-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Custom +/- buttons via JS injection */ .nci-qty-btn { width: 32px; height: 38px; border: none; background: #f9fafb; color: #18181b; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; font-family: inherit; user-select: none; } .nci-qty-btn:hover { background: #18181b; color: #fff; } .nci-qty-btn:active { transform: scale(0.95); } .nci-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #f9fafb; color: #18181b; } /* Total line - prevent overflow, allow wrap nicely */ .nan-summary-total { align-items: center !important; gap: 12px; flex-wrap: wrap; } .nan-summary-total span { flex-shrink: 0; } .nan-summary-total strong { font-size: 24px !important; font-weight: 900 !important; white-space: nowrap; text-align: right; flex: 1; /* Prevent inner GST text from wrapping the price */ } .nan-summary-total strong .woocommerce-Price-amount { white-space: nowrap; } /* Hide WC's inline "(includes X GST)" text - we show it cleanly below */ .nan-summary-total strong small, .nan-summary-total strong .includes_tax, .nan-summary-total strong .tax_label { display: none !important; } .nan-summary-tax-note { font-size: 12px !important; color: #6b7280 !important; text-align: right !important; margin-bottom: 12px !important; margin-top: 2px !important; font-weight: 600; } /* Coupon error / success — better styling */ .woocommerce-error, .woocommerce-info, .woocommerce-message { list-style: none !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 13.5px !important; margin-bottom: 16px !important; border: 1.5px solid !important; } .woocommerce-error { background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; } .woocommerce-error::before { content: '⚠️ '; margin-right: 4px; } .woocommerce-info { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; } .woocommerce-info::before { content: 'ℹ️ '; margin-right: 4px; } .woocommerce-message { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #15803d !important; } .woocommerce-message::before { content: '✓ '; margin-right: 4px; font-weight: bold; } /* Coupon row with "Apply" button - tighter look */ .nan-coupon-input { height: 40px; } .nan-coupon-btn { height: 40px; } .nan-update-cart-btn { height: 40px; } /* ════════════════════════════════════════════════════════════════════════════ MY ACCOUNT — Modern Dashboard ════════════════════════════════════════════════════════════════════════════ */ .nan-account-page { font-family: var(--s, system-ui, sans-serif); color: #18181b; max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; } /* Welcome header */ .nan-account-header { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #18181b 0%, #27272a 100%); color: #fff; border-radius: 16px; padding: 24px 28px; margin-bottom: 24px; } .nan-account-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--blue, #2563EB); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,.3); } .nan-account-greeting { flex: 1; min-width: 0; } .nan-account-greeting h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: #fff; letter-spacing: -0.4px; } .nan-account-greeting p { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0; } .nan-account-stats-mini { display: flex; gap: 16px; flex-shrink: 0; } .nasm-item { text-align: center; padding: 8px 16px; background: rgba(255,255,255,0.08); border-radius: 10px; min-width: 90px; } .nasm-num { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; } .nasm-num .woocommerce-Price-amount { color: #fff; } .nasm-lbl { font-size: 10.5px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } /* 2-column layout */ .nan-account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; } /* LEFT NAV */ .nan-account-nav { background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 12px; position: sticky; top: 24px; } .nan-account-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #4b5563; text-decoration: none; margin-bottom: 4px; transition: background .15s, color .15s; } .nan-account-nav-item:hover { background: #f9fafb; color: #18181b; } .nan-account-nav-item.active { background: #18181b; color: #fff; } .nan-account-nav-item.nav-logout { color: #dc2626; margin-top: 8px; border-top: 1px solid #f3f4f6; padding-top: 14px; border-radius: 0; } .nan-account-nav-item.nav-logout:hover { background: #fef2f2; color: #b91c1c; } /* RIGHT CONTENT */ .nan-account-content { background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 28px; min-height: 400px; } .nan-section-h2 { font-size: 16px; font-weight: 800; color: #18181b; margin: 0 0 14px; letter-spacing: -0.2px; } /* Quick action grid */ .nan-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; } .nan-quick-card { display: flex; align-items: center; gap: 12px; background: #f9fafb; border: 1.5px solid #e4e4e7; border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; transition: all .15s; } .nan-quick-card:hover { background: #fff; border-color: #18181b; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.05); } .nqc-icon { font-size: 22px; line-height: 1; flex-shrink: 0; } .nqc-text { flex: 1; min-width: 0; } .nqc-text strong { display: block; font-size: 13.5px; font-weight: 700; color: #18181b; margin-bottom: 2px; } .nqc-text span { font-size: 11.5px; color: #6b7280; display: block; } .nqc-arrow { color: #9ca3af; font-size: 16px; flex-shrink: 0; } .nan-quick-card:hover .nqc-arrow { color: #18181b; transform: translateX(2px); } /* Recent order card */ .nan-recent-order { background: #fff; border: 1.5px solid #e4e4e7; border-radius: 12px; padding: 18px 20px; margin-bottom: 28px; } .nro-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #f3f4f6; margin-bottom: 14px; } .nro-head strong { display: block; font-size: 14px; color: #18181b; } .nro-date { font-size: 12px; color: #6b7280; margin-top: 2px; display: block; } .nro-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.3px; } .nro-status-processing, .nro-status-on-hold { background: #fef3c7; color: #92400e; } .nro-status-completed { background: #f0fdf4; color: #15803d; } .nro-status-cancelled, .nro-status-failed { background: #fef2f2; color: #b91c1c; } .nro-status-pending { background: #f3f4f6; color: #4b5563; } .nro-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .nro-item { display: flex; align-items: center; gap: 10px; } .nro-item-text strong { display: block; font-size: 13px; font-weight: 600; color: #18181b; margin-bottom: 2px; } .nro-item-text span { font-size: 11.5px; color: #6b7280; } .nro-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #f3f4f6; } .nro-total { display: flex; flex-direction: column; } .nro-total span { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; } .nro-total strong { font-size: 18px; font-weight: 800; color: #18181b; } .nro-view-btn { background: #18181b; color: #fff !important; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s, transform .1s; } .nro-view-btn:hover { background: #000; transform: translateY(-1px); } /* Trust block at bottom */ .nan-account-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: #f9fafb; border: 1px solid #e4e4e7; border-radius: 12px; padding: 16px 18px; } .nat-item { display: flex; align-items: center; gap: 10px; } .nat-item span:first-child { font-size: 22px; flex-shrink: 0; } .nat-item div { flex: 1; min-width: 0; } .nat-item strong { display: block; font-size: 12.5px; color: #18181b; font-weight: 700; line-height: 1.3; } .nat-item span:last-child { display: block; font-size: 10.5px; color: #6b7280; } /* Better styling for default WC content (Orders table, Address forms, etc.) */ .nan-account-content .woocommerce-orders-table, .nan-account-content .shop_table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: none !important; } .nan-account-content .woocommerce-orders-table thead th { background: #f9fafb !important; color: #6b7280 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 12px 14px !important; border-bottom: 1.5px solid #e4e4e7 !important; } .nan-account-content .woocommerce-orders-table tbody td { padding: 14px !important; font-size: 13.5px !important; border-bottom: 1px solid #f3f4f6 !important; } .nan-account-content .woocommerce-orders-table tbody tr:last-child td { border-bottom: none !important; } .nan-account-content .button { background: #18181b !important; color: #fff !important; border: none !important; padding: 8px 16px !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 700 !important; text-decoration: none !important; } .nan-account-content .button:hover { background: #000 !important; } .nan-account-content .button.view { background: #f3f4f6 !important; color: #18181b !important; } .nan-account-content .button.cancel, .nan-account-content .button.nan_cancel { background: #fef2f2 !important; color: #b91c1c !important; } /* My Account Mobile */ @media (max-width: 900px) { .nan-account-header { flex-direction: column; text-align: center; gap: 12px; padding: 20px; } .nan-account-stats-mini { width: 100%; justify-content: center; } .nan-account-grid { grid-template-columns: 1fr; gap: 14px; } .nan-account-nav { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; } .nan-account-nav-item { flex-direction: column; text-align: center; gap: 4px; padding: 10px 6px; font-size: 11px; } .nan-account-nav-item.nav-logout { grid-column: span 3; flex-direction: row; justify-content: center; margin-top: 4px; padding-top: 10px; } .nan-account-content { padding: 18px; } .nan-quick-grid { grid-template-columns: 1fr; } .nan-account-trust { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .nan-account-trust { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════════ AUTH PAGE — Login / Register (v2 fresh rebuild) ════════════════════════════════════════════════════════════════════════════ */ .nan-auth-wrap { min-height: calc(100vh - 200px); background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%); padding: 40px 20px; display: flex; align-items: center; justify-content: center; } .nan-auth-shell { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; width: 100%; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.1), 0 8px 16px -4px rgba(0,0,0,0.05); overflow: hidden; } /* LEFT panel */ .nan-auth-left { padding: 48px 44px; background: linear-gradient(135deg, #fff 0%, #f9fafb 100%); border-right: 1px solid #f3f4f6; } .nan-auth-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; text-decoration: none; } .nan-auth-logo-box { width: 36px; height: 36px; background: var(--blue, #2563EB); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nan-auth-logo-text { font-size: 22px; font-weight: 800; color: #18181b; letter-spacing: -0.5px; } .nan-auth-logo-text em { font-style: normal; color: var(--blue, #2563EB); font-weight: 800; } .nan-auth-headline { font-size: 26px; font-weight: 800; color: #18181b; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 12px; } .nan-auth-sub { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 28px; } .nan-auth-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; } .nas-card { background: #fff; border: 1.5px solid #e4e4e7; border-radius: 12px; padding: 16px 14px; } .nas-num { font-size: 18px; font-weight: 800; color: var(--blue, #2563EB); letter-spacing: -0.3px; line-height: 1.2; } .nas-lbl { font-size: 11.5px; color: #6b7280; margin-top: 4px; font-weight: 600; } .nan-auth-quote { font-style: italic; font-size: 13px; color: #4b5563; border-left: 3px solid var(--blue, #2563EB); padding: 4px 0 4px 14px; margin: 24px 0 18px; } .nan-auth-browse { display: inline-block; font-size: 13px; color: var(--blue, #2563EB); font-weight: 700; text-decoration: underline; } .nan-auth-browse:hover { color: #1d4ed8; } /* RIGHT panel */ .nan-auth-right { padding: 48px 44px; } .nan-auth-tabs { display: flex; gap: 4px; background: #f3f4f6; padding: 4px; border-radius: 12px; margin-bottom: 28px; } .nan-auth-tab { flex: 1; padding: 10px 12px; background: transparent; border: none; border-radius: 9px; font-size: 14px; font-weight: 700; color: #6b7280; cursor: pointer; transition: all .15s; font-family: inherit; } .nan-auth-tab.active { background: #fff; color: #18181b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .nan-auth-h2 { font-size: 24px; font-weight: 800; color: #18181b; letter-spacing: -0.4px; margin: 0 0 6px; } .nan-auth-p { font-size: 14px; color: #6b7280; margin: 0 0 22px; } .nan-mode-tabs { display: flex; gap: 8px; margin-bottom: 22px; } .nan-mode-btn { flex: 1; padding: 10px 12px; background: #fff; border: 1.5px solid #e4e4e7; border-radius: 10px; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; transition: all .15s; font-family: inherit; } .nan-mode-btn:hover { border-color: #18181b; color: #18181b; } .nan-mode-btn.active { background: #18181b; border-color: #18181b; color: #fff; } .nan-field { margin-bottom: 16px; } .nan-field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nan-field-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 18px; gap: 8px; } .nan-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563; cursor: pointer; margin: 0; } .nan-checkbox input { width: 16px; height: 16px; cursor: pointer; } .nan-lbl { display: block; font-size: 13px; font-weight: 700; color: #18181b; margin-bottom: 6px; } .nan-lbl .nan-opt { font-weight: 500; color: #9ca3af; font-size: 12px; } .nan-input { width: 100%; padding: 12px 14px; border: 1.5px solid #e4e4e7; border-radius: 10px; font-size: 15px; background: #fff; color: #18181b; font-family: inherit; transition: border-color .15s, box-shadow .15s; min-height: 48px; box-sizing: border-box; } .nan-input:focus { outline: none; border-color: var(--blue, #2563EB); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .nan-phone-input { display: flex; align-items: stretch; border: 1.5px solid #e4e4e7; border-radius: 10px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; } .nan-phone-input:focus-within { border-color: var(--blue, #2563EB); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .nan-phone-prefix { display: flex; align-items: center; padding: 0 14px; background: #f9fafb; font-size: 14px; font-weight: 700; color: #4b5563; border-right: 1px solid #e4e4e7; flex-shrink: 0; } .nan-phone-input .nan-input { border: none !important; border-radius: 0 !important; padding-left: 12px !important; background: transparent !important; } .nan-phone-input .nan-input:focus { box-shadow: none !important; } .nan-input-otp { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 12px; font-family: monospace !important; } .nan-btn-primary { width: 100%; padding: 14px 18px; background: var(--blue, #2563EB); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: inherit; min-height: 50px; margin-top: 4px; } .nan-btn-primary:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); } .nan-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .nan-hint { font-size: 12px; color: #9ca3af; margin: 8px 0 0; line-height: 1.5; display: block; } .nan-back-link { background: none; border: none; color: var(--blue, #2563EB); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 14px; font-family: inherit; } .nan-otp-info { font-size: 13px; color: #4b5563; background: #f9fafb; border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; } .nan-otp-info strong { color: #18181b; } .nan-resend { display: block; width: 100%; background: none; border: none; color: var(--blue, #2563EB); font-size: 13px; font-weight: 600; cursor: pointer; padding: 12px; margin-top: 8px; font-family: inherit; } .nan-resend:disabled { color: #9ca3af; cursor: not-allowed; } .nan-resend-timer { color: #9ca3af; } .nan-forgot { font-size: 13px; color: var(--blue, #2563EB); text-decoration: none; font-weight: 600; } .nan-forgot:hover { text-decoration: underline; } .nan-tos { font-size: 11.5px; color: #9ca3af; margin: 14px 0 0; text-align: center; line-height: 1.5; } .nan-tos a { color: var(--blue, #2563EB); text-decoration: underline; } .nan-auth-switch { text-align: center; font-size: 13.5px; color: #6b7280; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #f3f4f6; } .nan-link { background: none; border: none; color: var(--blue, #2563EB); font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; } .nan-link:hover { text-decoration: underline; } .nan-auth-status { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1.5px solid; } .nan-auth-status.success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .nan-auth-status.error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .nan-auth-status.info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; } /* MOBILE */ @media (max-width: 900px) { .nan-auth-wrap { padding: 20px 14px; min-height: auto; } .nan-auth-shell { grid-template-columns: 1fr; max-width: 480px; } .nan-auth-left { padding: 32px 24px 24px; border-right: none; border-bottom: 1px solid #f3f4f6; } .nan-auth-right { padding: 32px 24px; } .nan-auth-headline { font-size: 22px; } .nan-auth-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .nas-card { padding: 12px 10px; } .nas-num { font-size: 16px; } } @media (max-width: 480px) { .nan-auth-h2 { font-size: 22px; } .nan-mode-btn { font-size: 12px; padding: 9px 8px; } .nan-field-row-2 { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════════ AUTH PAGE — break out of WC page constraints The .sw wrapper has max-width that squashes our 2-col grid. For not-logged-in users on /my-account, override. ════════════════════════════════════════════════════════════════════════════ */ /* Hide the page-hero (My Account title bar) when showing auth screen */ body.woocommerce-page:not(.logged-in) .page-hero { display: none !important; } /* Make the content area full-width for auth */ body.woocommerce-page:not(.logged-in) .section { padding: 0 !important; background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%); } body.woocommerce-page:not(.logged-in) .section > .sw { max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } body.woocommerce-page:not(.logged-in) .page-content { max-width: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Force grid to be 2-column on auth */ .nan-auth-shell { display: grid !important; grid-template-columns: 1fr 1fr !important; max-width: 1000px !important; width: 100% !important; margin: 0 auto !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.1), 0 8px 16px -4px rgba(0,0,0,0.05) !important; overflow: hidden !important; } /* Make sure both panels render */ .nan-auth-left, .nan-auth-right { display: block !important; width: 100% !important; } .nan-auth-right { padding: 48px 44px !important; background: #fff !important; } /* Mobile override */ @media (max-width: 900px) { .nan-auth-shell { grid-template-columns: 1fr !important; max-width: 480px !important; } } /* Form panels — visibility controlled by inline style + JS (NO CSS override) */ .nan-auth-panel[style*="display:none"] { display: none !important; } /* Brighter background for the auth wrap */ .nan-auth-wrap { min-height: calc(100vh - 200px) !important; background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%) !important; padding: 40px 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; } @media (max-width: 900px) { .nan-auth-wrap { padding: 20px 14px !important; min-height: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ AUTH PAGE — FORCE LAYOUT (highest specificity) ═══════════════════════════════════════════════════════════════════════════ */ /* Reset any inherited width constraints */ .nan-auth-wrap, .nan-auth-wrap *, body .nan-auth-shell { box-sizing: border-box; } /* Force the wrap to take full width and proper bg */ body .nan-auth-wrap { width: 100% !important; max-width: none !important; min-height: 80vh !important; background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important; padding: 32px 16px !important; margin: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; } /* Force shell to 2-col grid — !important everywhere */ body .nan-auth-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: 100% !important; max-width: 1080px !important; margin: 0 auto !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.12) !important; overflow: hidden !important; min-height: 600px !important; } /* Both panels equal height, equal width */ body .nan-auth-shell > .nan-auth-left, body .nan-auth-shell > .nan-auth-right { min-width: 0 !important; width: 100% !important; display: block !important; padding: 48px 44px !important; box-sizing: border-box !important; } body .nan-auth-shell > .nan-auth-left { background: linear-gradient(160deg, #fff 0%, #f8fafc 100%) !important; border-right: 1px solid #f1f5f9 !important; } body .nan-auth-shell > .nan-auth-right { background: #fff !important; } /* Mobile: stack */ @media (max-width: 900px) { body .nan-auth-shell { grid-template-columns: 1fr !important; max-width: 480px !important; min-height: auto !important; } body .nan-auth-shell > .nan-auth-left { padding: 32px 24px 24px !important; border-right: none !important; border-bottom: 1px solid #f1f5f9 !important; } body .nan-auth-shell > .nan-auth-right { padding: 32px 24px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ OTP PLUGIN STYLING — make its raw form elements look beautiful Plugin classes: .lwp_phone_login, .lwp_form, .lh-form-container, etc. Also covers raw input/select/button elements when plugin renders them ═══════════════════════════════════════════════════════════════════════════ */ /* Style ALL form elements inside the right auth panel */ .nan-auth-right form, .nan-auth-right .lwp_phone_login, .nan-auth-right .lh-form-container { width: 100% !important; margin: 0 !important; } /* All labels inside auth right panel */ .nan-auth-right p > label, .nan-auth-right label:not(.nan-checkbox):not(.nan-mode-btn) { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #18181b !important; margin-bottom: 6px !important; font-family: inherit !important; } /* All input/select inside auth right panel */ .nan-auth-right input[type="text"], .nan-auth-right input[type="tel"], .nan-auth-right input[type="email"], .nan-auth-right input[type="password"], .nan-auth-right input[type="number"], .nan-auth-right select { width: 100% !important; padding: 12px 14px !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 15px !important; background: #fff !important; color: #18181b !important; font-family: inherit !important; min-height: 48px !important; box-sizing: border-box !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s !important; } .nan-auth-right input:focus, .nan-auth-right select:focus { outline: none !important; border-color: var(--blue, #2563EB) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; } /* Phone field with country code — flex layout */ .nan-auth-right p:has(select + input), .nan-auth-right .lwp_username_field { display: flex !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; } .nan-auth-right p:has(select + input) > select, .nan-auth-right .lwp_username_field > select { width: 90px !important; flex-shrink: 0 !important; } .nan-auth-right p:has(select + input) > input, .nan-auth-right .lwp_username_field > input { flex: 1 !important; min-width: 0 !important; } /* All buttons inside auth right panel */ .nan-auth-right button, .nan-auth-right input[type="submit"] { width: 100% !important; padding: 14px 18px !important; background: #2563EB !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; min-height: 50px !important; margin-top: 6px !important; margin-bottom: 0 !important; text-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transition: background .15s, transform .1s !important; } .nan-auth-right button:hover, .nan-auth-right input[type="submit"]:hover { background: #1d4ed8 !important; transform: translateY(-1px) !important; } /* Tab buttons (Sign In / Create Account) — keep their special styling */ .nan-auth-right .nan-auth-tabs button.nan-auth-tab { background: transparent !important; color: #6b7280 !important; min-height: auto !important; padding: 10px 12px !important; font-size: 14px !important; border-radius: 9px !important; margin: 0 !important; } .nan-auth-right .nan-auth-tabs button.nan-auth-tab.active { background: #fff !important; color: #18181b !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } /* "Create one" link button — should look like a link, not button */ .nan-auth-right button.nan-link, .nan-auth-right .nan-auth-switch button { background: transparent !important; color: #2563EB !important; width: auto !important; padding: 0 !important; min-height: auto !important; margin: 0 !important; font-size: inherit !important; font-weight: 700 !important; display: inline !important; text-decoration: none !important; } .nan-auth-right button.nan-link:hover { background: transparent !important; color: #1d4ed8 !important; text-decoration: underline !important; transform: none !important; } /* Two buttons side by side (Login with OTP / Login with Email & Password) */ .nan-auth-right p:has(button + button) { display: flex !important; gap: 8px !important; } .nan-auth-right p:has(button + button) > button { flex: 1 !important; min-width: 0 !important; } /* Welcome back / titles - bigger, cleaner */ .nan-auth-right h2, .nan-auth-right .nan-auth-h2 { font-size: 26px !important; font-weight: 800 !important; color: #18181b !important; letter-spacing: -0.5px !important; margin: 0 0 8px !important; } .nan-auth-right .nan-auth-p { font-size: 14px !important; color: #6b7280 !important; margin: 0 0 24px !important; } /* Plugin notes/messages */ .nan-auth-right .lwp_message, .nan-auth-right .lwp_error, .nan-auth-right .lwp_success { padding: 10px 14px !important; border-radius: 8px !important; font-size: 13px !important; margin: 8px 0 !important; } .nan-auth-right .lwp_error { background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; } .nan-auth-right .lwp_success { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; } /* Stat cards on left - keep them clean */ .nan-auth-left .nas-card { background: #fff !important; border: 1.5px solid #e4e4e7 !important; border-radius: 12px !important; padding: 14px 14px !important; } .nan-auth-left .nas-num { font-size: 18px !important; font-weight: 800 !important; color: #2563EB !important; letter-spacing: -0.3px !important; } .nan-auth-left .nas-lbl { font-size: 11.5px !important; color: #6b7280 !important; margin-top: 4px !important; font-weight: 600 !important; } .nan-auth-left .nan-auth-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 22px 0 22px !important; } /* Auth quote */ .nan-auth-left .nan-auth-quote { font-style: italic !important; font-size: 13px !important; color: #4b5563 !important; border-left: 3px solid #2563EB !important; padding: 4px 0 4px 14px !important; margin: 22px 0 16px !important; background: transparent !important; } /* Auth headline */ .nan-auth-left .nan-auth-headline { font-size: 26px !important; font-weight: 800 !important; color: #18181b !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; margin: 0 0 12px !important; } .nan-auth-left .nan-auth-sub { font-size: 14px !important; color: #6b7280 !important; line-height: 1.6 !important; margin: 0 0 8px !important; } /* Logo */ .nan-auth-left .nan-auth-logo { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 28px !important; text-decoration: none !important; } .nan-auth-left .nan-auth-logo-box { width: 36px !important; height: 36px !important; background: #2563EB !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .nan-auth-left .nan-auth-logo-text { font-size: 22px !important; font-weight: 800 !important; color: #18181b !important; letter-spacing: -0.5px !important; text-decoration: none !important; } /* Browse link */ .nan-auth-left .nan-auth-browse { display: inline-block !important; font-size: 13px !important; color: #2563EB !important; font-weight: 700 !important; text-decoration: underline !important; margin-top: 8px !important; } /* ════════════════════════════════════════════════════════════════════════════ XOO-ML PLUGIN STYLING — exact targeting based on rendered HTML Plugin: Mobile Login Woocommerce (xoo-ml-*) ════════════════════════════════════════════════════════════════════════════ */ /* Plugin-injected phone input wrapper */ .nan-auth-right .xoo-ml-phinput-cont { margin-bottom: 16px !important; padding: 0 !important; } .nan-auth-right .xoo-ml-phinput-cont label { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #18181b !important; margin-bottom: 6px !important; } /* The flex container with country code + phone */ .nan-auth-right .xoo-ml-has-cc { display: flex !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; } /* Country code dropdown */ .nan-auth-right .xoo-ml-phone-cc { width: 95px !important; flex-shrink: 0 !important; padding: 12px 8px !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 13px !important; min-height: 48px !important; background: #f9fafb !important; color: #18181b !important; font-family: inherit !important; cursor: pointer !important; } /* Phone input wrapper */ .nan-auth-right .xoo-ml-regphin { flex: 1 !important; min-width: 0 !important; display: flex !important; align-items: stretch !important; position: relative !important; } /* Phone number input */ .nan-auth-right .xoo-ml-phone-input { width: 100% !important; padding: 12px 14px !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 15px !important; background: #fff !important; color: #18181b !important; font-family: inherit !important; min-height: 48px !important; box-sizing: border-box !important; box-shadow: none !important; } .nan-auth-right .xoo-ml-phone-input:focus, .nan-auth-right .xoo-ml-phone-cc:focus { outline: none !important; border-color: #2563EB !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; } /* "Or" separator */ .nan-auth-right .xoo-ml-or { display: block !important; text-align: center !important; font-size: 12px !important; color: #9ca3af !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 16px 0 !important; position: relative !important; } .nan-auth-right .xoo-ml-or::before, .nan-auth-right .xoo-ml-or::after { content: '' !important; position: absolute !important; top: 50% !important; width: calc(50% - 24px) !important; height: 1px !important; background: #e4e4e7 !important; } .nan-auth-right .xoo-ml-or::before { left: 0 !important; } .nan-auth-right .xoo-ml-or::after { right: 0 !important; } /* "Login with OTP" primary button */ .nan-auth-right .xoo-ml-login-otp-btn, .nan-auth-right .xoo-ml-open-lwo-btn { width: 100% !important; padding: 14px 18px !important; background: #2563EB !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; min-height: 50px !important; margin-top: 6px !important; margin-bottom: 0 !important; text-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transition: background .15s, transform .1s !important; } .nan-auth-right .xoo-ml-login-otp-btn:hover, .nan-auth-right .xoo-ml-open-lwo-btn:hover { background: #1d4ed8 !important; transform: translateY(-1px) !important; } /* "Login with Email & Password" secondary button */ .nan-auth-right .xoo-ml-low-back { width: 100% !important; padding: 14px 18px !important; background: #fff !important; color: #18181b !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; min-height: 50px !important; margin-top: 8px !important; transition: all .15s !important; } .nan-auth-right .xoo-ml-low-back:hover { border-color: #18181b !important; background: #f9fafb !important; transform: translateY(-1px) !important; } /* OTP input field (after "Verify") */ .nan-auth-right .xoo-ml-inline-otp-cont { margin-top: 14px !important; } .nan-auth-right .xoo-ml-ioc-input { display: flex !important; gap: 8px !important; align-items: stretch !important; } .nan-auth-right .xoo-ml-otp-input { flex: 1 !important; padding: 12px 14px !important; border: 1.5px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 4px !important; text-align: center !important; min-height: 48px !important; font-family: monospace !important; } .nan-auth-right .xoo-ml-otp-submit-btn { padding: 12px 20px !important; background: #18181b !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; cursor: pointer !important; font-size: 14px !important; } .nan-auth-right .xoo-ml-otp-resend { margin-top: 10px !important; text-align: center !important; font-size: 12.5px !important; } .nan-auth-right .xoo-ml-otp-resend-link { color: #2563EB !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; } .nan-auth-right .xoo-ml-otp-resend-timer { color: #9ca3af !important; margin-left: 6px !important; } /* Plugin notice messages */ .nan-auth-right .xoo-ml-notice, .nan-auth-right .xoo-ml-notice-error, .nan-auth-right .xoo-ml-notice-success { padding: 10px 14px !important; border-radius: 8px !important; font-size: 13px !important; margin: 10px 0 !important; font-weight: 500 !important; } .nan-auth-right .xoo-ml-notice-error { background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; } .nan-auth-right .xoo-ml-notice-success { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; } /* "Login with OTP" form placeholder area */ .nan-auth-right .xoo-ml-lwo-form-placeholder { margin-top: 12px !important; } /* "Change?" link in registration */ .nan-auth-right .xoo-ml-reg-phone-change { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 12px !important; color: #2563EB !important; cursor: pointer !important; font-weight: 600 !important; } /* The hint text that says "You can log in with email or 10-digit mobile" */ .nan-auth-right form > p[style*="font-size:12px"] { font-size: 12px !important; color: #6b7280 !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 8px !important; padding: 10px 12px !important; margin-bottom: 16px !important; margin-top: 0 !important; } /* Privacy policy text */ .nan-auth-right .woocommerce-privacy-policy-text { font-size: 11.5px !important; color: #9ca3af !important; margin: 12px 0 !important; line-height: 1.5 !important; } .nan-auth-right .woocommerce-privacy-policy-text p { margin: 0 !important; } .nan-auth-right .woocommerce-privacy-policy-link { color: #2563EB !important; text-decoration: underline !important; } /* Hide the duplicated email/password fields from our static template — Xoo plugin replaces them with its OTP UI which is what we want */ .nan-auth-right .nan-auth-panel[data-panel="login"] form > .nan-field { /* Show our custom email+password until plugin's "Login with Email & Password" toggle is clicked */ display: block !important; } /* Hide the WC required asterisk styling in plugin */ .nan-auth-right .xoo-ml-phinput-cont .required { color: #dc2626 !important; } /* Plugin's xoo-el-form-login that has display:none from inline CSS — keep it hidden */ .xoo-el-form-login { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ FINAL UX FIXES — based on actual rendered output ════════════════════════════════════════════════════════════════════════════ */ /* Error message — should be full width, not narrow column */ .nan-auth-right .xoo-ml-notice-error, .nan-auth-right .xoo-ml-lwo-form-placeholder .xoo-ml-notice-error, .nan-auth-right [class*="notice-error"] { display: block !important; width: 100% !important; max-width: 100% !important; margin: 12px 0 !important; padding: 12px 14px !important; font-size: 13px !important; line-height: 1.5 !important; background: #fef2f2 !important; color: #b91c1c !important; border: 1.5px solid #fecaca !important; border-radius: 10px !important; white-space: normal !important; box-sizing: border-box !important; } /* "OR" divider — proper spacing */ .nan-auth-right .xoo-ml-or { margin: 14px 0 !important; } /* Buttons in Login with OTP placeholder — better spacing */ .nan-auth-right .xoo-ml-lwo-form-placeholder { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Stack: Login with OTP, OR, Login with Email & Password — uniform spacing */ .nan-auth-right .xoo-ml-login-otp-btn { margin-bottom: 0 !important; } .nan-auth-right .xoo-ml-low-back { margin-top: 14px !important; } /* Tab buttons — make sure active state is visually clear */ .nan-auth-right .nan-auth-tab { background: transparent !important; color: #6b7280 !important; border: none !important; border-radius: 9px !important; padding: 10px 12px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; transition: all .15s !important; min-height: auto !important; margin: 0 !important; font-family: inherit !important; } .nan-auth-right .nan-auth-tab.active { background: #fff !important; color: #18181b !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } .nan-auth-right .nan-auth-tabs { display: flex !important; gap: 4px !important; background: #f3f4f6 !important; padding: 4px !important; border-radius: 12px !important; margin-bottom: 28px !important; } /* The "Login with OTP" + email password options should be inside the form, looking like one cohesive block */ .nan-auth-right .woocommerce-form-login { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Make sure there's clean spacing between sections */ .nan-auth-right .nan-auth-h2 { margin: 0 0 4px !important; font-size: 24px !important; } .nan-auth-right .nan-auth-p { margin: 0 0 22px !important; font-size: 14px !important; color: #6b7280 !important; } /* Hide WC-injected order attribution element if visible */ .nan-auth-right wc-order-attribution-inputs { display: none !important; } /* The "VERIFY" button on register form */ .nan-auth-right .xoo-ml-inline-verify { display: inline-block !important; background: #18181b !important; color: #fff !important; padding: 10px 16px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; margin-left: 8px !important; } /* ════════════════════════════════════════════════════════════════════════════ PANEL VISIBILITY — bulletproof class-based control No inline styles, no specificity battles, just pure class toggle ════════════════════════════════════════════════════════════════════════════ */ /* By default panels can show */ body .nan-auth-shell .nan-auth-panel { display: block; } /* Hidden state via class — wins over everything */ body .nan-auth-shell .nan-auth-panel.nan-panel-hidden, .nan-auth-panel.nan-panel-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM POLISH — make the form actually look good ════════════════════════════════════════════════════════════════════════════ */ /* Right panel — generous padding, clean white */ body .nan-auth-right { padding: 56px 48px !important; background: #fff !important; } /* Tabs — premium pill style */ body .nan-auth-tabs { background: #f4f5f7 !important; padding: 5px !important; border-radius: 14px !important; margin-bottom: 32px !important; gap: 0 !important; } body .nan-auth-tab { flex: 1 !important; padding: 12px 14px !important; font-size: 14.5px !important; font-weight: 700 !important; color: #6b7280 !important; border-radius: 10px !important; min-height: 44px !important; } body .nan-auth-tab.active { background: #fff !important; color: #18181b !important; box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important; } /* Heading - stronger */ body .nan-auth-h2 { font-size: 28px !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.6px !important; margin: 0 0 6px !important; line-height: 1.2 !important; } body .nan-auth-p { font-size: 14.5px !important; color: #64748b !important; margin: 0 0 28px !important; line-height: 1.5 !important; } /* Phone field — premium look */ body .nan-auth-right .xoo-ml-phinput-cont { margin-bottom: 18px !important; } body .nan-auth-right .xoo-ml-phinput-cont > label { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; margin-bottom: 8px !important; letter-spacing: 0.1px !important; } body .nan-auth-right .xoo-ml-phinput-cont > label .required { color: #dc2626 !important; } /* Country code dropdown — cleaner */ body .nan-auth-right .xoo-ml-phone-cc { width: 105px !important; padding: 0 12px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 600 !important; height: 52px !important; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2364748b' d='M5 7L0 2l1-1 4 4 4-4 1 1z'/%3E%3C/svg%3E") no-repeat right 12px center !important; color: #0f172a !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; } /* Phone input — premium */ body .nan-auth-right .xoo-ml-phone-input { height: 52px !important; padding: 0 16px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; color: #0f172a !important; background: #fff !important; letter-spacing: 0.5px !important; } body .nan-auth-right .xoo-ml-phone-input::placeholder { color: #cbd5e1 !important; font-weight: 500 !important; letter-spacing: 0 !important; } body .nan-auth-right .xoo-ml-phone-input:focus, body .nan-auth-right .xoo-ml-phone-cc:focus { border-color: #2563EB !important; box-shadow: 0 0 0 4px rgba(37,99,235,0.1) !important; outline: none !important; } /* Buttons — premium feel */ body .nan-auth-right .xoo-ml-login-otp-btn, body .nan-auth-right .xoo-ml-open-lwo-btn, body .nan-auth-right .nan-btn-primary { height: 52px !important; padding: 0 18px !important; background: linear-gradient(180deg, #2563EB 0%, #1d4ed8 100%) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(37,99,235,0.3), 0 4px 12px rgba(37,99,235,0.18) !important; transition: all .15s !important; margin: 18px 0 0 !important; text-shadow: none !important; text-transform: none !important; width: 100% !important; } body .nan-auth-right .xoo-ml-login-otp-btn:hover, body .nan-auth-right .xoo-ml-open-lwo-btn:hover, body .nan-auth-right .nan-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 1px 2px rgba(37,99,235,0.3), 0 8px 20px rgba(37,99,235,0.25) !important; } body .nan-auth-right .xoo-ml-login-otp-btn:active, body .nan-auth-right .nan-btn-primary:active { transform: translateY(0) !important; } /* Secondary outline button */ body .nan-auth-right .xoo-ml-low-back { height: 52px !important; background: #fff !important; color: #0f172a !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.1px !important; cursor: pointer !important; margin-top: 16px !important; transition: all .15s !important; width: 100% !important; box-shadow: none !important; } body .nan-auth-right .xoo-ml-low-back:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; transform: translateY(-1px) !important; } /* OR divider — cleaner */ body .nan-auth-right .xoo-ml-or { display: block !important; text-align: center !important; font-size: 11px !important; font-weight: 700 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; margin: 18px 0 !important; position: relative !important; padding: 0 !important; border: none !important; background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; } body .nan-auth-right .xoo-ml-or::before, body .nan-auth-right .xoo-ml-or::after { content: '' !important; position: absolute !important; top: 50% !important; width: calc(50% - 28px) !important; height: 1px !important; background: #e2e8f0 !important; } body .nan-auth-right .xoo-ml-or::before { left: 0 !important; } body .nan-auth-right .xoo-ml-or::after { right: 0 !important; } /* Email/password fields — match phone field style */ body .nan-auth-right .nan-input, body .nan-auth-right input[type="text"], body .nan-auth-right input[type="email"], body .nan-auth-right input[type="password"] { height: 52px !important; padding: 0 16px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 500 !important; color: #0f172a !important; background: #fff !important; width: 100% !important; box-sizing: border-box !important; transition: border-color .15s, box-shadow .15s !important; } body .nan-auth-right input::placeholder { color: #cbd5e1 !important; font-weight: 400 !important; } body .nan-auth-right input:focus { outline: none !important; border-color: #2563EB !important; box-shadow: 0 0 0 4px rgba(37,99,235,0.1) !important; } /* Field labels — consistent */ body .nan-auth-right .nan-lbl, body .nan-auth-right label.nan-lbl { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; margin-bottom: 8px !important; letter-spacing: 0.1px !important; } /* Field rows */ body .nan-auth-right .nan-field { margin-bottom: 18px !important; } /* Remember me row */ body .nan-auth-right .nan-field-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 14px 0 22px !important; } body .nan-auth-right .nan-checkbox { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13.5px !important; color: #475569 !important; cursor: pointer !important; margin: 0 !important; } body .nan-auth-right .nan-checkbox input { width: 16px !important; height: 16px !important; margin: 0 !important; cursor: pointer !important; accent-color: #2563EB !important; } body .nan-auth-right .nan-forgot { font-size: 13px !important; color: #2563EB !important; font-weight: 600 !important; text-decoration: none !important; } body .nan-auth-right .nan-forgot:hover { text-decoration: underline !important; } /* Switch tabs link at bottom */ body .nan-auth-switch { text-align: center !important; font-size: 13.5px !important; color: #64748b !important; margin: 28px 0 0 !important; padding-top: 22px !important; border-top: 1px solid #f1f5f9 !important; } body .nan-auth-switch button.nan-link { background: none !important; border: none !important; color: #2563EB !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; font-size: inherit !important; padding: 0 !important; margin: 0 0 0 4px !important; height: auto !important; min-height: 0 !important; width: auto !important; box-shadow: none !important; } body .nan-auth-switch button.nan-link:hover { text-decoration: underline !important; transform: none !important; } /* "Login with Email & Password" hint banner inside form */ body .nan-auth-right form > p[style*="font-size:12px"] { background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 12.5px !important; color: #1e40af !important; line-height: 1.5 !important; margin: 0 0 18px !important; } body .nan-auth-right form > p[style*="font-size:12px"] strong { color: #1e3a8a !important; } /* Privacy policy text — subtle */ body .nan-auth-right .woocommerce-privacy-policy-text { margin: 14px 0 !important; padding: 0 !important; } body .nan-auth-right .woocommerce-privacy-policy-text p { font-size: 11.5px !important; color: #94a3b8 !important; line-height: 1.5 !important; margin: 0 !important; } /* TOS line below register */ body .nan-auth-right .nan-tos { font-size: 11.5px !important; color: #94a3b8 !important; text-align: center !important; line-height: 1.5 !important; margin: 14px 0 !important; } /* LEFT panel — premium */ body .nan-auth-left { padding: 56px 48px !important; background: linear-gradient(160deg, #fafbfc 0%, #f1f5f9 100%) !important; border-right: 1px solid #e2e8f0 !important; } body .nan-auth-left .nan-auth-headline { font-size: 28px !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.6px !important; line-height: 1.2 !important; margin: 0 0 14px !important; } body .nan-auth-left .nan-auth-sub { font-size: 14.5px !important; color: #64748b !important; line-height: 1.6 !important; margin: 0 0 28px !important; } body .nan-auth-left .nas-card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 16px 16px !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; } body .nan-auth-left .nas-num { font-size: 20px !important; font-weight: 800 !important; color: #2563EB !important; letter-spacing: -0.4px !important; line-height: 1.1 !important; } body .nan-auth-left .nas-lbl { font-size: 11.5px !important; color: #64748b !important; margin-top: 4px !important; font-weight: 600 !important; } body .nan-auth-left .nan-auth-quote { font-style: italic !important; font-size: 13.5px !important; color: #475569 !important; border-left: 3px solid #2563EB !important; padding: 6px 0 6px 16px !important; margin: 24px 0 16px !important; background: transparent !important; line-height: 1.5 !important; } body .nan-auth-left .nan-auth-browse { display: inline-block !important; font-size: 13.5px !important; color: #2563EB !important; font-weight: 700 !important; text-decoration: none !important; padding: 8px 0 !important; transition: transform .15s !important; } body .nan-auth-left .nan-auth-browse:hover { transform: translateX(2px) !important; text-decoration: underline !important; } /* Mobile */ @media (max-width: 900px) { body .nan-auth-left, body .nan-auth-right { padding: 36px 24px !important; } body .nan-auth-h2, body .nan-auth-left .nan-auth-headline { font-size: 22px !important; } } /* ════════════════════════════════════════════════════════════════════════════ FIX OTP FLOW UI — submit button color, input layout, resend timer ════════════════════════════════════════════════════════════════════════════ */ /* OTP inline container — proper layout */ body .nan-auth-right .xoo-ml-inline-otp-cont { margin-top: 14px !important; } /* OTP input + Submit button row */ body .nan-auth-right .xoo-ml-ioc-input { display: flex !important; gap: 10px !important; align-items: stretch !important; width: 100% !important; } /* OTP input field */ body .nan-auth-right .xoo-ml-otp-input { flex: 1 !important; height: 52px !important; min-height: 52px !important; padding: 0 16px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 8px !important; text-align: center !important; font-family: monospace !important; color: #0f172a !important; background: #fff !important; width: 100% !important; box-sizing: border-box !important; } body .nan-auth-right .xoo-ml-otp-input::placeholder { color: #cbd5e1 !important; font-weight: 500 !important; letter-spacing: 4px !important; } body .nan-auth-right .xoo-ml-otp-input:focus { border-color: #2563EB !important; box-shadow: 0 0 0 4px rgba(37,99,235,0.1) !important; outline: none !important; } /* SUBMIT button — was black, make it BLUE */ body .nan-auth-right .xoo-ml-otp-submit-btn { height: 52px !important; padding: 0 24px !important; background: linear-gradient(180deg, #2563EB 0%, #1d4ed8 100%) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(37,99,235,0.3), 0 4px 12px rgba(37,99,235,0.18) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; min-width: 100px !important; text-transform: uppercase !important; transition: all .15s !important; } body .nan-auth-right .xoo-ml-otp-submit-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 1px 2px rgba(37,99,235,0.3), 0 8px 20px rgba(37,99,235,0.25) !important; } /* Inline verify span (rendered as button text) */ body .nan-auth-right .xoo-ml-inline-verify { color: inherit !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } /* Resend OTP area — better layout */ body .nan-auth-right .xoo-ml-otp-resend { display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; margin-top: 12px !important; font-size: 13px !important; color: #64748b !important; } body .nan-auth-right .xoo-ml-otp-resend-link { color: #2563EB !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; } body .nan-auth-right .xoo-ml-otp-resend-link:hover { text-decoration: underline !important; } body .nan-auth-right .xoo-ml-otp-resend-timer { color: #94a3b8 !important; font-weight: 500 !important; font-size: 12.5px !important; } /* Notice box (success/error from plugin) */ body .nan-auth-right .xoo-ml-notice, body .nan-auth-right .xoo-ml-notice-success, body .nan-auth-right .xoo-ml-notice-error { margin: 12px 0 !important; padding: 12px 14px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; border: 1.5px solid !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } body .nan-auth-right .xoo-ml-notice-success { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; } body .nan-auth-right .xoo-ml-notice-error { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; } /* The xoo-ml-otp-no-txt span (shows "+91 7905708996") */ body .nan-auth-right .xoo-ml-otp-no-txt { display: block !important; margin-top: 8px !important; font-size: 12px !important; color: #64748b !important; } /* "Change?" link in registration */ body .nan-auth-right .xoo-ml-reg-phone-change { position: static !important; display: inline-block !important; margin-top: 6px !important; margin-left: 0 !important; transform: none !important; font-size: 12px !important; color: #2563EB !important; cursor: pointer !important; font-weight: 600 !important; } body .nan-auth-right .xoo-ml-reg-phone-change:hover { text-decoration: underline !important; } /* Hide the empty country code dropdown that shows below phone input Only one .xoo-ml-phone-cc should be visible per form */ body .nan-auth-right .xoo-ml-has-cc + .xoo-ml-phone-cc, body .nan-auth-right .xoo-ml-regphin .xoo-ml-phone-cc { display: none !important; } /* Make sure the phone input layout is correct */ body .nan-auth-right .xoo-ml-regphin { flex: 1 !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; } body .nan-auth-right .xoo-ml-has-cc { display: flex !important; gap: 10px !important; align-items: flex-start !important; } /* ════════════════════════════════════════════════════════════════════════════ FIX OTP LAYOUT — proper full-width below phone, no overlap ════════════════════════════════════════════════════════════════════════════ */ /* Make sure the OTP container appears as a full block BELOW the phone field */ body .nan-auth-right .xoo-ml-inline-otp-cont { display: block !important; width: 100% !important; margin-top: 16px !important; clear: both !important; } /* The OTP input + button row */ body .nan-auth-right .xoo-ml-ioc-input { display: flex !important; gap: 10px !important; width: 100% !important; margin-bottom: 8px !important; flex-wrap: nowrap !important; } /* OTP input takes available space */ body .nan-auth-right .xoo-ml-ioc-input .xoo-ml-otp-input, body .nan-auth-right input.xoo-ml-otp-input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 52px !important; padding: 0 16px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 6px !important; text-align: center !important; font-family: monospace !important; color: #0f172a !important; background: #fff !important; box-sizing: border-box !important; } body .nan-auth-right .xoo-ml-otp-input::placeholder { color: #94a3b8 !important; font-weight: 500 !important; letter-spacing: 4px !important; font-size: 14px !important; } /* SUBMIT button — fixed width, doesn't overflow */ body .nan-auth-right .xoo-ml-ioc-input .xoo-ml-otp-submit-btn, body .nan-auth-right span.xoo-ml-otp-submit-btn { flex: 0 0 auto !important; width: auto !important; min-width: 96px !important; max-width: 110px !important; height: 52px !important; padding: 0 16px !important; background: linear-gradient(180deg, #2563EB 0%, #1d4ed8 100%) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-transform: uppercase !important; box-shadow: 0 1px 2px rgba(37,99,235,0.3) !important; margin: 0 !important; } /* Hide ANY duplicate empty country code dropdown after the active one */ body .nan-auth-right .xoo-ml-phinput-cont .xoo-ml-phone-cc:nth-of-type(2), body .nan-auth-right .xoo-ml-regphin select.xoo-ml-phone-cc { display: none !important; } /* Hide empty hidden phone-cc that shows up under the input */ body .nan-auth-right select.xoo-ml-phone-cc:not(:first-of-type) { display: none !important; } /* Hide the "Email" placeholder letter visible inside SUBMIT — that's actually the OTP input's "E[nter OTP]" placeholder leaking. Fix by ensuring OTP input placeholder isn't truncated. */ body .nan-auth-right .xoo-ml-otp-input { overflow: visible !important; text-overflow: clip !important; } /* Resend area - clean inline */ body .nan-auth-right .xoo-ml-otp-resend { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; margin: 12px 0 !important; font-size: 13px !important; color: #64748b !important; } body .nan-auth-right .xoo-ml-otp-resend-link { color: #2563EB !important; font-weight: 600 !important; text-decoration: none !important; } /* OTP success/info text — green message about "code sent to..." */ body .nan-auth-right .xoo-ml-otp-no-txt { display: block !important; margin-top: 8px !important; padding: 10px 12px !important; background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.5 !important; } /* ─── Cart notice (coupon feedback etc.) ─── */ .nan-cart-page .woocommerce-message, .nan-cart-page .woocommerce-error, .nan-cart-page .woocommerce-info { padding: 13px 18px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 600 !important; margin-bottom: 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; list-style: none !important; } .nan-cart-page .woocommerce-message { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; } .nan-cart-page .woocommerce-error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; } .nan-cart-page .woocommerce-info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; } .nan-cart-page .woocommerce-message::before, .nan-cart-page .woocommerce-error::before, .nan-cart-page .woocommerce-info::before { display:none !important; } /* ══════════════════════════════════════════════════════════════════ CHECKOUT — Minimal styling on top of WC default layout WC handles col2-set float layout. We only style colors/borders. ══════════════════════════════════════════════════════════════════ */ /* Trust bar */ .nan-co-trust-bar { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:10px 16px; font-size:12px; color:#15803d; font-weight:600; margin-bottom:24px; } /* Form fields */ .woocommerce-checkout .form-row { margin-bottom:14px !important; } .woocommerce-checkout .form-row label { font-size:13px !important; font-weight:700 !important; color:#0f172a !important; margin-bottom:6px !important; display:block !important; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { height:46px !important; padding:0 14px !important; border:1.5px solid #e2e8f0 !important; border-radius:10px !important; font-size:14px !important; font-family:inherit !important; box-shadow:none !important; outline:none !important; transition:border-color .15s !important; box-sizing:border-box !important; width:100% !important; } .woocommerce-checkout .form-row textarea { height:auto !important; padding:12px 14px !important; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus { border-color:#2563EB !important; box-shadow:0 0 0 3px rgba(37,99,235,.1) !important; } /* Section cards */ .woocommerce-checkout h3 { font-size:15px; font-weight:800; color:#0f172a; margin:0 0 16px !important; padding-bottom:10px; border-bottom:2px solid #f1f5f9; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { background:#fff; border:1.5px solid #e4e4e7; border-radius:12px; padding:20px; margin-bottom:16px; } /* Order review */ .woocommerce-checkout-review-order { background:#fff; border:1.5px solid #e4e4e7; border-radius:14px; overflow:hidden; } .woocommerce-checkout-review-order-table { width:100%; border-collapse:collapse; } .woocommerce-checkout-review-order-table thead th { background:#f9fafb; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b7280; padding:12px 16px; border-bottom:1px solid #f3f4f6; } .woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tfoot td, .woocommerce-checkout-review-order-table tfoot th { padding:12px 16px; font-size:13.5px; border-bottom:1px solid #f3f4f6; vertical-align:middle; } .woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce-checkout-review-order-table tfoot tr.order-total td { font-size:17px !important; font-weight:800 !important; color:#0f172a !important; border-bottom:none; padding-top:16px; } /* Payment */ #payment { background:#fff; border:1.5px solid #e4e4e7; border-top:none; border-radius:0 0 14px 14px; padding:20px; } #payment .payment_methods { list-style:none; padding:0; margin:0 0 16px; } #payment .payment_methods li { border:1.5px solid #e4e4e7; border-radius:10px; padding:14px 16px; margin-bottom:8px; } #payment .payment_methods label { font-size:14px !important; font-weight:700 !important; color:#0f172a !important; cursor:pointer; display:flex; align-items:center; gap:10px; margin:0 !important; } #payment #place_order { width:100%; height:52px; background:linear-gradient(180deg,#1e293b,#0f172a); color:#fff; border:none; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:all .15s; display:block; margin-top:16px; } #payment #place_order:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.32); } /* Woo notices in checkout */ .woocommerce-NoticeGroup-checkout .woocommerce-error, .woocommerce-error.woocommerce-invalid-email, .woocommerce-notices-wrapper .woocommerce-error { background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:12px 16px; font-size:13.5px; color:#b91c1c; list-style:none; margin-bottom:16px; } /* Mobile — v12.9: removed conflicting layout rules. page.php Grid handles all responsive. */ /* ============================================================================ ╔════════════════════════════════════════════════════════════════════════╗ ║ NewAsNew v11.9 — DESIGN REFRESH ║ ║ Cart + Checkout premium UX overhaul ║ ║ This block is appended at the end so it WINS over earlier rules. ║ ║ All earlier .nan-cart-* / .nan-checkout-* / WC default styling is ║ ║ superseded here. Clean design tokens, generous spacing, modern feel. ║ ╚════════════════════════════════════════════════════════════════════════╝ ============================================================================ */ /* Design tokens scoped to commerce pages — don't pollute global :root */ .nan-cart-page, .woocommerce-checkout #content { --n-ink: #0f172a; --n-ink-2: #334155; --n-ink-3: #64748b; --n-ink-4: #94a3b8; --n-line: #e2e8f0; --n-line-2: #f1f5f9; --n-bg: #ffffff; --n-bg-alt: #f8fafc; --n-bg-page: #f4f4f5; --n-accent: #2563eb; --n-accent-h: #1d4ed8; --n-success: #16a34a; --n-success-bg: #f0fdf4; --n-success-border: #bbf7d0; --n-danger: #dc2626; --n-radius: 12px; --n-radius-sm: 8px; --n-radius-lg: 16px; --n-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --n-shadow: 0 4px 16px -4px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04); --n-font: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --n-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ============================================================================ CART PAGE — REFRESH ============================================================================ */ .nan-cart-page { font-family: var(--n-font) !important; color: var(--n-ink) !important; max-width: 1200px !important; margin: 0 auto !important; padding: 24px 20px 48px !important; letter-spacing: -.005em; } /* Hide v11.8 trust strip if it ever re-renders */ .nan-cart-page > .nan-cart-trust { display: none !important; } /* Header */ .nan-cart-page .nan-cart-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--n-line); } .nan-cart-page .nan-cart-title { font-size: 32px !important; font-weight: 800 !important; margin: 0 !important; color: var(--n-ink) !important; letter-spacing: -.025em; line-height: 1.1; display: block; } .nan-cart-page .nan-cart-sub { margin: 4px 0 0 !important; font-size: 14px !important; color: var(--n-ink-3) !important; font-weight: 500 !important; } .nan-cart-page .nan-cart-back { font-size: 14px !important; color: var(--n-ink-3) !important; text-decoration: none !important; font-weight: 600 !important; transition: color .15s ease; white-space: nowrap; } .nan-cart-page .nan-cart-back:hover { color: var(--n-ink) !important; } /* Grid */ .nan-cart-page .nan-cart-grid { display: grid !important; grid-template-columns: 1fr 380px !important; gap: 28px !important; align-items: start !important; } /* Items column wrapper */ .nan-cart-page .nan-cart-items-form { background: transparent !important; border: none !important; padding: 0 !important; width: auto !important; float: none !important; } .nan-cart-page .nan-cart-items { background: var(--n-bg) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius-lg) !important; padding: 8px 4px !important; box-shadow: var(--n-shadow-sm); } /* Item card */ .nan-cart-page .nan-cart-item { display: grid !important; grid-template-columns: 100px 1fr auto; gap: 20px; padding: 20px !important; border-bottom: 1px solid var(--n-line-2) !important; align-items: start; background: transparent; border-radius: 0; border-left: none !important; border-right: none !important; border-top: none !important; } .nan-cart-page .nan-cart-item:last-child { border-bottom: none !important; } /* Thumbnail */ .nan-cart-page .nci-thumb { width: 100px; height: 100px; border-radius: var(--n-radius); background: var(--n-bg-alt); overflow: hidden; border: 1px solid var(--n-line); flex-shrink: 0; } .nan-cart-page .nci-thumb a, .nan-cart-page .nci-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .nan-cart-page .nci-thumb img { border-radius: 0 !important; border: none !important; width: 100% !important; height: 100% !important; } /* Info — v12.0: aggressive overflow-wrap prevents one-word-per-line wrapping if parent column is narrowed by any external rule. */ .nan-cart-page .nci-info { min-width: 0 !important; overflow-wrap: break-word !important; word-wrap: break-word; } .nan-cart-page .nci-name, .nan-cart-page .nci-name a { overflow-wrap: break-word !important; word-break: normal !important; white-space: normal !important; } .nan-cart-page .nci-brand { font-size: 11.5px !important; font-weight: 700 !important; color: var(--n-ink-3) !important; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px !important; } .nan-cart-page .nci-name { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 8px !important; line-height: 1.4 !important; color: var(--n-ink) !important; } .nan-cart-page .nci-name a { color: inherit !important; text-decoration: none !important; } .nan-cart-page .nci-name a:hover { color: var(--n-accent) !important; } .nan-cart-page .nci-meta { font-size: 12.5px !important; color: var(--n-ink-3) !important; margin-bottom: 12px !important; line-height: 1.6; } .nan-cart-page .nci-meta dl, .nan-cart-page .nci-meta dt, .nan-cart-page .nci-meta dd, .nan-cart-page .nci-meta p { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } .nan-cart-page .nci-meta dt { font-weight: 600 !important; color: var(--n-ink-2) !important; } .nan-cart-page .nci-meta dt::after { content: ' '; } .nan-cart-page .nci-meta dd::after { content: ' · '; color: var(--n-line); } .nan-cart-page .nci-meta dd:last-of-type::after { content: ''; } /* Hide old badges row if present */ .nan-cart-page .nci-badges { display: none !important; } .nan-cart-page .nci-bottom { display: none !important; } /* Actions row (qty + remove) */ .nan-cart-page .nci-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; } /* Quantity selector — modern segmented look */ .nan-cart-page .nci-qty .quantity { display: inline-flex !important; align-items: center !important; gap: 0 !important; background: var(--n-bg); border: 1px solid var(--n-line); border-radius: var(--n-radius-sm); overflow: hidden; height: 36px; } .nan-cart-page .nci-qty .screen-reader-text { position:absolute; left:-9999px; } .nan-cart-page .nci-qty input.qty { border: none !important; width: 40px !important; height: 100% !important; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; background: transparent !important; color: var(--n-ink) !important; font-family: inherit !important; -moz-appearance: textfield; outline: none !important; box-shadow: none !important; } .nan-cart-page .nci-qty input.qty::-webkit-inner-spin-button, .nan-cart-page .nci-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .nan-cart-page .nci-qty-btn { width: 36px; height: 100%; border: none; background: transparent; color: var(--n-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; padding: 0; font-family: inherit; } .nan-cart-page .nci-qty-btn:hover:not(:disabled) { background: var(--n-bg-alt); color: var(--n-accent); } .nan-cart-page .nci-qty-btn:disabled { opacity: .35; cursor: not-allowed; } .nan-cart-page .nci-qty-minus { border-right: 1px solid var(--n-line); } .nan-cart-page .nci-qty-plus { border-left: 1px solid var(--n-line); } .nan-cart-page .nci-qty-fixed { display: inline-block; font-size: 14px; font-weight: 700; color: var(--n-ink-2); padding: 0 12px; line-height: 36px; background: var(--n-bg-alt); border: 1px solid var(--n-line); border-radius: var(--n-radius-sm); } /* Remove link */ .nan-cart-page .nci-remove { font-size: 13px !important; font-weight: 600 !important; color: var(--n-ink-3) !important; text-decoration: none !important; background: transparent !important; border: none !important; padding: 0 !important; height: auto !important; width: auto !important; border-radius: 0 !important; display: inline !important; transition: color .15s ease; } .nan-cart-page .nci-remove::before { content: '' !important; display: none !important; } .nan-cart-page .nci-remove:hover { color: var(--n-danger) !important; } /* Price */ .nan-cart-page .nci-price { font-size: 18px !important; font-weight: 800 !important; color: var(--n-ink) !important; text-align: right; white-space: nowrap; letter-spacing: -.01em; } .nan-cart-page .nci-price .woocommerce-Price-amount { font-weight: 800 !important; color: inherit !important; font-size: inherit !important; } /* Coupon details */ .nan-cart-page .nan-cart-coupon { margin-top: 16px; background: var(--n-bg); border: 1px solid var(--n-line); border-radius: var(--n-radius); padding: 0; overflow: hidden; } .nan-cart-page .nan-cart-coupon summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 13.5px; font-weight: 600; color: var(--n-ink-2); display: flex; align-items: center; justify-content: space-between; user-select: none; } .nan-cart-page .nan-cart-coupon summary::-webkit-details-marker { display: none; } .nan-cart-page .nan-cart-coupon summary::after { content: '+'; font-size: 18px; color: var(--n-ink-3); line-height: 1; } .nan-cart-page .nan-cart-coupon[open] summary::after { content: '−'; } .nan-cart-page .nan-cart-coupon-row { display: flex; gap: 8px; padding: 0 18px 16px; } .nan-cart-page .nan-cart-coupon-input { flex: 1; height: 40px; padding: 0 14px; border: 1px solid var(--n-line); border-radius: var(--n-radius-sm); font-size: 14px; font-family: inherit; background: var(--n-bg-alt); color: var(--n-ink); outline: none; } .nan-cart-page .nan-cart-coupon-input:focus { border-color: var(--n-accent); background: var(--n-bg); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } .nan-cart-page .nan-cart-coupon-btn { height: 40px; padding: 0 18px; background: var(--n-ink); color: #fff; border: none; border-radius: var(--n-radius-sm); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s ease; } .nan-cart-page .nan-cart-coupon-btn:hover { background: #000; } .nan-cart-page .nan-cart-update-hidden { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* Hide legacy elements that may still render */ .nan-cart-page .nan-cart-bottom-actions, .nan-cart-page .nan-update-cart-btn, .nan-cart-page .nan-coupon-box, .nan-cart-page .nan-cart-banner { display: none !important; } /* SUMMARY CARD */ .nan-cart-page .nan-cart-summary { position: sticky; top: 24px; } .nan-cart-page .nan-summary-card { background: var(--n-bg) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius-lg) !important; padding: 24px !important; box-shadow: var(--n-shadow-sm); } .nan-cart-page .nan-summary-h2 { font-size: 18px !important; font-weight: 800 !important; margin: 0 0 18px !important; color: var(--n-ink) !important; letter-spacing: -.01em; padding-bottom: 0 !important; border-bottom: none !important; } .nan-cart-page .nan-summary-rows { margin: 0 0 16px !important; padding: 0 !important; } .nan-cart-page .nan-summary-row { display: flex; justify-content: space-between; align-items: center; margin: 0 !important; padding: 8px 0 !important; font-size: 14px; } .nan-cart-page .nan-summary-row dt, .nan-cart-page .nan-summary-row dd { margin: 0 !important; padding: 0 !important; font-size: inherit !important; } .nan-cart-page .nan-summary-row dt { color: var(--n-ink-2) !important; font-weight: 500 !important; } .nan-cart-page .nan-summary-row dd { color: var(--n-ink) !important; font-weight: 700 !important; } .nan-cart-page .nan-summary-row .woocommerce-Price-amount { font-weight: 700 !important; font-family: inherit !important; } .nan-cart-page .nan-summary-free { color: var(--n-success) !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: .04em; } .nan-cart-page .nan-summary-discount, .nan-cart-page .nan-summary-coupon dd { color: var(--n-success) !important; font-weight: 700 !important; } .nan-cart-page .nan-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px !important; border-top: 1.5px solid var(--n-line) !important; margin-top: 4px; border-bottom: none !important; } .nan-cart-page .nan-summary-total span { font-size: 14px !important; font-weight: 700 !important; color: var(--n-ink) !important; text-transform: none !important; letter-spacing: 0 !important; } .nan-cart-page .nan-summary-total strong { font-size: 24px !important; font-weight: 800 !important; color: var(--n-ink) !important; letter-spacing: -.02em; } .nan-cart-page .nan-summary-total .woocommerce-Price-amount { font-size: 24px !important; font-weight: 800 !important; color: inherit !important; } .nan-cart-page .nan-summary-tax-note { margin: 0 0 16px !important; font-size: 12px !important; color: var(--n-ink-3) !important; text-align: right; padding: 0 !important; background: transparent !important; } /* CTA */ .nan-cart-page .nan-summary-cta { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 52px; padding: 0 20px !important; background: var(--n-ink) !important; color: #fff !important; border: none !important; border-radius: var(--n-radius) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; transition: background .15s ease, transform .1s ease; letter-spacing: -.005em; text-align: center !important; text-transform: none !important; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .25); } .nan-cart-page .nan-summary-cta:hover { background: #000 !important; transform: translateY(-1px); color: #fff !important; box-shadow: 0 8px 16px -4px rgba(15, 23, 42, .3); } .nan-cart-page .nan-summary-cta:active { transform: translateY(0); } .nan-cart-page .nan-summary-cta svg { flex-shrink: 0; transition: transform .15s ease; } .nan-cart-page .nan-summary-cta:hover svg { transform: translateX(2px); } /* Hide legacy CTA + payment icons */ .nan-cart-page .nan-checkout-btn, .nan-cart-page .nan-summary-pay-icons, .nan-cart-page .nan-cart-why, .nan-cart-page .nan-summary-divider { display: none !important; } /* Trust list inside summary */ .nan-cart-page .nan-summary-trust { list-style: none !important; margin: 18px 0 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--n-line-2); } .nan-cart-page .nan-summary-trust li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--n-ink-2); font-weight: 500; padding: 5px 0; margin: 0 !important; } .nan-cart-page .nan-summary-trust li::before { content: '' !important; display: none !important; } .nan-cart-page .nan-summary-trust li span { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; } /* Mobile sticky bottom bar — hidden by default, shown on mobile. v12.0: Added !important to prevent display from being overridden by any cached/conflicting external rule. */ .nan-cart-page .nan-cart-mobile-bar { display: none !important; } /* Cart mobile */ @media (max-width: 900px) { .nan-cart-page { padding: 16px 14px 100px !important; } .nan-cart-page .nan-cart-header { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 16px; margin-bottom: 18px; } .nan-cart-page .nan-cart-title { font-size: 26px !important; } .nan-cart-page .nan-cart-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .nan-cart-page .nan-cart-summary { position: static; } .nan-cart-page .nan-cart-item { grid-template-columns: 80px 1fr !important; gap: 14px !important; padding: 16px !important; } .nan-cart-page .nci-thumb { width: 80px; height: 80px; } .nan-cart-page .nci-price { grid-column: 2; text-align: left; font-size: 16px !important; margin-top: 6px; } .nan-cart-page .nci-actions { flex-wrap: wrap; } /* Mobile sticky CTA bar */ .nan-cart-page .nan-cart-mobile-bar { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--n-bg); border-top: 1px solid var(--n-line); padding: 12px 16px; gap: 12px; align-items: center; box-shadow: 0 -4px 16px -4px rgba(15, 23, 42, .12); } .nan-cart-page .nan-cart-mobile-total { flex: 1; min-width: 0; } .nan-cart-page .nan-cart-mobile-total-label { display: block; font-size: 11px; color: var(--n-ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .nan-cart-page .nan-cart-mobile-total strong { font-size: 18px; font-weight: 800; color: var(--n-ink); } .nan-cart-page .nan-cart-mobile-cta { background: var(--n-ink); color: #fff !important; padding: 12px 22px; border-radius: var(--n-radius); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } } /* ============================================================================ CHECKOUT PAGE — REFRESH ============================================================================ */ /* Wrapper styling — page bg light gray, content max-width centered */ body.woocommerce-checkout { background: var(--n-bg-page) !important; } .woocommerce-checkout #content { font-family: var(--n-font); color: var(--n-ink); letter-spacing: -.005em; } /* Hide the cluttered legacy elements */ .woocommerce-checkout .nan-co-trust-bar, .woocommerce-checkout .nan-why-block, .woocommerce-checkout .nan-summary-trust-row { display: none !important; } /* Show coupon toggle in a cleaner form */ .woocommerce-checkout .woocommerce-form-coupon-toggle { background: var(--n-bg) !important; border: 1px dashed var(--n-line) !important; border-radius: var(--n-radius) !important; padding: 0 !important; margin-bottom: 20px !important; display: block !important; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { display: flex !important; align-items: center; gap: 8px; background: transparent !important; border: none !important; padding: 14px 18px !important; margin: 0 !important; font-size: 13.5px !important; color: var(--n-ink-2) !important; font-weight: 500 !important; list-style: none !important; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { content: '🎟️'; font-size: 16px; margin-right: 4px; display: inline-block !important; } .woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon { font-size: 13.5px !important; color: var(--n-accent) !important; font-weight: 700 !important; text-decoration: underline !important; margin-left: auto; } .woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover { color: var(--n-accent-h) !important; } /* Coupon expanded form */ .woocommerce-checkout form.checkout_coupon { background: var(--n-bg) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius) !important; padding: 16px 18px !important; margin-bottom: 24px !important; } .woocommerce-checkout form.checkout_coupon .form-row { margin: 0 8px 0 0 !important; display: inline-block !important; width: auto !important; vertical-align: middle; } .woocommerce-checkout form.checkout_coupon .form-row-first { width: calc(100% - 130px) !important; } .woocommerce-checkout form.checkout_coupon .button { background: var(--n-ink) !important; color: #fff !important; border: none !important; border-radius: var(--n-radius-sm) !important; padding: 0 20px !important; height: 46px !important; font-size: 13.5px !important; font-weight: 700 !important; cursor: pointer; font-family: inherit !important; } /* MAIN CHECKOUT FORM LAYOUT v12.9: Layout moved to page.php inline CSS using CSS Grid. The legacy float-based rules below caused conflicts (display:block, float:left, width:58% overrode our Grid layout). All neutralized — page.php is now the single source of truth for checkout layout. */ /* .woocommerce-checkout form.checkout — handled in page.php via Grid */ /* .woocommerce-checkout #customer_details — handled in page.php */ /* .woocommerce-checkout #order_review_heading — handled in page.php */ /* .woocommerce-checkout #order_review — handled in page.php */ /* .woocommerce-checkout form.checkout::after — neutralized in page.php */ /* Single-column inside customer_details — col-1 and col-2 stack vertically. This stays here because it's not about the OUTER layout, it's about the inner col-1/col-2 stacking which is the same in both float and grid layouts. */ .woocommerce-checkout #customer_details > .col-1, .woocommerce-checkout #customer_details > .col-2 { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 0 18px !important; max-width: none !important; flex: none !important; } /* Section cards: billing-fields, shipping-fields, additional-fields, order_review */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout #nan-gst-section { background: var(--n-bg) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius-lg) !important; padding: 24px !important; margin: 0 0 18px !important; box-shadow: var(--n-shadow-sm); } /* Section h3s */ .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout #ship-to-different-address { font-size: 17px !important; font-weight: 800 !important; color: var(--n-ink) !important; margin: 0 0 18px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--n-line-2) !important; letter-spacing: -.01em; display: block !important; } /* Billing fields wrapper has its own h3 outside the wrapper, normalize */ .woocommerce-checkout .woocommerce-billing-fields { background: var(--n-bg) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius-lg) !important; padding: 24px !important; margin: 0 0 18px !important; box-shadow: var(--n-shadow-sm); } .woocommerce-checkout .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* Hide redundant nested h3 inside shipping-fields */ .woocommerce-checkout .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper { background: transparent !important; border: none !important; padding: 16px 0 0 !important; margin: 0 !important; box-shadow: none !important; } /* Ship to checkbox label */ .woocommerce-checkout #ship-to-different-address label { cursor: pointer; font-size: 17px !important; font-weight: 800 !important; color: var(--n-ink) !important; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; } .woocommerce-checkout #ship-to-different-address input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--n-accent); cursor: pointer; } .woocommerce-checkout #ship-to-different-address span { font-size: 17px !important; font-weight: 800 !important; } /* Additional fields h3 */ .woocommerce-checkout .woocommerce-additional-fields > h3 { font-size: 15px !important; font-weight: 700 !important; color: var(--n-ink) !important; margin: 0 0 14px !important; padding: 0 !important; border: none !important; } /* Form rows */ .woocommerce-checkout .form-row { margin: 0 0 16px !important; padding: 0 !important; } .woocommerce-checkout .form-row.form-row-first, .woocommerce-checkout .form-row.form-row-last { width: calc(50% - 8px) !important; display: inline-block !important; margin-right: 0 !important; vertical-align: top; } .woocommerce-checkout .form-row.form-row-first { margin-right: 16px !important; } .woocommerce-checkout .form-row.form-row-wide, .woocommerce-checkout .form-row.notes { width: 100% !important; display: block !important; } .woocommerce-checkout .form-row label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--n-ink-2) !important; margin: 0 0 6px !important; letter-spacing: 0 !important; } .woocommerce-checkout .form-row label .required { color: var(--n-danger) !important; font-size: 12px; margin-left: 2px; } .woocommerce-checkout .form-row label .optional { color: var(--n-ink-4) !important; font-size: 12px; font-weight: 500; margin-left: 4px; } .woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { display: block !important; width: 100% !important; height: 46px !important; padding: 0 14px !important; background: var(--n-bg) !important; border: 1.5px solid var(--n-line) !important; border-radius: var(--n-radius-sm) !important; font-family: inherit !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--n-ink) !important; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; line-height: 1.4; } .woocommerce-checkout .form-row textarea { height: auto !important; min-height: 80px !important; padding: 12px 14px !important; resize: vertical; } .woocommerce-checkout .form-row input.input-text::placeholder, .woocommerce-checkout .form-row textarea::placeholder { color: var(--n-ink-4) !important; font-weight: 400; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus { border-color: var(--n-accent) !important; background: var(--n-bg) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important; } /* Validation states */ .woocommerce-checkout .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout .form-row.woocommerce-invalid select, .woocommerce-checkout .form-row.woocommerce-invalid textarea { border-color: var(--n-danger) !important; } .woocommerce-checkout .form-row.woocommerce-validated input.input-text, .woocommerce-checkout .form-row.woocommerce-validated select { border-color: var(--n-success) !important; } /* Select2 (state dropdown) — match the input style */ .woocommerce-checkout .select2-container .select2-selection--single { height: 46px !important; border: 1.5px solid var(--n-line) !important; border-radius: var(--n-radius-sm) !important; background: var(--n-bg) !important; } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 14px !important; font-size: 14.5px !important; color: var(--n-ink) !important; } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 44px !important; } .woocommerce-checkout .select2-container--open .select2-selection--single { border-color: var(--n-accent) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important; } /* GST section — looks like other form sections */ .woocommerce-checkout #nan-gst-section { background: var(--n-bg) !important; } .woocommerce-checkout .nan-gst-toggle-label { display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0 !important; } .woocommerce-checkout .nan-gst-toggle-label input { margin-top: 3px; accent-color: var(--n-accent); width: 18px; height: 18px; flex-shrink: 0; } .woocommerce-checkout .nan-gst-toggle-text strong { display: block; font-size: 15px; font-weight: 700; color: var(--n-ink); margin-bottom: 2px; } .woocommerce-checkout .nan-gst-toggle-text { font-size: 13px; color: var(--n-ink-3); line-height: 1.5; } /* OTP UI box */ .woocommerce-checkout #nan-co-otp-wrap { background: var(--n-bg-alt) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius-sm) !important; } /* ORDER REVIEW (right column) */ .woocommerce-checkout #order_review_heading { font-size: 17px !important; font-weight: 800 !important; color: var(--n-ink) !important; margin: 0 0 12px !important; padding: 0 !important; letter-spacing: -.01em; border: none !important; } .woocommerce-checkout #order_review { background: var(--n-bg) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius-lg) !important; padding: 0 !important; overflow: hidden; box-shadow: var(--n-shadow); position: sticky; top: 24px; } /* Order review table */ .woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td { padding: 16px 20px !important; font-size: 13.5px !important; border-bottom: 1px solid var(--n-line-2) !important; vertical-align: top !important; background: transparent !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name { color: var(--n-ink) !important; font-weight: 600 !important; line-height: 1.55; padding-right: 14px !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name strong.product-quantity { color: var(--n-ink-3); font-weight: 600; font-size: 12.5px; margin-left: 6px; white-space: nowrap; } /* v13.4.0: variation rows are now stacked in a 2-column grid for clarity. The inline CSS in inc/checkout-summary.php is what actually takes effect at runtime (LiteSpeed-proof) — these rules mirror it for cleanliness. */ .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name dl.variation { display: grid !important; grid-template-columns: max-content 1fr !important; column-gap: 10px !important; row-gap: 3px !important; margin: 10px 0 0 !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--n-ink-3) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name dl.variation dt, .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name dl.variation dd { display: block !important; margin: 0 !important; padding: 0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name dl.variation dt { font-weight: 600 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name dl.variation dd::after { content: '' !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name dl.variation p { display: inline !important; margin: 0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total { text-align: right !important; font-weight: 700 !important; color: var(--n-ink) !important; white-space: nowrap; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td { padding: 10px 20px !important; font-size: 13.5px !important; border: none !important; background: transparent !important; vertical-align: top !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal { border-top: 1px solid var(--n-line) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th { padding-top: 16px !important; color: var(--n-ink-2) !important; font-weight: 500 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td { padding-top: 16px !important; text-align: right !important; font-weight: 700 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping th { color: var(--n-ink-2) !important; font-weight: 500 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td { text-align: right !important; font-weight: 700 !important; color: var(--n-success) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td label, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td ul.woocommerce-shipping-methods { margin: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--n-success) !important; list-style: none !important; padding: 0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td ul li input[type="radio"] { display: none; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total { border-top: 1.5px solid var(--n-line) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th { padding-top: 16px !important; padding-bottom: 6px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--n-ink) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td { padding-top: 16px !important; padding-bottom: 6px !important; text-align: right !important; font-size: 22px !important; font-weight: 800 !important; color: var(--n-ink) !important; letter-spacing: -.02em; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount { font-size: 22px !important; font-weight: 800 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td small.includes_tax { display: block; font-size: 11.5px !important; font-weight: 500 !important; color: var(--n-ink-3) !important; margin-top: 4px; } /* PAYMENT METHODS */ .woocommerce-checkout #payment { background: var(--n-bg-alt) !important; border: none !important; border-top: 1px solid var(--n-line) !important; border-radius: 0 !important; padding: 20px !important; margin: 0 !important; } .woocommerce-checkout #payment ul.payment_methods, .woocommerce-checkout #payment .payment_methods { list-style: none !important; padding: 0 !important; margin: 0 0 16px !important; border: none !important; } .woocommerce-checkout #payment ul.payment_methods li, .woocommerce-checkout #payment .payment_methods li { background: var(--n-bg) !important; border: 1.5px solid var(--n-line) !important; border-radius: var(--n-radius) !important; padding: 14px 16px !important; margin-bottom: 8px !important; list-style: none !important; transition: border-color .15s ease, background .15s ease; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked), .woocommerce-checkout #payment .payment_methods li:has(input[type="radio"]:checked) { border-color: var(--n-ink) !important; background: var(--n-bg) !important; box-shadow: 0 0 0 3px rgba(15, 23, 42, .06); } .woocommerce-checkout #payment ul.payment_methods li label, .woocommerce-checkout #payment .payment_methods li label { display: flex !important; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px !important; font-weight: 700 !important; color: var(--n-ink) !important; margin: 0 !important; flex: 1; } .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--n-ink); flex-shrink: 0; } .woocommerce-checkout #payment ul.payment_methods li label img { height: 22px !important; width: auto !important; margin-left: auto !important; } .woocommerce-checkout #payment .payment_box { background: var(--n-bg-alt) !important; margin: 12px 0 0 !important; padding: 12px 14px !important; border-radius: var(--n-radius-sm) !important; font-size: 12.5px !important; color: var(--n-ink-3) !important; line-height: 1.6; } .woocommerce-checkout #payment .payment_box::before { display: none !important; } .woocommerce-checkout #payment .payment_box p { margin: 0 0 6px !important; } .woocommerce-checkout #payment .payment_box p:last-child { margin: 0 !important; } /* Terms checkbox */ .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 12px 0 16px !important; font-size: 12px !important; color: var(--n-ink-3) !important; line-height: 1.6; } .woocommerce-checkout #payment .woocommerce-privacy-policy-text p { margin: 0 !important; font-size: 12px !important; } .woocommerce-checkout #payment .woocommerce-privacy-policy-link { color: var(--n-accent) !important; text-decoration: underline !important; } /* Place order button — clean, large, premium */ .woocommerce-checkout #payment .form-row.place-order { margin: 0 !important; padding: 0 !important; } .woocommerce-checkout #place_order { display: block !important; width: 100% !important; height: 56px !important; padding: 0 24px !important; background: var(--n-ink) !important; background-image: none !important; color: #fff !important; border: none !important; border-radius: var(--n-radius) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 800 !important; cursor: pointer !important; text-shadow: none !important; letter-spacing: -.005em !important; text-transform: none !important; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .25) !important; transition: background .15s ease, transform .1s ease, box-shadow .15s ease !important; margin: 0 !important; min-height: 0 !important; } .woocommerce-checkout #place_order:hover { background: #000 !important; transform: translateY(-1px) !important; box-shadow: 0 8px 16px -4px rgba(15, 23, 42, .3) !important; } .woocommerce-checkout #place_order:active { transform: translateY(0) !important; } .woocommerce-checkout #place_order:disabled { background: var(--n-ink-3) !important; cursor: not-allowed !important; opacity: .7; } /* Notices */ .woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error { border-radius: var(--n-radius) !important; font-size: 13.5px !important; padding: 12px 16px !important; margin: 0 0 16px !important; list-style: none !important; } /* Mobile checkout — v12.9: layout neutralized, page.php Grid handles all responsive */ @media (max-width: 900px) { /* width/float overrides removed — page.php Grid switches to single-column at 920px */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout #nan-gst-section { padding: 18px !important; border-radius: 12px !important; } .woocommerce-checkout .form-row.form-row-first, .woocommerce-checkout .form-row.form-row-last { width: 100% !important; margin-right: 0 !important; } } /* ============================================================================ END v11.9 DESIGN REFRESH ============================================================================ */