) sits cleanly inside the card. First/last children lose top/bottom
margins; consecutive paragraphs get a small gap. */
.tv-selection-card__desc > *:first-child { margin-top: 0; }
.tv-selection-card__desc > *:last-child { margin-bottom: 0; }
.tv-selection-card__desc p { margin: 0 0 6px; }
.tv-selection-card__desc p:last-child { margin-bottom: 0; }
.tv-checkout-trial-note {
font-size: 12px;
color: var(--text-gray);
margin: 12px 0 0;
padding-top: 12px;
}
.tv-order-summary {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
}
.tv-order-summary__title {
font-family: var(--font-family);
font-size: 20px;
font-weight: 700;
margin: 0 0 12px;
}
.tv-order-summary__lines {
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.tv-order-summary__line {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
color: var(--text-gray);
padding: 4px 0;
}
.tv-order-summary__value { color: var(--text-color); }
/* Applied coupon. Held in the theme's secondary green so a reduction reads as
distinct from the charges above it at a glance, rather than as one more line.
wc_cart_totals_coupon_html() emits the amount followed by a "[Remove]" anchor,
so the value cell carries both. */
.tv-order-summary__line--discount .tv-order-summary__label {
font-weight: 500;
color: var(--secondary-color);
}
.tv-order-summary__line--discount .tv-order-summary__value {
color: var(--secondary-color);
display: flex;
align-items: baseline;
gap: 8px;
white-space: nowrap;
}
.tv-order-summary__line--discount .woocommerce-remove-coupon {
font-size: 11px;
font-weight: 400;
color: var(--text-gray);
text-decoration: underline;
}
.tv-order-summary__line--discount .woocommerce-remove-coupon:hover {
color: var(--primary-color);
}
.tv-order-summary__due {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
font-weight: 500;
font-size: 14px;
}
.tv-order-summary__due-value {
font-size: 18px;
color: var(--text-color);
}
/* ---- RIGHT: Account Details + Payment ---- */
.tv-checkout-main {
display: flex;
flex-direction: column;
gap: 0;
padding: 32px;
border: 1px solid var(--border-color);
border-radius: var(--rad);
}
.tv-customer-details-wrap.tv-customer-details-wrap--hidden{
display: none !important;
margin-bottom: 20px;
}
.tv-section-title {
font-family: var(--title-family);
font-size: 24px;
font-weight: 700;
margin: 0 0 12px;
color: var(--text-color);
}
.tv-section-title--payment { margin-top: 8px; }
/* "Already have an account?" - above the form, under the page heading, where the
coupon field used to be. Read before anyone starts filling in Account Details,
rather than after.
Centred, because the heading above it is: a left-aligned line directly under a
centred h1 reads as a stray fragment. It goes full width and stays centred on
narrow screens too, so nothing needs a breakpoint of its own.
The action itself is a plain underlined link - see below. */
.tv-checkout-login {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
/* Tight, so the question and the link read as one sentence rather than a
label sitting next to a control. */
gap: 4px 6px;
margin: 0 0 28px;
font-size: 14px;
color: var(--text-gray);
}
/* A link, not a button. The page already has one button that matters - "Place
order" - and giving this the same affordance made a returning customer weigh
two calls to action of apparently equal weight. Underlined so it reads as a
link without depending on colour alone, which is also what keeps it legible to
anyone who cannot pick the red out from the grey around it. */
.tv-checkout-login__link {
color: var(--primary-color);
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.15s ease;
}
.tv-checkout-login__link:hover,
.tv-checkout-login__link:focus-visible {
color: var(--primary-color);
text-decoration: underline;
opacity: 0.75;
}
.tv-customer-details .form-row {
margin: 0 0 16px;
padding: 0;
}
.tv-customer-details .form-row-first,
.tv-customer-details .form-row-last { width: calc(50% - 8px); float: none; }
.tv-customer-details .woocommerce-billing-fields__field-wrapper,
.tv-customer-details .create-account {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.tv-customer-details .form-row-wide,
.tv-customer-details .form-row.notes { grid-column: 1 / -1; }
.tv-customer-details label {
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
display: block;
color: var(--text-color);
}
.tv-customer-details .required { color: var(--primary-color); }
.tv-customer-details input[type="text"],
.tv-customer-details input[type="email"],
.tv-customer-details input[type="password"],
.tv-customer-details select {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: var(--rad);
background: var(--white-color);
font-size: 14px;
color: var(--text-color);
font-family: var(--font-family);
height: auto;
line-height: 1.4;
}
.tv-customer-details input:focus,
.tv-customer-details select:focus {
outline: none;
border-color: var(--primary-color);
}
.tv-customer-details .create-account { margin-top: 0; }
.tv-customer-details .create-account .form-row { width: 100%; }
/* Relocated login + coupon notices (top of right column) */
.tv-checkout-notices {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 8px;
}
.tv-checkout-notices .woocommerce-info,
.tv-checkout-notices .woocommerce-form-login-toggle,
.tv-checkout-notices .woocommerce-form-coupon-toggle {
background: var(--body-color);
border: 1px solid var(--border-color);
border-radius: var(--rad);
padding: 10px 14px;
font-size: 13px;
color: var(--text-gray);
margin: 0;
}
/* WooCommerce draws an icon on .woocommerce-info via ::before, absolutely
positioned at top:1em/left:1.5em in its own icon font. That layout assumes WC's
own notice padding, which this compact single-line notice does not use, and it
assumes the WooCommerce font actually loaded - on this page the block bundle is
dequeued, so the glyph can land as a fallback character sitting on top of the
first word. Cancel it outright: the notice is one short line and reads fine
without an icon. The same override already exists for the order-pay page
further down this file; this is the checkout-page half of it. */
.tv-checkout-notices .woocommerce-info::before {
content: none;
}
.tv-checkout-notices a {
color: var(--primary-color);
text-decoration: underline;
}
.tv-checkout-notices .woocommerce-form-login {
background: var(--white-color);
border: 1px solid var(--border-color);
border-radius: var(--rad);
padding: 14px;
margin-top: 8px;
}
/* ── Page-level WooCommerce notices ──────────────────────────────────────
"Coupon code applied successfully.", and its error and info counterparts.
These are NOT the relocated notices above. WooCommerce prints them from
woocommerce_output_all_notices() on woocommerce_before_checkout_form, which this
template fires before it opens .tv-checkout-page - so they land above the card,
outside every container it defines, running the full width of the window.
They were also unstyled here. The theme's WooCommerce notice styling lives in
account-detail.css, which is only enqueued on /credits/ and the My Account
endpoints; on checkout nothing claimed .woocommerce-message at all, so the
browser drew a bare block of text at the top of the page.
Both halves are fixed here rather than by moving the hook: woocommerce_before_-
checkout_form carries more than notices, and re-homing it to reposition one
message would put every other listener somewhere they were not written for.
Matching the card's own width and margins lines the notice up with it, which is
what makes it read as part of the page.
────────────────────────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-notices-wrapper {
max-width: 1496px;
margin: 24px auto 0;
padding: 0 40px;
}
/* The wrapper is printed whether or not there is anything in it, so without
this an empty one contributes its top margin and pushes the card down for no
reason. :empty is enough - WooCommerce writes nothing between the tags when
there are no notices - and :not(:has(*)) backs it up the way the rule further
down this file already does for .tv-checkout-notices. */
.woocommerce-checkout .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:not(:has(*)) {
display: none;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
padding: 12px 16px;
border-radius: var(--rad);
border: 1px solid transparent;
font-family: var(--font-family);
font-size: var(--small-text);
line-height: 1.5;
list-style: none;
}
/* WooCommerce draws its own ::before glyph from an icon font that is dequeued
on this page, so it lands as a fallback character sitting over the first word -
the same problem the .tv-checkout-notices override above solves by removing it.
Here the notice gets a real badge instead: at this size a bare line of green
text does not read as a confirmation on its own. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info::before {
flex: 0 0 auto;
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
font-family: var(--font-family);
font-size: 12px;
font-weight: 700;
line-height: 1;
color: var(--btn-text-color);
margin: 0;
top: auto;
left: auto;
}
/* Tints mixed from the palette rather than written as new hex values, the same
way .add-resource-flash--success/--error already do it in main.css. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message {
background: color-mix(in srgb, var(--secondary-color) 10%, var(--white-color));
border-color: color-mix(in srgb, var(--secondary-color) 30%, transparent);
color: var(--secondary-color);
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::before {
content: "\2713";
background: var(--secondary-color);
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error {
background: color-mix(in srgb, var(--primary-color) 10%, var(--white-color));
border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
color: var(--primary-color);
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::before {
content: "!";
background: var(--primary-color);
}
/* WC renders several validation errors as
, so the list markers have to
go or each message arrives with a bullet the design never asked for. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li {
list-style: none;
margin: 0;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
background: var(--body-color);
border-color: var(--border-color);
color: var(--text-gray);
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info::before {
content: "i";
font-style: italic;
background: var(--text-gray);
}
/* The "View cart" style link WooCommerce appends to some notices. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error a.button,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info a.button {
margin-left: auto;
flex: 0 0 auto;
padding: 6px 12px;
border-radius: var(--rad);
background: var(--text-color);
color: var(--btn-text-color);
font-size: 13px;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
}
/* No responsive override on purpose. .tv-checkout-page keeps its 40px padding
at every width, so narrowing this one would pull the notice out of line with
the card exactly where the misalignment is most obvious. */
/* Coupon form.
Selected by the field it contains, not by a class. Two earlier passes keyed off
`.checkout_coupon` and `.woocommerce-form-coupon` and matched nothing on this
page, so the class names WooCommerce ships here are not something to rely on.
The input's NAME is contractual - WooCommerce's coupon handler reads
$_POST['coupon_code'], so it cannot change without breaking the feature itself.
:has() is already used elsewhere in this theme, so the support floor is unchanged.
Styling applies whether or not the script runs; only the collapsing below waits
on it. */
.tv-coupon-form p,
form:has(input[name="coupon_code"]):not(.checkout):not(.woocommerce-checkout) p {
margin: 0 0 10px;
font-size: 13px;
color: var(--text-gray);
}
/* WC lays the field and button out as floated halves, which at this column
width leaves the button hanging beside a cramped input. One column reads
better and drops the float clearing along with it. */
.tv-coupon-form .form-row,
form:has(input[name="coupon_code"]):not(.checkout):not(.woocommerce-checkout) .form-row {
width: 100%;
float: none;
padding: 0;
margin: 0 0 10px;
}
.tv-coupon-form .form-row:last-of-type,
form:has(input[name="coupon_code"]):not(.checkout):not(.woocommerce-checkout) .form-row:last-of-type {
margin-bottom: 0;
}
input[name="coupon_code"] {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: var(--rad);
background: var(--white-color);
font-size: 14px;
color: var(--text-color);
font-family: var(--font-family);
line-height: 1.4;
}
input[name="coupon_code"]:focus {
outline: none;
border-color: var(--primary-color);
}
[name="apply_coupon"] {
background-color: var(--primary-color);
color: #ffffff;
border: 0;
border-radius: var(--rad);
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
font-family: var(--font-family);
cursor: pointer;
width: 100%;
}
[name="apply_coupon"]:hover {
background-color: #c31414;
}
/* Disclosure.
does the collapsing, so nothing here depends on a script running.
The !important is deliberate and narrow: WooCommerce renders the form with an
inline style="display:none" and reopens it from its own script. Inside a
that inline style would keep the form hidden even when the disclosure
is open, and an inline style can only be beaten by !important. WooCommerce's own
toggle notice is hidden because the replaces it. */
.tv-checkout-payment-wrap {
/* background: var(--white-color); */
/* border: 1px solid var(--border-color); */
/* border-radius: var(--rad); */
/* padding: 16px 18px; */
}
.tv-checkout-payment .wc_payment_methods,
.tv-checkout-payment ul.payment_methods {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.tv-checkout-payment li.wc_payment_method {
background: transparent;
padding: 8px 0;
border: 0;
}
.woocommerce-terms-and-conditions-checkbox-text a {
color: inherit;
}
.tv-checkout-payment li.wc_payment_method > label {
font-size: 13px;
font-weight: 500;
color: var(--text-color);
display: flex;
align-items: center;
gap: 8px;
}
.tv-checkout-payment .payment_box {
background: transparent;
padding: 12px 0 4px;
margin: 8px 0 0;
box-shadow: none;
}
.tv-checkout-payment .payment_box::before { display: none; }
.tv-checkout-payment .form-row.place-order {
margin: 16px 0 0;
padding: 0 !important;
border: 0;
}
.tv-checkout-payment #place_order,
.tv-checkout-payment .button.alt {
background-color: var(--primary-color);
color: #ffffff;
border: 0;
border-radius: var(--rad);
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
width: 100%;
font-family: var(--font-family);
cursor: pointer;
text-align: center;
}
.tv-checkout-payment #place_order:hover { background-color: #c31414; }
.tv-checkout-payment .woocommerce-terms-and-conditions-wrapper,
.tv-checkout-payment .form-row.validate-required.woocommerce-validated,
.tv-checkout-payment .woocommerce-form__label-checkbox {
font-size: 13px;
color: var(--text-gray);
}
/* Responsive */
@media (max-width: 880px) {
.tv-checkout-grid { grid-template-columns: 1fr; }
.tv-checkout-aside { order: 2; }
.tv-checkout-main { order: 1; }
}
/* Defensive duplicate-checkout hide. The PHP render-once guard +
wc-blocks-* dequeue + JS cleanup in inc/woo.php normally catch every
path that could render a second checkout, but this stays as a final
CSS-only safety net. */
.woocommerce-checkout-wrap > .tv-checkout-page ~ * { display: none !important; }
.woocommerce-checkout-wrap > form.woocommerce-checkout:not(:has(.tv-checkout-page)),
.woocommerce-checkout-wrap > .wp-block-woocommerce-checkout,
.woocommerce-checkout-wrap > .wc-block-checkout { display: none !important; }
/* ======================================================================
Thank-you page (templates/page-thankyou.php)
====================================================================== */
.tv-thankyou-page {
min-height: calc(100vh - 140px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
font-family: var(--font-family);
color: var(--text-color);
}
.tv-thankyou-card {
max-width: 640px;
text-align: center;
}
.tv-thankyou-icon {
width: 56px;
height: 56px;
margin: 0 auto 24px;
border-radius: 50%;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
.tv-thankyou-title {
font-family: var(--title-family);
font-size: 36px;
font-weight: 700;
line-height: 1.15;
margin: 0 0 18px;
color: var(--text-color);
}
.tv-thankyou-title-accent { color: var(--primary-color); }
.tv-thankyou-body {
font-size: 15px;
line-height: 1.6;
color: var(--text-gray);
margin: 0 auto 32px;
max-width: 520px;
}
.tv-thankyou-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary-color);
color: var(--white-color);
text-decoration: none;
font-family: var(--font-family);
font-size: 16px;
font-weight: 700;
padding: 14px 28px;
border-radius: 6px;
transition: background 0.15s ease;
}
.tv-thankyou-button:hover {
background: #c31414;
color: var(--white-color);
}
.tv-thankyou-button svg { display: block; }
@media (max-width: 600px) {
.tv-thankyou-title { font-size: 28px; }
.tv-thankyou-body { font-size: 14px; }
}
/* ----------------------------------------------------------------------
Wallet-topup checkout: hide the signup-funnel fields. Logged-in
customers don't need to re-enter account details, and order notes /
"Additional information" don't apply to TeraWallet recharges. The
form fields stay in the DOM (prefilled from the user's WC profile)
so WC's required-field validation continues to pass.
---------------------------------------------------------------------- */
.tv-checkout-page--topup .tv-customer-details,
.tv-checkout-page--topup .woocommerce-additional-fields {
display: none !important;
}
.tv-checkout-page--topup .tv-checkout-main > .tv-checkout-notices:empty {
display: none;
}
.tv-checkout-main .tv-checkout-notices:not(:has(*)),
.tv-checkout-main wc-order-attribution-inputs#wc-stripe-express-checkout__order-attribution-inputs {
display: none;
}
fieldset#wc-stripe-upe-form {
border: 0;
}
.payment_box.payment_method_stripe {
all: unset !important;
display: block;
}
.payment_box.payment_method_stripe:after,.payment_box.payment_method_stripe:before {
display: none !important;
}
.tv-checkout-payment .wc_payment_methods:before,
.tv-checkout-payment ul.payment_methods:before,
.tv-checkout-payment .wc_payment_methods:after,
.tv-checkout-payment ul.payment_methods:after {
display: none !important;
}
.woocommerce-checkout #payment {
background-color: transparent;
}
.wc-stripe-payment-method-instruction,
.payment_box .testmode-info {
font-size: 12px;
color: #111111;
background: #fefce8;
border: 1px solid #fde047;
border-radius: var(--rad);
padding: 10px 12px;
margin: 0 0 16px;
line-height: 1.6;
}
.wc-stripe-payment-method-instruction strong,
.payment_box .testmode-info strong {
color: #111111;
font-weight: 600;
}
/* Copy to clipboard button wrapping the test card number */
.wc-stripe-payment-method-instruction .wc-stripe-copy-test-number,
.payment_box .testmode-info .wc-stripe-copy-test-number {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--white-color);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 1px 6px;
font-family: var(--font-family);
font-size: 12px;
color: var(--text-color);
cursor: pointer;
vertical-align: middle;
transition: border-color 0.15s ease;
}
.wc-stripe-payment-method-instruction .wc-stripe-copy-test-number:hover,
.payment_box .testmode-info .wc-stripe-copy-test-number:hover {
border-color: var(--text-color);
}
/* The icon inside the copy button - Stripe injects an SVG or icon here */
.wc-stripe-payment-method-instruction .wc-stripe-copy-test-number i,
.payment_box .testmode-info .wc-stripe-copy-test-number i {
width: 12px;
height: 12px;
display: inline-block;
}
/* "More test cards" link */
.wc-stripe-payment-method-instruction a,
.payment_box .testmode-info a {
color: var(--blue);
text-decoration: underline;
}
.wc-stripe-payment-method-instruction a:hover,
.payment_box .testmode-info a:hover {
opacity: 0.8;
}
/* ── Section headings ── */
body:not(.page-id-552).woocommerce-checkout #customer_details h2.tv-section-title {
font-size: 16px;
font-family: var(--title-family);
font-weight: 600;
color: var(--text-color);
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
}
.woocommerce-checkout #customer_details h3 {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-gray);
margin: 20px 0 14px;
padding: 0;
border: none;
}
/* First h3 gets less top margin since it follows the h2 */
.woocommerce-checkout #customer_details .woocommerce-billing-fields h3:first-child {
margin-top: 0;
}
/* ── Remove any background/border from section wrappers ── */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-account-fields .create-account,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
background: none;
border: none;
padding: 0;
margin: 0;
}
/* ── Billing fields - 2 col grid ── */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
/* Wide fields span full width */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p.form-row-wide,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper p.form-row,
.woocommerce-checkout .woocommerce-account-fields .create-account p.form-row {
grid-column: 1 / -1;
}
/* ── All form-row p wrappers - equal spacing ── */
.woocommerce-checkout #customer_details p.form-row {
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: 100% !important;
}
/* ── Labels ── */
.woocommerce-checkout #customer_details label {
display: block;
font-size: 16px;
font-weight: 400;
font-family: var(--font-family);
color: var(--text-color);
margin-bottom: 6px;
line-height: 1.4;
}
.woocommerce-checkout #customer_details label .required {
color: var(--primary-color);
font-weight: 700;
border: none !important;
text-decoration: none;
visibility: visible !important;
display: none;
}
.woocommerce-checkout #customer_details label .optional {
font-size: 12px;
color: var(--text-gray);
font-weight: 400;
}
/* ── Input wrapper - full width ── */
.woocommerce-checkout #customer_details .woocommerce-input-wrapper {
display: block;
width: 100% !important;
}
/* ── All inputs & textarea ── */
.woocommerce-checkout #customer_details .input-text {
display: block !important;
width: 100% !important;
height: 42px;
padding: 0 12px;
font-size: var(--small-text);
font-family: var(--font-family);
color: var(--text-color);
background: var(--white-color);
border: 1px solid var(--border-color);
border-radius: var(--rad);
box-shadow: none !important;
outline: none;
transition: border-color 0.15s ease;
box-sizing: border-box !important;
margin: 0 !important;
}
.woocommerce-checkout #customer_details .input-text:focus {
border-color: var(--text-color);
}
/* Textarea */
.woocommerce-checkout #customer_details textarea.input-text {
height: auto !important;
padding: 10px 12px;
resize: vertical;
line-height: 1.5;
}
/* ── Validation states ── */
.woocommerce-checkout #customer_details p.woocommerce-invalid .input-text {
border-color: var(--primary-color) !important;
}
.woocommerce-checkout #customer_details p.woocommerce-invalid label {
color: var(--primary-color);
}
.woocommerce-checkout #customer_details p.woocommerce-validated .input-text {
border-color: var(--green) !important;
}
/* ── Password field + show/hide toggle ── */
.woocommerce-checkout #customer_details .password-input {
display: block;
position: relative;
width: 100% !important;
}
.woocommerce-checkout #customer_details .password-input .input-text {
padding-right: 44px;
}
.woocommerce-checkout #customer_details .password-input .show-password-input {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--text-gray);
font-size: 16px;
padding: 0;
line-height: 1;
}
/* ── Empty sections and clutter - hide ── */
.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout #customer_details .clear {
display: none;
}
.woocommerce-account-fields {
margin-top: 16px !important;
}
.tv-customer-details-wrap {
margin-bottom: 26px;
}
/* Order Pay */
.woocommerce-order-pay.woocommerce-checkout .woocommerce{
max-width: min(800px,100%);
width: 100%;
margin-inline: auto !important;
padding: 5px 20px 4px;
background-color: var(--white-color);
border-radius: var(--rad);
border: 1px solid var(--border-color);
}
/* ============================================================
FIX 1 - Payment box speech-bubble notch
WC core source (confirmed):
.woocommerce-checkout #payment div.payment_box::before {
border: 1em solid #dcd7e2;
border-right/left/top-color: transparent;
position: absolute; top: -.75em; left: 0;
}
Must match or exceed that specificity to override.
============================================================ */
.woocommerce-order-pay.woocommerce-checkout #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::before {
content: none !important;
display: none !important;
border: none !important;
}
/* Restyle the box itself now that the notch is gone */
.woocommerce-order-pay.woocommerce-checkout #payment div.payment_box {
background: transparent;
border: 0px solid var(--border-color);
border-radius: var(--rad);
padding: 0px;
margin: 0;
font-size: var(--small-text);
color: var(--text-color);
}
/* Cancel WC's default lavender #payment wrapper background */
.woocommerce-order-pay.woocommerce-checkout #payment {
background: transparent;
border-radius: 0;
}
.woocommerce-order-pay.woocommerce-checkout #payment ul.payment_methods {
padding: 0;
border-bottom: none;
list-style: none;
}
.woocommerce-order-pay.woocommerce-checkout #payment ul.payment_methods li {
line-height: normal;
}
.woocommerce-order-pay.woocommerce-checkout ul.payment_methods li:before{
display: none !important;
}
/* Hide the redundant "Credit / Debit Card" label since the box already states it */
.woocommerce-order-pay.woocommerce-checkout .wc_payment_method > label {
display: none;
}
/* ============================================================
FIX 2 - Notice icon overlap
WC core source (confirmed):
.woocommerce-info::before {
font-family: WooCommerce; ← icon font, not plain text
content: "\e028"; ← real glyph character
position: absolute; top: 1em; left: 1.5em;
}
Your screenshot showed MY fake "i" rendering on top of WC's real
icon-font glyph because I never cancelled the original ::before.
Fix: override font-family + content directly on the same selector.
============================================================ */
.woocommerce-order-pay.woocommerce-checkout .woocommerce-info {
position: relative;
padding: 14px 16px 14px 44px !important;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-top: 1px solid #bfdbfe !important; /* cancel WC's 3px colored top accent */
color: #1d4ed8;
border-radius: var(--rad);
margin-bottom: var(--default-gaps);
list-style: none;
margin-top: 16px;
}
.woocommerce-order-pay.woocommerce-checkout .woocommerce-info::before {
font-family: inherit !important; /* cancel WooCommerce icon font */
content: "i" !important; /* override the \e028 glyph */
font-style: italic;
font-weight: 700;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--blue);
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
/* Same approach for success/error if you want the icon style consistent */
.woocommerce-order-pay.woocommerce-checkout .woocommerce-message {
position: relative;
padding: 14px 16px 14px 44px !important;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-top: 1px solid #bbf7d0 !important;
color: #15803d;
border-radius: var(--rad);
}
.woocommerce-order-pay.woocommerce-checkout .woocommerce-message::before {
font-family: inherit !important;
content: "✓" !important;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--secondary-color);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.woocommerce-order-pay.woocommerce-checkout .woocommerce-error {
position: relative;
padding: 14px 16px 14px 44px !important;
background: #fef2f2;
border: 1px solid #fecaca;
border-top: 1px solid #fecaca !important;
color: #b91c1c;
border-radius: var(--rad);
}
.woocommerce-order-pay.woocommerce-checkout .woocommerce-error::before {
font-family: inherit !important;
content: "!" !important;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary-color);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.woocommerce-order-pay.woocommerce-checkout .woocommerce-error li {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ============================================================
Payment box inner content
Targets: .testmode-info, .woocommerce-SavedPaymentMethods,
.wc-stripe-upe-form (new card fieldset)
============================================================ */
/* ── Test mode banner ── */
.woocommerce-order-pay.woocommerce-checkout .payment_box .testmode-info {
font-size: 12px;
color: var(--text-gray);
background: color-mix(in srgb, #fde047 20%, var(--white-color));
border: 1px solid #fde047;
border-radius: var(--rad);
padding: 10px 12px;
margin: 0 0 16px;
line-height: 1.6;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .testmode-info strong {
color: var(--text-color);
font-weight: 600;
}
/* "Copy to clipboard" button wrapping the test card number */
.woocommerce-order-pay.woocommerce-checkout .payment_box .testmode-info .wc-stripe-copy-test-number {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--white-color);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 1px 6px;
font-family: var(--font-family);
font-size: 12px;
color: var(--text-color);
cursor: pointer;
vertical-align: middle;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .testmode-info .wc-stripe-copy-test-number:hover {
border-color: var(--text-color);
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .testmode-info .wc-stripe-copy-test-number i {
width: 12px;
height: 12px;
display: inline-block;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .testmode-info a {
color: var(--blue);
text-decoration: underline;
}
/* ── Saved payment methods list ── */
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-token,
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-new {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: var(--rad);
margin: 0 !important; /* cancel WC core's margin: 0 0 .5em */
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
/* Highlight selected token - uses :has(), works in modern browsers */
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-token:has(.woocommerce-SavedPaymentMethods-tokenInput:checked),
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-new:has(.woocommerce-SavedPaymentMethods-tokenInput:checked) {
border-color: var(--primary-color);
background: color-mix(in srgb, var(--primary-color) 10%, var(--white-color));
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-tokenInput {
accent-color: var(--primary-color);
width: 16px !important;
height: 16px;
margin: -1px 0 0 !important; /* cancel WC core's margin: -3px 1em 0 0 */
flex-shrink: 0;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-token label,
.woocommerce-order-pay.woocommerce-checkout .payment_box .woocommerce-SavedPaymentMethods-new label {
font-size: var(--small-text);
font-family: var(--font-family);
color: var(--text-color);
cursor: pointer;
margin: 0;
}
/* Per-token error message (e.g. card declined) */
.woocommerce-order-pay.woocommerce-checkout .payment_box .stripe-source-errors {
width: 100%;
font-size: 12px;
color: var(--primary-color);
margin-top: 6px;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box .stripe-source-errors:empty {
display: none;
}
/* ── New card fieldset (Stripe iframe wrapper) ── */
.woocommerce-order-pay.woocommerce-checkout .payment_box .wc-upe-form {
border: 1px solid var(--border-color);
border-radius: var(--rad);
padding: 16px;
margin: 0;
}
/* Iframe wrapper - only spacing/sizing, never the iframe's internal styles */
.woocommerce-order-pay.woocommerce-checkout .payment_box .wc-stripe-upe-element {
min-height: 1px; /* prevents layout collapse before Stripe sets real height */
}
/* Stripe's own inline error output */
.woocommerce-order-pay.woocommerce-checkout .payment_box #wc-stripe-upe-errors {
font-size: 12px;
color: var(--primary-color);
margin-top: 10px;
}
.woocommerce-order-pay.woocommerce-checkout .payment_box #wc-stripe-upe-errors:empty {
display: none;
}
/* ============================================================
Order summary table - .shop_table (order-pay page)
============================================================ */
.woocommerce-order-pay.woocommerce-checkout table.shop_table {
width: 100%;
/* border-collapse: collapse; */
background: var(--white-color);
border: 1px solid var(--border-color);
border-radius: var(--rad);
overflow: hidden;
margin: 0 0 var(--default-gaps);
}
/* Header row */
.woocommerce-order-pay.woocommerce-checkout table.shop_table thead tr {
background: var(--body-color);
border-bottom: 1px solid var(--border-color);
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table thead th {
padding: 10px 20px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-family);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-gray);
text-align: left;
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table thead th.product-quantity,
.woocommerce-order-pay.woocommerce-checkout table.shop_table thead th.product-total {
text-align: right;
}
/* Body rows - line items */
.woocommerce-order-pay.woocommerce-checkout table.shop_table tbody td {
padding: 14px 20px;
font-size: var(--small-text);
font-family: var(--font-family);
color: var(--text-color);
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table tbody td.product-name {
font-weight: 500;
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table tbody td.product-quantity,
.woocommerce-order-pay.woocommerce-checkout table.shop_table tbody td.product-subtotal {
text-align: right;
}
/* Footer rows - Subtotal / Total / Payment method */
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot tr {
border-bottom: 1px solid var(--border-color);
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot tr:last-child {
border-bottom: none;
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot th {
padding: 10px 20px;
font-size: var(--small-text);
font-family: var(--font-family);
font-weight: 500;
color: var(--text-gray);
text-align: right;
}
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot td {
padding: 10px 20px;
font-size: var(--small-text);
font-family: var(--font-family);
font-weight: 600;
color: var(--text-color);
text-align: right;
}
/* Emphasize the grand "Total:" row */
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot tr:nth-last-child(2) th,
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot tr:nth-last-child(2) td {
font-weight: 700;
font-size: 15px;
color: var(--text-color);
}
/* "Payment method:" row - de-emphasize slightly since it's metadata, not a cost */
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-order-pay.woocommerce-checkout table.shop_table tfoot tr:last-child td {
font-weight: 500;
color: var(--text-gray);
background: var(--body-color);
}
/* Price amount spans inside totals */
.woocommerce-order-pay.woocommerce-checkout table.shop_table .woocommerce-Price-amount {
font-weight: inherit;
}
/* Submit button */
.woocommerce-order-pay.woocommerce-checkout #place_order {
display: inline-block;
padding: 0.625rem 1.25rem !important;
font-family: var(--font-family);
white-space: nowrap;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--rad);
transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s;
line-height: 1.5;
background: var(--primary-color);
border-color: var(--primary-color);
color: #ffffff;
font-weight: 500 !important;
cursor: pointer;
float: unset !important;
width: 100%;
letter-spacing: 0 !important;
font-size: 16px;
}
.woocommerce-order-pay.woocommerce-checkout #place_order:hover {
opacity: 0.88;
}
.woocommerce-order-pay.woocommerce-checkout .form-row:has(#place_order){
padding-inline: 0 !important;
}
/* ============================================================
Checkout - Validation notice group
.woocommerce-NoticeGroup-checkout
============================================================ */
.woocommerce-NoticeGroup-checkout {
margin-bottom: var(--default-gaps) !important;
}
/* ── Outer error list - override WC core defaults ── */
.woocommerce-NoticeGroup-checkout .woocommerce-error {
display: block !important;
position: relative !important;
padding: 14px 16px 14px 44px !important;
margin: 0 !important;
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
border-top: 1px solid #fecaca !important; /* cancel WC 3px top accent */
border-radius: var(--rad) !important;
color: #b91c1c !important;
list-style: none !important;
word-wrap: break-word !important;
}
/* ── Icon - cancel WC icon font, use our own ── */
.woocommerce-NoticeGroup-checkout .woocommerce-error::before {
font-family: inherit !important;
content: "!" !important;
font-weight: 700 !important;
font-style: normal !important;
position: absolute !important;
top: 16px !important;
left: 14px !important;
transform: none !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: var(--primary-color) !important;
color: var(--white-color) !important;
font-size: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── List items ── */
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
font-size: var(--small-text) !important;
font-family: var(--font-family) !important;
color: #b91c1c !important;
line-height: 1.6 !important;
}
/* Divider between items */
.woocommerce-NoticeGroup-checkout .woocommerce-error li + li {
border-top: 1px solid #fecaca !important;
padding-top: 8px !important;
margin-top: 8px !important;
}
/* ── Links inside each li (WC wraps errors in ) ── */
.woocommerce-NoticeGroup-checkout .woocommerce-error li a {
color: #b91c1c !important;
text-decoration: none !important;
display: block !important;
transition: color 0.15s ease !important;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li a:hover {
color: var(--primary-color) !important;
text-decoration: underline !important;
}
/* ── Field name - bold part ── */
.woocommerce-NoticeGroup-checkout .woocommerce-error li a strong {
font-weight: 600 !important;
color: #991b1b !important;
}
/* ── Payment area loader ───────────────────────────────────────────────────
Stripe draws its card fields into an iframe from js.stripe.com, which can take
a few seconds. review-order.php renders the block already carrying .is-loading
so the loader is what paints first, and assets/js/checkout-payment-loader.js
drops it once the iframe is really mounted.
The payment area is moved out of flow rather than display:none'd, so the
failsafe animation below can put it back. Discrete properties like position
flip at the end of a keyframe, which display cannot be relied on to do. */
.tv-payment-loader {
display: none;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 18px 0 6px;
font-size: 14px;
color: var(--text-gray);
}
.tv-checkout-payment.is-loading .tv-payment-loader {
display: flex;
}
.tv-payment-loader__spinner {
flex: 0 0 18px;
width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: tv-payment-spin 0.7s linear infinite;
}
@keyframes tv-payment-spin {
to { transform: rotate(360deg); }
}
/* Only shown once the script has given up waiting, or the CSS failsafe has. */
.tv-payment-loader__slow {
display: none;
flex: 1 1 100%;
font-size: 13px;
color: var(--text-color);
}
.tv-checkout-payment.is-slow .tv-payment-loader,
.tv-checkout-payment.is-slow .tv-payment-loader__slow {
display: block;
}
.tv-checkout-payment.is-slow .tv-payment-loader__spinner,
.tv-checkout-payment.is-slow .tv-payment-loader__text {
display: none;
}
/* Held out of view, not removed: WooCommerce and Stripe both measure elements
inside here while mounting, and display:none would give them a zero-size box to
lay out against. */
.tv-checkout-payment.is-loading .woocommerce-checkout-payment,
.tv-checkout-payment.is-loading #payment {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
/* Failsafe, and the reason this is CSS rather than only JS: if the loader
script 404s, or a third-party error takes the page's JS down before it runs,
the payment form must still arrive. Fires later than the script's own 20s
timeout so the script wins in the normal case. */
animation: tv-payment-failsafe 0s linear 25s forwards;
}
@keyframes tv-payment-failsafe {
to {
position: static;
left: auto;
width: auto;
height: auto;
overflow: visible;
opacity: 1;
pointer-events: auto;
}
}
/* Same 25s escape hatch for the loader itself, so it doesn't sit above a
payment form the failsafe has just revealed. */
.tv-checkout-payment.is-loading .tv-payment-loader {
animation: tv-payment-loader-failsafe 0s linear 25s forwards;
}
@keyframes tv-payment-loader-failsafe {
to { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tv-payment-loader__spinner { animation-duration: 2s; }
}