/* ===========================================================
   Cafe Home — Design Tokens
   الهام از خانه: چوب گرم، پرده‌های کتان، نور بعدازظهر، بوی قهوه
=========================================================== */
/* فونت وزیرمتن به‌صورت کامل لوکال — هیچ درخواستی به اینترنت زده نمی‌شود */
@font-face{
  font-family: 'Vazirmatn';
  src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* رنگ‌ها */
  --clr-bg:            #F5EDE0;   /* کاغذ کتان، دیوار خانه */
  --clr-bg-soft:       #EFE4D2;
  --clr-card:          #FFFCF6;
  --clr-ink:           #2E2118;   /* قهوه‌ی خیلی تیره، تقریبا مشکی */
  --clr-ink-soft:       #6B5B4E;
  --clr-espresso:      #4A2E22;   /* چوب گردو */
  --clr-espresso-dark: #332016;
  --clr-clay:          #B4632B;   /* سفال گرم — رنگ اصلی */
  --clr-clay-dark:     #954E20;
  --clr-gold:          #C89B3C;   /* نور چراغ */
  --clr-sage:          #7C8B6F;   /* برگ گیاه رو طاقچه */
  --clr-line:          #DDCDB0;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --shadow-card: 0 10px 26px -14px rgba(46,33,24,.35), 0 2px 6px -2px rgba(46,33,24,.12);
  --shadow-soft: 0 6px 16px -10px rgba(46,33,24,.3);

  --font-display: 'Vazirmatn', sans-serif;
  --font-body: 'Vazirmatn', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  direction:rtl;
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-ink);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* بافت کاغذی ملایم پس‌زمینه */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(180,99,43,.05), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(124,139,111,.06), transparent 45%);
}

.wrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---------- عناصر تایپوگرافی ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color: var(--clr-clay-dark);
  background: rgba(180,99,43,.1);
  padding:6px 14px;
  border-radius: 999px;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; color:var(--clr-espresso-dark); }

/* ---------- هدر / پنجره‌ی خانه ---------- */
.hero{
  position:relative;
  padding:56px 0 40px;
  overflow:hidden;
}
.hero__frame{
  position:relative;
  background: linear-gradient(180deg, var(--clr-espresso) 0%, var(--clr-espresso-dark) 100%);
  border-radius: var(--radius-l);
  padding:46px 32px 38px;
  box-shadow: var(--shadow-card);
  text-align:center;
  overflow:hidden;
}
.hero__frame::before{ /* نور گرم از پنجره */
  content:"";
  position:absolute; top:-40%; right:50%;
  width:70%; height:140%;
  transform:translateX(50%);
  background: radial-gradient(circle, rgba(201,161,60,.35), transparent 60%);
  pointer-events:none;
}
.hero__lintel{
  display:flex; justify-content:center; gap:10px; margin-bottom:18px;
}
.hero__lintel span{
  width:6px; height:6px; border-radius:50%;
  background: var(--clr-gold); opacity:.7;
}
.hero__title{
  font-size:clamp(30px, 6vw, 48px);
  font-weight:800;
  color:#FBF3E4;
  margin-bottom:10px;
  position:relative;
}
.hero__title em{
  font-style:normal;
  background: linear-gradient(90deg, var(--clr-gold), #F0D28A, var(--clr-gold));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

.hero__floaters{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__floaters span{
  position:absolute; font-size:20px; opacity:.35;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(8deg); }
}
.hero__subtitle{
  color:#DCC9AC;
  font-size:16px;
  max-width:520px;
  margin:0 auto;
  line-height:2;
  position:relative;
}
.hero__meta{
  margin-top:24px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  position:relative;
}
.hero__meta span{
  font-size:13.5px; color:#EADFC8; opacity:.9;
  display:flex; align-items:center; gap:6px;
}

/* ---------- دکمه‌ی گیمیفیکیشن: پیشنهاد شانسی ---------- */
.spin-btn{
  position:relative; z-index:1;
  margin:22px auto 0; display:flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, var(--clr-gold), #A9781F);
  color:#2E2118; font-weight:800; font-size:14.5px;
  border:none; border-radius:999px; padding:12px 24px;
  box-shadow: 0 10px 22px -10px rgba(200,155,60,.55);
  animation: pulseGlow 2.6s ease-in-out infinite;
}
.spin-btn .dice{ display:inline-block; animation: diceSpin 3.2s ease-in-out infinite; }
@keyframes diceSpin{
  0%,80%,100%{ transform:rotate(0deg); }
  85%{ transform:rotate(-18deg); }
  90%{ transform:rotate(14deg); }
  95%{ transform:rotate(-8deg); }
}
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 10px 22px -10px rgba(200,155,60,.55); }
  50%{ box-shadow: 0 10px 30px -6px rgba(200,155,60,.85); }
}

/* ---------- مودال پیشنهاد شانسی ---------- */
.pick-overlay{
  position:fixed; inset:0; background:rgba(46,33,24,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:300;
}
.pick-card{
  position:relative; overflow:hidden;
  background: var(--clr-card); border-radius: var(--radius-l);
  padding:34px 26px; max-width:340px; width:100%; text-align:center;
  box-shadow: var(--shadow-card);
}
.pick-card__label{ font-size:13px; color:var(--clr-ink-soft); margin-bottom:8px; }
.pick-card__name{ font-size:26px; font-weight:800; color:var(--clr-espresso-dark); min-height:34px; transition:.15s; }
.pick-card__price{ margin-top:10px; font-size:15px; color:var(--clr-clay-dark); font-weight:700; }
.pick-card__close{ margin-top:22px; }
.confetti{
  position:absolute; top:-10px; width:8px; height:14px; border-radius:2px;
  animation: fall 1.8s linear forwards;
}
@keyframes fall{
  to{ transform: translateY(340px) rotate(340deg); opacity:0; }
}

/* ---------- برچسب‌های ویژه (گیمیفیکیشن سبک) ---------- */
.item__badge.badge--hot{ background:rgba(180,99,43,.16); color:var(--clr-clay-dark); }
.item__badge.badge--new{ background:rgba(124,139,111,.18); color:#556349; }
.item__badge.badge--soon{ background:rgba(107,91,78,.14); color:var(--clr-ink-soft); }

.chip--soon{
  border-style:dashed !important;
  color:var(--clr-ink-soft);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* ---------- قفسه‌ی دسته‌بندی‌ها (تب‌های چوبی) ---------- */
.shelf{
  position:sticky; top:0; z-index:20;
  background: var(--clr-bg);
  padding:14px 0;
  border-bottom:1px solid var(--clr-line);
  margin-bottom: 6px;
}
.shelf::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
}
.shelf__scroll{
  display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px;
  scrollbar-width:none;
}
.shelf__scroll::-webkit-scrollbar{ display:none; }
.tag{
  flex:0 0 auto;
  padding:9px 18px;
  border-radius: 999px;
  background: var(--clr-card);
  border:1px solid var(--clr-line);
  color: var(--clr-ink-soft);
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;
  transition: all .2s ease;
}
.tag.is-active, .tag:hover{
  background: var(--clr-clay);
  border-color: var(--clr-clay);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------- بخش دسته‌بندی محصولات ---------- */
.category{ padding:34px 0 6px; scroll-margin-top:78px; }
.category__head{
  display:flex; align-items:baseline; gap:12px; margin-bottom:18px;
}
.category__icon{ font-size:26px; }
.category__title{ font-size:22px; font-weight:800; }
.category__count{ font-size:13px; color:var(--clr-ink-soft); }
.category__divider{
  flex:1; height:1px;
  background: repeating-linear-gradient(90deg, var(--clr-line) 0 6px, transparent 6px 12px);
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
@media (max-width:640px){
  .grid{ grid-template-columns: 1fr; }
}

.item{
  position:relative; overflow:hidden;
  background: var(--clr-card);
  border:1px solid var(--clr-line);
  border-radius: var(--radius-m);
  padding:16px 18px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.item::after{
  content:""; position:absolute; top:0; right:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(200,155,60,.16), transparent);
  transform: skewX(-18deg);
  transition: right .55s ease;
  pointer-events:none;
}
.item:hover{ transform:translateY(-3px); box-shadow: var(--shadow-card); border-color:var(--clr-gold); }
.item:hover::after{ right:120%; }
.item.is-picked{ border-color:var(--clr-gold); box-shadow:0 0 0 3px rgba(200,155,60,.25), var(--shadow-card); }

.item__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.item__name{ font-weight:700; font-size:16.5px; color:var(--clr-espresso-dark); }
.item__badge{
  font-size:11px; font-weight:700; color:var(--clr-sage);
  background: rgba(124,139,111,.14);
  padding:2px 9px; border-radius:999px; white-space:nowrap;
}
.item__desc{ font-size:13.5px; color:var(--clr-ink-soft); line-height:1.9; }

.item__prices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; }
.price-chip{
  display:flex; align-items:center; gap:6px;
  background: var(--clr-bg-soft);
  border:1px dashed var(--clr-line);
  border-radius: var(--radius-s);
  padding:6px 12px;
  font-size:13px;
}
.price-chip b{
  font-family: var(--font-display);
  font-weight:800; color:var(--clr-clay-dark); font-size:14.5px;
}
.price-chip span{ color:var(--clr-ink-soft); font-size:12px; }

.item--single .item__prices{ justify-content:flex-start; }
.item--single .price-chip b{ font-size:16px; }

/* ---------- پانویس ---------- */
.footer{
  margin-top:60px;
  padding:36px 0 44px;
  text-align:center;
  border-top:1px solid var(--clr-line);
}
.footer__brand{ font-weight:800; font-size:17px; color:var(--clr-espresso-dark); margin-bottom:6px;}
.footer__note{ font-size:13px; color:var(--clr-ink-soft); }
.footer__admin-link{
  display:inline-block; margin-top:14px; font-size:12px; color:var(--clr-ink-soft); opacity:.55;
}
.footer__admin-link:hover{ opacity:1; color:var(--clr-clay-dark); }

/* ---------- حالت خالی ---------- */
.empty{
  text-align:center; padding:60px 20px; color:var(--clr-ink-soft);
}

/* ==========================================================
   پنل مدیریت — Admin
========================================================== */
.admin-body{ background: var(--clr-bg-soft); min-height:100vh; }
.admin-shell{ max-width:920px; margin:0 auto; padding:28px 18px 80px; }

.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:26px; gap:12px; flex-wrap:wrap;
}
.admin-topbar h1{ font-size:22px; }
.admin-topbar .sub{ font-size:13px; color:var(--clr-ink-soft); margin-top:4px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius: var(--radius-s);
  padding:10px 18px; font-size:14px; font-weight:700;
  background: var(--clr-espresso); color:#fff;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:scale(.97); }
.btn--clay{ background: var(--clr-clay); }
.btn--ghost{ background:transparent; color:var(--clr-espresso); border:1px solid var(--clr-line); }
.btn--danger{ background:#a3402c; }
.btn--sm{ padding:7px 12px; font-size:12.5px; }
.btn--block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.panel{
  background: var(--clr-card);
  border:1px solid var(--clr-line);
  border-radius: var(--radius-m);
  padding:20px;
  box-shadow: var(--shadow-soft);
  margin-bottom:18px;
}
.panel h2{ font-size:16px; margin-bottom:14px; }
.panel h3{ font-size:14.5px; margin-bottom:10px; color:var(--clr-espresso-dark);}

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12.5px; color:var(--clr-ink-soft); margin-bottom:5px; font-weight:600;}
.field input, .field textarea, .field select{
  width:100%;
  border:1px solid var(--clr-line);
  border-radius: var(--radius-s);
  padding:9px 12px;
  font-family:inherit; font-size:14px;
  background:#fff; color:var(--clr-ink);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--clr-clay); outline-offset:1px;
}
.field-row{ display:flex; gap:10px; }
.field-row > div{ flex:1; }

.cat-block{
  border:1px solid var(--clr-line); border-radius: var(--radius-m);
  margin-bottom:14px; overflow:hidden; background:#fff;
}
.cat-block__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background: var(--clr-bg-soft); cursor:pointer;
  gap:10px; flex-wrap:wrap;
}
.cat-block__title{ font-weight:700; display:flex; align-items:center; gap:8px; }
.cat-block__actions{ display:flex; gap:6px; }
.cat-block__body{ padding:14px 16px; }

.product-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px dashed var(--clr-line); gap:10px;
}
.product-row:last-child{ border-bottom:none; }
.product-row__name{ font-weight:700; font-size:14px; }
.product-row__price{ font-size:12.5px; color:var(--clr-ink-soft); }
.product-row__actions{ display:flex; gap:6px; }

.variant-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.variant-row input{ flex:1; }
.variant-remove{
  border:none; background:#f1e3d3; color:var(--clr-clay-dark);
  width:30px; height:30px; border-radius:8px; font-size:15px; flex:0 0 auto;
}

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--clr-espresso-dark); color:#fff;
  padding:11px 22px; border-radius:999px; font-size:13.5px;
  opacity:0; pointer-events:none; transition: all .25s ease;
  z-index:100; box-shadow: var(--shadow-card);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  background: var(--clr-card); border:1px solid var(--clr-line);
  border-radius: var(--radius-l); padding:36px 30px; max-width:340px; width:100%;
  box-shadow: var(--shadow-card); text-align:center;
}
.login-card .icon{ font-size:34px; margin-bottom:10px; }
.login-card h2{ margin-bottom:6px; }
.login-card p{ font-size:13px; color:var(--clr-ink-soft); margin:0 0 18px; }
.login-err{ color:#a3402c; font-size:12.5px; margin-top:8px; min-height:16px; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(46,33,24,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:200;
}
.modal{
  background:#fff; border-radius: var(--radius-m); padding:22px;
  max-width:420px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow: var(--shadow-card);
}
.modal h3{ margin-bottom:14px; }
.modal-actions{ display:flex; gap:10px; margin-top:16px; }
.modal-actions .btn{ flex:1; }

.util-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.hidden{ display:none !important; }

@media (max-width:560px){
  .field-row{ flex-direction:column; gap:0; }
  .admin-topbar{ flex-direction:column; align-items:flex-start; }
}