:root {
  --navy: #0b2545;
  --navy-light: #13315c;
  --gold: #c99a2e;
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --text: #1c1c1c;
  --muted: #5a6270;
  --border: #e2e5ea;
  --green: #1e7a3d;
  --link-blue: #1a4799;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

header {
  background: var(--navy);
  color: white;
  padding: 0;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo .accent { color: var(--gold); }

nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

nav a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s;
}

nav a:hover { background: rgba(255,255,255,0.1); color: white; }
nav a.active { background: var(--gold); color: var(--navy); }

.cta-btn {
  background: var(--gold);
  color: var(--navy) !important;
  font-weight: 700;
}

#lang-switch {
  margin-left: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 0.88rem;
  font-weight: 600;
}

#lang-switch option { color: var(--text); }

.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: white;
  padding: 48px 24px 56px;
  text-align: center;
}

.hero h1 { font-size: 2rem; margin: 0 0 10px; }
.hero p { color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

main {
  max-width: 1100px;
  margin: -32px auto 0;
  padding: 0 24px 60px;
}

.controls {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 24px;
}

.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

select, input[type="text"], input[type="email"], input[type="tel"] {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  color: var(--text);
}

select:focus, input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* eSubmission: shown only when allowed (~7% of tenders), so it reads as a
   feature rather than labelling the other 93% as a limitation. */
.esub-badge {
  background: #e3f5e8; color: #1c6b34;
  border-radius: 20px; padding: 2px 9px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}

.checkbox-field {
  display: flex !important; flex-direction: row !important; align-items: center;
  gap: 8px; text-transform: none !important; letter-spacing: normal !important;
  font-size: 0.88rem !important; font-weight: 600; color: var(--navy) !important;
  cursor: pointer; padding-bottom: 9px; white-space: nowrap;
}
.checkbox-field input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--navy); }

/* Tender documents in the detail popup. */
.modal-docs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.doc-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-bottom: 6px;
  background: #f7f9fc; border: 1px solid var(--border); border-radius: 7px;
  text-decoration: none; color: var(--navy); font-size: 0.87rem;
  transition: background 0.12s, border-color 0.12s;
}
.doc-link:hover { background: #eef2f7; border-color: #c7cedb; }
.doc-icon { flex: 0 0 auto; }
.doc-name { flex: 1; min-width: 0; word-break: break-word; }
.doc-main {
  flex: 0 0 auto; background: var(--gold); color: #3a2a00;
  border-radius: 4px; padding: 1px 7px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
}
.doc-note { margin: 8px 0 0; font-size: 0.76rem; color: var(--muted); line-height: 1.45; }

/* Searchable Department / Municipality filter. A plain <select> can't be
   typed into, and tenders carry ~390 distinct entries -- unusable by
   scrolling. This is an input plus a filtered listbox behaving like a
   combobox. */
.combo { position: relative; }

.combo input {
  width: 100%;
  padding: 9px 30px 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
}
.combo input:focus { outline: 2px solid var(--navy-light); outline-offset: -1px; }

.combo .caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); font-size: 0.7rem;
}

.combo-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11,37,69,0.14);
  display: none;
}
.combo-list.open { display: block; }

.combo-list div {
  padding: 8px 12px; font-size: 0.88rem; cursor: pointer;
  border-bottom: 1px solid #f0f2f6;
}
.combo-list div:last-child { border-bottom: none; }
.combo-list div:hover, .combo-list div.active { background: #eef2f7; }
.combo-list div.chosen { font-weight: 700; color: var(--navy); }
.combo-list .none { color: var(--muted); cursor: default; font-style: italic; }
.combo-list mark { background: #ffe9a8; color: inherit; padding: 0; }

.combo-count {
  font-size: 0.74rem; color: var(--muted); padding: 6px 12px;
  background: #fafbfc; border-bottom: 1px solid #f0f2f6;
  position: sticky; top: 0;
}

.result-count {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.result-count strong { color: var(--navy); }

/* Dense list rows. The icon tile the cards used to carry was decorative --
   dropping it fits noticeably more listings per screen, which is what
   matters when someone is scanning forty of them. Every fact now sits on
   one wrapping meta line instead of stacked paragraphs. */
.card-list { display: flex; flex-direction: column; gap: 10px; }

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.card:hover { box-shadow: 0 4px 16px rgba(11,37,69,0.1); border-color: #c7cedb; }
.card:hover { border-left-color: var(--navy); }

/* Closing within a week -- the left edge carries the warning even before
   you read the pill. */
.card.card-urgent { border-left-color: #c0392b; }

.card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--navy);
  padding-right: 96px;          /* clear of the days-left pill */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.meta-ref { font-weight: 700; color: #46506a; white-space: nowrap; }

/* Days-left pill, top-right. Red inside a week, amber inside three. */
.days-pill {
  position: absolute;
  top: 13px;
  right: 14px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: #eef2f7;
  color: #46506a;
  white-space: nowrap;
}
.days-pill.soon   { background: #fff4e0; color: #8a5a00; }
.days-pill.urgent { background: #fdecea; color: #c0392b; }

.new-flag {
  display: inline-block;
  background: var(--gold);
  color: #3a2a00;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-right: 7px;
}

/* Narrow screens: the pill would crowd a wrapped title, so let it sit
   inline above the heading instead of floating over it. */
@media (max-width: 560px) {
  .card h3 { padding-right: 0; }
  .days-pill { position: static; display: inline-block; margin-bottom: 8px; }
}

.province-pill {
  display: inline-block;
  background: #e6f2f4;
  color: #146c7a;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.card-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 10px 3px 8px;
  border-radius: 0 0 8px 0;
}

.tag {
  display: inline-block;
  background: #eef2f9;
  color: var(--navy);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 0.78rem;
  font-weight: 600;
}

.closing-soon { color: #b8460e; font-weight: 700; }

@media (max-width: 560px) {
  .card { flex-wrap: wrap; }
  .card-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; order: 3; }
  .card-thumb { width: 40px; height: 40px; font-size: 1.2rem; }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 24px;
  font-size: 0.85rem;
  margin-top: 40px;
}

footer a { color: var(--gold); }

.footer-follow {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-follow a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.85rem;
}

.footer-follow a:hover { color: var(--gold); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.page-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s;
}

.page-btn:hover:not(:disabled) { background: var(--bg); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.page-indicator { font-size: 0.9rem; color: var(--muted); }

/* ---------- Detail modal ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 69, 0.55);
  z-index: 100;
  padding: 24px;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.modal-overlay.open { display: flex; }

.modal-panel {
  background: var(--card-bg);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  margin: 32px auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: white;
  padding: 22px 56px 22px 24px;
  position: relative;
}

.modal-header h2 { margin: 0; font-size: 1.25rem; line-height: 1.35; }
.modal-header .modal-tag {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255,255,255,0.15);
  color: white;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.modal-close:hover { background: rgba(255,255,255,0.25); }

.modal-body { padding: 22px 24px 6px; }

.modal-field {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.modal-field:last-child { border-bottom: none; }

.modal-field .modal-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.modal-field .modal-value { font-size: 0.98rem; color: var(--text); }
.modal-field .modal-value.closing-soon { color: #b8460e; font-weight: 700; }

.modal-requirements {
  margin: 6px 0 16px;
  padding: 14px 16px;
  background: #f7f4ea;
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
}

.modal-requirements .modal-label { color: #8a6d1a; }
.modal-requirements .modal-value { color: var(--text); }

.modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: filter 0.15s;
}

.modal-source-btn:hover { filter: brightness(0.94); }

.modal-no-source {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
  padding: 11px 0;
}

@media (max-width: 640px) {
  .modal-overlay { padding: 0; }
  .modal-panel { margin: 0; min-height: 100%; border-radius: 0; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 1.5rem; }
  .header-inner { justify-content: center; text-align: center; }
  nav { justify-content: center; }
}

/* ------------------------------------------------------------------
   Province sidebar + results layout
   The province counts were previously a dropdown, which hid how much
   is actually available per province. As a sticky side panel the
   visitor can see the distribution and filter in one click.
   Counts reflect the OTHER active filters, so a number always matches
   what clicking it will actually return.
   ------------------------------------------------------------------ */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 22px;
  align-items: start;
}
.sidebar { position: sticky; top: 16px; }
.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.panel-head {
  padding: 11px 15px;
  background: var(--navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.prov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eef1f5;
  transition: background .12s;
}
.prov-row:last-of-type { border-bottom: none; }
.prov-row:hover { background: #f5f8fc; }
.prov-row.active { background: #eef4ff; box-shadow: inset 3px 0 0 var(--navy); }
.prov-name { font-weight: 600; font-size: .9rem; color: #22304a; line-height: 1.3; }
.prov-row.active .prov-name { font-weight: 700; color: var(--navy); }
.prov-count {
  flex: 0 0 auto;
  background: #1f7ae0;
  color: #fff;
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .71rem;
  font-weight: 700;
  white-space: nowrap;
}
.prov-row.active .prov-count { background: var(--navy); }
.prov-all { font-weight: 700; color: var(--navy); }

/* Card titles arrive in ALL CAPS roughly 6 times out of 10. Shouting at
   the visitor down a long list is hard to scan, so they are rendered at a
   calmer weight and normal case by readableTitle() in app.js. */
.card h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  text-transform: none;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .panel { max-height: 260px; overflow-y: auto; }
}

/* ------------------------------------------------------------------
   Document list + inline PDF viewer
   ------------------------------------------------------------------ */
.doc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 7px;
  background: #fff;
}
.doc-link .doc-name { flex: 1; font-size: .88rem; word-break: break-word; }
.doc-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-btn {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
}
.doc-btn:hover { background: #eef4ff; }
.doc-download { background: var(--navy); color: #fff; }
.doc-download:hover { background: #16233b; color: #fff; }

.doc-viewer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 32, .72);
  z-index: 1200;
  padding: 24px;
}
.doc-viewer-overlay.open { display: flex; align-items: center; justify-content: center; }
.doc-viewer {
  background: #fff;
  border-radius: 10px;
  width: min(1000px, 100%);
  height: min(90vh, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.doc-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.doc-viewer-title { font-weight: 700; color: var(--navy); font-size: .95rem; word-break: break-word; }
.doc-viewer-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.doc-viewer-close {
  background: none; border: none; font-size: 1.7rem; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0 4px;
}
.doc-viewer-close:hover { color: var(--navy); }
.doc-viewer-body { flex: 1; position: relative; background: #525659; }
.doc-viewer-body iframe { width: 100%; height: 100%; border: 0; position: relative; z-index: 1; }
/* Sits BEHIND the iframe: only visible if the iframe fails to render,
   which is what happens when the host sends X-Frame-Options. */
.doc-viewer-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 40px; text-align: center;
  color: #e8eaed; font-size: .9rem; line-height: 1.6;
}
@media (max-width: 700px) {
  .doc-viewer-overlay { padding: 0; }
  .doc-viewer { height: 100%; border-radius: 0; }
  .doc-link { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------
   Card: organisation-led layout
   The organisation is what a reader scans for first, so it is the
   heading; the tender/post description sits beneath it as body text.
   A monogram badge on the left gives each card an anchor point and a
   slot for a real logo later (see ORG_LOGOS in app.js).
   ------------------------------------------------------------------ */
.card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  padding: 14px 16px;
}
.card-body { flex: 1; min-width: 0; }
.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.card-org {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f6fd0;
  line-height: 1.3;
}
.card-ref {
  flex: 0 0 auto;
  font-size: .76rem;
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}
.card-desc {
  margin: 5px 0 9px;
  font-size: .9rem;
  line-height: 1.5;
  color: #333c4d;
  /* Two lines is enough to judge relevance; the modal has the full text. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: .8rem;
  color: var(--muted);
}
.meta-closing strong { color: #333c4d; }
.meta-salary { color: var(--muted); }
.prov-tag {
  background: #e4f3fb;
  color: #0b6a8f;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .74rem;
  font-weight: 600;
}

.org-badge {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #2b3a52;
  letter-spacing: .5px;
  border: 1px solid var(--border);
  overflow: hidden;
}
/* The monogram sits in ::before so it is revealed automatically if the
   <img> is removed by its onerror handler -- a blocked or missing logo
   degrades to correct initials instead of an empty square. */
.org-badge::before { content: attr(data-initials); }
.org-badge-img { background: #fff !important; padding: 4px; }
.org-badge-img::before { content: none; }
.org-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

.new-corner {
  position: absolute;
  top: 0;
  left: 0;
  background: #d62828;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 6px 0 6px 0;
  z-index: 2;
}

@media (max-width: 620px) {
  .org-badge { width: 42px; height: 42px; font-size: .9rem; }
  .card-top { flex-direction: column; gap: 2px; }
  .card-ref { white-space: normal; }
}

/* Compulsory briefing: the most disqualifying detail on a tender, so it
   gets the strongest treatment on the card after the days-left pill. */
.brief-badge {
  background: #fde7e7;
  color: #b02020;
  border: 1px solid #f3c6c6;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.modal-apply {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f4f8fc;
  border-left: 4px solid var(--navy);
  border-radius: 6px;
}
.modal-apply .modal-value { margin-bottom: 6px; line-height: 1.5; }
.modal-apply .modal-value:last-child { margin-bottom: 0; }
.modal-note { color: var(--muted); font-size: .88rem; }

/* ------------------------------------------------------------------
   Pagination: numbered, with a sliding window
   ------------------------------------------------------------------ */
.page-nums { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.page-num {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--border); background: #fff; color: var(--navy);
  border-radius: 6px; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.page-num:hover { background: #eef4ff; }
.page-num.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.page-gap { padding: 0 2px; color: var(--muted); }

/* ------------------------------------------------------------------
   Modal: keep it inside the viewport
   A tender with nine documents ran far past the bottom of the screen.
   The panel is now capped at the viewport height with its body scrolling
   inside, so the header and close button stay reachable.
   ------------------------------------------------------------------ */
.modal-panel {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.modal-header { flex: 0 0 auto; }
.modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Two columns of fields on wider screens -- halves the modal's height
   without shrinking anything. */
@media (min-width: 700px) {
  .modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
  .modal-body > .modal-requirements,
  .modal-body > .modal-apply,
  .modal-body > .modal-docs { grid-column: 1 / -1; }
}

/* Collapsed document list: show the first four. */
.docs-collapsed .doc-link:nth-of-type(n+5) { display: none; }
.doc-more {
  display: inline-block; margin-top: 4px;
  background: none; border: none; padding: 4px 0;
  color: #1f6fd0; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.doc-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Phones
   ------------------------------------------------------------------ */
@media (max-width: 560px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-panel { max-height: 94vh; width: 100%; border-radius: 12px 12px 0 0; }
  .modal-header h2 { font-size: 1.05rem; }
  .modal-body { padding: 16px 16px 4px; }
  .doc-link { flex-wrap: wrap; gap: 8px; }
  .doc-actions { width: 100%; justify-content: flex-end; }
  .page-btn { padding: 6px 10px; font-size: .82rem; }
  .page-num { min-width: 30px; height: 30px; font-size: .8rem; }
  .card { padding: 12px 13px; gap: 10px; }
  .card-desc { -webkit-line-clamp: 3; }
}

/* ------------------------------------------------------------------
   How-to-apply guide
   ------------------------------------------------------------------ */
.guide-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.guide-lang {
  border: 1px solid var(--border); background: #fff; color: var(--navy);
  border-radius: 20px; padding: 6px 15px; font-size: .86rem;
  font-weight: 600; cursor: pointer;
}
.guide-lang:hover { background: #eef4ff; }
.guide-lang.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.guide-card {
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--gold); border-radius: 10px; padding: 20px 22px;
}
.guide-card h2 { margin: 0 0 14px; font-size: 1.15rem; color: var(--navy); line-height: 1.3; }

.guide-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
.guide-steps li {
  position: relative; counter-increment: step;
  padding: 0 0 14px 38px; font-size: .94rem; line-height: 1.55; color: #333c4d;
}
.guide-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.guide-steps li:last-child { padding-bottom: 0; }

.guide-cta {
  display: inline-block; margin-top: 16px;
  background: var(--navy); color: #fff; text-decoration: none;
  padding: 8px 18px; border-radius: 6px; font-weight: 700; font-size: .88rem;
}
.guide-cta:hover { background: #16233b; color: #fff; }

.guide-disclaimer {
  margin: 24px 0 0; padding: 14px 16px;
  background: #fff8e6; border-left: 4px solid var(--gold); border-radius: 6px;
  font-size: .88rem; color: #6b5a1f; line-height: 1.55;
}

@media (max-width: 860px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Vacancy category tabs (vacancies page only)
   ------------------------------------------------------------------ */
.vac-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
}
.vac-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: #33415c;
  border-radius: 22px;
  padding: 7px 15px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.vac-tab:hover { background: #eef4ff; }
.vac-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.vac-tab-count {
  background: #e4ecf7;
  color: #33415c;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .74rem;
  font-weight: 700;
}
.vac-tab.active .vac-tab-count { background: rgba(255,255,255,.22); color: #fff; }

@media (max-width: 560px) {
  .vac-tabs { gap: 6px; }
  .vac-tab { padding: 6px 12px; font-size: .82rem; }
}