/* ==================================================================
   16 - ORDER STATUS
   Order Received (success + failed branches), Payment Not Completed,
   and the themed header on the native Pay for Order screen.

   Scoping: every selector below is either inside .wo-order-status (a
   wrapper this theme prints itself in woocommerce/checkout/thankyou.php
   and woocommerce/global/payment-cancelled.php) or gated on the
   self-controlled body classes added in inc/order-status.php
   (.wo-order-pay, .wo-order-received, .wo-payment-cancelled). None of
   it can reach the cart, checkout form, or any other page.
   ================================================================== */


/* ------------------------------------------------------------------
   SHARED: STATUS BANNER
   Used by all four states (success, failed, pending, unknown).
   ------------------------------------------------------------------ */

.wo-order-status {
	padding-block: var(--wo-space-10) var(--wo-space-16);
}

.wo-order-status__banner {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;

	background: var(--wo-grad-surface);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	box-shadow: var(--wo-shadow-lg);
}

.wo-order-status__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;
	margin-bottom: var(--wo-space-5);

	border-radius: var(--wo-radius-circle);
	border: 1px solid var(--wo-line-strong);
}

.wo-order-status__icon svg {
	fill: none;
	stroke: currentColor;
}

.wo-order-status__icon--success {
	color: var(--wo-success);
	background: rgba(74, 222, 128, 0.14);
	box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.08), 0 8px 28px rgba(74, 222, 128, 0.28);
}

.wo-order-status__icon--failed {
	color: var(--wo-error);
	background: rgba(255, 107, 107, 0.14);
	box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.08), 0 8px 28px rgba(255, 107, 107, 0.26);
}

.wo-order-status__icon--pending {
	color: var(--wo-gold);
	background: var(--wo-gold-soft);
	box-shadow: 0 0 0 8px rgba(245, 197, 66, 0.08), 0 8px 28px rgba(245, 197, 66, 0.22);
}

.wo-order-status__icon--unknown {
	color: var(--wo-text-dim);
	background: rgba(255, 255, 255, 0.06);
}

.wo-order-status__eyebrow {
	display: inline-block;
	margin-bottom: var(--wo-space-3);

	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	color: var(--wo-text-dim);
}

.wo-order-status__banner--success .wo-order-status__eyebrow {
	color: var(--wo-success);
}

.wo-order-status__banner--failed .wo-order-status__eyebrow {
	color: var(--wo-error);
}

.wo-order-status__banner--pending .wo-order-status__eyebrow {
	color: var(--wo-gold);
}

.wo-order-status__title {
	margin: 0 0 var(--wo-space-4);
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-3xl);
	font-weight: var(--wo-weight-semibold);
	line-height: var(--wo-leading-tight);
	color: var(--wo-text);
}

.wo-order-status__text {
	max-width: 46ch;
	margin: 0 auto var(--wo-space-6);
	font-size: var(--wo-text-md);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
}

.wo-order-status__banner .wo-order-status__actions:last-child,
.wo-order-status__banner .wo-order-status__text:last-child {
	margin-bottom: 0;
}

.wo-order-status__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wo-space-4);
	margin-bottom: var(--wo-space-2);
}

.wo-order-status__actions .wo-btn {
	min-width: 200px;
}

.wo-order-status__link {
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wo-order-status__link:hover {
	color: var(--wo-text);
}

.wo-order-status__ref {
	margin: var(--wo-space-6) 0 0;
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}


/* ------------------------------------------------------------------
   ORDER META STRIP
   Shared between the Order Received success state and the themed
   header injected above the native Pay for Order form.
   ------------------------------------------------------------------ */

.wo-order-meta {
	max-width: var(--wo-container);
	margin: var(--wo-space-8) auto 0;
	padding: var(--wo-space-6) clamp(1.25rem, 3vw, 2rem);

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
}

.wo-order-pay .wo-order-meta {
	margin-top: 0;
	margin-bottom: var(--wo-space-8);
}

.wo-order-meta__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wo-space-5) var(--wo-space-6);
}

.wo-order-meta__item {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-1);
}

.wo-order-meta__label {
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wide);
	text-transform: uppercase;
	color: var(--wo-text-dim);
}

.wo-order-meta__value {
	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	overflow-wrap: anywhere;
}

.wo-order-meta__value--gold {
	color: var(--wo-gold);
}

.wo-order-meta__value .amount,
.wo-order-meta__value bdi {
	white-space: normal;
	overflow-wrap: anywhere;
}

.wo-order-meta__note {
	margin: var(--wo-space-5) 0 0;
	padding-top: var(--wo-space-5);
	border-top: 1px solid var(--wo-line-faint);

	font-size: var(--wo-text-sm);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
}

.wo-order-meta__return {
	margin: var(--wo-space-3) 0 0;
}

.wo-order-meta__return-link {
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-primary-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wo-order-meta__return-link:hover {
	color: var(--wo-text);
}


/* ------------------------------------------------------------------
   TWO-COLUMN LAYOUT (success state only)
   ------------------------------------------------------------------ */

.wo-order-status__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wo-space-8);

	max-width: var(--wo-container);
	margin: var(--wo-space-8) auto 0;
}

@media (min-width: 992px) {

	.wo-order-status__grid {
		grid-template-columns: minmax(0, 1.7fr) minmax(min(340px, 100%), 1fr);
		align-items: start;
	}
}

.wo-order-status__main,
.wo-order-status__aside {
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-6);
}


/* ------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------ */

.wo-order-card {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;

	padding: clamp(1.5rem, 3vw, 2.25rem);

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
}

.wo-order-card__title {
	margin: 0 0 var(--wo-space-5);
	padding-bottom: var(--wo-space-4);
	border-bottom: 1px solid var(--wo-line-faint);

	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.wo-order-card__text {
	margin: 0;
	font-size: var(--wo-text-sm);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
	overflow-wrap: anywhere;
}

.wo-order-card__meta {
	margin: var(--wo-space-3) 0 0;
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	overflow-wrap: anywhere;
}

.wo-order-card + .wo-order-card {
	margin-top: 0;
}


/* ------------------------------------------------------------------
   ORDER ITEMS
   ------------------------------------------------------------------ */

.wo-order-items {
	list-style: none;
	margin: 0 0 var(--wo-space-6);
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);
}

.wo-order-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1rem);

	padding-bottom: var(--wo-space-4);
	border-bottom: 1px solid var(--wo-line-faint);
}

.wo-order-items > .wo-order-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.wo-order-item__media {
	width: clamp(56px, 6vw, 72px);
}

.wo-order-item__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--wo-radius-sm);
	border: 1px solid var(--wo-line);
}

.wo-order-item__body {
	min-width: 0;
}

.wo-order-item__name {
	margin: 0;
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	line-height: 1.4;
	color: var(--wo-text);
	overflow-wrap: anywhere;
}

.wo-order-item__name a {
	color: inherit;
	text-decoration: none;
}

.wo-order-item__name a:hover {
	color: var(--wo-primary-hover);
}

.wo-order-item__qty {
	margin-left: var(--wo-space-2);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
	white-space: nowrap;
}

.wo-order-item__meta {
	margin-top: var(--wo-space-1);
	font-size: var(--wo-text-xs);
	line-height: 1.5;
	color: var(--wo-text-dim);
	overflow-wrap: anywhere;
}

.wo-order-item__meta p {
	margin: 0;
}

.wo-order-item__total {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 40vw;

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
	text-align: right;
	white-space: normal;
	overflow-wrap: anywhere;
}

.wo-order-item__total .amount,
.wo-order-item__total bdi {
	white-space: nowrap;
}


/* ------------------------------------------------------------------
   TOTALS
   Same label-flexes / figure-holds-its-width model used on the cart
   and checkout summaries, so a coupon or tax row here behaves
   identically to one on those pages.
   ------------------------------------------------------------------ */

.wo-order-totals {
	display: flex;
	flex-direction: column;
}

.wo-order-totals__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wo-space-2) var(--wo-space-5);

	padding-block: var(--wo-space-3);
	border-bottom: 1px solid var(--wo-line-faint);
}

.wo-order-totals__row:last-child {
	border-bottom: none;
}

.wo-order-totals__label {
	flex: 1 1 0;
	min-width: min(7rem, 100%);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	overflow-wrap: anywhere;
}

.wo-order-totals__value {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	text-align: right;
	overflow-wrap: anywhere;
}

.wo-order-totals__row--grand {
	margin-top: var(--wo-space-2);
	padding-top: var(--wo-space-4);
	border-top: 1px solid var(--wo-line);
	border-bottom: none;
}

.wo-order-totals__row--grand .wo-order-totals__label {
	flex: 0 1 auto;
	min-width: 0;
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-lg);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.wo-order-totals__row--grand .wo-order-totals__value {
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
}

.wo-order-totals .amount,
.wo-order-totals bdi {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}


/* ------------------------------------------------------------------
   ADDRESS / CONTACT
   ------------------------------------------------------------------ */

.wo-order-address {
	margin: 0;
	font-style: normal;
	font-size: var(--wo-text-sm);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
	overflow-wrap: anywhere;
}

.wo-order-contact {
	list-style: none;
	margin: var(--wo-space-4) 0 0;
	padding: var(--wo-space-4) 0 0;
	border-top: 1px solid var(--wo-line-faint);

	display: flex;
	flex-direction: column;
	gap: var(--wo-space-1);

	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
}

.wo-order-contact li {
	overflow-wrap: anywhere;
}


/* ------------------------------------------------------------------
   ACTIONS - STACKED (aside column)
   ------------------------------------------------------------------ */

.wo-order-status__actions--stack {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wo-space-3);
}

.wo-order-status__actions--stack .wo-btn {
	min-width: 0;
	width: 100%;
}


/* ------------------------------------------------------------------
   PAY FOR ORDER - NATIVE TABLE / PAYMENT SAFETY NET
   form-pay.php itself is untouched; these are plain element
   selectors on WooCommerce's own long-stable classes, the same
   pattern already used for .shop_table elsewhere in this theme.
   ------------------------------------------------------------------ */

.wo-order-pay table.shop_table {
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--wo-space-8);

	border-collapse: separate;
	border-spacing: 0;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
	overflow: hidden;
}

.wo-order-pay table.shop_table th,
.wo-order-pay table.shop_table td {
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--wo-space-4) clamp(1rem, 2.5vw, 1.5rem);

	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;

	border-bottom: 1px solid var(--wo-line-faint);
	border-top: none;
}

.wo-order-pay table.shop_table thead th {
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wide);
	text-transform: uppercase;
	color: var(--wo-text-dim);
	background: rgba(255, 255, 255, 0.04);
}

.wo-order-pay table.shop_table td:last-child,
.wo-order-pay table.shop_table th:last-child {
	text-align: right;
}

.wo-order-pay table.shop_table tfoot th,
.wo-order-pay table.shop_table tfoot td {
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.wo-order-pay table.shop_table tr:last-child th,
.wo-order-pay table.shop_table tr:last-child td {
	border-bottom: none;
}

.wo-order-pay #payment {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.wo-order-pay ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--wo-space-5);
	padding: 0;
}

.wo-order-pay ul.payment_methods li {
	padding: var(--wo-space-3) 0;
	border-bottom: 1px solid var(--wo-line-faint);
	color: var(--wo-text-muted);
	overflow-wrap: anywhere;
}

.wo-order-pay ul.payment_methods li:last-child {
	border-bottom: none;
}

.wo-order-pay #place_order,
.wo-order-pay input#place_order,
.wo-order-pay button#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 52px;
	padding: 0 var(--wo-space-8);
	margin-top: var(--wo-space-2);

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text-on-gold);

	background: var(--wo-grad-gold);
	background-image: var(--wo-grad-gold);
	border: none;
	border-radius: var(--wo-radius-pill);
	box-shadow: var(--wo-glow-gold);
	cursor: pointer;

	transition: transform var(--wo-transition), box-shadow var(--wo-transition);
}

.wo-order-pay #place_order:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 34px rgba(245, 197, 66, 0.42);
}

.wo-order-pay .woocommerce-error {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* The native Cancel link the theme intentionally leaves untouched
   (see inc/order-status.php section B). Restyled only, not replaced. */
.wo-order-pay a[href*='cancel_order'] {
	display: inline-block;
	margin-top: var(--wo-space-4);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wo-order-pay a[href*='cancel_order']:hover {
	color: var(--wo-error);
}


/* ------------------------------------------------------------------
   WELCOME-BACK NUDGE (assets/js/order-pay.js)
   ------------------------------------------------------------------ */

.wo-pay-nudge {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3) var(--wo-space-5);

	margin: 0 0 var(--wo-space-6);
	padding: var(--wo-space-5) var(--wo-space-12) var(--wo-space-5) var(--wo-space-5);

	background: var(--wo-primary-soft);
	border: 1px solid var(--wo-primary-line);
	border-radius: var(--wo-radius-md);

	animation: wo-pay-nudge-in var(--wo-duration-slow) var(--wo-ease-out);
}

@keyframes wo-pay-nudge-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.wo-pay-nudge {
		animation: none;
	}
}

.wo-pay-nudge__text {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text);
}

.wo-pay-nudge__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-2) var(--wo-space-4);
	flex: 0 0 auto;
}

.wo-pay-nudge__actions .wo-btn {
	min-width: 0;
}

.wo-pay-nudge__link {
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.wo-pay-nudge__link:hover {
	color: var(--wo-text);
}

.wo-pay-nudge__dismiss {
	position: absolute;
	top: var(--wo-space-2);
	right: var(--wo-space-2);

	min-height: 0;
	padding: var(--wo-space-1) var(--wo-space-3);

	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	background: transparent;
	border: none;
	border-radius: var(--wo-radius-sm);
}

.wo-pay-nudge__dismiss:hover {
	color: var(--wo-text);
	background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 599.98px) {

	.wo-pay-nudge {
		flex-direction: column;
		align-items: stretch;
		padding: var(--wo-space-8) var(--wo-space-4) var(--wo-space-4);
	}

	.wo-pay-nudge__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wo-pay-nudge__actions .wo-btn {
		width: 100%;
		text-align: center;
	}

	.wo-pay-nudge__link {
		text-align: center;
	}
}


/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */

@media (max-width: 599.98px) {

	.wo-order-status {
		padding-block: var(--wo-space-6) var(--wo-space-10);
	}

	.wo-order-status__banner {
		padding: var(--wo-space-6) var(--wo-space-4);
	}

	.wo-order-status__icon {
		width: 60px;
		height: 60px;
	}

	.wo-order-status__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wo-order-status__actions .wo-btn {
		width: 100%;
		min-width: 0;
	}

	.wo-order-meta {
		margin-top: var(--wo-space-6);
		padding: var(--wo-space-5) var(--wo-space-4);
	}

	.wo-order-meta__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wo-space-4);
	}

	.wo-order-status__grid {
		margin-top: var(--wo-space-6);
		gap: var(--wo-space-5);
	}

	.wo-order-card {
		padding: var(--wo-space-5) var(--wo-space-4);
	}

	.wo-order-item {
		grid-template-columns: 52px minmax(0, 1fr);
		row-gap: var(--wo-space-2);
	}

	.wo-order-item__total {
		grid-column: 1 / -1;
		max-width: 100%;
		text-align: left;
		padding-left: calc(52px + var(--wo-space-3));
	}

	.wo-pay-nudge {
		padding-right: var(--wo-space-10);
	}
}

@media (max-width: 380px) {

	.wo-order-meta__row {
		grid-template-columns: 1fr;
	}
}


/* ==================================================================
   X. RAZORPAY BACKDROP
   Razorpay's own modal draws a translucent backdrop layer, which lets
   the order-pay page's content show through around and behind it.
   This sits UNDERNEATH that modal (Razorpay's own overlay uses a far
   higher z-index than any host page needs to set) so the translucency
   reveals this instead of "Pay for order" and the order details.

   Built and toggled entirely by assets/js/razorpay-guard.js - inert
   without it. Scoped to its own class only, so it cannot affect any
   other page.
   ================================================================== */

.wo-razorpay-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--wo-z-modal);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	padding: var(--wo-space-10) var(--wo-gutter);

	background: var(--wo-bg);
	background-image:
		radial-gradient(60% 50% at 50% 38%, rgba(124, 92, 255, 0.16) 0%, rgba(124, 92, 255, 0) 70%),
		var(--wo-bg);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity var(--wo-duration) var(--wo-ease),
		visibility var(--wo-duration) var(--wo-ease);
}

.wo-razorpay-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {

	.wo-razorpay-backdrop {
		transition-duration: 1ms;
	}
}

.wo-razorpay-backdrop__mark {
	margin: 0 0 var(--wo-space-2);
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	color: var(--wo-text);
	opacity: 0.5;
}

.wo-razorpay-backdrop__mark::first-letter {
	color: var(--wo-primary-hover);
}

.wo-razorpay-backdrop__note {
	margin: 0;
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
}

@media (max-width: 599.98px) {

	.wo-razorpay-backdrop {
		padding-bottom: var(--wo-space-16);
	}

	.wo-razorpay-backdrop__mark {
		font-size: var(--wo-text-lg);
	}
}