/* WC checkout */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-white);
	margin-bottom: 20px;
}

/* =================================================================
   CHECKOUT — Classic WooCommerce + WooCommerce Blocks
   =================================================================

   LEGACY — all rules scoped under `.wp-block-woocommerce-checkout`
   are INACTIVE while the classic checkout is enabled (the wrapper
   class is absent on a classic page, so they never match and cannot
   interfere). They are retained only so the Step-1 page swap stays
   reversible. Schedule deletion as a separate cleanup PR after the
   classic checkout is validated in production.

   The ACTIVE classic rules are scoped under `.woocommerce-checkout`
   / `.gks-checkout-*` and live both here (order review, payment,
   place-order, layout) and in the dedicated
   "CLASSIC CHECKOUT — fields, select2, picker, responsive" section
   near the end of this file.
   ================================================================= */

/* ── 1. Page shell ── */
.woocommerce-checkout .woocommerce {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--page-top-clear) 24px 80px;
}

body .wp-block-woocommerce-checkout {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--page-top-clear) 24px 80px;
	background: transparent;
	color: var(--text-white);
}

/* Ensure the page content area has dark background */
.woocommerce-checkout .woocommerce-page,
body.woocommerce-checkout {
	background: var(--black);
}

/* ── 2. Page heading ── */
.woocommerce-checkout h1,
.woocommerce-checkout h2.entry-title,
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text-white);
	margin-bottom: 48px;
}

/* ── 3. Classic checkout layout ── */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	margin-bottom: 40px;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 32px 36px;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 32px 36px;
	margin-bottom: 32px;
}

/* ── 4. Classic checkout: section headings ──
   Block-checkout step titles are handled by the consolidated
   `.wc-block-components-checkout-step__title` rule in section 9. */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--text-white);
	margin-bottom: 20px;
}

/* ── 5. Form field inputs (classic) ── */
.woocommerce-checkout form .form-row {
	margin-bottom: 18px;
}

.woocommerce-checkout form label,
.woocommerce-checkout .woocommerce-form label {
	font-family: var(--font-condensed);
	font-size: 0.72rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
	display: block;
	margin-bottom: 7px;
}

/* ── 6. Blocks: text inputs ── */
.wp-block-woocommerce-checkout .wc-block-components-text-input {
	position: relative;
	margin-bottom: 18px;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='text'],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='email'],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='tel'],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='password'],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='number'] {
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	padding: 13px 15px;
	width: 100%;
	outline: none;
	transition: border-color 0.2s;
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus {
	background: var(--dark);
	color: var(--text-white);
	border-color: var(--cyan);
	box-shadow: 0 0 0 2px var(--cyan-dim);
}

/* Floating labels */
.wp-block-woocommerce-checkout .wc-block-components-text-input label {
	font-family: var(--font-condensed);
	font-size: 0.72rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
	position: absolute;
	top: 13px;
	left: 15px;
	transition: all 0.2s;
	pointer-events: none;
	background: transparent;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus + label,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:not(:placeholder-shown) + label {
	top: -8px;
	left: 10px;
	font-size: 0.62rem;
	background: var(--dark);
	padding: 0 4px;
	color: var(--cyan);
}

/* ── 7. Blocks: select fields ── */
.wp-block-woocommerce-checkout .wc-block-components-select {
	position: relative;
	margin-bottom: 18px;
}

.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-block-components-country-input select,
.wp-block-woocommerce-checkout .wc-block-components-state-input select {
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	padding: 13px 40px 13px 15px;
	width: 100%;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s;
}

.wp-block-woocommerce-checkout .wc-block-components-select select:focus,
.wp-block-woocommerce-checkout .wc-block-components-country-input select:focus,
.wp-block-woocommerce-checkout .wc-block-components-state-input select:focus {
	border-color: var(--cyan);
	box-shadow: 0 0 0 2px var(--cyan-dim);
}

/* Select arrow icon */
.wp-block-woocommerce-checkout .wc-block-components-select::after,
.wp-block-woocommerce-checkout .wc-block-components-country-input::after,
.wp-block-woocommerce-checkout .wc-block-components-state-input::after {
	/* content: '';
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--text-gray);
	pointer-events: none; */
	display: none;
}

/* Select labels */
.wp-block-woocommerce-checkout .wc-block-components-select label,
.wp-block-woocommerce-checkout .wc-block-components-country-input label,
.wp-block-woocommerce-checkout .wc-block-components-state-input label {
	font-family: var(--font-condensed);
	font-size: 0.72rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
	display: block;
	margin-bottom: 7px;
}

/* ── 8. Blocks: field group layout ── */
.wp-block-woocommerce-checkout .wc-block-components-address-form__first_name,
.wp-block-woocommerce-checkout .wc-block-components-address-form__last_name {
	display: inline-block;
	width: 100%;
}

.wp-block-woocommerce-checkout .wc-block-components-address-form__first_name {
	margin-right: 18px;
}

/* ── 9. Blocks: section containers ──
   Every checkout section (contact, shipping address, shipping options,
   payment, order notes) carries `.wc-block-components-checkout-step`.
   Style that single hook so all panels are identical — robust against WC
   renaming the per-section `wc-block-checkout__*` modifier classes. */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout .wc-block-checkout__form > * + * {
	margin-top: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 28px 32px;
	margin-bottom: 16px;
	color: var(--text-white);
}

/* Section heading row: title + optional inline link (e.g. "Влизане"),
   with one full-width separator beneath the whole row. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-white);
	margin: 0;
	padding: 0;
	border: none;
}

/* ── 11. Blocks: checkboxes ── */
.wp-block-woocommerce-checkout .wc-block-components-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	margin-bottom: 14px;
	cursor: pointer;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type='checkbox'],
.wp-block-woocommerce-checkout .wc-block-checkout__create-account input[type='checkbox'],
.wp-block-woocommerce-checkout .wc-block-checkout__add-note input[type='checkbox'] {
	width: 16px;
	height: 16px;
	min-width: 16px;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	background: var(--dark);
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
	transition:
		border-color 0.2s,
		background 0.2s;
	position: relative;
	flex-shrink: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type='checkbox']:checked {
	border-color: var(--cyan);
	background: var(--cyan);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type='checkbox']:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: 2px solid var(--black);
	border-top: 0;
	border-left: 0;
	transform: rotate(45deg);
	display: block;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox__label,
.wp-block-woocommerce-checkout .wc-block-checkout__create-account label,
.wp-block-woocommerce-checkout .wc-block-checkout__add-note label {
	font-size: 0.85rem;
	color: var(--text-gray);
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
	padding: 0;
	display: inline;
}

/* ── 12. Blocks: guest/create account notice ── */
.wp-block-woocommerce-checkout .wc-block-checkout__create-account {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 20px 28px;
	margin-bottom: 16px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button svg {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	white-space: nowrap;
	flex-shrink: 0;
	font-family: var(--font-condensed);
	font-size: 0.78rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-gray);
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s;
	margin-bottom: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--text-white);
}

/* WC info notice */
.wp-block-woocommerce-checkout .wc-block-components-notice-banner,
.wp-block-woocommerce-checkout .wc-block-components-notice {
	background: var(--cyan-dim);
	border-left: 3px solid var(--cyan);
	color: var(--text-white);
	border-radius: 3px;
	padding: 14px 20px;
	margin-bottom: 20px;
	font-size: 0.88rem;
}

.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-error,
.wp-block-woocommerce-checkout .wc-block-components-notice.is-error {
	background: rgba(255, 68, 68, 0.08);
	border-left-color: var(--error);
	color: var(--error-soft);
}

/* ── 13. Blocks: order summary sidebar ── */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 28px 28px;
	color: var(--text-white);
	position: sticky;
	top: calc(80px + 24px);
}

/* Order summary title — WC renders it as a <p>.__title-text inside a
   .__title wrapper, NOT an <h2>. Match the real elements so it reads
   identically to the left-column step headings. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-white);
	margin: 0;
}

/* Order items */
.wp-block-woocommerce-checkout .wc-block-components-order-summary {
	background: transparent;
	border: none;
	padding: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary__content {
	padding: 0;
	background: transparent;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-white);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item:last-child {
	border-bottom: none;
}

/* Product image */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image {
	position: relative;
	width: 64px;
	min-width: 64px;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	max-width: none;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--border);
}

/* Quantity badge */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	background: var(--cyan);
	color: var(--black);
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 700;
	font-family: var(--font-condensed);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Item details */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__details {
	flex: 1;
	min-width: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__name {
	font-family: var(--font-condensed);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--text-white);
	line-height: 1.35;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__variation {
	font-size: 0.78rem;
	color: var(--text-gray);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
	font-size: 0.8rem;
	color: var(--text-gray);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-family: var(--font-condensed);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text-white);
	margin-left: auto;
	white-space: nowrap;
}

/* ── 14. Blocks: totals ── */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
	padding-top: 16px;
}

/* WC emits empty totals wrappers (no rows) that still draw a top border,
   producing the duplicated/stray separator lines. Collapse them. */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:empty,
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:not(:has(> *)) {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 0;
	font-size: 0.88rem;
	color: var(--text-gray);
	border: none;
	background: transparent;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__label {
	font-family: var(--font-condensed);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--text-gray);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
	font-family: var(--font-condensed);
	font-weight: 700;
	color: var(--text-white);
	font-size: 0.9rem;
}

/* Grand total row
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item.wc-block-components-totals-item {
	 border-top: 1px solid var(--border); 
	 margin-top: 8px; 
	 padding-top: 16px; 
} */

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-display);
	font-size: 1.1rem;
	letter-spacing: 2px;
	color: var(--text-white);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--cyan);
	letter-spacing: 1px;
}

/* ── 15. Blocks: coupon panel ── */
.wp-block-woocommerce-checkout .wc-block-components-panel {
	border: 1px solid var(--border);
	border-radius: 3px;
	background: var(--dark);
	margin-top: 14px;
	overflow: hidden;
}

.wp-block-woocommerce-checkout .wc-block-components-panel__button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	border: none;
	padding: 14px 16px;
	color: var(--text-gray);
	font-family: var(--font-condensed);
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s;
}

.wp-block-woocommerce-checkout .wc-block-components-panel__button:hover {
	color: var(--cyan);
}

.wp-block-woocommerce-checkout .wc-block-components-panel__button-icon {
	transition: transform 0.2s;
}

.wp-block-woocommerce-checkout .wc-block-components-panel[open] .wc-block-components-panel__button-icon {
	transform: rotate(180deg);
}

.wp-block-woocommerce-checkout .wc-block-components-panel__content {
	padding: 0 16px 16px;
	background: var(--dark);
}

/* Coupon input row */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form {
	display: flex;
	gap: 10px;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1;
	margin-bottom: 0;
}

/* ── 16. Blocks: place order button ── */
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	flex-wrap: nowrap;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button {
	width: 100%;
	padding: 18px 36px;
	background: var(--cyan);
	border: none;
	color: var(--black);
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: 1rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 3px;
	transition:
		background 0.2s,
		box-shadow 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--cyan);
	box-shadow: 0 0 30px var(--cyan-glow);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

/* ── 17. Blocks: spinner / loading overlay ── */
.wp-block-woocommerce-checkout .wc-block-components-spinner {
	border-color: rgba(0, 200, 230, 0.2);
	border-top-color: var(--cyan);
}

/* ── 18. Generic WC buttons within checkout ── */
.wp-block-woocommerce-checkout
	.wc-block-checkout
	.wc-block-components-button:not(.wc-block-components-checkout-place-order-button) {
	background: transparent;
	border: 1px solid var(--cyan);
	color: var(--cyan);
	font-family: var(--font-condensed);
	font-size: 0.82rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 11px 22px;
	border-radius: 3px;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s;
}

.wp-block-woocommerce-checkout
	.wc-block-checkout
	.wc-block-components-button:not(.wc-block-components-checkout-place-order-button):hover {
	background: var(--cyan);
	color: var(--black);
}

/* ── 19. Blocks: privacy policy / terms text ── */
.wp-block-woocommerce-checkout .wc-block-checkout__terms {
	color: var(--text-gray);
	font-size: 0.82rem;
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms a {
	color: var(--cyan);
	text-decoration: none;
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms a:hover {
	text-decoration: underline;
}

/* ── 20. Classic: order review table ── */
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-checkout table.shop_table th {
	font-family: var(--font-condensed);
	font-size: 0.72rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

.woocommerce-checkout table.shop_table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-white);
	font-size: 0.9rem;
}

.woocommerce-checkout table.shop_table .product-name {
	font-family: var(--font-condensed);
	font-weight: 700;
}

.woocommerce-checkout table.shop_table .order-total .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: 1px;
	color: var(--cyan);
}

/* ── 21. Classic: payment section ── */
.woocommerce-checkout #payment {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 32px 36px;
	margin-bottom: 32px;
}

/* Payment lives inside the left .gks-checkout-payment card — strip its
   own card chrome so it doesn't read as a box-in-a-box. */
.woocommerce-checkout .gks-checkout-payment #payment {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--border);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 14px 16px;
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 3px;
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: var(--text-white);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input.input-radio:checked) {
	border-color: var(--cyan);
	background: var(--cyan-dim);
}

.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
	flex-shrink: 0;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	flex: 1;
	font-family: var(--font-condensed);
	font-size: 0.88rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-white);
	cursor: pointer;
	margin: 0;
}

/* Method description (e.g. COD instructions) sits full width below
   the radio + label, separated by a hairline. */
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
	flex-basis: 100%;
	width: 100%;
	margin: 8px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--border);
	color: var(--text-gray);
	font-size: 0.82rem;
	line-height: 1.5;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box p {
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box:empty {
	display: none;
}

.woocommerce-checkout #payment .place-order {
	padding-top: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	background: var(--cyan);
	color: var(--black);
	border: none;
	padding: 18px;
	font-size: 1rem;
	letter-spacing: 3px;
	border-radius: 3px;
}

.woocommerce-checkout #payment #place_order:hover {
	background: var(--cyan);
	box-shadow: 0 0 30px var(--cyan-glow);
}

/* ── 22. Responsive ── */
@media (max-width: 768px) {
	body .wp-block-woocommerce-checkout {
		padding: var(--page-top-clear) 16px 60px;
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-step,
	.wp-block-woocommerce-checkout .wc-block-checkout__create-account {
		padding: 20px 18px;
	}

	.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
		padding-left: 12px;
	}

	/* Create-account box is a grid item in the contact form; span full width on mobile */
	.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-checkout__create-account {
		grid-column: 1 / -1;
	}

	.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
		padding: 20px 18px;
		position: static;
	}

	.wp-block-woocommerce-checkout .wc-block-components-address-form__first_name,
	.wp-block-woocommerce-checkout .wc-block-components-address-form__last_name {
		display: block;
		width: 100%;
		margin-right: 0;
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
		font-size: 0.92rem;
		padding: 16px 24px;
	}
}

@media (max-width: 480px) {
	.wp-block-woocommerce-checkout-order-summary-block
		.wc-block-components-checkout-order-summary__title
		.wc-block-components-checkout-order-summary__title-text,
	.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
		font-size: 1rem;
	}
	body .wp-block-woocommerce-checkout {
		padding: var(--page-top-clear) 12px 50px;
	}

	.wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
		width: 100%;
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
		justify-content: center;
	}
}

/* ── Classic checkout layout classes ── */
.gks-checkout-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 24px 80px;
}

.gks-checkout-heading {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text-white);
	margin-bottom: 48px;
}

.gks-checkout-form {
	display: block;
}

/* Two-column shell: customer details left, order summary sticky right. */
.gks-checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 32px;
	align-items: start;
}

.gks-checkout-side {
	position: sticky;
	top: calc(80px + 24px);
}

.gks-checkout-side #order_review_heading {
	margin-bottom: 20px;
}

/* Customer-detail cards stack full-width. Billing card carries a 2-up
   field grid (see C0); the shipping card — ship-to-different toggle +
   order notes — sits below billing instead of in a wasteful right
   column. */
.gks-checkout-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 32px;
}

.gks-checkout-card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 32px 36px;
	margin-bottom: 0;
}

/* Left flow: Контакти → Доставка → Плащане cards, evenly spaced. */
.gks-checkout-main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Card section titles (Контакти / Доставка / Плащане) */
.gks-checkout-card__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-white);
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

/* Region + city sit above the shipping methods in the Доставка card. */
.gks-checkout-delivery .gks-delivery-fields {
	margin-bottom: 20px;
}

@media (max-width: 900px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
	}

	.gks-checkout-layout {
		grid-template-columns: 1fr;
	}

	/* Order summary first on mobile (above the form + place-order). */
	.gks-checkout-side {
		position: static;
		order: -1;
	}

	.gks-checkout-fields {
		grid-template-columns: 1fr;
	}

	.gks-checkout-card {
		padding: 24px 20px;
	}

	.gks-checkout-wrap {
		padding: 0;
		padding-bottom: 60px;
	}
}

/* ── WC Blocks: CSS variable overrides (counters WC white defaults) ── */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout .wc-block-checkout {
	--wc-default-text-color: var(--text-white);
	--wc-default-border-color: rgba(255, 255, 255, 0.07);
	--wc-input-background: var(--dark);
	--wc-default-border-radius: 3px;
	--wc-default-link-color: var(--cyan);
	--wc-block-checkout-sidebar-sticky-top: calc(80px + 24px);
	color: var(--text-white);
}

/* All direct text inside the checkout block */
.wp-block-woocommerce-checkout *,
.wp-block-woocommerce-checkout .wc-block-checkout * {
	border-color: rgba(255, 255, 255, 0.07);
}

/* ── WC Blocks: validation error messages ── */
.wp-block-woocommerce-checkout .wc-block-components-validation-error {
	color: var(--error-soft);
	font-size: 0.78rem;
	font-family: var(--font-condensed);
	letter-spacing: 0.5px;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.has-error input,
.wp-block-woocommerce-checkout .wc-block-components-select.has-error select {
	border-color: var(--error);
}

/* ── WC Blocks: form rows (address fields grid) ── */
.wp-block-woocommerce-checkout .wc-block-components-address-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_1,
.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2,
.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__country,
.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-country-input,
.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__company {
	grid-column: 1 / -1;
}

/* ── WC Blocks: "Use same address" link ── */
.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing {
	margin-bottom: 12px;
}

.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-use-address-for-billing button {
	background: transparent;
	border: none;
	color: var(--cyan);
	font-family: var(--font-condensed);
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

/* ── WC Blocks: order summary toggle (mobile) ── */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
	font-family: var(--font-display);
	font-size: 1.1rem;
	letter-spacing: 2px;
}

/* ── WC Blocks: shipping rate label ── */
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package-title {
	font-family: var(--font-condensed);
	font-size: 0.78rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
	margin-bottom: 12px;
}

/* ── WC Blocks: step number badges (if enabled) ── */
.wp-block-woocommerce-checkout .wc-block-checkout__step-number {
	background: var(--cyan);
	color: var(--black);
	font-family: var(--font-condensed);
	font-weight: 700;
}

/* ── WC Blocks: payment method icons ── */
.wp-block-woocommerce-checkout .wc-block-components-payment-method-icons img {
	filter: brightness(0) invert(1);
	opacity: 0.6;
}

/* ── WC Blocks: loading skeleton ── */
.wp-block-woocommerce-checkout .wc-block-components-loading-mask::after {
	background: var(--dark);
}

/* ── WC Blocks: coupon applied tag ── */
.wp-block-woocommerce-checkout .wc-block-components-chip {
	background: var(--cyan-dim);
	border: 1px solid rgba(0, 200, 230, 0.3);
	color: var(--cyan);
	border-radius: 3px;
	font-family: var(--font-condensed);
	font-size: 0.78rem;
	letter-spacing: 1px;
	padding: 4px 10px;
}

.wp-block-woocommerce-checkout .wc-block-components-chip__remove {
	color: var(--cyan);
}

/* ── Checkout page: ensure page-content padding clears navbar ── */
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout #main {
	padding-top: var(--page-top-clear);
}

/* =================================================================
   CHECKOUT — Targeted fixes (round 2)
   ================================================================= */

/* 1. Select / combobox bottom margin white bleed
   WC blocks renders country/state as combobox <input>, not native <select>.
   Both need zero margin-bottom inside their wrappers. */
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-block-components-country-input select,
.wp-block-woocommerce-checkout .wc-block-components-state-input select,
.wp-block-woocommerce-checkout .wc-block-components-select input,
.wp-block-woocommerce-checkout .wc-block-components-country-input input,
.wp-block-woocommerce-checkout .wc-block-components-state-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-checkout .wc-block-components-combobox select {
	margin-bottom: 0;
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
}

/* The combobox wrapper itself */
.wp-block-woocommerce-checkout .wc-block-components-combobox,
.wp-block-woocommerce-checkout .wc-block-components-country-input,
.wp-block-woocommerce-checkout .wc-block-components-state-input {
	margin-bottom: 18px;
	/* background: var(--dark); */
	border-radius: 3px;
}

.wc-block-components-address-form__address_2-toggle {
	margin-top: 0;
	display: flex;
	align-items: center;
}

/* Combobox suggestion list */
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-combobox-control__suggestions-container ul,
.wp-block-woocommerce-checkout .wc-block-components-combobox ul[role='listbox'],
.wp-block-woocommerce-checkout .wc-block-components-country-input ul,
.wp-block-woocommerce-checkout .wc-block-components-state-input ul {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 3px 3px;
	z-index: 100;
	list-style: none;
	padding: 6px 0;
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-combobox ul[role='listbox'] li,
.wp-block-woocommerce-checkout .wc-block-components-country-input ul li,
.wp-block-woocommerce-checkout .wc-block-components-state-input ul li {
	padding: 10px 14px;
	font-size: 0.88rem;
	color: var(--text-gray);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.wp-block-woocommerce-checkout .wc-block-components-combobox ul[role='listbox'] li:hover,
.wp-block-woocommerce-checkout .wc-block-components-country-input ul li:hover,
.wp-block-woocommerce-checkout .wc-block-components-state-input ul li:hover,
.wp-block-woocommerce-checkout .wc-block-components-combobox ul[role='listbox'] li[aria-selected='true'],
.wp-block-woocommerce-checkout .wc-block-components-country-input ul li[aria-selected='true'] {
	background: var(--cyan-dim);
	color: var(--cyan);
}

/* Kill any stray white borders/backgrounds on select focus */
.wp-block-woocommerce-checkout .wc-block-components-select select:focus,
.wp-block-woocommerce-checkout .wc-block-components-country-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-state-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox input:focus {
	background: var(--dark);
	color: var(--text-white);
	border-color: var(--cyan);
	box-shadow: 0 0 0 2px var(--cyan-dim);
	outline: none;
}

/* 2 & 3. Checkbox: see consolidated rules in section 11 above */

/* "Use same address" row that WC renders outside .wc-block-components-checkbox */
.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing,
.wp-block-woocommerce-checkout .wc-block-checkout__ship-to-different-address {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
}

.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing input[type='checkbox'],
.wp-block-woocommerce-checkout .wc-block-checkout__ship-to-different-address input[type='checkbox'] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	min-width: 16px;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	background: var(--dark);
	cursor: pointer;
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing input[type='checkbox']:checked,
.wp-block-woocommerce-checkout .wc-block-checkout__ship-to-different-address input[type='checkbox']:checked {
	background: var(--cyan);
	border-color: var(--cyan);
}

.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing label,
.wp-block-woocommerce-checkout .wc-block-checkout__ship-to-different-address label {
	font-size: 0.85rem;
	color: var(--text-gray);
	margin: 0;
	cursor: pointer;
}

/* 5. Actions row and return-to-cart: see consolidated rules in sections 16 & 12 above */

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	flex: 1;
	width: auto;
}

/* 6. Product name in order summary: see consolidated rule in section 13 above */

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
	font-size: 0.75rem;
	color: var(--text-gray);
	margin-top: 3px;
}

/* Keep total price aligned to top of item */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	align-items: flex-start;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	padding-top: 2px;
	white-space: nowrap;
}

/* =================================================================
   CHECKOUT — Round 3 fixes (exact DOM selectors from browser)
   ================================================================= */

/* 1. Product name — actual element is <h3 class="wc-block-components-product-name"> */
h3.wc-block-components-product-name {
	font-family: var(--font-condensed);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text-white);
	line-height: 1.35;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 3. Checkbox — correct structure:
   <div.wc-block-components-checkbox>
     <label>
       <input.wc-block-components-checkbox__input>
       <svg.wc-block-components-checkbox__mark>
       <span.wc-block-components-checkbox__label>
     </label>
   </div>
   The <label> wraps everything — needs to be the flex row.
*/

.wp-block-woocommerce-checkout .wc-block-components-checkbox label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	width: 100%;
	position: relative;
}

/* The native input: render as the visible box */
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex-shrink: 0;
	background: var(--dark);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	cursor: pointer;
	margin: 0;
	padding: 0;
	position: relative;
	transition:
		border-color 0.2s,
		background 0.2s;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox__input:checked {
	background: var(--cyan);
	border-color: var(--cyan);
}

/* Hide WC's SVG mark — CSS ::after on the input provides the tick instead */
.wp-block-woocommerce-checkout .wc-block-components-checkbox__mark {
	display: none;
}

/* The text label span — see consolidated rule in section 11 above */

/* ── Blocks: radio controls (shipping / payment) ── */
.wp-block-woocommerce-checkout .wc-block-components-radio-control {
	border: none;
	padding: 0;
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
	/* Don't override padding — WC's padding-left reserves space for the abs-positioned input */
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 3px;
	margin-bottom: 8px;
	cursor: pointer;
	transition:
		border-color 0.2s,
		background 0.2s;
	color: var(--text-white);
	position: relative;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:hover {
	border-color: rgba(0, 200, 230, 0.4);
	background: rgba(0, 200, 230, 0.06);
}

.wc-block-components-radio-control--highlight-checked
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked
	label.wc-block-components-radio-control__option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option--checked {
	border-color: var(--cyan);
	background: var(--cyan-dim);
	box-shadow: none;
}

/* WC absolutely-positions the input inside the option — only override visuals */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition:
		border-color 0.2s,
		background 0.2s;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--cyan);
	background: var(--cyan);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--black);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__label-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__label {
	font-family: var(--font-condensed);
	font-size: 0.88rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-white);
	flex: 1;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label,
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option--free {
	font-family: var(--font-condensed);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--cyan);
	white-space: nowrap;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-description {
	font-size: 0.8rem;
	color: var(--text-gray);
	margin-top: 4px;
}

/* =================================================================
   CHECKOUT — Round 4: wc-blocks-components-select, textarea, autofill
   ================================================================= */

/* ── wc-blocks-components-select (native select used for country/state)
   WC renders: .wc-block-components-country-input > .wc-blocks-components-select >
               .wc-blocks-components-select__container > label + select
   ── */
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	position: relative;
	overflow: visible;
	background: var(--dark);
	border-radius: 3px;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	padding: 13px 40px 13px 15px;
	width: 100%;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	background: var(--dark);
	color: var(--text-white);
	border-color: var(--cyan);
	box-shadow: 0 0 0 2px var(--cyan-dim);
}

/* Float the label above the box (matches text-input active state) */
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
	position: absolute;
	top: -8px;
	left: 10px;
	font-family: var(--font-condensed);
	font-size: 0.62rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cyan);
	background: var(--dark);
	padding: 0 4px;
	z-index: 1;
	pointer-events: none;
	white-space: nowrap;
}

/* ── Textarea dark theme ── */
.wp-block-woocommerce-checkout textarea {
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	padding: 13px 15px;
	width: 100%;
	outline: none;
	resize: vertical;
	transition: border-color 0.2s;
}

.wp-block-woocommerce-checkout textarea:focus {
	background: var(--dark);
	color: var(--text-white);
	border-color: var(--cyan);
	box-shadow: 0 0 0 2px var(--cyan-dim);
}

/* ── Text-input focus: beat WC Blocks rule that forces background:#fff
   WC rule specificity: .wc-block-components-form .wc-block-components-text-input input[type]:focus = 0,4,1
   Our selector: .wp-block-woocommerce-checkout .wc-block-components-text-input input[type]:focus = 0,4,1 (same source order wins)
   Adding .wc-block-components-form variant gives 0,5,1 for the form-scoped WC rule ── */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type='text']:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type='email']:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type='number']:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type='password']:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type='tel']:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type='url']:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='text']:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='email']:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='number']:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='password']:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='tel']:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type='url']:focus {
	background-color: var(--dark);
	color: var(--text-white);
	border-color: var(--cyan);
	box-shadow: 0 0 0 2px var(--cyan-dim);
}

/* ── Autofill: prevent browser yellow/white background override ── */
.wp-block-woocommerce-checkout input:-webkit-autofill,
.wp-block-woocommerce-checkout input:-webkit-autofill:hover,
.wp-block-woocommerce-checkout input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--dark) inset;
	-webkit-text-fill-color: var(--text-white);
	caret-color: var(--text-white);
	transition: background-color 5000s ease-in-out 0s;
}

/* =================================================================
   CLASSIC CHECKOUT — fields, select2, order review, picker, responsive
   ACTIVE region. Rendered by woocommerce/checkout/form-checkout.php
   (.gks-checkout-wrap > form.woocommerce-checkout.gks-checkout-form)
   once the checkout page uses the Classic Checkout block. All rules
   scoped under `.woocommerce-checkout`; body-level panels (select2
   dropdown, Magnific Popup) scoped under `body`. No `!important`.
   ================================================================= */

/* ── C0. Field grid (Контакти + Доставка cards) ──
   The checkout renders selected billing fields via
   template-parts/checkout/checkout-fields.php into `.gks-field-grid`
   containers. WooCommerce's own form-row-first / -last / -wide classes
   drive 2-up vs full-width placement. Placement is CLASS-based (not by
   field ID), so the @600px collapse resets cleanly without fighting
   id-level specificity. */
.woocommerce-checkout .gks-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* Default: every row spans both columns. Reset WC float/width so the
   grid alone drives placement, and drop the per-row margin (the grid
   gap spaces rows now). */
.woocommerce-checkout .gks-field-grid .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin-bottom: 0;
	padding: 0;
}

.woocommerce-checkout .gks-field-grid .form-row-first {
	grid-column: 1 / 2;
}

.woocommerce-checkout .gks-field-grid .form-row-last {
	grid-column: 2 / 3;
}

/* Fields redundant for Econt (street / address-2 / postcode / country)
   stay in the DOM — the Econt picker writes the chosen office/address
   into #billing_address_1 and checkout.js reads these by id — but are
   hidden from view. display:none keeps them serializable while
   excluding them from the :visible required check, so they can't block
   shipping calculation.

   !important is required (and only here): WooCommerce's address-i18n.js
   runs jQuery .show() on these locale fields on every
   country_to_state_changing, writing an INLINE `display:block` that a
   class selector cannot beat. The locale `hidden:true` flag would hide
   them via WC's own JS, but it also clears the input value — which would
   wipe the address the picker writes into #billing_address_1. So an
   !important display:none is the only way to hide them without breaking
   the picker. */
.woocommerce-checkout .gks-hidden-field {
	display: none !important;
}

/* Ship-to-different: a clickable toggle bar, not a section heading */
.woocommerce-checkout #ship-to-different-address {
	margin: 0 0 4px;
}

.woocommerce-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox {
	width: 100%;
	gap: 12px;
	padding: 14px 16px;
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 3px;
	transition: border-color 0.2s;
}

.woocommerce-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox:hover {
	border-color: var(--cyan);
}

.woocommerce-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox span {
	font-family: var(--font-condensed);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-white);
}

/* Revealed shipping fields + order notes spacing */
.woocommerce-checkout .shipping_address {
	margin-top: 16px;
}

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

/* ── C1. Text / email / tel / number / password / textarea ── */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout input[type='number'],
.woocommerce-checkout input[type='password'],
.woocommerce-checkout textarea {
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	padding: 13px 15px;
	width: 100%;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.woocommerce-checkout textarea {
	resize: vertical;
	min-height: 96px;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input[type='text']:focus,
.woocommerce-checkout input[type='email']:focus,
.woocommerce-checkout input[type='tel']:focus,
.woocommerce-checkout input[type='number']:focus,
.woocommerce-checkout input[type='password']:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--cyan);
	box-shadow: 0 0 0 1px var(--cyan-dim);
}

.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
	color: var(--text-gray);
}

/* Autofill — keep the dark field background (classic-scoped) */
.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill:hover,
.woocommerce-checkout input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--dark) inset;
	-webkit-text-fill-color: var(--text-white);
	caret-color: var(--text-white);
	transition: background-color 5000s ease-in-out 0s;
}

/* Required / optional field markers */
.woocommerce-checkout .required,
.woocommerce-checkout abbr.required {
	color: var(--error-soft);
	border: none;
	text-decoration: none;
}

.woocommerce-checkout .optional {
	color: var(--text-gray);
}

/* ── C2. select2 (enhanced country / state) ──
   WC wraps native selects with select2. The closed control lives in
   the form; the open dropdown panel is appended to <body>, so it must
   be scoped under `body` (NOT `.woocommerce-checkout`) to be styled. */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 48px;
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 3px;
	display: flex;
	align-items: center;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.4;
	padding: 0 15px;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--text-gray);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--text-gray);
}

.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--cyan);
	box-shadow: 0 0 0 1px var(--cyan-dim);
}

/* Disabled city select (no region chosen yet) */
.woocommerce-checkout .select2-container--disabled .select2-selection--single {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Dropdown panel — rendered at <body> level */
body .select2-dropdown {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 3px;
	color: var(--text-white);
}

body .select2-dropdown .select2-search__field {
	background: var(--dark);
	color: var(--text-white);
	border: 1px solid var(--border);
	border-radius: 3px;
	outline: none;
}

body .select2-results__option {
	color: var(--text-gray);
	background: transparent;
	font-family: var(--font-body);
	font-size: 0.88rem;
	padding: 10px 14px;
}

/* Container-scoped to out-specify select2's
   `.select2-container--default .select2-results__option--highlighted[aria-selected]`
   (0,3,0), which paints the highlighted row #5897fb blue. */
body .select2-container--default .select2-results__option--highlighted,
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--cyan-dim);
	color: var(--cyan);
}

body .select2-container--default .select2-results__option[aria-selected='true'] {
	background: var(--cyan-dim);
	color: var(--text-white);
}

/* ── C3. Checkboxes & radios (ship-to-different, create-account, terms) ── */
.woocommerce-checkout input[type='checkbox'],
.woocommerce-checkout input[type='radio'] {
	accent-color: var(--cyan);
	width: 16px;
	height: 16px;
	vertical-align: middle;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--text-white);
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

#ship-to-different-address {
	margin-bottom: 18px;
}

#ship-to-different-address .woocommerce-form__label-for-checkbox span {
	font-family: var(--font-display);
	font-size: 1.3rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-white);
}

/* ── C4. Shipping selection (left Доставка card) ──
   wc_cart_totals_shipping_html() emits <tr> rows (a package-title row
   + a methods row holding ul#shipping_method). They're hosted in a
   .gks-shipping-table inside .gks-shipping-fragment, so flatten the
   table to block flow and hide the redundant package-title row (the
   card already carries a "Доставка" heading). */

/* Loading mask over the shipping/picker area. The Econt picker is
   destroyed + re-mounted by the plugin on every update_checkout (and the
   office Vue component fires a SECOND update_checkout from its mounted()
   hook), so switching method makes the picker flash through
   blank → loading → blank → loading → result. script.js toggles
   `.is-loading` on this stable host from the switch until the picker
   genuinely settles, so the churn is hidden behind one calm overlay and
   only the final state is revealed (then faded in by gks-picker-reveal). */
.woocommerce-checkout .gks-shipping-host {
	position: relative;
}

.woocommerce-checkout .gks-shipping-host.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: color-mix(in srgb, var(--dark) 78%, transparent);
	border-radius: 3px;
}

.woocommerce-checkout .gks-shipping-host.is-loading::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid var(--border);
	border-top-color: var(--cyan);
	border-radius: 50%;
	animation: gks-shipping-spin 0.7s linear infinite;
}

@keyframes gks-shipping-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .gks-shipping-host.is-loading::after {
		animation-duration: 1.6s;
	}
}

.woocommerce-checkout .gks-shipping-fragment .gks-shipping-table,
.woocommerce-checkout .gks-shipping-fragment tbody,
.woocommerce-checkout .gks-shipping-fragment tr,
.woocommerce-checkout .gks-shipping-fragment td {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

.woocommerce-checkout .gks-shipping-fragment .woo-bg--shipping-title {
	display: none;
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 0;
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 3px;
	margin-bottom: 8px;
	color: var(--text-white);
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li:has(input.shipping_method:checked) {
	border-color: var(--cyan);
	background: var(--cyan-dim);
}

/* The Bulgarisation plugin forces `ul#shipping_method li { padding:0
   !important }` (frontend.min.css) — unbeatable by specificity, and
   CLAUDE forbids our own !important. So inset the li's CHILDREN with
   margins to recreate the row padding. */
.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li input.shipping_method {
	flex-shrink: 0;
	margin: 14px 0 14px 16px;
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li > label {
	flex: 1;
	margin: 14px 16px 14px 0;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-condensed);
	font-size: 0.85rem;
	letter-spacing: 1px;
	text-transform: none;
	color: var(--text-white);
	cursor: pointer;
}

/* Econt picker (and Woo BG to-address fields) drop to their own
   full-width row beneath the radio + label, inset to match. */
.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li .woo-bg--econt-delivery,
.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li .woo-bg-additional-fields {
	flex-basis: 100%;
	margin: 0 16px 16px;
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li .woo-bg--econt-delivery:empty,
.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li .woo-bg-additional-fields:empty {
	display: none;
}

/* Smooth the picker re-mount. WooCommerce's update_checkout replaces the
   whole shipping fragment on every change, and the plugin (econt-frontend.js)
   reacts by $destroy-ing the Vue picker and mounting a fresh one. The plugin
   emits an empty mount node (`<div class="woo-bg-additional-fields"></div>`),
   then Vue REPLACES it on mount with the component root
   `<div class="woo-bg--econt-delivery">…</div>` (Vue 2 replaces `el`). So the
   element that actually appears — fresh on every remount — is
   `.woo-bg--econt-delivery`. Switching office ⇄ address otherwise makes it pop
   in abruptly; we can't stop the remount (the plugin needs a fresh template
   node), but a short fade on the freshly-inserted root turns the blink into a
   smooth reveal. */
@keyframes gks-picker-reveal {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: none; }
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li .woo-bg--econt-delivery:not(:empty) {
	animation: gks-picker-reveal 0.2s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .gks-shipping-fragment ul#shipping_method li .woo-bg--econt-delivery:not(:empty) {
		animation: none;
	}
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect,
.woocommerce-checkout .woo-bg--econt-delivery .woo-bg-multiselect {
	width: 100%;
}

.woocommerce-checkout .gks-shipping-fragment ul#shipping_method .amount {
	color: var(--cyan);
	font-weight: 700;
}

/* Read-only shipping cost + fee value cells in the right summary */
.woocommerce-checkout #order_review .gks-review-shipping td .woocommerce-Price-amount,
.woocommerce-checkout #order_review tr.fee td .woocommerce-Price-amount {
	color: var(--cyan);
	font-weight: 700;
}

.woocommerce-checkout #order_review tr.fee th,
.woocommerce-checkout #order_review tr.cart-subtotal th,
.woocommerce-checkout #order_review .gks-review-shipping th {
	font-family: var(--font-condensed);
	font-size: 0.72rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
	vertical-align: top;
}

/* ── C4b. Order summary card: title + thumbnailed line items ── */

/* Heading now sits inside the card as its title */
.woocommerce-checkout #order_review #order_review_heading {
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

/* Tighten the card on the narrower right column */
.gks-checkout-side #order_review {
	padding: 28px;
	margin-bottom: 0;
}

.woocommerce-checkout table.shop_table td.product-name {
	vertical-align: top;
}

/* Line item: thumbnail (with qty badge) + name/meta */
.woocommerce-checkout .gks-review-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.woocommerce-checkout .gks-review-item__thumb {
	position: relative;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.woocommerce-checkout .gks-review-item__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--border);
	display: block;
}

.woocommerce-checkout .gks-review-item__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--cyan);
	color: var(--black);
	border-radius: 10px;
	font-family: var(--font-condensed);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-sizing: border-box;
}

.woocommerce-checkout .gks-review-item__details {
	min-width: 0;
}

.woocommerce-checkout .gks-review-item__name {
	display: block;
	font-family: var(--font-condensed);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--text-white);
	line-height: 1.35;
}

/* Variation / meta rows under the name */
.woocommerce-checkout .gks-review-item__details .variation,
.woocommerce-checkout .gks-review-item__details dl {
	margin: 4px 0 0;
	font-size: 0.78rem;
	color: var(--text-gray);
}

/* ── C5. Validation (classic) ── */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-selection--single {
	border-color: var(--error);
}

.woocommerce-checkout .woocommerce-validated input.input-text {
	border-color: var(--border);
}

.woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-NoticeGroup {
	margin-bottom: 24px;
}

ul.woocommerce-error,
.woocommerce-checkout ul.woocommerce-error {
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
	background: rgba(255, 68, 68, 0.08);
	border: 1px solid var(--error);
	border-left-width: 3px;
	border-radius: 3px;
	color: var(--error-soft);
	font-size: 0.85rem;
}

ul.woocommerce-error li,
.woocommerce-checkout ul.woocommerce-error li {
	padding: 3px 0;
}

ul.woocommerce-error a,
.woocommerce-checkout ul.woocommerce-error a {
	color: var(--cyan);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
	background: var(--cyan-dim);
	border-left: 3px solid var(--cyan);
	color: var(--text-white);
	border-radius: 3px;
	padding: 14px 20px;
	margin-bottom: 20px;
	font-size: 0.88rem;
	list-style: none;
}

/* Links inside these banners (e.g. the "log in" prompt on checkout)
   otherwise fall back to the browser-default blue. */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-info a {
	color: var(--cyan);
	font-weight: 700;
}

/* =================================================================
   ECONT PICKER (Bulgarisation) — .woo-bg--* / vue-multiselect / mfp
   Mounts inside #order_review shipping rows. Plugin hardcodes
   #234182 (blue) and #d63638 (red) under `#shipping_method
   .woo-bg--econt-delivery …`; we out-specify with a leading
   `.woocommerce-checkout` parent. Plugin's two layout `!important`s
   (li.multiselect__element display, button.mfp-close bg) are left
   untouched. No `!important` added here.
   ================================================================= */

/* Container + error */
.woocommerce-checkout .woo-bg--econt-delivery {
	margin-top: 12px;
}

.woocommerce-checkout .woo-bg--office-error {
	color: var(--error-soft);
	font-family: var(--font-condensed);
	font-size: 0.8rem;
	margin-bottom: 10px;
}

/* vue-multiselect control */
.woocommerce-checkout .woo-bg--econt-delivery .multiselect__tags {
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 3px;
	color: var(--text-white);
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect__input,
.woocommerce-checkout .woo-bg--econt-delivery .multiselect__single {
	background: transparent;
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect__placeholder {
	color: var(--text-gray);
	font-family: var(--font-body);
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect--active .multiselect__tags {
	border-color: var(--cyan);
	box-shadow: 0 0 0 1px var(--cyan-dim);
}

/* Caret + spinner (plugin paints these on #fff) */
.woocommerce-checkout .woo-bg--econt-delivery .multiselect__select::before {
	border-color: var(--text-gray) transparent transparent;
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect__spinner {
	background: var(--dark);
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect__spinner::before,
.woocommerce-checkout .woo-bg--econt-delivery .multiselect__spinner::after {
	border-top-color: var(--cyan);
}

/* Dropdown panel + options */
.woocommerce-checkout .woo-bg--econt-delivery .multiselect__content-wrapper {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 3px 3px;
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect__option {
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 0.88rem;
}

.woocommerce-checkout .woo-bg--econt-delivery .multiselect__option--selected {
	background: var(--cyan-dim);
	color: var(--text-white);
	font-weight: 700;
}

/* Override plugin blue #234182 on the highlighted (hover/keyboard) option */
.woocommerce-checkout
	#shipping_method
	.woo-bg--econt-delivery
	.multiselect__option--highlight:not(.multiselect__option--selected),
.woocommerce-checkout
	#shipping_method
	.woo-bg--econt-delivery
	.multiselect__option.multiselect__option--highlight:after {
	background: var(--cyan-dim);
	color: var(--text-white);
}

/* Override plugin red #d63638 on the highlighted+selected option */
.woocommerce-checkout
	#shipping_method
	.woo-bg--econt-delivery
	.multiselect__option--highlight.multiselect__option--selected,
.woocommerce-checkout
	#shipping_method
	.woo-bg--econt-delivery
	.multiselect__option.multiselect__option--highlight.multiselect__option--selected:after {
	background: var(--cyan-dim);
	color: var(--text-white);
}

/* Office-locator link → ghost cyan CTA */
.woocommerce-checkout #woo-bg--econt-office-locator {
	display: inline-block;
	margin-top: 6px;
	font-family: var(--font-condensed);
	font-size: 0.78rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cyan);
	text-decoration: none;
	border: 1px solid var(--cyan);
	border-radius: 3px;
	padding: 8px 16px;
	background: transparent;
	transition:
		background 0.2s,
		color 0.2s;
}

.woocommerce-checkout #woo-bg--econt-office-locator:hover {
	background: var(--cyan);
	color: var(--black);
}

/* Magnific Popup map modal chrome (inner iframe = remote, unstyleable) */
body .mfp-bg {
	background: var(--black);
	opacity: 0.85;
}

body .mfp-iframe-holder .mfp-content,
body .mfp-iframe-scaler iframe {
	border: 1px solid var(--border);
	border-radius: 4px;
}

/* Close button: cyan + visible — do NOT set its background (plugin
   resets it with `!important`); only recolor the glyph. */
body .mfp-close {
	color: var(--cyan);
	opacity: 1;
}

/* ── C6. Classic responsive ── */
@media (max-width: 768px) {
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .woocommerce-checkout-review-order,
	.woocommerce-checkout #payment {
		padding: 24px 20px;
	}

	.woocommerce-checkout table.shop_table {
		display: block;
		overflow-x: auto;
	}

	.woocommerce-checkout .woo-bg--econt-delivery .woo-bg-multiselect {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.gks-checkout-card,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #payment {
		padding: 20px 16px;
	}

	/* Stack paired fields on narrow screens. Placement is class-based
	   (form-row-first/-last), so reset both the grid and those classes
	   to span full width. */
	.woocommerce-checkout .gks-field-grid {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout .gks-field-grid .form-row-first,
	.woocommerce-checkout .gks-field-grid .form-row-last {
		grid-column: 1 / -1;
	}

	body .mfp-iframe-holder {
		padding: 30px 6px;
	}
}

@media (max-width: 480px) {
	.gks-checkout-heading {
		font-size: clamp(1.8rem, 8vw, 2.4rem);
	}

	.woocommerce-checkout #payment #place_order {
		width: 100%;
		letter-spacing: 2px;
	}
}

/* =====================================================================
   ORDER RECEIVED / THANK-YOU PAGE
   Rendered via the_content() on the checkout page, so the bare
   .woocommerce div sits flush under the fixed navbar with no wrapper —
   supply the same top clearance other pages get, plus a min-height that
   pushes the footer to the bottom of the viewport.
   ===================================================================== */
body.woocommerce-order-received .woocommerce,
.woocommerce:has(.gks-thankyou) {
	padding: var(--page-top-clear) var(--page-pad-x) var(--section-pad-y);
	min-height: calc(100vh - var(--navbar-height));
}

.gks-thankyou {
	max-width: 760px;
	margin: 0 auto;
}

/* ── Success / failed hero ── */
.gks-thankyou-hero {
	text-align: center;
	margin-bottom: 44px;
}

.gks-thankyou-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan);
	color: var(--cyan);
	margin-bottom: 22px;
	box-shadow: 0 0 30px var(--cyan-glow);
}

.gks-thankyou-hero--failed .gks-thankyou-icon {
	background: rgba(255, 68, 68, 0.1);
	border-color: var(--error);
	color: var(--error-soft);
	box-shadow: 0 0 30px rgba(255, 68, 68, 0.25);
}

.gks-thankyou-title {
	font-family: var(--font-display);
	font-size: 2.6rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text-white);
	line-height: 1;
	margin-bottom: 12px;
}

.gks-thankyou-subtitle {
	color: var(--text-gray);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 auto;
}

.gks-thankyou-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* ── Order overview cards ── */
.gks-order-overview {
	list-style: none;
	margin: 0 0 44px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 4px;
	overflow: hidden;
}

.gks-order-overview li {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 22px 24px;
	background: var(--card-bg);
	border: none;
	margin: 0;
}

.gks-order-overview .gks-overview-label {
	font-family: var(--font-condensed);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-gray);
}

.gks-order-overview li strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-white);
}

/* ── Order details + customer details (rendered by woocommerce_thankyou) ── */
.gks-thankyou .woocommerce-order-details,
.gks-thankyou .woocommerce-customer-details {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 32px 34px;
	margin-bottom: 24px;
}

.gks-thankyou .woocommerce-order-details__title,
.gks-thankyou .woocommerce-customer-details__title,
.gks-thankyou .woocommerce-column__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-white);
	margin-bottom: 20px;
}

.gks-thankyou table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.gks-thankyou table.shop_table th {
	font-family: var(--font-condensed);
	font-size: 0.72rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cyan);
	padding: 12px 0;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.gks-thankyou table.shop_table td {
	padding: 14px 0;
	font-size: 0.9rem;
	color: var(--text-gray);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gks-thankyou table.shop_table td a {
	color: var(--text-white);
	text-decoration: none;
	transition: color 0.2s;
}

.gks-thankyou table.shop_table td a:hover {
	color: var(--cyan);
}

.gks-thankyou table.shop_table .product-total,
.gks-thankyou table.shop_table td.product-total {
	color: var(--text-white);
	text-align: right;
}

.gks-thankyou table.shop_table th.product-total,
.gks-thankyou table.shop_table th.woocommerce-table__product-total {
	text-align: right;
}

.gks-thankyou table.shop_table tfoot th {
	color: var(--text-gray);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	text-transform: uppercase;
}

.gks-thankyou table.shop_table tfoot td {
	color: var(--text-white);
	font-weight: 700;
	text-align: right;
}

.gks-thankyou table.shop_table tfoot tr:last-child th,
.gks-thankyou table.shop_table tfoot tr:last-child td {
	border-bottom: none;
	font-size: 1.05rem;
	padding-top: 18px;
}

/* Customer (billing / shipping) address blocks */
.gks-thankyou .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.gks-thankyou .woocommerce-customer-details address {
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--text-gray);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 18px 20px;
}

.gks-thankyou .woocommerce-customer-details p {
	font-size: 0.9rem;
	color: var(--text-gray);
}

@media (max-width: 600px) {
	.gks-thankyou-title {
		font-size: 2rem;
	}

	.gks-thankyou .woocommerce-order-details,
	.gks-thankyou .woocommerce-customer-details {
		padding: 24px 20px;
	}
}