/* Campaign pages of emam8 (campaign page, «کدهای من», campaign panel) — name and texts come from the campaign panel
   Layout ported from the Next.js app (components/campaign/CampaignPage.tsx, Tailwind values).
   Colours: the campaign identity (deep teal + gold) with rose for warmth, instead of the template red.
   Everything is scoped under .m-body so the page can also sit inside emam8's own layout. */

@font-face { font-family: "YekanBakh"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/YekanBakhFaNum-Regular.woff2") format("woff2"); }
@font-face { font-family: "YekanBakh"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/YekanBakhFaNum-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "YekanBakh"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/YekanBakhFaNum-Bold.woff2") format("woff2"); }
@font-face { font-family: "YekanBakh"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/YekanBakhFaNum-ExtraBold.woff2") format("woff2"); }

.m-body {
  /* primary: deep teal from the campaign identity (replaces the template red) */
  --primary-50: #EDF5F4;
  --primary-100: #D3E7E5;
  --primary-400: #2B6E73;
  --primary-500: #1E5B60;
  --primary-600: #164A4E;
  --primary-700: #113B3F;
  /* rose: urgency, discounts, the «ویژه» tier */
  --rose-50: #FCF0F4;
  --rose-100: #F7DCE6;
  --rose-500: #A8436B;
  --rose-700: #87304F;
  /* gold: VIP and ribbons */
  --gold-50: #FBF4E4;
  --gold-500: #A9822F;
  --gold-700: #7A5B1B;
  /* sage: «اقتصادی» tier and positive states */
  --sage-50: #EAF4F0;
  --sage-500: #3F7D70;
  --sage-700: #2D5F54;
  /* warm neutrals (instead of cool zinc) */
  --zinc-50: #FAF8F6;
  --zinc-100: #F3F0EC;
  --zinc-200: #E8E3DC;
  --zinc-300: #D6CFC6;
  --zinc-400: #A29A90;
  --zinc-500: #786F66;
  --zinc-600: #5A524B;
  --zinc-700: #423B35;
  --zinc-800: #2B2621;
  --shadow-lg: 0 10px 24px -6px rgba(43, 38, 33, .12), 0 4px 8px -4px rgba(43, 38, 33, .08);

  margin: 0;
  background: #fff;
  color: var(--zinc-600);
  font: 400 16px/1.75 "YekanBakh", Tahoma, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.m-body *, .m-body *::before, .m-body *::after { box-sizing: border-box; }
.m-body [hidden] { display: none !important; }
.m-body img { max-width: 100%; }
.m-body :where(a) { color: inherit; text-decoration: none; }
/* :where() keeps the resets at zero specificity so component classes win */
.m-body :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.m-body :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 4px; }
.m-body ::selection { background: var(--primary-500); color: #fff; }
.m-body :where(button, input, select, textarea) { font: inherit; color: inherit; }
.m-body button:not(:disabled) { cursor: pointer; }
.m-body [id] { scroll-margin-top: 24px; }

.m-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; padding: 8px 16px; border-radius: 12px; background: var(--primary-500); color: #fff !important; }
.m-skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 12px; background: var(--primary-500); color: #fff !important; font-size: .875rem; line-height: 1.43; transition: background-color .15s; }
.m-btn:hover { background: var(--primary-600); }
.m-btn:disabled { opacity: .5; cursor: not-allowed; }
.m-btn--sm { padding: 10px 12px; font-size: .75rem; box-shadow: var(--shadow-lg); }
.m-btn--sm:hover { background: var(--primary-400); }

/* ---------- header (Next.js components/layout/Header) ---------- */
.m-header__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 16px; background: #fff; box-shadow: var(--shadow-lg); }
.m-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }
.m-logo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 800; color: var(--primary-500); }
.m-logo__badge { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--primary-500); color: #fff; font-size: 1.125rem; }
.m-logo__name { font-size: 1.25rem; }
.m-logo img { display: block; height: 40px; width: auto; }
/* white logo of emam8 on the brand colour, like the «۸» badge */
.m-logo--chip { padding: 6px 14px; border-radius: 12px; background: var(--primary-500); }
.m-logo--chip img { height: 34px; }
.m-support { display: none; align-items: center; gap: 12px; font-size: .875rem; }
.m-support__sep { color: var(--zinc-300); }
.m-support a { color: var(--primary-500); }
.m-nav { display: flex; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none; font-size: .875rem; }
.m-nav::-webkit-scrollbar { display: none; }
.m-nav a { white-space: nowrap; }
.m-nav a:hover, .m-nav a[aria-current="page"] { color: var(--primary-500); }
.m-nav a[aria-current="page"] { font-weight: 700; }
.m-actions { display: flex; flex-shrink: 0; align-items: center; gap: 16px; }
.m-cart { display: none; padding: 10px; border: 2px solid var(--primary-500); border-radius: 12px; color: var(--primary-500); }
.m-cart--mobile { display: block; padding: 0; border: 0; }
.m-login { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: linear-gradient(to bottom left, var(--primary-500), var(--primary-400)); color: #fff !important; font-size: .875rem; }
.m-login span { display: none; }
@media (min-width: 768px) {
  .m-header__top { padding-inline: 32px; }
  .m-header__bar { padding-inline: 32px; background: var(--zinc-50); }
  .m-logo__badge { width: 40px; height: 40px; }
  .m-logo__name { font-size: 1.5rem; }
  .m-cart { display: block; }
  .m-cart--mobile { display: none; }
  .m-nav { gap: 16px; }
}
@media (min-width: 1024px) {
  .m-header__top, .m-header__bar { padding-inline: 56px; }
  .m-support { display: flex; }
  .m-login span { display: inline; }
}
@media (min-width: 1280px) { .m-nav { gap: 28px; } }

/* ---------- page shell ---------- */
.m-shell { max-width: 1700px; margin-inline: auto; padding: 24px 16px; }
.m-shell > * + * { margin-top: 48px; }
@media (min-width: 768px) { .m-shell { padding: 40px 32px; } }
@media (min-width: 1024px) { .m-shell { padding-inline: 56px; } }

.m-title { color: var(--zinc-800); font-size: 1.125rem; font-weight: 800; line-height: 1.6; }
@media (min-width: 768px) { .m-title { font-size: 1.25rem; } }
.m-panel { padding: 16px; border: 1px solid var(--zinc-200); border-radius: 16px; background: #fff; }
@media (min-width: 768px) { .m-panel { padding: 24px; } }

/* ---------- hero ---------- */
.m-hero { position: relative; overflow: hidden; padding: 24px; border-radius: 24px; background-color: var(--gold-50); background-size: cover; background-position: center; }
@media (min-width: 768px) { .m-hero { padding: 48px; } }
.m-hero__in { max-width: 672px; }
.m-hero__in > * + * { margin-top: 16px; }
.m-state { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--zinc-200); color: var(--zinc-700); font-size: .75rem; }
.m-state--active { background: var(--sage-50); color: var(--sage-700); box-shadow: inset 0 0 0 1px rgba(63, 125, 112, .18); }
.m-hero__title { color: var(--primary-600); font-size: 1.5rem; font-weight: 800; line-height: 2.5rem; }
@media (min-width: 768px) { .m-hero__title { font-size: 2.25rem; line-height: 3.5rem; } }
.m-hero__tagline { color: var(--zinc-700); font-weight: 700; }
.m-hero__msg { color: var(--zinc-600); font-size: .875rem; line-height: 2; }
.m-hero__when { color: var(--zinc-700); font-size: .875rem; }
.m-countdown { color: var(--rose-500); }
.m-extras { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; font-size: .75rem; }
.m-extras li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--zinc-700); }
.m-extras svg { flex-shrink: 0; color: var(--rose-500); }

.m-notice { padding: 16px; border-radius: 12px; background: var(--gold-50); color: var(--gold-700); font-size: .875rem; }

/* ---------- tiers ---------- */
.m-tiers { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .m-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m-tier { display: block; transition: box-shadow .15s, border-color .15s; }
.m-tier:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.m-tier__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.m-tier__name { display: flex; align-items: center; gap: 10px; color: var(--zinc-800); font-size: 1rem; font-weight: 700; }
.m-tier__name > img { width: 36px; height: 36px; }
.m-tier p { color: var(--zinc-500); font-size: .75rem; line-height: 1.75rem; }
.m-off { padding: 4px 8px; border-radius: 8px; background: var(--rose-50); color: var(--rose-500); font-size: .75rem; white-space: nowrap; }

/* ---------- packs ---------- */
.m-packs__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip { padding: 6px 12px; border: 1px solid var(--zinc-200); border-radius: 999px; background: #fff; font-size: .75rem; line-height: 1.33; }
.m-chip:hover { border-color: var(--zinc-300); }
.m-chip[aria-pressed="true"] { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-600); }
.m-group { margin-bottom: 40px; }
.m-group__title { margin-bottom: 16px; color: var(--zinc-800); font-size: 1rem; font-weight: 700; }
.m-group__title small { color: var(--zinc-400); font-size: .75rem; font-weight: 400; }
.m-empty { padding-block: 40px; text-align: center; font-size: .875rem; }

.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .m-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* ---------- product / pack card (Next.js components/ui/ProductCard) ---------- */
.m-card { position: relative; display: flex; flex-direction: column; margin-block: 8px; padding: 8px; border: 1px solid var(--zinc-200); border-radius: 24px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.m-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .m-card { padding: 16px; } }
.m-card__off { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 0 8px; border-radius: 8px; background: var(--rose-50); color: var(--rose-500); font-size: .75rem; }
.m-card__media { display: block; margin: 0 0 14px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; background: #fff; }
.m-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m-card__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; font-size: 11px; line-height: 1.6; }
.m-card__chips span { padding: 0 6px; border-radius: 4px; }
.m-code { background: var(--zinc-100); color: var(--zinc-500); }
.m-style--gold { background: var(--gold-50); color: var(--gold-700); }
.m-style--rose { background: var(--rose-50); color: var(--rose-700); }
.m-style--sage { background: var(--sage-50); color: var(--sage-700); }
.m-style--teal { background: var(--primary-50); color: var(--primary-600); }
.m-customchip { background: var(--primary-50); color: var(--primary-600); }
.m-card__title { display: -webkit-box; min-height: 48px; overflow: hidden; color: var(--zinc-700); font-size: .875rem; font-weight: 600; line-height: 1.5rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-card__items { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--zinc-400); font-size: .75rem; line-height: 1.25rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-card__sep { margin-block: 16px; border-bottom: 2px dashed var(--zinc-200); }
.m-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.m-price { margin-inline-start: auto; }
.m-card__state { color: var(--zinc-400); font-size: .75rem; }
.m-card__state--soon { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--zinc-100); color: var(--zinc-600); }
.m-price del { display: block; color: var(--zinc-400); font-size: .75rem; text-align: end; }
.m-price__row { display: flex; color: var(--zinc-800); }
.m-price__num { font-size: 1rem; font-weight: 800; }
.m-price__cur { align-self: center; color: var(--zinc-400); font-size: .75rem; transform: rotate(-90deg); }

/* ---------- single products: tabs ---------- */
.m-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.m-tab { padding: 6px 12px; border: 1px solid var(--zinc-200); border-radius: 999px; background: #fff; font-size: .75rem; line-height: 1.33; }
.m-tab[aria-selected="true"] { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-600); }
.m-more { margin-top: 8px; font-size: .875rem; }
.m-more a { color: var(--primary-500); }

/* ---------- referral ---------- */
.m-referral { display: grid; gap: 24px; }
@media (min-width: 1024px) { .m-referral { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
.m-bullets { margin-top: 16px; padding-inline-start: 20px; color: var(--zinc-600); font-size: .875rem; line-height: 1.75rem; list-style: disc; }
.m-bullets li + li { margin-top: 8px; }
.m-bullets li::marker { color: var(--gold-500); }
.m-hint { margin-top: 16px; color: var(--zinc-500); font-size: .75rem; }

/* ---------- notes ---------- */
.m-notes { display: grid; gap: 12px; margin-top: 16px; padding: 0; list-style: none; font-size: .875rem; line-height: 1.75rem; }
@media (min-width: 768px) { .m-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m-notes li { padding: 16px; border-radius: 16px; background: var(--zinc-50); }

/* ---------- forms ---------- */
.m-sub { margin: 8px 0 20px; color: var(--zinc-500); font-size: .875rem; }
.m-form { display: grid; gap: 16px; }
@media (min-width: 768px) { .m-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-form--stack { grid-template-columns: 1fr !important; }
.m-form label { display: block; font-size: .875rem; }
.m-form .m-wide { grid-column: 1 / -1; }
.m-field { display: block; width: 100%; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--zinc-200); border-radius: 12px; background: var(--zinc-50); font-size: .875rem; min-width: 0; }
.m-field:focus { border-color: var(--primary-500); background: #fff; outline: 2px solid var(--primary-100); outline-offset: 0; }
textarea.m-field { resize: vertical; }
.m-opt { color: var(--zinc-400); font-size: .75rem; }
.m-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.m-alert { margin-bottom: 16px; padding: 16px; border-radius: 12px; font-size: .875rem; }
.m-alert ul { margin-top: 4px; padding-inline-start: 20px; }
.m-alert--ok { background: var(--sage-50); color: var(--sage-700); }
.m-alert--err { background: var(--rose-50); color: var(--rose-700); }

/* ---------- footer ---------- */
.m-footer { margin-top: 40px; padding: 20px; border-top: 1px solid var(--zinc-200); background: #fff; }
@media (min-width: 768px) { .m-footer { padding-inline: 40px; } }
.m-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.m-footer__text { flex: 1 1 320px; color: var(--zinc-400); font-size: .75rem; line-height: 1.75rem; }
.m-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; padding: 20px 0 0; border-top: 1px solid var(--zinc-200); list-style: none; font-size: .875rem; }
.m-footer__links a:hover { color: var(--primary-500); }
.m-top { padding: 8px 12px; border: 0; background: none; color: var(--zinc-400); font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .m-body *, .m-body *::before, .m-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.m-count { color: var(--zinc-400); font-size: .75rem; }

/* ---------- admin «کمپین» ---------- */
.m-admin-body { background: var(--zinc-50); }
.m-admin__back { color: var(--primary-500) !important; font-size: .875rem; }
.m-admin > * + * { margin-top: 24px; }
.m-admin__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.m-admin__head .m-sub { margin-bottom: 0; max-width: 720px; }
.m-btn--line { border: 1.5px solid var(--primary-500); background: #fff; color: var(--primary-500) !important; }
.m-btn--line:hover { background: var(--primary-50); }
.m-admin__form > * + * { margin-top: 24px; }
.m-admin__h2 { margin-bottom: 16px; color: var(--zinc-800); font-size: 1rem; font-weight: 700; }
.m-admin__p { font-size: .875rem; line-height: 1.9; }
.m-admin__dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.m-admin__dates fieldset { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; }
.m-admin__dates legend { margin-bottom: 8px; padding: 0; font-size: .875rem; }
.m-admin__dates .m-field { width: 150px; margin-top: 0; background-color: #fff; }
.m-admin__dates .m-field--time { width: 120px; cursor: pointer; }
.m-check { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; }
.m-check input, .m-admin__table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary-500); }
.m-admin__tablewrap { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }
.m-admin__table { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: .8125rem; }
.m-admin__table th, .m-admin__table td { padding: 10px 6px; border-bottom: 1px solid var(--zinc-200); text-align: start; vertical-align: middle; }
.m-admin__table thead th { color: var(--zinc-500); font-weight: 600; white-space: nowrap; }
.m-admin__table tbody th { color: var(--zinc-800); font-weight: 700; white-space: nowrap; }
.m-admin__table tbody th small { display: block; color: var(--zinc-400); font-weight: 400; }
.m-admin__table tr.is-on { background: var(--primary-50); }
.m-admin__table .m-field { margin-top: 0; padding: 8px 10px; font-size: .8125rem; background: #fff; }
.m-admin__table .m-field--num { width: 64px; }
.m-admin__disc { white-space: nowrap; }
.m-admin__disc small { display: block; margin: 2px 0 4px; color: var(--zinc-400); }
.m-admin__disc .m-btn--sm { box-shadow: none; }
.m-warn { color: var(--rose-500) !important; }
.m-linkbtn { padding: 0; border: 0; background: none; color: var(--rose-500); font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; }
.m-body button:disabled { opacity: .45; cursor: not-allowed; }
.m-admin__bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--zinc-200); border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow-lg); }
.m-admin__diag summary { color: var(--zinc-800); font-weight: 700; cursor: pointer; }
.m-admin__diag dl { display: grid; gap: 8px 24px; margin: 16px 0 0; font-size: .8125rem; }
@media (min-width: 768px) { .m-admin__diag dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-admin__diag dt { color: var(--zinc-400); }
.m-admin__diag dd { margin: 0; color: var(--zinc-800); text-align: start; overflow-wrap: anywhere; }
.m-admin__code { margin: 8px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--zinc-100); color: var(--zinc-800); font-size: .8125rem; overflow-x: auto; }
.m-body code { padding: 0 4px; border-radius: 4px; background: var(--zinc-100); font-size: .8125rem; }
.m-field::placeholder { color: var(--zinc-300); }

/* ---------- ribbon badges (VIP / ویژه / اقتصادی) ---------- */
.m-badge, .m-card__badge, .m-tier__badge { display: block; }
.m-card__badge { position: absolute; top: -4px; right: -12px; z-index: 2; width: 106px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(43, 38, 33, .18)); transform: rotate(35deg); transform-origin: 50% 50%; }
@media (max-width: 767px) { .m-card__badge { top: -4px; right: -10px; width: 84px; } }
.m-tier__name { flex-wrap: wrap; }
.m-tier__badge { width: 92px; flex-shrink: 0; }
.m-admin__table select.m-field { min-width: 100px; }

/* ---------- referral: steps on the campaign page ---------- */
.m-steps { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: m-step; }
.m-steps li { position: relative; padding: 14px 16px 14px 16px; padding-inline-start: 56px; border-radius: 16px; background: var(--zinc-50); font-size: .875rem; line-height: 1.75rem; counter-increment: m-step; }
.m-steps li::before { content: counter(m-step, persian); position: absolute; inset-inline-start: 16px; top: 14px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-50); color: var(--gold-700); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--gold-500); }
.m-steps strong { display: block; color: var(--zinc-800); font-weight: 700; }
.m-referral__cta { margin-top: 20px; }
.m-referral__h3 { color: var(--zinc-800); font-size: 1rem; font-weight: 700; }

/* ---------- «کدهای من» ---------- */
.m-codes { max-width: 880px; }
.m-codes > * + * { margin-top: 24px; }
.m-codes__head .m-sub { margin-bottom: 0; }
.m-codes__h2 { margin-bottom: 16px; color: var(--zinc-800); font-size: 1rem; font-weight: 700; }
.m-codes__p { margin-top: 12px; font-size: .875rem; line-height: 1.9; }
.m-codes__share { display: block; margin: 20px 0 12px; font-size: .875rem; }
.m-codes__share .m-field { line-height: 1.9; }
/* the code itself looks like a gift tag: dashed edge, gold on cream */
.m-ticket { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 2px dashed var(--gold-500); border-radius: 14px; background: var(--gold-50); }
.m-ticket--off { border-color: var(--zinc-300); background: var(--zinc-100); }
.m-ticket__code { color: var(--zinc-800); font-size: 1.5rem; font-weight: 800; letter-spacing: .12em; direction: ltr; unicode-bidi: isolate; }
.m-ticket--off .m-ticket__code { color: var(--zinc-400); text-decoration: line-through; text-decoration-thickness: 2px; }
.m-ticket .m-btn--sm, .m-reward .m-btn--sm { box-shadow: none; }
.m-rewards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .m-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-reward { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--zinc-200); border-radius: 16px; background: #fff; }
.m-reward--ok { border-color: var(--sage-500); box-shadow: inset 0 0 0 1px var(--sage-500); }
.m-reward--muted .m-ticket__code { color: var(--zinc-400); }
.m-reward__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-reward .m-ticket__code { font-size: 1.125rem; }
.m-reward__state { padding: 2px 10px; border-radius: 999px; background: var(--zinc-100); color: var(--zinc-500); font-size: .75rem; white-space: nowrap; }
.m-reward--ok .m-reward__state { background: var(--sage-50); color: var(--sage-700); }
.m-reward__what { font-size: .875rem; }
.m-reward__dates { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: .75rem; color: var(--zinc-500); }
.m-reward__dates div { display: flex; gap: 6px; }
.m-reward__dates dd { margin: 0; color: var(--zinc-700); }
.m-reward .m-btn { align-self: flex-start; }

/* ---------- admin: state, checks, referral lists ---------- */
.m-admin__links { display: flex; flex-wrap: wrap; gap: 8px; }
.m-admin__state { display: grid; gap: 6px; font-size: .875rem; }
.m-admin__state strong { color: var(--zinc-800); }
.m-admin__checks { display: grid; gap: 10px; }
.m-admin__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 0; }
.m-admin__stats dt { color: var(--zinc-500); font-size: .75rem; }
.m-admin__stats dd { margin: 2px 0 0; color: var(--zinc-800); font-size: 1.125rem; font-weight: 800; }
.m-admin__stats small { color: var(--zinc-400); font-size: .75rem; font-weight: 400; }
.m-admin__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .875rem; }
.m-admin__search .m-field { width: 240px; margin-top: 0; background: #fff; }
.m-admin__search a { color: var(--primary-500); }
.m-admin__table--list { min-width: 760px; }
.m-admin__table--list td small { display: block; color: var(--zinc-400); }
.m-admin__acts { white-space: nowrap; }
.m-admin__acts .m-linkbtn + .m-linkbtn { margin-inline-start: 12px; }
.m-linkbtn--plain { color: var(--primary-500); }
.m-empty { color: var(--zinc-500); font-size: .875rem; }
/* codes are typed by people: Latin digits (the campaign font shows Persian digits) */
.m-ticket__code, .m-codeval, .m-codes__share .m-field { font-family: Tahoma, "Segoe UI", Arial, sans-serif; }
.m-admin form > .m-panel + .m-panel { margin-top: 24px; }

/* ---------- slider at the top (emam8 banner manager, 1920×700) ---------- */
.m-slides { position: relative; overflow: hidden; border-radius: 24px; background: var(--zinc-100); aspect-ratio: 1920 / 700; }
.m-slides__track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.m-slide { flex: 0 0 100%; height: 100%; }
.m-slide a { display: block; height: 100%; }
.m-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-slides__nav { position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--zinc-800); cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); }
.m-slides__nav:hover { color: var(--primary-500); }
.m-slides__nav--prev { inset-inline-start: 16px; }
.m-slides__nav--next { inset-inline-end: 16px; }
@media (min-width: 768px) { .m-slides__nav { display: flex; } }
.m-slides__dots { position: absolute; bottom: 12px; inset-inline: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.m-slides__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .65); cursor: pointer; transition: width .3s; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.m-slides__dot[aria-current="true"] { width: 24px; background: #fff; }
@media (max-width: 767px) { .m-slides { border-radius: 16px; } .m-slides__dots { bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .m-slides__track, .m-slides__dot { transition: none; } }
/* texts under the slider: no background picture */
.m-hero--plain { background: var(--gold-50); }
/* admin: banner form */
.m-admin__hero { display: grid; gap: 24px; }
@media (min-width: 1024px) { .m-admin__hero { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.m-admin__grid { display: grid; gap: 16px; font-size: .875rem; }
@media (min-width: 768px) { .m-admin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-admin__grid .m-admin__wide { grid-column: 1 / -1; }
.m-admin__grid .m-field { background: #fff; }
.m-admin input[dir="ltr"] { font-family: Tahoma, "Segoe UI", Arial, sans-serif; }

/* ---------- header: «دسته بندی ها» dropdown (Next.js CategoryDropdown) ---------- */
.m-header__menu { display: flex; align-items: center; gap: 16px; min-width: 0; }
@media (min-width: 1280px) { .m-header__menu { gap: 28px; } }
.m-cats { position: relative; flex: none; }
.m-cats__btn { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .875rem; cursor: pointer; white-space: nowrap; }
.m-cats__btn:hover, .m-cats.is-open .m-cats__btn { color: var(--primary-500); }
.m-cats__chev { font-size: .75rem; line-height: 1; transition: transform .2s; }
.m-cats.is-open .m-cats__chev { transform: rotate(180deg); }
.m-cats__panel { display: none; position: absolute; top: calc(100% + 14px); inset-inline-start: 0; z-index: 40; width: min(900px, calc(100vw - 32px)); max-height: 72vh; overflow-y: auto; padding: 24px; border: 1px solid var(--zinc-100); border-radius: 24px; background: #fff; box-shadow: 0 24px 48px -16px rgba(23, 33, 33, .22); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.m-cats__panel::before { content: ""; position: absolute; top: -16px; inset-inline: 0; height: 16px; }
.m-cats.is-open .m-cats__panel { display: grid; }
@media (hover: hover) and (min-width: 768px) { .m-cats:hover .m-cats__panel { display: grid; } .m-cats:hover .m-cats__chev { transform: rotate(180deg); } }
.m-cats__col { min-width: 0; }
.m-cats__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--primary-500); font-size: .875rem; font-weight: 800; }
.m-cats__col--gold .m-cats__title { color: var(--gold-700); }
.m-cats__col--rose .m-cats__title { color: var(--rose-700); }
.m-cats__col--sage .m-cats__title { color: var(--sage-700); }
.m-cats__off { padding: 0 8px; border-radius: 999px; background: var(--zinc-100); color: var(--zinc-700); font-size: .75rem; font-weight: 400; }
.m-cats__list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.m-cats__item { display: flex; align-items: center; gap: 12px; padding: 4px; border-radius: 12px; }
.m-cats__item:hover { background: var(--zinc-50); color: var(--primary-500); }
.m-cats__item img, .m-cats__noimg { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: var(--zinc-50); }
.m-cats__text { min-width: 0; }
.m-cats__name { display: block; overflow: hidden; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.m-cats__price { display: block; margin-top: 2px; color: var(--zinc-500); font-size: .75rem; }
.m-cats__all { display: inline-block; margin-top: 12px; font-size: .75rem; color: var(--zinc-700); text-decoration: underline; text-underline-offset: 4px; }
.m-cats__all:hover { color: var(--primary-500); }

/* admin: date + time fields with the Jalali calendar (mother-admin.js) */
.m-admin__dates fieldset.m-dt { display: grid; gap: 6px; }
.m-dt__row { display: flex; gap: 8px; }
.m-dt__date { position: relative; display: block; }
.m-dt__date .m-field { padding-left: 40px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%231E5B60' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat left 12px center / 18px; }
.m-dt .m-linkbtn { justify-self: start; font-size: .8125rem; }
.m-dt__note { color: var(--zinc-400); font-size: .75rem; }
.m-cal { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 288px; padding: 12px; border: 1px solid var(--zinc-200); border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -16px rgba(23, 33, 33, .28); direction: rtl; font-size: .875rem; }
.m-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.m-cal__head strong { color: var(--zinc-800); }
.m-cal__head button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: var(--zinc-50); color: var(--zinc-700); cursor: pointer; }
.m-cal__head button:hover { background: var(--primary-50); color: var(--primary-500); }
.m-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.m-cal__wd { padding: 4px 0; color: var(--zinc-400); font-size: .75rem; }
.m-cal__day { height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--zinc-800); font: inherit; cursor: pointer; }
.m-cal__day:hover, .m-cal__day:focus-visible { background: var(--primary-50); color: var(--primary-500); outline: none; }
.m-cal__day.is-friday { color: var(--rose-500); }
.m-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary-500); }
.m-cal__day[aria-pressed="true"] { background: var(--primary-500); color: #fff; }
.m-cal__foot { display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--zinc-100); }
.m-cal__foot button { padding: 0; border: 0; background: none; color: var(--primary-500); font: inherit; font-size: .8125rem; cursor: pointer; }

/* admin: campaign banners from the site banner manager */
.m-admin__banners { display: grid; gap: 16px 32px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--zinc-100); }
@media (min-width: 1024px) { .m-admin__banners { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.m-admin__h3 { margin: 0 0 12px; color: var(--zinc-800); font-size: .9375rem; font-weight: 700; }
.m-admin__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.m-admin__thumbs figure { margin: 0; }
.m-admin__thumbs img { display: block; width: 100%; aspect-ratio: 1920 / 700; object-fit: cover; border: 1px solid var(--zinc-200); border-radius: 10px; background: var(--zinc-100); }
.m-admin__thumbs figcaption { margin-top: 6px; color: var(--zinc-500); font-size: .75rem; }

/* admin: campaign name */
.m-admin__name { display: grid; gap: 6px; max-width: 460px; margin-bottom: 24px; font-size: .875rem; }
.m-admin__name .m-field { margin-top: 0; background: #fff; }
.m-admin__name .m-hint { margin: 0; }

/* top banner (one picture; its texts are designed on the picture) */
.m-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m-topbanner { position: relative; width: 100%; background: var(--zinc-100); line-height: 0; }
.m-topbanner a, .m-topbanner picture { display: block; }
.m-topbanner img { display: block; width: 100%; height: auto; }
.m-pagetitle { margin: 8px 0 0; font-size: 1.75rem; }