/* کافه محمد سیما — global stylesheet (tokens per design handoff README) */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #B0603F; color: #2E3420; }
input::placeholder { color: #9C8B76; }
img { max-width: 100%; }

/* keyframes (design handoff) */
@keyframes msfade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes msheart { 0%,100% { transform: scale(1) } 12% { transform: scale(1.3) } 24% { transform: scale(1) } 36% { transform: scale(1.22) } 52% { transform: scale(1) } }
@keyframes msdrawer { from { opacity: 0 } to { opacity: 1 } }
@keyframes msdrawerlink { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes msocbounce { 0%,38%,64%,100% { transform: scale(1,1) } 47% { transform: scale(1.05,.93) } 55% { transform: scale(.99,1.02) } }
@keyframes msoctwinkle { 0%,100% { opacity: 0; transform: scale(.45) rotate(0deg) } 50% { opacity: 1; transform: scale(1) rotate(20deg) } }
@keyframes msgearspin { to { transform: rotate(360deg) } }
@keyframes msgearspinR { to { transform: rotate(-360deg) } }
@keyframes mssteam { 0% { transform: translateY(4px); opacity: 0 } 30% { opacity: .7 } 100% { transform: translateY(-10px); opacity: 0 } }
@keyframes msdrip { 0%,55% { transform: translateY(0); opacity: 0 } 65% { opacity: 1 } 100% { transform: translateY(26px); opacity: 0 } }

/* ===== header: menu (right) · brand centered · contact (left) — all center-aligned ===== */
.ms-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
}
.ms-burger {
  justify-self: start;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid #5A6446;
  background: #4B5539;
  color: #EDECE8;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ms-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-decoration: none; line-height: 1.15;
}
.ms-brand-logo { width: 42px; height: 42px; border-radius: 11px; display: block; }
.ms-brand-name { font: 700 15.5px 'Vazirmatn'; color: #EDECE8; }
.ms-brand-latin { font-family: 'Playfair Display', serif; font-size: 8.5px; letter-spacing: .18em; color: #B0603F; }
.ms-cta {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  background: #B0603F; color: #2E3420;
  font: 600 12.5px 'Vazirmatn';
  padding: 8px 13px; border-radius: 999px; text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .ms-head { padding: 9px 12px; }
  .ms-cta { padding: 8px 11px; font-size: 12px; }
  .ms-brand-name { font-size: 14.5px; }
}

/* mobile drawer */
.ms-drawer { display: none; }
.ms-drawer.open {
  display: flex; position: fixed; inset: 0; z-index: 200; background: rgba(42,33,24,.985);
  animation: msdrawer .22s ease both; flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.ms-dlink {
  display: flex; align-items: center; justify-content: space-between; font: 500 19px 'Vazirmatn'; color: #EDECE8;
  text-decoration: none; padding: 15px 6px; border-bottom: 1px solid rgba(237,236,232,.08); animation: msdrawerlink .4s ease both;
}
.ms-dlink.on { font-weight: 700; color: #B0603F; }

/* menu: category rail + chips */
#ms-rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
#ms-rail::-webkit-scrollbar { display: none; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(51,41,31,.14); background: #FBF8F2; color: #4A3E31; cursor: pointer;
  font: 500 13px 'Vazirmatn'; transition: background .2s, color .2s;
}
.ms-chip svg { stroke: #8A7458; }
.ms-chip .cnt { font: 600 10px 'Vazirmatn'; color: #8A7458; background: #EFE7D8; padding: 1px 6px; border-radius: 999px; }
.ms-chip.on { border-color: #414A32; background: #414A32; color: #EDECE8; font-weight: 600; }
.ms-chip.on svg { stroke: #B0603F; }
.ms-chip.on .cnt { color: #33291F; background: #B0603F; }

/* menu item card — uniform size */
.ms-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #FFFDF9; border: 1px solid rgba(51,41,31,.09);
  border-radius: 16px; overflow: hidden; box-shadow: 0 6px 16px -12px rgba(51,41,31,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ms-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(51,41,31,.5); }
.ms-card.unavail { opacity: .55; filter: grayscale(.55); }

/* back-to-top FAB — hidden until the user scrolls */
.ms-fab {
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}
.ms-fab.show { opacity: 1; visibility: visible; transform: none; }

/* FAQ accordion */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
details[open] summary svg.ms-chev { transform: rotate(180deg); }
details[open] summary { color: #964B2E; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}