/* WhatsApp Web inspired public menu */
:root {
  --wa-deep: var(--restaurant-menu-color, #075e54);
  --wa-green: var(--restaurant-menu-color, #128c7e);
  --wa-mint: var(--restaurant-menu-color, #25d366);
  --wa-bg: #efeae2;
  --wa-panel: #f7f8fa;
  --wa-line: #d9d4cc;
  --wa-text: #111b21;
  --wa-muted: #667781;
}

body.page-restaurant-menu {
  background:
    linear-gradient(180deg, var(--wa-deep) 0 122px, transparent 122px),
    radial-gradient(circle at top right, color-mix(in srgb, var(--wa-mint) 20%, transparent), transparent 32rem),
    var(--wa-bg) !important;
  color: var(--wa-text);
}

body.page-restaurant-menu .navbar,
body.page-restaurant-menu .navbar-main {
  background: var(--wa-deep) !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(17, 27, 33, .16) !important;
}

body.page-restaurant-menu .navbar .navbar-brand img {
  max-height: 42px;
}

body.page-restaurant-menu .whatsapp-hero {
  position: relative;
  min-height: clamp(300px, 34vw, 430px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #0b3b35;
  background-size: cover;
  background-position: center;
}

body.page-restaurant-menu .whatsapp-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wa-deep) 92%, transparent), color-mix(in srgb, var(--wa-deep) 52%, transparent) 48%, rgba(17, 27, 33, .18)),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--wa-mint) 32%, transparent), transparent 20rem),
    radial-gradient(circle at 15px 15px, rgba(255, 255, 255, .18) 1px, transparent 1.3px);
  background-size: auto, auto, 54px 54px;
}

body.page-restaurant-menu .whatsapp-hero:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 76px;
  background: linear-gradient(175deg, transparent 48%, var(--wa-bg) 49%);
}

body.page-restaurant-menu .whatsapp-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 8rem 0 7rem;
  color: #fff;
}

body.page-restaurant-menu .whatsapp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eafff4;
  font-weight: 700;
  margin-bottom: 1rem;
}

body.page-restaurant-menu .whatsapp-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  line-height: .95;
  letter-spacing: 0;
}

body.page-restaurant-menu .whatsapp-hero__description {
  max-width: 880px;
  margin: 1.25rem 0 1.3rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.5;
}

body.page-restaurant-menu .whatsapp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

body.page-restaurant-menu .whatsapp-hero__meta a,
body.page-restaurant-menu .whatsapp-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

body.page-restaurant-menu .whatsapp-public-shell {
  margin-top: -3rem;
  position: relative;
  z-index: 2;
}

body.page-restaurant-menu .container-restorant {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(247, 248, 250, .92);
  border: 1px solid rgba(17, 27, 33, .08);
  border-radius: 8px;
  padding: 1.4rem;
  box-shadow: 0 16px 40px rgba(17, 27, 33, .12);
}

body.page-restaurant-menu .admin-info-panel {
  margin-bottom: 1rem;
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(17, 27, 33, .08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.page-restaurant-menu .admin-info-panel h6 {
  margin-bottom: .3rem;
  color: var(--wa-muted);
}

body.page-restaurant-menu .tabbable.sticky {
  background: rgba(247, 248, 250, .96);
  border-bottom: 1px solid var(--wa-line);
  padding-top: .25rem;
}

body.page-restaurant-menu .nav-pills.bg-white {
  background: transparent !important;
  gap: .55rem;
}

body.page-restaurant-menu .nav-pills .nav-link {
  border-radius: 999px !important;
  background: #fff;
  color: var(--wa-green) !important;
  border: 1px solid rgba(17, 27, 33, .08);
  box-shadow: none !important;
}

body.page-restaurant-menu .nav-pills .nav-link.active {
  background: var(--wa-green) !important;
  color: #fff !important;
}

body.page-restaurant-menu .strip {
  border-radius: 8px !important;
  border: 1px solid rgba(17, 27, 33, .08);
  box-shadow: 0 8px 24px rgba(17, 27, 33, .08) !important;
  overflow: hidden;
  background: #fff;
}

body.page-restaurant-menu .strip figure {
  background: linear-gradient(135deg, rgba(7, 94, 84, .12), rgba(37, 211, 102, .15));
}

body.page-restaurant-menu .container-restorant a,
body.page-restaurant-menu .res_title a {
  color: var(--wa-text);
}

body.page-restaurant-menu .res_mimimum {
  color: var(--wa-green);
  font-weight: 800;
}

body.page-restaurant-menu .callOutShoppingButtonBottom {
  background: var(--wa-mint) !important;
  color: #06281f !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .35) !important;
}

@media (max-width: 991px) {
  body.page-restaurant-menu .whatsapp-hero {
    min-height: 430px;
  }

  body.page-restaurant-menu .whatsapp-hero__content {
    padding: 6.2rem 0 5.3rem;
  }

  body.page-restaurant-menu .container-restorant {
    border-radius: 0;
    padding: 1rem;
  }
}

/* Tighter, consistent public catalog frame and touch-friendly mobile layout. */
body.page-restaurant-menu .whatsapp-public-shell {
  margin-top: -2rem;
  padding-bottom: 1.5rem;
}

body.page-restaurant-menu .container-restorant {
  padding: clamp(.75rem, 2.5vw, 1.5rem);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(17, 27, 33, .1);
}

body.page-restaurant-menu .tabbable.sticky {
  top: 72px !important;
  z-index: 30;
  border-radius: 12px 12px 0 0;
}

body.page-restaurant-menu .menu-catalog-column {
  min-width: 0;
}

body.page-restaurant-menu .menu-catalog-card {
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(17, 27, 33, .07);
}

body.page-restaurant-menu .menu-catalog-card:focus-visible {
  outline-color: var(--wa-green);
}

body.page-restaurant-menu .menu-catalog-card__price,
body.page-restaurant-menu .menu-catalog-card__action {
  color: var(--wa-green);
}

body.page-restaurant-menu .menu-catalog-card__action,
body.page-restaurant-menu .nav-pills .nav-link.active,
body.page-restaurant-menu .pizza-size-option:hover,
body.page-restaurant-menu .pizza-size-option.active,
body.page-restaurant-menu .pizza-flavor-option:hover,
body.page-restaurant-menu .pizza-flavor-option.active,
body.page-restaurant-menu .pizza-flavor-chip {
  background-color: var(--wa-green) !important;
  border-color: var(--wa-green) !important;
  color: #fff !important;
}

@media (max-width: 767.98px) {
  body.page-restaurant-menu .whatsapp-hero {
    min-height: 330px;
    align-items: flex-end;
  }

  body.page-restaurant-menu .whatsapp-hero__content {
    padding: 5rem 0 4.4rem;
  }

  body.page-restaurant-menu .whatsapp-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  body.page-restaurant-menu .whatsapp-hero__description {
    font-size: 1rem;
    margin: .75rem 0;
  }

  body.page-restaurant-menu .whatsapp-hero__meta {
    gap: .45rem;
  }

  body.page-restaurant-menu .whatsapp-hero__meta a,
  body.page-restaurant-menu .whatsapp-hero__meta span {
    border-radius: 10px;
    font-size: .82rem;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.page-restaurant-menu .whatsapp-public-shell {
    margin-top: -1.25rem;
  }

  body.page-restaurant-menu .container-restorant {
    border-radius: 14px;
    padding: .75rem;
  }

  body.page-restaurant-menu .tabbable.sticky {
    top: 58px !important;
    margin: 0 -.75rem .85rem;
    padding: .35rem .65rem 0;
  }

  body.page-restaurant-menu .tabbable .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: .4rem;
  }

  body.page-restaurant-menu .tabbable .nav-pills::-webkit-scrollbar {
    display: none;
  }

  body.page-restaurant-menu .tabbable .nav-item-category {
    flex: 0 0 auto;
  }

  body.page-restaurant-menu .tabbable .nav-link {
    min-height: 42px;
    padding: .6rem .85rem;
    white-space: nowrap;
  }

  body.page-restaurant-menu .menu-product-search-section {
    border-radius: 12px;
  }

  body.page-restaurant-menu .menu-catalog-column {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: .65rem;
    padding-left: 5px;
    padding-right: 5px;
  }

  body.page-restaurant-menu .menu-catalog-card__image-wrap {
    height: clamp(105px, 34vw, 150px);
  }

  body.page-restaurant-menu .menu-catalog-card__body {
    gap: .3rem;
    padding: .65rem;
  }

  body.page-restaurant-menu .menu-catalog-card__title {
    font-size: .88rem;
    overflow-wrap: anywhere;
  }

  body.page-restaurant-menu .menu-catalog-card__description {
    font-size: .76rem;
    min-height: 0;
  }

  body.page-restaurant-menu .menu-catalog-card__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: .4rem;
  }

  body.page-restaurant-menu .menu-catalog-card__action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  body.page-restaurant-menu #productModal .modal-dialog {
    margin: .5rem;
    max-width: calc(100% - 1rem);
  }

  body.page-restaurant-menu #productModal .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
  }

  body.page-restaurant-menu #productModal .modal-body {
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 359.98px) {
  body.page-restaurant-menu .menu-catalog-column {
    flex-basis: 100%;
    max-width: 100%;
  }
}
/* Public menu product cards: the same image-first selection pattern as the POS. */
.menu-catalog-column { display: flex; margin-bottom: 1.25rem; }
.menu-catalog-card {
  align-items: stretch;
  background: #fff;
  border: 1px solid #e4e9e7;
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(16, 42, 36, .07);
  color: #173b35;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
  width: 100%;
}
.menu-catalog-card:hover, .menu-catalog-card:focus-visible {
  box-shadow: 0 12px 26px rgba(16, 42, 36, .14);
  outline: 2px solid #128c7e;
  outline-offset: 2px;
  transform: translateY(-2px);
}
.menu-catalog-card__image-wrap { background: #f0f4f2; display: block; height: 190px; overflow: hidden; }
.menu-catalog-card__image { height: 100%; object-fit: cover; width: 100%; }
.menu-catalog-card__body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1rem; }
.menu-catalog-card__title { color: #172b4d; font-size: 1rem; line-height: 1.35; }
.menu-catalog-card__description { color: #718096; font-size: .86rem; line-height: 1.45; min-height: 2.5em; }
.menu-catalog-card__footer { align-items: center; display: flex; gap: .5rem; justify-content: space-between; margin-top: auto; padding-top: .5rem; }
.menu-catalog-card__price { color: #087f73; font-size: 1.02rem; font-weight: 800; }
.menu-catalog-card__price del { color: #89959a; display: block; font-size: .78rem; font-weight: 500; }
.menu-catalog-card__action { background: #e9f7f3; border-radius: 999px; color: #087f73; font-size: .78rem; font-weight: 700; padding: .45rem .7rem; white-space: nowrap; }
.pizza-builder { background: #f5faf8; border: 1px solid #dcece7; border-radius: 12px; margin: 1rem 0; padding: 1rem; }
.pizza-builder h6 { color: #075e54; font-weight: 800; margin-bottom: .35rem; }
.pizza-builder label { color: #435a55; font-size: .85rem; font-weight: 700; }
.pizza-size-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.pizza-size-option { background: #fff; border: 1px solid #b8d8ce; border-radius: 10px; color: #075e54; cursor: pointer; font-weight: 700; padding: .65rem .85rem; }
.pizza-size-option:hover, .pizza-size-option.active { background: #078777; border-color: #078777; color: #fff; }
.pizza-flavor-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.pizza-flavor-option { background: #fff; border: 1px solid #b8d8ce; border-radius: 10px; color: #075e54; cursor: pointer; font-weight: 700; padding: .65rem .85rem; }
.pizza-flavor-option:hover, .pizza-flavor-option.active { background: #078777; border-color: #078777; color: #fff; }
.pizza-flavor-suggestions { display:flex; flex-wrap:wrap; gap:.4rem; max-height:150px; overflow:auto; }
.pizza-flavor-suggestion { background:#fff; border:1px solid #dcece7; border-radius:8px; color:#075e54; cursor:pointer; padding:.45rem .65rem; }
.pizza-flavor-suggestion:hover { background:#eef9f6; border-color:#078777; }
.pizza-flavor-chip { align-items:center; background:#078777; border-radius:20px; color:#fff; display:inline-flex; gap:.4rem; padding:.35rem .6rem; }
.pizza-flavor-chip button { background:transparent; border:0; color:inherit; cursor:pointer; font-size:1.1rem; line-height:1; padding:0 .1rem; }
.pizza-flavor-picker { position:relative; }
.pizza-flavor-dropdown-menu { position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:1105; max-height:220px; overflow-y:auto; padding:.35rem; background:#fff; border:1px solid #dce3eb; border-radius:8px; box-shadow:0 8px 24px rgba(20,35,50,.2); }
#productModal .product-detail-modal, #productModal .modal-body, #productModal .product-detail-card, #productModal .card-body { overflow:visible !important; }
.pizza-flavor-dropdown-option { display:block; width:100%; padding:.55rem .7rem; border:0; border-radius:5px; background:#fff; color:#075e54; text-align:left; cursor:pointer; }
.pizza-flavor-dropdown-option:hover { background:#eef9f6; }
.pizza-flavor-empty { padding:.6rem; color:#718096; }
.pizza-selected-flavors { display:flex; flex-wrap:wrap; gap:.45rem; margin:.65rem 0 .35rem; }
.pizza-selected-flavor { align-items:center; background:#fff; border:1px solid #b8d8ce; border-radius:999px; color:#075e54; display:inline-flex; font-size:.9rem; font-weight:700; gap:.45rem; padding:.35rem .45rem .35rem .75rem; }
.pizza-selected-flavor-remove { align-items:center; background:#fff0f0; border:0; border-radius:50%; color:#b42318; cursor:pointer; display:inline-flex; font-size:1.15rem; height:1.65rem; justify-content:center; line-height:1; padding:0; transition:background .15s ease, transform .15s ease; width:1.65rem; }
.pizza-selected-flavor-remove:hover, .pizza-selected-flavor-remove:focus-visible { background:#ffdada; outline:2px solid #f3aaaa; transform:scale(1.06); }

body.page-restaurant-menu .menu-catalog-card:hover,
body.page-restaurant-menu .menu-catalog-card:focus-visible {
  outline-color: var(--wa-green);
}

body.page-restaurant-menu .menu-catalog-card__price,
body.page-restaurant-menu .menu-catalog-card__action,
body.page-restaurant-menu .pizza-builder h6,
body.page-restaurant-menu .pizza-size-option,
body.page-restaurant-menu .pizza-flavor-option,
body.page-restaurant-menu .pizza-flavor-suggestion,
body.page-restaurant-menu .pizza-flavor-dropdown-option,
body.page-restaurant-menu .pizza-selected-flavor {
  color: var(--wa-green);
}

body.page-restaurant-menu .pizza-size-option:hover,
body.page-restaurant-menu .pizza-size-option.active,
body.page-restaurant-menu .pizza-flavor-option:hover,
body.page-restaurant-menu .pizza-flavor-option.active,
body.page-restaurant-menu .pizza-flavor-suggestion:hover,
body.page-restaurant-menu .pizza-flavor-chip {
  background-color: var(--wa-green);
  border-color: var(--wa-green);
  color: #fff;
}

body.page-restaurant-menu .menu-catalog-card__action {
  background: color-mix(in srgb, var(--wa-green) 10%, white);
}

body.page-restaurant-menu .pizza-builder {
  border-color: color-mix(in srgb, var(--wa-green) 20%, white);
}
@media (max-width: 767.98px) {
  .menu-catalog-column { margin-bottom: .8rem; padding-left: 7px; padding-right: 7px; }
  .menu-catalog-card { border-radius: 11px; }
  .menu-catalog-card__image-wrap { height: 142px; }
  .menu-catalog-card__body { gap: .35rem; padding: .7rem; }
  .menu-catalog-card__title { font-size: .9rem; }
  .menu-catalog-card__description { font-size: .77rem; }
  .menu-catalog-card__footer { align-items: flex-start; flex-direction: column; }
}