body { font-family: 'Kanit', 'Inter', sans-serif; background-color: #fdfcfb; color: #333; scroll-behavior: smooth; }
.hero-gradient { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); }
.category-scroll::-webkit-scrollbar { display: none; }
.sticky-tabs { position: sticky; top: 0; z-index: 40; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
.active-tab { color: #dc2626; border-bottom: 3px solid #dc2626; font-weight: 600; }
.lang-btn.active { background-color: #dc2626; color: white; border-color: #dc2626; }
.menu-card { transition: transform 0.2s; }
.menu-card:active { transform: scale(0.98); }

/* เพิ่มส่วนนี้เพื่อให้รายการอาหารแถวคู่มีสีเทาอ่อน */
.menu-list-container > div:nth-child(even) {
    background-color: #f7f7f7; /* สีเทาจางๆ */
}
/* เพิ่มความโค้งให้ตัวแรกและตัวสุดท้ายเพื่อให้เข้ากับกรอบ */
.menu-list-container > div:first-child { border-radius: 1rem 1rem 0 0; }
.menu-list-container > div:last-child { border-radius: 0 0 1rem 1rem; }

/* Recommended Menu */
.rec-track { display: grid; grid-template-columns: 1fr; gap: 0; }
.rec-track::-webkit-scrollbar { display: none; }
.rec-card { border-radius: 0; overflow: hidden; background: white; position: relative; display: flex; border-bottom: 1px solid #f0f0f0; padding: 1rem; }
.rec-card:first-child { border-radius: 1.25rem 1.25rem 0 0; }
.rec-card:last-child { border-radius: 0 0 1.25rem 1.25rem; border-bottom: none; }
.rec-card img { display: none; }
.rec-card > div { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.rec-badge { position: absolute; top: 12px; right: 12px; background: #dc2626; color: white; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
/* Menu item thumbnails */
.menu-item-left { display: flex; align-items: center; gap: 0.75rem; }
.menu-item-thumb { width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover; flex-shrink: 0; }

/* Cafe menu item thumbnails - compact for mobile */
.cafe-item-thumb { width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover; flex-shrink: 0; }
.cafe-menu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; }

/* Accessibility and touch-friendly improvements */
:root { --base-font-size: 16px; }
body { font-size: var(--base-font-size); line-height: 1.45; }

.tab-btn { padding: 0.5rem 0.75rem; min-width: 84px; border-radius: 999px; font-size: 0.95rem; touch-action: manipulation; }
.tab-btn:focus { outline: 3px solid rgba(220,38,38,0.12); outline-offset: 2px; }
#nav-tabs { -webkit-overflow-scrolling: touch; scroll-padding: 1rem; padding-bottom: 0.25rem; padding-left: 44px !important;}

/* Make list rows easier to tap */
.grid .py-2.flex.justify-between.items-center { padding-top: 0.7rem; padding-bottom: 0.7rem; }

/* Mobile specific adjustments */
@media (max-width: 640px) {
    :root { --base-font-size: 17px; }
    .menu-item-thumb { width: 3rem; height: 3rem; }
    .cafe-item-thumb { width: 3.5rem; height: 3.5rem; }
    .menu-card { padding: 0.75rem; }
    .menu-card img { width: 96px; height: 96px; object-fit: cover; }
    .tab-btn { padding: 0.65rem 1rem; font-size: 1rem; min-width: 100px; }
    .rec-card { padding: 0.75rem; }
    main { padding-left: 1rem; padding-right: 1rem; }
}

/* iPad / small tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    :root { --base-font-size: 18px; }
    .menu-card img { width: 120px; height: 120px; object-fit: cover; }
    .tab-btn { font-size: 1.05rem; min-width: 120px; }
}

/* Improve contrast for better readability */
.menu-card h4, .menu-card p, .grid span.text-gray-700 { color: #222; }

/* Force nav to remain a single horizontal row and be scrollable.
    Use high-specificity rules and !important to override device defaults (iPhone/Safari). */
#nav-tabs { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.6rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
#nav-tabs::-webkit-scrollbar { display: none; }
.category-scroll { -webkit-overflow-scrolling: touch; }
.tab-btn { display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap !important; flex: 0 0 auto !important; }

/* Scroll indicator gradient fade effect */
.scroll-fade { position: relative; }
.scroll-fade::after { 
  content: ''; 
  position: absolute; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  width: auto; 
  background: linear-gradient(to right, transparent, rgba(253, 252, 251, 1)); 
  pointer-events: none; 
  z-index: 10;
}
.scroll-fade::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: auto;
  background: linear-gradient(to left, transparent, rgba(253, 252, 251, 1));
  pointer-events: none;
  z-index: 10;
}

/* Print-friendly styles */
@media print {
  /* Hide interactive elements */
  header, nav, #dark-mode-toggle, .sticky-tabs, main > section:first-child,
  .rec-track, #rec-loading, #rec-error, .rec-card, 
  button, [onclick] { display: none !important; }
  
  /* Optimize layout for print */
  html, body { background: white; color: black; font-size: 12pt; line-height: 1.5; }
  body { margin: 0; padding: 0; }
  * { box-shadow: none !important; }
  
  /* Keep only content sections */
  section { page-break-inside: avoid; margin: 0 0 1.5cm 0; }
  .menu-card { page-break-inside: avoid; }
  h2 { page-break-after: avoid; margin-top: 1.5cm; margin-bottom: 0.5cm; }
  p { orphans: 3; widows: 3; }
  
  /* Print images if available */
  .menu-card img { display: block !important; max-width: 100%; }
  
  /* Adjust spacing for print */
  main { max-width: 100%; padding: 1cm; }
  .menu-card { padding: 0.5cm; margin-bottom: 0.5cm; border: 1px solid #ccc; }
  
  /* Hide scrollable containers indicators */
  .category-scroll::before, .category-scroll::after { display: none !important; }
}

.menu-item-thumb,
.cafe-item-thumb {
    width: 3rem;
    height: 3rem;
}

/* New block-style menu items (component) */
.menu-item-block { display: flex; gap: 0.75rem; align-items: center; background: #fff; border-radius: 12px; padding: 0.75rem; border: 1px solid #f1f5f9; box-shadow: 0 6px 14px rgba(2,6,23,0.04); margin-bottom: 0.75rem; }
.menu-item-block .menu-item-content { flex: 1; min-width: 0; }
.menu-item-block .menu-item-title { font-weight: 700; color: #111827; font-size: 0.98rem; }
.menu-item-block .menu-item-sub { color: #6b7280; font-size: 0.86rem; margin-top: 0.25rem; }
.menu-item-block .menu-item-actions { display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; }
.menu-item-block .menu-item-price { color: #dc2626; font-weight:800; }
.menu-item-block .menu-item-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }

@media (max-width: 640px) {
    .menu-item-block { padding: 0.6rem; }
    .menu-item-block .menu-item-thumb { width: 48px; height: 48px; }
}

@media (max-width: 640px) {
    .menu-item-thumb,
    .cafe-item-thumb {
        width: 3.5rem;
        height: 3.5rem;
    }
}