/*
Theme Name: IYI Luxury on Flames
Theme URI: https://iyidining.kematconsulting.co.uk/
Description: A premium, high-performance luxury theme for IYI Restaurant.
Version: 1.0.1
Author: Antigravity
Author URI: https://google.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iyi-luxury
*/

:root {
   --color-gold: #C5A059;
   --color-gold-bright: #E8D1A3;
   --color-gold-dim: #8E7340;
   --color-gold-gradient: linear-gradient(135deg, #C5A059 0%, #E8D1A3 50%, #8E7340 100%);
   --color-flame: #D34817;
   --color-flame-dark: #8B2E0E;
   --color-black: #050505;
   --color-charcoal: #0B0B0B;
   --color-charcoal-light: #151515;
   --color-text-light: #F8F8F8;
   --color-text-muted: #A0A0A0;
   --color-text-dim: #666666;

   --font-heading: 'Playfair Display', serif;
   --font-body: 'Inter', sans-serif;

   --transition-premium: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
   --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

   --shadow-premium: 0 30px 60px rgba(0, 0, 0, 0.6);
   --border-subtle: 1px solid rgba(197, 160, 89, 0.15);
   --glass-bg: rgba(255, 255, 255, 0.03);
   --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   overflow-x: hidden;
   max-width: 100%;
}

body {
   background-color: var(--color-black);
   color: var(--color-text-light);
   font-family: var(--font-body);
   overflow-x: hidden;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   max-width: 100vw;
   position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   color: var(--color-gold);
   line-height: 1.1;
   letter-spacing: -0.02em;
}

a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition-smooth);
}

/* Utilities */
.container {
   max-width: 1300px;
   margin: 0 auto;
   padding: 0 3rem;
   overflow-x: hidden;
}

* {
   box-sizing: border-box;
}

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

.text-gold {
   color: var(--color-gold);
}

.text-flame {
   color: var(--color-flame);
}

.bg-charcoal {
   background-color: var(--color-charcoal);
}

.bg-black {
   background-color: var(--color-black);
}

.letter-spacing-lg {
   letter-spacing: 0.15em;
}

.text-uppercase {
   text-transform: uppercase;
}

/* Buttons */
.btn {
   display: inline-block;
   padding: 1.25rem 3rem;
   border: 1px solid var(--color-gold);
   color: var(--color-gold);
   text-transform: uppercase;
   letter-spacing: 0.2rem;
   font-size: 0.8rem;
   font-weight: 500;
   position: relative;
   overflow: hidden;
   z-index: 1;
   background: transparent;
   cursor: pointer;
}

.btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background: var(--color-gold);
   z-index: -1;
   transition: var(--transition-premium);
}

.btn:hover::before {
   width: 100%;
}

.btn:hover {
   color: var(--color-black);
   border-color: var(--color-gold);
}

.btn-flame {
   border-color: var(--color-flame);
   color: var(--color-flame);
}

.btn-flame::before {
   background: var(--color-flame);
}

.btn-flame:hover {
   color: #fff;
   border-color: var(--color-flame);
}

/* Header */
header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   padding: 2rem 0;
   transition: var(--transition-premium);
}

header.scrolled {
   background: rgba(8, 8, 8, 0.9);
   backdrop-filter: blur(20px);
   padding: 1.2rem 0;
   border-bottom: 1px solid rgba(197, 160, 89, 0.05);
}

.header-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.logo img {
   height: 70px;
   width: auto;
   transition: var(--transition-premium);
}

header.scrolled .logo img {
   height: 55px;
}

/* Hamburger Menu */
.hamburger-menu {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 30px;
   height: 24px;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   z-index: 1001;
   transition: var(--transition-smooth);
}

.hamburger-line {
   width: 100%;
   height: 2px;
   background-color: var(--color-gold);
   transition: all 0.3s ease;
   transform-origin: center;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
   transform: translateY(11px) rotate(45deg);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
   opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
   transform: translateY(-11px) rotate(-45deg);
}

/* Navigation */
.nav-links-container {
   display: flex;
   align-items: center;
   gap: 2rem;
}

.nav-list {
   display: flex;
   gap: 3.5rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

.nav-list li {
   list-style: none;
}

.nav-list a {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   font-weight: 500;
   color: var(--color-text-light);
   opacity: 0.6;
   position: relative;
   display: block;
   padding: 0.5rem 0;
}

.nav-list a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 1px;
   background: var(--color-gold);
   transition: var(--transition-smooth);
}

.nav-list a:hover {
   opacity: 1;
   color: var(--color-gold);
}

.nav-list a:hover::after {
   width: 100%;
}

/* CTA Buttons */
.mobile-cta {
   display: none;
}

.desktop-cta {
   display: block;
}

/* Prevent body scroll when menu is open */
body.menu-open {
   overflow: hidden;
}

/* Hero Section */
.hero {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   text-align: center;
}

.video-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

#hero-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(8, 8, 8, 0.4), rgba(8, 8, 8, 0.95));
   z-index: 1;
}

.hero-content {
   z-index: 2;
   max-width: 900px;
   padding: 0 2rem;
}

.hero-subtitle {
   display: block;
   font-size: 0.8rem;
   letter-spacing: 0.5em;
   text-transform: uppercase;
   margin-bottom: 1.5rem;
   color: var(--color-gold);
}

.hero h1 {
   font-size: clamp(3rem, 8vw, 6.5rem);
   margin-bottom: 2rem;
   font-weight: 400;
   color: #fff;
   line-height: 1;
}

.hero p {
   font-size: 1.1rem;
   color: var(--color-text-muted);
   max-width: 600px;
   margin: 0 auto 3rem;
   font-weight: 300;
}

/* Sections */
.section-padding {
   padding: 50px 0;
}

.section-header {
   text-align: center;
   margin-bottom: 6rem;
}

.section-subtitle {
   display: block;
   font-size: 0.75rem;
   letter-spacing: 0.4em;
   text-transform: uppercase;
   color: var(--color-gold);
   margin-bottom: 1rem;
}

.section-header h2 {
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 400;
}

/* About Grid */
.about-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 8rem;
   align-items: center;
}

.about-text h2, {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
    background: linear-gradient(45deg, #fff, var(--color-gold), var(--color-flame));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2 , h1{
   background: linear-gradient(45deg, #fff, var(--color-gold), var(--color-flame));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
}

.about-text p {
   font-size: 1.15rem;
   color: var(--color-text-muted);
   margin-bottom: 2rem;
   font-weight: 300;
}

.about-image-wrapper {
   position: relative;
}

.about-image {
   width: 100%;
   height: 400px;
   background-color: var(--color-charcoal);
   background-size: cover;
   background-position: center;
   position: relative;
   z-index: 2;
   border: 1px solid rgba(197, 160, 89, 0.2);
}

.about-image-accent {
   position: absolute;
   top: -40px;
   right: -40px;
   width: 60%;
   height: 60%;
   border: 1px solid var(--color-gold-dim);
   z-index: 1;
}

/* Menu Display */
.menu-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 4rem 6rem;
}

.menu-item {
   display: flex;
   gap: 2rem;
   padding-bottom: 1.5rem;
   border-bottom: 0px solid rgba(255, 255, 255, 0.05);
   transition: var(--transition-premium);
}

.menu-item:hover {
   border-bottom-color: rgba(197, 160, 89, 0.3);
}

.item-image {
   width: 120px;
   height: 120px;
   flex-shrink: 0;
   overflow: hidden;
   background: var(--color-charcoal);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.item-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition-premium);
}

.menu-item:hover .item-image img {
   transform: scale(1.1);
}

.item-content {
   flex-grow: 1;
}

.item-header {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 0.5rem;
}

.item-header h3 {
   font-size: 1.4rem;
   color: #c5a059;
   font-weight: 500;
}

.item-header .price {
   font-family: var(--font-heading);
   color: var(--color-gold);
   font-size: 1.2rem;
   margin-left: 1rem;
}

.item-description {
   font-size: 0.95rem;
   color: var(--color-text-muted);
   font-weight: 300;
   line-height: 1.6;
}

/* Menu Page Specifics */
.menu-header {
   height: 60vh;
   min-height: 339px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background: linear-gradient(to bottom, rgba(8, 8, 8, 0.8), var(--color-black)),
      url('../images/menu-bg.jpg') center/cover;
   background-size: cover;
   background-position: center;
   padding-top: 120px; /* Account for fixed header */
   margin-top: 0;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
}

.menu-filters {
   display: flex;
   justify-content: center;
   gap: 2rem;
   margin-bottom: 0rem;
   flex-wrap: wrap;
}

.filter-btn {
   background: transparent;
   border: none;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.2em;
   font-size: 0.75rem;
   font-weight: 600;
   cursor: pointer;
   padding: 0.5rem 0;
   position: relative;
   transition: var(--transition-smooth);
}

.filter-btn::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 1px;
   background: var(--color-gold);
   transition: var(--transition-smooth);
}

.filter-btn.active {
   color: var(--color-gold);
}

.filter-btn.active::after {
   width: 100%;
}

.menu-category-title {
   grid-column: 1 / -1;
   font-size: 2.5rem;
   margin: 4rem 0 2rem;
   text-align: center;
   font-weight: 400;
}

/* Media Gallery */
.media-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
}

.media-item {
   position: relative;
   height: 400px;
   overflow: hidden;
   cursor: pointer;
}

.media-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition-premium);
}

.media-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(197, 160, 89, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: var(--transition-smooth);
   z-index: 2;
}

.media-overlay span {
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 0.3em;
   font-size: 0.8rem;
   font-weight: 600;
   border: 1px solid #fff;
   padding: 1rem 2rem;
}

.media-item:hover img {
   transform: scale(1.1);
}

.media-item:hover .media-overlay {
   opacity: 1;
}

/* Footer */
footer {
   padding: 8rem 0 4rem;
   background: #050505;
   border-top: 1px solid rgba(197, 160, 89, 0.05);
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
   gap: 5rem;
   margin-bottom: 6rem;
}

.footer-col h4 {
   font-size: 1rem;
   color: var(--color-gold);
   margin-bottom: 2rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
}

.footer-col p,
.footer-col li {
   font-size: 0.95rem;
   color: var(--color-text-muted);
   margin-bottom: 1rem;
}

.footer-col ul {
   list-style: none;
}

.footer-col a:hover {
   color: var(--color-gold);
}

.footer-bottom {
   text-align: center;
   padding-top: 4rem;
   border-top: 1px solid rgba(255, 255, 255, 0.03);
   font-size: 0.8rem;
   color: var(--color-text-dim);
   letter-spacing: 0.1em;
}

/* Animations */
.fade-in-up {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-up.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Reservation Form */
.reservation-form {
   max-width: 900px;
   margin: 0 auto;
   background: var(--color-charcoal);
   padding: 5rem;
   border: 1px solid rgba(197, 160, 89, 0.1);
}
.form-row h3{
	display:none;
}
.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
   margin-bottom: 3rem;
}

.form-group , .rt-tr-row{
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.form-group label, .rt-tr-row label {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   color: var(--color-gold-dim);
}

.form-group input, .rt-tr-row input,
.form-group select, .rt-tr-row select, 
.form-group textarea, .rt-tr-row textarea{
   background: transparent;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding: 0.8rem 0;
   color: #fff;
   font-family: inherit;
   font-size: 1rem;
   outline: none;
   transition: var(--transition-smooth);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus ,
.rt-tr-row input:focus,
 .rt-tr-row select:focus, 
.rt-tr-row textarea:focus
{
   border-bottom-color: var(--color-gold);
}

#reservation-form [type=submit]{
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;	
	    padding: 15px 15px;
}
#reservation-form [type=submit]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--color-gold);
    z-index: -1;
    transition: var(--transition-premium);
}

/* Responsive */
@media (max-width: 1200px) {
   .container {
      padding: 0 2rem;
   }

   .about-grid {
      gap: 4rem;
   }

   .menu-grid {
      gap: 4rem;
   }
}

@media (max-width: 991px) {
   .about-grid {
      grid-template-columns: 1fr;
   }

   .menu-grid {
      grid-template-columns: 1fr;
   }

   .footer-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .hero h1 {
      font-size: 4.5rem;
   }

   .media-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .section-padding {
      padding: 1rem 0;
   }

   .nav-links {
      display: none;
   }

   .hero h1 {
      font-size: 3.5rem;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
   }

   .reservation-form {
      padding: 3rem 1.5rem;
   }

   .form-row {
      grid-template-columns: 1fr;
      gap: 2rem;
   }
}

@media (max-width: 768px) {
   .media-grid {
      grid-template-columns: 1fr;
   }
}


/* ========================================
   COMPREHENSIVE RESPONSIVE STYLES
   ======================================== */

/* Extra Large Screens */
@media (max-width: 1400px) {
   .container {
      max-width: 1140px;
      padding: 0 2.5rem;
   }
   
   .about-grid {
      gap: 6rem;
   }
   
   .menu-grid {
      gap: 3rem 5rem;
   }
}

/* Large Tablets & Small Desktops */
@media (max-width: 1024px) {
   .container {
      padding: 0 2rem;
   }
   
   /* Header Navigation */
   header {
      padding: 1.5rem 0;
   }
   
   .logo img {
      height: 60px;
   }
   
   header.scrolled .logo img {
      height: 50px;
   }
   
   .nav-list {
      gap: 2rem;
   }
   
   .nav-list a {
      font-size: 0.7rem;
   }
   
   /* Hero Section - Reduced Headings */
   .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
   }
   
   .hero p {
      font-size: 1rem;
   }
   
   /* Sections - Reduced Headings */
   .section-padding {
      padding: 1rem 0;
   }
   
   .section-header {
      margin-bottom: 5rem;
   }
   
   .section-header h2 {
      font-size: clamp(2rem, 4vw, 3.2rem);
   }
   
   /* About Section - Reduced Headings */
   .about-text h2 {
      font-size: 2.8rem;
   }
   
   .about-image {
      height: 600px;
   }
   
   .about-image-accent {
      top: -30px;
      right: -30px;
   }
   
   /* Menu Items */
   .item-image {
      width: 100px;
      height: 100px;
   }
   
   .item-header h3 {
      font-size: 1.2rem;
   }
   
   /* Footer */
   footer {
      padding: 6rem 0 3rem;
   }
   
   .footer-grid {
      gap: 4rem;
   }
}

/* Tablets */
@media (max-width: 991px) {
   .container {
      padding: 0 1.5rem;
   }
   
   /* Hamburger Menu - Show on Tablets and Below */
   .hamburger-menu {
      display: flex;
   }
   
   /* Hide Desktop CTA, Show Mobile CTA in Menu */
   .desktop-cta {
      display: none;
   }
   
   .mobile-cta {
      display: block;
      margin-top: 2rem;
      text-align: center;
   }
   
   /* Mobile Navigation Overlay */
   .nav-links-container {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 400px;
      height: 100vh;
      background: rgba(8, 8, 8, 0.98);
      backdrop-filter: blur(20px);
      padding: 6rem 2rem 2rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      overflow-y: auto;
      border-left: 1px solid rgba(197, 160, 89, 0.1);
      z-index: 999;
   }
   
   .nav-links-container.active {
      right: 0;
   }
   
   .nav-list {
      flex-direction: column;
      gap: 0;
      width: 100%;
   }
   
   .nav-list li {
      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   }
   
   .nav-list a {
      font-size: 0.85rem;
      letter-spacing: 0.15em;
      padding: 1.2rem 0;
      opacity: 1;
   }
   
   .nav-list a::after {
      display: none;
   }
   
   /* Hero - Reduced Heading Sizes */
   .hero {
      height: 80vh;
      min-height: 600px;
   }
   
   .hero-subtitle {
      font-size: 0.7rem;
      letter-spacing: 0.35em;
   }
   
   .hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.5rem);
      margin-bottom: 1.5rem;
   }
   
   .hero p {
      font-size: 0.95rem;
      margin-bottom: 2.5rem;
   }
   
   /* Sections - Reduced Heading Sizes */
   .section-padding {
      padding: 1rem 0;
   }
   
   .section-header {
      margin-bottom: 4rem;
   }
   
   .section-subtitle {
      font-size: 0.7rem;
      letter-spacing: 0.35em;
   }
   
   .section-header h2 {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
   }
   
   /* About Grid */
   .about-grid {
      grid-template-columns: 1fr;
      gap: 4rem;
   }
   
   .about-text h2 {
      font-size: 2.2rem;
      margin-bottom: 2rem;
   }
   
   .about-text p {
      font-size: 1.05rem;
   }
   
   .about-image {
      height: 500px;
   }
   
   .about-image-accent {
      top: -20px;
      right: -20px;
      width: 50%;
      height: 50%;
   }
   
   /* Menu Grid */
   .menu-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
   }
   
   .menu-item {
      gap: 1.5rem;
      padding-bottom: 2rem;
   }
   
   .menu-category-title {
      font-size: 2rem;
   }
   
   /* Media Grid */
   .media-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
   }
   
   .media-item {
      height: 300px;
   }
   
   /* Footer */
   .footer-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
      margin-bottom: 4rem;
   }
   
   /* Reservation Form */
   .reservation-form {
      padding: 4rem 2.5rem;
   }
   
   .form-row {
      gap: 2.5rem;
   }
}

/* Mobile Landscape & Small Tablets */
@media (max-width: 768px) {

   .container {
      padding: 0 1.25rem;
   }
   
   /* Header */
   header {
      padding: 1rem 0;
   }
   
   .logo img {
      height: 50px;
   }
   
   header.scrolled .logo img {
      height: 45px;
   }
   
   /* Mobile Menu Adjustments */
   .nav-links-container {
      max-width: 320px;
      padding: 5rem 1.5rem 2rem;
   }
   
   .nav-list a {
      font-size: 0.8rem;
      padding: 1rem 0;
   }
   
   .mobile-cta {
      margin-top: 1.5rem;
   }
   
   .btn {
      padding: 1rem 2rem;
      font-size: 0.75rem;
      letter-spacing: 0.15rem;
   }
   
   /* Hero - Further Reduced Headings */
   .hero {
      height: 70vh;
      min-height: 500px;
   }
   
   .hero-content {
      padding: 0 1.5rem;
   }
   
   .hero-subtitle {
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      margin-bottom: 1rem;
   }
   
   .hero h1 {
      font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
      margin-bottom: 1.2rem;
   }
   
   .hero p {
      font-size: 0.88rem;
      margin-bottom: 2rem;
   }
   
   /* Sections - Reduced Headings */
   .section-padding {
      padding: 1rem 0;
   }
   
   .section-header {
      margin-bottom: 3rem;
   }
   
   .section-subtitle {
      font-size: 0.65rem;
      letter-spacing: 0.3em;
   }
   
   .section-header h2 {
      font-size: clamp(1.5rem, 6vw, 2rem);
   }
   
   /* About Section - Reduced Headings */
   .about-grid {
      gap: 3rem;
   }
   
   .about-text h2 {
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
   }
   
   .about-text p {
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
   }
   
   .about-image {
      height: 400px;
   }
   
   .about-image-accent {
      display: none;
   }
   
   /* Menu Items */
   .menu-item {
      flex-direction: column;
      gap: 1rem;
      padding-bottom: 1.5rem;
   }
   
   .item-image {
      width: 100%;
      height: 200px;
   }
   
   .item-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }
   
   .item-header h3 {
      font-size: 1.2rem;
   }
   
   .item-header .price {
      margin-left: 0;
      font-size: 1.05rem;
   }
   
   .item-description {
      font-size: 0.88rem;
   }
   
   /* Menu Filters */
   .menu-filters {
      gap: 1.5rem;
      margin-bottom: 3rem;
   }
   
   .filter-btn {
      font-size: 0.7rem;
   }
   
   .menu-category-title {
      font-size: 1.8rem;
      margin: 3rem 0 1.5rem;
   }
   
   /* Menu Header */
   .menu-header h1 {
      font-size: clamp(1.8rem, 6vw, 2.5rem);
   }
   
   /* Media Grid */
   .media-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
   
   .media-item {
      height: 350px;
   }
   
   /* Footer */
   footer {
      padding: 5rem 0 3rem;
   }
   
   .footer-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
      margin-bottom: 3rem;
   }
   
   .footer-col h4 {
      font-size: 0.85rem;
      margin-bottom: 1.5rem;
   }
   
   .footer-col p,
   .footer-col li {
      font-size: 0.88rem;
   }
   
   .footer-bottom {
      padding-top: 3rem;
      font-size: 0.75rem;
   }
   
   /* Reservation Form */
   .reservation-form {
      padding: 3rem 1.5rem;
   }
   
   .form-row {
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 2rem;
   }
   
   .form-group label,
   .rt-tr-row label {
      font-size: 0.65rem;
   }
   
   .form-group input,
   .rt-tr-row input,
   .form-group select,
   .rt-tr-row select,
   .form-group textarea,
   .rt-tr-row textarea {
      font-size: 0.95rem;
      padding: 0.7rem 0;
   }
   
   #reservation-form [type=submit] {
      padding: 12px 15px;
      font-size: 0.75rem;
   }
}

/* Mobile Portrait */
@media (max-width: 576px) {
   .container {
      padding: 0 1rem;
   }
   
   /* Header */
   header {
      padding: 0.8rem 0;
   }
   
   .logo img {
      height: 45px;
   }
   
   header.scrolled .logo img {
      height: 40px;
   }
   
   /* Hamburger Menu */
   .hamburger-menu {
      width: 28px;
      height: 22px;
   }
   
   .hamburger-line {
      height: 2px;
   }
   
   /* Mobile Menu */
   .nav-links-container {
      max-width: 100%;
      padding: 5rem 1.2rem 2rem;
   }
   
   .nav-list a {
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      padding: 0.9rem 0;
   }
   
   .mobile-cta {
      margin-top: 1.2rem;
   }
   
   .btn {
      padding: 0.9rem 1.8rem;
      font-size: 0.7rem;
      letter-spacing: 0.12rem;
   }
   
   /* Hero - Smallest Headings */
   .hero {
      height: 65vh;
      min-height: 450px;
   }
   
   .hero-content {
      padding: 0 1rem;
   }
   
   .hero-subtitle {
      font-size: 0.6rem;
      letter-spacing: 0.25em;
   }
   
   .hero h1 {
      font-size: clamp(1.5rem, 9vw, 2.3rem);
      margin-bottom: 1rem;
   }
   
   .hero p {
      font-size: 0.82rem;
      margin-bottom: 1.8rem;
      line-height: 1.6;
   }
   
   /* Sections - Smallest Headings */
   .section-padding {
      padding: 1rem 0;
   }
   
   .section-header {
      margin-bottom: 2.5rem;
   }
   
   .section-subtitle {
      font-size: 0.6rem;
      letter-spacing: 0.25em;
      margin-bottom: 0.8rem;
   }
   
   .section-header h2 {
      font-size: clamp(1.3rem, 7vw, 1.8rem);
   }
   
   /* About Section - Smallest Headings */
   .about-grid {
      gap: 2.5rem;
   }
   
   .about-text h2 {
      font-size: 1.5rem;
      margin-bottom: 1.2rem;
      line-height: 1.2;
   }
   
   .about-text p {
      font-size: 0.88rem;
      margin-bottom: 1.2rem;
      line-height: 1.65;
   }
   
   .about-image {
      height: 350px;
   }
   
   /* Menu Items - Smallest Headings */
   .menu-grid {
      gap: 2.5rem;
   }
   
   .menu-item {
      gap: 1rem;
      padding-bottom: 1.5rem;
   }
   
   .item-image {
      height: 180px;
   }
   
   .item-header h3 {
      font-size: 1.1rem;
   }
   
   .item-header .price {
      font-size: 0.95rem;
   }
   
   .item-description {
      font-size: 0.82rem;
      line-height: 1.6;
   }
   
   /* Menu Header - Smallest Headings */

   
   .menu-header h1 {
      font-size: clamp(1.5rem, 7vw, 2rem);
   }
   
   .menu-filters {
      gap: 1rem;
      margin-bottom: 2.5rem;
   }
   
   .filter-btn {
      font-size: 0.65rem;
      letter-spacing: 0.15em;
   }
   
   .menu-category-title {
      font-size: 1.5rem;
      margin: 2.5rem 0 1.5rem;
   }
   
   /* Media Grid */
   .media-item {
      height: 300px;
   }
   
   .media-overlay span {
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      padding: 0.8rem 1.5rem;
   }
   
   /* Footer - Smallest Headings */
   footer {
      padding: 4rem 0 2.5rem;
   }
   
   .footer-grid {
      gap: 2.5rem;
      margin-bottom: 2.5rem;
   }
   
   .footer-col h4 {
      font-size: 0.8rem;
      margin-bottom: 1.2rem;
      letter-spacing: 0.15em;
   }
   
   .footer-col p,
   .footer-col li {
      font-size: 0.82rem;
      margin-bottom: 0.8rem;
   }
   
   .footer-bottom {
      padding-top: 2.5rem;
      font-size: 0.7rem;
   }
   
   /* Reservation Form */
   .reservation-form {
      padding: 2.5rem 1.2rem;
   }
   
   .form-row {
      gap: 1.8rem;
      margin-bottom: 1.8rem;
   }
   
   .form-group,
   .rt-tr-row {
      gap: 0.8rem;
   }
   
   .form-group label,
   .rt-tr-row label {
      font-size: 0.6rem;
      letter-spacing: 0.15em;
   }
   
   .form-group input,
   .rt-tr-row input,
   .form-group select,
   .rt-tr-row select,
   .form-group textarea,
   .rt-tr-row textarea {
      font-size: 0.88rem;
      padding: 0.6rem 0;
   }
   
   #reservation-form [type=submit] {
      padding: 10px 15px;
      font-size: 0.7rem;
      letter-spacing: 0.15rem;
   }
}

/* Extra Small Devices */
@media (max-width: 400px) {
   .container {
      padding: 0 0.8rem;
   }
   
   /* Hero - Extra Small Headings */
   .hero h1 {
      font-size: clamp(1.3rem, 11vw, 2rem);
      line-height: 1.1;
   }
   
   .hero p {
      font-size: 0.78rem;
      line-height: 1.55;
   }
   
   .btn {
      padding: 0.8rem 1.5rem;
      font-size: 0.65rem;
   }
   
   /* Sections - Extra Small Headings */
   .section-padding {
      padding: 0.5rem 0;
   }
   
   .section-header h2 {
      font-size: clamp(1.2rem, 8vw, 1.6rem);
   }
   
   /* About - Extra Small Headings */
   .about-text h2 {
      font-size: 1.3rem;
      line-height: 1.15;
   }
   
   .about-text p {
      font-size: 0.85rem;
   }
   
   .about-image {
      height: 300px;
   }
   
   /* Menu Items - Extra Small Headings */
   .item-image {
      height: 160px;
   }
   
   .item-header h3 {
      font-size: 1rem;
   }
   
   .item-header .price {
      font-size: 0.9rem;
   }
   
   .item-description {
      font-size: 0.78rem;
   }
   
   .menu-category-title {
      font-size: 1.3rem;
   }
   
   /* Media */
   .media-item {
      height: 250px;
   }
   
   /* Footer - Extra Small Headings */
   .footer-col h4 {
      font-size: 0.75rem;
   }
   
   .footer-col p,
   .footer-col li {
      font-size: 0.78rem;
   }
   
   /* Reservation Form */
   .reservation-form {
      padding: 2rem 1rem;
   }
   
   .form-group input,
   .rt-tr-row input,
   .form-group select,
   .rt-tr-row select,
   .form-group textarea,
   .rt-tr-row textarea {
      font-size: 0.85rem;
   }
}

/* Landscape Orientation Fixes */
@media (max-height: 600px) and (orientation: landscape) {
   .hero {
      height: 100vh;
      min-height: auto;
   }
   
   .hero h1 {
      font-size: 25px !important;
      margin-bottom: 1rem !important;
   }
   
   .hero p {
      font-size: 0.85rem;
      margin-bottom: 1.5rem;
   }
   
   .section-padding {
      padding: 0rem 0;
   }
}

/* Remove Extra Spacing */
.reduce-height {
   padding: 5rem 0 !important;
}

@media (max-width: 768px) {
   .reduce-height {
      padding: 3rem 0 !important;
   }
}

/* Fix Overflow Issues */
html,
body {
   overflow-x: hidden !important;
   max-width: 100vw !important;
   width: 100% !important;
}

body {
   position: relative;
}

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

/* Ensure all sections don't overflow */
section {
   overflow-x: hidden !important;
   max-width: 100% !important;
   width: 100% !important;
   position: relative;
}

/* Fix any wide elements */
img,
video,
iframe {
   max-width: 100%;
   height: auto;
}

/* Fix grid and flex containers */
.about-grid,
.media-grid,
.menu-grid {
   max-width: 100%;
   overflow: hidden;
}

/* Fix header */
header {
   max-width: 100%;
   overflow-x: hidden;
   left: 0;
   right: 0;
}

.header-wrapper {
   max-width: 100%;
   overflow: hidden;
}

/* Fix form overflow */
.rt-tr-form {
   max-width: 900px !important;
   width: 100% !important;
   box-sizing: border-box !important;
}

.reservation-form {
   overflow-x: hidden;
   max-width: 100%;
}

/* Ensure Images Don't Overflow */
img {
   max-width: 100%;
   height: auto;
}

/* Video Responsive */
video {
   max-width: 100%;
   height: auto;
}

/* Fix Grid Overflow */
.about-grid,
.menu-grid,
.media-grid,
.footer-grid {
   width: 100%;
   overflow: hidden;
}

/* Smooth Scrolling on Mobile */
html {
   -webkit-overflow-scrolling: touch;
}

/* Touch-Friendly Buttons */
@media (hover: none) and (pointer: coarse) {
   .btn {
      padding: 1.1rem 2.2rem;
      min-height: 48px;
   }
   
   .filter-btn {
      padding: 0.8rem 0;
      min-height: 44px;
   }
}

/* Accessibility - Focus States */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
   outline: 0px solid var(--color-gold);
   outline-offset: 0px;
}

/* Print Styles */
@media print {
   header,
   footer,
   .btn,
   .nav-links,
   .video-container {
      display: none;
   }
   
   body {
      background: white;
      color: black;
   }
   
   .section-padding {
      padding: 2rem 0;
   }
}


/* ========================================
   HAMBURGER MENU ENHANCEMENTS
   ======================================== */

/* Menu Overlay Background */
@media (max-width: 991px) {
   /* Dark overlay when menu is open */
   body.menu-open::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 998;
      animation: fadeIn 0.3s ease;
   }
   
   @keyframes fadeIn {
      from {
         opacity: 0;
      }
      to {
         opacity: 1;
      }
   }
   
   /* Smooth slide-in animation for menu */
   .nav-links-container {
      box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
   }
   
   /* Menu item stagger animation */
   .nav-links-container.active .nav-list li {
      animation: slideInRight 0.4s ease forwards;
      opacity: 0;
   }
   
   .nav-links-container.active .nav-list li:nth-child(1) {
      animation-delay: 0.1s;
   }
   
   .nav-links-container.active .nav-list li:nth-child(2) {
      animation-delay: 0.15s;
   }
   
   .nav-links-container.active .nav-list li:nth-child(3) {
      animation-delay: 0.2s;
   }
   
   .nav-links-container.active .nav-list li:nth-child(4) {
      animation-delay: 0.25s;
   }
   
   .nav-links-container.active .nav-list li:nth-child(5) {
      animation-delay: 0.3s;
   }
   
   .nav-links-container.active .nav-list li:nth-child(6) {
      animation-delay: 0.35s;
   }
   
   @keyframes slideInRight {
      from {
         opacity: 0;
         transform: translateX(30px);
      }
      to {
         opacity: 1;
         transform: translateX(0);
      }
   }
   
   /* CTA button animation */
   .nav-links-container.active .mobile-cta {
      animation: fadeInUp 0.5s ease forwards;
      animation-delay: 0.4s;
      opacity: 0;
   }
   
   @keyframes fadeInUp {
      from {
         opacity: 0;
         transform: translateY(20px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }
   
   /* Active menu link styling */
   .nav-list li.current-menu-item a,
   .nav-list li.current_page_item a {
      color: var(--color-gold);
      opacity: 1;
   }
   
   /* Hover effect for mobile menu */
   .nav-list a:hover {
      color: var(--color-gold);
      padding-left: 0.5rem;
      transition: all 0.3s ease;
   }
}

/* ========================================
   ADDITIONAL RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Fine-tune heading line heights for mobile */
@media (max-width: 768px) {
   h1, h2, h3, h4, h5, h6 {
      line-height: 1.2;
   }
   
   .hero h1 {
      line-height: 1.1;
   }
   
   .section-header h2 {
      line-height: 1.15;
   }
}

/* Optimize text readability on small screens */
@media (max-width: 576px) {
   body {
      font-size: 15px;
      line-height: 1.6;
   }
   
   p {
      line-height: 1.65;
   }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
   
   .hamburger-menu,
   .nav-links-container {
      transition: none;
   }
}

/* GPU acceleration for smooth animations */
.hamburger-menu,
.nav-links-container,
.hamburger-line {
   will-change: transform;
   transform: translateZ(0);
   backface-visibility: hidden;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Skip to content link for keyboard users */
.skip-to-content {
   position: absolute;
   top: -40px;
   left: 0;
   background: var(--color-gold);
   color: var(--color-black);
   padding: 0.5rem 1rem;
   text-decoration: none;
   z-index: 10000;
}

.skip-to-content:focus {
   top: 0;
}

/* Better focus visibility on mobile */
@media (max-width: 991px) {
   .nav-list a:focus {
      outline: 2px solid var(--color-gold);
      outline-offset: 4px;
      background: rgba(197, 160, 89, 0.1);
   }
   
   .hamburger-menu:focus {
      outline: 2px solid var(--color-gold);
      outline-offset: 4px;
   }
}

/* ========================================
   TABLET LANDSCAPE SPECIFIC
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   .hero {
      height: 90vh;
   }
   
   .hero h1 {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
   }
   
   .section-padding {
      padding: 1rem 0;
   }
	.menu-filters {
    gap: 1rem;
    margin-bottom: 0rem;
}

}

/* ========================================
   PRINT OPTIMIZATION
   ======================================== */

@media print {
   .hamburger-menu,
   .nav-links-container,
   .mobile-cta {
      display: none !important;
   }
}


/* ========================================
   RESERVATION FORM DURATION FIELD STYLING
   ======================================== */

/* Override Plugin Default Styles */
.rt-tr-form {
   max-width: 900px !important;
   margin: 0 auto !important;
   background: var(--color-charcoal) !important;
   padding: 5rem !important;
   border: 1px solid rgba(197, 160, 89, 0.1) !important;
   border-radius: 0 !important;
   display: grid !important;
   grid-template-columns: 1fr 1fr !important;
   gap: 3rem !important;
   align-items: start !important;
}

.rt-tr-form h3 {
   display: none !important;
}

/* Form Rows - Two Column Layout */
.rt-tr-form .rt-tr-row {
   display: flex !important;
   flex-direction: column !important;
   gap: 1rem !important;
   margin-bottom: 0 !important;
}

/* Make message span full width, button stays in grid */
.rt-tr-form .rt-tr-msg {
   grid-column: 1 / -1 !important;
}

/* Button stays in second column next to duration */
.rt-tr-form button[type="submit"] {
   align-self: end !important;
   margin-top: 1.7rem !important;
}

/* Labels */
.rt-tr-form label,
.rt-tr-form .rt-tr-row label {
   font-size: 0.7rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.2em !important;
   color: var(--color-gold-dim) !important;
   font-family: var(--font-body) !important;
   font-weight: 500 !important;
   margin-bottom: 0 !important;
   display: block !important;
}

/* Input Fields */
.rt-tr-form input[type="text"],
.rt-tr-form input[type="email"],
.rt-tr-form input[type="tel"],
.rt-tr-form input[type="date"],
.rt-tr-form input[type="time"],
.rt-tr-form input[type="number"],
.rt-tr-form select,
.rt-tr-form textarea {
   background: transparent !important;
   border: none !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   padding: 0.8rem 0 !important;
   color: #fff !important;
   font-family: var(--font-body) !important;
   font-size: 1rem !important;
   outline: none !important;
   transition: var(--transition-smooth) !important;
   width: 100% !important;
   border-radius: 0 !important;
   box-shadow: none !important;
}

.rt-tr-form input:focus,
.rt-tr-form select:focus,
.rt-tr-form textarea:focus {
   border-bottom-color: var(--color-gold) !important;
   box-shadow: none !important;
   background: transparent !important;
   outline: none !important;
}

/* Remove browser default focus styles */
.rt-tr-form input:focus-visible,
.rt-tr-form select:focus-visible,
.rt-tr-form textarea:focus-visible {
   outline: none !important;
   box-shadow: none !important;
   background: transparent !important;
}

/* Date and Time input specific */
.rt-tr-form input[type="date"]:focus,
.rt-tr-form input[type="time"]:focus {
   background: transparent !important;
   color: #fff !important;
}

/* Webkit autofill override */
.rt-tr-form input:-webkit-autofill,
.rt-tr-form input:-webkit-autofill:hover,
.rt-tr-form input:-webkit-autofill:focus,
.rt-tr-form input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px var(--color-charcoal) inset !important;
   -webkit-text-fill-color: #fff !important;
   transition: background-color 5000s ease-in-out 0s !important;
}

/* Select Dropdown */
.rt-tr-form select {
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
   background-repeat: no-repeat !important;
   background-position: right 0.5rem center !important;
   background-size: 1.2em !important;
   padding-right: 2rem !important;
   cursor: pointer !important;
}

.rt-tr-form select option {
   background: var(--color-charcoal) !important;
   color: #fff !important;
   padding: 0.5rem !important;
}

/* Small Text */
.rt-tr-form small {
   font-size: 0.75rem !important;
   color: var(--color-text-dim) !important;
   font-style: italic !important;
   margin-top: 0.5rem !important;
   display: block !important;
}

/* Submit Button */
.rt-tr-form button[type="submit"] {
   display: inline-block !important;
   padding: 1.25rem 3rem !important;
   border: 1px solid var(--color-gold) !important;
   color: var(--color-gold) !important;
   text-transform: uppercase !important;
   letter-spacing: 0.2rem !important;
   font-size: 0.8rem !important;
   font-weight: 500 !important;
   position: relative !important;
   overflow: hidden !important;
   z-index: 1 !important;
   background: transparent !important;
   cursor: pointer !important;
   transition: var(--transition-premium) !important;
   width: 100% !important;
   font-family: var(--font-body) !important;
   border-radius: 0 !important;
}

.rt-tr-form button[type="submit"]::before {
   content: '' !important;
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 0% !important;
   height: 100% !important;
   background: var(--color-gold) !important;
   z-index: -1 !important;
   transition: var(--transition-premium) !important;
}

.rt-tr-form button[type="submit"]:hover::before {
   width: 100% !important;
}

.rt-tr-form button[type="submit"]:hover {
   color: var(--color-black) !important;
   border-color: var(--color-gold) !important;
}

/* Message Area */
.rt-tr-form .rt-tr-msg {
   margin-top: 1rem !important;
   padding: 1.5rem 2rem !important;
   font-size: 1rem !important;
   text-align: center !important;
   border-radius: 0 !important;
   font-family: var(--font-body) !important;
   background: var(--color-gold) !important;
   color: var(--color-black) !important;
   border: 1px solid var(--color-gold) !important;
   font-weight: 500 !important;
   letter-spacing: 0.02em !important;
   line-height: 1.6 !important;
   display: none !important;
}

.rt-tr-form .rt-tr-msg.show {
   display: block !important;
}

.rt-tr-form .rt-tr-msg.error {
   background: rgba(211, 72, 23, 0.1) !important;
   color: var(--color-flame) !important;
   border-color: var(--color-flame) !important;
}

.rt-tr-form .rt-tr-msg.success {
   background: var(--color-gold) !important;
   color: var(--color-black) !important;
   border-color: var(--color-gold) !important;
}

/* Duration Field Styling */
.rtb-duration,
.rtb-duration select,
#rtb-duration,
select[name="rtb-duration"] {
   background: transparent !important;
   border: none !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   padding: 0.8rem 0 !important;
   color: #fff !important;
   font-family: var(--font-body) !important;
   font-size: 1rem !important;
   outline: none !important;
   transition: var(--transition-smooth) !important;
   width: 100% !important;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
   background-repeat: no-repeat !important;
   background-position: right 0.5rem center !important;
   background-size: 1.2em !important;
   padding-right: 2rem !important;
}

.rtb-duration select:focus,
#rtb-duration:focus,
select[name="rtb-duration"]:focus {
   border-bottom-color: var(--color-gold) !important;
}

.rtb-duration select option,
#rtb-duration option,
select[name="rtb-duration"] option {
   background: var(--color-charcoal) !important;
   color: #fff !important;
   padding: 0.5rem !important;
}

/* Duration Label */
.rtb-duration label,
label[for="rtb-duration"] {
   font-size: 0.7rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.2em !important;
   color: var(--color-gold-dim) !important;
   display: block !important;
   margin-bottom: 0.5rem !important;
}

/* Duration Field Container */
.rtb-duration,
.form-group.rtb-duration {
   display: flex !important;
   flex-direction: column !important;
   gap: 1rem !important;
   margin-bottom: 2rem !important;
}

/* Responsive Duration Field */
@media (max-width: 991px) {
   .rt-tr-form {
      padding: 4rem 2.5rem !important;
      gap: 2.5rem !important;
   }
}

@media (max-width: 768px) {
   .rt-tr-form {
      padding: 3rem 1.5rem !important;
      grid-template-columns: 1fr !important;
      gap: 2rem !important;
   }
   
   .rt-tr-form .rt-tr-row {
      margin-bottom: 0 !important;
   }
   
   .rt-tr-form button[type="submit"] {
      margin-top: 2rem !important;
      grid-column: 1 / -1 !important;
   }
   
   .rt-tr-form .rt-tr-msg {
      padding: 1.2rem 1.5rem !important;
      font-size: 0.9rem !important;
   }
   
   .rt-tr-form input[type="text"],
   .rt-tr-form input[type="email"],
   .rt-tr-form input[type="tel"],
   .rt-tr-form input[type="date"],
   .rt-tr-form input[type="time"],
   .rt-tr-form input[type="number"],
   .rt-tr-form select {
      font-size: 0.95rem !important;
      padding: 0.7rem 0 !important;
   }
   
   .rt-tr-form label {
      font-size: 0.65rem !important;
   }
   
   .rt-tr-form button[type="submit"] {
      padding: 1rem 2rem !important;
      font-size: 0.75rem !important;
      width: 100% !important;
   }
   
   .rtb-duration select,
   #rtb-duration,
   select[name="rtb-duration"] {
      font-size: 0.95rem !important;
      padding: 0.7rem 2rem 0.7rem 0 !important;
   }
   
   .rtb-duration label,
   label[for="rtb-duration"] {
      font-size: 0.65rem !important;
   }
}

@media (max-width: 576px) {
   .rt-tr-form {
      padding: 2.5rem 1.2rem !important;
      gap: 1.8rem !important;
   }
   
   .rt-tr-form .rt-tr-row {
      gap: 0.8rem !important;
      margin-bottom: 0 !important;
   }
   
   .rt-tr-form .rt-tr-msg {
      padding: 1rem 1.2rem !important;
      font-size: 0.85rem !important;
   }
   
   .rt-tr-form input[type="text"],
   .rt-tr-form input[type="email"],
   .rt-tr-form input[type="tel"],
   .rt-tr-form input[type="date"],
   .rt-tr-form input[type="time"],
   .rt-tr-form input[type="number"],
   .rt-tr-form select {
      font-size: 0.88rem !important;
      padding: 0.6rem 0 !important;
   }
   
   .rt-tr-form label {
      font-size: 0.6rem !important;
      letter-spacing: 0.15em !important;
   }
   
   .rt-tr-form button[type="submit"] {
      padding: 0.9rem 1.8rem !important;
      font-size: 0.7rem !important;
      letter-spacing: 0.15rem !important;
   }
   
   .rt-tr-form small {
      font-size: 0.7rem !important;
   }
   
   .rtb-duration select,
   #rtb-duration,
   select[name="rtb-duration"] {
      font-size: 0.88rem !important;
      padding: 0.6rem 2rem 0.6rem 0 !important;
   }
   
   .rtb-duration label,
   label[for="rtb-duration"] {
      font-size: 0.6rem !important;
      letter-spacing: 0.15em !important;
   }
}

/* Admin Settings Page Styling */
.wrap textarea[name="iyi_duration_options"] {
   font-family: 'Courier New', monospace;
   line-height: 1.8;
}

/* Ensure Duration Field Matches Other Form Fields */
.reservation-form .rtb-duration,
.reservation-form .form-group.rtb-duration {
   width: 100%;
}

/* Fix for Restaurant Reservations Plugin Specific Classes */
.rtb-booking-form .rtb-duration,
.rtb-booking-form .form-group.duration,
.rtb-booking-form fieldset.duration {
   display: flex !important;
   flex-direction: column !important;
   gap: 1rem !important;
}

.rtb-booking-form .rtb-duration select,
.rtb-booking-form .form-group.duration select,
.rtb-booking-form fieldset.duration select {
   background: transparent !important;
   border: none !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   padding: 0.8rem 2rem 0.8rem 0 !important;
   color: #fff !important;
   font-family: var(--font-body) !important;
   font-size: 1rem !important;
}

.rtb-booking-form .rtb-duration label,
.rtb-booking-form .form-group.duration label,
.rtb-booking-form fieldset.duration legend {
   font-size: 0.7rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.2em !important;
   color: var(--color-gold-dim) !important;
}

/* Remove any conflicting wrapper styles */
.reservation-form.fade-in-up {
   background: transparent !important;
   padding: 0 !important;
   border: none !important;
}
@media (max-width: 767px) {
	.about-grid {
    display: block !important;
}
	.about-image-wrapper {
    max-width: 100% !important;
    margin-top: 20px;
}
	    .menu-header {
        height: 200px !important;
			min-height:200px !important;
    }
	.item-image img {
    object-fit: contain;
		object-position:left;
}
	.item-image {
    border: 0px solid rgba(255, 255, 255, 0.1);
}
}
@media (max-width: 768px) {
	.media-grid {
    display: block !important;
}
		    .page-template-page-about-us .menu-header {
        height: 450px !important;
        min-height: 200px !important;
    }
		.item-image img {
    object-fit: contain;
		object-position:left;
}
	.item-image {
    border: 0px solid rgba(255, 255, 255, 0.1);
}
}
@media (max-width: 768px) and (max-width: 1024px){
		    .menu-header {
        height: 200px !important;
			min-height:200px !important;
    }
	    .page-template-page-about-us .menu-header {
        height: 450px !important;
        min-height: 200px !important;
    }
}