/* ═══════════════════════════════════════════════════════════
   ام کافه — استایل نئون (مشکی / طلایی / صورتی نئونی)
   ═══════════════════════════════════════════════════════════ */

/* ── فونت‌ها ── */
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Monoton"; src: url("fonts/Monoton.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ── ریست ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select { font-family: inherit; }

body {
  font-family: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  background-color: #050404;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 45, 149, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(245, 198, 106, 0.05), transparent);
  background-attachment: fixed;
  color: #f3ede2;
  line-height: 1.6;
}

.page { min-height: 100svh; display: flex; flex-direction: column; }
.main { flex: 1; }

/* ── اسکرول‌بار ── */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 45, 149, 0.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb { background: rgba(255, 45, 149, 0.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 149, 0.55); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── آیکون‌ها ── */
.ic { width: 1em; height: 1em; flex-shrink: 0; }
.ic-sm { font-size: 14px; }

/* ═══════════ افکت‌های نئون ═══════════ */
.font-neon-en { font-family: "Monoton", "Vazirmatn", sans-serif; font-weight: 400; }

.neon-text-pink {
  color: #fff0f7;
  text-shadow: 0 0 4px #ff2d95, 0 0 9px #ff2d95, 0 0 20px #ff2d95, 0 0 42px #ff2d95, 0 0 80px rgba(255, 45, 149, 0.75);
}
.neon-text-gold {
  color: #fff8e6;
  text-shadow: 0 0 4px #f5c66a, 0 0 9px #eeb64b, 0 0 20px #d4a017, 0 0 40px rgba(212, 160, 23, 0.7), 0 0 70px rgba(212, 160, 23, 0.45);
}
.neon-soft-pink {
  color: #ffd6ea;
  text-shadow: 0 0 4px rgba(255, 45, 149, 0.9), 0 0 12px rgba(255, 45, 149, 0.6), 0 0 28px rgba(255, 45, 149, 0.4);
}
.neon-soft-gold {
  color: #ffeec9;
  text-shadow: 0 0 4px rgba(245, 198, 106, 0.9), 0 0 12px rgba(245, 198, 106, 0.5), 0 0 26px rgba(212, 160, 23, 0.35);
}
.neon-text-white {
  color: #ffffff;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.55), 0 0 28px rgba(255, 255, 255, 0.35);
}
.neon-frame-pink {
  border: 2px solid rgba(255, 45, 149, 0.85);
  box-shadow: 0 0 6px rgba(255, 45, 149, 0.9), 0 0 18px rgba(255, 45, 149, 0.55), 0 0 42px rgba(255, 45, 149, 0.3),
    inset 0 0 8px rgba(255, 45, 149, 0.45), inset 0 0 22px rgba(255, 45, 149, 0.18);
}
.neon-frame-gold {
  border: 2px solid rgba(245, 198, 106, 0.85);
  box-shadow: 0 0 6px rgba(245, 198, 106, 0.85), 0 0 18px rgba(212, 160, 23, 0.5), 0 0 42px rgba(212, 160, 23, 0.28),
    inset 0 0 8px rgba(245, 198, 106, 0.4), inset 0 0 22px rgba(245, 198, 106, 0.15);
}
.neon-glow-pink-sm { box-shadow: 0 0 4px rgba(255, 45, 149, 0.8), 0 0 14px rgba(255, 45, 149, 0.4); }
.neon-glow-gold-sm { box-shadow: 0 0 4px rgba(245, 198, 106, 0.8), 0 0 14px rgba(212, 160, 23, 0.4); }

@keyframes neon-buzz {
  0%, 100% { box-shadow: 0 0 6px rgba(255,45,149,.9), 0 0 18px rgba(255,45,149,.55), 0 0 42px rgba(255,45,149,.3), inset 0 0 8px rgba(255,45,149,.45), inset 0 0 22px rgba(255,45,149,.18); }
  50%      { box-shadow: 0 0 8px rgba(255,45,149,1), 0 0 24px rgba(255,45,149,.7), 0 0 56px rgba(255,45,149,.4), inset 0 0 10px rgba(255,45,149,.55), inset 0 0 28px rgba(255,45,149,.24); }
}
.animate-neon-buzz { animation: neon-buzz 3.4s ease-in-out infinite; }

@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.animate-float-soft { animation: float-soft 5s ease-in-out infinite; }

@keyframes ic-spin { to { transform: rotate(12deg); } }
.group:hover .ic-spin, .btn-explore:hover .ic-spin { transform: rotate(12deg); }

@keyframes pulse-m { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.loading-m { animation: pulse-m 1.6s ease-in-out infinite; }

/* ═══════════ هیرو (تابلو) ═══════════ */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background-image: url("images/brick-wall.jpg");
  background-size: cover; background-position: center;
  opacity: 0.45;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.4), #050404);
}
.hero-inner {
  position: relative;
  max-width: 48rem; margin: 0 auto;
  min-height: 82svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5rem; padding: 4rem 1rem; text-align: center;
}
.glow { position: absolute; border-radius: 999px; pointer-events: none; }
.glow-pink {
  left: 50%; top: 50%; width: 18rem; height: 18rem;
  transform: translate(-50%, -50%);
  background: rgba(255, 45, 149, 0.2); filter: blur(100px);
}
.glow-gold {
  left: 30%; top: 35%; width: 10rem; height: 10rem;
  background: rgba(245, 198, 106, 0.1); filter: blur(80px);
}

/* تابلو */
.neon-sign {
  position: relative;
  border-radius: 2rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  padding: 2.5rem 2rem;
}
.sign-inner { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.sign-m { font-family: "Monoton", "Vazirmatn", sans-serif; font-size: 4.5rem; line-height: 1; color: #fff0f7;
  text-shadow: 0 0 4px #ff2d95, 0 0 9px #ff2d95, 0 0 20px #ff2d95, 0 0 42px #ff2d95, 0 0 80px rgba(255,45,149,.75); }
.sign-m-sm { font-size: 2.75rem; }
.sign-cafe { font-size: 3rem; font-weight: 900; letter-spacing: -0.02em; margin-top: -0.5rem; color: #fff8e6;
  text-shadow: 0 0 4px #f5c66a, 0 0 9px #eeb64b, 0 0 20px #d4a017, 0 0 40px rgba(212,160,23,.7), 0 0 70px rgba(212,160,23,.45); }
.sign-en { margin-top: 0.75rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.55em; color: #fff;
  text-shadow: 0 0 4px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.55), 0 0 28px rgba(255,255,255,.35); }

.screw {
  position: absolute; width: 12px; height: 12px; border-radius: 999px;
  background: #3a3a3a;
  box-shadow: 0 0 6px rgba(0,0,0,.9), inset 0 1px 2px rgba(255,255,255,.35);
}
.screw-tr { top: -6px; right: 24px; } .screw-tl { top: -6px; left: 24px; }
.screw-br { bottom: -6px; right: 24px; } .screw-bl { bottom: -6px; left: 24px; }

.hero-sub { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.badge {
  border-radius: 999px; background: rgba(0,0,0,.6);
  padding: 0.5rem 1.5rem; font-size: 0.875rem; font-weight: 700;
  color: #ffeec9; text-shadow: 0 0 4px rgba(245,198,106,.9), 0 0 12px rgba(245,198,106,.5), 0 0 26px rgba(212,160,23,.35);
}
.hero-desc { max-width: 28rem; font-size: 0.875rem; line-height: 1.75; color: #cfc4b6; text-wrap: balance; }
@media (min-width: 640px) { .hero-desc { font-size: 1rem; } }
.hl-pink { color: #ffd6ea; text-shadow: 0 0 4px rgba(255,45,149,.9), 0 0 12px rgba(255,45,149,.6); }
.hl-gold { color: #f5c66a; }

.btn-explore {
  margin-top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px; border: 1px solid rgba(245,198,106,.4);
  background: rgba(0,0,0,.6);
  padding: 0.75rem 1.75rem; font-size: 0.875rem; font-weight: 700; color: #f5c66a;
  transition: all .3s;
}
.btn-explore:hover {
  border-color: rgba(255,45,149,.7); color: #ff8ac2;
  box-shadow: 0 0 18px rgba(255,45,149,.45);
}
.btn-explore .ic { transition: transform .3s; }

/* ═══════════ کارت QR ═══════════ */
.qr-section { max-width: 48rem; margin: 0 auto; padding: 0 1rem 1rem; }
.qr-card {
  position: relative; overflow: hidden;
  border-radius: 1.5rem; border: 1px solid rgba(245,198,106,.2);
  background: rgba(12,10,13,.9);
  padding: 1.5rem;
  box-shadow: 0 0 40px rgba(255,45,149,.12);
}
@media (min-width: 640px) { .qr-card { padding: 2rem; } }
.qr-blob { position: absolute; width: 12rem; height: 12rem; border-radius: 999px; pointer-events: none; }
.qr-blob-a { left: -4rem; top: -4rem; background: rgba(255,45,149,.1); filter: blur(70px); }
.qr-blob-b { right: -4rem; bottom: -4rem; background: rgba(245,198,106,.1); filter: blur(70px); }

.qr-flex { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
@media (min-width: 640px) {
  .qr-flex { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .qr-info { order: 1; align-items: flex-start; text-align: right; }
  .qr-side { order: 2; }
}
.qr-info { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; order: 2; }
@media (min-width: 640px) { .qr-info { align-items: flex-start; text-align: right; } }
.qr-head { display: inline-flex; align-items: center; gap: 0.5rem; }
.qr-head .ic { font-size: 20px; color: #ff8ac2; }
.qr-head h2 { font-size: 1.25rem; font-weight: 900; }
@media (min-width: 640px) { .qr-head h2 { font-size: 1.5rem; } }
.qr-desc { max-width: 24rem; font-size: 0.875rem; line-height: 1.5rem; color: #cfc4b6; }
.qr-url {
  max-width: 100%; display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.5);
  padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #f5c66a;
}
.qr-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.25rem; }
@media (min-width: 640px) { .qr-actions { justify-content: flex-start; } }

.qr-side { order: 1; }
@media (min-width: 640px) { .qr-side { order: 2; } }
.qr-frame {
  border-radius: 1rem; background: #fff; padding: 0.75rem;
}
@media (min-width: 640px) { .qr-frame { padding: 1rem; } }
.qr-frame canvas, .qr-frame img { display: block; }
.qr-fallback { width: 168px; height: 168px; display: flex; align-items: center; justify-content: center;
  color: #0a0a0a; font-size: 11px; padding: 8px; text-align: center; direction: ltr; word-break: break-all; }
.qr-ver { margin-top: 0.75rem; text-align: center; font-size: 0.75rem; color: #a89c8f; }

/* ═══════════ ناوبری ═══════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,45,149,.2);
  background: rgba(5,4,4,.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(255,45,149,.12);
}
.nav-inner {
  max-width: 48rem; margin: 0 auto;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 0.75rem;
}
.nav-m { font-family: "Monoton", sans-serif; font-size: 1.5rem; line-height: 1; padding-left: 0.5rem; flex-shrink: 0;
  color: #fff0f7; text-shadow: 0 0 4px #ff2d95, 0 0 9px #ff2d95, 0 0 20px #ff2d95; }
.nav-title { font-weight: 900; font-size: 0.95rem; color: #ffd6ea; flex: 1;
  text-shadow: 0 0 4px rgba(255,45,149,.9), 0 0 12px rgba(255,45,149,.6); }
.nav-tabs { display: flex; flex: 1; align-items: center; gap: 0.5rem; overflow-x: auto; }
.tab {
  flex-shrink: 0; border-radius: 999px;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700;
  border: 1px solid rgba(245,198,106,.25); background: rgba(0,0,0,.4); color: #d9cdbf;
  transition: all .3s;
}
.tab:hover { border-color: rgba(245,198,106,.6); color: #f5c66a; }
.tab.active {
  border: 1px solid rgba(255,45,149,.8); background: rgba(255,45,149,.1); color: #ff8ac2;
  box-shadow: 0 0 4px rgba(255,45,149,.8), 0 0 14px rgba(255,45,149,.4);
}

.admin-banner {
  background: rgba(255,45,149,.1); padding: 0.5rem 1rem; text-align: center;
  font-size: 0.75rem; font-weight: 700; color: #ff8ac2;
  box-shadow: inset 0 0 20px rgba(255,45,149,.1);
}

/* ═══════════ وضعیت‌ها ═══════════ */
.state-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 6rem 1rem; text-align: center; }
.loading-m { font-family: "Monoton", sans-serif; font-size: 1.5rem; width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #ffd6ea;
  text-shadow: 0 0 4px rgba(255,45,149,.9), 0 0 12px rgba(255,45,149,.6);
  border: 2px solid rgba(255,45,149,.85);
  box-shadow: 0 0 6px rgba(255,45,149,.9), 0 0 18px rgba(255,45,149,.55), inset 0 0 8px rgba(255,45,149,.45); }
.error-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255,45,149,.6); background: rgba(0,0,0,.6);
  box-shadow: 0 0 4px rgba(255,45,149,.8), 0 0 14px rgba(255,45,149,.4); font-size: 24px; color: #ff8ac2; }
.state-text { font-size: 0.875rem; line-height: 1.5rem; color: #cfc4b6; }
.empty-text { padding: 5rem 1rem; text-align: center; font-size: 0.875rem; color: #a89c8f; }
.empty-cat { padding: 2.25rem 1rem; text-align: center; font-size: 0.85rem; color: #a89c8f; }

/* ═══════════ بخش‌های منو ═══════════ */
.menu-section { max-width: 48rem; margin: 0 auto; width: 100%; padding: 2rem 1rem; }

.section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.section-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1rem; border: 1px solid; background: rgba(0,0,0,.6); font-size: 24px;
}
.section-icon.pink { border-color: rgba(255,45,149,.6); color: #ff8ac2; box-shadow: 0 0 4px rgba(255,45,149,.8), 0 0 14px rgba(255,45,149,.4); }
.section-icon.gold { border-color: rgba(245,198,106,.6); color: #f5c66a; box-shadow: 0 0 4px rgba(245,198,106,.8), 0 0 14px rgba(212,160,23,.4); }
.section-head-txt { min-width: 0; flex: 1; }
.section-title { font-size: 1.5rem; font-weight: 900; }
@media (min-width: 640px) { .section-title { font-size: 1.875rem; } }
.section-tagline { margin-top: 2px; font-size: 0.75rem; color: #a89c8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .section-tagline { font-size: 0.875rem; } }

.cat-image {
  position: relative; margin-bottom: 1.5rem;
  aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: 1rem; border: 1px solid;
}
.cat-image.pink { border-color: rgba(255,45,149,.4); box-shadow: 0 0 4px rgba(255,45,149,.8), 0 0 14px rgba(255,45,149,.4); }
.cat-image.gold { border-color: rgba(245,198,106,.4); box-shadow: 0 0 4px rgba(245,198,106,.8), 0 0 14px rgba(212,160,23,.4); }
.cat-image img { width: 100%; height: 100%; object-fit: cover; }
.cat-image-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent, transparent); }
.cat-en { position: absolute; bottom: 0.75rem; right: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3em; color: rgba(255,255,255,.8); }

.items-card { overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255,255,255,.05); background: rgba(12,10,13,.8); }
.items-list { list-style: none; }
.item-row { padding: 1rem; transition: background-color .3s; }
@media (min-width: 640px) { .item-row { padding: 1rem 1.25rem; } }
.item-row + .item-row { border-top: 1px solid rgba(255,255,255,.05); }
.item-row:hover { background: rgba(255,45,149,.04); }
.item-row.dimmed { opacity: 0.45; }

.item-main { display: flex; align-items: flex-end; gap: 0.75rem; }
.item-txt { min-width: 0; flex: 1; }
.item-name-row { display: flex; align-items: center; gap: 0.5rem; }
.item-name { font-size: 1rem; font-weight: 700; color: #f3ede2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .item-name { font-size: 1.125rem; } }
.item-row:hover .item-name { color: #ffd6ea; }
.unavailable-badge {
  flex-shrink: 0; border-radius: 999px;
  border: 1px solid rgba(255,45,85,.5); background: rgba(255,45,85,.1);
  padding: 2px 8px; font-size: 10px; font-weight: 700; color: #ff6b7d;
}
.item-en { margin-top: 2px; font-size: 0.75rem; color: #a89c8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-note { margin-top: 0.25rem; font-size: 0.75rem; color: rgba(245,198,106,.8); }
.dot-leader { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 2px dotted rgba(245,198,106,.28); transform: translateY(-4px); }
.item-price { flex-shrink: 0; white-space: nowrap; font-size: 1rem; font-weight: 900; color: #f5c66a; }
@media (min-width: 640px) { .item-price { font-size: 1.125rem; } }
.item-price.off { color: rgba(245,198,106,.4); }
.toman { margin-right: 0.25rem; font-size: 0.75rem; font-weight: 500; color: rgba(245,198,106,.7); }
.item-noprice { flex-shrink: 0; font-size: 0.875rem; color: #a89c8f; }

.dual-note {
  border-top: 1px dashed rgba(245,198,106,.2); background: rgba(0,0,0,.4);
  padding: 0.625rem 1rem; text-align: center; font-size: 0.75rem; color: #a89c8f;
}

/* ═══════════ کنترل‌های مدیریت ═══════════ */
.item-admin {
  margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  border-top: 1px dashed rgba(255,255,255,.1); padding-top: 0.75rem;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 999px; border: 1px solid; padding: 0.375rem 0.75rem;
  font-size: 11px; font-weight: 700; transition: all .2s;
}
.chip .ic { font-size: 14px; }
.chip:disabled { opacity: 0.5; cursor: wait; }
.chip-gold { border-color: rgba(245,198,106,.4); color: #f5c66a; }
.chip-gold:hover { background: rgba(245,198,106,.1); }
.chip-red { border-color: rgba(255,45,85,.4); color: #ff6b7d; }
.chip-red:hover { background: rgba(255,45,85,.1); }
.chip-neutral { border-color: rgba(255,255,255,.15); color: #cfc4b6; }
.chip-neutral:hover { border-color: rgba(255,45,149,.5); color: #ff8ac2; }
.chip-neutral.chip-del:hover { border-color: rgba(255,45,85,.6); background: rgba(255,45,85,.1); color: #ff6b7d; }
.item-id { margin-right: auto; font-size: 10px; color: #6b6157; }

.btn-add {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 999px; border: 1px solid rgba(245,198,106,.6); background: rgba(245,198,106,.1);
  padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 900; color: #f5c66a;
  box-shadow: 0 0 4px rgba(245,198,106,.8), 0 0 14px rgba(212,160,23,.4);
  transition: background .2s;
}
.btn-add:hover { background: rgba(245,198,106,.2); }
.btn-add .ic { font-size: 16px; }

/* ═══════════ فوتر ═══════════ */
.site-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,45,149,.2);
  background: rgba(0,0,0,.7);
  padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(255,45,149,.1);
}
.footer-inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; }
.footer-m { font-family: "Monoton", sans-serif; font-size: 1.25rem; line-height: 1; color: #fff0f7;
  text-shadow: 0 0 4px #ff2d95, 0 0 9px #ff2d95, 0 0 20px #ff2d95; }
.footer-cafe { font-size: 1.125rem; font-weight: 900; color: #ffeec9;
  text-shadow: 0 0 4px rgba(245,198,106,.9), 0 0 12px rgba(245,198,106,.5), 0 0 26px rgba(212,160,23,.35); }
.footer-copy { font-size: 0.75rem; color: #a89c8f; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.footer-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 999px; border: 1px solid rgba(255,45,149,.4);
  padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 700; color: #ff8ac2;
  text-decoration: none; transition: all .3s;
}
.footer-btn:hover { border-color: rgba(255,45,149,.8); box-shadow: 0 0 14px rgba(255,45,149,.4); }
.footer-btn.ghost { border-color: rgba(245,198,106,.3); color: #a89c8f; }
.footer-btn.ghost:hover { border-color: rgba(245,198,106,.6); color: #f5c66a; box-shadow: none; }

/* ═══════════ ورود (OTP) ═══════════ */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.login-card {
  width: 100%; max-width: 380px;
  border-radius: 1.5rem; border: 1px solid rgba(255,45,149,.25);
  background: rgba(12,10,13,.9);
  padding: 2.5rem 2rem;
  box-shadow: 0 0 40px rgba(255,45,149,.15), inset 0 0 30px rgba(255,45,149,.04);
  text-align: center;
}
.login-sign { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin-bottom: 1.25rem; }
.login-title { font-size: 1.25rem; font-weight: 900; color: #ffeec9;
  text-shadow: 0 0 4px rgba(245,198,106,.9), 0 0 12px rgba(245,198,106,.5), 0 0 26px rgba(212,160,23,.35); }
.login-sub { font-size: 0.8rem; color: #a89c8f; margin-bottom: 1.5rem; }
.otp-row { display: flex; justify-content: center; gap: 0.625rem; direction: ltr; }
.otp-input {
  width: 52px; height: 60px;
  border-radius: 0.875rem; border: 2px solid rgba(255,45,149,.35);
  background: rgba(5,4,4,.8);
  color: #f3ede2; font-size: 1.5rem; font-weight: 900; text-align: center;
  outline: none; transition: all .2s;
  caret-color: #ff2d95;
}
.otp-input:focus {
  border-color: rgba(255,45,149,.9);
  box-shadow: 0 0 6px rgba(255,45,149,.9), 0 0 18px rgba(255,45,149,.55), inset 0 0 8px rgba(255,45,149,.25);
}
.otp-input.checking { border-color: rgba(245,198,106,.8); box-shadow: 0 0 12px rgba(245,198,106,.5); }
.otp-input.ok { border-color: rgba(74,222,128,.8); box-shadow: 0 0 12px rgba(74,222,128,.4); }
.login-error { margin-top: 1rem; font-size: 0.8rem; font-weight: 700; color: #ff6b7d; }
.login-hint { margin-top: 1rem; font-size: 0.7rem; line-height: 1.9; color: #6b6157; }
.login-hint strong { color: #f5c66a; }
.login-hint code { background: #000; padding: 2px 6px; border-radius: 6px; color: #ff8ac2; }
.login-back { display: inline-block; margin-top: 1.25rem; font-size: 0.75rem; color: #a89c8f; text-decoration: none; transition: color .2s; }
.login-back:hover { color: #ff8ac2; }

/* ═══════════ پنل مدیریت ═══════════ */
.admin-body { background-image:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,45,149,.08), transparent),
  radial-gradient(ellipse 60% 40% at 90% 110%, rgba(245,198,106,.05), transparent); }
.admin-wrap { max-width: 56rem; margin: 0 auto; padding: 1rem 0 3rem; flex: 1; width: 100%; }
.admin-tip {
  max-width: 56rem; margin: 0 auto; padding: 0.75rem 1rem 0;
  font-size: 0.8rem; color: #a89c8f; line-height: 2;
}
.admin-section { max-width: 56rem; }

/* ═══════════ مودال‌ها ═══════════ */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2,1,2,.7); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s;
}
.overlay.show { opacity: 1; }
.modal {
  position: fixed; z-index: 95; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; pointer-events: none;
}
.modal-card {
  pointer-events: auto;
  width: 100%; max-width: 420px; max-height: 90svh; overflow-y: auto;
  border-radius: 1.25rem; border: 1px solid rgba(255,45,149,.35);
  background: #0c0a0d; padding: 1.5rem;
  box-shadow: 0 0 40px rgba(255,45,149,.25);
  opacity: 0; transform: translateY(14px) scale(.97); transition: all .25s;
}
.modal.show .modal-card { opacity: 1; transform: translateY(0) scale(1); }
.modal-danger { border-color: rgba(255,45,85,.45); box-shadow: 0 0 40px rgba(255,45,85,.2); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.modal-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 900; color: #ffd6ea; }
.modal-title .ic { font-size: 20px; color: #ff8ac2; }
.modal-title.danger { color: #ff6b7d; }
.modal-title.danger .ic { color: #ff6b7d; }
.modal-x {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.15); color: #cfc4b6; font-size: 16px;
  transition: all .2s;
}
.modal-x:hover { border-color: rgba(255,45,149,.5); color: #ff8ac2; }
.modal-desc { font-size: 0.875rem; line-height: 1.75rem; color: #cfc4b6; margin-bottom: 0.25rem; }
.modal-foot { display: flex; gap: 0.5rem; justify-content: flex-start; margin-top: 1.25rem; }

.form-grid { display: flex; flex-direction: column; gap: 0.875rem; }
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field > span { font-size: 0.75rem; font-weight: 700; color: #cfc4b6; }
.field > span em { color: #ff6b7d; font-style: normal; }
.field-hint { font-style: normal; font-weight: 400; font-size: 10px; color: #6b6157; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.input {
  width: 100%;
  border-radius: 0.75rem; border: 1px solid rgba(255,45,149,.25);
  background: rgba(5,4,4,.8);
  padding: 0.625rem 0.875rem;
  color: #f3ede2; font-size: 0.875rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: rgba(255,45,149,.7); box-shadow: 0 0 10px rgba(255,45,149,.3); }
.input::placeholder { color: #55504a; }
select.input option { background: #0c0a0d; color: #f3ede2; }
.form-error { margin-top: 0.75rem; font-size: 0.75rem; font-weight: 700; color: #ff6b7d; }

/* ═══════════ دکمه‌ها ═══════════ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px; border: 1px solid;
  padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 700;
  transition: all .25s; text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn .ic { font-size: 16px; }
.btn-gold { border-color: rgba(245,198,106,.5); color: #f5c66a; background: transparent; }
.btn-gold:hover:not(:disabled) { border-color: rgba(245,198,106,1); box-shadow: 0 0 16px rgba(245,198,106,.45); }
.btn-pink { border-color: rgba(255,45,149,.5); color: #ff8ac2; background: transparent; }
.btn-pink:hover:not(:disabled) { border-color: rgba(255,45,149,1); box-shadow: 0 0 16px rgba(255,45,149,.45); }
.btn-primary { border-color: rgba(255,45,149,.8); background: rgba(255,45,149,.15); color: #ff8ac2; font-weight: 900; }
.btn-primary:hover:not(:disabled) { background: rgba(255,45,149,.3); box-shadow: 0 0 18px rgba(255,45,149,.5); }
.btn-danger { border-color: rgba(255,45,85,.7); background: rgba(255,45,85,.15); color: #ff6b7d; font-weight: 900; }
.btn-danger:hover:not(:disabled) { background: rgba(255,45,85,.25); }
.btn-ghost { border-color: rgba(255,255,255,.15); background: transparent; color: #cfc4b6; }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.05); color: #f3ede2; }
.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.75rem; }

/* ═══════════ توست ═══════════ */
.toast {
  position: fixed; z-index: 120;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(20px);
  max-width: min(92vw, 420px);
  border-radius: 999px; border: 1px solid rgba(255,45,149,.5);
  background: rgba(12,10,13,.95);
  padding: 0.625rem 1.25rem;
  font-size: 0.8rem; font-weight: 700; color: #ffd6ea;
  box-shadow: 0 0 20px rgba(255,45,149,.4);
  opacity: 0; transition: opacity .3s, transform .3s;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════ چاپ ═══════════ */
@media print {
  body { background: #fff !important; }
  .hero, .nav, .site-footer, .toast, .overlay, .modal, .btn-explore,
  .qr-actions, .admin-banner { display: none !important; }
  .qr-card { border-color: #ddd !important; box-shadow: none !important; background: #fff !important; }
  .qr-desc, .qr-head h2 { color: #111 !important; text-shadow: none !important; }
  .qr-url { border-color: #ccc; background: #fff; color: #333; }
  .qr-frame { background: #fff; box-shadow: none; }
}

/* اعداد فارسی برای متون ثابت */
.fa-digits { letter-spacing: 0; }