@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("/fonts/NotoKufiArabic-v1.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-v1.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* tokens: Mahally's rhythm (warm ground, pills, soft low shadows) in SoukArz cedar green */
:root {
  --cedar: #1e6b47;
  --cedar-dark: #154d33;
  --cedar-soft: #e7f1ec;
  --bg: #fbf7f2;
  --surface: #ffffff;
  --ink: #2d2d2d;
  --ink-2: #55575d;
  --muted: #848a98;
  --line: #e3e3ea;
  --fill: #efeff2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 18px 40px -16px rgba(30, 107, 71, 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Kufi Arabic", "Sora", system-ui, sans-serif;
  line-height: 1.6;
}
main { max-width: 720px; margin: 0 auto; padding: 12px 16px 24px; }
a { color: var(--cedar); }
h2 { font-size: 1.05rem; margin: 0 0 12px; }

/* every state change eases */
a, button, .chip, .card, input {
  transition: background-color 0.45s var(--ease-io), color 0.45s var(--ease-io), border-color 0.45s var(--ease-io),
    box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}

/* header: one row at any phone width; the category is named next to the brand */
.top { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); max-width: 720px; margin: 0 auto; }
.brand b { display: block; color: var(--cedar); font-size: 1.15rem; line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: 0.75rem; white-space: nowrap; }

/* the 3-minute card: first thing on the page, and once more lower down */
.hook { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 24px; padding: 18px; margin: 4px 0 16px; }
.hook h2 { margin: 0 0 2px; font-size: 1.15rem; }
.hook p { margin: 0; font-size: 0.85rem; }
.hook.first { background: linear-gradient(135deg, var(--cedar), var(--cedar-dark)); color: #fff; box-shadow: var(--shadow-lift); animation: rise 1.2s var(--ease) both; }
.hook.first p { opacity: 0.95; }
.hook .cod { display: block; font-size: 0.72rem; opacity: 0.7; }
.hook.second { background: var(--cedar-soft); color: var(--ink); margin-top: 28px; }
.btn { flex: none; white-space: nowrap; background: #fff; color: var(--cedar); font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 9999px; box-shadow: var(--shadow); }
.hook.second .btn { background: var(--cedar); color: #fff; }
.btn:active { transform: scale(0.97); }

/* search */
.search { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 9999px; padding: 6px; box-shadow: var(--shadow); }
.search:focus-within { border-color: var(--cedar); box-shadow: 0 0 0 3px var(--cedar-soft); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; padding: 6px 12px; color: var(--ink); }
.search button { border: 0; border-radius: 9999px; background: var(--cedar); color: #fff; font: inherit; font-weight: 700; padding: 6px 18px; cursor: pointer; }

/* sector chips: one swipeable row */
.chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; padding: 12px 0 4px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; white-space: nowrap; text-decoration: none; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 9999px; padding: 6px 14px; font-size: 0.85rem; }
.chip.on { background: var(--cedar); border-color: var(--cedar); color: #fff; }

.block { margin-top: 20px; }
.count { display: inline-block; min-width: 1.6em; text-align: center; font-size: 0.8rem; background: var(--fill); color: var(--ink-2); border-radius: 9999px; padding: 0 8px; margin-inline-start: 4px; }
.empty { color: var(--muted); }

/* featured: logo cards in a swipeable row */
.row { list-style: none; margin: 0 -16px; padding: 0 16px 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.row li { flex: none; scroll-snap-align: start; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-decoration: none; color: var(--ink); font-size: 0.78rem; text-align: center; }
.logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 9999px; font-size: 1.5rem; font-weight: 700; box-shadow: var(--shadow); }

/* store cards: two columns on a phone, three on a wide screen */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.card:active { transform: scale(0.98); }
.cover { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; font-size: 2.4rem; font-weight: 700; }
.badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: rgba(255, 255, 255, 0.92); color: var(--ink-2); font-size: 0.7rem; font-weight: 600; border-radius: 9999px; padding: 1px 8px; }
.info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.name { font-weight: 700; font-size: 0.95rem; line-height: 1.4; }
.meta { color: var(--muted); font-size: 0.75rem; }
.price { color: var(--cedar); font-size: 0.8rem; font-weight: 600; margin-top: 2px; }
.hit { color: var(--ink-2); font-size: 0.75rem; background: var(--fill); border-radius: 8px; padding: 2px 8px; margin-top: 4px; align-self: flex-start; }

/* sector tints for covers and logos, until stores have photos (stage 3) */
.tint-0 { background: #eef0ee; color: #55575d; }
.tint-1 { background: #f6e6ea; color: #8a3a52; }
.tint-2 { background: #fbecd9; color: #8f5216; }
.tint-3 { background: #e9f0dc; color: #4d6420; }
.tint-4 { background: #f3e6f1; color: #7a3c70; }
.tint-5 { background: #f5efd8; color: #7b6418; }
.tint-6 { background: #f2e4da; color: #85492a; }
.tint-7 { background: #e3eef8; color: #2f5d86; }
.tint-8 { background: #e6e9f2; color: #3d4a6b; }
.tint-9 { background: #ece8df; color: #5f5440; }
.tint-10 { background: #fde8e3; color: #a2402c; }
.tint-11 { background: #e0f2ec; color: #1e6b47; }
.tint-12 { background: #ebe7f5; color: #4f3f86; }

.foot { max-width: 720px; margin: 0 auto; padding: 16px 16px 40px; color: var(--muted); font-size: 0.75rem; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 4px; }

/* store page (stage 6 replaces this) */
.store h1 { color: var(--cedar); margin-bottom: 0; }
.store .meta { margin-top: 0; }
.note { background: var(--fill); color: var(--ink-2); border-radius: 12px; padding: 8px 12px; font-size: 0.85rem; }
.products { list-style: none; padding: 0; display: grid; gap: 8px; }
.products li { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.products b { color: var(--cedar); white-space: nowrap; }

/* photo upload: the signup screen's two photo fields, the QR panel (computers only), and the phone page */
.upload-screen h1 { font-size: 1.3rem; margin: 8px 0 4px; }
.upload-screen .note { color: var(--ink-2); margin: 0 0 16px; }
.upload-layout { display: grid; gap: 16px; }
@media (min-width: 860px) { .upload-screen { max-width: 980px; } .upload-layout { grid-template-columns: 1fr 300px; align-items: start; } }
.field { background: var(--surface); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; border: 2px dashed transparent; }
.field.over { border-color: var(--cedar); background: var(--cedar-soft); }
.field h2 small { color: var(--muted); font-weight: 400; font-size: 0.75rem; margin-inline-start: 6px; }
.logo-row { display: flex; align-items: center; gap: 16px; }
.logo-slot { position: relative; width: 88px; height: 88px; flex: none; border-radius: 9999px; overflow: hidden; background: var(--fill); display: grid; place-items: center; }
.logo-slot img { width: 100%; height: 100%; object-fit: cover; }
.logo-slot .placeholder { color: var(--muted); font-size: 0.7rem; text-align: center; padding: 8px; }
.pick { display: inline-block; cursor: pointer; background: var(--cedar-soft); color: var(--cedar); font-weight: 700; border-radius: 9999px; padding: 8px 18px; white-space: nowrap; }
.pick.wide { display: block; text-align: center; margin-top: 12px; }
.hint { color: var(--muted); font-size: 0.8rem; text-align: center; margin: 8px 0 0; }
.desktop-only { display: none; }
@media (hover: hover) and (pointer: fine) { .desktop-only { display: block; } .qr-panel[hidden] { display: none; } }

/* the photo strip: swipe sideways, the first photo is the cover */
.strip { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; min-height: 8px; }
.strip::-webkit-scrollbar { display: none; }
.strip li { position: relative; flex: none; width: 120px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fill); scroll-snap-align: start; }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip li.is-cover { outline: 3px solid var(--cedar); outline-offset: -3px; }
.cover-tag { display: none; position: absolute; inset-block-end: 6px; inset-inline-start: 6px; background: var(--cedar); color: #fff; font-size: 0.7rem; border-radius: 9999px; padding: 0 8px; }
.is-cover .cover-tag { display: block; }
.strip .x { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 28px; height: 28px; border: 0; border-radius: 9999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.strip .star { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.92); color: var(--cedar); font: inherit; font-size: 0.68rem; padding: 0 8px; cursor: pointer; }
.is-cover .star { display: none; }
.strip li.leaving { animation: swap-out 0.45s var(--ease-io) both; pointer-events: none; }
.pending img { opacity: 0.55; }
.progress { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; transform: rotate(-90deg); }
.progress .track { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 4; }
.progress .fill { fill: none; stroke: var(--cedar); stroke-width: 4; stroke-linecap: round; }

.qr-panel { background: var(--surface); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); text-align: center; }
.qr-panel p { color: var(--ink-2); font-size: 0.85rem; }
.qr svg { width: 220px; height: 220px; display: block; margin: 0 auto; }
.live { color: var(--cedar) !important; }

.error { display: none; background: #fdecec; color: #b3261e; border-radius: 12px; padding: 10px 14px; font-size: 0.9rem; }
.error.on { display: block; animation: xfade 0.5s var(--ease) both; }

.phone .big { display: block; text-align: center; cursor: pointer; background: var(--cedar); color: #fff; font-weight: 700; font-size: 1.15rem; border-radius: 20px; padding: 22px; margin-bottom: 12px; box-shadow: var(--shadow-lift); }
.phone .big.alt { background: var(--surface); color: var(--cedar); box-shadow: var(--shadow); }
.phone .big.off { opacity: 0.4; pointer-events: none; }
.done { color: var(--cedar); font-weight: 700; min-height: 1.6em; }

/* zoom and crop editor: a sheet over the page; the square is what will be uploaded */
html.editing { overflow: hidden; }
.editor { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; background: rgba(20, 30, 25, 0.55); animation: xfade 0.45s var(--ease) both; }
@media (min-width: 640px) { .editor { place-items: center; } }
.editor.out { animation: swap-out 0.45s var(--ease-io) both; }
.editor-card { width: min(440px, 100%); background: var(--surface); border-radius: 24px 24px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: rise 0.7s var(--ease) both; }
@media (min-width: 640px) { .editor-card { border-radius: 24px; } }
.editor-card h2 { margin: 0 0 12px; text-align: center; }
.stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--fill); touch-action: none; }
.stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.stage.round::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.55); pointer-events: none; }
.zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; color: var(--ink-2); font-size: 0.85rem; }
.zoom input { flex: 1; accent-color: var(--cedar); }
.editor-hint { color: var(--muted); font-size: 0.75rem; text-align: center; margin: 4px 0 12px; }
.editor-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.editor-actions button { border: 0; border-radius: 9999px; font: inherit; font-weight: 700; padding: 10px 8px; cursor: pointer; white-space: nowrap; }
.editor-actions .save { background: var(--cedar); color: #fff; }
.editor-actions .whole { background: var(--cedar-soft); color: var(--cedar); }
.editor-actions .cancel { background: var(--fill); color: var(--ink-2); }

/* upload toasts: a true byte meter that turns green when the photo has arrived */
.toasts { position: fixed; z-index: 50; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { width: min(420px, 100%); background: var(--surface); color: var(--ink); border-radius: 16px; padding: 10px 14px 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3); animation: rise 0.7s var(--ease) both; transition: background-color 0.45s var(--ease-io), color 0.45s var(--ease-io); }
.toast-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; margin-bottom: 6px; }
.toast-pct { font-family: "Sora", sans-serif; font-variant-numeric: tabular-nums; color: var(--cedar); }
.toast-bar { height: 6px; border-radius: 9999px; background: var(--fill); overflow: hidden; }
.toast-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2e8b5f, var(--cedar)); border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform 0.25s linear; }
.toast.ok { background: #1e8a52; color: #fff; }
.toast.ok .toast-pct { color: #fff; }
.toast.ok .toast-bar { background: rgba(255, 255, 255, 0.3); }
.toast.ok .toast-bar span { background: #fff; }
.toast.bad { background: #b3261e; color: #fff; }
.toast.bad .toast-pct { color: #fff; }
.toast.out { animation: swap-out 0.45s var(--ease-io) both; }
.ring-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Sora", sans-serif; font-size: 0.72rem; color: var(--cedar); font-variant-numeric: tabular-nums; }

/* scroll-progress button (the standing default for long pages) */
.to-top { position: fixed; z-index: 40; inset-inline-end: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; border-radius: 9999px; background: var(--surface); color: var(--ink-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.3s var(--ease-io), transform 0.3s var(--ease-io); cursor: pointer; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top .ring { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.to-top .track { fill: none; stroke: var(--line); stroke-width: 2.5; }
.to-top .fill { fill: none; stroke: var(--cedar); stroke-width: 2.5; stroke-linecap: round; } /* no transition: it tracks the thumb */
.to-top .arrow { position: relative; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* motion: entrances rise, the outgoing results sink first */
@keyframes rise { 0% { opacity: 0; transform: translateY(28px) scale(0.99); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes xfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes swap-out { to { opacity: 0; transform: translateY(14px) scale(0.995); } }
.rise-1 { animation: rise 1.2s var(--ease) both; }
.rise-2 { animation: rise 1.2s var(--ease) 0.12s both; }
.rise-3 { animation: rise 1.2s var(--ease) 0.24s both; }
.swap-out { animation: swap-out 0.45s var(--ease-io) both; pointer-events: none; }
.swap-in { animation: xfade 0.7s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}