/**
 * Checkout page (woocommerce/checkout/form-checkout.php + review-order.php
 * overrides) — compact, Shopify-inspired layout, same visual language as
 * cart-page.css (this stylesheet is enqueued as a dependency of this one —
 * see functions.php — since the order-summary rows reuse its
 * .wow-cart-summary__row classes: the shipping row in particular comes from
 * this theme's shared woocommerce/cart/cart-shipping.php override, used by
 * both the cart and checkout pages).
 *
 * IMPORTANT — this file only restyles WooCommerce's own default classes on
 * the billing/shipping fields and the payment method list; it does not
 * change any markup there (those templates aren't overridden at all — see
 * the comment at the top of woocommerce/checkout/form-checkout.php). That
 * keeps Stripe Elements, PayPal/Apple Pay/Google Pay, and selectWoo's
 * country/state enhancement working exactly as they already do.
 */

body.woocommerce-checkout .wow-checkout img {
	max-width: 100%;
}

/* The database-stored "Page: Checkout" template wraps post-content in
   WordPress's own ".entry-content.is-layout-constrained" block-layout
   classes, which apply their own max-width/centering to every direct child
   (including the WooCommerce-injected .woocommerce wrapper div). When that
   constraint is narrower than — or just differently centered than —
   .wow-checkout's own 1280px/auto-margin below, the whole page reads as
   off-center. Reset those ancestor wrappers to full-width/no-margin so
   .wow-checkout is the only thing controlling width + centering here. */
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.wow-checkout {
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 32px 110px;
}

/* Coupon prompt/form + login notice — rendered before the checkout <form>
   itself (see form-checkout.php), wrapped to share this same width so it
   lines up instead of running full-bleed. */
.wow-checkout-coupon-wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 32px;
}

.wow-checkout-coupon-wrap .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 32px 0 0;
	padding: 16px 22px;
	border-radius: 10px;
	background-color: #b73737;
	color: #fff;
	font-size: 13px;
	font-weight: 300;
	list-style: none;
}

.wow-checkout-coupon-wrap .woocommerce-form-coupon-toggle .showcoupon {
	font-weight: 700;
	color: #fff;
	text-decoration: underline;
}

.wow-checkout-coupon-wrap form.checkout_coupon {
	margin: 16px 0 0;
}

.wow-checkout-head {
	margin: 0 0 32px;
}

.wow-checkout-head__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--black);
}

.wow-checkout-layout {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 56px;
	align-items: start;
}

.wow-checkout-main {
	min-width: 0;
}

.wow-checkout-summary {
	min-width: 0;
	position: sticky;
	top: 24px;
}

.wow-checkout-summary__title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--black);
}

.wow-checkout-summary__note {
	margin: 16px 0 0;
	font-size: 11px;
	color: var(--wp--preset--color--grey);
	text-align: center;
}

/* ── Notices (login form / coupon form toggle / validation errors) ────────
   Covers both wrappers: .wow-checkout (the form itself) and
   .wow-checkout-coupon-wrap (the coupon prompt + login form, which render
   before the form via woocommerce_before_checkout_form — see
   form-checkout.php). The coupon prompt's own .woocommerce-info gets a
   bolder, dedicated look further down; this generic rule mainly covers
   .woocommerce-error / -message / login-form notices. */
.wow-checkout .woocommerce-error,
.wow-checkout .woocommerce-message,
.wow-checkout .woocommerce-NoticeGroup,
.wow-checkout-coupon-wrap .woocommerce-error,
.wow-checkout-coupon-wrap .woocommerce-message,
.wow-checkout-coupon-wrap .woocommerce-NoticeGroup {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: 8px;
	background-color: #f5f2ee;
	color: var(--wp--preset--color--text);
	font-size: 13px;
}

.wow-checkout .woocommerce-error,
.wow-checkout-coupon-wrap .woocommerce-error {
	background-color: #fbeaea;
	color: var(--wp--preset--color--accent);
}

.wow-checkout .woocommerce-error li[data-id] a,
.wow-checkout-coupon-wrap .woocommerce-error li[data-id] a {
	color: inherit;
	text-decoration: underline;
}

.wow-checkout a.showlogin,
.wow-checkout-coupon-wrap a.showlogin {
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	color: var(--wp--preset--color--text);
}

.wow-checkout form.login,
.wow-checkout-coupon-wrap form.login {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	background-color: #faf8f5;
}

.wow-checkout-coupon-wrap form.checkout_coupon {
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	background-color: #faf8f5;
}

.wow-checkout form.login p,
.wow-checkout-coupon-wrap form.checkout_coupon p,
.wow-checkout-coupon-wrap form.login p {
	margin: 0 0 12px;
}

.wow-checkout form.login .button,
.wow-checkout form.login .woocommerce-form-login__submit,
.wow-checkout-coupon-wrap form.checkout_coupon .button {
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	background-color: var(--wp--preset--color--black);
	color: #fff;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
}

/* ── Billing / shipping fields ───────────────────────────────────────────
   Stacked (billing, then shipping) rather than core's default side-by-side
   .col2-set, since the left column here is already narrower than a full-
   width page — a single flowing column reads more like a modern (Shopify-
   style) checkout than two half-width blocks. */
.wow-checkout-fields {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.wow-checkout-fields__col h3 {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--black);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.create-account {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.form-row {
	margin: 0 0 4px;
}

.form-row-wide {
	flex: 1 1 100%;
}

.form-row-first,
.form-row-last {
	flex: 1 1 calc(50% - 8px);
	min-width: 200px;
}

.form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wp--preset--color--grey);
}

.form-row .required {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.form-row .optional {
	font-weight: 400;
	text-transform: none;
	color: #a8a39d;
}

.form-row input.input-text,
.form-row textarea,
.form-row select,
.form-row .select2-container .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #e4e0da;
	border-radius: 8px;
	background-color: #fff;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 14px;
	color: var(--wp--preset--color--text);
	height: auto;
	transition: border-color 0.2s ease;
}

.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.form-row textarea {
	min-height: 90px;
	resize: vertical;
}

/* selectWoo/select2 country & state dropdowns — the plugin renders its own
   inner markup we don't control, so just make its outer shell match the
   plain inputs above; internals (search box, results list) are left at
   their JS-driven defaults. */
.select2-container {
	width: 100% !important;
}

.select2-container .select2-selection--single {
	height: 44px !important;
	display: flex;
	align-items: center;
}

.select2-container .select2-selection__rendered {
	padding-left: 0 !important;
	line-height: normal !important;
}

.select2-container .select2-selection__arrow {
	height: 42px !important;
}

.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select {
	border-color: var(--wp--preset--color--accent);
}

.checkout-inline-error-message {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--wp--preset--color--accent);
}

/* Checkboxes (create account / ship to different address / terms) */
.form-row .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-transform: none;
	font-weight: 400;
	font-size: 13px;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.form-row .woocommerce-form__input-checkbox {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--accent);
}

#ship-to-different-address {
	margin: 0 0 16px;
}

#ship-to-different-address label {
	text-transform: none;
	font-weight: 400;
}

.shipping_address {
	padding-top: 8px;
}

.woocommerce-additional-fields {
	margin-top: 8px;
}

/* ── Order review card ────────────────────────────────────────────────────
   Modernized: item name gets real hierarchy (bold title, quantity as a
   quiet pill instead of an inline "×1"), configurator attributes collapse
   into one muted meta line separated by dots instead of a stacked list, and
   the totals block leans on weight/size contrast (light grey labels, a
   quietly bold subtotal/shipping, and a distinctly larger/bolder total row
   with its own divider) rather than borders on every row. */
.wow-checkout-review {
	background-color: #f2f2f2;
	border-radius: 14px;
	padding: 24px;
}

.wow-checkout-review__items {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e0e0e0;
}

.wow-checkout-review__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
}

.wow-checkout-review__item-name {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--black);
}

.wow-checkout-review__item-qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: #e2e2e2;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 11px;
	font-weight: 400;
	color: var(--wp--preset--color--grey);
	white-space: nowrap;
}

/* Configurator selections (Print type / Frame Color / Artwork size) — one
   quiet meta line, attributes separated by a middle dot instead of a
   stacked definition list. */
.wow-checkout-review__item-name dl.variation {
	margin: 6px 0 0;
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--wp--preset--color--grey);
}

.wow-checkout-review__item-name dl.variation dt,
.wow-checkout-review__item-name dl.variation dd {
	display: inline;
	margin: 0;
	font-size: 11.5px;
	font-weight: 400;
}

.wow-checkout-review__item-name dl.variation dt {
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.wow-checkout-review__item-name dl.variation dt::after {
	content: " ";
}

.wow-checkout-review__item-name dl.variation dd {
	color: var(--wp--preset--color--grey);
}

.wow-checkout-review__item-name dl.variation dd::after {
	content: " \00b7 ";
	color: #c4c4c4;
}

.wow-checkout-review__item-name dl.variation dd:last-of-type::after {
	content: "";
}

.wow-checkout-review__item-name dl.variation dd p {
	display: inline;
	margin: 0;
}

.wow-checkout-review__item-total {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	white-space: nowrap;
}

.wow-checkout-review__totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wow-checkout-review__totals .wow-cart-summary__row {
	font-size: 12.5px;
}

.wow-checkout-review__totals .wow-cart-summary__row > span:first-child {
	font-weight: 400;
	color: var(--wp--preset--color--grey);
}

.wow-checkout-review__totals .wow-cart-summary__row > span:last-child {
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.wow-checkout-review__totals .wow-cart-summary__row--total {
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid #d6d6d6;
	text-transform: none;
	letter-spacing: normal;
}

.wow-checkout-review__totals .wow-cart-summary__row--total > span:first-child {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--black);
}

.wow-checkout-review__totals .wow-cart-summary__row--total > span:last-child strong {
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	letter-spacing: 0.3px;
}

/* ── Payment methods ───────────────────────────────────────────────────
   Core markup (checkout/payment-method.php, not overridden — see
   form-checkout.php's header comment) puts the radio <input> and its
   <label> as plain siblings inside the <li>, and some gateways (Google Pay/
   Klarna in particular) add extra icon/badge markup of their own — either
   inside the label or as another sibling — that can carry inline widths or
   plugin-supplied CSS (the Stripe gateway plugin ships its own stylesheet
   that ISN'T covered by this theme's woocommerce_enqueue_styles removal,
   since it's enqueued independently). Flexbox here (rather than the earlier
   grid) is more forgiving of that: every direct child except .payment_box
   is forced onto one row via flex + nowrap-safe sizing, and any icon/badge
   is pinned to auto width so it can never push itself onto its own line.
   !important is used deliberately in a few spots purely to out-rank that
   plugin CSS; every gateway's own JS still shows/hides .payment_box via
   inline style, untouched. */
#payment {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #e4e0da;
}

.wc_payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.wc_payment_method {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	margin: 0 0 12px !important;
	padding: 15px 18px !important;
	border: 1px solid #ececec !important;
	border-radius: 12px !important;
	background-color: #f2f2f2 !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc_payment_method:last-child {
	margin-bottom: 0 !important;
}

.wc_payment_method:has(input.input-radio:checked) {
	border-color: var(--wp--preset--color--accent) !important;
	background-color: #fff !important;
}

.wc_payment_method input.input-radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0 14px 0 0 !important;
	accent-color: var(--wp--preset--color--accent);
	cursor: pointer;
}

.wc_payment_method label {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	text-transform: none;
	white-space: nowrap;
}

/* Any icon/badge — whether nested in the label (the common case) or a
   sibling of it in the <li> (some gateways do this) — stays put on the
   same row, right-aligned, and is never allowed to force a wrap. */
.wc_payment_method label img,
.wc_payment_method label svg,
.wc_payment_method label > span,
.wc_payment_method > img,
.wc_payment_method > svg {
	flex: 0 0 auto !important;
	max-height: 22px;
	width: auto !important;
	max-width: none !important;
	margin-left: auto;
}

.wc-stripe-card-icons-container {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.wc-stripe-card-icon {
	height: 18px;
	width: auto;
}

.payment_box {
	flex-basis: 100% !important;
	width: 100% !important;
	order: 99;
	margin-top: 16px;
	padding-top: 16px;
	font-size: 13px;
	color: var(--wp--preset--color--grey);
}

.payment_box p {
	margin: 0 0 10px;
}

.payment_box fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

/* Stripe Elements mount points (card number/expiry/CVC, Klarna) — give the
   iframe's container a plain input-like frame; Stripe sizes its iframe to
   fill this box on its own, so only the box model is ours to style. */
#wc-stripe-card-element,
[id^="wc_stripe_local_payment_"] {
	border-radius: 8px;
	background-color: #fff;
}

.wc-stripe-save-source {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--wp--preset--color--grey);
}

/* Express-pay buttons (Google Pay / Apple Pay, rendered by Stripe as their
   own iframe-based buttons — see .wc-stripe-payment-request-button /
   .wc-stripe-applepay-button below the payment list) get breathing room
   from whatever sits above them, same as the standard place-order button. */
.wc-stripe-payment-request-button,
.wc-stripe-applepay-button {
	margin-top: 14px;
}

/* ── Terms + place order ─────────────────────────────────────────────── */
.woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 18px;
}

.woocommerce-terms-and-conditions-link {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}

.woocommerce-terms-and-conditions {
	margin: 10px 0;
	padding: 14px;
	background-color: #fff;
	border: 1px solid #e4e0da;
	border-radius: 8px;
	font-size: 12px;
	color: var(--wp--preset--color--grey);
	max-height: 200px;
	overflow-y: auto;
}

.woocommerce-privacy-policy-text {
	margin: 0 0 16px;
	font-size: 12px;
	color: var(--wp--preset--color--grey);
}

.woocommerce-privacy-policy-text a {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}

.form-row.place-order {
	margin-top: 8px;
}

/* :not(.wc-stripe-hide) matters here: Stripe's own JS toggles that class
   onto #place_order to hide it whenever a gateway with its own express
   button (Google Pay, Apple Pay) is selected, showing its iframe button
   instead (see .wc-stripe-payment-request-button/.wc-stripe-applepay-button
   above). #place_order is an ID selector — without this exclusion its
   specificity would beat stripe.css's plain .wc-stripe-hide class and the
   default button would never actually hide. */
.form-row.place-order .button:not(.wc-stripe-hide),
#place_order:not(.wc-stripe-hide) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	border: none;
	border-radius: 8px;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.form-row.place-order .button:not(.wc-stripe-hide):hover,
#place_order:not(.wc-stripe-hide):hover {
	background-color: var(--wp--preset--color--black);
	transform: translateY(-1px);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.wow-checkout {
		padding: 32px 20px 80px;
	}

	.wow-checkout-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.wow-checkout-summary {
		position: static;
	}
}

@media (max-width: 560px) {
	.form-row-first,
	.form-row-last {
		flex: 1 1 100%;
	}
}