/* Hero Crossfade Slide Transitions */
        .hero-slide {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0;
            transform: scale(1.05);
            transition: opacity 1.8s ease-in-out, transform 7s ease-out;
            will-change: opacity, transform;
        }

        .hero-slide.active {
            opacity: 1;
            transform: scale(1.1);
            z-index: 10;
        }

        .hero-slide.previous {
            opacity: 1;
            z-index: 5;
        }

        /* Marquee Bar Animation */
        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }

        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 28s linear infinite;
        }

        .animate-marquee:hover {
            animation-play-state: paused;
        }

        /* Glassmorphism styling */
        .glass-panel {
            background: rgba(18, 18, 14, 0.82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .glass-card {
            background: rgba(26, 25, 20, 0.88);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(217, 119, 6, 0.18);
        }

        /* Custom Scrollbar for Desktop */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #080806;
        }
        ::-webkit-scrollbar-thumb {
            background: #272722;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #d97706;
        }

        /* Hide scrollbars for touch elements */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

/* =========================================================
   SENIMAN RESPONSIVE SYSTEM
   Mobile-first refinements for phones, tablets and desktop
   ========================================================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, svg {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button, a {
  touch-action: manipulation;
}

input, select, textarea {
  max-width: 100%;
}

/* Phone layout */
@media (max-width: 767px) {
  nav > div:first-child {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  nav .text-2xl {
    font-size: 1.2rem !important;
  }

  nav .w-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  /* Hero */
  section.relative.min-h-screen {
    min-height: 100svh !important;
    min-height: 680px !important;
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
  }

  section.relative.min-h-screen .max-w-6xl {
    width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-top: 1rem !important;
  }

  section.relative.min-h-screen h1 {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
    line-height: .98 !important;
    margin-bottom: 1.5rem !important;
  }

  section.relative.min-h-screen p {
    font-size: .95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 2rem !important;
  }

  section.relative.min-h-screen .inline-flex {
    max-width: 100%;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    font-size: .65rem !important;
  }

  section.relative.min-h-screen .flex-col.sm\:flex-row {
    width: 100%;
  }

  section.relative.min-h-screen .flex-col.sm\:flex-row > * {
    width: 100% !important;
  }

  /* Hero images: avoid awkward crops on narrow screens */
  .hero-slide {
    object-position: center center;
  }

  /* Marquee */
  .animate-marquee {
    width: max-content;
    min-width: 200%;
    animation-duration: 24s;
  }

  /* All major section gutters */
  section:not(.relative.min-h-screen) > .max-w-\[1536px\],
  section:not(.relative.min-h-screen) > div.max-w-\[1536px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #about,
  #ambiance {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  #menu,
  #visit {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* About stats */
  #about .grid.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }

  #about .grid.grid-cols-3 > div {
    padding: .75rem .35rem !important;
  }

  #about .grid.grid-cols-3 .text-3xl {
    font-size: 1.4rem !important;
  }

  #about .grid.grid-cols-3 p:last-child {
    font-size: .55rem !important;
    letter-spacing: .04em !important;
  }

  /* Menu controls */
  #category-tabs {
    width: calc(100vw - 2rem) !important;
    max-width: none !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: .5rem !important;
    margin-right: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #category-tabs::-webkit-scrollbar {
    display: none;
  }

  #category-tabs .category-btn {
    flex: 0 0 auto !important;
    min-height: 44px;
  }

  #menu-search {
    width: 100% !important;
    min-height: 46px;
    font-size: 16px !important;
  }

  /* Featured menu cards */
  #menu .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  #menu .glass-card {
    width: 100%;
    min-width: 0;
  }

  #menu .glass-card h3 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }

  #menu .glass-card .h-60 {
    height: 15rem !important;
  }

  /* Menu list cards */
  #menu-items-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  #menu-items-grid .menu-card {
    min-width: 0;
    padding: .8rem !important;
    gap: .75rem !important;
  }

  #menu-items-grid .menu-card img {
    width: 4.5rem !important;
    height: 4.5rem !important;
    flex: 0 0 4.5rem;
  }

  #menu-items-grid .menu-card h4 {
    font-size: .9rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #menu-items-grid .menu-card p {
    font-size: .68rem !important;
  }

  #menu-items-grid .menu-card > div {
    min-width: 0;
  }

  #menu-items-grid .menu-card > div > div:first-child {
    align-items: flex-start !important;
  }

  #menu-items-grid .menu-card span {
    font-size: .75rem !important;
  }

  /* Ambiance gallery */
  #ambiance .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #ambiance .lg\:col-span-2 {
    grid-column: auto !important;
  }

  #ambiance .h-80 {
    height: 18rem !important;
  }

  /* Visit */
  #visit .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  #visit .lg\:col-span-5,
  #visit .lg\:col-span-7 {
    grid-column: auto !important;
  }

  #visit .min-h-\[420px\] {
    min-height: 350px !important;
  }

  #visit .min-h-\[400px\] {
    min-height: 325px !important;
  }

  #visit iframe {
    width: 100% !important;
    min-height: 325px !important;
    height: 325px !important;
  }

  #visit .w-full.sm\:w-auto {
    width: 100% !important;
  }

  /* Footer */
  footer {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  footer > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  footer .flex-wrap {
    width: 100%;
    gap: 1.5rem !important;
  }

  /* Modals */
  #reservation-modal,
  #dish-modal {
    padding: .5rem !important;
    align-items: flex-start !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }

  #reservation-modal > div,
  #dish-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 1rem) !important;
    overflow-y: auto !important;
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
  }

  #reservation-modal .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  #reservation-modal input,
  #reservation-modal select {
    min-height: 48px;
    font-size: 16px !important;
  }

  #reservation-modal h3 {
    font-size: 1.65rem !important;
  }

  /* Safe-area support for modern phones */
  nav > div:first-child {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  section.relative.min-h-screen {
    min-height: 620px !important;
  }

  section.relative.min-h-screen h1 {
    font-size: 2.3rem !important;
  }

  #about .grid.grid-cols-3 .text-3xl {
    font-size: 1.2rem !important;
  }

  #menu-items-grid .menu-card img {
    width: 4rem !important;
    height: 4rem !important;
    flex-basis: 4rem;
  }

  #menu-items-grid .menu-card h4 {
    font-size: .82rem !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  #about,
  #ambiance {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  #menu > .max-w-\[1536px\],
  #visit > .max-w-\[1536px\] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  #menu-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #visit iframe {
    min-height: 420px;
  }

  #reservation-modal > div,
  #dish-modal > div {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }
}

/* Touch devices: make small controls easier to tap */
@media (hover: none) and (pointer: coarse) {
  .category-btn,
  #mobile-menu-button,
  #reservation-modal button,
  #dish-modal button {
    min-height: 44px;
  }
}

/* Landscape phones */
@media (max-height: 620px) and (max-width: 900px) {
  section.relative.min-h-screen {
    min-height: 520px !important;
    padding-top: 4rem !important;
  }

  section.relative.min-h-screen h1 {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
    margin-bottom: 1rem !important;
  }

  section.relative.min-h-screen p {
    margin-bottom: 1.25rem !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}