/* Shared chrome for the purchase steps: progress indicator, cards, buttons and
   the sticky mobile CTA. Reads the theme's palette so nothing is restated. */

/* The palette lives on :root, not on .yef-flow, because this stylesheet also
   dresses screens that are not inside a .yef-flow wrapper — the Cart page's
   .yef-cart-page and its sticky bar above all. Scoped to the wrapper, every
   var() on those screens silently fell through to its hardcoded fallback, so
   the store's turquoise brand colour rendered as the old rust #C9613A. */
:root {
	--yef-ink: var(--wp--preset--color--ink, #111);
	--yef-muted: var(--wp--preset--color--muted, #6E6E6E);
	--yef-line: var(--wp--preset--color--line, #EAEAEA);
	--yef-sand: var(--wp--preset--color--sand, #FAFAF9);
	--yef-accent: var(--wp--preset--color--accent, #66c7cc);

	/* One mobile-first scale for the whole purchase flow: every control the
	   shopper taps is 56px tall with a 16px radius, and every gap between two
	   things is 16px. Stated once here so the cart, the map sheet, the form,
	   the OTP boxes and the sticky CTAs cannot drift apart. */
	--yef-tap: 56px;
	--yef-radius: 16px;
	--yef-radius-lg: 20px;
	--yef-gap: 16px;
	--yef-danger: #d92d20;
	--yef-success: #12805c;
	--yef-safe: env(safe-area-inset-bottom, 0px);

	/* The primary action wears the store's own turquoise. Its label is ink,
	   not white: white on #66c7cc measures 2.0:1, which is unreadable on a
	   phone in daylight, while ink on it is 9.2:1. To go white-on-teal
	   instead, deepen the fill at the same time — --yef-cta-bg: #167C83
	   with --yef-cta-fg: #fff is the same hue and clears AA at 4.9:1. */
	--yef-cta-bg: var(--yef-accent);
	--yef-cta-fg: var(--yef-ink);
	--yef-cta-bg-active: color-mix(in srgb, var(--yef-accent) 85%, #000);
}

.yef-flow {
	direction: rtl;
	padding-bottom: 112px; /* room for the sticky bar on mobile */
}

/* No purchase step may scroll sideways. `clip` rather than `hidden` so the
   sticky top bars inside these screens keep sticking (an overflow-x:hidden
   body turns into a scroll container and silently kills position:sticky). */
body.yef-has-sticky { overflow-x: clip; }
.yef-flow, .yef-cart-page { max-width: 100%; }
.yef-flow img, .yef-cart-page img { max-width: 100%; }

/* Prices are a number followed by its currency, everywhere. WooCommerce wraps
   them in <bdi>, which still lets an RTL line flip "300,00 EGP" into
   "EGP 300,00" in some containers and not others — the same figure reading two
   different ways on one screen. Pinning the amount to LTR settles it. */
.yef-flow .woocommerce-Price-amount,
.yef-cart-page .woocommerce-Price-amount,
.yef-sticky-bar .woocommerce-Price-amount,
.yef-cart-summary .woocommerce-Price-amount { direction: ltr; unicode-bidi: isolate; }

/* ---- progress ---- */
.yef-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: .75rem;
}
.yef-progress__step {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--yef-muted);
	flex: 1;
	min-width: 0;
}
.yef-progress__step + .yef-progress__step::before {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--yef-line);
	margin-inline-end: 6px;
}
.yef-progress__dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--yef-sand);
	color: var(--yef-muted);
	font-weight: 700;
	font-size: .75rem;
	flex: none;
	transition: background .2s ease, color .2s ease;
}
.yef-progress__step.is-current { color: var(--yef-ink); font-weight: 700; }
.yef-progress__step.is-current .yef-progress__dot { background: var(--yef-ink); color: #fff; }
.yef-progress__step.is-done .yef-progress__dot { background: var(--yef-accent); color: #fff; }

/* Five labelled steps do not fit a phone. Between 380 and 430px only the
   current step keeps its label; below that the dots carry it alone — the top
   bar already names the step in full. */
@media (max-width: 429px) {
	.yef-progress--flow .yef-progress__step > span:not(.yef-progress__dot) { display: none; }
	.yef-progress--flow .yef-progress__step { flex: 1; justify-content: center; }
	.yef-progress--flow .yef-progress__step.is-current .yef-progress__dot { width: 28px; height: 28px; }
}

/* ---- frame summary ---- */
.yef-frame {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var(--yef-sand);
	border-radius: var(--yef-radius);
	padding: 14px;
	margin-bottom: 24px;
}
.yef-frame__img { flex: 0 0 84px; }
.yef-frame__img img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; display: block; }
.yef-frame__name { font-size: 1rem; margin: 0 0 6px; }
.yef-frame__price { margin: 0; font-size: .875rem; display: flex; gap: 8px; align-items: baseline; }
.yef-frame__price-label { color: var(--yef-muted); font-size: .75rem; }

/* ---- lens cards ---- */
.yef-step-title { font-size: 1.125rem; line-height: 1.4; margin: 0 0 14px; }
.yef-lens-list { display: grid; gap: 10px; }

.yef-lens-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--yef-line);
	border-radius: var(--yef-radius);
	padding: 14px 16px;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.yef-lens-card input { accent-color: var(--yef-accent); width: 18px; height: 18px; flex: none; margin: 0; }
.yef-lens-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yef-lens-card__name { font-weight: 700; font-size: .9375rem; }
.yef-lens-card__desc { color: var(--yef-muted); font-size: .8125rem; line-height: 1.45; }
.yef-lens-card__price { font-weight: 700; font-size: .875rem; white-space: nowrap; }

.yef-lens-card.is-selected {
	border-color: var(--yef-accent);
	box-shadow: 0 0 0 1px var(--yef-accent);
	background: color-mix(in srgb, var(--yef-accent) 4%, #fff);
}

/* ---- sticky CTA ---- */
.yef-sticky-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 130;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border-top: 1px solid var(--yef-line);
	padding: 12px var(--yef-gap) calc(12px + var(--yef-safe));
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}
.yef-sticky-bar[hidden] { display: none; }
.yef-total { display: flex; flex-direction: column; }
.yef-total__label { font-size: .75rem; color: var(--yef-muted); }
.yef-total__value { font-size: 1.125rem; font-weight: 800; }
.yef-total__value del { display: none; }

/* The theme's own mobile tab bar sits at the same edge — lift it out of the way
   while a step's CTA is on screen, instead of stacking two bars. */
body.yef-has-sticky .yallah-tabbar { display: none !important; }
body.yef-has-sticky { padding-bottom: 0; }

/* ---- buttons ---- */
.yef-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Anchors do not inherit the border-box the theme gives <button>, so
	   without this a .yef-btn--block anchor is 100% + 48px of padding wide
	   and hangs off the start edge of its own bar. */
	box-sizing: border-box;
	border: 0;
	border-radius: var(--yef-radius);
	min-height: var(--yef-tap);
	padding: 0 24px;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background .15s, color .15s, opacity .15s, transform .08s;
	-webkit-tap-highlight-color: transparent;
}
.yef-btn:active { transform: scale(.99); }
/* Fallback values here (not just on --yef-ink's own definition inside .yef-flow)
   matter: this file is also loaded, without a .yef-flow wrapper, on the Cart
   page — where the custom property would otherwise be unset and the "primary"
   button would render with a transparent background. */
.yef-btn--primary { background: var(--yef-cta-bg, #66c7cc); color: var(--yef-cta-fg, #111); }
.yef-btn--primary:hover { background: var(--yef-cta-bg-active, #4fb9bf); color: var(--yef-cta-fg, #111); }
.yef-btn--primary:active { background: var(--yef-cta-bg-active, #4fb9bf); }
.yef-btn--primary:disabled, .yef-btn--primary[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Ink stays available for the one-off actions that sit *inside* a tinted
   panel, where a turquoise fill would melt into its own background. */
.yef-btn--ink { background: var(--yef-ink, #111); color: #fff; }
.yef-btn--ink:hover { background: #000; color: #fff; }
.yef-btn--ghost { background: #fff; color: var(--yef-ink); box-shadow: inset 0 0 0 1px var(--yef-line); }
.yef-btn--block { display: flex; width: 100%; }
.yef-btn--sm { min-height: 44px; padding: 0 18px; border-radius: 14px; font-size: .875rem; }
.yef-btn:focus-visible { outline: 2px solid var(--yef-accent); outline-offset: 2px; }

/* Busy state: the label is replaced by a spinner without the button resizing,
   so a slow network never shifts the layout under the shopper's thumb. */
.yef-btn.is-busy { pointer-events: none; opacity: .75; color: transparent !important; position: relative; }
.yef-btn.is-busy::after {
	content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid rgba(17, 17, 17, .25); border-top-color: var(--yef-cta-fg, #111);
	animation: yef-spin .7s linear infinite;
}
.yef-btn--ink.is-busy::after { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
@keyframes yef-spin { to { transform: rotate(360deg); } }

.yef-empty {
	background: var(--yef-sand, #FAFAF9);
	border: 1px dashed var(--yef-line, #EAEAEA);
	border-radius: var(--yef-radius);
	padding: 40px 20px;
	text-align: center;
	color: var(--yef-muted, #6E6E6E);
}

@media (prefers-reduced-motion: reduce) {
	.yef-btn, .yef-progress__dot { transition: none; }
	.yef-btn:active { transform: none; }
}

@media (min-width: 782px) {
	.yef-flow { max-width: 720px; margin-inline: auto; padding-bottom: 40px; }
	.yef-sticky-bar {
		position: static;
		border: 1px solid var(--yef-line);
		border-radius: var(--yef-radius);
		margin-top: 24px;
		box-shadow: none;
		padding: 16px;
	}
	body.yef-has-sticky .yallah-tabbar { display: none !important; }
}