/* Basiet public web pages in the Najdi-night design (error pages, payment
   results, the marketing site). Same art as the app; the app font (Thmanyah)
   may not be served on the web (licence), so the web uses Tajawal. */

:root {
  --nj-bg: #141A33;
  --nj-bg-deep: #0E1228;
  --nj-indigo: #1B2450;
  --nj-indigo-light: #24357A;
  --nj-saffron: #F0A93B;
  --nj-gold: #F3D58E;
  --nj-burnt: #B4532A;
  --nj-burgundy: #8E2A22;
  --nj-cream: #F6E8CC;
  --nj-muted: #C9BFA8;
  --nj-ink: #1E1838;
  --nj-brown: #7A4A12;
  --nj-radius: 18px;
  --nj-font: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body.nj {
  margin: 0;
  background: var(--nj-bg);
  color: var(--nj-cream);
  font-family: var(--nj-font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.nj a { color: var(--nj-gold); }
.nj img { max-width: 100%; display: block; }
.nj h1, .nj h2, .nj h3 { line-height: 1.25; margin: 0; }

/* ── banner: the page's night picture with a shade, then the Sadu band ── */
.nj-banner { position: relative; min-height: 230px; overflow: hidden; background: var(--nj-bg-deep); }
.nj-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nj-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 28, .72) 0%, rgba(10, 13, 28, 0) 30%, rgba(20, 26, 51, .25) 62%, var(--nj-bg) 100%);
}
.nj-banner__text { position: absolute; inset-inline: 22px; bottom: 22px; z-index: 1; }
.nj-banner__text h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; color: var(--nj-cream); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.nj-banner__text p { margin: 2px 0 0; color: #E2D6BE; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }

/* thin Sadu band with hanging tassels */
.nj-fringe {
  height: 34px;
  background:
    linear-gradient(var(--nj-gold), var(--nj-gold)) top / 100% 2px no-repeat,
    linear-gradient(#24357A, #24357A) 0 4px / 100% 3px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='34'%3E%3Cpath d='M12 7v14M36 7v12' stroke='%23C9BFA8' stroke-width='1'/%3E%3Cpath d='M12 20l4 6-4 6-4-6z' fill='%23F0A93B'/%3E%3Cpath d='M36 18l3.5 5-3.5 5-3.5-5z' fill='%23F6E8CC'/%3E%3Cpath d='M24 7v8' stroke='%23C9BFA8'/%3E%3Cpath d='M24 14l3 4.5-3 4.5-3-4.5z' fill='%233A4C96'/%3E%3Cpath d='M0 7l6 4 6-4 6 4 6-4 6 4 6-4 6 4 6-4' fill='none' stroke='%23B4532A' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 48px 34px repeat-x;
}

/* ── the hanging woven cloth (rod on top, tassels below) ──
   the woven middle sits between the top and bottom pieces (sizes follow the width) */
.nj-cloth {
  position: relative; isolation: isolate;
  container-type: inline-size;
  color: var(--nj-ink);
  padding: 12.5% 7% 11%; /* % of the width */
  filter: drop-shadow(0 12px 18px rgba(4, 7, 20, .55));
}
.nj-cloth::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0;
  top: 10.9cqw; bottom: 7.6cqw;
  background: url("img/cloth-tile.webp") top center / 100% auto repeat-y;
}
.nj-cloth::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    url("img/cloth-top.webp") top center / 100% auto no-repeat,
    url("img/cloth-bottom.webp") bottom center / 100% auto no-repeat;
}

/* old parchment with a Sadu frame (descriptions) */
.nj-parch {
  color: #3A2410;
  padding: 9% 10%;
  background: url("img/x-parch2.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 14px rgba(3, 5, 16, .55));
  text-align: center;
  font-weight: 600;
}

/* beige glass card (ink text) and night glass card (cream text) */
.nj-glass-beige {
  color: var(--nj-ink);
  background: linear-gradient(180deg, rgba(252, 244, 226, .95), rgba(236, 219, 186, .9));
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--nj-radius);
  box-shadow: 0 12px 26px rgba(3, 5, 16, .45);
}
.nj-glass {
  background: linear-gradient(135deg, rgba(246, 232, 204, .1), rgba(246, 232, 204, .035));
  border: 1px solid rgba(243, 213, 142, .26);
  border-radius: var(--nj-radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

/* ── woven buttons: left cap, middle tile at its real scale, right cap ── */
.nj-btn {
  display: inline-flex; direction: ltr; align-items: stretch;
  height: 52px; text-decoration: none; cursor: pointer; border: 0; padding: 0; background: none;
  font: inherit; font-weight: 800; font-size: 16px;
  filter: drop-shadow(0 6px 9px rgba(4, 7, 20, .5));
  transition: transform .15s ease;
}
.nj-btn:active { transform: translateY(1px) scale(.99); }
.nj-btn > i { flex: none; width: 32px; background: center / auto 100% no-repeat; }
.nj-btn > span { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px; background: center / auto 100% repeat-x; white-space: nowrap; margin: 0 -1px; }
.nj-btn--block { display: flex; width: 100%; }
.nj .nj-btn--saffron, .nj-btn--saffron { color: #2E1A04; }
.nj-btn--saffron > i:first-child { background-image: url("img/cap-btn_saffron-l.webp"); }
.nj-btn--saffron > span { background-image: url("img/cap-btn_saffron-t.webp"); }
.nj-btn--saffron > i:last-child { background-image: url("img/cap-btn_saffron-r.webp"); }
.nj .nj-btn--wool, .nj-btn--wool { color: var(--nj-gold); font-size: 15px; }
.nj-btn--wool > i { width: 24px; }
.nj-btn--wool > i:first-child { background-image: url("img/cap-btn_wool2-l.webp"); }
.nj-btn--wool > span { background-image: url("img/cap-btn_wool2-t.webp"); }
.nj-btn--wool > i:last-child { background-image: url("img/cap-btn_wool2-r.webp"); }
.nj .nj-btn--indigo, .nj-btn--indigo { color: var(--nj-cream); }
.nj-btn--indigo > i { width: 34px; }
.nj-btn--indigo > i:first-child { background-image: url("img/cap-btn_indigo-l.webp"); }
.nj-btn--indigo > span { background-image: url("img/cap-btn_indigo-t.webp"); }
.nj-btn--indigo > i:last-child { background-image: url("img/cap-btn_indigo-r.webp"); }
.nj-btn--tag { height: 40px; color: var(--nj-gold); font-size: 14px; }
.nj-btn--tag > i { width: 25px; }
.nj-btn--tag > i:first-child { background-image: url("img/cap-tag_charcoal-l.webp"); }
.nj-btn--tag > span { background-image: url("img/cap-tag_charcoal-t.webp"); }
.nj-btn--tag > i:last-child { background-image: url("img/cap-tag_charcoal-r.webp"); }
.nj-btn:focus-visible { outline: 2px solid var(--nj-gold); outline-offset: 3px; border-radius: 12px; }

/* heading with the saffron diamond */
.nj-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--nj-cream); }
.nj-head::before { content: ""; width: 10px; height: 10px; background: var(--nj-saffron); transform: rotate(45deg); flex: none; }

/* the picture of an empty / error state melting into the page */
.nj-empty-img { width: min(320px, 80vw); aspect-ratio: 1; margin: 0 auto; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); object-fit: cover; }

/* simple centred page (errors, payment results) */
.nj-center { max-width: 520px; margin: 0 auto; padding: 0 18px 40px; text-align: center; }
.nj-center h2 { font-size: 24px; color: #F3E6CC; margin-top: 6px; }
.nj-center p { color: var(--nj-muted); margin: 8px 0 22px; }
.nj-code { font-size: 64px; font-weight: 900; color: var(--nj-gold); letter-spacing: 2px; text-shadow: 0 0 24px rgba(240, 169, 59, .45); line-height: 1; }
.nj-ref { display: inline-block; margin-top: 4px; padding: 10px 18px; border-radius: 14px; background: rgba(246, 232, 204, .08); border: 1px solid rgba(243, 213, 142, .25); color: var(--nj-muted); font-size: 14px; }
.nj-ref b { display: block; color: var(--nj-cream); direction: ltr; word-break: break-all; }