/* ==========================================================================
   Help centre — issue #1086 (PRD #1085)

   ONE stylesheet for /help and /help/<slug>. Every rule is taken straight from
   the working prototype `tutorials/import-product-from-aliexpress.html`. The
   look was not re-invented: the tokens, the numbered step blocks, the picture
   frame, the arrow overlay, the numbered legend, the note boxes, the FAQ
   accordion and the error table are all the prototype's.

   Two things changed on the way in:

   1. Every rule is scoped under `.help-page`. Help pages draw inside the panel
      wrapper, which already loads design-system.css, components.css and
      panel-shell.css. Without the scope a bare `h2 {}` or `table {}` here
      would repaint the whole panel.
   2. Class names got a `help-` prefix for the same reason.

   Brand: vermilion #FD3F0F, cream #FFFBF7, ink #303030, Tajawal, RTL,
   English digits, light only.
   ========================================================================== */

.help-page {
	color-scheme: light;

	--help-cream: #FFFBF7;
	--help-paper: #FFFFFF;
	--help-ink: #303030;
	--help-muted: #8B8079;
	--help-sand: #EFE7E0;
	--help-sand-deep: #E3D7CE;
	--help-vermilion: #FD3F0F;
	--help-deep: #C23934;
	--help-peach: #FED7CB;
	--help-peach-soft: #FFF0E9;
	--help-leaf: #17795E;
	--help-leaf-soft: #E6F4EF;

	--help-ar: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, Arial, sans-serif;
	--help-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Consolas, 'Courier New', monospace;

	--help-measure: 900px;
	--help-r-s: 8px;
	--help-r-m: 14px;
	--help-r-l: 22px;

	direction: rtl;
	background: var(--help-cream);
	color: var(--help-ink);
	font-family: var(--help-ar);
	font-size: 17px;
	line-height: 1.85;
	/* English digits with even width, so a price never jitters. */
	font-feature-settings: "tnum";
	-webkit-font-smoothing: antialiased;
}

.help-page *,
.help-page *::before,
.help-page *::after { box-sizing: border-box }

.help-page img { max-width: 100%; height: auto; display: block }

.help-page a { color: var(--help-deep); text-underline-offset: 3px }
.help-page a:focus-visible,
.help-page button:focus-visible,
.help-page summary:focus-visible {
	outline: 3px solid var(--help-vermilion);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Latin runs — numbers, links, `item` — are isolated from the Arabic
   direction, or they jump to the wrong end of the line. */
.help-page .ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--help-mono) }

/* ==========================================================================
   Masthead — shared by the index and the article
   ========================================================================== */
.help-masthead {
	border-block-end: 1px solid var(--help-sand);
	background:
		radial-gradient(120% 90% at 100% 0%, var(--help-peach-soft) 0%, transparent 60%),
		var(--help-cream);
}
.help-masthead-in { max-width: 1180px; margin-inline: auto; padding: 48px 24px 40px }

.help-kicker {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13px; font-weight: 700; letter-spacing: .04em;
	color: var(--help-vermilion);
	background: var(--help-peach-soft);
	border: 1px solid var(--help-peach);
	border-radius: 999px;
	padding: 6px 14px;
	margin: 0 0 18px;
	text-decoration: none;
}
.help-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--help-vermilion); display: block }

.help-page h1 {
	font-size: clamp(28px, 4.4vw, 46px);
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 16px;
	max-width: 20ch;
	letter-spacing: -.01em;
	color: var(--help-ink);
}
.help-lede { font-size: clamp(17px, 2vw, 20px); color: #55504B; margin: 0; max-width: 60ch }

.help-facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0 }
.help-facts li {
	font-size: 14px; font-weight: 500; color: #5C554F;
	background: var(--help-paper);
	border: 1px solid var(--help-sand-deep);
	border-radius: 999px;
	padding: 6px 15px;
}
.help-facts b { color: var(--help-vermilion); font-weight: 700 }

/* Breadcrumb */
.help-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; font-size: 14px }
.help-crumbs li { color: var(--help-muted) }
.help-crumbs a { color: var(--help-muted); text-decoration: none }
.help-crumbs a:hover { color: var(--help-vermilion) }

/* ==========================================================================
   Layout: side rail + content
   ========================================================================== */
.help-layout {
	max-width: 1180px; margin-inline: auto;
	padding: 34px 24px 80px;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: clamp(24px, 5vw, 60px);
	align-items: start;
}
/* No side rail on this page — the content takes the whole width. */
.help-layout--full { grid-template-columns: minmax(0, 1fr) }

.help-rail { position: sticky; top: 28px; display: block }
.help-rail p { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--help-muted); margin: 0 0 14px }
.help-rail ol { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--help-sand-deep) }
.help-rail a {
	display: block; padding: 7px 16px;
	font-size: 14px; line-height: 1.5;
	color: #6B635C; text-decoration: none;
	border-inline-start: 2px solid transparent;
	margin-inline-start: -2px;
}
.help-rail a:hover { color: var(--help-vermilion) }
.help-rail a.on { color: var(--help-vermilion); font-weight: 700; border-inline-start-color: var(--help-vermilion) }
/* The number is isolated, or it jumps to the end of the line. */
.help-rail .rn { display: inline-block; unicode-bidi: isolate; min-width: 1.1em; font-weight: 700; color: var(--help-sand-deep) }
.help-rail a:hover .rn, .help-rail a.on .rn { color: var(--help-vermilion) }

.help-content { max-width: var(--help-measure); min-width: 0 }
.help-content--wide { max-width: none }

/* ==========================================================================
   Sections and text
   ========================================================================== */
.help-page section { scroll-margin-top: 24px }
.help-page h2 { font-size: clamp(22px, 3vw, 29px); font-weight: 700; margin: 0 0 14px; line-height: 1.4; letter-spacing: -.01em; scroll-margin-top: 24px }
.help-page h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px }
.help-page p { margin: 0 0 16px; max-width: 64ch }
.help-page strong { font-weight: 700 }
.help-gap-top { margin-top: 26px }

.help-panel {
	background: var(--help-paper);
	border: 1px solid var(--help-sand-deep);
	border-radius: var(--help-r-l);
	padding: clamp(20px, 3vw, 32px);
	margin-block-end: 56px;
}

.help-need { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.help-need li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.7 }
.help-need .tick {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
	background: var(--help-leaf-soft); color: var(--help-leaf);
	display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 5px;
}
.help-need small { display: block; color: var(--help-muted); font-size: 14px; line-height: 1.6 }

/* ==========================================================================
   The transform card — "what you copy" -> "what appears in your store"
   ========================================================================== */
.help-transform {
	background: var(--help-paper);
	border: 1px solid var(--help-sand-deep);
	border-radius: var(--help-r-l);
	padding: 30px clamp(20px, 4vw, 40px);
	margin-block-end: 48px;
	box-shadow: 0 18px 40px -30px rgba(48, 48, 48, .45);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 34px);
}
.help-t-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--help-muted); margin: 0 0 12px }

.help-url-chip {
	font-family: var(--help-mono); direction: ltr; unicode-bidi: isolate;
	font-size: 13px; line-height: 1.6;
	background: #FAF6F2;
	border: 1px dashed var(--help-sand-deep);
	border-radius: var(--help-r-m);
	padding: 14px 16px;
	color: #6B635C;
	overflow-wrap: anywhere;
}
.help-url-chip b { color: var(--help-ink); font-weight: 700 }
.help-url-chip--wide { max-width: 620px; margin-bottom: 18px }

.help-t-arrow { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 150px }
.help-t-arrow svg { width: 150px; height: 34px; overflow: visible }
.help-t-arrow .ln {
	fill: none; stroke: var(--help-vermilion); stroke-width: 2.5; stroke-linecap: round;
	stroke-dasharray: 150; stroke-dashoffset: 150; animation: help-draw 1.1s .25s ease-out forwards;
}
.help-t-arrow .hd { fill: var(--help-vermilion); opacity: 0; animation: help-pop .3s 1.25s ease-out forwards }
@keyframes help-draw { to { stroke-dashoffset: 0 } }
@keyframes help-pop { to { opacity: 1 } }

.help-t-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center }
.help-t-steps li {
	font-size: 11.5px; font-weight: 500; color: var(--help-muted);
	background: #FAF6F2; border-radius: 999px; padding: 3px 10px;
	opacity: .45; animation: help-lite .4s ease-out forwards;
}
.help-t-steps li:nth-child(1) { animation-delay: 1.5s }
.help-t-steps li:nth-child(2) { animation-delay: 1.75s }
.help-t-steps li:nth-child(3) { animation-delay: 2s }
.help-t-steps li:nth-child(4) { animation-delay: 2.25s }
@keyframes help-lite { to { opacity: 1; color: var(--help-vermilion); background: var(--help-peach-soft) } }

.help-mini-product {
	border: 1px solid var(--help-sand-deep);
	border-radius: var(--help-r-m);
	padding: 16px 18px;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFCFA 100%);
}
.help-mini-product h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; line-height: 1.5 }
.help-mini-rows { list-style: none; margin: 0; padding: 0; font-size: 13.5px }
.help-mini-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-block-start: 1px solid var(--help-sand) }
.help-mini-rows li:first-child { border-block-start: 0 }
.help-mini-rows span { color: var(--help-muted) }
.help-mini-rows b { font-weight: 700 }
.help-mini-rows .win b { color: var(--help-leaf) }

/* ==========================================================================
   The numbered steps
   ========================================================================== */
.help-steps { list-style: none; margin: 0; padding: 0; counter-reset: helpstep }
.help-step {
	counter-increment: helpstep;
	position: relative;
	padding-inline-start: 74px;
	padding-block-end: 52px;
	margin-block-end: 4px;
}
.help-step::before {
	content: counter(helpstep);
	position: absolute; inset-inline-start: 0; top: -4px;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--help-vermilion); color: #fff;
	display: grid; place-items: center;
	font-size: 23px; font-weight: 700; line-height: 1;
	box-shadow: 0 0 0 6px var(--help-cream);
}
/* The thread that joins one step to the next. */
.help-step::after {
	content: ""; position: absolute; inset-inline-start: 25px; top: 52px; bottom: 0;
	width: 2px; background: var(--help-sand-deep);
}
.help-step:last-child::after { display: none }
.help-step > h2 { margin-top: 2px }

.help-hint {
	border-inline-start: 3px solid var(--help-vermilion);
	background: var(--help-peach-soft);
	border-radius: 0 var(--help-r-s) var(--help-r-s) 0;
	padding: 13px 17px;
	margin: 0 0 20px;
	font-size: 15px; line-height: 1.75;
	max-width: 64ch;
}
.help-hint b { color: var(--help-deep) }
.help-hint--calm { border-inline-start-color: var(--help-leaf); background: var(--help-leaf-soft) }
.help-hint--calm b { color: var(--help-leaf) }

/* ==========================================================================
   Screenshots and the arrow overlay

   The overlay is one inline SVG on top of the picture. Its viewBox is the
   ORIGINAL pixel size of the screenshot, so the arrows scale with the picture
   and never drift off the button they point at.
   ========================================================================== */
.help-shot { margin: 0 0 20px }
.help-shot--gap { margin-top: 28px }
.help-shot-frame {
	position: relative;
	border: 1px solid var(--help-sand-deep);
	border-radius: var(--help-r-m);
	overflow: hidden;
	background: var(--help-paper);
	box-shadow: 0 14px 34px -26px rgba(48, 48, 48, .55);
}
.help-shot-frame img { width: 100% }
.help-notes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none }
.help-notes .ring { fill: rgba(253, 63, 15, .10); stroke: #FD3F0F; stroke-width: 3.5 }
.help-notes .arrow { fill: none; stroke: #FD3F0F; stroke-width: 4; stroke-linecap: round }
.help-notes .badge circle { fill: #FD3F0F; stroke: #fff; stroke-width: 3 }
.help-notes .badge text {
	fill: #fff; font-family: var(--help-ar); font-size: 22px; font-weight: 700;
	text-anchor: middle; dominant-baseline: central;
}

.help-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.help-legend li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: #55504B }
.help-legend .n {
	flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
	background: var(--help-vermilion); color: #fff;
	display: grid; place-items: center;
	font-size: 13px; font-weight: 700; margin-top: 4px;
}
.help-legend--gap { margin-bottom: 26px }

/* ==========================================================================
   The error table
   ========================================================================== */
.help-table-wrap { overflow-x: auto; border: 1px solid var(--help-sand-deep); border-radius: var(--help-r-m); background: var(--help-paper) }
.help-page .help-table-wrap table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; margin: 0 }
.help-page .help-table-wrap th,
.help-page .help-table-wrap td { text-align: start; padding: 14px 18px; border-block-end: 1px solid var(--help-sand); vertical-align: top; line-height: 1.7 }
.help-page .help-table-wrap th { background: #FBF6F2; font-weight: 700; font-size: 14px; white-space: nowrap }
.help-page .help-table-wrap tr:last-child td { border-block-end: 0 }
.help-page .help-table-wrap td:first-child { font-weight: 500; color: var(--help-deep) }

/* ==========================================================================
   The FAQ accordion
   ========================================================================== */
.help-faq { margin-block-end: 56px }
.help-faq > h2 { margin-bottom: 18px }
.help-page details {
	border: 1px solid var(--help-sand-deep); border-radius: var(--help-r-m);
	background: var(--help-paper); padding: 0 20px; margin-block-end: 10px;
}
.help-page summary {
	cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 16px;
	list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.help-page summary::-webkit-details-marker { display: none }
.help-page summary::after {
	content: "+"; color: var(--help-vermilion); font-size: 24px; font-weight: 700; line-height: 1;
	flex: 0 0 auto; width: 24px; text-align: center;
}
.help-page details[open] summary::after { content: "\2212" }
.help-page details p { margin: 0 0 16px; font-size: 15.5px }

/* ==========================================================================
   The closing blocks
   ========================================================================== */
.help-end {
	border: 1px solid var(--help-peach);
	background: var(--help-peach-soft);
	border-radius: var(--help-r-l);
	padding: clamp(22px, 3vw, 34px);
	margin-block-end: 40px;
}
.help-end h2 { margin-bottom: 10px }
.help-end ul { margin: 0; padding-inline-start: 20px }
.help-end li { margin-block-end: 7px }

.help-helpful {
	border: 1px solid var(--help-sand-deep);
	background: var(--help-paper);
	border-radius: var(--help-r-l);
	padding: 22px clamp(20px, 3vw, 30px);
	margin-block-end: 40px;
}
.help-helpful h2 { font-size: 19px; margin-bottom: 6px }
.help-helpful p { margin: 0; color: var(--help-muted); font-size: 15px }

.help-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }

/* ==========================================================================
   The index page
   ========================================================================== */
.help-search { max-width: 560px; margin: 26px 0 0 }
.help-search input {
	width: 100%;
	font-family: var(--help-ar); font-size: 16px;
	color: var(--help-ink);
	background: var(--help-paper);
	border: 1px solid var(--help-sand-deep);
	border-radius: 999px;
	padding: 13px 22px;
}
.help-search input::placeholder { color: var(--help-muted) }
.help-search input:focus { outline: 3px solid var(--help-vermilion); outline-offset: 2px }

.help-cats { display: grid; gap: 34px; max-width: var(--help-measure) }
.help-cat h2 { font-size: 21px; margin-bottom: 14px }
.help-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.help-card {
	display: block;
	background: var(--help-paper);
	border: 1px solid var(--help-sand-deep);
	border-radius: var(--help-r-m);
	padding: 18px 22px;
	text-decoration: none;
	color: var(--help-ink);
	transition: border-color .15s ease, transform .15s ease;
}
.help-card:hover { border-color: var(--help-vermilion); transform: translateY(-1px); text-decoration: none; color: var(--help-ink) }
.help-card h3 { font-size: 17px; margin: 0 0 5px; color: var(--help-ink) }
.help-card p { margin: 0; font-size: 15px; color: #6B635C; line-height: 1.7; max-width: none }
.help-card .help-card-meta { display: block; margin-top: 9px; font-size: 13px; color: var(--help-muted) }

.help-empty { color: var(--help-muted); font-size: 16px }

/* ==========================================================================
   The `?` button in the panel header

   Deliberately NOT scoped under .help-page — it lives in the panel, not in
   the help centre. It is the only rule in this file that does.
   ========================================================================== */
.help-link-button {
	display: inline-grid; place-items: center;
	width: 30px; height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #FFF0E9;
	border: 1px solid #FED7CB;
	color: #FD3F0F;
	font-size: 15px; font-weight: 700; line-height: 1;
	text-decoration: none;
}
.help-link-button:hover { background: #FD3F0F; border-color: #FD3F0F; color: #fff; text-decoration: none }
.help-link-button:focus-visible { outline: 3px solid #FD3F0F; outline-offset: 2px }

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 1040px) {
	.help-layout { grid-template-columns: minmax(0, 1fr) }
	.help-rail { display: none }
}

@media (max-width: 760px) {
	/* The screenshots come from a wide screen. On a phone we keep them at a
	   readable size and let them slide sideways inside their frame, so the
	   arrows stay on the thing they point at. */
	.help-shot-frame { overflow-x: auto; direction: ltr; -webkit-overflow-scrolling: touch }
	.help-shot-frame img, .help-shot-frame .help-notes { min-width: 740px }
	.help-shot::before {
		content: "مرّر الصورة يميناً ويساراً لرؤية التفاصيل";
		display: block; font-size: 13px; color: var(--help-muted); margin-block-end: 8px;
	}

	.help-page { font-size: 16px }
	.help-transform { grid-template-columns: 1fr; gap: 20px; margin-block-end: 40px }
	.help-t-arrow { min-width: 0 }
	.help-t-arrow svg { width: 34px; height: 80px; transform: rotate(-90deg) }
	.help-step { padding-inline-start: 0; padding-block-end: 44px }
	.help-step::before { position: static; margin-block-end: 14px; width: 44px; height: 44px; font-size: 20px; box-shadow: none }
	.help-step::after { display: none }
	.help-masthead-in { padding: 34px 20px 30px }
	.help-panel { padding: 20px }
}

@media (prefers-reduced-motion: reduce) {
	.help-page *,
	.help-page *::before,
	.help-page *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition: none !important }
	.help-t-arrow .ln { stroke-dashoffset: 0 }
	.help-t-arrow .hd { opacity: 1 }
	.help-t-steps li { opacity: 1 }
}

@media print {
	.help-rail, .help-transform { display: none }
	.help-panel, .help-shot-frame { break-inside: avoid; box-shadow: none }
}