/* ===== فونت وزیرمتن — روی همین هاست، بدون وابستگی به سرویس خارجی ===== */
@font-face{
  font-family:'Vazirmatn';
  font-style:normal;
  font-weight:400 900;           /* فونت متغیر: همه‌ی وزن‌ها در یک فایل */
  font-display:swap;
  src:url('fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face{
  font-family:'Vazirmatn';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Design tokens — کافه پاییز ===== */
:root{
  /* پالت رسمی برند (از فایل color-palette.json کیت برند) */
  --espresso:#2A1107;
  --dark-coffee:#4A1D09;
  --copper:#B95215;
  --autumn-orange:#E56F13;
  --gold:#E89A2E;
  --cream:#FFE0A0;
  --light-cream:#FFF1CC;

  /* سایه‌ی عمق برای گرادیان‌ها — تیره‌تر از مسیِ پالت */
  --copper-deep:#A4460F;

  /* نقش‌های رابط کاربری — تم تیره‌ی هماهنگ با صفحه خانه.
     همه از پالت بالا مشتق شده‌اند تا تغییر پالت همه‌جا اثر کند. */
  --bg:#1E0C05;
  --surface:rgb(42 17 7 / .62);         /* کارت شیشه‌ای = اسپرسو نیمه‌شفاف */
  --scrim:rgb(42 17 7 / .55);           /* هاله‌ی پشت لوگو */
  --hairline:rgb(232 154 46 / .26);     /* حاشیه‌ی طلایی نازک */
  --gold-wash:rgb(232 154 46 / .13);    /* پس‌زمینه‌ی کم‌رنگ طلایی */
  --nav-bg:rgb(30 12 5 / .9);           /* نوار پایین */
  --text:#F6E7CE;
  --text-dim:#C9A87F;
  --danger:#F0A28A;
  --icon-badge:linear-gradient(150deg, var(--dark-coffee), var(--espresso));
  --shadow: 0 8px 22px rgb(0 0 0 / .34);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-badge: 12px;      /* بَج مربعی آیکون‌ها */
  --shadow-lift: 0 10px 24px rgb(0 0 0 / .4);   /* برجستگی دکمه و نشان محصول */
  --shadow-color: 0 0 0;     /* رنگ پایه‌ی همه‌ی سایه‌ها؛ شدتش در هر مورد جدا تنظیم می‌شود */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--espresso);
  color:var(--text);
  font-family:'Vazirmatn', Tahoma, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.phone{
  position:relative;
  max-width:460px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 0 60px rgb(var(--shadow-color) / .35);
}

/* ===== Screens ===== */
/* همه‌ی صفحات همان صحنه‌ی کافه را به‌صورت تار در پس‌زمینه دارند تا با خانه یکدست باشند */
.screen{
  position:absolute;
  inset:0 0 0 0;
  display:flex;
  flex-direction:column;
  background:var(--bg) url('img/hero-blur.webp') center/cover no-repeat;
  opacity:0;
  visibility:hidden;
  transform:translateX(18px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  padding-bottom:78px; /* room for bottom nav */
}
.screen.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  z-index:2;
}
[dir="rtl"] .screen{ transform:translateX(-18px); }
[dir="rtl"] .screen.active{ transform:translateX(0); }

.screen.sheet{
  transform:translateY(100%);
  z-index:5;
}
.screen.sheet.active{
  transform:translateY(0);
  transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .2s ease;
}

/* ===== Home ===== */
#screen-home{ padding-bottom:78px; background:var(--espresso); }
.home-bg{
  position:absolute; inset:0;
  display:block;
  pointer-events:none;
}
.home-bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.home-scroll{
  position:relative;
  z-index:1;
  flex:1;
  overflow-y:auto;
  padding:34px 22px 20px;
  scrollbar-width:none;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.home-scroll::-webkit-scrollbar{display:none}

/* لوگوی اصلی برند — خطِ سفارشی «کافه پاییز» به‌صورت تصویر، نه تقریب با فونت وب */
.brand-logo{
  display:block;
  width:90%;
  max-width:330px;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 14px 26px rgb(var(--shadow-color) / .55));
}
/* هاله‌ی نرم پشت لوگو تا روی عکسِ شلوغ هم خوانا بماند */
.brand-logo-wrap{
  position:relative;
  width:100%;
  margin:0;              /* حذف حاشیه‌ی پیش‌فرض h1 که فضای اضافه می‌ساخت */
  display:flex;
  justify-content:center;
}
.brand-logo-wrap::before{
  content:'';
  position:absolute;
  inset:-6% -4%;
  background:radial-gradient(ellipse at center, var(--scrim) 0%, rgb(42 17 7 / 0) 68%);
  pointer-events:none;
}

.brand-mark{
  width:96px; height:96px;
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  background:var(--icon-badge);
  border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.brand-mark.small{ width:64px; height:64px; margin-bottom:8px; }

.brand-slogan{
  text-align:center;
  color:var(--gold);
  font-weight:600;
  margin:0 0 22px;
  font-size:15px;
}

.btn-primary{
  width:100%;
  max-width:320px;
  margin-top:32px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:19px;
  border:0; border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--copper) 0%, var(--gold) 50%, var(--copper-deep) 100%);
  color:var(--espresso);
  font-family:inherit;
  font-size:18px; font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow-lift);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:active{ transform:scale(.98); box-shadow:0 4px 12px rgb(var(--shadow-color) / .35); }
.btn-primary svg{ transform:rotate(180deg); }

.address-box{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--hairline);
  color:var(--text);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-top:20px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:var(--shadow);
}
.address-icon{ font-size:18px; line-height:1.4; }
.address-title{ font-weight:700; font-size:13px; margin-bottom:3px; color:var(--gold); }
.address-text{ font-size:13.5px; line-height:1.7; color:var(--text); }
.map-link{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:8px;
  font-size:12px; font-weight:700;
  color:var(--gold);
  text-decoration:none;
}
.map-link svg{ transform:rotate(180deg); }

#screen-home .address-box{ width:100%; margin-top:12px; }

/* ===== Top bars (inner screens) ===== */
.topbar{
  padding:20px 20px 14px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.topbar h2{ margin:0; font-size:19px; font-weight:800; color:var(--cream); }
.topbar-nav{ justify-content:space-between; }
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--hairline);
  background:var(--surface);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  cursor:pointer;
}
[dir="rtl"] #btn-list-back svg, [dir="rtl"] #btn-product-back svg{ transform:scaleX(-1); }
.cat-emoji{ width:36px; height:36px; color:var(--gold); display:flex; align-items:center; justify-content:center; }
.cat-emoji svg{ width:24px; height:24px; display:block; }

.scroll-area{ flex:1; overflow-y:auto; padding:0 18px 24px; scrollbar-width:none; }
.scroll-area::-webkit-scrollbar{display:none}

/* ===== Categories — گروه‌بندی با ردیف‌های تمام‌عرض =====
   ردیف به‌جای کاشی: با هر تعداد دسته (۱ یا ۷) ردیف ناقص و کاشی یتیم نمی‌سازد،
   نام دسته کامل جا می‌شود و تعداد آیتم‌ها هم دیده می‌شود. */
.cat-group + .cat-group{ margin-top:24px; }

.group-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 2px 11px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--gold);
}
.group-title span{ flex:none; }
.group-title::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(to left, var(--hairline), transparent);
}

.cat-list{ display:flex; flex-direction:column; gap:8px; }

.cat-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 13px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  background:var(--surface);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:var(--shadow);
  cursor:pointer;
  font-family:inherit;
  text-align:right;
  transition:transform .12s ease, border-color .12s ease;
}
.cat-row:active{ transform:scale(.985); border-color:var(--gold); }
.cat-row .ico{
  width:44px; height:44px; flex:none;
  border-radius:var(--radius-badge);
  background:var(--icon-badge);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.cat-row .ico svg{ width:26px; height:26px; display:block; }
.cat-row .label{
  flex:1; min-width:0;
  font-size:14.5px; font-weight:700; color:var(--text);
}
.cat-row .count{ flex:none; font-size:11.5px; font-weight:600; color:var(--text-dim); }
/* در راست‌چین، فلشِ ورود به چپ اشاره می‌کند (جهت باز شدن صفحه‌ی بعد) */
.cat-row .chev{ flex:none; color:var(--gold); opacity:.7; }

/* ===== Item list ===== */
.notice{
  margin:0 18px 12px;
  background:var(--gold-wash);
  border:1px solid var(--hairline);
  color:var(--cream);
  font-size:12px;
  font-weight:600;
  border-radius:var(--radius-sm);
  padding:9px 12px;
  text-align:center;
}
.item-list{ display:flex; flex-direction:column; gap:10px; }
.item-card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  padding:14px 14px;
  display:flex; align-items:center; gap:12px;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.item-card .ico{
  width:44px; height:44px; flex:none;
  border-radius:var(--radius-badge);
  background:var(--icon-badge);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.item-card .ico svg{ width:24px; height:24px; display:block; }
.item-card .info{ flex:1; min-width:0; }
.item-card .name{ font-size:14.5px; font-weight:700; color:var(--text); }
.item-card .desc{ font-size:12px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-card .price{ font-weight:800; color:var(--gold); font-size:14.5px; white-space:nowrap; }
.item-card .price.tbd{ color:var(--danger); font-size:11.5px; font-weight:700; }

.empty-hint{ text-align:center; color:var(--text-dim); font-size:13px; margin-top:40px; }

/* ===== Search ===== */
.search-bar{
  margin:0 18px 14px;
  display:flex; align-items:center; gap:8px;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  padding:12px 14px;
  color:var(--gold);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.search-bar input{
  border:0; outline:0; flex:1; background:transparent;
  font-family:inherit; font-size:14px; color:var(--text);
}
.search-bar input::placeholder{ color:var(--text-dim); }

/* ===== About ===== */
.about-card{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:26px 20px;
  text-align:center;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:var(--shadow);
}
.about-leaf{
  position:absolute;
  top:-18px; left:-22px;
  width:96px; height:auto;
  opacity:.5;
  transform:rotate(-18deg);
  pointer-events:none;
}
.about-card h3{ margin:6px 0 2px; font-size:20px; color:var(--cream); }
.about-card .address-box{ text-align:right; margin-top:18px; }
.about-text{ margin-top:18px; font-size:13px; color:var(--text-dim); line-height:1.9; }

/* ===== Product sheet ===== */
.sheet-top{ padding-top:16px; }
.product-body{ padding-top:4px; text-align:center; }
.product-name{ font-size:24px; font-weight:900; margin:6px 0 2px; color:var(--cream); }
.product-cat{ color:var(--gold); font-weight:600; font-size:13px; margin:0 0 20px; }
.product-hero{
  width:150px; height:150px; margin:0 auto 20px;
  border-radius:50%;
  background:var(--icon-badge);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--hairline), var(--shadow-lift);
}
.product-hero svg{ width:70px; height:70px; display:block; }
.product-desc{ color:var(--text-dim); font-size:14px; line-height:1.9; padding:0 6px; }
.product-price-box{
  margin:26px auto 0;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:18px;
  width:180px;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.product-price{ font-size:30px; font-weight:900; color:var(--gold); }
.product-price.tbd{ font-size:15px; color:var(--danger); }
.product-price-label{ font-size:11px; color:var(--text-dim); margin-top:2px; }

/* ===== Bottom nav ===== */
.bottom-nav{
  position:absolute; left:0; right:0; bottom:0;
  height:70px;
  background:var(--nav-bg);
  border-top:1px solid var(--hairline);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  z-index:10;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 18px rgb(var(--shadow-color) / .3);
}
.nav-btn{
  flex:1;
  border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--text-dim);
  font-family:inherit; font-size:10.5px; font-weight:600;
  padding-top:10px;
}
.nav-btn.active{ color:var(--gold); }

@media (min-width:461px){
  body{ display:flex; align-items:flex-start; justify-content:center; padding:24px 0; }
  .phone{ width:460px; min-height:860px; border-radius:36px; margin-top:0; }
}