.restaurant-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(253,206,116,.22);
  border:1px solid rgba(253,206,116,.45);
  color:#141616;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.restaurant-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.restaurant-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:46px;
  padding:0 18px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  border:1px solid rgba(20,22,22,.10);
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.restaurant-btn--primary{
  background:#141616;
  color:#fff;
}
.restaurant-btn--primary:hover{
  background:#000;
  transform:translateY(-1px);
  color:#fff;
}
.restaurant-btn--ghost{
  background:rgba(20,22,22,.03);
  color:rgba(20,22,22,.92);
}
.restaurant-btn--ghost:hover{
  background:rgba(20,22,22,.06);
  border-color:rgba(20,22,22,.18);
  transform:translateY(-1px);
  color:rgba(20,22,22,.95);
}

.restaurant-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.restaurant-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(20,22,22,.03);
  border:1px solid rgba(20,22,22,.08);
  color:rgba(20,22,22,.85);
  font-weight:700;
  font-size:14px;
}

/* Hero animated visual (pure CSS) */
.restaurant-hero__visual{
  position:relative;
  min-height:320px;
  border-radius:24px;
  background:radial-gradient(1200px 420px at 30% 30%, rgba(253,206,116,.35), rgba(255,255,255,0) 60%),
             radial-gradient(900px 380px at 70% 70%, rgba(20,22,22,.10), rgba(255,255,255,0) 60%),
             linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.60));
  border:1px solid rgba(20,22,22,.08);
  box-shadow:0 24px 80px rgba(20,22,22,.10);
  overflow:hidden;
}
.restaurant-hero__image{
  display:block;
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  border-radius:24px;
}
.restaurant-hero__ring{
  position:absolute;
  inset:auto -30% -55% -30%;
  height:500px;
  border-radius:999px;
  background:conic-gradient(from 180deg, rgba(253,206,116,.0), rgba(253,206,116,.55), rgba(253,206,116,.0));
  filter:blur(2px);
  animation:rest-ring 8s linear infinite;
  opacity:.7;
}
.restaurant-hero__card{
  position:absolute;
  width:min(44%, 240px);
  aspect-ratio: 4 / 5;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(20,22,22,.08), rgba(20,22,22,.02));
  border:1px solid rgba(20,22,22,.10);
  box-shadow:0 18px 44px rgba(20,22,22,.12);
  transform:translate3d(0,0,0);
}
.restaurant-hero__card::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(253,206,116,.35), rgba(255,255,255,.0));
}
.restaurant-hero__card--one{
  top:18%;
  left:10%;
  rotate:-7deg;
  animation:rest-float 4.6s ease-in-out infinite;
}
.restaurant-hero__card--two{
  top:12%;
  right:12%;
  rotate:6deg;
  animation:rest-float 5.2s ease-in-out infinite reverse;
}
.restaurant-hero__card--three{
  bottom:10%;
  left:28%;
  rotate:2deg;
  animation:rest-float 5.8s ease-in-out infinite;
}
.restaurant-hero__spark{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#fdce74;
  box-shadow:0 0 0 10px rgba(253,206,116,.12);
  opacity:.8;
}
.restaurant-hero__spark--a{ top:24%; left:52%; animation:rest-pulse 2.8s ease-in-out infinite; }
.restaurant-hero__spark--b{ bottom:22%; right:22%; animation:rest-pulse 3.2s ease-in-out infinite; }

@keyframes rest-float{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-10px,0); }
}
@keyframes rest-ring{
  from{ transform:translate3d(0,0,0) rotate(0deg); }
  to{ transform:translate3d(0,0,0) rotate(360deg); }
}
@keyframes rest-pulse{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.12); opacity:1; }
}

/* Featured cards */
.restaurant-card{
  background:#fff;
  border:1px solid rgba(20,22,22,.08);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 16px 50px rgba(20,22,22,.06);
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  height:100%;
}
.restaurant-card:hover{
  transform:translateY(-4px);
  border-color:rgba(253,206,116,.72);
  box-shadow:0 22px 70px rgba(20,22,22,.10);
}
.restaurant-card__media{
  position:relative;
  margin:0;
  aspect-ratio: 16 / 10;
  background:rgba(20,22,22,.04);
  overflow:hidden;
}
.restaurant-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 240ms ease;
  display:block;
}
.restaurant-card:hover .restaurant-card__media img{
  transform:scale(1.07);
}
.restaurant-card__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.30));
  pointer-events:none;
}
.restaurant-card__price{
  position:absolute;
  top:14px;
  right:14px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,22,22,.10);
  font-weight:900;
  color:#141616;
}
.restaurant-card__body{
  padding:18px 18px 16px 18px;
}
.restaurant-card__title{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:#141616;
}
.restaurant-card__text{
  margin:10px 0 0 0;
  color:rgba(20,22,22,.70);
  line-height:1.7;
}
.restaurant-card__actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.restaurant-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(20,22,22,.10);
  background:#141616;
  color:#fff;
  font-weight:800;
  text-decoration:none;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.restaurant-mini-btn:hover{
  background:#000;
  transform:translateY(-1px);
  color:#fff;
}
.restaurant-mini-btn--ghost{
  background:rgba(20,22,22,.03);
  color:rgba(20,22,22,.90);
}
.restaurant-mini-btn--ghost:hover{
  background:rgba(20,22,22,.06);
  border-color:rgba(20,22,22,.18);
  color:rgba(20,22,22,.95);
}

/* Gallery */
.restaurant-gallery__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.restaurant-gallery__item{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(20,22,22,.08);
  background:rgba(20,22,22,.04);
  box-shadow:0 18px 60px rgba(20,22,22,.06);
  text-decoration:none;
  display:block;
}
.restaurant-gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio: 16 / 11;
  transform:scale(1.01);
  transition:transform 240ms ease;
}
.restaurant-gallery__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.48));
}
.restaurant-gallery__label{
  color:#fff;
  font-weight:800;
  font-size:14px;
  letter-spacing:.01em;
}
.restaurant-gallery__zoom{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.92);
  color:#141616;
  border:1px solid rgba(20,22,22,.10);
  flex:0 0 auto;
}
.restaurant-gallery__item:hover img{
  transform:scale(1.06);
}

/* Marquee */
.restaurant-marquee{
  width:min(520px, 100%);
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(20,22,22,.08);
  background:#fff;
}
.restaurant-marquee__inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  white-space:nowrap;
  color:rgba(20,22,22,.75);
  font-weight:700;
  animation:rest-marquee 14s linear infinite;
}
@keyframes rest-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Tabs + panels */
.restaurant-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.restaurant-tab{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(20,22,22,.10);
  background:#fff;
  color:rgba(20,22,22,.80);
  font-weight:900;
  transition:background 160ms ease, transform 160ms ease, border-color 160ms ease, color 160ms ease;
}
.restaurant-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(253,206,116,.55);
}
.restaurant-tab.is-active{
  background:#141616;
  color:#fff;
  border-color:#141616;
}
.restaurant-panels{
  position:relative;
}
.restaurant-panel{
  animation:rest-panel-in 240ms ease;
}
@keyframes rest-panel-in{
  from{ opacity:.0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.restaurant-panel__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.restaurant-menu-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(20,22,22,.08);
  box-shadow:0 10px 30px rgba(20,22,22,.04);
}
.restaurant-menu-item__title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#141616;
}
.restaurant-menu-item__note{
  margin-top:6px;
  color:rgba(20,22,22,.68);
  font-size:14px;
  line-height:1.6;
}
.restaurant-menu-item__price{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(253,206,116,.20);
  border:1px solid rgba(253,206,116,.45);
  font-weight:900;
  color:#141616;
  white-space:nowrap;
}

/* Responsive */
@media (min-width: 768px){
  .restaurant-panel__grid{
    grid-template-columns:1fr 1fr;
  }
  .restaurant-gallery__grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px){
  .restaurant-panel__grid{
    grid-template-columns:1fr 1fr 1fr;
  }
  .restaurant-gallery__grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 575.98px){
  .restaurant-hero__visual{ min-height:280px; }
  .restaurant-hero__card{ width:56%; }
  .restaurant-marquee__inner{ animation-duration: 18s; }
}

@media (prefers-reduced-motion: reduce){
  .restaurant-hero__ring,
  .restaurant-hero__card,
  .restaurant-hero__spark,
  .restaurant-marquee__inner{
    animation:none !important;
  }
  .restaurant-card,
  .restaurant-btn,
  .restaurant-tab,
  .restaurant-mini-btn{
    transition:none !important;
  }
}

