/* =========================================================================
   base.css — layout and structure shared by every page and every theme.

   The LOOK comes from one small file in themes/ (win98.css, paper.css…),
   loaded right after this one. A theme sets "tokens": named values such as
   --bg (page background) or --raised (the 3D edge of a button). This file
   only ever uses those names, so one theme file can restyle everything.
   A theme may also add a few special touches of its own at its end.

   1. Base         plain HTML elements
   2. Window       the page frame and its title bar
   3. Controls     buttons, fields, labels, help (؟)
   4. Front page   souqi.me
   5. Shop         category bar, product grid, product page
   6. Dashboard    the shop owner's screens
   7. HQ           Amr's admin screens
   8. Helpers      small one-job classes

   Tokens every theme must set (see themes/win98.css for a full example):
     colours   --bg --surface --face --field --text --muted --line --link
               --link-visited --accent --accent-text --wa --wa-text --danger
               --ok --note-bg --note-text --note-border
     fonts     --font --mono
     edges     --radius --box-border --field-border --raised --pressed --sunken
     frame     --desktop-pad --desktop-pad-wide --window-pad --window-border
               --window-radius --window-shadow --title-display --title-bg
               --title-text
     lines     --hr --hr-under --group-border --group-shadow --menu-bg
               --menu-border --menu-shadow --footer-border --footer-shadow
               --row-line --card-shadow
     other     --focus --select-arrow

   Optional (a theme that leaves them out gets the pixel pointers, section 8):
     pointer   --cursor-arrow --cursor-hand
   ========================================================================= */

:root {
  --size: 1.0625rem;      /* 17px: Arabic reads better a little larger */
  --small: 0.875rem;
  --tap: 2.75rem;         /* 44px: smallest comfortable thing to tap */
  --page: 46rem;
  --narrow: 34rem;
  --gap: 1rem;
}


/* 1. Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Keep "hidden" hidden, even on elements we give display: block */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: var(--desktop-pad);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size);
  line-height: 1.7;
  overflow-wrap: break-word;
}
@media (min-width: 48rem) {
  body { padding: var(--desktop-pad-wide); }
}

h1, h2, h3 { line-height: 1.35; margin: 0 0 0.5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

a { color: var(--link); }
a:visited { color: var(--link-visited); }

img, svg { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: var(--hr);
  border-bottom: var(--hr-under);
  margin: 1.5rem 0;
}

:focus-visible { outline: var(--focus); outline-offset: 2px; }


/* 2. Window -------------------------------------------------------------- */

.window {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--window-pad);
  background: var(--surface);
  border: var(--window-border);
  border-radius: var(--window-radius);
  box-shadow: var(--window-shadow);
}
.window:has(.page.narrow) { max-width: var(--narrow); }

.title-bar {
  display: var(--title-display);
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.3rem;
  background: var(--title-bg);
  color: var(--title-text);
  font-weight: bold;
  font-size: 0.95rem;
}
.title-bar .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The three buttons are <details> so they answer a click with no JavaScript:
   opening one shows its joke (.tip), and name="win" closes the others. */
.title-buttons { display: flex; gap: 2px; flex: none; position: relative; }
.title-buttons details { display: block; }
.title-buttons summary {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1rem;
  background: var(--face);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1;
  border: var(--box-border);
  border-radius: var(--radius);
  box-shadow: var(--raised);
  list-style: none;
  cursor: default;
  user-select: none;
}
.title-buttons summary::-webkit-details-marker { display: none; }
.title-buttons details[open] summary { box-shadow: var(--pressed, var(--sunken)); }
.title-buttons .tip {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 10;
  width: max-content;
  max-width: min(16rem, 80vw);
  margin: 0;
  padding: 0.3rem 0.5rem;
  background: #ffffe1;
  color: #000;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgb(0 0 0 / 0.35);
  font-size: 0.85rem;
  font-weight: normal;
  white-space: normal;
}

.page { padding: 1rem 0.75rem 0.75rem; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-top: 2.5rem;
  padding: 0.15rem 0.5rem;
  border-top: var(--footer-border);
  box-shadow: var(--footer-shadow);
  color: var(--muted);
  font-size: var(--small);
}
.site-footer a,
.site-footer .btn.link { color: inherit; }
/* A row of small links under the front page's footer box: blue and
   underlined, spread evenly from one edge of the box to the other */
.site-links {
  display: flex;
  justify-content: space-between;
  column-gap: 0.75rem;
  margin-top: 0.25rem;
  padding-inline: 0.5rem; /* lines up with the text inside the box above */
  font-size: var(--small);
}
.site-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--link); }
/* On a phone the four don't fit on one line: two rows of two, each pair
   pushed out to the two edges, so it still looks even */
@media (max-width: 30rem) {
  .site-links { display: grid; grid-template-columns: 1fr 1fr; }
  .site-links a:nth-child(even) { justify-self: end; }
}

/* Payment methods: on a product page, and the seller's list of kinds to add */
.pre-line { white-space: pre-line; }
.pay-qr { display: inline-block; width: min(240px, 100%); height: auto; image-rendering: pixelated; background: #fff; }
.pay-choice { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.pay-choice legend { padding: 0; margin-bottom: 0.3rem; font-weight: bold; }
.pay-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* Under the order buttons: the ways the shop takes money, as small chips
   drawn in the shop's look (raised like its buttons), each just a pixel icon
   so the row fits on one line, even on a small phone. The names are there
   for screen readers, and as a tooltip with a mouse. Not buttons: nothing
   happens on tap. With very many methods the row wraps instead of spilling. */
.pay-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.pay-icons li {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.2rem;
  border: var(--box-border);
  border-radius: var(--radius);
  background: var(--face);
  box-shadow: var(--raised);
  color: var(--text);
}
.pay-icons .pixel-icon { width: 20px; height: 20px; }
/* A brand's pixel logo (src/ui/brand-logos.js): on a white chip, as the
   brands ask, so it shows in the dark looks too. */
.pay-icons li.brand { gap: 3px; padding-block: calc(0.2rem + 1px); background: #fff; } /* +1px: 18px logos, chips as tall as the 20px icons' */
.brand-logo { flex: none; display: block; }
/* Visa and Mastercard: each on a little white card, shaped like a bank card
   (about 8:5) with slightly rounded corners, as tall as the other chips. */
.pay-icons li.card { background: #fff; border-radius: 3px; }
.pay-icons .card-face { display: flex; align-items: center; justify-content: center; width: 36px; height: 20px; }
/* The payment choice on the order form: circle, icon and name on one line
   (".field > label" would otherwise put each on its own line) */
.pay-choice > label.pay-option { display: flex; align-items: center; gap: 0.5rem; }
.pay-option .pixel-icon, .pay-option .brand-logo { flex: none; }
/* The seller's list: the method's name on its own line, its buttons under it */
.pay-list .row { flex-wrap: wrap; row-gap: 0.4rem; }
.pay-list .row .text { flex: 1 1 100%; }
/* Orders: the product line on the order form, and a receipt picture */
.order-summary { display: grid; gap: 0.2rem; padding: 0.6rem 0.8rem; margin-bottom: 1rem; border: var(--box-border); border-radius: var(--radius); background: var(--surface); }
.receipt { max-width: 100%; height: auto; border: var(--field-border); }
.order-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.order-filters a[aria-current] { font-weight: bold; box-shadow: var(--pressed); }

/* A long account number or email wraps instead of being cut off */
.linkbox.wrap code { white-space: normal; overflow-wrap: anywhere; padding-block: 0.4rem; }

/* The simple pages (terms, privacy, help…): a pixel icon before the title */
.pixel-icon { flex: none; image-rendering: pixelated; }
.info-title { display: flex; align-items: center; gap: 0.6rem; }
.info li { margin-bottom: 0.5rem; }

/* The second «افتح متجرك», wide, at the end of the front page */
.cta-end { margin-top: 1.5rem; text-align: center; }
.cta-end .free { display: block; margin-top: 0.4rem; color: var(--ok); }

/* The email: a button that copies it (dash.js), looking like the link it was */
.site-footer .btn.link { padding-inline: 0; font-size: inherit; }

/* The old-web visitor counter: bright digits in little black boxes, the same
   in every theme (old counters were pasted-in images that never matched) */
.counter { display: inline-flex; align-items: center; gap: 0.4rem; }
.counter .digits { display: inline-flex; gap: 1px; padding: 2px; background: #000; direction: ltr; }
.counter .digits span {
  min-width: 0.95em;
  padding: 0 0.1em;
  background: #222;
  color: #7cfc00;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: bold;
  text-align: center;
  line-height: 1.45;
}


/* 3. Controls ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.4rem 1.1rem;
  border: var(--box-border);
  border-radius: var(--radius);
  background: var(--face);
  color: var(--text);
  font: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--raised);
}
.btn:visited { color: var(--text); }
.btn:active { box-shadow: var(--pressed); }

.btn.primary,
.btn.primary:visited { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.wa,
.btn.wa:visited { background: var(--wa); border-color: var(--wa); color: var(--wa-text); }
.btn.danger,
.btn.danger:visited { color: var(--danger); }
.btn.big { width: 100%; min-height: 3.25rem; font-size: 1.1rem; }
.btn.wide { width: 100%; }
.btn.link {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--link);
  text-decoration: underline;
  font-weight: normal;
  padding-inline: 0.25rem;
}

.field { margin-bottom: 1.1rem; }
.field > label,
.field > .label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.field .hint {
  display: block;
  color: var(--muted);
  font-size: var(--small);
  margin-top: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0.45rem 0.7rem;
  border: var(--field-border);
  border-radius: var(--radius);
  background-color: var(--field);
  color: var(--text);
  font: inherit;
  font-size: max(16px, 1rem); /* under 16px makes iPhones zoom in on tap */
  box-shadow: var(--sunken);
}
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: -3px; }

/* Dropdowns draw their own small triangle (each theme picks its colour) */
select {
  appearance: none;
  padding-inline-end: 2rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
}

/* A field with a fixed piece stuck to it: currency, ".souqi.me" */
.affix { display: flex; align-items: stretch; gap: 3px; }
.affix input { min-width: 0; flex: 1; }
.affix span {
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  white-space: nowrap;
  color: var(--muted);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
.affix select { width: auto; flex: none; }
.affix.ltr { direction: ltr; }
.affix.ltr select { background-position: right 0.75rem center; }

.label-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}
.label-row label,
.label-row .label { font-weight: bold; }
.center-row { justify-content: center; }
.hint-line { color: var(--muted); font-size: var(--small); margin: -0.15rem 0 0.5rem; }

/* The (؟) help button… */
.help {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: var(--box-border);
  border-radius: var(--radius);
  background: var(--face);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1;
  cursor: help;
  box-shadow: var(--raised);
}
.help::after { content: ""; position: absolute; inset: -0.75rem; } /* 44px to tap */
.help[aria-expanded="true"] { box-shadow: var(--pressed); }

/* …its footnote version: just a "*" after a word… */
.help.note {
  display: inline;
  width: auto;
  height: auto;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--link);
  font-size: 1.1em;
  vertical-align: super;
  line-height: 1;
}
.help.note::after { inset: -0.8rem -1rem; } /* still 44px to tap */

/* …and the card both open */
.help-card {
  width: min(20rem, calc(100vw - 2rem));
  margin: auto;            /* centred if JavaScript is off; dash.js moves it */
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--note-border);
  border-radius: var(--radius);
  background: var(--note-bg);
  color: var(--note-text);
  font-size: var(--small);
  font-weight: normal;
  line-height: 1.75;
  text-align: start;
  white-space: normal;     /* wraps even when its * sits inside a .nowrap */
  box-shadow: var(--card-shadow);
}
.help-card.copy-note { width: max-content; padding: 0.35rem 0.75rem; } /* «تم النسخ ✓» */
.help-card .para { display: block; margin: 0 0 0.5rem; }
.help-card .para:last-child { margin: 0; }

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  cursor: pointer;
}
.check input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); }

/* "More": a group box */
details.more {
  border: var(--group-border);
  border-radius: var(--radius);
  box-shadow: var(--group-shadow);
  margin: 0 0 1.25rem;
}
details.more > summary {
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  color: var(--link);
  text-decoration: underline;
}
details.more > .inner { padding: 0.25rem 0.8rem 0.2rem; }

.notice {
  padding: 0.75rem 1rem;
  border: 1px solid var(--note-border);
  border-radius: var(--radius);
  background: var(--note-bg);
  color: var(--note-text);
  margin-bottom: 1rem;
}
.notice.ok { background: var(--field); color: var(--text); }

.badge {
  display: inline-block;
  padding: 0 0.45rem;
  background: var(--face);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1.7;
  white-space: nowrap;
}
.badge.off { color: var(--danger); }
.badge.plan { color: var(--ok); }


/* Sign-up wizard (souqi.me/signup): «الخطوة 2 من 5» and a Windows-style
   progress bar made of blocks, in a sunken white box */
.step-count { margin: 0 0 0.35rem; }
.progress {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin: 0 0 1.25rem;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
.progress span { flex: 1; height: 0.8rem; }
.progress span.on { background: var(--accent); }

/* The 6-digit code box: big, spaced digits */
input[type="text"].code { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; }

/* «أو» between the password form and the email-code button on the sign-in page */
.or { margin: 1rem 0 0.75rem; }
.mt-s { margin-top: 0.5rem; }


/* 4. Front page ---------------------------------------------------------- */

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.cta .btn { padding-inline: 0.9rem; }
.cta .free { color: var(--ok); }
/* «كيف بيشتغل؟»: four cards, two by two, each a pixel icon over a short
   title. The step's number is drawn in the corner by a CSS counter, so the
   order lives in one place (the list). role="list" in the page keeps it a
   list for iPhone screen readers, which drop lists that have no markers. */
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.5rem 0.85rem;
  text-align: center;
  line-height: 1.45;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0.35rem;
  inset-inline-start: 0.35rem;
  min-width: 1.5rem;
  line-height: 1.5rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--small);
  font-weight: bold;
}
.steps .pixel-icon { color: var(--accent); }
.steps .example { color: var(--muted); font-family: var(--mono); font-size: var(--small); }
/* Each feature sits on its own white strip. The ✓ is drawn inside the
   strip: as a list marker it would hang outside the strip's background. */
.goodies { list-style: none; padding-inline-start: 0; }
.goodies li {
  position: relative;
  margin: 0 0 0.25rem;
  padding: 0.2rem 0.6rem;
  padding-inline-start: 1.9rem;
  border-radius: var(--radius);
  background: var(--field);
}
.goodies li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0.6rem;
  color: var(--ok);
  font-weight: bold;
}
/* The features list shows five; «إظهار المزيد…» (a <details>, so it works
   with no JavaScript) holds the rest. Open, the two lists join with no gap,
   and the same line moves under the last feature and reads «إخفاء».
   A <summary> must come first inside <details>, so to show it last it is
   lifted out of the flow and pinned to the bottom, in the room that
   padding-bottom keeps free for it. */
.goodies:has(+ .goodies-more) { margin-bottom: 0; }
.goodies-more { position: relative; margin-bottom: 1rem; }
.goodies-more[open] { padding-bottom: var(--tap); }
.goodies-more > .goodies { margin-block: 0; }
.goodies-more > summary {
  list-style: none;
  height: var(--tap);           /* 44px to tap, the words in the middle */
  line-height: var(--tap);
  padding-inline-start: 1.9rem; /* lines up with the features' words */
  cursor: pointer;
  color: var(--link);
  text-decoration: underline;
}
.goodies-more > summary::-webkit-details-marker { display: none; }
.goodies-more[open] > summary { position: absolute; bottom: 0; left: 0; right: 0; }
.goodies-more:not([open]) .if-open,
.goodies-more[open] .if-closed { display: none; }


/* 5. Shop ---------------------------------------------------------------- */

.banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  margin-bottom: 1rem;
}

.shop-head { margin-bottom: 1rem; }
.shop-head h1 { margin-bottom: 0.15rem; }
.shop-head h1 a { color: inherit; text-decoration: none; display: inline-block; padding-block: 0.4rem; }
.shop-head p { color: var(--muted); margin: 0; }

/* Category bar: a row of buttons; the open one looks pressed in */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.cats a,
.cats a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: 0.75rem;
  color: var(--text);
  text-decoration: none;
  background: var(--face);
  border: var(--box-border);
  border-radius: var(--radius);
  box-shadow: var(--raised);
}
.cats a[aria-current] {
  font-weight: bold;
  box-shadow: var(--pressed);
}

.search { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; }
.search input { flex: 1; min-width: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1.25rem var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
.card a { text-decoration: none; color: inherit; display: block; }
.card img,
.card .noimg {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
.card .name {
  display: block;
  margin-top: 0.35rem;
  color: var(--link);
  text-decoration: underline;
  line-height: 1.45;
}
.card .price { display: block; font-size: var(--small); font-weight: bold; }
.card.soldout img { filter: grayscale(1); opacity: 0.6; }

.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }

.back { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: 0.5rem; }

/* Product photos: one big photo, thumbnails underneath. Tapping a thumbnail
   chooses its hidden radio button, and these rules show that photo. No
   JavaScript. Written out for up to 4 photos (the most a product can have). */
.photo { position: relative; margin: 0 0 1rem; }
.gallery { margin-bottom: 1rem; }
.gallery .photo { display: none; margin: 0; }
.gallery > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gallery > input:nth-of-type(1):checked ~ .stage .photo:nth-child(1),
.gallery > input:nth-of-type(2):checked ~ .stage .photo:nth-child(2),
.gallery > input:nth-of-type(3):checked ~ .stage .photo:nth-child(3),
.gallery > input:nth-of-type(4):checked ~ .stage .photo:nth-child(4) { display: block; }
.photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
/* "1 من 3" in the photo's corner */
.photo figcaption {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5rem;
  padding: 0 0.5rem;
  background: var(--face);
  color: var(--text);
  border: var(--box-border);
  border-radius: var(--radius);
  box-shadow: var(--raised);
  font-size: var(--small);
  font-weight: bold;
}
.thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.thumbs label {
  display: block;
  padding: 3px;
  background: var(--face);
  border: var(--box-border);
  border-radius: var(--radius);
  box-shadow: var(--raised);
  cursor: pointer;
}
.thumbs img { width: 3.5rem; height: 3.5rem; object-fit: cover; }
/* The thumbnail of the photo on show looks pressed in and outlined */
.gallery > input:nth-of-type(1):checked ~ .thumbs label:nth-child(1),
.gallery > input:nth-of-type(2):checked ~ .thumbs label:nth-child(2),
.gallery > input:nth-of-type(3):checked ~ .thumbs label:nth-child(3),
.gallery > input:nth-of-type(4):checked ~ .thumbs label:nth-child(4) {
  box-shadow: var(--pressed);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Keyboard users: arrow keys move between photos; show where they are */
.gallery > input:nth-of-type(1):focus-visible ~ .thumbs label:nth-child(1),
.gallery > input:nth-of-type(2):focus-visible ~ .thumbs label:nth-child(2),
.gallery > input:nth-of-type(3):focus-visible ~ .thumbs label:nth-child(3),
.gallery > input:nth-of-type(4):focus-visible ~ .thumbs label:nth-child(4) { outline: var(--focus); }

.product-price { font-size: 1.3rem; font-weight: bold; margin-bottom: 1rem; }
.product-desc { white-space: pre-line; }

@media (min-width: 46rem) {
  .product { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}


/* 6. Dashboard ----------------------------------------------------------- */

/* The menu bar under the title bar */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.25rem;
  padding: 0 0.4rem;
  background: var(--menu-bg);
  border-bottom: var(--menu-border);
  box-shadow: var(--menu-shadow);
}
.topbar a,
.topbar a:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 0.5rem;
  color: var(--text);
  text-decoration: none;
}
.topbar a:hover { text-decoration: underline; }

.linkbox { display: flex; align-items: stretch; gap: 0.4rem; margin-bottom: 0.5rem; }
.linkbox code {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  direction: ltr;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  font-family: var(--mono);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lists of products / shops */
.rows {
  list-style: none;
  padding: 2px;
  margin: 1rem 0 0;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
.rows li + li { border-top: var(--row-line); }
.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  color: inherit;
  text-decoration: none;
}
.row:visited { color: inherit; }
.row img,
.row .noimg {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  object-fit: cover;
  background: var(--face);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.row .text { flex: 1; min-width: 0; line-height: 1.45; }
.row .text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .text small { color: var(--muted); }
.row .go { color: var(--link); text-decoration: underline; }
.row input[type="text"] { flex: 1; min-width: 0; }
.row .btn { padding-inline: 0.75rem; min-width: var(--tap); }

/* The big photo button on the add-product form */
.photo-pick {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  text-align: center;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  color: var(--link);
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.field > .photo-pick { display: grid; margin: 0; } /* beats ".field > label" */
.photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-pick img { width: 100%; height: 100%; object-fit: contain; padding: 2px; } /* whole photo, never cropped */
.photo-pick .icon { font-size: 2.25rem; line-height: 1; display: block; text-align: center; }
.photo-pick.small { aspect-ratio: 1; font-size: var(--small); }
.photo-pick.wide { aspect-ratio: 3 / 1; }
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

/* Under each photo box: "رئيسية" (main photo), once the box has a photo */
.photo-slot { display: grid; align-content: start; }
.make-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--tap);
  font-size: var(--small);
  cursor: pointer;
}
.make-main input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.make-main:has(input:checked) { font-weight: bold; }
.photo-slot:not(:has(.has-photo)) .make-main { display: none; }

/* Seller stats: three numbers in sunken boxes */
.statbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0 0 1rem; }
.statbox > div {
  padding: 0.4rem 0.3rem;
  text-align: center;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
.statbox dt { font-size: var(--small); color: var(--muted); line-height: 1.4; }
.statbox dd { margin: 0; font-size: 1.4rem; font-weight: bold; line-height: 1.3; }
.row .text .stats-line { display: block; }

/* The visitor counter at the end of the dashboard; greyed out when locked */
.counter-preview { margin: 0.25rem 0 0.75rem; }
.counter-box.locked .counter { opacity: 0.45; filter: grayscale(1); }

.option-row { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; margin-bottom: 0.5rem; }

/* Theme picker: a grid of choices, each with a little colour preview */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.theme-option {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  cursor: pointer;
}
.theme-option:has(input:checked) { outline: 2px solid var(--accent); outline-offset: -2px; }
.theme-option .swatch { display: flex; height: 2rem; border: 1px solid var(--line); }
.theme-option .swatch span { flex: 1; }
.theme-option .name { display: flex; align-items: center; gap: 0.4rem; min-height: var(--tap); }
.theme-option .name input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); }
.theme-option a { font-size: var(--small); display: inline-flex; align-items: center; min-height: var(--tap); }

.done { text-align: center; }
.done .tick { font-size: 2.75rem; line-height: 1; color: var(--ok); margin: 0.5rem 0 0.25rem; }
.qr {
  width: min(16rem, 70vw);
  margin: 1.25rem auto;
  padding: 0.5rem;
  background: #fff;        /* always white: phone cameras need the contrast */
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
}
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.stack > a:not(.btn) { display: inline-flex; justify-content: center; align-items: center; min-height: var(--tap); }


/* 7. HQ ------------------------------------------------------------------ */

.stats { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; color: var(--muted); margin-bottom: 1rem; }
.stats b { color: var(--text); }
.stats .label-row { margin: 0; }

/* «باب التسجيل»: its state on one side, the open/close button on the other */
.door { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.door .label-row { margin: 0; }

.message {
  white-space: pre-line;
  padding: 0.75rem 1rem;
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  margin-bottom: 1rem;
}

dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0 0 1.5rem; }
dl.facts dt { color: var(--muted); display: flex; align-items: center; }
dl.facts dd { margin: 0; min-width: 0; }
dl.facts a { display: inline-flex; align-items: center; min-height: var(--tap); }


/* 8. Helpers ------------------------------------------------------------- */

.muted { color: var(--muted); }
.small { font-size: var(--small); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.center { text-align: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.between a { display: inline-flex; align-items: center; min-height: var(--tap); }
.mt { margin-top: 1.5rem; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Small picture sitting in a line of text */
.nowrap { white-space: nowrap; }
.inline-logo { display: inline-block; height: 1.4em; width: auto; vertical-align: middle; }


/* The mouse pointer: the old Windows 98 arrow, and its little pointing hand
   over anything you can click. Drawn pixel by pixel (white inside, black
   edge), so no image files. Text boxes keep the normal typing cursor. Only
   for a mouse: phones have no pointer, so they skip this.
   A modern theme can ask for the computer's own pointers instead:
     --cursor-arrow: auto; --cursor-hand: pointer;
   (!important: it has to win over the "cursor: pointer" rules above.) */
@media (pointer: fine) {
  html, html * {
    cursor: var(--cursor-arrow, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='18' shape-rendering='crispEdges'><path d='M1 2h1v1h-1zM1 3h2v1h-2zM1 4h3v1h-3zM1 5h4v1h-4zM1 6h5v1h-5zM1 7h6v1h-6zM1 8h7v1h-7zM1 9h8v1h-8zM1 10h5v1h-5zM1 11h2v1h-2zM4 11h2v1h-2zM1 12h1v1h-1zM4 12h2v1h-2zM5 13h2v1h-2zM5 14h2v1h-2zM6 15h2v1h-2zM6 16h2v1h-2z' fill='%23fff'/><path d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM0 9h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM6 10h5v1h-5zM0 11h1v1h-1zM3 11h1v1h-1zM6 11h1v1h-1zM0 12h1v1h-1zM2 12h2v1h-2zM6 12h1v1h-1zM0 13h2v1h-2zM4 13h1v1h-1zM7 13h1v1h-1zM0 14h1v1h-1zM4 14h1v1h-1zM7 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM5 16h1v1h-1zM8 16h1v1h-1zM6 17h2v1h-2z'/></svg>") 0 0, default) !important;
  }
  a[href], a[href] *, button, button *, summary, summary *, label, label *, select,
  input[type="checkbox"], input[type="radio"], input[type="file"] {
    cursor: var(--cursor-hand, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='18' shape-rendering='crispEdges'><path d='M5 1h2v1h-2zM5 2h2v1h-2zM5 3h2v1h-2zM5 4h2v1h-2zM5 5h2v1h-2zM8 5h2v1h-2zM5 6h2v1h-2zM8 6h2v1h-2zM11 6h1v1h-1zM5 7h2v1h-2zM8 7h2v1h-2zM11 7h1v1h-1zM13 7h1v1h-1zM1 8h2v1h-2zM5 8h8v1h-8zM1 9h3v1h-3zM5 9h8v1h-8zM2 10h11v1h-11zM3 11h10v1h-10zM3 12h9v1h-9zM4 13h8v1h-8zM4 14h7v1h-7zM5 15h6v1h-6zM5 16h6v1h-6z' fill='%23fff'/><path d='M5 0h2v1h-2zM4 1h1v1h-1zM7 1h1v1h-1zM4 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM7 4h3v1h-3zM4 5h1v1h-1zM7 5h1v1h-1zM10 5h2v1h-2zM4 6h1v1h-1zM7 6h1v1h-1zM10 6h1v1h-1zM12 6h2v1h-2zM1 7h2v1h-2zM4 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM12 7h1v1h-1zM14 7h1v1h-1zM0 8h1v1h-1zM3 8h2v1h-2zM13 8h1v1h-1zM0 9h1v1h-1zM4 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM13 10h1v1h-1zM2 11h1v1h-1zM13 11h1v1h-1zM2 12h1v1h-1zM12 12h1v1h-1zM3 13h1v1h-1zM12 13h1v1h-1zM3 14h1v1h-1zM11 14h1v1h-1zM4 15h1v1h-1zM11 15h1v1h-1zM4 16h1v1h-1zM11 16h1v1h-1zM4 17h8v1h-8z'/></svg>") 6 0, pointer) !important;
  }
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), textarea {
    cursor: text !important;
  }
}