/* ==========================================================================
   The reading pages — الأسئلة الشائعة, الشروط والأحكام, سياسة الخصوصية,
   سياسة الاسترداد.

   DERIVED: Figma draws no frame for any of the four. What it does draw is the
   FAQ accordion, in the landing page's section (8440:16264), and that section
   is a three-item teaser cut from the FAQ page's own list — so the accordion
   here is components.css's .v3-faq unchanged, and this sheet is only the frame
   the four share: a centred title, a line of lead, and one body.

   Measure over width. The clauses run long, and a 1240 column at 20px would be
   ~120 characters a line, which is where the eye starts losing its place on the
   return sweep. The prose column is 880 — about 75 — while the FAQ list keeps
   the landing page's 1240, because a question card is short and its own padding
   already holds the text well inside that.
   ========================================================================== */

.v3-doc {
	padding: 64px var(--v3-space-5);
	background: var(--v3-bg-page);
}

.v3-doc__head {
	max-width: 880px;
	margin: 0 auto var(--v3-space-8);    /* 48px down to the body */
	text-align: center;
}

.v3-doc__title {
	margin: 0;
	color: var(--v3-text-primary);
	font-size: var(--v3-fs-h2);          /* 40px, as every other page heading */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

.v3-doc__lead {
	margin: var(--v3-space-5) 0 0;
	color: var(--v3-text-tertiary);
	font-size: var(--v3-fs-h5);          /* 20px */
	font-weight: var(--v3-fw-regular);
	line-height: var(--v3-lh-normal);
}

/* --------------------------------------------------------------------------
   The clause card — the three policies
   -------------------------------------------------------------------------- */

/* Same recipe as .v3-faq: the tinted ground and a 1px line drawn as an inset
   shadow rather than a border. A border here would work, but matching the card
   the FAQ page shows two clicks away is worth more than the saved declaration. */
.v3-doc__card {
	max-width: 880px;
	margin: 0 auto;
	padding: var(--v3-space-8);          /* 48px */
	border-radius: var(--v3-radius-lg);  /* 24 — the content-card radius, not the
	                                        FAQ pill's 60: this box is tall, and
	                                        60 on a tall box reads as a mistake */
	background: var(--v3-bg-faq);
	box-shadow: inset 0 0 0 1px var(--v3-border-green);
}

.v3-doc__list {
	counter-reset: v3-doc-clause;
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-6);              /* 32px */
	margin: 0;
	padding: 0;
	list-style: none;                    /* the marker is drawn below, so the
	                                        <ol>'s own is turned off */
}

/* Numbered, not bulleted: these are clauses, and "البند رقم 4" is how one gets
   referred to. The number is a counter, so no clause carries its own — deleting
   the sixth cannot leave the seventh mis-numbered.

   Western digits: the rest of the site writes "36 سؤال" and "48 ساعة", so
   arabic-indic here would be the odd one out. */
.v3-doc__list li {
	position: relative;
	padding-inline-end: 60px;            /* 44 badge + 16 gap, on the right in RTL */
	min-height: 44px;
	color: var(--v3-text-secondary);
	font-size: var(--v3-fs-title);       /* 18px */
	font-weight: var(--v3-fw-regular);
	line-height: var(--v3-lh-normal);
}

.v3-doc__list li::before {
	counter-increment: v3-doc-clause;
	content: counter(v3-doc-clause);
	position: absolute;
	inset-inline-end: 0;
	top: -2px;                           /* optical: the digit's cap sits below
	                                        the Arabic line's top */
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--v3-bg-green);
	color: var(--v3-text-inverse);
	font-size: var(--v3-fs-body);        /* 16px */
	font-weight: var(--v3-fw-semibold);
	line-height: 1;
}

/* Set apart rather than made into a clause: the refund page's closing line is
   the shop talking, not another rule to be numbered. */
.v3-doc__note {
	margin: var(--v3-space-7) 0 0;
	padding-top: var(--v3-space-6);
	border-top: 1px solid var(--v3-border-green-off);
	color: var(--v3-text-primary);
	font-size: var(--v3-fs-title);
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-normal);
}

/* --------------------------------------------------------------------------
   The accordion — الأسئلة الشائعة
   -------------------------------------------------------------------------- */

/* Group headings inside the accordion. The list is a flex column with a 40px
   gap, which is right between two cards and too much around a heading — so the
   heading pulls its own bottom margin back in and stays attached to the
   questions it introduces rather than floating between two groups. */
.v3-doc__faq-group {
	margin: var(--v3-space-5) 0 calc(var(--v3-space-5) - var(--v3-space-7));
	color: var(--v3-text-brand);
	font-size: var(--v3-fs-h5);          /* 20px */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

/* No leading space above the first group — the lead sits right above it. */
.v3-doc__faq-group:first-child { margin-top: 0; }

.v3-doc__faqs {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-7);              /* 40px, as the landing page's list */
	max-width: 1240px;
	margin: 0 auto;
}

/* The lead promises somewhere to ask; this is it. Its own section under the
   list, so it sits on the page ground rather than inside a card. */
.v3-doc__ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-5);
	padding: 0 var(--v3-space-5) 64px;
	background: var(--v3-bg-page);
	text-align: center;
}

/* Full size, not --sm. The small variants drop the corner ornament .v3-btn
   draws in its pseudo-elements, so a --sm button is not this one shrunk — it
   is a different button, and this is the page's one call to action. Width
   follows the landing page's FAQ CTA rather than hugging two short words. */
.v3-doc__ask-btn { min-width: 280px; }

.v3-doc__ask-text {
	margin: 0;
	color: var(--v3-text-primary);
	font-size: var(--v3-fs-h4);          /* 24px */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.v3-doc { padding: 48px var(--v3-space-5); }
	.v3-doc__head { margin-bottom: var(--v3-space-7); }
	.v3-doc__title { font-size: var(--v3-fs-h3); }
	.v3-doc__lead { font-size: var(--v3-fs-body); }
	.v3-doc__card { padding: var(--v3-space-6); }
}

@media (max-width: 600px) {
	.v3-doc { padding: 32px var(--v3-space-4); }
	.v3-doc__title { font-size: var(--v3-fs-m-h2); }
	.v3-doc__card {
		padding: var(--v3-space-5);
		border-radius: var(--v3-radius-md);
	}
	.v3-doc__list { gap: var(--v3-space-5); }

	/* The badge stops being a hanging marker and becomes the first thing on the
	   line. At 320px a 60px indent leaves ~200px of column, which breaks the
	   longer clauses into six or seven words a line. */
	.v3-doc__list li {
		padding-inline-end: 44px;
		min-height: 32px;
		font-size: var(--v3-fs-m-body);  /* 16px */
	}

	.v3-doc__list li::before {
		width: 32px;
		height: 32px;
		font-size: var(--v3-fs-m-caption);
	}

	.v3-doc__note { font-size: var(--v3-fs-m-body); }
	.v3-doc__faqs { gap: var(--v3-space-5); }
	.v3-doc__faq-group { font-size: var(--v3-fs-m-h3); margin: var(--v3-space-4) 0 calc(var(--v3-space-4) - var(--v3-space-5)); }
	.v3-doc__ask { padding-bottom: 48px; }
	.v3-doc__ask-text { font-size: var(--v3-fs-m-h3); }
}