/*
 * طرحِ «جدید»ِ صفحهٔ مشتری (۱۴۰۵/۰۷/۰۶) — فقط وقتی تنظیمات = modern بارگذاری می‌شود؛ «کلاسیک» = app.css بی‌این فایل.
 * ایده: برچسبِ هولوگرامِ ضدِّ تقلب روی کالای اصل. تنها جسارتِ طرح «مهرِ اصالت» با حاشیهٔ هولوگرامیِ آرام‌چرخان است؛
 * بقیه ساکت: کاغذِ سرد، جوهرِ سرمه‌ای، سریال مثلِ پلاکِ حک‌شده.
 * ⛔ بی‌منبعِ بیرونی، بی‌استایلِ inline (CSP). همه زیرِ body.theme-modern تا روی کلاسیک اثر نکند.
 */
body.theme-modern {
  --ink: #14213D; --paper: #F7F8FB; --card: #FFFFFF; --muted: #5B6478; --line: #E3E7EF;
  --ok: #0E9F8A; --ok-bg: #E4F6F2; --warn: #B7791F; --warn-bg: #FDF3E1; --bad: #C0392B; --bad-bg: #FBE9E7;
  --holo: conic-gradient(#7F5AF0, #2CB1BC, #9BE7D8, #F0A6CA, #7F5AF0);
  --plate: linear-gradient(180deg, #F1F3F8, #DDE3EC);
  --shadow: 0 14px 36px rgba(20, 33, 61, .16);
  background: var(--paper);
  color: var(--ink);
  background-image: linear-gradient(180deg, var(--ink) 0, var(--ink) 170px, transparent 170px);
  background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
  body.theme-modern {
    --ink: #E8ECF5; --paper: #0D1424; --card: #151F33; --muted: #9AA6BD; --line: #25324C;
    --ok: #3DD6BC; --ok-bg: #0F2E2B; --warn: #F0C06A; --warn-bg: #33280F; --bad: #FF8A7A; --bad-bg: #3A1714;
    --plate: linear-gradient(180deg, #1E2A43, #16213A);
    --shadow: 0 14px 36px rgba(0, 0, 0, .45);
    background-image: linear-gradient(180deg, #060B16 0, #060B16 170px, transparent 170px);
  }
}

body.theme-modern .wrap { padding-top: 20px; }

/* ── عکسِ کالا: کارتِ سفید روی نوارِ جوهری ── */
body.theme-modern .gallery { margin: 0 0 18px; padding: 0; gap: 10px; }
body.theme-modern .gallery img {
  background: var(--card); border-radius: 22px; box-shadow: var(--shadow);
  max-height: 46vh; padding: 14px;
}
body.theme-modern .title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 6px; line-height: 1.35; }
body.theme-modern .gallery ~ .title { margin-top: 4px; }
/* وقتی عکس نیست، عنوان روی نوارِ جوهری است */
body.theme-modern main > .title:first-child { color: #fff; margin: 34px 0 60px; }
body.theme-modern .subtitle { color: var(--muted); font-size: .98rem; }

/* ── کارتِ وضعیت با مهرِ اصالت ── */
body.theme-modern .status {
  position: relative; text-align: center; background: var(--card); border: 0; border-radius: 24px;
  box-shadow: var(--shadow); padding: 60px 20px 22px; margin: 64px 0 18px;
}
body.theme-modern .seal {
  display: grid; place-items: center; position: absolute; top: -48px; left: 50%; margin-left: -48px;
  width: 96px; height: 96px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
  animation: wm-stamp .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
body.theme-modern .seal-foil {
  position: absolute; inset: 0; border-radius: 50%; background: var(--line);
  -webkit-mask: radial-gradient(circle, transparent 38px, #000 39px); mask: radial-gradient(circle, transparent 38px, #000 39px);
}
/* فقط کالای اصل حاشیهٔ هولوگرامی می‌گیرد — نشانهٔ «اصل» */
body.theme-modern .seal-ok .seal-foil { background: var(--holo); animation: wm-spin 9s linear infinite; }
body.theme-modern .seal-warn .seal-foil { background: var(--warn); opacity: .55; }
body.theme-modern .seal-bad .seal-foil { background: var(--bad); opacity: .55; }
body.theme-modern .seal svg { position: relative; width: 40px; height: 40px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.theme-modern .seal-ok svg { stroke: var(--ok); }
body.theme-modern .seal-warn svg { stroke: var(--warn); }
body.theme-modern .seal-bad svg { stroke: var(--bad); }

body.theme-modern .badge { display: block; background: none !important; padding: 0; margin: 0 0 10px; font-size: 1.25rem; }
body.theme-modern .status p { margin: 6px 0; }
body.theme-modern .hint { color: var(--muted); }

/* ── سریال: پلاکِ حک‌شده ── */
body.theme-modern .plate {
  background: var(--plate); border-radius: 14px; padding: 12px 12px 14px; margin: 14px 0 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(20, 33, 61, .08);
}
body.theme-modern .plate-label { font-size: .78rem; color: var(--muted); margin: 0 0 2px !important; }
body.theme-modern .plate .serial {
  background: none; padding: 0; margin: 0 !important; font-size: 1.3rem; letter-spacing: .2em; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) { body.theme-modern .plate .serial { text-shadow: none; } }

/* ── فرمِ ثبت ── */
body.theme-modern .regform { text-align: start; margin-top: 18px; }
body.theme-modern .regform label { font-weight: 500; font-size: .92rem; }
body.theme-modern input:not([type=checkbox]), body.theme-modern select {
  min-height: 52px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); padding: 12px 14px;
}
body.theme-modern input:focus, body.theme-modern select:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: transparent; }
body.theme-modern label.check { background: var(--paper); border-radius: 14px; padding: 12px; margin-top: 4px; }
body.theme-modern label.check input { accent-color: var(--ink); }
body.theme-modern .btn.primary {
  min-height: 54px; border-radius: 14px; background: var(--ink); border-color: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 1.05rem;
}
body.theme-modern .note { border-radius: 14px; padding: 12px 14px; }
body.theme-modern .err { text-align: start; }

/* ── تاریخ‌ها ── */
body.theme-modern .facts { grid-template-columns: 1fr auto; text-align: start; gap: 0; margin-top: 12px; }
body.theme-modern .facts dt, body.theme-modern .facts dd { padding: 10px 0; border-top: 1px solid var(--line); }
body.theme-modern .facts dd { text-align: end; }

/* ── دکمه‌های کالا (۱۴۰۵/۰۷/۰۷، خواستهٔ مالک): «چیزی ارزشمند» — سرمه‌ایِ عمیق با قابِ طلاییِ نازک، متن وسط‌چین،
 *    و برقِ نرمی که هر چند ثانیه یک بار از رویش رد می‌شود (مثلِ نورِ روی جعبهٔ جواهر). در «کالای اصل» زیرِ سریال است. */
body.theme-modern .buttons { gap: 12px; margin: 18px 0 4px; }
body.theme-modern .status .buttons { margin: 18px 0 6px; }
body.theme-modern .buttons .btn {
  position: relative; overflow: hidden; isolation: isolate;
  justify-content: center; text-align: center; min-height: 58px; padding: 12px 22px; border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, #22335C 0%, #14213D 55%, #0C1528 100%) padding-box,
    linear-gradient(120deg, #8A6A2F, #F3E3B5 28%, #B8914A 50%, #F7EBC6 72%, #8A6A2F) border-box;
  color: #F5E7C4; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(12, 21, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .10);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.theme-modern .buttons .btn span { position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
/* برق */
body.theme-modern .buttons .btn::before {
  content: ""; position: absolute; inset: -2px; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(247, 235, 198, .30) 50%, transparent 62%);
  transform: translateX(-120%); animation: wm-sheen 5.5s ease-in-out 1.2s infinite;
}
body.theme-modern .buttons .btn:hover { box-shadow: 0 14px 30px rgba(12, 21, 40, .36), inset 0 1px 0 rgba(255, 255, 255, .14); }
body.theme-modern .buttons .btn:active { transform: scale(.985); }
body.theme-modern .buttons .btn:focus-visible { outline: 2px solid #D9B872; outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  body.theme-modern .buttons .btn { box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); }
}
@keyframes wm-sheen { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { body.theme-modern .buttons .btn::before { animation: none; display: none; } }

body.theme-modern .lfoot { display: block; text-align: center; color: var(--muted); font-size: .75rem; letter-spacing: .04em; padding: 8px 16px 28px; }
body.theme-modern .foot a { color: var(--ink); }

@keyframes wm-spin { to { transform: rotate(360deg); } }
@keyframes wm-stamp { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.theme-modern .seal, body.theme-modern .seal-ok .seal-foil { animation: none; }
}

/* ── عکسِ کالا (۱۴۰۵/۰۷/۰۶، خواستهٔ مالک) ──
 * زمینه‌دار: خودِ عکس گوشه‌گرد است و تا لبه پر می‌کند؛ نه حاشیهٔ داخلی، نه کارتِ سفیدِ پشت ⇒ رنگِ زمینهٔ عکس درز نمی‌سازد.
 * بی‌زمینه (PNGِ شفاف): بی‌کارت و بی‌زمینه؛ فقط سایهٔ نرم زیرِ خودِ شکلِ کالا (drop-shadow) ⇒ کالا روی صفحه «معلق» است. */
body.theme-modern .gallery img.is-photo { padding: 0; background: none; object-fit: cover; }
body.theme-modern .gallery img.is-cutout {
  padding: 8px 12px 26px; background: transparent; box-shadow: none; border-radius: 0; object-fit: contain;
}
/* 🔴 سایه با filter: drop-shadow نه — Chrome عنصرِ فیلتردار را روی لایهٔ جدا می‌کشد و رنگِ زمینه داخلِ همان
 *    مستطیل کمی عوض می‌شود (درزِ مستطیلی زیرِ کالا؛ آزموده ۰۷/۰۶). سایه = بیضیِ نرمِ زیرِ کالا در پس‌زمینهٔ قاب. */
body.theme-modern .gallery.cutout {
  background: radial-gradient(ellipse 38% 7% at 50% calc(100% - 14px), rgba(20, 33, 61, .26), transparent 72%);
}
@media (prefers-color-scheme: dark) {
  body.theme-modern .gallery.cutout { background: radial-gradient(ellipse 38% 7% at 50% calc(100% - 14px), rgba(0, 0, 0, .7), transparent 72%); }
}

/* ── نوارِ لوگوی برند (۱۴۰۵/۰۷/۰۶، خواستهٔ مالک): بالای صفحه، وسط‌چین، یک پرده روشن‌تر از آبیِ زمینه ── */
body.theme-modern .brandbar {
  margin: -20px calc(50% - 50vw) 18px; padding: 14px 16px;
  background: #223462; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 -1px 0 rgba(0, 0, 0, .12) inset;
}
body.theme-modern .brandbar img { display: inline-block; width: auto; height: auto; max-height: 44px; max-width: 60%; vertical-align: middle; }
/* با نوارِ لوگو، نوارِ جوهریِ پشتِ عکس هم پایین‌تر می‌آید تا عکس مثلِ قبل رویش بنشیند */
body.theme-modern:has(.brandbar) { background-image: linear-gradient(180deg, var(--ink) 0, var(--ink) 250px, transparent 250px); }
@media (prefers-color-scheme: dark) {
  body.theme-modern .brandbar { background: #111D36; }
  body.theme-modern:has(.brandbar) { background-image: linear-gradient(180deg, #060B16 0, #060B16 250px, transparent 250px); }
}