/* Onboarding collateral + enquiry form styles, loaded only by /get-started/ pages
   after the shared styles.css. Everything here is page-scoped on purpose: these
   five pages are fully bilingual (every block in English AND Dari) and print to
   A4 PDFs, and none of that machinery belongs in the sitewide stylesheet.

   The one structural idea: a .bi-block is ONE meaning in TWO languages — an
   English column and a Dari column in the same grid row. On screen they sit
   side by side; in print the row refuses to break, so a translation can never
   drift onto a different page from its English twin. */

/* ---------- document layout ---------- */

.doc-main { overflow: hidden; }
.doc-hero { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 78px 0 30px; text-align: center; }
.doc-hero .eyebrow { justify-content: center; }
.doc-hero h1 { margin: 0; font: 600 clamp(38px, 5vw, 58px)/1.04 "Manrope", sans-serif; letter-spacing: -2.5px; }
.doc-hero-fa { margin: 14px auto 0; color: var(--green); font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.6; }
.doc-lede { max-width: 720px; margin: 22px auto 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.doc-actions { display: flex; margin-top: 26px; justify-content: center; flex-wrap: wrap; gap: 12px; }
.doc-body { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 90px; }
.doc-section { padding: 34px 0 6px; }
.doc-section > h2 { margin: 0 0 6px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }

/* ---------- bilingual primitives ---------- */

.bi-block { display: grid; padding: 22px 0; align-items: start; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; gap: 14px 44px; break-inside: avoid; }
.bi-block:first-of-type { border-top: 0; }
.bi-en h3, .bi-fa h3 { margin: 0 0 8px; font-size: 18px; }
.bi-en h3 { font-family: "Manrope", sans-serif; font-weight: 700; letter-spacing: -.4px; }
.bi-en p, .bi-en li { margin: 0; color: #53627d; font-size: 13px; line-height: 1.75; }
.bi-en p + p { margin-top: 10px; }
.bi-fa { font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; }
.bi-fa h3 { font-weight: 700; line-height: 1.6; }
.bi-fa p, .bi-fa li { margin: 0; color: #53627d; font-size: 15px; line-height: 1.95; }
.bi-fa p + p { margin-top: 10px; }

/* Lists inside bilingual columns: logical properties so one rule serves both
   directions, and the check glyph never mirrors. */
.bi-en ul, .bi-fa ul { display: grid; margin: 6px 0 0; padding: 0; list-style: none; gap: 9px; }
.bi-en li, .bi-fa li { display: flex; align-items: baseline; gap: 10px; }
.bi-en li > i, .bi-fa li > i { display: grid; width: 19px; height: 19px; border-radius: 50%; place-items: center; color: var(--green); background: #e8effc; font-size: 8px; font-style: normal; flex: 0 0 auto; transform: translateY(3px); }

/* ---------- numbered steps (process guide) ---------- */

.step-block { position: relative; padding-inline-start: 64px; }
.step-num { position: absolute; inset-inline-start: 0; top: 26px; display: grid; width: 42px; height: 42px; border-radius: 13px 13px 13px 4px; place-items: center; color: white; background: var(--green); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 800; }

/* ---------- who-does-what table (process guide) ---------- */

.duty-grid { display: grid; margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; grid-template-columns: 1fr 1fr; break-inside: avoid; }
.duty-col { padding: 22px 24px; }
.duty-col + .duty-col { border-inline-start: 1px solid var(--line); }
.duty-col > b { display: block; margin-bottom: 4px; color: var(--green); font-family: "Manrope", sans-serif; font-size: 13px; }
.duty-col > span[lang="fa-AF"] { display: block; margin-bottom: 12px; color: var(--muted); font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 700; }
.duty-col ul { display: grid; margin: 0; padding: 0; list-style: none; gap: 8px; }
.duty-col li { color: #53627d; font-size: 12px; line-height: 1.6; }
.duty-col li [lang="fa-AF"] { display: block; margin-top: 1px; color: var(--muted); font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; font-size: 13px; }

/* ---------- checklist sheet (data checklist doc) ---------- */

.check-sheet { display: grid; margin-top: 8px; gap: 0; }
.check-item { display: grid; padding: 13px 0; align-items: start; border-top: 1px solid var(--line); grid-template-columns: 34px 1fr 1fr; gap: 6px 24px; break-inside: avoid; }
.check-item:first-child { border-top: 0; }
.check-item > i { width: 20px; height: 20px; margin-top: 2px; border: 2px solid #b8c6dd; border-radius: 6px; }
.check-item b { display: block; font-size: 13px; }
.check-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.check-item [lang="fa-AF"] { font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; }
.check-item [lang="fa-AF"] b { font-size: 14px; line-height: 1.6; }
.check-item [lang="fa-AF"] small { font-size: 12px; line-height: 1.8; }

.tip-note { display: grid; margin-top: 26px; padding: 20px 24px; border: 1px solid #cfe3d9; border-radius: 16px; background: #f0f9f4; grid-template-columns: 1fr 1fr; gap: 24px; break-inside: avoid; }
.tip-note p { margin: 0; color: #2c5d46; font-size: 12px; line-height: 1.7; }
.tip-note [lang="fa-AF"] { font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1.9; }

/* ---------- hub document cards ---------- */

.doc-cards { display: grid; margin-top: 40px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.doc-card { display: grid; padding: 26px; align-content: start; border: 1px solid var(--line); border-radius: 20px; background: white; }
.doc-card > span { display: grid; width: 40px; height: 40px; margin-bottom: 26px; border-radius: 12px; place-items: center; color: var(--green); background: #e8effc; font-size: 13px; font-weight: 800; }
.doc-card h3 { margin: 0 0 4px; font: 700 19px "Manrope", sans-serif; letter-spacing: -.4px; }
.doc-card .card-fa { margin: 0 0 10px; color: var(--muted); font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.6; }
.doc-card p { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.doc-card-links { display: grid; margin-top: auto; gap: 8px; }
.doc-card-links a { display: inline-flex; align-items: center; color: var(--green-2); font-size: 12px; font-weight: 700; gap: 8px; }
.doc-card-links a:hover { color: var(--orange); }

/* ---------- bilingual form widgets (used by /get-started/form/) ---------- */

.form-section-label { display: flex; grid-column: 1/-1; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin: 18px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; gap: 4px 14px; }
.form-section-label:first-child { margin-top: 0; }
.form-section-label .label-fa { letter-spacing: 0; text-transform: none; }

.field-label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; }
.field-label > span:first-child { color: #485a78; font-size: 10px; font-weight: 700; }
.label-fa { color: #647493; font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; }
.field-hint { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; gap: 2px 14px; }
.field-hint .label-fa { font-size: 12px; font-weight: 400; }
.field-error { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; color: #b3372f; font-size: 10px; font-weight: 700; line-height: 1.5; gap: 2px 14px; }
.field-error .label-fa { color: #b3372f; font-size: 12px; }
.form-field.has-error input, .form-field.has-error textarea { border-color: #d9968f; }

/* Values that are digits, links or Latin tokens stay left-to-right even when
   the surrounding label is Dari. */
.form-field input[name="phone"], .form-field input[name="menuLink"], .form-field input[name="email"] { direction: ltr; text-align: left; }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill { display: inline-flex; align-items: center; padding: 11px 16px; border: 1px solid #d6e0ee; border-radius: 11px; background: #fbfdff; font-size: 12px; font-weight: 700; cursor: pointer; gap: 9px; }
.radio-pill .label-fa { font-size: 13px; }
.radio-pill input { accent-color: var(--green); }
.radio-pill:has(input:checked) { border-color: var(--green-2); background: #eef4ff; box-shadow: 0 0 0 3px rgb(46 99 199 / 10%); }

.photo-previews { display: flex; flex-wrap: wrap; margin-top: 4px; gap: 10px; }
.photo-previews figure { position: relative; margin: 0; }
.photo-previews img { display: block; width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 12px; object-fit: contain; background: #f2f6fc; }
.photo-previews button { position: absolute; top: -7px; right: -7px; display: grid; width: 22px; height: 22px; border: 0; border-radius: 50%; place-items: center; color: white; background: var(--ink); font-size: 11px; cursor: pointer; }

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-panel { display: none; padding: 26px 28px; border-radius: 18px; }
.form-panel.is-visible { display: grid; gap: 14px; }
.form-panel .bi-block { padding: 0; border: 0; }
.form-panel-success { border: 1px solid #cfe3d9; background: #f0f9f4; }
.form-panel-success p { color: #2c5d46; }
.form-panel-error { border: 1px solid #ecd2cf; background: #fdf4f3; }
.form-panel-error p { color: #8c332c; }
.form-panel a { font-weight: 800; text-decoration: underline; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .doc-cards { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .doc-hero { padding: 56px 0 18px; }
  .bi-block { grid-template-columns: 1fr; padding: 18px 0; }
  .check-item { grid-template-columns: 30px 1fr; }
  .check-item > span[lang="fa-AF"] { grid-column: 2; }
  .duty-grid, .tip-note { grid-template-columns: 1fr; }
  .duty-col + .duty-col { border-inline-start: 0; border-top: 1px solid var(--line); }
  .step-block { padding-inline-start: 0; padding-top: 74px; }
  .step-num { top: 22px; }
}

/* ---------- print: the same page IS the PDF ---------- */

/* Generated with Chrome headless --print-to-pdf (scripts/generate-onboarding-pdfs.mjs)
   and identical when a visitor prints the page themselves. */

@page { size: A4; margin: 14mm; }

.print-only { display: none; }

@media print {
  .site-header, .site-footer, .whatsapp-contact, .breadcrumbs, .doc-actions,
  .mini-cta, .button, .no-print { display: none !important; }
  body { background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-hero { width: 100%; padding: 0 0 4px; text-align: start; }
  .doc-hero .eyebrow { justify-content: flex-start; margin-bottom: 10px; }
  .doc-hero h1 { font-size: 21pt; letter-spacing: -1px; }
  .doc-hero-fa { margin: 5px 0 0; font-size: 12.5pt; }
  .doc-lede { max-width: none; margin: 6px 0 0; font-size: 9pt; line-height: 1.55; }
  .doc-body { width: 100%; padding: 0; }
  .doc-section { padding: 10px 0 0; break-inside: auto; }
  .doc-section > h2 { break-after: avoid; margin-bottom: 2px; font-size: 8.5pt; }
  .bi-block { padding: 10px 0; gap: 8px 26px; }
  .bi-en p, .bi-en li { font-size: 8.5pt; line-height: 1.55; }
  .bi-fa p, .bi-fa li { font-size: 9.5pt; line-height: 1.75; }
  .bi-en h3 { font-size: 11pt; margin-bottom: 4px; }
  .bi-fa h3 { font-size: 11.5pt; margin-bottom: 4px; }
  .bi-en ul, .bi-fa ul { gap: 5px; }
  .step-block { padding-inline-start: 48px; }
  .step-num { width: 30px; height: 30px; top: 12px; border-radius: 9px 9px 9px 3px; font-size: 12px; }
  .duty-col { padding: 12px 16px; }
  .duty-col li { font-size: 8.5pt; }
  .duty-col li [lang="fa-AF"] { font-size: 9.5pt; }
  .check-item { padding: 6px 0; grid-template-columns: 26px 1fr 1fr; }
  .check-item > i { width: 14px; height: 14px; margin-top: 1px; border-width: 1.5px; border-radius: 4px; border-color: #8fa2bf; }
  .check-item b { font-size: 9pt; }
  .check-item small { margin-top: 0; font-size: 7.5pt; line-height: 1.45; }
  .check-item [lang="fa-AF"] b { font-size: 9.5pt; }
  .check-item [lang="fa-AF"] small { font-size: 8.5pt; line-height: 1.6; }
  .tip-note { margin-top: 10px; padding: 9px 14px; gap: 20px; }
  .tip-note p { font-size: 7.5pt; line-height: 1.5; }
  .tip-note [lang="fa-AF"] { font-size: 8.5pt; line-height: 1.65; }
  a { color: inherit; text-decoration: none; }

  /* Letterhead shown only on paper. */
  .print-only.doc-letterhead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--green); }
  .doc-letterhead .brand-line { display: flex; align-items: center; gap: 10px; }
  .doc-letterhead .brand-line b { display: grid; width: 34px; height: 34px; border-radius: 11px 11px 11px 4px; place-items: center; color: white; background: var(--green); font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 800; }
  .doc-letterhead .brand-line span { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.5px; }
  .doc-letterhead .brand-line span strong { color: var(--orange); }
  .doc-letterhead > small { color: var(--muted); font-size: 8pt; text-align: end; line-height: 1.6; }
}