/* =====================================================================
   Bayt Al Asala — Shared commerce layer v1.5.0 (L2 admin-only preview)
   Loaded on cart, checkout and order-received pages (after WoodMart CSS).
   Brand: black #000000 · gold #D3AC5D · white #FFFFFF (+ neutral greys)
   Structure benchmark: 4px radius system, bordered panels, quiet labels.
   ===================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout {
	--bta-black: #000000;
	--bta-ink: #141414;
	--bta-text: #3A3A3A;
	--bta-muted: #6B6B6B;
	--bta-line: #E6E6E6;
	--bta-line-strong: #CCCCCC;
	--bta-fill: #F7F7F7;
	--bta-gold: #D3AC5D;
	--bta-error: #B42318;
	--bta-r: 4px;
}

/* ---------------------------------------------------------------
   Page title area: white, compact (legacy l.501–516 already white)
   --------------------------------------------------------------- */
body.woocommerce-cart .wd-page-title,
body.woocommerce-checkout .wd-page-title {
	padding-block: 28px 8px;
	border-bottom: 0;
}

/* ---------------------------------------------------------------
   Step indicator: سلة المشتريات ← معلومات التحاسب ← اكتمل الطلب
   Legacy: l.517–534 (desktop flex), l.537–558 (mobile: active step
   only) and l.587–589 (28px !important) — the mobile "active only"
   intent is REPLACED here by a compact 3-step track that fits 320px,
   so every step stays visible. Markup and links are untouched.
   --------------------------------------------------------------- */
body.woocommerce-cart .wd-page-title .wd-checkout-steps,
body.woocommerce-checkout .wd-page-title .wd-checkout-steps {
	display: flex !important;           /* legacy l.521/552 !important */
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 0 !important;
	width: 100%;
	max-width: 560px;
	margin: 0 auto !important;
	padding: 0;
	list-style: none;
	counter-reset: bta-step;
}
body.woocommerce-cart .wd-page-title .wd-checkout-steps li,
body.woocommerce-checkout .wd-page-title .wd-checkout-steps li {
	display: flex !important;           /* legacy l.541 hides inactive steps on mobile */
	flex: 1 1 0;
	flex-direction: column;
	align-items: center !important;
	justify-content: flex-start !important;
	position: relative;
	margin: 0 !important;
	padding: 0 4px;
	counter-increment: bta-step;
	text-align: center;
}
/* connector line between steps */
body.woocommerce-cart .wd-checkout-steps li:not(:last-child)::after,
body.woocommerce-checkout .wd-checkout-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 13px;
	inset-inline-start: calc(50% + 18px);
	inset-inline-end: calc(-50% + 18px);
	height: 1px;
	background: var(--bta-line-strong);
}
/* hide WoodMart's own arrow separators */
body.woocommerce-cart .wd-checkout-steps li::before,
body.woocommerce-checkout .wd-checkout-steps li::before {
	display: none !important;
}
/* numbered dot */
body.woocommerce-cart .wd-checkout-steps li > a,
body.woocommerce-cart .wd-checkout-steps li > span,
body.woocommerce-checkout .wd-checkout-steps li > a,
body.woocommerce-checkout .wd-checkout-steps li > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--bta-muted);
	text-decoration: none;
}
body.woocommerce-cart .wd-checkout-steps li > a::before,
body.woocommerce-cart .wd-checkout-steps li > span::before,
body.woocommerce-checkout .wd-checkout-steps li > a::before,
body.woocommerce-checkout .wd-checkout-steps li > span::before {
	content: counter(bta-step);
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--bta-line-strong);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--bta-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}
body.woocommerce-cart .wd-checkout-steps li span,
body.woocommerce-checkout .wd-checkout-steps li span {
	font-size: 13px !important;        /* legacy l.588 sets 28px !important */
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	border: 0 !important;
	text-decoration: none !important;
}
body.woocommerce-cart .wd-checkout-steps li > span > span,
body.woocommerce-checkout .wd-checkout-steps li > span > span { display: contents; }
/* current step: black dot, gold ring, black label */
body.woocommerce-cart .wd-checkout-steps li.step-active > a,
body.woocommerce-cart .wd-checkout-steps li.step-active > span,
body.woocommerce-checkout .wd-checkout-steps li.step-active > a,
body.woocommerce-checkout .wd-checkout-steps li.step-active > span {
	color: var(--bta-black);
}
body.woocommerce-cart .wd-checkout-steps li.step-active > a::before,
body.woocommerce-cart .wd-checkout-steps li.step-active > span::before,
body.woocommerce-checkout .wd-checkout-steps li.step-active > a::before,
body.woocommerce-checkout .wd-checkout-steps li.step-active > span::before {
	background: var(--bta-black);
	border-color: var(--bta-black);
	color: #FFFFFF;
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px var(--bta-gold);
}
body.woocommerce-cart .wd-checkout-steps li.step-active span,
body.woocommerce-checkout .wd-checkout-steps li.step-active span {
	font-weight: 600;
}
/* completed steps (before the active one): black outline + tick */
body.woocommerce-checkout .wd-checkout-steps li.step-cart > a::before {
	content: "✓";
	border-color: var(--bta-black);
	color: var(--bta-black);
}
body.woocommerce-order-received .wd-checkout-steps li.step-checkout > a::before {
	content: "✓";
	border-color: var(--bta-black);
	color: var(--bta-black);
}
body.woocommerce-cart .wd-checkout-steps li > a:hover span,
body.woocommerce-checkout .wd-checkout-steps li > a:hover span {
	color: var(--bta-black);
}

/* ---------------------------------------------------------------
   Shared building blocks
   --------------------------------------------------------------- */
body.woocommerce-cart .bta-eyebrow,
body.woocommerce-checkout .bta-eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bta-muted);
	letter-spacing: 0;
}

@media (max-width: 480px) {
	body.woocommerce-cart .wd-page-title,
	body.woocommerce-checkout .wd-page-title {
		padding-block: 20px 4px;
	}
	body.woocommerce-cart .wd-checkout-steps li span,
	body.woocommerce-checkout .wd-checkout-steps li span {
		font-size: 11.5px !important;
	}
	body.woocommerce-cart .wd-checkout-steps li > a::before,
	body.woocommerce-cart .wd-checkout-steps li > span::before,
	body.woocommerce-checkout .wd-checkout-steps li > a::before,
	body.woocommerce-checkout .wd-checkout-steps li > span::before {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}
	body.woocommerce-cart .wd-checkout-steps li:not(:last-child)::after,
	body.woocommerce-checkout .wd-checkout-steps li:not(:last-child)::after {
		top: 12px;
	}
}

/* ---------- Mobile sticky dock (bta-dock.js) ------------------------- */
.bta-dock {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 390;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96);
	border-top: 1px solid var(--bta-line, #E6E6E6);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
	backdrop-filter: saturate(140%) blur(6px);
	transform: translateY(0);
	transition: transform .2s ease, opacity .2s ease;
}
.bta-dock[hidden] { display: none !important; }
.bta-dock.is-away { transform: translateY(110%); opacity: 0; pointer-events: none; }
.bta-dock__total { display: flex; flex-direction: column; line-height: 1.3; }
.bta-dock__label { font-size: 12px; color: #6B6B6B; }
.bta-dock__amount { font-size: 17px; font-weight: 700; color: #000; }
.bta-dock__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 4px;
	background: #000;
	color: #FFFFFF !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
}
@media (max-width: 768px) {
	.bta-dock { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.bta-dock { transition: none; }
}

/* v1.6: breathing room between the header and the 1-2-3 steps */
body.woocommerce-cart .wd-checkout-steps,
body.woocommerce-checkout .wd-checkout-steps { margin-top: 32px !important; }
@media (max-width: 768px) {
	body.woocommerce-cart .wd-checkout-steps,
	body.woocommerce-checkout .wd-checkout-steps { margin-top: 20px !important; }
}
/* v1.6.1: margin was overridden by a legacy rule — use padding on a stronger selector */
html body.woocommerce-checkout .wd-checkout-steps,
html body.woocommerce-cart .wd-checkout-steps { padding-top: 32px !important; }
@media (max-width: 768px) {
	html body.woocommerce-checkout .wd-checkout-steps,
	html body.woocommerce-cart .wd-checkout-steps { padding-top: 20px !important; }
}