:root{
  --rose-light:#F7DCD6;
  --rose:#E8A39B;
  --rose-deep:#D98178;
  --navy-deep:#28415E;
  --navy:#3A5A80;
  --navy-pale:#7C99B7;
  --cream:#FBF3EE;
  --cream-2:#FDF8F5;
  --ink:#2D2A32;
  --ink-soft:#6B6470;
  --gold:#C98B6E;
  --line:#EADDD6;
  --shadow: 0 12px 32px -16px rgba(40,65,94,.28);
  --radius: 22px;
  --glass-bg: rgba(255,255,255,.46);
  --glass-bg-strong: rgba(255,255,255,.62);
  --glass-border: rgba(255,255,255,.65);
  --glass-shadow: 0 14px 38px -18px rgba(40,65,94,.35);
}
*{box-sizing:border-box;}
html{background:var(--cream);}
html,body{margin:0;padding:0;}
body{
  position:relative;
  background:transparent;
  color:var(--ink);
  font-family:'Vazirmatn',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* animated mesh background, sits behind all content, visible through glass surfaces */
body::before{
  content:"";
  position:fixed;
  inset:-25% -15%;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 24%, rgba(232,163,155,.55), transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(58,90,128,.45), transparent 50%),
    radial-gradient(circle at 30% 78%, rgba(201,139,110,.32), transparent 50%),
    radial-gradient(circle at 86% 80%, rgba(247,220,214,.65), transparent 50%),
    radial-gradient(circle at 55% 50%, rgba(232,163,155,.18), transparent 60%);
  filter:blur(70px) saturate(115%);
  animation: bgDrift 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgDrift{
  0%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%{ transform: translate3d(-3%,2.5%,0) scale(1.12) rotate(4deg); }
  100%{ transform: translate3d(2.5%,-3%,0) scale(1.04) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}
.wordmark{
  font-family:'Tangerine',cursive;
  direction:ltr;
  font-weight:700;
  line-height:.85;
}
.eyebrow{
  font-family:'Montserrat',sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  direction:ltr;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;}
img{max-width:100%;display:block;}
::-webkit-scrollbar{height:6px;width:6px;}
::-webkit-scrollbar-thumb{background:var(--rose);border-radius:10px;}

/* ===== App shell ===== */
#app{min-height:100vh;display:flex;flex-direction:column;}

/* ===== Top nav (view switch, lightweight) ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;
  animation: fadeDown .6s ease both;
}
@keyframes fadeDown{ from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
@keyframes popIn{ 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1); opacity:1;} }
@keyframes heartBeat{ 0%,100%{transform:scale(1);} 25%{transform:scale(1.3);} 45%{transform:scale(.95);} 65%{transform:scale(1.15);} }
@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(40,65,94,.35);} 100%{box-shadow:0 0 0 14px rgba(40,65,94,0);} }
@keyframes shimmer{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.topbar .brand-mini{display:flex;align-items:center;gap:8px;}
.brand-mini .wordmark{
  font-size:28px;
  background:linear-gradient(90deg, var(--navy-deep), var(--rose-deep), var(--navy-deep));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.topbar nav button{
  font-size:12.5px;padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:transparent;color:var(--ink-soft);font-weight:600;
  transition:.25s ease;
}
.topbar nav button:hover{background:rgba(255,255,255,.5);}
.topbar nav button.active{background:var(--navy-deep);color:#fff;box-shadow:0 6px 14px -6px rgba(40,65,94,.5);}

/* روی صفحه‌های خیلی باریک (مثل گوشی‌های تاشو)، به‌جای فشرده/سرریز شدن
   محتوای نوار بالا، لوگو و منو تمیز زیر هم می‌آیند. چون ارتفاع واقعی نوار
   با جاوااسکریپت اندازه‌گیری می‌شود، نوار دسته‌بندی همیشه درست زیرش می‌نشیند. */
@media(max-width:380px){
  .topbar{flex-wrap:wrap;justify-content:center;row-gap:8px;padding:12px 14px;}
  .topbar nav{width:100%;justify-content:center;}
}

/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;
  padding:54px 20px 64px;
  text-align:center;
  background:linear-gradient(160deg, rgba(247,220,214,.78), rgba(247,220,214,.55));
  backdrop-filter:blur(6px);
}
.blob{position:absolute;border-radius:50%;filter:blur(0px);opacity:.9;}
.hero .blob.b1{width:340px;height:340px;background:radial-gradient(circle at 30% 30%, var(--navy), var(--navy-deep));top:-120px;left:-90px;opacity:.95;animation:floatY 9s ease-in-out infinite;}
.hero .blob.b2{width:260px;height:260px;background:radial-gradient(circle at 60% 40%, var(--rose), var(--rose-deep));bottom:-110px;right:-70px;animation:floatY 11s ease-in-out infinite 1s;}
.hero .blob.b3{width:120px;height:120px;background:var(--cream-2);bottom:30px;left:8%;opacity:.5;animation:floatY 7s ease-in-out infinite .5s;}
.hero-content{position:relative;z-index:2;animation:fadeInUp .8s ease both .1s;}
.brand-ring{
  width:150px;height:150px;border-radius:50%;
  border:1.5px solid var(--rose);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;background:var(--glass-bg-strong);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 14px -8px rgba(40,65,94,.28);
  animation:floatY 6s ease-in-out infinite;
}
.brand-mark{display:flex;flex-direction:column;align-items:center;}
.brand-leaf{margin-bottom:-6px;}
.brand-mark-name{font-family:'Tangerine',cursive;font-size:50px;line-height:1;color:var(--navy-deep);}
.brand-mark-sub{font-family:'Montserrat',sans-serif;font-size:9px;letter-spacing:.16em;font-weight:700;color:var(--ink-soft);margin-top:2px;}
.hero h1{font-size:clamp(38px,10vw,50px);margin:6px 0 2px;color:var(--navy-deep);}
.hero .eyebrow{font-size:12px;color:var(--navy);margin-bottom:14px;}
.heart{color:var(--rose-deep);font-size:14px;display:inline-block;animation:heartBeat 1.6s ease-in-out infinite;}
.hero p.tag{max-width:420px;margin:0 auto;color:var(--ink-soft);font-size:14.5px;line-height:1.9;}
.leaf-doodle{position:absolute;opacity:.55;}

/* ===== Category nav ===== */
.cat-bar{
  position:sticky;top:var(--topbar-h,53px);z-index:40;
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--glass-border);
  display:flex;gap:8px;overflow-x:auto;
  padding:14px 18px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.cat-pill{
  flex:none;padding:9px 18px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--navy-deep);
  background:rgba(255,255,255,.55);border:1px solid var(--glass-border);
  backdrop-filter:blur(6px);
  transition:.25s ease;
  scroll-snap-align:start;
}
.cat-pill:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(40,65,94,.4);}
.cat-pill.active{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);}

/* ===== Menu grid ===== */
.menu-wrap{flex:1;padding:24px 18px ;max-width:980px;margin:0 auto;width:100%;}
/* وقتی روی یک دسته کلیک می‌شود و صفحه اسکرول می‌شود، این فاصله باعث می‌شود
   عنوان دسته درست زیر نوارهای شناور (بالا + دسته‌بندی) بنشیند، نه زیرشان پنهان شود */
.cat-section{margin-bottom:36px;scroll-margin-top:var(--sticky-h,110px);}
.cat-title{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  color:var(--navy-deep);font-size:19px;font-weight:700;
}
.cat-title::after{content:"";flex:1;height:1px;background:var(--line);}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
}
.item-card{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--glass-shadow);
  border:1px solid var(--glass-border);
  display:flex;flex-direction:column;
  position:relative;
  animation:fadeInUp .6s ease both;
  transition:transform .35s ease, box-shadow .35s ease;
}
.item-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -20px rgba(40,65,94,.45);}
.item-card.unavailable{opacity:.5;}
.item-photo{
  height:150px;width:100%;object-fit:cover;background:var(--rose-light);
  transition:transform .5s ease;
}
.item-card:hover .item-photo{transform:scale(1.06);}
.item-photo.placeholder{
  display:flex;align-items:center;justify-content:center;
  color:var(--navy-pale);font-size:12px;
  background:linear-gradient(135deg, var(--rose-light), var(--cream-2));
}
.item-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;}
.item-name{font-weight:700;font-size:15.5px;color:var(--ink);}
.fav-btn{background:none;color:var(--line);font-size:18px;line-height:1;transition:transform .2s ease,color .2s ease;}
.fav-btn:hover{transform:scale(1.15);}
.fav-btn.active{color:var(--rose-deep);animation:heartBeat .5s ease;}
.item-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.7;min-height:18px;}
.item-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px;}
.item-price{font-weight:700;color:var(--navy-deep);font-size:14px;}
.item-price small{font-weight:500;color:var(--ink-soft);font-size:11px;}
.soldout-tag{
  position:absolute;top:10px;right:10px;background:var(--navy-deep);color:#fff;
  font-size:10px;padding:3px 9px;border-radius:999px;
}
.empty-state{text-align:center;color:var(--ink-soft);padding:40px 0;font-size:13.5px;}

/* ===== Loyalty floating CTA ===== */
.loyalty-fab{
  position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:18px;z-index:45;
  background:var(--navy-deep);color:#fff;border-radius:999px;
  padding:13px 18px;display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;box-shadow:var(--shadow);
  animation: pulseRing 2.6s ease-out infinite, fadeInUp .6s ease both .3s;
  transition:transform .25s ease;
}
.loyalty-fab:hover{transform:translateY(-3px) scale(1.03);}
.loyalty-fab .heart{color:var(--rose);}

.site-footer{
  max-width:640px;margin:44px auto 20px;padding:26px 20px 90px;
  border-top:1px solid var(--line);text-align:center;
}
.footer-social{display:flex;justify-content:center;gap:12px;margin-bottom:16px;}
.social-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.7);color:var(--navy-deep);
  border:1px solid var(--line);transition:transform .2s ease,background .2s ease;
}
.social-btn:hover{transform:translateY(-2px);background:var(--rose-light);}
.footer-address{color:var(--ink-soft);font-size:12.5px;line-height:1.9;max-width:420px;margin:0 auto 14px;}
.footer-credit{color:var(--ink-soft);font-size:11.5px;padding-bottom:22px;}
.footer-credit a{color:var(--rose-deep);font-weight:700;}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(40,33,30,.45);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:100;backdrop-filter:blur(4px);
  animation:fadeDown .25s ease both;
}
@media(min-width:640px){.modal-overlay{align-items:center;}}
.modal{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  width:100%;max-width:440px;
  border-radius:24px 24px 0 0;padding:26px 22px calc(28px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;
  box-shadow:0 -10px 40px rgba(0,0,0,.2);
  border:1px solid var(--glass-border);
  animation:popIn .35s cubic-bezier(.2,.9,.3,1.2) both;
}
@media(min-width:640px){.modal{border-radius:24px;}}
.modal h2{color:var(--navy-deep);font-size:21px;margin:0 0 4px;}
.modal .sub{color:var(--ink-soft);font-size:12.5px;margin-bottom:18px;line-height:1.8;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.field input,.field textarea,.field select{
  width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
  font-family:inherit;font-size:13.5px;background:rgba(255,255,255,.7);color:var(--ink);
  transition:.2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--rose);background:#fff;}
.field textarea{resize:vertical;min-height:60px;}
.pw-wrap{position:relative;}
.pw-wrap input{padding:11px 13px 11px 38px;}
.pw-toggle{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;padding:6px;border-radius:8px;
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  transition:color .2s ease,background .2s ease;
}
.pw-toggle:hover{color:var(--navy-deep);background:rgba(0,0,0,.05);}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.btn-row{display:flex;gap:10px;margin-top:18px;}
.btn{
  flex:1;padding:13px;border-radius:12px;font-weight:700;font-size:13.5px;text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--navy-deep);color:#fff;}
.btn-primary:hover{background:var(--navy);box-shadow:0 10px 20px -10px rgba(40,65,94,.5);}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink-soft);border:1px solid var(--line);}
.btn-danger{background:rgba(255,255,255,.7);color:#B3554A;border:1px solid #ECC9C2;}
.success-box{
  background:var(--glass-bg-strong);backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);border-radius:16px;padding:18px;text-align:center;
  animation:popIn .4s ease both;
}
.success-box .icon{font-size:34px;margin-bottom:8px;color:var(--rose-deep);animation:heartBeat 1s ease .2s;}
.member-code{
  font-family:'Montserrat',sans-serif;letter-spacing:.18em;font-weight:700;
  background:var(--rose-light);color:var(--navy-deep);padding:8px 14px;border-radius:10px;
  display:inline-block;margin-top:10px;font-size:14px;
}

/* ===== Admin ===== */
.admin-wrap{max-width:1040px;margin:0 auto;padding:26px 18px 80px;width:100%;flex:1;}
.admin-login{
  max-width:380px;margin:60px auto;
  background:var(--glass-bg-strong);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:20px;padding:30px 26px;box-shadow:var(--glass-shadow);text-align:center;
  animation:popIn .45s ease both;
}
.admin-login .wordmark{font-size:34px;color:var(--navy-deep);}
.admin-login p{color:var(--ink-soft);font-size:13px;margin:6px 0 18px;}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.admin-header h2{color:var(--navy-deep);margin:0;font-size:22px;}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px;}
.stat-card{
  background:var(--glass-bg-strong);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:16px;padding:16px;
  transition:transform .25s ease;animation:fadeInUp .5s ease both;
}
.stat-card:hover{transform:translateY(-3px);}
.stat-card .num{font-size:24px;font-weight:800;color:var(--navy-deep);}
.stat-card .lbl{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tab-btn{padding:10px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;transition:.2s ease;}
.tab-btn:hover{color:var(--navy-deep);}
.tab-btn.active{color:var(--navy-deep);border-color:var(--navy-deep);}
.panel{display:none;}
.panel.active{display:block;animation:fadeInUp .4s ease both;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.section-head h3{margin:0;font-size:15.5px;color:var(--ink);}
.cat-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.cat-chip{
  background:var(--glass-bg-strong);backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);border-radius:999px;padding:7px 8px 7px 14px;
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--navy-deep);
  transition:transform .2s ease;
}
.cat-chip:hover{transform:translateY(-2px);}
.cat-chip button{background:var(--rose-light);color:var(--rose-deep);border-radius:50%;width:20px;height:20px;font-size:11px;}
.admin-table{
  width:100%;border-collapse:collapse;
  background:var(--glass-bg-strong);backdrop-filter:blur(14px) saturate(150%);
  border-radius:16px;overflow:hidden;border:1px solid var(--glass-border);font-size:13px;
}
.admin-table th{background:rgba(255,255,255,.35);color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:right;}
.admin-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle;}
.admin-table tr{transition:background .2s ease;}
.admin-table tbody tr:hover{background:rgba(255,255,255,.35);}
.admin-table img{width:42px;height:42px;border-radius:9px;object-fit:cover;}
.tbl-actions{display:flex;gap:6px;}
.icon-btn{background:rgba(255,255,255,.6);width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:transform .2s ease;}
.icon-btn:hover{transform:scale(1.12);}
.icon-btn.danger{color:#B3554A;}
.badge{font-size:10.5px;padding:3px 9px;border-radius:999px;font-weight:700;}
.badge.ok{background:#E4F0E5;color:#3F7A4A;}
.badge.off{background:#F3E2E0;color:#B3554A;}
.add-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.add-bar input{flex:1;min-width:160px;padding:10px 13px;border-radius:11px;border:1px solid var(--line);font-family:inherit;font-size:13px;background:rgba(255,255,255,.7);}
.add-bar button{background:var(--navy-deep);color:#fff;padding:10px 16px;border-radius:11px;font-size:12.5px;font-weight:700;transition:transform .2s ease;}
.add-bar button:hover{transform:translateY(-2px);}
.qr-card{
  background:var(--glass-bg-strong);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);border-radius:20px;padding:24px;text-align:center;max-width:320px;
  animation:fadeInUp .5s ease both;
}
.qr-card img{margin:0 auto 14px;border-radius:12px;border:8px solid rgba(255,255,255,.7);}
.link-box{display:flex;gap:6px;margin-top:10px;}
.link-box input{flex:1;min-width:0;font-size:11.5px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);color:var(--ink-soft);background:rgba(255,255,255,.7);}
.link-box button{background:var(--navy-deep);color:#fff;border-radius:9px;padding:8px 12px;font-size:11.5px;font-weight:700;transition:transform .2s ease;}
.link-box button:hover{transform:translateY(-2px);}
.toast{
  position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  background:var(--navy-deep);color:#fff;padding:11px 22px;border-radius:999px;
  font-size:12.5px;font-weight:600;z-index:200;box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:.3s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.empty-admin{text-align:center;padding:30px;color:var(--ink-soft);font-size:13px;background:var(--glass-bg);border:1px dashed var(--glass-border);border-radius:16px;}
@media(max-width:640px){
  .admin-table thead{display:none;}
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{display:block;width:100%;}
  .admin-table tr{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:10px;}
  .admin-table td{border:none;padding:5px 2px;display:flex;justify-content:space-between;align-items:center;}
  .admin-table td::before{content:attr(data-label);font-size:10.5px;color:var(--ink-soft);font-weight:700;}
}
.loading-screen{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--ink-soft);font-size:13px;}

/* ===== Mobile touch-target & spacing refinements ===== */
@media(max-width:640px){
  .icon-btn{width:36px;height:36px;}
  .fav-btn{font-size:20px;padding:4px;}
  .pw-toggle{padding:8px;}
}
@media(max-width:360px){
  .hero{padding:40px 16px 50px;}
  .brand-ring{width:128px;height:128px;margin-bottom:10px;}
  .brand-mark-name{font-size:42px;}
  .brand-leaf{width:22px;height:26px;}
}