المكوّنات · قسم أسئلة شائعة
قسم أسئلة شائعة
أكورديون بعنصر details الأصلي — يعمل بلا شيفرة
12 تصاميم من هذه العائلة
<div class="bk bkq"><section>
<div class="head">
<span class="eyebrow" data-ar="أسئلة متكرّرة" data-en="FAQ">أسئلة متكرّرة</span>
<h3 data-ar="ما يسأل عنه عملاؤنا قبل أوّل شحنة" data-en="What clients ask before their first shipment">ما يسأل عنه عملاؤنا قبل أوّل شحنة</h3>
</div>
<div class="list">
<details name="faq" open><summary data-ar="كم تستغرق الشحنة داخل المملكة؟" data-en="How long is domestic delivery?">كم تستغرق الشحنة داخل المملكة؟</summary>
<p data-ar="من يوم إلى ثلاثة أيّام عمل حسب المدينة، ويصلك رقم تتبّع فور الاستلام." data-en="One to three business days by city, with a tracking number issued at pickup.">من يوم إلى ثلاثة أيّام عمل حسب المدينة، ويصلك رقم تتبّع فور الاستلام.</p></details>
<details name="faq"><summary data-ar="هل تشحنون البضائع القابلة للكسر؟" data-en="Do you ship fragile goods?">هل تشحنون البضائع القابلة للكسر؟</summary>
<p data-ar="نعم، بتغليف مخصّص ورسم إضافي يُحسب من الوزن الحجمي." data-en="Yes, with dedicated packing and a surcharge based on volumetric weight.">نعم، بتغليف مخصّص ورسم إضافي يُحسب من الوزن الحجمي.</p></details>
<details name="faq"><summary data-ar="ماذا لو تأخّرت الشحنة؟" data-en="What if a shipment is late?">ماذا لو تأخّرت الشحنة؟</summary>
<p data-ar="نعيد رسوم الشحن كاملةً إن تجاوز التأخّر يومين عن الموعد المتّفق عليه." data-en="We refund the full shipping fee if delivery slips more than two days past the agreed date.">نعيد رسوم الشحن كاملةً إن تجاوز التأخّر يومين عن الموعد المتّفق عليه.</p></details>
<details name="faq"><summary data-ar="هل يمكن الدفع عند الاستلام؟" data-en="Is cash on delivery available?">هل يمكن الدفع عند الاستلام؟</summary>
<p data-ar="متاح داخل المدن الرئيسية، ويُحوَّل المبلغ إلى حسابك خلال ثلاثة أيّام عمل." data-en="Available in major cities; funds settle to your account within three business days.">متاح داخل المدن الرئيسية، ويُحوَّل المبلغ إلى حسابك خلال ثلاثة أيّام عمل.</p></details>
</div>
</section></div>
/* pt-scoped */
/* block-faq — شركة شحن */
.bkq{width:100%;height:100%;display:flex;flex-direction:column;
font-size:10px;color:var(--pt-text-secondary);overflow:hidden}
.bkq h2{margin:0;font-size:19px;line-height:1.35;color:var(--pt-text-primary);
font-weight:700;letter-spacing:-.01em}
.bkq h3{margin:0;font-size:12px;line-height:1.4;color:var(--pt-text-primary);font-weight:600}
.bkq h4{margin:0;font-size:10px;color:var(--pt-text-primary);font-weight:600}
.bkq p{margin:0;font-size:9.5px;line-height:1.85;color:var(--pt-text-muted)}
.bkq .eyebrow{font-size:8px;letter-spacing:.14em;color:var(--pt-accent);font-weight:700}
.bkq .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bkq button, .bkq a{font:inherit;cursor:pointer;text-decoration:none}
.bkq button:focus-visible, .bkq a:focus-visible, .bkq input:focus-visible, .bkq summary:focus-visible{outline:2px solid var(--pt-focus-ring);outline-offset:2px}
/* الأقسام تمتدّ من حافّة إلى حافّة — هذا ما يميّزها عن المكوّنات */
.bkq > section{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
@media(pointer:coarse){.bkq button, .bkq a{min-height:44px;display:inline-flex;
align-items:center;justify-content:center}
}
/* شخصية: قائمة مفصولة بخطوط، بلا انحناء تقريبًا، علامة + تدور */
.bkq > section{gap:9px;padding:14px 30px;background:var(--pt-surface)}
.bkq .head{display:flex;flex-direction:column;gap:2px}
.bkq .list{display:flex;flex-direction:column;
border-block-start:1px solid var(--pt-border-subtle)}
.bkq details{border-block-end:1px solid var(--pt-border-subtle)}
.bkq summary{list-style:none;cursor:pointer;padding:7px 0;font-size:9.5px;
color:var(--pt-text-primary);display:flex;align-items:center;gap:7px;
border-radius:var(--pt-radius-xs)}
.bkq summary::-webkit-details-marker{display:none}
.bkq summary::before{content:'+';flex:none;width:14px;height:14px;display:grid;
place-items:center;border-radius:var(--pt-radius-xs);background:var(--pt-bg-inset);
color:var(--pt-accent);font-size:10px;
transition:transform var(--pt-motion-duration-fast) var(--pt-motion-easing-standard)}
.bkq details[open] summary::before{content:'−';transform:rotate(180deg)}
.bkq summary:hover{color:var(--pt-accent)}
.bkq details p{padding:0 0 8px;margin-inline-start:21px;font-size:8.5px}
@media(prefers-reduced-motion:reduce){.bkq summary::before{transition:none}
}
/* هذا القسم لا يحتاج شيفرة — بنية ونمط فقط */
# FAQ Section
**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.
**Goal:** FAQ Section — An accordion built on native details — works with JavaScript off
**Why this component matters:** Use native details/summary: it is keyboard-accessible, searchable by the browser’s find-in-page, and survives with JavaScript disabled. A div-based accordion gives up all three.
**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.
**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.
**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.
**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.
**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.
**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.
**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.
**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.