/** * gend.me checkout — glassmorphic payment methods + staggered entrance. * * Restyles the WooCommerce Blocks payment-method radio list (PayPal, Pay * with DGEN, Bitcoin/Lightning, Crypto, etc.) into glass cards that match * the dashboard, fixes the default light-grey "selected method" description * box, and staggers each option's entrance so the list builds itself. * Loaded on every checkout by Gend_CP_Wallet_Checkout::enqueue_payment_styles(). */ :root { --gco-glass-bg: rgba(255, 255, 255, 0.04); --gco-glass-border: rgba(137, 194, 224, 0.28); --gco-content-bg: rgba(15, 23, 42, 0.55); --gco-neon: #8b5cf6; --gco-neon-2: #6366f1; } /* ── Each payment option → glass card ───────────────────────────── */ .wc-block-components-radio-control__option { position: relative; background: var(--gco-glass-bg) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; margin-bottom: 12px !important; padding: 16px 18px 16px 46px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; animation: gcoBuildIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .wc-block-components-radio-control__option:hover { transform: translateY(-2px); border-color: rgba(137, 194, 224, 0.5) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38) !important; } /* selected state */ .wc-block-components-radio-control__option--checked, .wc-block-components-radio-control__option-checked { border-color: var(--gco-neon) !important; background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.04)) !important; box-shadow: 0 0 0 1px var(--gco-neon), 0 16px 40px rgba(139, 92, 246, 0.28) !important; } /* radio dot */ .wc-block-components-radio-control__input { left: 18px !important; border-color: rgba(137, 194, 224, 0.5) !important; background: transparent !important; } .wc-block-components-radio-control__option--checked .wc-block-components-radio-control__input, .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input { border-color: var(--gco-neon) !important; } /* labels / text */ .wc-block-components-radio-control__label, .wc-block-components-payment-method-label { color: #e6ebf2 !important; font-weight: 600 !important; } .wc-block-components-radio-control__description { color: #94a3b8 !important; } /* ── The "selected method" description box (was light-grey) → glass ─ */ .wc-block-components-radio-control-accordion-content { background: var(--gco-content-bg) !important; color: #cbd5e1 !important; border: 1px solid var(--gco-glass-border) !important; border-radius: 12px !important; margin-top: 10px !important; } .wc-block-components-radio-control-accordion-content * { color: #cbd5e1 !important; } /* caret/triangle that points up to the selected option */ .wc-block-components-radio-control-accordion-content::before, .wc-block-components-radio-control-accordion-content::after { border-bottom-color: var(--gco-content-bg) !important; } /* gateway icons sit a touch higher on the new padding */ .wc-block-components-payment-method-icons { margin-top: 0 !important; } /* ── Staggered "builds itself" entrance ─────────────────────────── */ @keyframes gcoBuildIn { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } } .wc-block-components-radio-control__option:nth-child(1) { animation-delay: 0.05s; } .wc-block-components-radio-control__option:nth-child(2) { animation-delay: 0.12s; } .wc-block-components-radio-control__option:nth-child(3) { animation-delay: 0.19s; } .wc-block-components-radio-control__option:nth-child(4) { animation-delay: 0.26s; } .wc-block-components-radio-control__option:nth-child(5) { animation-delay: 0.33s; } .wc-block-components-radio-control__option:nth-child(6) { animation-delay: 0.40s; } .wc-block-components-radio-control__option:nth-child(7) { animation-delay: 0.47s; } .wc-block-components-radio-control__option:nth-child(8) { animation-delay: 0.54s; } .wc-block-components-radio-control__option:nth-child(9) { animation-delay: 0.61s; } .wc-block-components-radio-control__option:nth-child(10) { animation-delay: 0.68s; } /* ───────────────────────────────────────────────────────────────── CLASSIC checkout — used inside the Top-Up "SECURE CHECKOUT" popup iframe (?gend_embed=1 renders the classic [woocommerce_checkout] because WC Blocks won't surface gateways in an iframe). Different markup: ul.wc_payment_methods > li.wc_payment_method, and the grey description box is .payment_box (with a ::before caret triangle). ───────────────────────────────────────────────────────────────── */ ul.wc_payment_methods, ul.wc_payment_methods.payment_methods { list-style: none !important; margin: 0 !important; padding: 0 !important; } ul.wc_payment_methods > li.wc_payment_method, ul.wc_payment_methods > li { list-style: none !important; background: var(--gco-glass-bg) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; margin: 0 0 12px 0 !important; padding: 15px 18px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; animation: gcoBuildIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } ul.wc_payment_methods > li.wc_payment_method::before, ul.wc_payment_methods > li::before { content: none !important; } /* kill default list marker */ ul.wc_payment_methods > li.wc_payment_method:hover, ul.wc_payment_methods > li:hover { transform: translateY(-2px); border-color: rgba(137, 194, 224, 0.5) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38) !important; } /* selected option (progressive — :has supported in current browsers) */ ul.wc_payment_methods > li.wc_payment_method:has(input.input-radio:checked), ul.wc_payment_methods > li:has(input:checked) { border-color: var(--gco-neon) !important; background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.04)) !important; box-shadow: 0 0 0 1px var(--gco-neon), 0 16px 40px rgba(139, 92, 246, 0.28) !important; } /* labels / text on dark glass */ ul.wc_payment_methods label, ul.wc_payment_methods > li > label { color: #e6ebf2 !important; font-weight: 600 !important; } /* the grey description box → dark glass */ .woocommerce-checkout .payment_box, ul.wc_payment_methods .payment_box { background: var(--gco-content-bg) !important; color: #cbd5e1 !important; border: 1px solid var(--gco-glass-border) !important; border-radius: 12px !important; margin: 10px 0 4px !important; padding: 14px 16px !important; } .woocommerce-checkout .payment_box, .woocommerce-checkout .payment_box * { color: #cbd5e1 !important; } /* the caret triangle that points up to the selected option */ .woocommerce-checkout .payment_box::before, ul.wc_payment_methods .payment_box::before { border-bottom-color: var(--gco-content-bg) !important; border: 1em solid var(--gco-content-bg) !important; border-right-color: transparent !important; border-left-color: transparent !important; border-top-color: transparent !important; } /* classic stagger */ ul.wc_payment_methods > li:nth-of-type(1) { animation-delay: 0.05s; } ul.wc_payment_methods > li:nth-of-type(2) { animation-delay: 0.12s; } ul.wc_payment_methods > li:nth-of-type(3) { animation-delay: 0.19s; } ul.wc_payment_methods > li:nth-of-type(4) { animation-delay: 0.26s; } ul.wc_payment_methods > li:nth-of-type(5) { animation-delay: 0.33s; } ul.wc_payment_methods > li:nth-of-type(6) { animation-delay: 0.40s; } ul.wc_payment_methods > li:nth-of-type(7) { animation-delay: 0.47s; } ul.wc_payment_methods > li:nth-of-type(8) { animation-delay: 0.54s; } /* ── Classic wallet panel (DGEN + store credit balances, partial apply) ─ */ .gend-wallet-classic { margin: 0 0 18px; padding: 16px 18px 14px; border: 1px solid rgba(137, 99, 245, 0.35); border-radius: 14px; background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.03)); color: #e6ebf2; animation: gcoBuildIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .gend-wallet-classic.gwc-busy { opacity: 0.6; pointer-events: none; } .gend-wallet-classic .gwc-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; } .gend-wallet-classic .gwc-badge { width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 800; font-size: 12px; } .gend-wallet-classic .gwc-sub { margin: 6px 0 12px; font-size: 12.5px; opacity: 0.75; } .gend-wallet-classic .gwc-row { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .gend-wallet-classic .gwc-row:first-of-type { border-top: 0; } .gend-wallet-classic .gwc-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .gend-wallet-classic .gwc-row-title { font-weight: 600; font-size: 13.5px; } .gend-wallet-classic .gwc-row-bal { font-size: 12px; opacity: 0.7; } .gend-wallet-classic .gwc-ctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .gend-wallet-classic .gwc-cur { opacity: 0.7; font-size: 13px; } .gend-wallet-classic .gwc-input { width: 130px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(137, 194, 224, 0.3) !important; background: rgba(15, 23, 42, 0.6) !important; color: #fff !important; font-size: 14px; } .gend-wallet-classic .gwc-input:focus { outline: none; border-color: #8b5cf6 !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25); } .gend-wallet-classic .gwc-btn { background: rgba(137, 194, 224, 0.12); border: 1px solid rgba(137, 194, 224, 0.3); color: #cdd9e6; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } .gend-wallet-classic .gwc-btn:hover { background: rgba(137, 194, 224, 0.2); } .gend-wallet-classic .gwc-btn-ghost { background: transparent; color: #94a3b8; } .gend-wallet-classic .gwc-interest { margin-top: 6px; font-size: 11.5px; color: #34d399; } .gend-wallet-classic .gwc-due { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; font-weight: 700; } .gend-wallet-classic .gwc-due.gwc-covered { color: #34d399; } @media (prefers-reduced-motion: reduce) { .wc-block-components-radio-control__option, ul.wc_payment_methods > li, .gend-wallet-classic { animation: none !important; } } /* ───────────────────────────────────────────────────────────────── Two-column checkout — keep text off the column edges / scrollbar. When the checkout reflows to two columns (incl. after a form-error re-render), the right-hand order-review column's amounts were clipping against the column edge + scrollbar. Add inner padding and a stable scrollbar gutter; pad the summary rows so right-aligned amounts ($x.xx, HST, Total, Remaining) never touch the border. ───────────────────────────────────────────────────────────────── */ .woocommerce-checkout form.checkout, .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order { box-sizing: border-box; } .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order { padding: 4px 16px 10px 6px !important; scrollbar-gutter: stable; } /* Order-summary rows: right-aligned amounts need room from the edge. */ .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td, .woocommerce-checkout .cart-subtotal th, .woocommerce-checkout .cart-subtotal td, .woocommerce-checkout .tax-rate th, .woocommerce-checkout .tax-rate td, .woocommerce-checkout .order-total th, .woocommerce-checkout .order-total td { padding-left: 10px !important; padding-right: 14px !important; } /* Left (form) column: fields shouldn't hug the grid edge either. */ .woocommerce-checkout #customer_details { padding-right: 6px !important; } /* Wallet panel + payment cards: clear the scrollbar in the narrow column. */ .gend-wallet-classic { margin-right: 4px; } .gend-wallet-classic .gwc-due, .gend-wallet-classic .gwc-row-top { padding-right: 2px; } /* Any direct card child of the columns gets a minimum inset as a backstop. */ .woocommerce-checkout #order_review > *, .woocommerce-checkout .woocommerce-checkout-review-order > * { box-sizing: border-box; } /* ───────────────────────────────────────────────────────────────── Billing / shipping fields → glass, matching the payment cards + wallet panel. This whole stylesheet only loads on checkout, so the select2 rules below are effectively scoped to the checkout page. ───────────────────────────────────────────────────────────────── */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout #customer_details input.input-text, .woocommerce-checkout #customer_details textarea, .woocommerce-checkout #customer_details select { background: rgba(15, 23, 42, 0.6) !important; color: #e6ebf2 !important; border: 1px solid rgba(137, 194, 224, 0.22) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .woocommerce-checkout .form-row input.input-text::placeholder, .woocommerce-checkout .form-row textarea::placeholder { color: #64748b !important; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout .form-row select:focus { outline: none !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25) !important; } /* Native