/* ==========================================================================
   "طلبات العملاء" — public project preparation guides (/ar/requests/<key>), v7.
   A document, not an app: typography, whitespace, hairlines and a little
   orange. No boxes around sections, no counters, no checks, nothing hidden.
   Scoped to .cg / body:has([data-cg]); site tokens only; RTL; mobile-first.
   ========================================================================== */
.cg {
  --cg-row: color-mix(in srgb, var(--text-primary) 2.6%, transparent);
  --cg-row-hover: color-mix(in srgb, var(--text-primary) 4.5%, transparent);
  --cg-border: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --cg-rule: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --cg-ease: cubic-bezier(.16, 1, .3, 1);
  overflow-x: clip;
}
.cg *, .cg *::before, .cg *::after { box-sizing: border-box; }
.cg ul, .cg ol { margin: 0; padding: 0; list-style: none; }
.cg p, .cg h1, .cg h2 { margin: 0; }
.cg-shell { width: min(100% - 32px, 1140px); margin-inline: auto; }

/* ------------------------------------------------------------------ hero */
.cg-hero { position: relative; padding-block: calc(var(--header-h, 74px) + clamp(2rem, 6vw, 4.2rem)) clamp(1.6rem, 4vw, 2.6rem); text-align: center; overflow: hidden; }
/* A barely-there glow and grid, fading out downwards. */
.cg-hero__bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at 50% 18%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    linear-gradient(var(--cg-rule) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--cg-rule) 1px, transparent 1px) 0 0 / 56px 56px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 25%, #000 30%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 25%, #000 30%, transparent 78%);
}
.cg-hero__in { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 760px; }
.cg-badge { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-size: .88rem; font-weight: 700; letter-spacing: .01em; }
.cg-badge::before, .cg-badge::after { content: ''; width: 18px; height: 1px; background: color-mix(in srgb, var(--primary) 55%, transparent); }
.cg-title { margin-block: .9rem .7rem !important; font-size: clamp(1.8rem, 5.4vw, 3.15rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.cg-lead { max-width: 46ch; color: var(--text-secondary); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.9; }
.cg-note { display: flex; align-items: stretch; gap: .85rem; max-width: 520px; margin-block-start: 1.5rem !important; color: var(--text-secondary); font-size: clamp(.95rem, 1.6vw, 1.02rem); line-height: 1.85; text-align: start; }
.cg-note__mark { flex: none; width: 3px; border-radius: 3px; background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 20%, transparent)); }
.cg-note b { color: var(--text-primary); font-weight: 700; }

/* ---------------------------------------------------------------- roadmap */
.cg-road { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: 960px; margin: 0 auto clamp(2rem, 5vw, 3.2rem) !important; padding-block-start: .2rem; }
.cg-road::before { content: ''; position: absolute; top: 12px; inset-inline: calc(100% / var(--n) / 2); height: 1px; background: var(--cg-rule); }
.cg-road li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 0; padding-inline: .3rem; text-align: center; }
.cg-road__n { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--background); box-shadow: inset 0 0 0 1px var(--cg-rule); color: var(--text-muted); font-family: var(--font-num, inherit); font-size: .7rem; font-weight: 700; }
.cg-road li.is-first .cg-road__n { color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent); }
.cg-road__t { color: var(--text-muted); font-size: .84rem; font-weight: 500; line-height: 1.5; }

/* --------------------------------------------------------------- sections */
.cg-doc { padding-block-end: clamp(2.4rem, 6vw, 4rem); }
/* Start side (right in RTL): number, title, line. Then the requirements. */
.cg-part { display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); gap: 1.4rem clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(.4rem, 1.5vw, .8rem); scroll-margin-top: calc(var(--header-h, 74px) + 16px); }
.cg-part__head { position: sticky; top: calc(var(--header-h, 74px) + 28px); min-width: 0; }
.cg-part__n { display: block; margin-block-end: .5rem; color: var(--primary); font-family: var(--font-num, inherit); font-size: .92rem; font-weight: 700; letter-spacing: .08em; }
.cg-part__title { color: var(--text-primary); font-size: clamp(1.4rem, 2.8vw, 1.85rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.cg-part__desc { max-width: 34ch; margin-block-start: .55rem !important; color: var(--text-muted); font-size: .98rem; line-height: 1.85; }
.cg-part__each { margin-block-start: .7rem !important; color: var(--text-secondary); font-size: .92rem; font-weight: 700; }

/* Divider: a hairline with a short accent at its start. */
.cg-rule { position: relative; height: 1px; margin-block: clamp(2.2rem, 5vw, 3.2rem); background: var(--cg-rule); }
.cg-rule span { position: absolute; inset-inline-start: 0; top: 0; width: 44px; height: 1px; background: var(--primary); }

/* Requirements — quiet rows, 2 columns at most. */
.cg-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .9rem; }
.cg-row { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--cg-border); border-radius: 14px; background: var(--cg-row); transition: transform .45s var(--cg-ease), background-color .3s ease, border-color .3s ease; }
.cg-row__ic { flex: none; display: grid; place-items: center; width: 20px; height: 24px; color: color-mix(in srgb, var(--primary) 80%, var(--text-muted)); transition: color .3s ease, transform .45s var(--cg-ease); }
.cg-row__txt { flex: 1; display: grid; gap: .18rem; min-width: 0; }
.cg-row__t { color: var(--text-primary); font-size: 1rem; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.cg-row__d { color: var(--text-muted); font-size: .9rem; line-height: 1.7; }
.cg-row__f { color: var(--text-muted); font-family: var(--font-num, inherit); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.cg-row__opt { flex: none; align-self: flex-start; margin-block-start: .15rem; color: var(--text-muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
@media (hover: hover) {
  .cg-row:hover { transform: translateY(-3px); background: var(--cg-row-hover); border-color: color-mix(in srgb, var(--text-primary) 11%, transparent); }
  .cg-row:hover .cg-row__ic { color: var(--primary); transform: scale(1.1); }
}

/* --------------------------------------------------------------------- CTA */
.cg-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 3rem; margin-block-start: clamp(2.4rem, 5vw, 3.4rem); padding-block: clamp(1.6rem, 4vw, 2.2rem); border-block: 1px solid var(--cg-rule); }
.cg-cta::before { content: ''; position: absolute; top: -1px; inset-inline-start: 0; width: 44px; height: 1px; background: var(--primary); }
.cg-cta__txt { flex: 1 1 320px; min-width: 0; }
.cg-cta h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; line-height: 1.35; }
.cg-cta p { margin-block-start: .45rem !important; max-width: 46ch; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.85; }
.cg-cta__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.cg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .35s var(--cg-ease), box-shadow .35s ease, background-color .25s ease, border-color .25s ease; }
.cg-btn:active { transform: scale(.98); }
.cg-btn--main { background: var(--primary); color: #FFFFFF; box-shadow: 0 12px 28px -16px var(--primary-glow); }
.cg-btn--main:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px var(--primary-glow); }
.cg-btn--quiet { border-color: var(--cg-border); background: transparent; color: var(--text-primary); }
.cg-btn--quiet:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--text-primary) 18%, transparent); }
.cg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Voice guide card (partial voice-guide) sits between the hero and the roadmap. */
.cg-voice { margin-block-end: clamp(1.8rem, 4vw, 2.6rem); }

/* Copy confirmation — above the floating buttons (and the phone bottom bar). */
.cg-toast { position: fixed; z-index: 300; inset-inline: 0; bottom: calc(var(--fab-edge, 1rem) + var(--fab-safe, 0px) + var(--fab-size, 54px) + 12px); width: max-content; max-width: calc(100vw - 2rem); margin: 0 auto !important; padding: .6rem 1rem; border-radius: 999px; background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--cg-border), 0 16px 34px -16px rgba(0, 0, 0, .7); color: var(--text-primary); font-size: .9rem; font-weight: 600; text-align: center; animation: cg-up .35s var(--cg-ease) both; }
.cg-toast[hidden] { display: none; }
.cg-copy-src { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------- motion */
/* On load: the hero lines and the roadmap rise in, one after another. */
.cg-in { animation: cg-up .7s var(--cg-ease) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes cg-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* On scroll (JS adds .cg-anim): sections rise 15px, rows follow ~60ms apart. */
.cg.cg-anim [data-cg-reveal] { opacity: 0; transform: translateY(15px); transition: opacity .6s ease-out, transform .6s var(--cg-ease); }
.cg.cg-anim [data-cg-reveal].is-in { opacity: 1; transform: none; }
.cg.cg-anim .cg-part .cg-row { opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out calc(var(--i, 0) * 60ms + 120ms), transform .5s var(--cg-ease) calc(var(--i, 0) * 60ms + 120ms), background-color .3s ease, border-color .3s ease; }
.cg.cg-anim .cg-part.is-in .cg-row { opacity: 1; transform: none; }
@media (hover: hover) {
  .cg.cg-anim .cg-part.is-in .cg-row:hover { transform: translateY(-3px); transition-delay: 0s; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1023px) {
  .cg-part { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .cg-part__head { position: static; }
  .cg-part__desc { max-width: 56ch; }
}
/* Desktop and tablet never show the phone-only pieces. */
.cg-road__cap, .cg-part__of { display: none; }

/* ==========================================================================
   MOBILE (≤ 767px) — its own composition, not a squeezed desktop:
   short hero · a slim numbered line · each section as a small story
   ("01 / 06", title, one line, compact rows) · light dividers · a simple
   CTA and pill links · clear of the bottom bar and the floating buttons.
   ========================================================================== */
@media (max-width: 767px) {
  .cg {
    --cg-row: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
    --cg-border: color-mix(in srgb, var(--text-primary) 6%, transparent);
  }
  .cg-shell { width: calc(100% - 28px); }

  /* Hero — short: badge, two-line title, subtitle, a small note. */
  .cg-hero { padding-block: calc(var(--header-h, 74px) + 1.25rem) 0; }
  .cg-hero__bg { opacity: .4; }
  .cg-badge { font-size: .8rem; }
  .cg-badge::before, .cg-badge::after { width: 14px; }
  .cg-title { margin-block: .6rem .45rem !important; font-size: clamp(1.6rem, 7.4vw, 1.95rem); line-height: 1.32; }
  .cg-lead { max-width: 34ch; font-size: .96rem; line-height: 1.8; }
  .cg-note { gap: .6rem; max-width: none; width: 100%; margin-block-start: 1rem !important; padding: .75rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--text-primary) 3%, transparent); font-size: .9rem; line-height: 1.75; }

  /* Roadmap — one slim line of numbers, and where we start. */
  .cg-voice { margin-block: 1.6rem 0; }
  .cg-road { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; max-width: 100%; margin: 2rem auto 0 !important; padding: 0; }
  .cg-road::before { display: block; top: 11px; }
  .cg-road li { padding: 0; }
  .cg-road__n { width: 23px; height: 23px; font-size: .66rem; }
  .cg-road__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cg-road__cap { display: block; margin-block-start: .65rem !important; color: var(--text-muted); font-size: .86rem; text-align: center; }

  /* Sections — a small story each, connected to its rows. */
  .cg-doc { padding-block: 1.75rem calc(2.2rem + var(--bnav-h, 64px) + var(--bnav-gap, .6rem)); }
  .cg-part { gap: 1.1rem; padding-block: 0; }
  .cg-part__n { margin-block-end: .35rem; font-size: .82rem; }
  .cg-part__of { display: inline; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }
  .cg-part__title { font-size: 1.35rem; line-height: 1.4; }
  .cg-part__desc { max-width: none; margin-block-start: .35rem !important; font-size: .93rem; line-height: 1.75; }
  .cg-part__each { margin-block-start: .45rem !important; font-size: .88rem; }
  .cg-rule { margin-block: 1.85rem; }
  .cg-rule span { width: 32px; }

  /* Rows — compact, quiet, monochrome icons. */
  .cg-rows { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .cg-row { gap: .75rem; min-height: 66px; padding: .85rem .9rem; border-radius: 12px; }
  .cg-row__ic { width: 18px; height: 22px; color: var(--text-muted); }
  .cg-row__ic .icon { width: 17px; height: 17px; }
  .cg-row__txt { gap: .1rem; }
  .cg-row__t { font-size: .96rem; line-height: 1.55; }
  .cg-row__d { font-size: .86rem; line-height: 1.6; }
  .cg-row__f { font-size: .74rem; }
  .cg-row__opt { margin-block-start: .1rem; font-size: .72rem; font-weight: 500; }

  /* CTA — simple: a line, title, text, two full-width buttons. */
  .cg-cta { flex-direction: column; align-items: stretch; gap: 1.1rem; margin-block-start: 1.5rem; padding-block: 1rem 0; border-block-end: 0; text-align: center; }
  .cg-cta::before { inset-inline-start: 50%; margin-inline-start: -16px; width: 32px; }
  /* In a column the desktop flex-basis (320px) would become a height — reset it. */
  .cg-cta__txt { flex: none; }
  .cg-cta h2 { font-size: 1.35rem; }
  .cg-cta p { margin-inline: auto; font-size: .95rem; }
  .cg-cta__btns { flex-direction: column; gap: .6rem; }
  .cg-btn { width: 100%; min-height: 50px; font-size: .98rem; }

}
@media (max-width: 359px) {
  .cg-title { font-size: 1.55rem; }
  .cg-row { padding: .8rem .8rem; gap: .65rem; }
  .cg-road__n { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cg *, .cg *::before, .cg *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .cg.cg-anim [data-cg-reveal], .cg.cg-anim .cg-part .cg-row { opacity: 1; transform: none; }
}

/* Guide pages: the global header and tab bar as elsewhere; on phones the
   floating buttons are a little smaller so they never sit on the content. */
@media (max-width: 767px) {
  body:has([data-cg]) { --fab-size: 44px; }
}

/* ==========================================================================
   This guide's screenshot and recordings (.rq-*)
   Both come from the media library — see 'media' in app/data/client-guides.php.
   The player itself is partials/audio-guide.php (.sdg), the same timeline the
   service-details pages use, so only the frame around it is styled here.
   Uses the page's own --cg-* tokens so it reads as part of the document.
   ========================================================================== */
.rq-media {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  margin-block: clamp(1.6rem, 3.6vw, 2.4rem);
}
.rq-media__head { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.rq-media__kick {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .8rem;
  border: 1px solid var(--primary-line);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .76rem;
  font-weight: 700;
}
.rq-media__kick .icon { width: 14px; height: 14px; }
.rq-media__t { font-size: clamp(1.25rem, 2.8vw, 1.7rem); font-weight: 700; line-height: 1.4; color: var(--text-primary); text-wrap: balance; }
.rq-media__lead { max-width: 52ch; color: var(--text-muted); font-size: .95rem; line-height: 1.85; }

/* --- The screenshot ------------------------------------------------------ */
/* Capped by height, never cropped. These screenshots are portrait (roughly
   1120×1400), so filling a wide box would throw away everything below the top
   third — on a page whose whole point is the list in the picture. Bounding the
   height and letting the width follow shows the entire image, just smaller;
   the lightbox shows it full size. */
.rq-shot { margin: 0; min-width: 0; }
.rq-shot__link {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(.7rem, 1.8vw, 1.1rem);
  border: 1px solid var(--cg-border);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--primary-soft), transparent 58%),
    var(--cg-row);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .3s ease, box-shadow .45s var(--cg-ease);
}
.rq-shot__link:hover,
.rq-shot__link:focus-visible { border-color: var(--primary-line); box-shadow: 0 24px 48px -34px var(--primary-glow); }
.rq-shot__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rq-shot__link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(300px, 46vh, 460px);
  border-radius: 12px;
}
.rq-shot__zoom {
  position: absolute;
  inset-block-end: clamp(1rem, 2.4vw, 1.5rem);
  inset-inline-end: clamp(1rem, 2.4vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 8, 13, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .45s var(--cg-ease);
}
.rq-shot__link:hover .rq-shot__zoom,
.rq-shot__link:focus-visible .rq-shot__zoom { opacity: 1; transform: none; }
/* No hover on a touch screen, and that is exactly where the hint is needed. */
@media (hover: none) {
  .rq-shot__zoom { opacity: 1; transform: none; }
}
.rq-shot__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-block-start: .7rem;
  color: var(--text-faint);
  font-size: .84rem;
}
.rq-shot__cap .icon { width: 15px; height: 15px; color: var(--primary); }

/* --- The player ---------------------------------------------------------- */
/* audio-guide brings its own card, so this only gives it the page's frame.
   With a single track its head/list split has no second column to fill, so
   it runs as one column at every width here. */
.rq-player {
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--cg-border);
  border-radius: 20px;
  background: var(--cg-row);
}
.rq-player .sdg { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.4rem); }
.rq-player .sdg__head { justify-items: start; }

/* Two columns once there is room for the player and the picture side by side
   without either being squeezed. The player leads, so it takes the wider
   column — it has a timeline and four controls to fit on one line. */
@media (min-width: 1040px) {
  .rq-media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }
  .rq-media__head { grid-column: 1 / -1; }
  .rq-shot__link img { max-height: clamp(320px, 44vh, 440px); }
}

@media (max-width: 380px) {
  .rq-player { padding: .9rem .75rem; }
  .rq-shot__link { padding: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rq-shot__link, .rq-shot__zoom { transition: none; }
}