/* ============================================================
   ROYAL LOUNGE — DESIGN TOKENS
   Palette:  --ink (near-black coffee) / --panel (roasted umber)
             --gold (brass) / --wine (burgundy, night-life accent)
             --cream (warm ivory text)
   Display:  Fraunces  |  Body: Inter  |  Labels/Prices: IBM Plex Mono
   Signature: the "dusk strip" — a slow amber→wine gradient sweep
   used on the hero and section dividers, standing in for Lubowa's
   hills at golden hour tipping into lounge nightlife; paired with
   a hairline diamond-lattice rule between sections.
   ============================================================ */
:root{
  --ink:#120d0a;
  --ink-2:#1c150f;
  --panel:#241a12;
  --panel-2:#2c2016;
  --gold:#c99a3f;
  --gold-soft:#e6c884;
  --wine:#7a1f28;
  --wine-soft:#9c2f39;
  --cream:#f4ecdd;
  --cream-dim:#cabb9f;
  --line: rgba(201,154,63,.22);
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; line-height:1.1; letter-spacing:-0.01em;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-soft);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--gold);}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 28px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-gold{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--cream); border-color:rgba(244,236,221,.35);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-soft);}
.btn-wine{background:var(--wine); color:var(--cream); border-color:var(--wine);}
.btn-wine:hover{background:var(--wine-soft); border-color:var(--wine-soft);}

/* lattice divider */
.lattice{
  height:14px;
  background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
                     linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
  background-size:14px 14px;
  background-position:0 0, 7px 7px;
  opacity:.6;
}

/* dusk sweep */
.dusk{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(122,31,40,.55), rgba(201,154,63,.35) 45%, rgba(18,13,10,.9));
  background-size:220% 220%;
  animation:duskShift 18s ease-in-out infinite;
  mix-blend-mode:multiply;
}
@keyframes duskShift{
  0%{background-position:0% 40%;}
  50%{background-position:100% 60%;}
  100%{background-position:0% 40%;}
}
@media (prefers-reduced-motion: reduce){ .dusk{animation:none;} }

/* reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].in{opacity:1; transform:none;}

/* ---------------- HEADER ---------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  transition:padding .3s ease, background .3s ease, backdrop-filter .3s ease;
}
header.scrolled{
  padding:14px 32px;
  background:rgba(18,13,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{font-family:'Fraunces',serif; font-weight:700; font-size:1.35rem; letter-spacing:.03em; display:flex; align-items:center; gap:10px;}
.logo i{color:var(--gold);}
nav.mainnav ul{display:flex; gap:34px;}
nav.mainnav a{
  font-family:'IBM Plex Mono',monospace;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); position:relative; padding:4px 0;
}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--gold-soft);}
.header-actions{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; font-size:1.5rem; color:var(--cream); cursor:pointer;}

@media (max-width: 960px){
  nav.mainnav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--ink-2); padding:100px 32px; transform:translateX(100%);
    transition:transform .35s ease; border-left:1px solid var(--line);
  }
  nav.mainnav.open{transform:translateX(0);}
  nav.mainnav ul{flex-direction:column; gap:24px;}
  .nav-toggle{display:block;}
  .header-actions .btn-gold{display:none;}
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:var(--ink); overflow:hidden;
}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--ink) 2%, rgba(18,13,10,.12) 45%, rgba(18,13,10,.4) 100%);}
.hero .dusk{opacity:.32;}

/* ---------------- HERO CAROUSEL (full-bleed crossfade → medallion) ---------------- */
.hero-carousel{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.carousel-slides{ position:absolute; inset:0; }
.carousel-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.09);
  transition:opacity 1.3s ease, transform 3.4s linear;
  will-change:opacity, transform;
}
.carousel-slide.is-active{ opacity:1; transform:scale(1); z-index:1; }
.carousel-medallion{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 1s ease;
}
.carousel-medallion::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 48%, rgba(18,13,10,.2), rgba(18,13,10,.7) 72%);
}
.carousel-medallion.is-visible{ opacity:1; }
.carousel-medallion .medallion{
  position:relative; width:min(30vmin,230px); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 3px var(--gold), 0 0 0 9px rgba(230,200,132,.22), 0 25px 70px rgba(0,0,0,.65);
  transform:scale(.7);
  transition:transform 1.15s cubic-bezier(.2,.8,.2,1);
}
.carousel-medallion.is-visible .medallion{ transform:scale(1); }
.carousel-medallion.is-floating .medallion{ animation:medallionFloat 5s ease-in-out infinite; }
.carousel-medallion .medallion img{ width:100%; height:100%; object-fit:cover; }
@keyframes medallionFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-3%) rotate(.6deg); }
}
@media (prefers-reduced-motion: reduce){
  .carousel-slide{ transition:none; }
  .carousel-medallion{ transition:none; }
  .carousel-medallion .medallion{ transition:none; }
  .carousel-medallion.is-floating .medallion{ animation:none; }
}
.hero-inner{position:relative; z-index:2; padding:0 32px 90px; max-width:900px;}
.hero-inner .eyebrow{margin-bottom:22px;}
.hero-inner h1{font-size:clamp(2.6rem, 6vw, 5rem); margin-bottom:20px; max-width:14ch;}
.hero-inner h1 em{font-style:italic; color:var(--gold-soft); font-weight:500;}
.hero-inner p.lede{font-size:1.05rem; color:var(--cream-dim); max-width:46ch; margin-bottom:34px;}
.hero-hours{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--gold-soft);
  border:1px solid var(--line); padding:9px 16px; border-radius:var(--radius); margin-bottom:30px;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:16px;}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.2em; color:var(--cream-dim);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:cue 2s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.3;} 50%{opacity:1;}}


/* ---------------- SECTION SHELL ---------------- */
section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(2rem, 3.6vw, 2.9rem); margin-top:16px;}
.section-head p{color:var(--cream-dim); margin-top:16px; max-width:52ch;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------------- ABOUT ---------------- */
.about{background:var(--ink);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.about-copy p{color:var(--cream-dim); margin-bottom:16px;}
.about-copy .quote{
  margin-top:26px; padding-left:20px; border-left:2px solid var(--gold);
  font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:var(--gold-soft);
}
.about-media{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);

    aspect-ratio: 4 / 5;      /* Similar to your original image */
}

.about-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.about-media img{border-radius:var(--radius); box-shadow:0 30px 60px rgba(0,0,0,.5);}
.about-media .tag{
  position:absolute; bottom:-24px; right:-24px; background:var(--wine); color:var(--cream);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 20px; border-radius:var(--radius); text-align:center; line-height:1.5;
}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:80px; border-top:1px solid var(--line); padding-top:44px;}
.stat h3{font-size:2.4rem; color:var(--gold-soft);}
.stat p{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); margin-top:6px;}
@media (max-width:800px){ .about-grid{grid-template-columns:1fr;} .stats{grid-template-columns:repeat(2,1fr);} }

/* ---------------- MENU PREVIEW ---------------- */
.menu-section{background:var(--panel);}
.menu-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.menu-tabs button{
  font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--cream-dim);
  padding:10px 18px; border-radius:var(--radius); cursor:pointer; transition:all .2s ease;
}
.menu-tabs button.active, .menu-tabs button:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.menu-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.menu-card{

    display:none;

    flex-direction:column;

    background:var(--panel);

    border:1px solid var(--line);

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

}

.menu-card.show{

    display:flex;

}

.menu-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 70px rgba(0,0,0,.28);

}
.menu-image{

    position:relative;

    display:block;

    overflow:hidden;

    height:260px;

}

.menu-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.menu-card:hover .menu-image img{

    transform:scale(1.08);

}
.menu-image::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

}

.menu-card:hover .menu-image::after{

    left:150%;

}
.menu-tag{

    position:absolute;

    top:18px;

    right:18px;

    background:rgba(18,13,10,.82);

    color:var(--gold-soft);

    border:1px solid rgba(255,255,255,.12);

    padding:8px 14px;

    border-radius:40px;

    font-family:'IBM Plex Mono', monospace;

    font-size:.68rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    backdrop-filter:blur(10px);

}
.menu-content{

    padding:26px;

    display:flex;

    flex-direction:column;

    flex:1;

}
.menu-content h4{

    font-size:1.35rem;

    margin-bottom:14px;

}
.menu-content p{

    color:var(--cream-dim);

    line-height:1.7;

    flex:1;

}
.menu-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:28px;

}
.price{

    font-size:1.18rem;

    font-weight:700;

    color:var(--gold);

}
.menu-order-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:11px 18px;

    border:1px solid var(--gold);

    border-radius:40px;

    color:var(--gold-soft);

    text-decoration:none;

    transition:.3s;

    font-family:'IBM Plex Mono', monospace;

    font-size:.74rem;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.menu-order-link:hover{

    background:var(--gold);

    color:var(--ink);

}
.menu-more{

    background:

    linear-gradient(
        rgba(18,13,10,.78),
        rgba(18,13,10,.88)
    ),

    url("assets/menu/pizza/pizza-collage.jpg");

    background-size:cover;

    background-position:center;
		

    align-items:center;
    justify-content:center;

    text-align:center;

}
.menu-more-salad{

    background:

    linear-gradient(
        rgba(18,13,10,.78),
        rgba(18,13,10,.88)
    ),

    url("assets/menu/salads/salad-collage.jpg");

    background-size:cover;

    background-position:center;
	

    align-items:center;
    justify-content:center;

    text-align:center;
	

}

.menu-more-content{

   display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    max-width:320px;

}

.menu-more-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(201,154,63,.12);

    border:1px solid rgba(201,154,63,.3);

    font-size:2.4rem;

    margin-bottom:26px;

}

.menu-more h3{

    font-size:2rem;

    margin-bottom:18px;
	text-align:center;

}

.menu-more p{

    color:var(--cream-dim);

    line-height:1.8;

    margin-bottom:34px;
	text-align:center;

}
.menu-more{

    transition:.4s;

}

.menu-more:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 70px rgba(0,0,0,.3);

}
.menu-cta{margin-top:50px; padding:36px; border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:rgba(201,154,63,.04);}
.menu-cta h4{font-size:1.3rem;}
.menu-cta p{color:var(--cream-dim); margin-top:6px; max-width:44ch;}
@media(max-width:900px){

    .menu-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    .menu-image{

        height:220px;

    }

}

/*----------------- order whatsapp modal and logic--------------------*/

.food-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.food-modal.open{

    opacity:1;

    visibility:visible;

}

.food-modal-card{

    width:min(760px,92vw);

    max-height:92vh;

    overflow:auto;

    background:var(--panel);

    border-radius:8px;

    animation:modalUp .4s ease;

}

@keyframes modalUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.food-modal-card img{

    width:100%;

    height:380px;

    object-fit:cover;

}

.food-content{

    padding:30px;

}

.food-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

}

.food-price{

    font-size:1.3rem;

    color:var(--gold);

    margin:20px 0;

}

.quantity{

    margin:24px 0;

}

.qty-control{

    display:flex;

    gap:18px;

    align-items:center;

}

.qty-control button{

    width:42px;

    height:42px;

}

.modal-buttons{

    display:flex;

    gap:16px;

    margin-top:28px;

    flex-wrap:wrap;

}

.modal-close{

    position:absolute;

    right:18px;

    top:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    font-size:1.6rem;

    cursor:pointer;

}
.food-options{

    margin:24px 0;

}

.food-options label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.size-options{

    display:flex;

    gap:14px;

}

.size-option{

    flex:1;

    cursor:pointer;

}

.size-option input{

    display:none;

}

.size-option span{

    display:block;

    padding:14px;

    border:1px solid var(--line);

    border-radius:12px;

    transition:.25s;

}

.size-option input:checked + span{

    border-color:var(--gold);

    background:rgba(201,154,63,.12);

}

.size-option strong{

    display:block;

    margin-top:6px;

    color:var(--gold);

}

.size-selector{

    display:flex;

    gap:12px;

}

.size-btn{

    flex:1;

    background:transparent;

    color:var(--cream);

    border:1px solid var(--line);

    padding:14px;

    cursor:pointer;

    border-radius:8px;

    transition:.25s;

}

.size-btn.active{

    background:var(--gold);

    color:var(--ink);

    border-color:var(--gold);

}

.food-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:24px 0;

    padding:16px 0;

    border-top:1px solid var(--line);

    border-bottom:1px solid var(--line);

    font-size:1.1rem;

    font-weight:600;

}

#modalTotal{

    color:var(--gold);

    font-size:1.3rem;

}

/*--------------- CART BUTTON -------------------*/
/* ---------------- FLOATING CART ---------------- */
.floating-cart{
    position:fixed;
    right:20px;
    bottom:24px;
    z-index:10050;

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 16px;

    background:linear-gradient(135deg, var(--gold), #D7A94B);
    color:var(--ink);

    border:none;
    border-radius:999px;

    box-shadow:0 18px 40px rgba(0,0,0,.38);

    cursor:pointer;
    transition:transform .22s ease, box-shadow .22s ease;

    min-width:190px;
}

.floating-cart:hover{
    transform:translateY(-2px);
    box-shadow:0 24px 48px rgba(0,0,0,.45);
}

.cart-icon-wrap{
    position:relative;
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(255,255,255,.22);

    display:grid;
    place-items:center;
}

.cart-icon-wrap i{
    font-size:1.35rem;
}

.cart-badge{
    position:absolute;
    top:-6px;
    right:-4px;

    min-width:24px;
    height:24px;
    padding:0 6px;

    border-radius:999px;

    background:#7A1F28;
    color:#fff;

    font-size:.72rem;
    font-weight:700;

    display:grid;
    place-items:center;

    border:2px solid var(--gold);
}

.cart-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.1;
}

.cart-copy strong{
    font-size:.92rem;
}

.cart-copy small{
    opacity:.9;
    font-weight:600;
}



/* Bounce when item added */
.floating-cart.bump{
    animation:cartBump .45s ease;
}

@keyframes cartBump{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
}



@media (max-width:768px){

    .floating-cart{

        right:16px;
        bottom:24px;

        min-width:auto;
        width:auto;

        padding:12px 14px;

        gap:10px;

        max-width:220px;

    }

}


/* ---------------- TOAST ---------------- */
.toast{
    position:fixed;
    left:50%;
    bottom:100px;
    transform:translateX(-50%) translateY(20px);

    background:var(--panel);
    color:var(--cream);

    border:1px solid var(--line);
    border-radius:999px;

    padding:12px 16px;

    display:flex;
    align-items:center;
    gap:10px;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    opacity:0;
    pointer-events:none;
    transition:.28s ease;

    z-index:10060;
}

.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.toast i{
    color:var(--gold);
}

/*----------------Extras----------------------*/
.extras-box{

margin-top:24px;

}

.extra-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 0;

border-bottom:1px solid rgba(255,255,255,.06);

}

.extra-item label{

display:flex;

gap:10px;

cursor:pointer;

width:100%;

justify-content:space-between;

}

/*----------------- Cart Modal ---------------------------------*/

.cart-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:flex-end;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99999;

}

.cart-modal.open{

    opacity:1;

    visibility:visible;

}

.cart-panel{

    width:470px;

    max-width:100%;

    height:100%;

    background:var(--panel);

    display:flex;

    flex-direction:column;

    transform:translateX(100%);

    transition:.35s;

}

.cart-modal.open .cart-panel{

    transform:none;

}

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid var(--line);

}

.cart-header h2{

    margin:0;

}

.cart-header button{

    border:none;

    background:none;

    color:white;

    font-size:30px;

    cursor:pointer;

}

.cart-items{

    flex:1;

    overflow:auto;

    padding:24px;

}

.cart-item{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:18px;

    margin-bottom:22px;

    border-bottom:1px solid var(--line);

    padding-bottom:18px;

}

.cart-item img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:8px;

}

.cart-item h4{

    margin-bottom:6px;

}

.cart-size{

    color:var(--gold);

    font-size:.85rem;

}

.cart-controls{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:14px;

}

.qty-buttons{

    display:flex;

    gap:8px;

    align-items:center;

}

.qty-buttons button{

    width:32px;

    height:32px;

    border:none;

    cursor:pointer;

    background:var(--gold);

    color:black;

    border-radius:6px;

}

.remove-item{

    color:#d9534f;

    cursor:pointer;

    font-size:.85rem;

}

.cart-summary{

    padding:24px;

    border-top:1px solid var(--line);

}

.summary-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

}

.total{

    font-size:1.2rem;

}

.cart-notes{

    padding:24px;

}

.cart-notes textarea{

    width:100%;

}

.cart-actions{

    padding:24px;

    display:flex;

    flex-direction:column;

    gap:14px;

}

@media(max-width:700px){

.cart-panel{

width:100%;

}

}

/*-------------------MORE MENU ITEMS MODAL -----------------------*/
.more-modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.82);

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:10060;

}

.more-modal.open{

    opacity:1;
    visibility:visible;

}

.more-modal-card{

    width:min(900px,92vw);

    max-height:85vh;

    overflow:hidden;

    border-radius:22px;

    background:#121212;

    display:flex;
    flex-direction:column;

}

.more-header{

    padding:22px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.more-header input{

    width:100%;

    margin-top:15px;

}

.more-list{

    overflow:auto;

    padding:20px;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:18px;

}

.more-item{

    display:flex;

    gap:15px;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:12px;

    transition:.25s;

}

.more-item:hover{

    border-color:var(--gold);

    transform:translateY(-3px);

}

.more-item img{

    width:95px;

    height:95px;

    border-radius:12px;

    object-fit:cover;

}

.more-item h4{

    margin-bottom:8px;

}

.more-item p{

    font-size:.82rem;

    opacity:.75;

    line-height:1.4;

}

.more-price{

    color:var(--gold);

    font-weight:700;

    margin-top:10px;

}

/* ---------------- DAILY SPECIALS — card deck + poster ---------------- */
.specials-deck{
  display:grid; grid-template-columns:340px 84px 1fr; align-items:center; gap:0;
  max-width:960px; margin:64px auto 0;
}
.deck-stack{position:relative; width:100%; max-width:340px; height:360px; margin:0 auto; justify-self:center;}
.day-card{
  position:absolute; inset:0; background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:30px; text-align:left; cursor:pointer;
  box-shadow:0 18px 34px rgba(0,0,0,.4);
  transition:transform .55s cubic-bezier(.22,.68,0,1.01), filter .4s ease, box-shadow .4s ease;
  transform-origin:50% 85%;
}
.day-card:not(.front){filter:brightness(.6) saturate(.7);}
.day-card.front{box-shadow:0 26px 55px rgba(0,0,0,.55); border-color:var(--gold);}
.day-card .dname{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft);}
.day-card i{font-size:1.5rem; color:var(--gold); margin:18px 0 10px; display:block;}
.day-card h5{font-size:1.1rem; margin-bottom:8px; font-family:'Fraunces',serif; font-weight:600;}
.day-card p{font-size:.85rem; color:var(--cream-dim); max-width:24ch;}
.day-card .today-badge{
  display:none; position:absolute; top:18px; right:18px; background:var(--wine); color:var(--cream);
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:20px;
}
.day-card.front.is-today .today-badge{display:inline-block;}
.deck-hint{
  margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cream-dim); text-align:center;
}
.day-card:hover{

    transform:
        translateY(-8px)
        scale(1.03);

}
.day-card:not(.front){

    pointer-events:none;

}
.deck-connector{display:flex; align-items:center; justify-content:center;}
.connector-svg{width:70px; height:32px; opacity:.75;}
.deck-poster{
  position:relative; height:360px; border-radius:6px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 28px 60px rgba(0,0,0,.5); transform:rotate(1.4deg);  transform:
        perspective(1200px)
        rotateY(-6deg)
        rotate(1deg);
}
.deck-poster::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(122,31,40,.6), rgba(201,154,63,.12) 55%, rgba(18,13,10,.15));
}

.deck-poster:hover{

    transform:
        perspective(1200px)
        rotateY(-2deg)
        rotate(0deg);

}
.deck-poster img{

    width:100%;
    height:100%;
    object-fit:cover;

    opacity:1;

    transition:
        opacity .35s ease,
        transform .6s ease;

}

.deck-poster img.switching{

    opacity:0;

    transform:scale(1.04);

}
.poster-tape{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:88px; height:26px; background:rgba(244,236,221,.88); box-shadow:0 4px 10px rgba(0,0,0,.35); z-index:2;
}
.poster-plaque{
  position:absolute; left:18px; bottom:18px; z-index:2; background:var(--wine); color:var(--cream);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 16px; border-radius:2px; box-shadow:0 10px 24px rgba(0,0,0,.4);
}
@media (max-width:900px){
  .specials-deck{grid-template-columns:1fr; max-width:400px; gap:22px;}
  .deck-connector{transform:rotate(90deg); margin:-6px auto;}
  .deck-poster{transform:none;}
}

/* ---------------- EVENTS ---------------- */
.events{background:var(--panel);}
.event-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
.event-card{background:var(--panel-2); padding:32px; min-height:200px; display:flex; flex-direction:column; justify-content:space-between;}
.event-card i{font-size:1.6rem; color:var(--gold);}
.event-card h4{margin-top:18px; font-size:1.15rem;}
.event-card p{color:var(--cream-dim); font-size:.9rem; margin-top:8px;}
.event-card .when{margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft);}
@media (max-width:900px){ .event-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .event-grid{grid-template-columns:1fr;} }

/* ---------------- GALLERY ---------------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:6px;}
.gallery-grid a{grid-column:span 1; grid-row:span 1; overflow:hidden; position:relative;}
.gallery-grid a:nth-child(1){grid-column:span 2; grid-row:span 2;}
.gallery-grid a:nth-child(5){grid-row:span 2;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:grayscale(.15);}
.gallery-grid a:hover img{transform:scale(1.06); filter:grayscale(0);}
@media (max-width:800px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} .gallery-grid a:nth-child(1){grid-column:span 2;} }

/* ---------------- RESERVE ---------------- */
.reserve{background:var(--ink); position:relative; overflow:hidden;}
.reserve-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start;}
.reserve-info .detail{display:flex; gap:16px; margin-top:26px;}
.reserve-info .detail i{color:var(--gold); font-size:1.2rem; margin-top:3px;}
.reserve-info .detail h5{font-size:.95rem; margin-bottom:4px;}
.reserve-info .detail p{color:var(--cream-dim); font-size:.9rem;}
form.reserve-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:36px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.reserve-form input, .reserve-form select, .reserve-form textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line); color:var(--cream);
  padding:13px 14px; border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:.92rem;
}
.reserve-form input:focus, .reserve-form select:focus, .reserve-form textarea:focus{outline:2px solid var(--gold); border-color:var(--gold);}
.reserve-form label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); display:block; margin-bottom:6px;}
@media (max-width:900px){ .reserve-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

/* ---------------- CONTACT / MAP ---------------- */
.map-frame{width:100%; height:420px; border:0; filter:grayscale(.4) contrast(1.1); }
.contact-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:2px;}
.contact-box{background:var(--panel); padding:30px; display:flex; gap:16px; align-items:flex-start;}
.contact-box i{color:var(--gold); font-size:1.3rem;}
.contact-box h5{font-size:.95rem; margin-bottom:6px;}
.contact-box p{color:var(--cream-dim); font-size:.88rem;}
@media (max-width:800px){ .contact-strip{grid-template-columns:1fr;} }

/* ---------------- FOOTER ---------------- */
footer{background:var(--ink-2); padding:70px 0 26px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px;}
.footer-grid h4{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px;}
.footer-grid p{color:var(--cream-dim); font-size:.92rem; margin-bottom:8px;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:var(--cream-dim); font-size:.9rem;}
.footer-grid a:hover{color:var(--gold-soft);}
.footer-social{display:flex; gap:14px; margin-top:18px;}
.footer-social a{width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.footer-social a:hover{border-color:var(--gold); color:var(--gold-soft);}
.footer-bottom{margin-top:60px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--cream-dim);}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/*----------------custom css---------------------*/
.special-form-control{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel);
    color:var(--cream);
    font:inherit;
    resize:vertical;
    transition:.25s;
}

.special-form-control:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,154,63,.15);
}

.search-box{
    position:relative;
    margin-bottom:22px;
}

.search-box i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gold);
    pointer-events:none;
}

.search-box .reserve-input{
    padding-left:48px;
}

/* ---------------- FLOATING WHATSAPP ---------------- */
.wa-float{
  position:fixed; left:24px; bottom:24px; z-index:300;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 10px 30px rgba(37,211,102,.4); transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}

/* ---------------- AI MENU ASSISTANT ---------------- */
.ai-launcher{
  position:fixed; right:24px; bottom:120px; z-index:300;
  display:flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--ink); border:none; cursor:pointer;
  padding:14px 20px 14px 16px; border-radius:32px;
  font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 10px 30px rgba(201,154,63,.35); transition:transform .2s ease;
}
.ai-launcher:hover{transform:scale(1.05);}
.ai-launcher i{font-size:1.2rem;}
.ai-panel{
  position:fixed; right:24px; bottom:94px; z-index:300;
  width:340px; max-width:88vw; height:460px; max-height:70vh;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.ai-panel.open{display:flex;}
.ai-head{background:var(--wine); padding:16px 18px; display:flex; align-items:center; justify-content:space-between;}
.ai-head h5{font-size:.92rem; color:var(--cream);}
.ai-head span{font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:rgba(244,236,221,.75);}
.ai-head button{background:none; border:none; color:var(--cream); font-size:1.1rem; cursor:pointer;}
.ai-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;}
.ai-msg{max-width:82%; padding:10px 13px; border-radius:10px; font-size:.86rem; line-height:1.5;}
.ai-msg.bot{background:var(--ink-2); align-self:flex-start; border-bottom-left-radius:2px;}
.ai-msg.user{background:var(--gold); color:var(--ink); align-self:flex-end; border-bottom-right-radius:2px;}
.ai-suggest{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px;}
.ai-suggest button{
  font-size:.72rem; font-family:'IBM Plex Mono',monospace; background:transparent; color:var(--gold-soft);
  border:1px solid var(--line); padding:6px 10px; border-radius:20px; cursor:pointer;
}
.ai-suggest button:hover{border-color:var(--gold);}
.ai-input{display:flex; border-top:1px solid var(--line);}
.ai-input input{flex:1; background:var(--ink-2); border:none; color:var(--cream); padding:14px 16px; font-family:'Inter',sans-serif; font-size:.88rem;}
.ai-input input:focus{outline:none;}
.ai-input button{background:var(--gold); border:none; color:var(--ink); padding:0 18px; cursor:pointer;}
@media (max-width:500px){ .ai-panel{right:12px; left:12px; width:auto;} .ai-launcher{right:12px;} .ai-launcher span{display:none;} .wa-float{left:12px;} }