/* Weekly menu — in-app overlay (reuses the same look/behavior as the
   standalone /menu/mobile_weekly_menu_view.php page, adapted to live inside
   /mobile/ instead of navigating away from it). Every selector is scoped
   under #wmOverlay so nothing here can collide with the app's own global
   styles — this page's original CSS used very generic class names
   (.item, .category, .modal, .block, ...) that would otherwise clash. */

#wmOverlay{
  --wm-bg1:#07163d;
  --wm-bg2:#04102a;
  --wm-gold:#f4d65d;
  --wm-blue:#3b6cff;
  --wm-blue2:#1d47be;
  --wm-card:#f7f9ff;
  --wm-cardtext:#16305d;
  --wm-shadow:0 18px 50px rgba(0,0,0,.30);
  --wm-container:760px;

  display:none;
  position:fixed;
  inset:0;
  z-index:100002;
  font-family:'Montserrat', Arial, sans-serif;
  color:#fff;
  background:
    linear-gradient(rgba(4,12,32,.46), rgba(4,12,32,.78)),
    url('/uploads/mobile-menu-bg.jpg') center center / cover no-repeat scroll,
    linear-gradient(180deg,var(--wm-bg1) 0%, var(--wm-bg2) 100%);
}

#wmOverlay.open{ display:block; }
#wmOverlay *{ box-sizing:border-box; }

/* Scrolling now happens on this inner layer, not on #wmOverlay itself.
   A `position:fixed` element that is also its own overflow:auto scroll
   container is heavier for Android WebView to composite smoothly than a
   plain in-flow scroller — this was the remaining source of the scroll
   jank in this view (the fixed-background/backdrop-filter causes were
   already fixed, see mobile_scroll_jank_fixed_bg memory). Keeping the
   photo background painted once on the static #wmOverlay box and scrolling
   only this inner, unstyled layer avoids repainting it every scroll frame. */
#wmOverlay .wm-scroll{
  position:absolute;
  inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

#wmOverlay .wm-app{
  width:100%;
  max-width:var(--wm-container);
  margin:0 auto;
  padding:12px 10px 26px;
}

#wmOverlay .wm-hero{
  position:relative;
  overflow:hidden;
  border-radius:0 0 28px 28px;
  padding:14px 14px 12px;
  background:linear-gradient(180deg, rgba(9,30,78,.86) 0%, rgba(6,18,48,.92) 100%);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:var(--wm-shadow);
  /* no backdrop-filter here on purpose — known, previously-confirmed source
     of scroll jank in this exact view (see mobile_scroll_jank_fixed_bg memory);
     the gradient's own opacity is bumped up slightly to compensate visually. */
}
#wmOverlay .wm-hero::before{
  content:'';
  position:absolute;
  inset:-20% auto auto -20%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none;
}

#wmOverlay .wm-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}
#wmOverlay .wm-top-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  border:none;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,rgba(44,73,160,.95) 0%, rgba(18,40,92,.95) 100%);
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}

#wmOverlay .wm-brand{
  position:relative;
  z-index:1;
  margin:2px 0 2px;
  text-align:center;
  font-family:'Marck Script', cursive;
  font-size:38px;
  line-height:1.04;
  color:var(--wm-gold);
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
#wmOverlay .wm-title{
  position:relative;
  z-index:1;
  margin:4px 0 0;
  text-align:center;
  font-size:42px;
  line-height:.98;
  font-weight:900;
  letter-spacing:.2px;
}
#wmOverlay .wm-subtitle{
  position:relative;
  z-index:1;
  text-align:center;
  font-size:15px;
  color:rgba(255,255,255,.75);
  margin-top:8px;
}

#wmOverlay .wm-days-strip{
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  margin-top:12px;
  padding-bottom:2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#wmOverlay .wm-days-strip::-webkit-scrollbar{display:none}

#wmOverlay .wm-day-tab{
  min-width:78px;
  border:none;
  border-radius:18px;
  padding:8px 8px 9px;
  flex:0 0 auto;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:.2s ease;
}
#wmOverlay .wm-day-tab.active{
  background:linear-gradient(180deg, #3b6cff 0%, #234dc8 100%);
  box-shadow:0 14px 26px rgba(59,108,255,.30);
  transform:translateY(-1px);
}
#wmOverlay .wm-day-date{
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:900;
  letter-spacing:.3px;
}
#wmOverlay .wm-day-name{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.08;
  font-weight:700;
  opacity:.96;
}

#wmOverlay .wm-paper-wrap{margin-top:14px; perspective:1600px}
#wmOverlay .wm-paper{
  position:relative;
  overflow:hidden;
  min-height:430px;
  padding:14px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(8,24,63,.90) 0%, rgba(5,16,43,.95) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--wm-shadow);
  /* no backdrop-filter here either — same scroll-jank reason as .wm-hero above. */
}
#wmOverlay .wm-paper::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 86%);
  pointer-events:none;
}
#wmOverlay .wm-paper-range{
  position:relative;
  z-index:1;
  font-size:14px;
  color:rgba(255,255,255,.75);
  margin-bottom:10px;
}
#wmOverlay .wm-stage{
  position:relative;
  z-index:1;
  min-height:340px;
}
#wmOverlay .wm-page{display:none; transform-origin:left center}
#wmOverlay .wm-page.active{
  display:block;
  animation:wmPageTurn .38s cubic-bezier(.22,.76,.22,1);
}
@keyframes wmPageTurn{
  0%{
    opacity:.24;
    transform:rotateY(-14deg) translateX(18px) scale(.985);
    filter:blur(.8px);
  }
  100%{
    opacity:1;
    transform:rotateY(0) translateX(0) scale(1);
    filter:blur(0);
  }
}

#wmOverlay .wm-day-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 10px;
  border-bottom:1px dashed rgba(255,255,255,.16);
  margin-bottom:12px;
}
#wmOverlay .wm-day-head-date{font-size:30px; line-height:1; font-weight:900}
#wmOverlay .wm-day-head-name{
  font-family:'Marck Script', cursive;
  font-size:30px;
  line-height:1;
  color:var(--wm-gold);
}

#wmOverlay .wm-category{
  margin-bottom:12px;
  padding:12px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.08);
}
#wmOverlay .wm-category-title{
  margin:0 0 10px 0;
  font-family:'Marck Script', cursive;
  font-size:28px;
  line-height:1.02;
  font-weight:400;
  color:#fff3c4;
}
#wmOverlay .wm-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 10px 12px;
  margin-bottom:8px;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfcff 0%, #f1f5ff 100%);
  color:var(--wm-cardtext);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
#wmOverlay .wm-item:last-child{margin-bottom:0}
#wmOverlay .wm-item-name{
  flex:1;
  min-width:0;
  font-size:15px;
  line-height:1.24;
  font-weight:800;
}
#wmOverlay .wm-item-btn{
  flex:0 0 auto;
  min-height:40px;
  padding:8px 14px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  line-height:1.2;
  text-align:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg,var(--wm-blue) 0%, var(--wm-blue2) 100%);
  box-shadow:0 8px 18px rgba(29,71,190,.26);
}
#wmOverlay .wm-item-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

#wmOverlay .wm-empty,
#wmOverlay .wm-loading,
#wmOverlay .wm-error{
  padding:22px 14px;
  border-radius:18px;
  text-align:center;
}
#wmOverlay .wm-empty{
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.14);
  color:rgba(255,255,255,.75);
  font-weight:700;
}
#wmOverlay .wm-loading{color:#fff; font-weight:800}
#wmOverlay .wm-error{color:#ffd7d7; font-weight:800}
#wmOverlay .wm-swipe-note{
  text-align:center;
  color:rgba(255,255,255,.62);
  font-size:12px;
  margin-top:10px;
}

#wmOverlay .wm-modal{
  position:fixed;
  inset:0;
  z-index:100005;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.64);
  padding-bottom:36px;
}
#wmOverlay .wm-modal.show{display:flex}
#wmOverlay .wm-modal-sheet{
  position:relative;
  width:100%;
  max-width:760px;
  max-height:92vh;
  overflow:auto;
  padding:16px 14px 20px;
  border-radius:28px;
  background:#fff;
  color:#17345f;
  box-shadow:0 -20px 60px rgba(0,0,0,.30);
  animation:wmSheetUp .2s ease-out;
}
@keyframes wmSheetUp{
  from{transform:translateY(22px); opacity:.65}
  to{transform:translateY(0); opacity:1}
}
#wmOverlay .wm-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:24px;
  font-weight:900;
  color:#17398a;
  background:#eef3ff;
}
#wmOverlay .wm-modal-image{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  background:#eff3fc;
  margin-bottom:12px;
}
#wmOverlay .wm-modal-title{
  margin:0 48px 6px 0;
  font-size:29px;
  line-height:1.1;
  font-weight:900;
}
#wmOverlay .wm-modal-title-en{
  margin:0 48px 10px 0;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
  color:#4e648f;
}
#wmOverlay .wm-modal-short{
  margin-bottom:8px;
  font-family:'Marck Script', cursive;
  font-size:28px;
  line-height:1.02;
  color:#315094;
}
#wmOverlay .wm-modal-short-en{
  margin:-2px 0 10px;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  color:#5c6f95;
}
#wmOverlay .wm-price-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}
#wmOverlay .wm-price-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:#edf3ff;
  border:1px solid #cfe0ff;
  color:#1c4596;
  font-size:13px;
  font-weight:900;
}
#wmOverlay .wm-block{
  margin-top:10px;
  padding:12px 13px;
  border-radius:18px;
  background:#f4f7ff;
}
#wmOverlay .wm-block-title{
  margin-bottom:6px;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  color:#2b4d9b;
}
#wmOverlay .wm-block-text{
  font-size:15px;
  line-height:1.5;
  color:#223b68;
  white-space:pre-wrap;
}

#wmOverlay .wm-modal-footnote{
  margin-top:14px;
  padding:10px 2px 2px;
  font-size:14px;
  line-height:1.5;
  color:#4e648f;
  font-weight:700;
}
#wmOverlay .wm-modal-footnote::before{
  content:'* ';
  font-weight:900;
}
#wmOverlay .wm-block-text-dual{
  display:grid;
  gap:8px;
}
#wmOverlay .wm-dual-part{
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.6);
}
#wmOverlay .wm-dual-lang{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  color:#5870a6;
}

#wmOverlay .wm-ob-card{
  display:flex;
  flex-direction:column;
  margin-top:14px;
  border-radius:22px;
  text-decoration:none;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(244,214,93,.16) 0%, rgba(244,214,93,.06) 100%);
  border:1px solid rgba(244,214,93,.35);
  box-shadow:var(--wm-shadow);
}
#wmOverlay .wm-ob-card-img-wrap{width:100%;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
#wmOverlay .wm-ob-card-img{width:100%;max-height:200px;object-fit:contain;display:block}
#wmOverlay .wm-ob-card-body{display:flex;align-items:center;gap:12px;padding:12px}
#wmOverlay .wm-ob-card-info{flex:1;min-width:0}
#wmOverlay .wm-ob-card-title{font-size:16px;font-weight:900;color:#fff}
#wmOverlay .wm-ob-card-sub{font-size:12px;color:rgba(255,255,255,.75);margin-top:2px}
#wmOverlay .wm-ob-card-arrow{font-size:22px;color:var(--wm-gold);flex-shrink:0}

@media (max-width:420px){
  #wmOverlay .wm-app{padding:10px 8px 22px}
  #wmOverlay .wm-hero{padding:12px 12px 10px}
  #wmOverlay .wm-brand{font-size:34px}
  #wmOverlay .wm-title{font-size:38px}
  #wmOverlay .wm-day-tab{min-width:72px;padding:7px 7px 8px}
  #wmOverlay .wm-day-date{font-size:18px}
  #wmOverlay .wm-day-head-date{font-size:28px}
  #wmOverlay .wm-day-head-name{font-size:28px}
  #wmOverlay .wm-category-title{font-size:26px}
  #wmOverlay .wm-item-name{font-size:14px}
  #wmOverlay .wm-item-btn{padding:9px 12px;font-size:12px}
}
@media (min-width:700px){
  #wmOverlay .wm-app{padding:16px 18px 30px}
  #wmOverlay .wm-hero{padding:16px 18px 14px}
  #wmOverlay .wm-brand{font-size:44px}
  #wmOverlay .wm-title{font-size:56px}
  #wmOverlay .wm-modal{align-items:center; padding:18px}
  #wmOverlay .wm-modal-sheet{border-radius:28px}
}