/**
 * NEXR Luxury — Cart & Checkout (Oula-grade UX).
 * Loaded only on cart/checkout pages. Classic WooCommerce markup, no template
 * overrides — survives WooCommerce updates.
 */

/* =========================================================================
   Shared: page rhythm
   ========================================================================= */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main { background: var(--bg); }

.woocommerce-cart .container.section,
.woocommerce-checkout .container.section { padding-block-start: var(--space-l); }

/* WooCommerce pages must be FULL WIDTH — page.php wraps regular pages in the
   narrow blog/prose container (~45rem) which squeezes the cart table to
   ~500px and the checkout into a column. Verified live. */
.woocommerce-cart .container--narrow,
.woocommerce-checkout .container--narrow,
.woocommerce-account .container--narrow { max-width: var(--container-max, 82rem); }
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.woocommerce-cart .prose,
.woocommerce-checkout .prose,
.woocommerce-account .prose { max-width: none; }

/* Luxury field baseline (cart coupon + all checkout fields) */
.woocommerce-cart input.input-text,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	min-height: 48px;
	width: 100%;
	padding: .65rem .9rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.woocommerce-cart input.input-text:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--c-ink);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
.woocommerce-checkout .form-row label {
	display: block;
	margin-block-end: .3rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text);
}
.woocommerce-checkout .form-row { margin-block-end: 1rem; }
.woocommerce-checkout .form-row .required { color: var(--c-danger); text-decoration: none; }

/* Inline validation states (Woo adds these classes natively) */
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--c-danger); }
.woocommerce-checkout .form-row.woocommerce-validated .input-text,
.woocommerce-checkout .form-row.woocommerce-validated select { border-color: #1f7a43; }

/* =========================================================================
   CART — two columns, sticky totals (Oula pattern)
   ========================================================================= */
.woocommerce-cart .woocommerce { display: block; }
@media (min-width: 1000px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: var(--space-xl);
		align-items: start;
	}
	.woocommerce-cart .woocommerce-notices-wrapper,
	.woocommerce-cart .woocommerce > .woocommerce-error,
	.woocommerce-cart .woocommerce > .woocommerce-message { grid-column: 1 / -1; }
	.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: calc(var(--header-h, 72px) + var(--space-m));
	}
}

/* Cart table — strip the bordered-spreadsheet look */
.woocommerce-cart table.shop_table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
	border: 0;
	border-block-end: 1px solid var(--border);
	padding: 1rem .5rem;
	background: transparent;
	vertical-align: middle;
}
.woocommerce-cart table.shop_table thead th {
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-muted);
}
.woocommerce-cart td.product-thumbnail { width: 100px; }
.woocommerce-cart td.product-thumbnail img {
	/* !important: WooCommerce core ships `table.cart img { width:32px }` and
	   the theme reset caps img at max-width:100% of a collapsed cell. */
	width: 84px !important;
	height: 84px !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: var(--radius-s);
	border: 1px solid var(--border);
}
.woocommerce-cart td.product-name a { color: var(--text); text-decoration: none; font-weight: 600; }
.woocommerce-cart td.product-name a:hover { text-decoration: underline; }
.woocommerce-cart .product-remove a {
	display: inline-grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	color: var(--text-muted) !important;
	font-size: 1.1rem;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.woocommerce-cart .product-remove a:hover { background: rgba(192, 57, 43, .1); color: var(--c-danger) !important; }

/* Quantity stepper (JS wraps input with buttons) */
.nexr-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
	overflow: hidden;
}
.nexr-qty .nexr-qty__btn {
	width: 38px; height: 44px;
	display: grid; place-items: center;
	background: var(--surface);
	border: 0;
	color: var(--text);
	font-size: 1.05rem;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.nexr-qty .nexr-qty__btn:hover { background: var(--surface-2, #f5f5f3); }
.nexr-qty input.qty {
	width: 3rem; height: 44px;
	border: 0;
	text-align: center;
	font: inherit;
	background: var(--surface);
	-moz-appearance: textfield;
	appearance: textfield;
}
.nexr-qty input.qty::-webkit-outer-spin-button,
.nexr-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Coupon + update row */
.woocommerce-cart td.actions { padding-block: 1.25rem; }
.woocommerce-cart td.actions .coupon { display: flex; gap: .5rem; flex-wrap: wrap; }
.woocommerce-cart td.actions .coupon .input-text { width: 14rem; }

/* Totals card */
.woocommerce-cart .cart_totals {
	width: 100% !important;
	float: none !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	background: var(--surface);
	padding: 1.5rem;
	box-shadow: var(--shadow-1);
}
.woocommerce-cart .cart_totals h2 {
	font-size: var(--step-1);
	margin-block: 0 1rem;
}
.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th { padding-inline: 0; }
.woocommerce-cart .cart_totals .order-total .amount { font-size: var(--step-1); }
.wc-proceed-to-checkout { padding: 0 !important; margin-block-start: 1.25rem; }
.wc-proceed-to-checkout .checkout-button {
	display: flex !important;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-size: var(--step-0);
}

/* =========================================================================
   CHECKOUT — left form, right sticky order summary (Oula pattern)
   ========================================================================= */
form.checkout.woocommerce-checkout { display: block; }
@media (min-width: 1080px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 26rem;
		gap: var(--space-xl);
		align-items: start;
	}
	form.checkout.woocommerce-checkout > #customer_details { grid-column: 1; }
	form.checkout.woocommerce-checkout > #order_review_heading,
	form.checkout.woocommerce-checkout > #order_review { grid-column: 2; }
	form.checkout.woocommerce-checkout > #order_review {
		position: sticky;
		top: calc(var(--header-h, 72px) + var(--space-m));
	}
}

/* Kill Woo's default 2-col split inside customer details — single elegant column */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout #customer_details h3,
#order_review_heading {
	font-size: var(--step-1);
	margin-block: 0 1rem;
}
#order_review_heading { margin-block-start: 0; }

/* Order summary card */
#order_review {
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	background: var(--surface);
	padding: 1.5rem;
	box-shadow: var(--shadow-1);
}
#order_review table.shop_table { border: 0; width: 100%; }
#order_review table.shop_table th,
#order_review table.shop_table td {
	border: 0;
	border-block-end: 1px solid var(--border);
	padding: .8rem 0;
	background: transparent;
	vertical-align: middle;
}
#order_review table.shop_table tfoot .order-total td,
#order_review table.shop_table tfoot .order-total th { border-block-end: 0; }
#order_review .order-total .amount { font-size: var(--step-1); font-weight: 700; }

/* Product line: thumbnail + name (thumb injected via PHP filter) */
.nexr-review-thumb img {
	width: 56px; height: 56px;
	object-fit: cover;
	border-radius: var(--radius-s);
	border: 1px solid var(--border);
	display: block;
}
#order_review td.product-name {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: var(--step--1);
}
#order_review td.product-name .nexr-review-name { flex: 1; }

/* Payment methods */
#payment { background: transparent !important; border-radius: 0; }
#payment ul.payment_methods {
	border: 0 !important;
	padding: 0 !important;
	display: grid;
	gap: .6rem;
}
#payment ul.payment_methods li {
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
	padding: .85rem 1rem;
	background: var(--surface);
	transition: border-color var(--dur-fast) var(--ease-out);
}
#payment ul.payment_methods li:has(input:checked) { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); }
#payment ul.payment_methods li label { font-weight: 600; cursor: pointer; }
#payment div.payment_box {
	background: var(--surface-2, #f5f5f3) !important;
	border-radius: var(--radius-s);
	font-size: var(--step--1);
}
#payment div.payment_box::before { display: none !important; }

/* Place order — full width, luxury weight; sticky on mobile */
#payment .place-order { padding: 1rem 0 0 !important; }
#place_order {
	width: 100%;
	min-height: 54px;
	font-size: var(--step-0);
	letter-spacing: .04em;
}
@media (max-width: 1079px) {
	#payment .place-order {
		position: sticky;
		bottom: 0;
		background: linear-gradient(transparent, var(--bg) 30%);
		padding-block: .75rem !important;
		z-index: 10;
	}
}

/* Coupon toggle row on checkout */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--surface);
	border: 1px dashed var(--border);
	border-radius: var(--radius-s);
	color: var(--text);
}
.woocommerce-checkout form.checkout_coupon {
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-m);
	padding: 1rem !important;
}

/* Mobile polish */
@media (max-width: 767px) {
	.woocommerce-cart table.shop_table tr.cart_item { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; padding-block: 1rem; border-block-end: 1px solid var(--border); }
	.woocommerce-cart table.shop_table thead { display: none; }
	.woocommerce-cart table.shop_table tr.cart_item td { border: 0; padding: .15rem 0; }
	.woocommerce-cart td.product-thumbnail { grid-row: 1 / 5; }
	.woocommerce-cart td.product-thumbnail img { width: 96px; height: 96px; }
	.woocommerce-cart table.shop_table td.actions { display: block; }
	.woocommerce-cart table.shop_table td.actions::before { content: none; }
}

/* =========================================================================
   v2.7.0 — PREMIUM LAYER (Oula/Shopify-reference checkout experience).
   Pure styling + progressive enhancement over classic Woo markup: floating
   labels (rows get .nexr-float from checkout.js), soft-rounded fields,
   card-style shipping/payment options, badge-thumbed sticky summary.
   ========================================================================= */
.woocommerce-cart, .woocommerce-checkout { --co-radius: 10px; }

/* ---- Fields: taller, soft-rounded, calm ---- */
.woocommerce-cart input.input-text,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	min-height: 52px;
	/* !important: jeg-elementor-kit / plugin form CSS re-declares a 4px radius later in the cascade */
	border-radius: var(--co-radius) !important;
	border-color: var(--c-line-strong, rgba(17,17,17,.24));
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	box-shadow: 0 0 0 4px rgba(17, 17, 17, .07);
}
.woocommerce-checkout .form-row { margin-block-end: .9rem; }

/* ---- Floating labels (text inputs/textarea; checkout.js adds .nexr-float) ---- */
.woocommerce-checkout .form-row.nexr-float { position: relative; }
.woocommerce-checkout .form-row.nexr-float > label {
	position: absolute;
	inset-inline-start: .95rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-weight: 400;
	color: var(--text-muted);
	pointer-events: none;
	transition: all .18s var(--ease-out);
	z-index: 2;
	max-width: calc(100% - 2rem);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.woocommerce-checkout .form-row.nexr-float textarea ~ label,
.woocommerce-checkout .form-row.nexr-float:has(textarea) > label {
	inset-block-start: 1.1rem; transform: none;
}
.woocommerce-checkout .form-row.nexr-float.is-active > label {
	inset-block-start: .42rem;
	transform: none;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--text-muted);
}
.woocommerce-checkout .form-row.nexr-float .input-text,
.woocommerce-checkout .form-row.nexr-float textarea {
	padding-block: 1.35rem .45rem;
}
.woocommerce-checkout .form-row.nexr-float .input-text::placeholder,
.woocommerce-checkout .form-row.nexr-float textarea::placeholder { color: transparent; }

/* Select rows (country/governorate): permanent mini-label inside the field */
.woocommerce-checkout .form-row.nexr-has-select { position: relative; }
.woocommerce-checkout .form-row.nexr-has-select > label {
	position: absolute;
	inset-inline-start: .95rem;
	inset-block-start: .42rem;
	margin: 0;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--text-muted);
	pointer-events: none;
	z-index: 3;
}
.woocommerce-checkout .form-row.nexr-has-select select { padding-block: 1.3rem .4rem; }
/* Select2 (Woo country/state dropdowns) — match native fields */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 52px;
	border: 1px solid var(--c-line-strong, rgba(17,17,17,.24));
	border-radius: var(--co-radius) !important;
	background: var(--surface);
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.3;
	padding: 1.55rem .95rem .4rem;
	color: var(--text);
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 50px; }
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--c-ink);
	box-shadow: 0 0 0 4px rgba(17, 17, 17, .07);
}

/* Invalid: gentle shake once + red ring */
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
	animation: nexr-co-shake .4s var(--ease-out);
	box-shadow: 0 0 0 4px rgba(192, 57, 43, .08);
}
@keyframes nexr-co-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	60% { transform: translateX(4px); }
	80% { transform: translateX(-2px); }
}

/* ---- Order summary: quiet gray panel, badge thumbs, big total ---- */
#order_review {
	background: var(--bg-alt, #f6f6f4);
	border: 0;
	border-radius: calc(var(--co-radius) + 2px);
	padding: 1.75rem;
	box-shadow: none;
}
.nexr-review-thumb { position: relative; display: inline-block; flex: none; }
.nexr-review-thumb img {
	width: 64px; height: 64px;
	border-radius: var(--co-radius);
	background: #fff;
}
.nexr-review-qty {
	position: absolute;
	inset-block-start: -7px;
	inset-inline-end: -7px;
	min-width: 20px; height: 20px;
	padding-inline: 5px;
	display: grid; place-items: center;
	background: var(--c-ink);
	color: #fff;
	font-size: 11px; font-weight: 600;
	border-radius: 999px;
	z-index: 2;
}
#order_review table.shop_table th,
#order_review table.shop_table td { border-block-end-color: rgba(17,17,17,.08); }
#order_review tfoot th { font-weight: 500; color: var(--text-muted); }
#order_review .order-total th { color: var(--text); font-weight: 700; }
#order_review .order-total .amount { font-size: var(--step-2); }

/* ---- Shipping methods as selectable cards ---- */
#order_review ul#shipping_method,
.woocommerce-checkout ul#shipping_method {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: .5rem;
}
#order_review ul#shipping_method li {
	border: 1px solid var(--c-line-strong, rgba(17,17,17,.24));
	border-radius: var(--co-radius);
	background: var(--surface);
	padding: .8rem .95rem;
	display: flex; align-items: center; gap: .6rem;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
	cursor: pointer;
}
#order_review ul#shipping_method li:has(input:checked) {
	border-color: var(--c-ink);
	box-shadow: 0 0 0 1px var(--c-ink);
}
#order_review ul#shipping_method li label { cursor: pointer; margin: 0; flex: 1; font-weight: 500; }

/* ---- Payment options: bigger touch cards, brand radio ---- */
#payment ul.payment_methods li {
	border-radius: var(--co-radius);
	border-color: var(--c-line-strong, rgba(17,17,17,.24));
	padding: 1rem 1.1rem;
	display: block;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#payment ul.payment_methods input[type="radio"],
#order_review ul#shipping_method input[type="radio"] {
	accent-color: var(--c-ink);
	width: 18px; height: 18px;
	margin-inline-end: .35rem;
	vertical-align: -3px;
}
#payment div.payment_box { border-radius: calc(var(--co-radius) - 2px); }

/* ---- Place order: spinner while WooCommerce processes ---- */
#place_order { position: relative; border-radius: var(--co-radius); overflow: hidden; }
form.checkout.processing #place_order {
	color: transparent !important;
	pointer-events: none;
}
form.checkout.processing #place_order::before {
	content: "";
	position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255,255,255,.35);
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: nexr-co-spin .7s linear infinite;
}
@keyframes nexr-co-spin { to { transform: rotate(360deg); } }

/* ---- Cart page: rounded cards + luxury empty state ---- */
.woocommerce-cart .cart_totals { border-radius: calc(var(--co-radius) + 2px); border: 0; background: var(--bg-alt, #f6f6f4); box-shadow: none; }
.woocommerce-cart .cart_totals h2 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .08em; }
.woocommerce-cart td.product-thumbnail img { border-radius: var(--co-radius); }
.woocommerce-cart td.actions .coupon .input-text { border-radius: var(--co-radius); }
.wc-proceed-to-checkout .checkout-button { border-radius: var(--co-radius); }
.cart-empty.woocommerce-info {
	background: transparent; border: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--step-3);
	text-transform: uppercase;
	color: var(--text);
	padding: var(--space-2xl) 0 var(--space-s);
}
.woocommerce-cart .return-to-shop { text-align: center; padding-block-end: var(--space-2xl); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .form-row.nexr-float > label { transition: none; }
	.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
	.woocommerce-checkout .form-row.woocommerce-invalid select { animation: none; }
}