/* Saba Partners — auth screens */
.saba-auth { max-width: 460px; margin: 40px auto; font-family: 'Cairo', sans-serif; }
.saba-auth h2 { font-size: 24px; margin-bottom: 18px; color: var(--nila, #21395C); }
.saba-form label, .saba-auth .login label {
	display: block; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--ink, #241C16);
}
.saba-form input, .saba-auth .login input[type="text"], .saba-auth .login input[type="password"] {
	width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit; font-size: 14.5px;
	border: 1.5px solid var(--line, #E6DAC7); border-radius: 6px; background: #fff; color: var(--ink, #241C16);
}
.saba-form input:focus { outline: none; border-color: var(--nila, #21395C); }
.saba-btn, .saba-auth .login .button {
	width: 100%; padding: 13px; border: none; border-radius: 999px;
	background: var(--nila, #21395C); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
}
.saba-btn:hover { background: var(--nila-2, #35507E); }
.saba-hint  { font-size: 12.5px; color: var(--ink-soft, #6B5F52); margin: -6px 0 14px; }
.saba-alt   { font-size: 13.5px; margin-top: 16px; color: var(--ink-soft, #6B5F52); }
.saba-alt a { color: var(--nila, #21395C); font-weight: 700; }
.saba-error { background:#F7DED8; color:#8C2F1D; padding:11px 14px; border-radius:6px; font-size:13.5px; margin-bottom:14px; }
.saba-ok    { background:#E1F0E5; color:#23603C; padding:11px 14px; border-radius:6px; font-size:13.5px; margin-bottom:14px; }
.saba-note  { font-size:14px; color:var(--ink-soft, #6B5F52); }

/* ============================================================
   Order form — the pieces the theme's own sheets don't cover.
   Everything else (.step, .summary, .flow-opt, .pcard) is
   already styled by the theme, so the form matches the site.
   ============================================================ */

/* A card with something in it should be obvious at a glance while she
   scrolls a 59-product grid looking for what she has already added. */
.stepper.has {
	background: var(--nila-tint, #EEF3FF);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--nila, #2C3E6B);
}
.stepper.has .q { color: var(--nila, #2C3E6B); }

.saba-order .shop-grid .pcard { position: relative; }
.saba-order .pcard-media img { width: 100%; height: auto; display: block; }

.saba-done {
	text-align: center;
	padding: 48px 20px;
	background: #fff;
	border: 1px solid var(--line, #E7E1D8);
	border-radius: 16px;
}
.saba-done h2 { font-size: 24px; margin-bottom: 8px; }
.saba-done p { color: var(--ink-soft, #6B6257); margin-bottom: 10px; }
.saba-done b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
   The phone bar.

   The theme ships .mini-bar pinned to bottom:0 at z-index 90 — but the
   site's own tab bar already lives there at z-index 120, so the default
   position would hide it completely. Sit above the tab bar instead, and
   give the page room so the last field is never trapped underneath.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.saba-order .mini-bar {
		inset-inline: 12px;
		inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
		border-radius: 18px;
		z-index: 110;
	}
	/* Unconditional rather than :has() — the selector is not on every Android
	   browser in use, and a trapped submit button is worse than a little slack
	   at the end of a page that already scrolls. */
	.saba-order { padding-bottom: 84px; }
}

/* Between 900px and 1040px the tab bar is gone but the layout has already
   stacked, so the bar can sit at the bottom on its own. */
@media (min-width: 901px) and (max-width: 1040px) {
	.saba-order .mini-bar { inset-block-end: 0; }
}

/* ------------------------------------------------------------------
   Her dashboard: the month's figures, then her orders.
   Built for a phone first — one column, big tap targets, and the
   money always on its own line so it never collides with the name.
   ------------------------------------------------------------------ */
.saba-h { font-size: 19px; margin: 28px 0 12px; }

.saba-orders { display: grid; gap: 10px; }
.saba-order-row {
	background: #fff;
	border: 1px solid var(--line, #E7E1D8);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.saba-order-row.is-requested { border-color: var(--olive, #7C8B5A); }
.saba-order-main { display: grid; gap: 2px; min-width: 0; }
.saba-order-main b { font-variant-numeric: tabular-nums; }
.saba-order-main span { font-size: 14.5px; }
.saba-order-main small { font-size: 12.5px; color: var(--ink-soft, #6B6257); }
.saba-order-money { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.saba-order-money b { font-size: 18px; font-variant-numeric: tabular-nums; }

.saba-pill {
	font-size: 12.5px; font-weight: 700;
	padding: 6px 12px; border-radius: 999px;
	background: var(--nila-tint, #EEF3FF); color: var(--nila, #2C3E6B);
}
.saba-pill--paid { background: #E7F0DE; color: #4B5E2F; }
.saba-pill--rejected { background: #FBE7E2; color: #8C3B25; }

/* the order's own state, on the dashboard list */
.saba-order-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.saba-order-top .saba-pill { padding: 3px 10px; font-size: 12px; }
.saba-pill--new  { background: #FFF3D6; color: #8A5A00; }   /* جديد — محتاج تأكيد */
.saba-pill--go   { background: var(--nila-tint, #EEF3FF); color: var(--nila, #2C3E6B); }   /* اتأكد / اتشحن */
.saba-pill--done { background: #E7F0DE; color: #4B5E2F; }   /* اتسلّم */
.saba-pill--off  { background: #F1EEE9; color: #6B6257; }   /* اتلغى / اترجّع */
.saba-order-items { display: block; line-height: 1.6; }
.saba-order-main small b { font-variant-numeric: tabular-nums; color: var(--ink, #1F1B16); }
.saba-wa-mini {
	display: inline-flex; align-items: center;
	padding: 7px 12px; border-radius: 999px;
	background: #25D366; color: #fff; font-size: 12.5px; font-weight: 700;
	text-decoration: none;
}
.saba-wa-mini:hover { background: #1EBE5A; color: #fff; }

.saba-fine { font-size: 12.5px; color: var(--ink-soft, #6B6257); line-height: 1.7; }

.saba-linkbox { margin: 18px 0; display: grid; gap: 6px; }
.saba-linkbox span { font-size: 13px; color: var(--ink-soft, #6B6257); }
.saba-linkbox input {
	width: 100%; padding: 12px 14px; font-size: 14px;
	border: 1px solid var(--line, #E7E1D8); border-radius: 12px; background: #fff;
}

.saba-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.saba-stat {
	background: #fff; border: 1px solid var(--line, #E7E1D8);
	border-radius: 14px; padding: 14px 16px;
}
.saba-stat span { display: block; font-size: 12.5px; color: var(--ink-soft, #6B6257); }
.saba-stat b { font-size: 23px; font-variant-numeric: tabular-nums; }
.saba-stat--hi { border-color: var(--nila, #2C3E6B); box-shadow: inset 0 0 0 1px var(--nila, #2C3E6B); }

.saba-target {
	background: var(--nila-tint, #EEF3FF);
	border-radius: 16px; padding: 18px 20px; margin: 22px 0;
}
.saba-target strong { display: block; margin-bottom: 6px; }
.saba-target p { margin-bottom: 6px; }

/* On a phone the row stacks so the amount and its button get a full line. */
@media (max-width: 560px) {
	.saba-order-row { flex-direction: column; align-items: stretch; }
	.saba-order-money { justify-content: space-between; }
	.saba-order-money .saba-btn { flex: 1; text-align: center; }
}

/* Tier ticks on the target bar. The labels below are evenly spaced so they
   stay readable on a phone; these sit at the real positions so the bar
   itself never overstates how close she is. */
.saba-dash .track-bar { position: relative; }
.saba-dash .track-tick {
	position: absolute;
	inset-block: 0;
	width: 2px;
	background: rgba(255, 255, 255, .8);
	border-radius: 2px;
}

/* ------------------------------------------------------------------
   Her own pages carry their own three links.

   The site menu points at /partner/ and stops there; once she is inside,
   moving between her dashboard and the order form should not mean going
   back out to the burger menu on a phone.
   ------------------------------------------------------------------ */
.saba-subnav {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line, #E7E1D8);
}
.saba-subnav a {
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--nila, #2C3E6B);
	border: 1.5px solid var(--line, #E7E1D8);
	background: #fff;
}
.saba-subnav a.on {
	background: var(--nila, #2C3E6B);
	border-color: var(--nila, #2C3E6B);
	color: #fff;
}
.saba-subnav a.out {
	margin-inline-start: auto;
	border: none;
	background: none;
	color: var(--ink-soft, #6B6257);
	font-weight: 600;
}

/* The live tier hint. It replaces a neutral sentence, so it needs to read as
   news — she should notice that it changed while she was adding things. */
.saba-order #sabaNudge.is-nudge {
	color: var(--nila, #2C3E6B);
	font-weight: 700;
}

/* The WhatsApp hand-off, reused by the reseller's own confirmation screen. */
.saba-done .saba-wa-btn {
	display: inline-block;
	background: #25D366;
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none;
	margin: 6px 0 16px;
	min-height: 48px;
	box-sizing: border-box;
}
.saba-done .saba-wa-btn:hover { background: #1EBE5A; color: #fff; }

/* ------------------------------------------------------------------
   What a signed-in reseller sees on every product card.

   Her price is the loud one; the catalogue price stays visible and
   struck because she still sells at it and has to keep seeing it.
   ------------------------------------------------------------------ */
.saba-mine {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
}
.saba-mine ins {
	text-decoration: none;
	background: none;
	font-weight: 800;
	color: var(--nila, #2C3E6B);
}
.saba-mine del {
	font-size: .78em;
	font-weight: 600;
	color: var(--ink-soft, #6B6257);
	opacity: .85;
}
.saba-mine small {
	flex: 0 0 100%;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--olive, #7C8B5A);
}
.saba-mine small b { font-weight: 800; }

.saba-reseller-banner {
	display: flex;
	align-items: center;
	gap: 10px 16px;
	flex-wrap: wrap;
	background: var(--nila, #2C3E6B);
	color: #fff;
	border-radius: 14px;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
}
.saba-reseller-banner strong { color: #fff; }
.saba-reseller-banner span { flex: 1 1 260px; color: #DCE6FF; }
.saba-reseller-banner a {
	color: var(--nila, #2C3E6B);
	background: #fff;
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

/* The sentence under the cart totals that explains the discount line. */
.saba-cart-note {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--nila-tint, #EEF3FF);
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink, #241C16);
}

/* ------------------------------------------------------------------
   The order-code search on Bakry's admin home.
   ------------------------------------------------------------------ */
.saba-find {
	display: flex;
	gap: 8px;
	margin: 0 0 20px;
	max-width: 460px;
}
.saba-find input {
	flex: 1;
	padding: 11px 14px;
	font: inherit;
	font-size: 14.5px;
	letter-spacing: .04em;
	border: 1.5px solid var(--line, #E7E1D8);
	border-radius: 999px;
	background: #fff;
}
.saba-find input:focus { outline: none; border-color: var(--nila, #2C3E6B); }

/* ------------------------------------------------------------------
   Competition cards on her dashboard.

   The theme already draws .comp-card and .comp-progress; these are the
   pieces the old free-text version never needed — a bar showing how far
   along she is, and the won state.
   ------------------------------------------------------------------ */
.comp-card + .comp-card { margin-top: 12px; }
.comp-card.is-won {
	border-style: solid;
	border-color: var(--olive, #7C8B5A);
	background: #F3F7EC;
}

.comp-bar {
	margin-top: 14px;
	height: 9px;
	border-radius: 999px;
	background: rgba(36, 28, 22, .10);
	overflow: hidden;
}
.comp-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--clay, #B4704F);
	transition: width .4s ease;
}
.comp-card.is-won .comp-fill { background: var(--olive, #7C8B5A); }

.comp-progress .comp-ends {
	display: block;
	margin-top: 4px;
	font-weight: 600;
	font-size: 12px;
	color: var(--ink-soft, #6B6257);
}

/* ------------------------------------------------------------------
   The answer a search page gives when it has nothing, or when Saba
   sells a deliberate replacement for what she typed.
   ------------------------------------------------------------------ */
.saba-search-answer {
	background: #fff;
	border: 1px solid var(--line, #E7E1D8);
	border-radius: 18px;
	padding: 26px 22px;
	margin: 0 0 26px;
}
.saba-search-answer h2 { font-size: 21px; margin-bottom: 10px; }
.saba-search-answer p { color: var(--ink-soft, #6B6257); line-height: 1.8; margin-bottom: 14px; }
.saba-search-answer .shop-grid { margin-top: 16px; }
.saba-search-answer--alt { border-color: var(--nila, #2C3E6B); }

.saba-ask-btn {
	display: inline-block;
	background: #25D366;
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: 999px;
	text-decoration: none;
	min-height: 48px;
	box-sizing: border-box;
}
.saba-ask-btn:hover { background: #1EBE5A; color: #fff; }
.saba-search-or { margin: 18px 0 10px; font-size: 13.5px; }

/* ---- reseller "ليا / لعميلة" choice on the ordinary checkout ---- */
.saba-cflow {
	margin: 0 0 22px;
	padding: 14px;
	border: 1.5px solid var(--line, #E6E1D9);
	border-radius: var(--radius-m, 12px);
	background: var(--nila-tint, #EEF3FF);
}
.saba-cflow-q {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink, #2A2622);
}
.saba-cflow-opts {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) { .saba-cflow-opts { grid-template-columns: 1fr; } }
.saba-cflow-opt {
	display: block;
	border: 1.5px solid var(--line, #E6E1D9);
	border-radius: var(--radius-m, 12px);
	/* Logical padding: the radio sits at inset-inline-start (the RIGHT edge
	   in Arabic), so the room for it has to be on that same side. A physical
	   padding-left put the gap on the wrong side and the dot on the text. */
	padding: 12px;
	padding-inline-start: 40px;
	background: var(--bg, #fff);
	cursor: pointer;
	position: relative;
	transition: border-color .2s, background .2s;
}
.saba-cflow-opt:hover { border-color: var(--nila-2, #4A5F94); }
.saba-cflow-opt.active { border-color: var(--nila, #2C3E6B); background: var(--nila-tint, #EEF3FF); }
.saba-cflow-opt input {
	position: absolute;
	inset-inline-start: 12px;
	top: 14px;
	margin: 0;
	accent-color: var(--nila, #2C3E6B);
}
.saba-cflow-opt .t { display: block; font-size: 14px; font-weight: 700; color: var(--ink, #2A2622); margin-bottom: 4px; }
.saba-cflow-opt .s { display: block; font-size: 12px; color: var(--ink-soft, #7A7167); line-height: 1.5; }
.saba-cflow-note th { font-weight: 700; }
.saba-cflow-note td { font-size: 12.5px; color: var(--ink-soft, #7A7167); line-height: 1.5; }

/* ---- دليل الوكيلة (guide page) ---- */
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.guide-toc a {
	padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700;
	border: 1.5px solid var(--line, #E6E1D9); background: #fff; color: var(--nila, #21395C);
	text-decoration: none;
}
.guide-toc a:hover { border-color: var(--nila, #21395C); }
.saba-dash .guide-sec { margin-bottom: 16px; scroll-margin-top: 96px; }
.saba-dash .guide-sec .step-head { margin-bottom: 12px; }
.saba-dash .guide-sec h2 { font-size: 19px; margin: 0; }
.guide-sec p, .guide-sec li { font-size: 14.5px; line-height: 1.85; }
.guide-sec ul, .guide-sec ol { padding-inline-start: 22px; margin: 8px 0 12px; }
.guide-sec li { margin-bottom: 6px; }
.guide-example {
	background: #FFF9F3; border: 1.5px dashed var(--clay, #B15A2C);
	border-radius: var(--radius-m, 12px); padding: 14px 16px; margin: 12px 0; line-height: 1.85;
}
.guide-example b.t { display: block; color: var(--clay, #B15A2C); font-size: 13px; margin-bottom: 6px; }
.guide-sum {
	background: var(--nila-tint, #EEF3FF); border-radius: var(--radius-s, 8px);
	padding: 11px 14px; margin-top: 12px; font-weight: 700; font-size: 13.5px; line-height: 1.7;
}
.guide-tbl-wrap { overflow-x: auto; }
.guide-vs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
.guide-vs th, .guide-vs td { padding: 10px 8px; border-bottom: 1px solid var(--line, #E6E1D9); text-align: right; vertical-align: top; }
.guide-vs th { background: var(--nila-tint, #EEF3FF); color: var(--nila, #21395C); font-size: 13px; }
.guide-vs td small { display: block; color: var(--ink-soft, #7A7167); font-size: 11.5px; }
.guide-vs td b { color: var(--nila, #21395C); }
.guide-vs .best { color: var(--clay, #B15A2C); font-weight: 800; }
.guide-faq details {
	border: 1px solid var(--line, #E6E1D9); border-radius: var(--radius-s, 8px);
	padding: 10px 14px; margin-bottom: 8px; background: #fff;
}
.guide-faq summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--nila, #21395C); }
.guide-faq details p { margin: 8px 0 2px; }
.guide-wa {
	display: inline-block; margin-top: 8px; padding: 11px 18px; border-radius: 999px;
	background: #25D366; color: #fff !important; font-weight: 800; text-decoration: none;
}
.order-cta--guide { background: var(--clay, #B15A2C); }

/* prospect invite + closing CTA (public view of the guide) */
.guide-invite, .guide-close {
	background: var(--nila, #21395C); color: #fff; border-radius: var(--radius-m, 12px);
	padding: 18px 20px; margin: 0 0 18px;
}
.guide-invite strong { display: block; font-size: 17px; margin-bottom: 6px; }
.guide-invite span { display: block; font-size: 14px; line-height: 1.8; opacity: .92; margin-bottom: 12px; }
.guide-close { margin-top: 18px; border: none; }
.guide-close h2 { color: #fff; font-size: 20px; margin: 0 0 8px; }
.guide-close p { color: #fff; opacity: .95; }
.guide-close .saba-fine { color: #fff; opacity: .8; }
.guide-join-btn {
	display: inline-block; padding: 12px 26px; border-radius: 999px;
	background: #F0C987; color: var(--nila, #21395C) !important; font-weight: 800; text-decoration: none; margin-inline-end: 8px;
}
.guide-print {
	border: 1.5px solid var(--line, #E6E1D9); background: #fff; color: var(--nila, #21395C);
	border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.guide-foot { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft, #7A7167); text-align: center; }
.guide-printed { display: none; }
a.guide-print { text-decoration: none; display: inline-block; }

/* ---- saving / printing the guide as a PDF ---- */
@media print {
	.site-header, .site-footer, .tabbar, .nav-drawer, .skip-link,
	.saba-subnav, .guide-toc, .no-print, .order-cta, .saba-buybar { display: none !important; }
	html, body { background: #fff !important; }
	.partner-shell, .wrap { padding: 0 !important; max-width: none !important; }
	.saba-dash .panel, .guide-invite, .guide-close {
		border: 1px solid #ddd !important; box-shadow: none !important;
		break-inside: avoid; page-break-inside: avoid;
	}
	.guide-invite, .guide-close { background: var(--nila, #21395C) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.guide-sec { break-inside: avoid; page-break-inside: avoid; }
	.guide-faq details { break-inside: avoid; }
	.guide-faq details > summary { list-style: none; font-weight: 800; }
	a[href^="http"]::after { content: ""; }
	.guide-printed { display: block !important; text-align: center; font-size: 11px; color: #777; margin-top: 10px; }
	.guide-vs th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	@page { margin: 14mm 12mm; }
}
/* =========================================================================
   الموبايل — أغلب اللي هيقرا الدليل جاي من لينك على الواتساب.
   Three columns (and five) do not fit inside 375px, so on a phone every table
   turns into one card per row: the row heading on its own line, then each
   figure labelled with the column it came from. Nothing is dropped, nothing
   scrolls sideways, and no text goes below 13px.
   ========================================================================= */
@media (max-width: 640px) {

	/* ---- the index: one swipeable row instead of 269px of stacked pills ---- */
	.guide-toc {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 7px;
		padding-bottom: 6px;
		margin-inline: -2px;
		scrollbar-width: none;
	}
	.guide-toc::-webkit-scrollbar { display: none; }
	.guide-toc a { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 14px; font-size: 13px; }

	/* ---- readable body copy ---- */
	.guide-sec p, .guide-sec li { font-size: 15px; line-height: 1.9; }
	.guide-sec ul, .guide-sec ol { padding-inline-start: 20px; }
	.saba-dash .guide-sec h2 { font-size: 18px; line-height: 1.5; }
	.guide-sum, .guide-example { font-size: 14px; }

	/* ---- tables become cards ---- */
	.guide-tbl-wrap { overflow: visible; }
	.guide-vs { font-size: 14px; display: block; }
	.guide-vs thead { display: none; }
	.guide-vs tbody, .guide-vs tr, .guide-vs td { display: block; width: auto; }
	.guide-vs tr {
		border: 1.5px solid var(--line, #E6E1D9); border-radius: var(--radius-m, 12px);
		padding: 12px 14px; margin-bottom: 10px; background: #fff;
	}
	.guide-vs tr.is-key { border-color: var(--clay, #B15A2C); background: #FFF9F3; }
	.guide-vs td { border: none; padding: 5px 0; text-align: right; }
	.guide-vs td.rowh {
		font-weight: 800; font-size: 15px; color: var(--nila, #21395C);
		border-bottom: 1px solid var(--line, #E6E1D9); padding: 0 0 8px; margin-bottom: 6px;
	}
	/* "ليا أنا: 550 ج" — the column name travels with the number */
	.guide-vs td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: 700; color: var(--ink-soft, #7A7167); font-size: 13px;
	}
	.guide-vs td small { display: inline; font-size: 12.5px; }
	.guide-vs td small::before { content: " — "; }

	/* ---- comfortable tap targets (44px is the thumb-friendly floor) ---- */
	.guide-faq summary { padding: 11px 0; font-size: 15px; line-height: 1.5; }
	.guide-faq details { padding: 6px 14px; }
	.guide-foot { font-size: 13px; }
	.guide-join-btn, .guide-wa, a.guide-print { padding: 14px 22px; font-size: 15px; }
	.rule-line { padding: 13px 2px; font-size: 14px; }

	/* the floating tab bar sits over the end of the page */
	.saba-guide { padding-bottom: 78px; }
}

/* Back-to-top: an 11,000px page needs a way out on a phone. */
.guide-top {
	position: fixed; inset-block-end: 76px; inset-inline-start: 14px; z-index: 60;
	width: 44px; height: 44px; border-radius: 50%; border: none;
	background: var(--nila, #21395C); color: #fff; font-size: 18px; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
	opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.guide-top.on { opacity: .95; visibility: visible; }
@media (min-width: 641px) { .guide-top { inset-block-end: 24px; } }
@media print { .guide-top { display: none !important; } }


/* The footer links on the admin home were 29px tall — give the thumb room. */
.saba-fine a { display: inline-block; padding: 8px 4px; }

/* ============================================================
   Rows that hold text of unpredictable length
   ============================================================
   «أوردراتك» puts a list of product names beside a money column. The names
   run from four words to forty, and with everything sized by content the
   WhatsApp button landed in a different place on every row — the layout
   looked broken even though nothing was. So the money column is a fixed
   track, right-aligned, and the product line is clamped to two lines. */
.saba-order-row { align-items: flex-start; }
.saba-order-main { flex: 1 1 auto; min-width: 0; }
.saba-order-items {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.saba-order-money {
	flex: 0 0 226px;
	width: 226px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: end;
}
.saba-order-money b { white-space: nowrap; }
.saba-order-money .saba-wa-mini,
.saba-order-money .saba-btn { width: 100%; text-align: center; }
.saba-order-money .saba-fine { line-height: 1.6; }

/* Money never breaks between the number and its «ج». */
.saba-order-money b,
.saba-order-main small b,
.saba-money,
.woocommerce-Price-amount,
.amount { white-space: nowrap; }

@media (max-width: 720px) {
	.saba-order-money { flex: 1 1 auto; width: auto; align-items: stretch; text-align: start; }
	.saba-order-money .saba-fine { text-align: start; }
}

/* who an order goes to, on her own list — same tags as the staff screen */
.saba-order-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.saba-order-who b { font-weight: 700; }
.st-tag {
	flex: none;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.st-tag--customer { background: #EEF1EA; color: #4B5E2F; }
.st-tag--reseller { background: var(--nila-tint, #E7EEF9); color: var(--nila, #21395C); }
.st-tag--gift     { background: #F8E4DF; color: #9A4A33; }

/* ---------- the order form: one question, and errors at the field ---------- */
/* «ليكي ولا لعميلتك؟» used to arrive pre-answered; a card that is already
   ticked is a card nobody reads. Now it is asked, and the two cards carry a
   radio dot so they read as two answers to one question. */
.dest-q { display: block; font-size: 15px; font-weight: 800; margin: 0 0 8px; color: var(--ink, #241C16); }
.dest-hint { margin: -6px 0 16px; }
.dest-opts .flow-opt { position: relative; padding-inline-start: 44px; }
.dest-opts .flow-opt::before {
	content: ''; position: absolute; inset-inline-start: 14px; top: 16px;
	width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--line, #E6DAC7); background: #fff;
}
.dest-opts .flow-opt.active::before {
	border-color: var(--nila, #21395C);
	background: radial-gradient(var(--nila, #21395C) 45%, #fff 50%);
}
.dest-opts.is-bad .flow-opt { border-color: var(--clay, #B15A2C); }
.dest-opts > .field-err { grid-column: 1 / -1; }

/* The server's answer used to sit under the send button, at the bottom of
   a page she had just been scrolled away from. Now it sits under the field. */
.field.is-bad input, .field.is-bad select, .field.is-bad textarea {
	border-color: var(--clay, #B15A2C);
	box-shadow: 0 0 0 3px rgba(177, 90, 44, .12);
}
.field-err { color: var(--clay, #B15A2C); font-size: 12.5px; font-weight: 700; margin: 6px 0 0; }

/* ---------- «بياناتي»: she keeps her own record straight ---------- */
.saba-me-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; }
.saba-me-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft, #6B6257); }
.saba-me-form .saba-phone-note { font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--ink-soft, #6B6257); }
.saba-me-form .saba-me-full { grid-column: 1 / -1; }
.saba-me-form input, .saba-me-form select {
  width: 100%; min-height: 46px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink, #241C16); background: #fff;
  border: 1.5px solid var(--line, #E3DDD3); border-radius: 12px;
}
.saba-me-form input:focus, .saba-me-form select:focus { outline: none; border-color: var(--nila, #21395C); }
.saba-me-save { grid-column: 1 / -1; min-height: 48px; border: 0; border-radius: 14px; background: var(--nila, #21395C); color: #fff; font: inherit; font-size: 15px; font-weight: 800; }
.saba-msg { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.saba-msg--ok { background: #E7F0DE; color: #2E6B3A; }
.saba-msg--bad { background: #FBE9E7; color: #B3261E; }
@media (max-width: 560px) { .saba-me-form { grid-template-columns: 1fr; } }

/* ---------- her orders: the five states she asks about ---------- */
.saba-ofilter { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.saba-ochips { display: flex; gap: 6px; flex-wrap: wrap; }
.saba-ochips button {
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line, #E3DDD3); background: #fff;
  color: var(--ink-soft, #6B6257); font: inherit; font-size: 13px; font-weight: 700;
}
.saba-ochips button b { margin-inline-start: 5px; font-weight: 800; }
.saba-ochips button.on { border-color: var(--nila, #21395C); background: var(--nila, #21395C); color: #fff; }
.saba-osearch {
  width: 100%; min-height: 44px; padding: 0 14px; font: inherit; font-size: 15px;
  background: #fff; border: 1.5px solid var(--line, #E3DDD3); border-radius: 12px;
}
.saba-osearch:focus { outline: none; border-color: var(--nila, #21395C); }
/* the row's own display must not outrank being hidden — same trap as .st-row */
.saba-order-row[hidden] { display: none !important; }
.saba-oempty { text-align: center; padding: 16px 0; }

/* ---------- she edits her own order, on a phone ---------- */
/* Everything here is sized for a thumb: 44px+ targets, one column, and the
   editor folded away until she opens it so the list stays a list. */
.saba-tellus {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 14px;
  background: #E7F7EC; border: 1.5px solid #25D366;
}
.saba-tellus b { display: block; font-size: 15.5px; color: #128C4A; }
.saba-tellus p { margin: 4px 0 10px; font-size: 14px; color: var(--ink, #241C16); }
.saba-tellus-wa { display: block; text-align: center; text-decoration: none; background: #25D366; }
.saba-tellus-wa:hover { background: #1FBF5B; }

.saba-oedit { grid-column: 1 / -1; margin-top: 10px; border-top: 1px solid var(--line, #E3DDD3); padding-top: 10px; }
.saba-oedit > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--nila, #21395C); color: var(--nila, #21395C);
  font-size: 13.5px; font-weight: 800;
}
.saba-oedit > summary::-webkit-details-marker { display: none; }
.saba-oedit[open] > summary { background: var(--nila-tint, #E7EEF9); }
.saba-oedit-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.saba-oedit-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; background: #fff; border: 1px solid var(--line, #E3DDD3); border-radius: 12px;
}
.saba-oedit-line span { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.saba-oedit-line input {
  flex: none; width: 76px; min-height: 46px; text-align: center;
  font: inherit; font-size: 17px; font-weight: 800;
  border: 1.5px solid var(--line, #E3DDD3); border-radius: 12px; background: #fff;
}
.saba-oedit-line input:focus { outline: none; border-color: var(--nila, #21395C); }
.saba-oedit-save { min-height: 50px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 800; }
.saba-oedit-cancel {
  min-height: 46px; border: 1.5px solid #E8C9C4; border-radius: 14px;
  background: #fff; color: #B3261E; font: inherit; font-size: 14px; font-weight: 700;
}
.saba-oedit-no { margin-top: 8px; }

/* ---------- إضافة منتج جوه التعديل ---------- */
.saba-ocoupon { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: var(--nila, #21395C); }
.saba-ocoupon-q {
  width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left;
  border: 1.5px dashed var(--nila, #21395C); border-radius: 12px; background: var(--nila-tint, #E7EEF9);
}
.saba-ocoupon-q::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; text-align: right; }
.saba-ocoupon-q:focus { outline: none; border-style: solid; }
.saba-ocoupon small { font-size: 12px; font-weight: 500; color: var(--ink-soft, #6B6257); }
.saba-oadd { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.saba-oadd-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: var(--nila, #21395C); }
.saba-oadd-q {
  width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px;
  border: 1.5px dashed var(--nila, #21395C); border-radius: 12px; background: var(--nila-tint, #E7EEF9);
}
.saba-oadd-q:focus { outline: none; border-style: solid; }
.saba-oadd-hits { display: flex; flex-direction: column; border: 1px solid var(--line, #E3DDD3); border-radius: 12px; overflow: hidden; background: #fff; }
.saba-oadd-hits[hidden] { display: none !important; }
.saba-oadd-hit {
  display: block; width: 100%; text-align: start; min-height: 48px; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--line, #E3DDD3); background: #fff; font: inherit; font-size: 14px;
}
.saba-oadd-hit:last-child { border-bottom: 0; }
.saba-oadd-hit b { font-weight: 700; }
.saba-oadd-rows { display: flex; flex-direction: column; gap: 8px; }
.saba-oadd-row .saba-oedit-line { border-color: var(--nila, #21395C); }
.saba-oadd-x {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #FBE9E7; color: #B3261E; font-size: 18px; font-weight: 800;
}
.saba-oadd-gram { display: flex; flex-direction: column; gap: 4px; margin: 6px 4px 0; font-size: 13px; font-weight: 700; color: var(--ink-soft, #6B6257); }
.saba-oadd-gram input { min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; text-align: center; border: 1.5px solid var(--line, #E3DDD3); border-radius: 12px; }
.saba-oadd-gram small { font-size: 12px; font-weight: 500; }
.st-tag--edited { background: #FBF0DC; color: #8A5A0B; }


/* ---------- her share block on the product page ---------- */
/* Only a signed-in reseller sees this, so it is allowed to look like part of
   her toolkit rather than a grey utility: her link, two big taps, one line
   telling her which link earns her money. */
.saba-share {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--nila-tint, #E7EEF9);
  border: 1.5px solid rgba(33, 57, 92, .18);
  border-radius: 16px;
}
.saba-share-title {
  display: block; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 800; color: var(--nila, #21395C);
}
.saba-share-row { display: flex; gap: 10px; }
.saba-share-btn, .saba-share-wa {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 14px; border-radius: 14px;
  font: inherit; font-size: 14.5px; font-weight: 800; text-decoration: none;
  border: 0; cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.saba-share-btn { background: var(--nila, #21395C); color: #fff; }
.saba-share-wa  { background: #25D366; color: #fff; }
.saba-share-btn:hover, .saba-share-wa:hover { filter: brightness(1.07); }
.saba-share-btn:active, .saba-share-wa:active { transform: translateY(1px); }
.saba-share svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.saba-share-btn.is-done { background: #128C4A; }
.saba-share-note {
  display: block; margin-top: 10px;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-soft, #6B6257);
}
.saba-share-note b { color: #B3261E; }
@media (max-width: 420px) {
  .saba-share-row { flex-direction: column; }
  .saba-share-btn, .saba-share-wa { width: 100%; }
}

/* ------------------------------------------------------------------
   Things resellers tapped that did nothing (Clarity dead taps, Sep 2026):
   the rate and dues tiles, the competition card, her own link, and the
   order row. Each now does what the tap expected; these rules make them
   look like what they are without changing the design.
   ------------------------------------------------------------------ */
a.stat--link, a.comp-card--link {
	display: block;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
a.stat--link:hover, a.comp-card--link:hover { border-color: var(--nila, #2C3E6B); }
a.stat--link:active, a.comp-card--link:active { transform: scale(.985); }
a.stat--link:focus-visible, a.comp-card--link:focus-visible,
.saba-omore-btn:focus-visible { outline: 2px solid var(--nila, #2C3E6B); outline-offset: 2px; }
.comp-card--link .comp-go {
	display: inline-block; margin-top: 10px;
	font-size: 13px; font-weight: 700; color: var(--nila, #2C3E6B);
}

/* She lands here from a tile: a short glow says "this is it". */
#sabaRule, #sabaOF { scroll-margin-top: 80px; }
#sabaRule:target, #sabaOF:target { animation: sabaGlow 1.6s ease-out 1; }
@keyframes sabaGlow {
	0%   { box-shadow: 0 0 0 0 rgba(44, 62, 107, .0); }
	25%  { box-shadow: 0 0 0 4px rgba(44, 62, 107, .25); }
	100% { box-shadow: 0 0 0 0 rgba(44, 62, 107, .0); }
}

.link-out code { cursor: copy; }

.saba-order-row { cursor: pointer; }
.saba-order-row.is-open { border-color: var(--nila, #2C3E6B); }
.saba-omore-btn {
	margin-inline-start: auto;
	font: inherit; font-size: 12px; font-weight: 700;
	color: var(--nila, #2C3E6B); background: transparent;
	border: 1px solid var(--line, #E7E1D8); border-radius: 999px;
	padding: 3px 10px; cursor: pointer;
}
.saba-order-row.is-open .saba-omore-btn { background: var(--nila-tint, #EEF3FF); }
.saba-order-more {
	flex: 0 0 100%;   /* its own line under the row */
	display: grid; gap: 6px;
	padding-top: 10px;
	border-top: 1px dashed var(--line, #E7E1D8);
	cursor: auto;
}
.saba-order-more[hidden] { display: none !important; }
@media (max-width: 560px) { .saba-order-more { flex: none; } }   /* the row is a column there */
.saba-omore-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.saba-omore-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.saba-omore-line--fee { color: var(--ink-soft, #6B6257); }
.saba-omore-line--total { font-weight: 700; padding-top: 4px; border-top: 1px solid var(--line, #E7E1D8); }
.saba-omore-line--mine b { color: #4B5E2F; }

/* The order form, arriving from a competition card at its product. */
.pcard.is-picked { border-color: var(--clay, #B5652E); box-shadow: 0 0 0 3px rgba(181, 101, 46, .25); }
@media (prefers-reduced-motion: reduce) {
	#sabaRule:target, #sabaOF:target { animation: none; }
	a.stat--link, a.comp-card--link { transition: none; }
}

/* ---------- her introduction meeting (meetings.php) ---------- */
.saba-meet-card { display: grid; gap: 10px; margin: 0 0 16px; }   /* the look is the dashboard's own .panel */
.saba-meet-card h2 { margin: 0; }
.saba-meet-when { margin: 0; font-size: 15px; }
.saba-meet-why { margin: 0; font-size: 13.5px; color: var(--ink-soft, #6B6257); }
.saba-meet-go { display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
.saba-meet-card label { font-size: 13.5px; font-weight: 700; }
.saba-meet-card textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line, #E8E0D5); border-radius: 10px; font: inherit; font-size: 16px; box-sizing: border-box; }
.saba-meet-card .saba-btn--ghost { border-color: var(--nila, #21395C); }   /* light with the navy outline: the entry button is the only solid one */
.saba-meet-ok { font-size: 13px; color: #3F6B2A; font-weight: 700; }
.saba-meet-ok[hidden] { display: none !important; }

/* ---------- «فلوسك الجاهزة» + «فلوسي» (payouts.php, 28 Sep 2026) ---------- */
.stat--ready { display: flex; flex-direction: column; gap: 6px; border-color: var(--nila, #2C3E6B) !important; }
.stat--ready .saba-ask-all { align-self: flex-start; margin: 4px 0 2px; min-height: 44px; }
.stat--ready .saba-ask-all[disabled] { opacity: .45; cursor: not-allowed; }
.saba-pill--ready { background: #FFF3D6; color: #8A5A00; }
.saba-pill--requested { background: var(--nila-tint, #EEF3FF); color: var(--nila, #2C3E6B); }
.saba-ask-dlg { border: 0; border-radius: 16px; padding: 0; width: min(92vw, 420px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.saba-ask-dlg::backdrop { background: rgba(20, 16, 12, .45); }
.saba-ask-form { display: grid; gap: 12px; padding: 20px 18px; margin: 0; }
.saba-ask-form h2 { margin: 0; font-size: 20px; }
.saba-ask-amt { margin: 0; font-size: 16px; }
.saba-ask-amt b { font-size: 24px; color: var(--nila, #2C3E6B); }
.saba-ask-how { display: flex; gap: 14px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.saba-ask-how legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.saba-ask-how label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.saba-ask-wl { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.saba-ask-form input[type="text"], #sabaWalletSave { min-height: 46px; padding: 0 12px; border: 1.5px solid var(--line, #E8E0D5); border-radius: 12px; font-size: 16px; width: 100%; box-sizing: border-box; }
.saba-ask-err { margin: 0; color: #B3261E; font-weight: 700; font-size: 14px; }
.saba-ask-err[hidden] { display: none !important; }
.saba-ask-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.saba-btn--ghost { background: #fff !important; color: var(--nila, #2C3E6B) !important; border: 1.5px solid var(--line, #E8E0D5); }
.saba-money-top { grid-template-columns: 1fr; }
.saba-money-sec { display: grid; gap: 8px; margin-top: 14px; }
.saba-money-sec h2 { margin: 0 0 4px; font-size: 17px; }
.saba-money-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line, #E8E0D5); font-size: 14.5px; }
.saba-money-line b { font-variant-numeric: tabular-nums; }
#sabaWallet .saba-btn { justify-self: start; }

/* «🎬 كورس الشغل» on the guide */
.guide-course { margin-bottom: 18px; }
.guide-course h2 { font-size: 19px; margin: 0 0 6px; }
.guide-course > p { font-size: 14.5px; margin: 0 0 12px; }
.guide-course-draft { font-size: 12.5px !important; font-weight: 700; color: #8A5A00; background: #FFF3D6; padding: 6px 10px; border-radius: 8px; }
.guide-course-body { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 16px; align-items: start; }
.guide-course-video { width: 100%; aspect-ratio: 9 / 16; background: #111; border-radius: 14px; display: block; }
.guide-course-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.guide-course-list button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: right;
  padding: 10px 12px; border: 1px solid var(--line, #E6E1D9); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
.guide-course-list button:hover { border-color: var(--nila, #21395C); }
.guide-course-list button.is-on { border-color: var(--nila, #21395C); background: var(--nila-tint, #E7EEF9); }
.guide-course-list .gc-n { font-size: 12px; font-weight: 700; color: var(--ink-soft, #6B6257); white-space: nowrap; }
.guide-course-list b { font-size: 14.5px; }
.guide-course-list .gc-t { font-size: 12.5px; color: var(--ink-soft, #6B6257); white-space: nowrap; }
@media (max-width: 720px) {
  .guide-course-body { grid-template-columns: 1fr; }
  .guide-course-video { max-width: 360px; margin: 0 auto; }
}