:root {
  --ink: #191c1d;
  --ink-soft: #25292a;
  --paper: #f4eee2;
  --white: #fffdf8;
  --gold: #c8a243;
  --gold-soft: #e0c477;
  --muted: #b8b4aa;
  --line: rgba(200, 162, 67, 0.34);
}

body {
  min-height: 100vh;
  color: var(--white);
  background:
    radial-gradient(circle at 12% 8%, rgba(200, 162, 67, 0.08), transparent 26rem),
    linear-gradient(145deg, #181b1c 0%, #242829 54%, #171a1b 100%);
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
  line-height: 1.7;
}

a { color: inherit; }

header {
  color: var(--white);
  background: #1d2021;
  border-bottom: 1px solid var(--line);
}

.header-note a,
.emergency { color: var(--gold-soft); }

.eyebrow {
  color: var(--gold-soft);
  font: 700 0.8rem/1.5 "Playfair Display", Georgia, serif;
  letter-spacing: 0.1em;
}

.intro h1 {
  color: var(--white);
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
  font-size: clamp(2rem, 3.7vw, 3.1rem);
  font-weight: 800;
  line-height: 1.5;
}

.intro h1 span {
  color: var(--gold);
  font-size: 0.58em;
  font-weight: 700;
}

h2, h3 { color: var(--white); }
.intro p, .hint, .optional, .small-label, .fine { color: var(--muted); }

.builder section { border-color: var(--line); }
.num { color: var(--gold-soft); border-color: var(--gold); }

.city-screen, .welcome, .summary, .category {
  color: var(--white);
  background: var(--ink-soft);
  border-color: var(--line);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

.city-screen, .welcome, .summary { border-radius: 22px; }
.category { border-radius: 14px; }

.price, .board, .mode label, .product, .city-options label,
.paid-item, .extra, .chip {
  color: var(--white);
  background: #2b3031;
  border-color: var(--line);
  border-radius: 10px;
}

.price strong, .total strong, .total small {
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
}

.price small, .board small, .item-price, .paid-item small,
.category summary span, .summary-row span:first-child { color: var(--muted); }

.price:has(input:checked), .board:has(input:checked),
.mode label:has(input:checked), .product:has(input:checked),
.city-options label:has(input:checked), .extra:has(input:checked) {
  color: var(--ink);
  background: var(--gold-soft);
  border-color: var(--gold);
}

.price:has(input:checked) small, .board:has(input:checked) small,
.product:has(input:checked) .item-price,
.product:has(input:checked) small { color: #35312a; }

.product b, .extra b { color: var(--gold-soft); }
.product:has(input:checked) b { color: var(--ink); }
.category summary { color: var(--white); }

.included, .customer-bar, .policy {
  color: var(--white);
  background: rgba(200, 162, 67, 0.1);
  border-color: var(--line);
  border-radius: 10px;
}

.policy { border-right: 3px solid var(--gold); }
.chip { background: #323637; }
.selection-count { color: var(--ink); background: var(--gold-soft); }
.paid-section { border-color: var(--gold); }
.weight-label { color: var(--muted); border-color: var(--line); }
.summary-row { border-color: var(--line); }
.confirmation-note a { color: var(--gold-soft); }
.customer-bar button { color: var(--gold-soft); }

.steps { border-color: var(--line); }
.steps span { color: var(--muted); }
.steps .active {
  color: var(--ink);
  background: var(--gold-soft);
  border-color: var(--gold);
}

input[type="radio"], input[type="checkbox"] { accent-color: var(--gold); }

input:not([type]), input[type="text"], input[type="tel"], input[type="date"],
select, textarea, .weight-label input {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
}

input::placeholder, textarea::placeholder { color: #65615a; opacity: 1; }
.field-label { color: var(--white); }

.primary, .primary.whatsapp {
  min-height: 54px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 800;
}

.primary:hover, .primary.whatsapp:hover { background: var(--gold-soft); }

.secondary {
  min-height: 48px;
  color: var(--white);
  border-color: var(--gold);
  border-radius: 999px;
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
}

.secondary:hover { color: var(--ink); background: var(--gold-soft); }
.primary:disabled { opacity: 0.5; }

#customer-error, #selection-status { color: #ffb4a8; }
#status { color: var(--gold-soft); }

#validation-dialog {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--gold);
}

#validation-dialog h2 { color: var(--ink); }
.warning-icon { color: var(--ink); background: var(--gold-soft); }

footer {
  color: var(--muted);
  background: #101213;
  border-color: var(--line);
}

.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: var(--white);
  background: rgba(200, 162, 67, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  text-decoration: none;
}

.footer-contacts a:hover { border-color: var(--gold); }
.footer-contacts a span { color: var(--gold-soft); }
.footer-contacts bdi { white-space: nowrap; }

input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, label:has(input:focus-visible) {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .intro h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .intro h1 span { font-size: 0.64em; }
  .city-screen, .welcome, .summary { border-radius: 16px; }
  .steps span { font-size: 0.82rem; }
}