/* reservation-menu.css */

.reservation-menu-page{
  --menu-card-max: 600px;
}


.reservation-menu-page .menu-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:stretch;
  gap: clamp(20px, 4vh, 28px);
  max-width: var(--menu-card-max);
  margin-inline: auto;
}

.reservation-menu-page .card-button--with-desc{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border-radius:14px;
  padding:12px 16px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  width: 100%;
  max-width: var(--menu-card-max);
  transition: transform .06s ease, box-shadow .06s ease, background-color .12s ease;
}
.reservation-menu-page .card-button--with-desc:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  background-color: #fffefe;
}

.reservation-menu-page .custom-heading{ margin-top:117px; }
.reservation-menu-page .menu-shell{
  display:flex; flex-direction:column; align-items:center;
  padding: clamp(34px, 8vh, 56px) 16px clamp(32px, 7vh, 44px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}
.reservation-menu-page .menu-title{
  font-size: clamp(22px, 2.4vw, 28px);
  text-align:center; letter-spacing:.06em;
  color:#1f2937; margin:0 0 10px; position:relative;
}
.reservation-menu-page .menu-title::after{
  content:""; display:block; height:4px; width:96px; margin:10px auto 0; border-radius:999px;
  background: linear-gradient(90deg,#0f766e,#8ed1d6); opacity:.28;
}
.reservation-menu-page nav{ margin-top: clamp(8px, 5vh, 20px); }
.reservation-menu-page .card-title{ display:flex; align-items:center; gap:10px; font-weight:700; }
.reservation-menu-page .card-ico{ display:inline-flex; width:20px; height:20px; }
.reservation-menu-page .is-primary .card-ico{ color:#0f766e; }
.reservation-menu-page .is-secondary .card-ico{ color:#7c3aed; }
.reservation-menu-page .card-desc{
  display:block; margin-top:6px; font-size:13px; line-height:1.6; color:#555;
}
.reservation-menu-page .container { width: 100%; max-width: none; }

.reservation-menu-page .card-button{
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform .12s cubic-bezier(.2,.7,.2,1),
              box-shadow .12s ease;
}

.reservation-menu-page .card-button:active,
.reservation-menu-page .card-button.is-pressing{
  transform: translateY(1px) scale(.992);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.reservation-menu-page .card-button.is-pressing::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.02);
}
.reservation-menu-page .card-button.is-pressing::after{ content:none; }
@media (hover:none) and (pointer:coarse){
  .reservation-menu-page .card-button.is-pressing::after{
    content:""; position:absolute; pointer-events:none;
    left:var(--ripple-x,50%); top:var(--ripple-y,50%);
    width:12px; height:12px; border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    background:radial-gradient(circle, rgba(22,101,52,.14) 0%, rgba(22,101,52,.14) 35%, rgba(22,101,52,0) 36%);
    animation:menu-ripple-soft .42s ease-out forwards;
  }
}
@keyframes menu-ripple-soft{
  to{ transform:translate(-50%,-50%) scale(118); opacity:0; }
}


.reservation-menu-page,
.reservation-menu-page *{
  box-sizing: border-box;
}

.reservation-menu-page .container{
  width: auto !important;
  max-width: 100% !important;
}

@media (max-width: 560px){
  html, body { overflow-x: hidden; }

  .reservation-menu-page .menu-shell{
    max-width: 100%;
    padding-left: clamp(12px, 4vw, 16px);
    padding-right: clamp(12px, 4vw, 16px);
  }

  .reservation-menu-page .card-button{
    width: 100%;
    max-width: 100%;
  }

  .footer{
    inline-size: 100%;
    max-inline-size: 100vw;
    padding-inline: 16px;
  }
  .footer .footer-links{
    display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  }
  .footer .footer-links a{ white-space: normal; margin:0; }

  .menu-toast-root{ padding-inline: 16px; }
  .menu-toast{
    inline-size: min(92vw, 400px);
    max-inline-size: calc(100vw - 32px);
  }
}

.menu-back{
  margin: 22px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  max-width: 520px;
  text-align: center;
}

.menu-back-link{
  display: inline-block;
  padding: 10px 14px;
  font-size: 0.95rem;
}
.menu-back-link:hover{ opacity:.85; }