/* * KC PET SEARCH & RESCUE - SECURE CHECKOUT * * Every rule is scoped under body.kcpsr-checkout so nothing reaches the rest of * the site. The palette below is not invented: each value was sampled from the * live KCPSR site before this file was written. * * GRADIENTS CARRY !important. Elementor lazy-loading ships * ".e-con.e-parent:not(.e-lazyloaded) * { background-image: none !important }", * which kills every gradient on the page regardless of selector specificity - * !important beats specificity. Solid background-colors are unaffected, which * is why only the gradient rules need it. */ body.kcpsr-checkout { --kcpsr-bg: #0B1220; /* deep navy-charcoal, already in use */ --kcpsr-panel-solid: #141A26; --kcpsr-panel-raised: #1B2230; --kcpsr-panel-sunk: rgba(0, 0, 0, .28); --kcpsr-line: rgba(255, 255, 255, 0.10); --kcpsr-line-strong: rgba(255, 255, 255, 0.20); --kcpsr-text: #FFFFFF; --kcpsr-muted: #C9D6E4; /* sampled light grey */ --kcpsr-dim: #9AA4B2; /* sampled secondary grey */ --kcpsr-orange: #FF7A1A; /* sampled thermal orange */ --kcpsr-amber: #FFB347; /* sampled thermal amber */ --kcpsr-yellow: #FFD35A; /* sampled thermal yellow */ --kcpsr-glow: rgba(255, 138, 0, 0.35); --kcpsr-link: #7DB8FF; --kcpsr-radius: 12px; --kcpsr-radius-sm: 10px; /* * THE COOL END OF THE THERMAL RAMP. * * These are not decorative brand colours picked to add interest. A thermal * image ramps black -> violet -> magenta -> orange -> amber -> yellow -> * white, and the checkout already uses the warm half of exactly that ramp. * Violet and magenta are the two stops immediately BELOW orange, so they * belong to the same physical gradient rather than being imported from * somewhere else. They are used only in the final confirmation card, which * is why the rest of the page stays charcoal + orange/amber. */ --kcpsr-violet: #7C4DFF; --kcpsr-magenta: #FF3D8B; --kcpsr-magenta-soft: #FF9CC4; --kcpsr-violet-line: rgba(124, 77, 255, .30); --kcpsr-magenta-line: rgba(255, 61, 139, .22); } /* * Charcoal ground rather than flat pure black. !important because the theme * paints the body black from its own stylesheet; this is scoped to the checkout * body class, so no other page is affected. */ html body.kcpsr-checkout { background-color: var(--kcpsr-bg) !important; color: var(--kcpsr-text); } body.kcpsr-checkout .woocommerce { background-color: transparent; } /* ------------------------------------------------------------------ * * NAVIGATION * ------------------------------------------------------------------ */ body.kcpsr-checkout .kcpsr-co-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 4px; border-bottom: 1px solid var(--kcpsr-line); } /* * SPECIFICITY NOTE — why [href] is on these selectors. * * Elementor's lazy-background optimisation ships * .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * * { background: none !important; } * and that trailing universal selector matches every descendant of an * unloaded container — including this nav. Its specificity is (0,5,0), so a * plain class rule loses no matter how many !importants it carries. Adding the * [href] attribute selector lifts this to (0,5,2) and wins honestly. */ body.kcpsr-checkout nav.kcpsr-co-nav.kcpsr-co-nav--v2 a.kcpsr-co-nav__btn[href] { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px !important; background: linear-gradient(180deg, var(--kcpsr-orange), #E9650C) !important; color: #16100A !important; font-weight: 800; font-size: 13.5px; text-decoration: none !important; border: 1px solid rgba(255,255,255,.14); transition: filter .15s ease, transform .15s ease; } body.kcpsr-checkout .kcpsr-co-nav__btn:hover { filter: brightness(1.08); transform: translateY(-1px); } body.kcpsr-checkout nav.kcpsr-co-nav.kcpsr-co-nav--v2 a.kcpsr-co-nav__btn--ghost[href] { background: transparent !important; color: var(--kcpsr-muted) !important; border: 1px solid var(--kcpsr-line-strong); font-weight: 700; } body.kcpsr-checkout .kcpsr-co-nav__btn--ghost:hover { color: #fff; border-color: var(--kcpsr-amber); } body.kcpsr-checkout .kcpsr-co-nav__btn:focus-visible, body.kcpsr-checkout a:focus-visible, body.kcpsr-checkout button:focus-visible, body.kcpsr-checkout input:focus-visible, body.kcpsr-checkout select:focus-visible, body.kcpsr-checkout textarea:focus-visible { outline: 2px solid var(--kcpsr-amber); outline-offset: 2px; } body.kcpsr-checkout .kcpsr-co-nav__trust { margin-left: auto; font-size: 12px; color: var(--kcpsr-dim); letter-spacing: .02em; } body.kcpsr-checkout .kcpsr-co-nav__dot { margin: 0 6px; opacity: .5; } /* * One navigation, not two. * * The page already carries a custom bar (.cnav-in) holding a breadcrumb, a * "Secure checkout" line and the card-brand logos. That row is KEPT - the * logos are exactly the trust signals worth having, and they are never * restyled. Only its Back-to-Cart button is hidden, because this plugin now * renders that control, and two of them a few pixels apart is the duplicate * navigation the redesign was asked to remove. */ body.kcpsr-checkout .return-to-cart, body.kcpsr-checkout .cnav-in a.cbtn-back { display: none !important; } /* ------------------------------------------------------------------ * * HEADER - tightened. The thermal artwork stays; it just stops owning * half the fold. * ------------------------------------------------------------------ */ body.kcpsr-checkout .entry-content > p > img, body.kcpsr-checkout .elementor-widget-image img { max-height: 132px; width: auto; } /* ------------------------------------------------------------------ * * TWO-COLUMN LAYOUT - 57 / 43 * * THE RIGHT-COLUMN GAP FIX (0.3.0). * * Measured on production at 1420px before this release: * * grid-template-rows: 0px 1127.47px 1340.7px 0px * #order_review_heading column 2, top 742, height 16 * #order_review column 2, top 1896 * * a 1138px hole between the heading and the card. The two were SEPARATE grid * items, each given `grid-column: 2` but an automatic row. Auto-placement put * the heading in the same row as the 1127px-tall billing column, then had * nowhere left for #order_review but the following row — which cannot start * until the billing column has finished. The grid was behaving correctly; it * was being asked to hold two right-hand items in a two-row structure whose * first row was sized by the left column. * * The plugin now wraps both in a single .kcpsr-co-right, so column 2 holds ONE * item. Its children stack in a flex column and are no longer subject to the * left column's row heights at all. * ------------------------------------------------------------------ */ @media (min-width: 981px) { body.kcpsr-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: 26px; align-items: start; } body.kcpsr-checkout form.checkout > #customer_details { grid-column: 1; margin: 0; } body.kcpsr-checkout form.checkout > .kcpsr-co-right { grid-column: 2; display: flex; flex-direction: column; min-width: 0; width: 100%; } body.kcpsr-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } body.kcpsr-checkout #customer_details .col-1, body.kcpsr-checkout #customer_details .col-2 { float: none; width: 100%; } /* Grid items must fill their tracks: WooCommerce floats .col2-set children at ~47% and the theme constrains #order_review, which left the right column 174px wide inside a 522px track. */ body.kcpsr-checkout form.checkout > #customer_details, body.kcpsr-checkout form.checkout > .kcpsr-co-right > #order_review { width: 100% !important; max-width: none !important; float: none !important; } /* * FALLBACK — only if the wrapper is absent. * * The wrapper is emitted from WooCommerce's own template actions. If a theme * ever ships a form-checkout.php override that drops them, the heading and * the card become direct children again and the 1138px gap would return. * These rules pin them to explicit rows so that case degrades to "correct * but unwrapped" instead of "broken". Row 2 is `1fr`, which per CSS Grid * §12.5 excludes the row-spanning #customer_details from sizing row 1 — * otherwise the spanning item would inflate row 1 and reopen the gap. */ body.kcpsr-checkout form.checkout:not(:has(> .kcpsr-co-right)) { grid-template-rows: auto 1fr; } body.kcpsr-checkout form.checkout:not(:has(> .kcpsr-co-right)) > #customer_details { grid-row: 1 / span 2; } body.kcpsr-checkout form.checkout:not(:has(> .kcpsr-co-right)) > h3#order_review_heading { grid-column: 2; grid-row: 1; } body.kcpsr-checkout form.checkout:not(:has(> .kcpsr-co-right)) > #order_review { grid-column: 2; grid-row: 2; align-self: start; width: 100% !important; max-width: none !important; float: none !important; } } /* ------------------------------------------------------------------ * * CARDS * ------------------------------------------------------------------ */ body.kcpsr-checkout #customer_details .col-1, body.kcpsr-checkout #customer_details .col-2, body.kcpsr-checkout #order_review { background: var(--kcpsr-panel-solid); border: 1px solid var(--kcpsr-line); border-radius: var(--kcpsr-radius); padding: 20px 20px 16px; margin-bottom: 18px; } body.kcpsr-checkout h3, body.kcpsr-checkout #order_review_heading { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kcpsr-amber); margin: 0 0 14px; } /* Inside the wrapper the heading is a flex item, so it fills the track and no longer needs to fight the theme's width constraint. */ body.kcpsr-checkout .kcpsr-co-right > #order_review_heading { margin: 0 0 12px; width: auto; } /* ------------------------------------------------------------------ * * FORM FIELDS - dark surfaces, generous padding, thermal focus. * Autofill is explicitly handled: Chrome paints its own background over * inputs, which on a dark field renders unreadable. * ------------------------------------------------------------------ */ body.kcpsr-checkout .woocommerce form .form-row label, body.kcpsr-checkout .woocommerce-billing-fields label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--kcpsr-muted); } body.kcpsr-checkout .required { color: var(--kcpsr-orange); text-decoration: none; } body.kcpsr-checkout .woocommerce form .form-row input.input-text, body.kcpsr-checkout .woocommerce form .form-row textarea, body.kcpsr-checkout .woocommerce form .form-row select, body.kcpsr-checkout .select2-container--default .select2-selection--single { width: 100%; background: var(--kcpsr-panel-raised) !important; color: var(--kcpsr-text) !important; border: 1px solid var(--kcpsr-line-strong) !important; border-radius: var(--kcpsr-radius-sm) !important; padding: 13px 14px !important; height: auto !important; font-size: 15px; line-height: 1.35; transition: border-color .15s ease, box-shadow .15s ease; } body.kcpsr-checkout .woocommerce form .form-row input.input-text::placeholder, body.kcpsr-checkout .woocommerce form .form-row textarea::placeholder { color: #8894A5; } body.kcpsr-checkout .woocommerce form .form-row input.input-text:focus, body.kcpsr-checkout .woocommerce form .form-row textarea:focus, body.kcpsr-checkout .woocommerce form .form-row select:focus { border-color: var(--kcpsr-amber) !important; box-shadow: 0 0 0 3px var(--kcpsr-glow) !important; outline: none; } /* Chrome autofill would otherwise repaint these fields unreadable. */ body.kcpsr-checkout input:-webkit-autofill, body.kcpsr-checkout input:-webkit-autofill:hover, body.kcpsr-checkout input:-webkit-autofill:focus, body.kcpsr-checkout textarea:-webkit-autofill, body.kcpsr-checkout select:-webkit-autofill { -webkit-text-fill-color: var(--kcpsr-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--kcpsr-panel-raised) inset !important; caret-color: var(--kcpsr-text); } /* Paired fields. Kept above 600px so nothing becomes a narrow sliver. */ @media (min-width: 601px) { body.kcpsr-checkout #billing_first_name_field, body.kcpsr-checkout #billing_last_name_field, body.kcpsr-checkout #billing_city_field, body.kcpsr-checkout #billing_state_field { width: 48.5%; float: left; } body.kcpsr-checkout #billing_last_name_field, body.kcpsr-checkout #billing_state_field { float: right; } } /* Order notes: present, functional, visually quieter. */ body.kcpsr-checkout .woocommerce-additional-fields { background: rgba(255,255,255,.03); border: 1px dashed var(--kcpsr-line-strong); border-radius: var(--kcpsr-radius-sm); padding: 14px 16px; margin-top: 14px; } body.kcpsr-checkout .woocommerce-additional-fields h3 { color: var(--kcpsr-dim); margin-bottom: 8px; } body.kcpsr-checkout .woocommerce-additional-fields textarea { min-height: 76px; } /* ------------------------------------------------------------------ * * COUPON - a quiet affordance, not a system notice. * ------------------------------------------------------------------ */ body.kcpsr-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: rgba(255,255,255,.04) !important; border: 1px solid var(--kcpsr-line-strong) !important; border-left: 3px solid var(--kcpsr-amber) !important; border-radius: var(--kcpsr-radius-sm) !important; color: var(--kcpsr-muted) !important; padding: 12px 15px !important; font-size: 13.5px; } body.kcpsr-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; } body.kcpsr-checkout .woocommerce-form-coupon-toggle a { color: var(--kcpsr-yellow); font-weight: 700; } body.kcpsr-checkout form.checkout_coupon { background: var(--kcpsr-panel-raised); border: 1px solid var(--kcpsr-line-strong); border-radius: var(--kcpsr-radius-sm); padding: 14px 16px; } /* ------------------------------------------------------------------ * * ORDER SUMMARY * ------------------------------------------------------------------ */ body.kcpsr-checkout .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; } body.kcpsr-checkout .woocommerce-checkout-review-order-table th, body.kcpsr-checkout .woocommerce-checkout-review-order-table td { padding: 9px 0; border: 0; border-bottom: 1px solid var(--kcpsr-line); font-size: 14px; color: var(--kcpsr-muted); text-align: left; } body.kcpsr-checkout .woocommerce-checkout-review-order-table td { text-align: right; color: var(--kcpsr-text); } body.kcpsr-checkout .woocommerce-checkout-review-order-table thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kcpsr-dim); } body.kcpsr-checkout .cart-discount th, body.kcpsr-checkout .cart-discount td { color: var(--kcpsr-yellow) !important; font-weight: 700; } body.kcpsr-checkout .order-total th, body.kcpsr-checkout .order-total td { border-bottom: 0; padding-top: 14px; font-size: 20px; font-weight: 800; color: var(--kcpsr-text) !important; } body.kcpsr-checkout .order-total td .amount { font-size: 26px; color: var(--kcpsr-amber) !important; } body.kcpsr-checkout .order-total th { letter-spacing: .08em; text-transform: uppercase; font-size: 13px; } /* ------------------------------------------------------------------ * * PAYMENT ACCORDION * * THE VERTICAL WALL FIX. All three panels were rendering at once because an * !important rule in a cross-origin stylesheet beat WooCommerce's inline * display:none. Visibility is keyed to the RADIO'S OWN :checked state, so * WooCommerce and WooPayments remain the only things deciding what is * selected - there is no parallel selector and no JS toggling here. * ------------------------------------------------------------------ */ body.kcpsr-checkout ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; } body.kcpsr-checkout ul.wc_payment_methods li.wc_payment_method { background: var(--kcpsr-panel-raised); border: 1px solid var(--kcpsr-line-strong); border-radius: var(--kcpsr-radius); margin: 0 0 10px; padding: 12px 14px; transition: border-color .15s ease, background .15s ease; } body.kcpsr-checkout ul.wc_payment_methods li.wc_payment_method:hover { border-color: rgba(255,179,71,.45); } body.kcpsr-checkout ul.wc_payment_methods li.wc_payment_method > label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--kcpsr-text); margin: 0; cursor: pointer; } body.kcpsr-checkout ul.wc_payment_methods li.wc_payment_method > label img { margin-left: auto; max-height: 24px; width: auto; } body.kcpsr-checkout ul.wc_payment_methods input[type="radio"] { accent-color: var(--kcpsr-orange); width: 17px; height: 17px; } /* Selected: thermal accent, raised. Unselected stays compact. */ body.kcpsr-checkout ul.wc_payment_methods li.wc_payment_method.kcpsr-selected { border-color: var(--kcpsr-orange); background: linear-gradient(180deg, rgba(255,122,26,.09), rgba(255,122,26,.02)) !important; box-shadow: 0 0 0 1px rgba(255,122,26,.25); } /* * SPECIFICITY NOTE — why these selectors carry #payment. * * An inline