/* TechZoneX quote builder — design system
   Ink slate on cool paper, one emerald accent, near-black quote document.
   Display: Bricolage Grotesque · Body: Figtree · Money: IBM Plex Mono */

:root {
  --paper: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #EDF1F4;
  --ink: #101828;
  --muted: #5B6779;
  --line: #DDE3EA;
  --accent: #0B7A5C;
  --accent-soft: #E2F3EC;
  --accent-ink: #FFFFFF;
  --warn: #9A6700;
  --warn-soft: #FBF0D8;
  --doc-bg: #0E1420;
  --doc-surface: #16202F;
  --doc-ink: #E8EDF4;
  --doc-muted: #8B98AB;
  --doc-line: #26324433;
  --radius: 12px;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
}

h1, h2, h3 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; text-wrap: balance; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px;
}
.brand-dim { color: var(--muted); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.geo-chip {
  font-size: 12.5px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px;
}
.currency-switch {
  display: flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.currency-switch button {
  border: none; background: none; padding: 4px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted);
}
.currency-switch button.active { background: var(--ink); color: #fff; }

/* ---------- zatca banner ---------- */
.zatca-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1280px; margin: 14px auto 0; padding: 10px 16px;
  background: var(--warn-soft); border: 1px solid #EAD9A8; border-radius: 10px;
  font-size: 13.5px; color: #614400;
  margin-left: max(24px, calc((100% - 1280px) / 2));
  margin-right: max(24px, calc((100% - 1280px) / 2));
}
.zb-pill {
  background: var(--warn); color: #fff; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px;
}
.zatca-banner a { color: #614400; font-weight: 700; margin-left: auto; white-space: nowrap; }

/* ---------- layout ---------- */
.layout {
  max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px;
  align-items: start;
}
@media (max-width: 1020px) {
  .layout { grid-template-columns: 1fr; }
  .quotepane { position: static !important; order: 2; }
}

.hero h1 { font-size: clamp(30px, 4.5vw, 44px); margin: .2em 0 .25em; font-weight: 700; }
.hero p { color: var(--muted); max-width: 58ch; margin: 0 0 8px; font-size: 16.5px; }

/* ---------- schedules ---------- */
.sched { margin-top: 40px; }
.sched-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.sched-head h2 { font-size: 22px; margin: 0; font-weight: 650; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sched-tag {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.sched-tag-z { background: var(--accent); }
.sched-sub { color: var(--muted); margin: 4px 0 16px; max-width: 62ch; }

.chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
}
.chip-optional { background: var(--accent-soft); color: var(--accent); }
.chip-included { background: var(--accent-soft); color: var(--accent); }
.chip-soon { background: var(--surface-2); color: var(--muted); }
.dim { color: var(--muted); font-weight: 500; }

/* choice cards */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .choice-grid, .choice-grid-3 { grid-template-columns: 1fr; } }

.choice {
  display: flex; gap: 12px; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 16px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.choice:hover { border-color: #B9C4D0; }
.choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.choice input { margin-top: 4px; accent-color: var(--accent); flex: none; width: 16px; height: 16px; }
.choice-title { font-weight: 700; font-size: 15.5px; }
.choice-price { font-family: var(--mono); font-size: 13.5px; font-weight: 600; margin: 3px 0 6px; }
.choice p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* row lists */
.rowlist { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rowlist-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--surface-2);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.linkbtn { border: none; background: none; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; }

.row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 2px 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer;
  align-items: center;
}
.row:hover { background: #FAFCFD; }
.row input { accent-color: var(--accent); width: 16px; height: 16px; }
.row-name { font-weight: 650; }
.row-price { font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-desc { grid-column: 2 / 4; font-size: 13px; color: var(--muted); }
.row-included, .row-soon { cursor: default; }
.row-soon .row-name { color: var(--muted); font-weight: 600; }

/* zatca card */
.zatca-card { border-width: 2px; }
.zatca-card:has(input:checked) { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 60%); }
.zatca-points { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.zatca-points li { margin: 4px 0; }
.zatca-points em { font-style: normal; font-weight: 700; color: var(--ink); }
.zatca-branches {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13.5px;
}
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stepper button { border: none; background: var(--surface-2); width: 30px; height: 28px; font-size: 16px; }
.stepper output { font-family: var(--mono); font-weight: 600; min-width: 34px; text-align: center; }
.zatca-deadline { font-size: 13px; color: var(--warn); margin: 10px 2px 0; }

/* rates + notes */
.rates { display: grid; gap: 0; margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rates > div { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.rates > div:first-child { border-top: none; }
.rates b { font-family: var(--mono); font-size: 13px; }
.opensource-note {
  margin-top: 36px; padding: 14px 18px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 8px; font-size: 14px;
}

/* process */
.process { list-style: none; counter-reset: p; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.process li { counter-increment: p; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 13.5px; }
.process li::before {
  content: counter(p, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 6px;
}
.process b { display: block; margin-bottom: 2px; }
.process span { color: var(--muted); }

/* ---------- quote document ---------- */
.quotepane { position: sticky; top: 66px; }
.quotedoc { background: var(--doc-bg); border-radius: 16px; padding: 14px; color: var(--doc-ink); box-shadow: 0 20px 50px -20px rgb(14 20 32 / .45); }
.qd-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 4px 6px 12px; }
.qd-total { display: flex; justify-content: space-between; align-items: baseline; }
.qd-total span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--doc-muted); }
.qd-total b { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.qd-actions { display: flex; gap: 8px; }
.qd-actions button {
  flex: 1; border: 1px solid #2A3852; background: var(--doc-surface); color: var(--doc-ink);
  border-radius: 8px; padding: 8px 6px; font-size: 12.5px; font-weight: 600;
}
.qd-actions button:hover { border-color: #3D4E6E; }
.qd-actions .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }

.qd-paper { background: var(--surface); color: var(--ink); border-radius: 10px; padding: 20px 20px 14px; max-height: 62vh; overflow-y: auto; }
.qd-header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.qd-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qd-header h3 { margin: 2px 0 6px; font-size: 19px; }
.qd-prepared { border: none; border-bottom: 1px dashed var(--line); font: inherit; font-size: 13px; color: var(--ink); width: 100%; padding: 2px 0; background: none; }
.qd-prepared:focus { outline: none; border-bottom-color: var(--accent); }
.qd-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.qd-stamp { border: 1.5px solid var(--muted); border-radius: 4px; padding: 1px 6px; transform: rotate(-3deg); letter-spacing: .06em; text-transform: uppercase; }

.qd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.qd-table th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 0 4px; }
.qd-table th:last-child, .qd-table td.amt { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); white-space: nowrap; }
.qd-table td { padding: 5px 0; vertical-align: top; border-top: 1px solid #F0F3F6; }
.qd-table td .sub { display: block; font-size: 11px; color: var(--muted); }
.qd-table tr.section > td { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 14px; border-top: none; }
.qd-table tr.total > td { border-top: 2px solid var(--ink); font-weight: 700; padding-top: 8px; }
.qd-table tr.grand > td { background: var(--accent-soft); font-weight: 700; padding: 8px 6px; }
.qd-table tr.zline > td:first-child::before { content: '◆ '; color: var(--accent); }

.qd-foot { font-size: 11px; color: var(--muted); margin-top: 14px; }
.qd-foot p { margin: 4px 0; }
.qd-contact { font-family: var(--mono); font-size: 10.5px; }
.qd-cta { font-size: 12.5px; color: var(--doc-muted); padding: 12px 6px 2px; margin: 0; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line); padding: 18px 24px 40px; max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px;
}

/* ---------- print: only the quotation paper ---------- */
@media print {
  body * { visibility: hidden; }
  .qd-paper, .qd-paper * { visibility: visible; }
  .qd-paper { position: absolute; inset: 0; max-height: none; overflow: visible; border-radius: 0; }
  .quotedoc { box-shadow: none; }
}

/* capacity section */
.cap-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px}
@media (max-width:720px){.cap-grid{grid-template-columns:1fr}}
.cap-box{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.cap-label{font-weight:700;font-size:13.5px;margin-bottom:8px}
.cap-box select{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--surface);color:var(--ink)}
.cap-tier{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70%)}
.tier-chip{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;padding:4px 14px;font-weight:700;font-family:var(--mono);font-size:14px;margin-bottom:4px}

.callout-included{border:2px solid var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70%);border-radius:var(--radius);padding:14px 18px;font-size:14px}
.callout-included b{color:var(--accent)}

.country-sel{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 10px;font:inherit;font-size:12.5px}

/* order modal */
.modal-back{position:fixed;inset:0;background:rgba(15,23,19,.55);display:grid;place-items:center;z-index:90;padding:16px}
.modal{background:var(--surface);color:var(--ink);border-radius:14px;padding:26px 24px;max-width:430px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{margin:0 0 4px;font-size:19px}
.modal-sub{color:var(--muted);font-size:13.5px;margin:0 0 16px}
.modal label{display:block;font-size:13px;font-weight:600;margin:10px 0}
.modal input,.modal select{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg);color:var(--ink)}
.dm-wrap{display:flex;align-items:center;gap:6px}
.dm-wrap input{flex:1}
.dm-suffix{color:var(--muted);font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.btn-plain{background:none;border:1px solid var(--line);border-radius:8px;padding:9px 16px;font:inherit;cursor:pointer;color:var(--ink)}
.modal-err{color:#a93b2e;font-size:13px}
.modal-done{font-size:15.5px;font-weight:600}