/* =====================================================================
   Ghayabi Tazkira — public pages (service page, application form,
   confirmation, verification, tracking)

   Look of the Ministry of Foreign Affairs' site (mfa.gov.af): navy
   #1F4897 with gold #AE8925, white cards with a 10px radius and a soft
   shadow, the Ministry's geometric pattern behind the title band and —
   very faintly — behind the page, and the office's own typeface, Bahij
   Mitra, for everything on these pages, whatever the language. The
   tokens are prefixed gt- so the site's own variables (the shared
   header) are left untouched.
   ===================================================================== */

@font-face {
  font-family: 'Bahij Mitra';
  src: url('fonts/BahijMitra-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bahij Mitra';
  src: url('fonts/BahijMitra-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --gt-navy:    #1F4897;
  --gt-navy-d:  #163a7c;
  --gt-navy-x:  #0f2a5e;
  --gt-navy-l:  #e8eef9;
  --gt-gold:    #AE8925;
  --gt-gold-d:  #8f6f1c;
  --gt-gold-l:  #fbf5e4;
  --gt-gray:    #E6E6E6;
  --gt-bg:      #f2f3f7;
  --gt-ink:     #1f2733;
  --gt-mid:     #4b5563;
  --gt-soft:    #6b7280;
  --gt-line:    #dfe3ea;
  --gt-ok:      #15803d;
  --gt-bad:     #b3261e;
  --gt-radius:  10px;
  --gt-shadow:  0 0 10px rgba(0,0,0,.1);
  --gt-shadow-2: 0 6px 22px rgba(31,72,151,.12);
  --gt-font:    'Bahij Mitra', 'Vazirmatn', Tahoma, sans-serif;
  /* the Ministry's patterns: the dark flower behind navy bands, the
     lattice — faint navy — behind the page */
  --gt-flower:  url('pattern-flower.png');
  --gt-lattice: url('pattern-lattice.png');
}

/* Tell Android Chrome this page already controls its own colours, so it
   does not run its "auto-darken" pass over it. That pass cannot read
   pixel data inside a <canvas> (the biometric photo and the signature
   pad both are one), and on some Android builds it paints the canvas
   solid black instead of leaving it alone. */
html { color-scheme: light; }

/* ── the office typeface, everywhere on these pages, in every language ── */
.page-header, .consular-layout, .gt-lang-modal,
.consular-layout input, .consular-layout select, .consular-layout textarea, .consular-layout button {
  font-family: var(--gt-font);
}
html[dir="rtl"] .consular-layout { font-size: 18px; }
html[dir="ltr"] .consular-layout { font-size: 17px; line-height: 1.65; }

/* ── the page title band ────────────────────────────────────────────
   Navy with the Ministry's flower pattern, a gold rule underneath, and
   room for the three-step strip that says what happens. */
.page-header {
  background: var(--gt-navy-d) var(--gt-flower) center / 200px repeat;
  color: #fff; padding: 44px 24px 30px; position: relative; margin: 0;
  border-bottom: 4px solid var(--gt-gold); text-align: start;
}
.page-header::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(31,72,151,.55) 0%, rgba(15,42,94,.35) 55%, rgba(15,42,94,.65) 100%);
}
.page-header-content { max-width: 1200px; margin: 0 auto; position: relative; }
.page-header-title { font-size: 2.35rem; font-weight: 700; margin: 0 0 6px; line-height: 1.3; color: #fff; }
.page-header-subtitle { font-size: 1.12rem; opacity: .92; margin: 0; color: #fff; }

/* the three steps: fill in → number and QR → visit or track */
.gt-strip { display: flex; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.gt-strip li {
  flex: 1 1 220px; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--gt-radius); padding: 10px 14px; font-size: .98rem; line-height: 1.5;
  backdrop-filter: blur(2px);
}
.gt-strip li .n {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gt-gold); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem;
}
.gt-strip li b { display: block; font-weight: 700; }
.gt-strip li small { display: block; opacity: .85; font-size: .88rem; }

/* ── the page behind the cards: light, with the lattice barely there ── */
.consular-layout {
  background: var(--gt-bg) var(--gt-lattice) center / 190px repeat;
  padding: 30px 20px 48px; display: block; margin: 0;
}
.content-card {
  background: #fff; border-radius: var(--gt-radius); box-shadow: var(--gt-shadow);
  padding: 28px 30px; border: none; max-width: 1100px; margin: 0 auto;
}
.breadcrumb { font-size: .95rem; color: var(--gt-soft); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb a { color: var(--gt-navy); text-decoration: none; font-weight: 700; }
.breadcrumb a:hover { color: var(--gt-gold); }
.breadcrumb-sep { color: var(--gt-gold); }

@media (max-width: 720px) {
  .page-header { padding: 28px 18px 22px; }
  .page-header-title { font-size: 1.7rem; }
  .page-header-subtitle { font-size: 1rem; }
  .gt-strip { margin-top: 16px; gap: 8px; }
  .gt-strip li { padding: 8px 12px; font-size: .92rem; }
  .consular-layout { padding: 16px 10px 28px; }
  .content-card { padding: 18px 14px; }
}

/* =====================================================================
   The service page (ghayabi-tazkira-form.php): sidebar + main card
   ===================================================================== */
.gt-info { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.gt-info .content-card { max-width: none; margin: 0; }
.gt-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.gt-side-card { background: #fff; border-radius: var(--gt-radius); box-shadow: var(--gt-shadow); overflow: hidden; }
.gt-side-h {
  background: var(--gt-navy) var(--gt-flower) center / 160px repeat; color: #fff;
  padding: 13px 18px; font-weight: 700; font-size: 1.08rem; border-bottom: 3px solid var(--gt-gold);
}
.gt-side-b { padding: 14px 14px 16px; }
.gt-side-g { margin-bottom: 14px; }
.gt-side-g:last-child { margin-bottom: 0; }
.gt-side-gt { color: var(--gt-gold-d); font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin: 0 6px 8px; text-transform: uppercase; }
.gt-side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gt-side-links a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: var(--gt-navy); text-decoration: none; font-weight: 700; font-size: .95rem; line-height: 1.45;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.gt-side-links a::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gt-gold); opacity: .7; }
.gt-side-links a:hover { background: var(--gt-navy-l); border-color: #cbd8f0; }
.gt-side-links a.active { background: var(--gt-navy); color: #fff; }
.gt-side-links a.active::before { background: #fff; opacity: 1; }
.gt-hours { padding: 0 4px; }
.gt-hours-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef1f6; font-size: .92rem; }
.gt-hours-row:last-child { border-bottom: none; }
.gt-hours-row .d { color: var(--gt-mid); }
.gt-hours-row .t { color: var(--gt-navy); font-weight: 700; direction: ltr; }
.gt-hours-row .t.closed { color: var(--gt-bad); }

.gt-h1 { color: var(--gt-navy); font-size: 1.9rem; font-weight: 700; margin: 0 0 6px; line-height: 1.35; }
.gt-lead { color: var(--gt-mid); font-size: 1.05rem; line-height: 1.9; margin: 0 0 22px; }
.gt-block { margin-bottom: 26px; }
.gt-block:last-child { margin-bottom: 0; }
.gt-h2 {
  color: var(--gt-navy); font-size: 1.28rem; font-weight: 700; margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--gt-line); position: relative;
}
.gt-h2::after { content: ''; position: absolute; bottom: -2px; inset-inline-start: 0; width: 72px; height: 2px; background: var(--gt-gold); }

/* accordion — white heads with navy text, the open one navy */
.gt-acc { display: flex; flex-direction: column; gap: 10px; }
.gt-acc-i { background: #fff; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); overflow: hidden; box-shadow: var(--gt-shadow); }
.gt-acc-h {
  width: 100%; background: #fff; color: var(--gt-navy); border: none; padding: 14px 18px;
  font: inherit; font-size: 1.02rem; font-weight: 700; text-align: start; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: background .15s, color .15s;
}
.gt-acc-h:hover { background: var(--gt-navy-l); }
.gt-acc-h .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gt-gold-l); color: var(--gt-gold-d); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 1rem; transition: transform .25s; }
.gt-acc-i.open .gt-acc-h { background: var(--gt-navy); color: #fff; }
.gt-acc-i.open .gt-acc-h .ic { background: var(--gt-gold); color: #fff; transform: rotate(180deg); }
.gt-acc-b { display: none; padding: 14px 18px 16px; color: var(--gt-mid); line-height: 1.9; font-size: .98rem; border-top: 1px solid var(--gt-line); }
.gt-acc-i.open .gt-acc-b { display: block; }
.gt-acc-b ul, .inner-list { margin: 8px 0 0; padding-inline-start: 20px; }
.gt-acc-b li, .inner-list li { margin-bottom: 6px; }

/* numbered steps */
.gt-olist { list-style: none; margin: 0; padding: 0; counter-reset: gt; display: flex; flex-direction: column; gap: 10px; }
.gt-olist li {
  counter-increment: gt; position: relative; padding: 13px 16px; padding-inline-start: 58px;
  background: #fbfcfe; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); color: var(--gt-mid); line-height: 1.85;
}
.gt-olist li::before {
  content: counter(gt); position: absolute; inset-inline-start: 14px; top: 13px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gt-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem;
}
html[dir="rtl"] .gt-olist li::before { content: counter(gt, persian); }
.gt-olist li strong { color: var(--gt-navy); }

.gt-fee { display: inline-flex; align-items: center; gap: 12px; background: var(--gt-ok); color: #fff; padding: 12px 24px; border-radius: var(--gt-radius); font-weight: 700; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(21,128,61,.22); }
.gt-fee .ic { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }

.gt-ulist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gt-ulist li { padding: 12px 16px; background: #fbfcfe; border: 1px solid var(--gt-line); border-inline-start: 4px solid var(--gt-gold); border-radius: var(--gt-radius); color: var(--gt-mid); line-height: 1.85; font-size: .98rem; }
.gt-ulist li strong { color: var(--gt-navy); }
.gt-ulist li a { color: var(--gt-navy); font-weight: 700; }

.gt-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--gt-line); }
.gt-actions .gt-btn { flex: 1 1 220px; padding: 14px 22px; font-size: 1.05rem; }

@media (max-width: 1100px) {
  .gt-info { grid-template-columns: 1fr; }
  .gt-side { position: static; order: 2; }
  .gt-info .content-card { order: 1; }
}
@media (max-width: 600px) { .gt-actions { flex-direction: column; } .gt-h1 { font-size: 1.5rem; } }

/* =====================================================================
   The application form
   ===================================================================== */
.gt-form { max-width: 1000px; margin: 0 auto; }

/* ── section blocks ─────────────────────────────────────────────── */
.gt-sec {
  background: #fff; border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius); margin-bottom: 20px; overflow: hidden;
  box-shadow: var(--gt-shadow);
}
.gt-sec-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; background: #f6f7fa;
  border-bottom: 1px solid var(--gt-line);
  border-inline-start: 4px solid var(--gt-gold);
}
.gt-sec-no {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gt-navy); color: #fff; box-shadow: 0 0 0 3px var(--gt-navy-l);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
}
.gt-sec-title { font-weight: 700; color: var(--gt-navy); font-size: 1.15rem; line-height: 1.4; }
.gt-sec-title small { display: block; font-weight: 400; color: var(--gt-mid); font-size: .9rem; }
.gt-sec-body { padding: 22px 20px; }
.gt-sub { font-weight: 700; color: var(--gt-navy); margin: 0 0 10px; font-size: .98rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gt-sub::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--gt-gold); flex: none; }
.gt-sub + .gt-grid, .gt-sub + .gt-grid-3 { margin-top: 2px; }
.gt-sub.gap { margin-top: 22px; }
.gt-sub small { font-weight: 500; color: var(--gt-soft); }

/* ── the second representative: its own numbered section ─────────
   Optional for most services; a new Ghayabi Tazkira needs two
   representatives, and while that service is ticked relationship.js
   adds gt-rep2-required — the section turns gold, the badge says so and
   the name and phone become required. */
.gt-badge {
  display: inline-block; padding: 2px 12px; border-radius: 20px;
  font-size: .82rem; font-weight: 700; vertical-align: middle; margin-inline-start: 8px; line-height: 1.7;
}
.gt-badge-req { background: var(--gt-gold); color: #fff; }
.gt-sec-rep2[hidden] { display: none; }
.gt-sec-rep2.gt-rep2-required { border: 2px solid var(--gt-gold); box-shadow: 0 0 0 4px var(--gt-gold-l), var(--gt-shadow); }
.gt-sec-rep2.gt-rep2-required .gt-sec-head { background: var(--gt-gold-l); border-bottom-color: #ecd9a4; }
.gt-sec-rep2.gt-rep2-required .gt-sec-no { background: var(--gt-gold); box-shadow: 0 0 0 3px #f3e6bf; }
.gt-sec-rep2.gt-rep2-required .gt-sec-title small { color: var(--gt-gold-d); font-weight: 700; }
.gt-sec-rep2.gt-rep2-required .gt-field label { color: var(--gt-navy-d); }
/* the older in-section block, kept for pages that still use it */
.gt-rep2 { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #cfd8e6; }
.gt-rep2-h { font-weight: 700; color: var(--gt-navy); margin-bottom: 10px; }
.gt-rep2-h small { display: block; font-weight: 400; color: var(--gt-soft); font-size: .85rem; margin-top: 2px; }
.gt-rep2-required .gt-rep2-h, .gt-rep2-required .gt-rep2-h small { color: var(--gt-gold-d); }

/* ── the appointment: gold-tinted, so it stands apart from the identity sections ── */
.gt-sec-appt .gt-sec-head { background: var(--gt-gold-l); border-bottom-color: #ecd9a4; }
.gt-sec-appt .gt-sec-no { background: var(--gt-gold); box-shadow: 0 0 0 3px #f3e6bf; }
.gt-appt-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 720px) { .gt-appt-grid { grid-template-columns: 1fr; } }
.gt-appt-summary {
  margin-top: 14px; padding: 12px 16px; border-radius: 9px; border: 1px dashed #c9d1de;
  background: #fbfcfe; color: var(--gt-soft); font-size: 1rem; line-height: 1.7;
  display: flex; align-items: center; gap: 10px;
}
.gt-appt-summary::before { content: '🗓'; font-size: 1.2rem; }
.gt-appt-summary.on { border: 2px solid var(--gt-gold); background: var(--gt-gold-l); color: var(--gt-navy-d); font-weight: 700; font-size: 1.08rem; }
.gt-appt-missing { border-color: var(--gt-bad) !important; box-shadow: 0 0 0 4px #fdf1f0, var(--gt-shadow) !important; }
.gt-appt-missing .gt-sec-head { background: #fdf1f0; }
.gt-appt-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gt-appt-days span { background: var(--gt-navy-l); color: var(--gt-navy); border-radius: 20px; padding: 1px 10px; font-size: .85rem; font-weight: 700; }

/* ── field grid ─────────────────────────────────────────────────── */
.gt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.gt-col-full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .gt-grid, .gt-grid-3 { grid-template-columns: 1fr; }
}

.gt-field { display: flex; flex-direction: column; gap: 6px; }
.gt-field label { font-weight: 700; font-size: 1rem; color: var(--gt-navy); }
.gt-field label .req { color: var(--gt-bad); }
.gt-field label small { font-weight: 400; color: var(--gt-soft); }
.gt-field .hint { font-size: .88rem; color: var(--gt-soft); line-height: 1.6; }

.gt-field input[type=text], .gt-field input[type=email], .gt-field input[type=tel],
.gt-field input[type=date], .gt-field input[type=number], .gt-field input[type=file],
.gt-field select, .gt-field textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 1rem;
  border: 1px solid #c9d1de; border-radius: 8px; background: #fff; color: var(--gt-ink);
  transition: border-color .15s, box-shadow .15s;
}
.gt-field input[type=file] { padding: 8px 10px; background: #fbfcfe; }
.gt-field input:focus, .gt-field select:focus, .gt-field textarea:focus {
  outline: none; border-color: var(--gt-navy);
  box-shadow: 0 0 0 3px rgba(31,72,151,.15);
}
.gt-field input.gt-bad, .gt-field select.gt-bad { border-color: var(--gt-bad); background: #fdf1f0; }
.gt-field textarea { min-height: 84px; resize: vertical; }
.gt-field select:disabled { background: #f3f4f6; color: var(--gt-soft); }

/* ── checkbox / radio cards ─────────────────────────────────────── */
.gt-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 860px) { .gt-checks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gt-checks { grid-template-columns: 1fr; } }

.gt-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid #c9d1de; border-radius: 9px;
  background: #fbfcfe; cursor: pointer; transition: border-color .15s, background .15s;
}
.gt-check:hover { border-color: var(--gt-gold); }
.gt-check input { margin: 4px 0 0; width: 18px; height: 18px; flex: none; cursor: pointer; accent-color: var(--gt-navy); }
.gt-check span { font-size: 1rem; line-height: 1.55; }
.gt-check span small { display: block; color: var(--gt-soft); font-size: .85rem; }
.gt-check.on { border-color: var(--gt-navy); background: var(--gt-navy-l); }

/* ── biometric photo ───────────────────────────────────────────── */
.gt-photo-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
@media (max-width: 780px) { .gt-photo-wrap { grid-template-columns: 1fr; } }

.gt-photo-stage {
  position: relative; width: 100%; aspect-ratio: 35 / 45;
  background: #eef1f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M0 0h8v8H0zM8 8h8v8H8z' fill='%23e2e8f1'/></svg>");
  border: 2px dashed #b9c6da; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.gt-photo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.gt-photo-stage.has-img canvas { display: block; }
.gt-photo-stage.has-img .gt-photo-empty { display: none; }
.gt-photo-empty { padding: 16px; color: var(--gt-soft); font-size: .9rem; line-height: 1.6; }

/* head-position guide drawn over the live crop */
.gt-photo-guide { position: absolute; inset: 0; pointer-events: none; display: none; }
.gt-photo-stage.has-img .gt-photo-guide { display: block; }

.gt-photo-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gt-photo-controls input[type=range] { width: 100%; accent-color: var(--gt-navy); }
.gt-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.gt-photo-check {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: .9rem; line-height: 1.6; display: none;
}
.gt-photo-check.ok   { display: block; background: #eef7f1; border: 1px solid #c2e0cd; color: #14562f; }
.gt-photo-check.warn { display: block; background: #fdf5e9; border: 1px solid #f0d9b5; color: #7c4a06; }
.gt-photo-check.bad  { display: block; background: #fdf1f0; border: 1px solid #f2c9c5; color: #8c1d18; }

/* the worked example: correct framing + what gets rejected */
.gt-photo-rules { font-size: .92rem; line-height: 1.8; color: var(--gt-mid); }
.gt-photo-rules ul { margin: 8px 0 0; padding-inline-start: 20px; }
.gt-photo-rules li { margin-bottom: 4px; }
.gt-samples { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.gt-sample { text-align: center; font-size: .8rem; color: var(--gt-mid); width: 92px; }
.gt-sample svg { width: 92px; height: 118px; border-radius: 5px; display: block; }
.gt-sample b { display: block; margin-top: 5px; font-weight: 700; }
.gt-sample.good b { color: var(--gt-ok); }
.gt-sample.bad  b { color: var(--gt-bad); }

/* ── signature ─────────────────────────────────────────────────── */
.gt-sig-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.gt-sig-tab {
  padding: 8px 16px; border: 1px solid #c9d1de; border-radius: 8px;
  background: #fff; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--gt-gold-d);
}
.gt-sig-tab.on { background: var(--gt-navy); color: #fff; border-color: var(--gt-navy); }
.gt-sig-panel { display: none; }
.gt-sig-panel.on { display: block; }

.gt-sig-pad {
  width: 100%; max-width: 520px; height: 190px; background: #fff;
  border: 2px dashed #b9c6da; border-radius: 8px; touch-action: none; cursor: crosshair;
  display: block;
}
.gt-sig-pad.signed { border-style: solid; border-color: var(--gt-ok); }
.gt-sig-note { font-size: .88rem; color: var(--gt-soft); margin-top: 8px; }

/* ── buttons ───────────────────────────────────────────────────── */
.gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px;
  border: none; border-radius: 8px; font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.gt-btn-primary { background: var(--gt-navy); color: #fff; box-shadow: 0 3px 10px rgba(31,72,151,.25); }
.gt-btn-primary:hover { background: var(--gt-gold); color: #fff; transform: translateY(-1px); }
.gt-btn-gold { background: var(--gt-gold); color: #fff; box-shadow: 0 3px 10px rgba(174,137,37,.3); }
.gt-btn-gold:hover { background: var(--gt-navy); transform: translateY(-1px); }
.gt-btn-ghost { background: #fff; color: var(--gt-navy); border: 1px solid var(--gt-navy); }
.gt-btn-ghost:hover { background: var(--gt-navy-l); }
.gt-btn-sm { padding: 7px 14px; font-size: .9rem; }
.gt-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── notices ───────────────────────────────────────────────────── */
.gt-note {
  padding: 14px 18px; border-radius: var(--gt-radius); margin-bottom: 16px;
  line-height: 1.8; font-size: 1rem;
  border-inline-start: 4px solid var(--gt-navy); background: var(--gt-navy-l); color: var(--gt-navy-d);
}
.gt-note.warn { border-inline-start-color: var(--gt-gold); background: var(--gt-gold-l); color: #6b5312; }
.gt-note.bad  { border-inline-start-color: var(--gt-bad); background: #fdf1f0; color: #8c1d18; }
.gt-note.good { border-inline-start-color: var(--gt-ok); background: #eef7f1; color: #14562f; }
.gt-note ul, .gt-note ol { margin: 8px 0 0; padding-inline-start: 20px; }
.gt-note strong { font-weight: 700; }
.gt-note a { color: inherit; }

.gt-staff-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--gt-radius); margin-bottom: 16px;
  background: var(--gt-navy) var(--gt-flower) center / 160px repeat; color: #fff; font-size: .95rem;
  border-bottom: 3px solid var(--gt-gold);
}
.gt-staff-bar b { font-weight: 700; }
.gt-staff-bar a { color: #f3e6bf; }
.gt-staff-bar select {
  padding: 6px 10px; border-radius: 6px; border: 1px solid #3d5f92;
  background: #fff; color: var(--gt-ink); font: inherit; font-size: .9rem;
}

/* the one-time language reminder */
.gt-lang-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(15,42,94,.62); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gt-lang-modal-box { background: #fff; border-radius: 14px; max-width: 460px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; border-top: 5px solid var(--gt-gold); }
.gt-lang-modal-box p { margin: 0 0 12px; line-height: 1.9; font-size: 1rem; color: var(--gt-navy-d); }
.gt-lang-modal-box p:last-of-type { margin-bottom: 20px; }

/* ── declaration ───────────────────────────────────────────────── */
.gt-declare {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid #c9d1de; border-radius: 9px;
  background: #fbfcfe; margin-bottom: 10px;
}
.gt-declare input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--gt-navy); }
.gt-declare span { font-size: 1rem; line-height: 1.8; }

.gt-submit-bar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid var(--gt-line); margin-top: 4px;
}
.gt-submit-bar .gt-btn-primary { padding: 14px 32px; font-size: 1.1rem; }

/* honeypot — never shown to a human.
   No left:-9999px: that pushed the element far outside the viewport,
   which on mobile makes the whole page horizontally scrollable — drag
   sideways and you land on blank space past the real content. The 1x1
   box with overflow:hidden already hides it from a sighted visitor;
   spam bots still find the input by name in the HTML either way. */
.gt-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   The confirmation page (ghayabi-tazkira-success.php)
   ===================================================================== */
.gt-done { max-width: 780px; margin: 0 auto; text-align: center; }
.gt-tick {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
  background: #eef7f1; border: 3px solid var(--gt-ok); color: var(--gt-ok);
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem; font-weight: 700;
}
.gt-done-h { color: var(--gt-navy); font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.gt-done-p { color: var(--gt-mid); line-height: 1.8; margin: 0 0 14px; }
.gt-appno {
  display: inline-block; margin: 6px 0 4px; padding: 14px 32px;
  background: var(--gt-navy); color: #fff; border-radius: var(--gt-radius);
  font-size: 1.8rem; font-weight: 700; letter-spacing: .06em; box-shadow: var(--gt-shadow-2);
  font-family: ui-monospace, Consolas, monospace; direction: ltr; border-bottom: 4px solid var(--gt-gold);
}
.gt-qr { margin: 22px auto 8px; width: 190px; }
.gt-qr svg { width: 100%; height: auto; display: block; border: 1px solid var(--gt-line); border-radius: 8px; padding: 6px; background: #fff; }
.gt-summary {
  text-align: start; background: #fbfcfe; border: 1px solid var(--gt-line); border-radius: var(--gt-radius);
  padding: 18px 22px; margin: 24px 0;
}
.gt-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.gt-summary dt { font-weight: 700; color: var(--gt-mid); font-size: .92rem; }
.gt-summary dd { margin: 0; font-weight: 700; color: var(--gt-ink); font-size: .95rem; }
.gt-appt-card {
  text-align: start; margin: 24px 0; padding: 20px 22px; border-radius: var(--gt-radius);
  border: 2px solid var(--gt-gold); background: #fff; box-shadow: 0 0 0 4px var(--gt-gold-l), var(--gt-shadow);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center;
}
.gt-appt-card .ic { grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; background: var(--gt-gold-l); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.gt-appt-card .l { color: var(--gt-gold-d); font-weight: 700; font-size: .95rem; }
.gt-appt-card .v { color: var(--gt-navy); font-weight: 700; font-size: 1.35rem; line-height: 1.5; }
.gt-appt-card .n { grid-column: 1 / -1; color: var(--gt-mid); font-size: .95rem; line-height: 1.75; margin-top: 6px; border-top: 1px dashed #ecd9a4; padding-top: 10px; }
.gt-next { text-align: start; }
.gt-next ol { padding-inline-start: 22px; line-height: 1.9; }
.gt-done .gt-actions { justify-content: center; }
@media print { .page-header, .breadcrumb, .gt-actions, footer, .site-footer, .m-nav, .announce-bar { display: none !important; } .consular-layout { background: #fff; padding: 0; } .content-card { box-shadow: none; } }

/* =====================================================================
   The tracking page (gt-track.php)
   ===================================================================== */
.gt-tr { max-width: 760px; margin: 0 auto; }
.gt-tr-form {
  background: #fff; border: 1px solid var(--gt-line); border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow); padding: 22px; margin-bottom: 22px;
}
.gt-tr-form .gt-field { margin-bottom: 14px; }
.gt-tr-form input[name=number] { font-size: 1.25rem; letter-spacing: .03em; }
.gt-tr-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--gt-navy); font-size: 1.3rem; font-weight: 700; }
.gt-tr-h .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gt-navy-l); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.gt-result {
  border: 2px solid var(--gt-gold); border-radius: var(--gt-radius); background: #fff;
  box-shadow: 0 0 0 4px var(--gt-gold-l), var(--gt-shadow); padding: 22px; margin-bottom: 22px;
}
.gt-result dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 16px; align-items: baseline; }
.gt-result dt { color: var(--gt-mid); font-size: .95rem; }
.gt-result dd { margin: 0; font-weight: 700; color: var(--gt-ink); }
.gt-result dd.big { font-size: 1.8rem; color: var(--gt-navy); line-height: 1.3; }
.gt-result .gt-btn { width: 100%; font-size: 1.1rem; padding: 14px 20px; }
.gt-result .gt-after { margin: 14px 0 0; font-size: .92rem; color: var(--gt-mid); line-height: 1.7; }
.gt-guide { background: #fff; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow); padding: 22px; margin-bottom: 22px; }
.gt-steps { list-style: none; margin: 0; padding: 0; counter-reset: gtstep; }
.gt-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid #eceff4; line-height: 1.8; }
.gt-steps li:first-child { border-top: none; padding-top: 4px; }
.gt-steps li::before {
  counter-increment: gtstep; content: counter(gtstep);
  width: 36px; height: 36px; border-radius: 50%; background: var(--gt-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; margin-top: 4px;
}
html[dir="rtl"] .gt-steps li::before { content: counter(gtstep, persian); }
.gt-steps b { color: var(--gt-navy); }
.gt-steps .gt-key { display: inline-block; background: var(--gt-gold-l); border: 1px solid #ecd9a4; border-radius: 6px; padding: 0 8px; color: var(--gt-gold-d); font-weight: 700; }
.gt-steps .gt-btn { margin-top: 8px; }
.gt-link-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .95rem; color: var(--gt-mid); }
.gt-link-row code { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; background: #f3f4f6; padding: 2px 8px; border-radius: 6px; }
@media (max-width: 560px) {
  .gt-result dl { grid-template-columns: 1fr; gap: 2px 0; }
  .gt-result dt { margin-top: 8px; }
  .gt-steps li { grid-template-columns: 32px 1fr; gap: 10px; }
  .gt-steps li::before { width: 30px; height: 30px; font-size: .9rem; }
  .gt-appt-card { grid-template-columns: 1fr; text-align: center; }
  .gt-appt-card .ic { grid-row: auto; margin: 0 auto; }
}

/* =====================================================================
   The biometric-photo guide (ghayabi/photo-guide.php): compact, beside the frame
   ===================================================================== */
.pg { border: 1px solid var(--gt-line); border-radius: var(--gt-radius); padding: 12px 12px 10px; background: #fff; min-width: 0; }
.pg-image img { width: 100%; height: auto; display: block; border-radius: 10px; }
.pg-req { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; margin-bottom: 10px; }
.pg-req-i { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; font-size: .78rem; line-height: 1.4; color: var(--gt-mid); text-align: start; }
.pg-req-i .pg-ic { font-size: 1.15rem; line-height: 1; grid-row: span 2; }
.pg-req-i b { display: block; color: var(--gt-navy); font-size: .84rem; }
.pg-h { display: inline-block; padding: 3px 12px; border-radius: 20px; color: #fff; font-weight: 700; font-size: .84rem; margin: 4px 0 8px; }
.pg-h.ok { background: var(--gt-ok); } .pg-h.bad { background: var(--gt-bad); }
.pg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.pg-ex { text-align: center; font-size: .74rem; color: var(--gt-mid); min-width: 0; }
.pg-ex svg { width: 100%; max-width: 68px; aspect-ratio: 70 / 90; display: block; margin: 0 auto; border-radius: 5px; border: 2px solid var(--gt-ok); }
.pg-ex.bad svg { border-color: var(--gt-bad); }
.pg-ex span { display: block; margin-top: 3px; color: var(--gt-bad); font-weight: 700; line-height: 1.3; }
.pg-bottom { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 4px; }
.pg-dim, .pg-notes { background: var(--gt-navy-l); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.pg-dim > b, .pg-notes > b { display: block; color: var(--gt-navy); margin-bottom: 6px; font-size: .86rem; }
.pg-dim-fig { display: grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: center; justify-items: center; }
.pg-dim-photo svg { width: 64px; aspect-ratio: 70 / 90; border: 1px solid #94a3b8; display: block; }
.pg-dim-h { font-weight: 700; color: var(--gt-navy); grid-column: 2; grid-row: 1; justify-self: start; font-size: .84rem; white-space: nowrap; }
.pg-dim-w { font-weight: 700; color: var(--gt-navy); grid-column: 1; grid-row: 2; font-size: .84rem; white-space: nowrap; }
.pg-dim-head { font-size: .76rem; color: var(--gt-mid); grid-column: 1 / -1; grid-row: 3; line-height: 1.5; }
.pg-notes ul { margin: 0; padding-inline-start: 16px; font-size: .8rem; line-height: 1.7; color: #334155; }
@media (max-width: 780px) {
  .pg { margin-top: 14px; }
  .pg-req { grid-template-columns: repeat(2, 1fr); }
  .pg-bottom { grid-template-columns: 1fr; }
  .pg-ex svg { max-width: 84px; }
}

/* the second representative's section catches the eye the moment the
   new-Tazkira service is ticked (relationship.js adds the class briefly) */
@keyframes gt-rep2-flash { 0% { box-shadow: 0 0 0 0 rgba(174,137,37,.55); } 100% { box-shadow: 0 0 0 18px rgba(174,137,37,0); } }
.gt-sec-rep2.gt-rep2-flash { animation: gt-rep2-flash 1.4s ease-out; }

/* ── Dari / Pashto only (sections ۱, ۳-Afghanistan, ۵, ۶) ────────────
   The pill in the heading, the red line under it, and the field that
   just had Latin letters removed by dari-only.js. */
.gt-badge-lang { background: var(--gt-navy-l); color: var(--gt-navy); border: 1px solid #c9d6f2; }
.gt-lang-must { display: block; color: #8c1d18; font-weight: 700; font-size: .92rem; margin-top: 3px; }
.gt-sub .gt-lang-must { flex-basis: 100%; margin: 0; padding-inline-start: 18px; font-size: .88rem; }
.gt-field input.gt-script-bad, .gt-field textarea.gt-script-bad { border-color: #b3261e; background: #fdf1f0; }
.gt-script-warn { font-size: .86rem; color: #8c1d18; font-weight: 700; }

/* ── the signature frame: larger, framed like the passport portal's ──
   A navy frame with the label in the corner and a dashed baseline;
   2.6:1 on a desk, 2:1 on a phone. */
.gt-sig-frame {
  position: relative; max-width: 760px;
  border: 3px solid var(--gt-navy); border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31,72,151,.12);
}
.gt-sig-frame::after {
  content: ''; position: absolute; left: 7%; right: 7%; bottom: 24%;
  border-bottom: 1px dashed rgba(31,72,151,.35); pointer-events: none;
}
.gt-sig-frame-label {
  position: absolute; top: 6px; inset-inline-start: 12px; font-size: .85rem;
  color: rgba(31,72,151,.6); pointer-events: none; user-select: none;
}
.gt-sig-frame .gt-sig-pad {
  max-width: none; height: auto; aspect-ratio: 2.6 / 1; min-height: 0;
  border: 0; border-radius: 9px; background: transparent;
}
.gt-sig-frame:has(.gt-sig-pad.signed) { border-color: var(--gt-ok); }
@media (max-width: 640px) {
  .gt-sig-frame { margin-inline: -4px; }
  .gt-sig-frame .gt-sig-pad { aspect-ratio: 2 / 1; min-height: 170px; }
}