/* DietGrill menu — styles ported from the approved design. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #063D28; }
a { color: #B8860B; }
a:hover { color: #F5EFE6; }

.dg {
  font-family: 'Lora', Georgia, serif;
  color: #F5EFE6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  line-height: 1.5;
  min-height: 100vh;
  background: #063D28;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.dg[data-lang="ar"], .dg[data-lang="ku"] { font-family: 'Noto Naskh Arabic', 'Amiri', serif; line-height: 1.75; }
.dg-display { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; letter-spacing: -.01em; line-height: 1.05; }
.dg-cond { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.05; }
.dg[data-lang="ar"] .dg-display, .dg[data-lang="ku"] .dg-display,
.dg[data-lang="ar"] .dg-cond, .dg[data-lang="ku"] .dg-cond {
  font-family: 'Cairo', 'Noto Naskh Arabic', sans-serif; font-weight: 800; letter-spacing: 0; text-transform: none; line-height: 1.25;
}
.dg-grain { position: relative; isolation: isolate; }
.dg-grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.07), transparent 60%);
}
.dg-waves {
  background-color: #F5EFE6;
  background-image:
    radial-gradient(circle at 50% 0, transparent 21px, rgba(93,64,55,.10) 22px, rgba(93,64,55,.10) 23px, transparent 24px),
    radial-gradient(circle at 50% 0, transparent 21px, rgba(93,64,55,.10) 22px, rgba(93,64,55,.10) 23px, transparent 24px);
  background-size: 56px 28px; background-position: 0 0, 28px 14px;
}
.dg-waves::before {
  opacity: .35;
  background-image:
    repeating-linear-gradient(0deg, rgba(62,39,35,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(62,39,35,.04) 0 1px, transparent 1px 4px);
}
.dg-outline { color: transparent; -webkit-text-stroke: 2px #F5EFE6; paint-order: stroke fill; }
@keyframes dgUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.dg-in { animation: dgUp .65s cubic-bezier(.2,.7,.2,1) both; }
.dg-card { transition: transform .35s ease, box-shadow .35s ease; }
.dg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.dg-btn { cursor: pointer; font: inherit; transition: background-color .25s, color .25s, transform .2s, border-color .25s; }
.dg-btn:hover { transform: translateY(-1px); }
.dg-btn:focus-visible { outline: 3px solid #B8860B; outline-offset: 3px; }
.dg-lang { background: rgba(245,239,230,.08); color: #F5EFE6; border: 1px solid rgba(245,239,230,.35); }
.dg-lang[aria-pressed="true"] { background: #F5EFE6; color: #063D28; border-color: #F5EFE6; }
.dg-tab { background: transparent; color: #F5EFE6; border: 2px solid rgba(245,239,230,.4); }
.dg-tab:hover { border-color: #B8860B; }
.dg-tab[aria-selected="true"] { background: #F5EFE6; color: #063D28; border-color: #F5EFE6; }
.dg-tab[aria-selected="true"].dg-tab-drinks { background: #3E2723; color: #F5EFE6; border-color: #3E2723; }
.dg-hero-grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.dg-meal { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 0 24px; align-items: center; }
.dg-meal:nth-child(even) { grid-template-columns: minmax(0,1fr) 220px; }
.dg-meal:nth-child(even) .dg-meal-photo { order: 2; }
.dg-meal-card { position: relative; }
.dg-spine { position: absolute; top: 60px; bottom: 60px; inset-inline-start: 50%; width: 16px; margin-inline-start: -8px; background: #F5EFE6; border-radius: 8px; opacity: .85; z-index: 0; }
.dg-nutri { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.dg-nutri > div + div { border-inline-start: 1px solid rgba(93,64,55,.25); }
.dg-drinks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 56px 28px; }
.dg-glass { transform: rotate(-6deg); transition: transform .4s ease; }
.dg-card:hover .dg-glass { transform: rotate(-2deg) translateY(-4px); }
.dg[dir="rtl"] .dg-glass { transform: rotate(6deg); }
.dg[dir="rtl"] .dg-card:hover .dg-glass { transform: rotate(2deg) translateY(-4px); }
.dg-foot-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.dg-plate-fallback { animation: dgSpin 24s linear infinite; }
@keyframes dgSpin { to { transform: rotateX(55deg) rotateZ(360deg); } }
.dg-fab { box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.dg-fab:hover { transform: translateY(-2px) scale(1.04); }
@keyframes dgPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.dg-chat-panel { animation: dgPop .35s cubic-bezier(.2,.7,.2,1) both; }
.dg-chip:hover { background: #0B5D3B !important; color: #F5EFE6 !important; }
.dg-chat-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dg-input:focus-visible { outline: 3px solid #B8860B; outline-offset: 2px; }
.dg-bot { border-radius: 18px; border-end-start-radius: 6px; }
.dg-user { border-radius: 18px; border-end-end-radius: 6px; }
.dg[dir="rtl"] .dg-send-icon { transform: scaleX(-1); }

/* Real photo support (replaces the placeholder tiles when image_url is set) */
.dg-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-meal-photo.has-img { background: #F5EFE6; }
.dg-glass.has-img > .dg-photo-img { height: 100%; }

[hidden] { display: none !important; }

@media (max-width: 720px) {
  .dg-chat-panel { width: calc(100vw - 24px) !important; inset-inline-end: 12px !important; max-height: calc(100vh - 100px) !important; }
  .dg-meal, .dg-meal:nth-child(even) { grid-template-columns: minmax(0,1fr); justify-items: stretch; }
  .dg-meal:nth-child(even) .dg-meal-photo { order: 0; }
  .dg-meal-photo { justify-self: center; margin-bottom: -60px; z-index: 2; }
  .dg-meal-card { padding-top: 76px !important; }
  .dg-spine { display: none; }
  .dg-h1 { font-size: 52px !important; }
  .dg-sec-title { font-size: 56px !important; }
  .dg-ghost { font-size: 96px !important; }
  .dg-hero-3d { max-width: 300px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-in { animation: none; }
  .dg-card, .dg-btn, .dg-glass { transition: none; }
  .dg-plate-fallback { animation: none; }
}