/* Site Editor theme for the platform's own pages (online menu, basket, checkout) when they
   are shown inside Views/MasterPage/SiteEditorMaster.cshtml. Loaded by that master only,
   after Content/css/MenuPage.css and the company's custom styles, so nothing here reaches
   sites on other master pages. Everything is scoped to body.ws-host; colours come from the
   theme tokens the master writes onto body.ws-host (SiteRender.HostTokenCss).

   Strategy: keep MenuPage.css's layout and behaviour, and
   1. point its --m-* design variables at the theme tokens,
   2. restyle the pieces whose look is fixed in MenuPage.css (fonts, "+" button, price,
      checkout button, category list) to match the theme's dish cards,
   3. on phones, make the ordering pages app-like (no footer/info bar) and keep the
      bottom sheets clear of the tab bar so Checkout is always reachable. */

body.ws-host{
  --primary-soft:color-mix(in srgb,var(--primary) 7%,var(--bg));
  --secondary-soft:color-mix(in srgb,var(--secondary) 16%,var(--bg));
  --head-weight:750;--head-track:-.02em;--head-case:none;
  --host-sticky:104px;--host-tabbar:64px;

  --m-bg:var(--tint);
  --m-surface:var(--bg);
  --m-surface-alt:color-mix(in srgb,var(--tint) 60%,var(--bg));
  --m-border:var(--line);
  --m-border2:color-mix(in srgb,var(--line) 70%,var(--fg));
  --m-text-h:var(--fg);
  --m-text:var(--fg);
  --m-text2:color-mix(in srgb,var(--fg) 80%,var(--bg));
  --m-muted:var(--muted);
  --m-accent:var(--primary-text);
  --m-accent2:var(--primary-deep);
  --m-accent-bg:var(--primary-soft);
  --m-accent-border:color-mix(in srgb,var(--primary) 30%,var(--bg));
  --m-r:var(--radius);
  --m-r-sm:calc(var(--radius) * .65);
  --m-shadow-sm:none;
  --m-shadow-md:0 18px 34px -24px rgba(0,0,0,.55);
}
body.ws-host--bistro{--head-weight:450;--head-track:-.015em}
body.ws-host--ember{--head-weight:400;--head-track:.01em;--head-case:uppercase}
body.ws-host--coast{--head-weight:400;--head-track:-.01em}
body.ws-host--leaf{--head-weight:400;--head-track:-.012em}
/* Banana Leaf: printed-menu feel on the ordering page, with a diamond under each category title */
body.ws-host--leaf .menu-section__title::after{content:"";display:block;width:7px;height:7px;margin-top:8px;background:var(--secondary);transform:rotate(45deg)}
body.ws-host--leaf .menuItem .productTitle{font-family:var(--display) !important;font-weight:400 !important;font-size:17.5px !important}
body.ws-host--leaf .menuItem .plus{border-radius:12px !important;background:var(--secondary) !important;border-color:var(--secondary) !important}
body.ws-host--leaf .menuItem .plus .icon-plus::before,body.ws-host--leaf .menuItem .plus .icon-plus::after{background:var(--on-secondary) !important}
body.ws-host--leaf .menuItem .plus:hover{background:var(--primary) !important;border-color:var(--primary) !important;transform:none}
body.ws-host--leaf .menuItem .plus:hover .icon-plus::before,body.ws-host--leaf .menuItem .plus:hover .icon-plus::after{background:var(--on-primary) !important}
body.ws-host--leaf .menuItem .menuProductImage{border-radius:999px 999px 10px 10px !important;height:72px !important}

/* Fonts: MenuPage.css forces Jost on everything; use the theme's body and display faces. */
body.ws-host .menu-page-layout,
body.ws-host .menu-page-layout *:not(i):not([class*="fa-"]),
body.ws-host .CartWrapper,
body.ws-host .CartWrapper *:not(i):not([class*="fa-"]),
body.ws-host .checkout-page-wrapper,
body.ws-host .checkout-page-wrapper *:not(i):not([class*="fa-"]),
body.ws-host .mobile-tabbar,
body.ws-host .mobile-tabbar *:not(i):not([class*="fa-"]){font-family:var(--body) !important}

/* ---------- Layout: same three columns, aligned with the header ---------- */
body.ws-host .menu-page-layout{max-width:1212px;margin:0 auto !important;padding:28px 16px 64px !important;--bs-gutter-x:0}
@media (min-width:992px){
  body.ws-host .menu-cat-col{flex:0 0 236px !important;width:236px !important;max-width:236px !important;padding:0 18px 0 0 !important}
  body.ws-host .menu-products-col{flex:1 1 0 !important;width:auto !important;max-width:none !important;min-width:0;padding:0 18px !important}
  body.ws-host .menu-cart-col{flex:0 0 340px !important;width:340px !important;max-width:340px !important;padding:0 0 0 18px !important}
  body.ws-host .menu-cat-sticky,body.ws-host .menu-cart-sticky{top:var(--host-sticky) !important;max-height:calc(100vh - var(--host-sticky) - 20px) !important}
}
@media (min-width:992px) and (max-width:1199px){
  body.ws-host .menu-cat-col{flex-basis:200px !important;width:200px !important;max-width:200px !important}
  body.ws-host .menu-cart-col{flex-basis:300px !important;width:300px !important;max-width:300px !important}
}

/* ---------- Category list ---------- */
body.ws-host .menu-cat-sticky .h3.topOrderHeading{background:transparent !important;color:var(--secondary-text) !important;font-size:11px !important;font-weight:800 !important;letter-spacing:.14em !important;padding:2px 12px 12px !important;margin:0 0 4px !important;border:0 !important;height:auto !important}
body.ws-host #cssmenu ul{padding-bottom:12px}
body.ws-host #cssmenu > ul > li{border-radius:calc(var(--radius) * .65);margin-bottom:2px}
body.ws-host #cssmenu > ul > li > a,
body.ws-host #cssmenu > ul > li a.lastChildCategory{color:var(--m-text2) !important;font-size:14px !important;font-weight:600 !important;padding:9px 12px !important;border-left:0 !important;border-radius:calc(var(--radius) * .65) !important;text-transform:none;letter-spacing:0;transition:background-color .2s,color .2s !important}
body.ws-host #cssmenu > ul > li > a:hover,
body.ws-host #cssmenu > ul > li > a:focus,
body.ws-host #cssmenu > ul > li a.lastChildCategory:hover{background:var(--tint) !important;color:var(--fg) !important;padding-left:12px !important}
body.ws-host #cssmenu > ul > li.active > a,
body.ws-host #cssmenu > ul > li > a.selected{background:var(--primary) !important;color:var(--on-primary) !important}
body.ws-host #cssmenu > ul > li.has-sub > a{color:var(--muted) !important;font-size:11px !important;font-weight:800 !important;letter-spacing:.12em !important;text-transform:uppercase}

/* ---------- Category heading + description ---------- */
body.ws-host .category-name-wrapper.topOrderHeading{background:transparent !important;margin:0 0 18px !important}
body.ws-host #categoryName .row > span,
body.ws-host .category-name-wrapper .row > span{font-family:var(--display) !important;font-size:clamp(24px,2.6vw,30px) !important;font-weight:var(--head-weight) !important;letter-spacing:var(--head-track);text-transform:var(--head-case);line-height:1.1;color:var(--fg) !important;border-bottom:2px solid var(--fg) !important;padding-bottom:12px !important;margin-bottom:6px}
body.ws-host #categoryName .row .row > div[style*="font-size:22px"]{font-family:var(--display) !important;color:var(--fg) !important}
body.ws-host .category-Description,
body.ws-host #categoryName [ng-bind-html]:not(:first-child){color:var(--muted) !important;font-size:14px !important}
body.ws-host .menuIconsDescription{background:var(--secondary-soft);border:0;border-radius:calc(var(--radius) * .75);color:var(--fg)}

/* ---------- Dish cards (match the theme's menu cards) ---------- */
body.ws-host .menuItem{border-radius:var(--radius) !important;padding:14px 16px !important;margin-bottom:10px !important;transition:transform .25s,box-shadow .25s,border-color .25s !important}
body.ws-host .menuItem:hover{transform:translateY(-2px);border-color:var(--line) !important}
body.ws-host .menuItem .menuProductImageLink{margin-right:14px}
body.ws-host .menuItem .menuProductImage,
body.ws-host .menuItem .productTitle img{width:64px !important;height:64px !important;border-radius:calc(var(--radius) * .65) !important;object-fit:cover !important}
body.ws-host .menuItem .productTitle,
body.ws-host .menuItemsubCartegoryItems .productTitle{font-size:15.5px !important;font-weight:700 !important;color:var(--fg) !important;line-height:1.3 !important;margin:3px 0 2px !important}
body.ws-host .menuItem a:hover .productTitle,
body.ws-host .menuItemsubCartegoryItems a:hover .productTitle{color:var(--primary-text) !important}
body.ws-host .menuItem .ProductDescription,
body.ws-host .menuItemsubCartegoryItems .ProductDescription{font-size:13.5px !important;color:var(--muted) !important;line-height:1.45 !important}
body.ws-host .menuItem .plus_value,
body.ws-host .menuItemsubCartegoryItems .plus_value{background:transparent !important;border:0 !important;padding:0 !important;margin-top:7px !important;color:var(--fg) !important;font-size:15.5px !important;font-weight:800 !important;font-variant-numeric:tabular-nums}
body.ws-host .menuItemsubCartegory{border-top-color:var(--line) !important}
body.ws-host .menuItemsubCartegoryItems:hover{background:var(--tint) !important}
body.ws-host .menuAllergyDisclaimer{color:var(--muted);border-top-color:var(--line);font-size:12.5px}

/* "+" — outlined circle that fills on hover, as on the theme's dish cards */
body.ws-host .menuItem .plus,
body.ws-host .menuItemsubCartegoryItems .plus{width:38px !important;height:38px !important;background:var(--bg) !important;border:1.5px solid var(--primary) !important;box-shadow:none !important;transition:background-color .2s,transform .2s,border-color .2s !important}
body.ws-host .menuItem .plus .icon-plus::before,
body.ws-host .menuItem .plus .icon-plus::after,
body.ws-host .menuItemsubCartegoryItems .plus .icon-plus::before,
body.ws-host .menuItemsubCartegoryItems .plus .icon-plus::after{background:var(--primary-text) !important;transition:background-color .2s}
body.ws-host .menuItem .plus:hover,
body.ws-host .menuItemsubCartegoryItems .plus:hover{background:var(--primary) !important;transform:rotate(90deg)}
body.ws-host .menuItem .plus:hover .icon-plus::before,
body.ws-host .menuItem .plus:hover .icon-plus::after,
body.ws-host .menuItemsubCartegoryItems .plus:hover .icon-plus::before,
body.ws-host .menuItemsubCartegoryItems .plus:hover .icon-plus::after{background:var(--on-primary) !important}
body.ws-host .menuItem .plus.plus--added,
body.ws-host .menuItemsubCartegoryItems .plus.plus--added{background:var(--secondary) !important;border-color:var(--secondary) !important;transform:none}
body.ws-host .menuItem .plus .icon-check,
body.ws-host .menuItemsubCartegoryItems .plus .icon-check{border-color:var(--on-secondary) !important}

/* ---------- Basket ---------- */
body.ws-host .menu-cart-sticky #Cart{border-radius:var(--radius) var(--radius) 0 0 !important;border-top:3px solid var(--primary) !important;overflow:hidden}
body.ws-host .menu-cart-sticky .CartWrapper{border-radius:0 0 var(--radius) var(--radius) !important}
body.ws-host .cart-header{background:var(--bg) !important}
body.ws-host .cart-header .left .ct{color:var(--fg) !important;font-weight:800 !important;letter-spacing:.06em}
body.ws-host .cart-header .right .uro,
body.ws-host .subtotal-area .total span{font-family:var(--display) !important;font-weight:800 !important;color:var(--primary-text) !important}
body.ws-host .subtotal-area{background:var(--m-surface-alt) !important}
body.ws-host .collectLater,
body.ws-host .deliverLater{background:var(--secondary-soft) !important;border-color:transparent !important;color:var(--fg) !important;margin:4px 0 12px 12px !important}
/* The validation list is always in the page; with no messages it only drew a pink strip. */
body.ws-host #errorMessage:not(:has(li)){display:none !important}
body.ws-host .order-type-toggle{background:var(--tint) !important}
body.ws-host .order-type-toggle-thumb{background:var(--primary) !important;box-shadow:none !important}
body.ws-host .order-type-toggle-input:checked + .order-type-toggle-option{color:var(--on-primary) !important}
body.ws-host .cart-radio-pill{border-radius:var(--btn-radius) !important}
body.ws-host .cart-radio-pill.active{background:var(--primary) !important;border-color:var(--primary) !important;color:var(--on-primary) !important}
body.ws-host .cart-radio-pill.active *{color:var(--on-primary) !important}
body.ws-host .cart-checkout-btn{background:var(--primary) !important;color:var(--on-primary) !important;border-radius:var(--btn-radius) !important;box-shadow:none !important;font-weight:800 !important;letter-spacing:.02em !important}
body.ws-host .cart-checkout-btn:hover{color:var(--on-primary) !important;opacity:1 !important;filter:brightness(1.12);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--fg) 60%,transparent) !important}
body.ws-host .cart-clear-btn{border-radius:var(--btn-radius) !important}
body.ws-host .deliveryMessage{background:var(--secondary-soft) !important;color:var(--fg) !important}
body.ws-host .ShoppingCartSpecialMessage{color:var(--primary-text) !important}
body.ws-host #OrderExpectedDateTime,
body.ws-host .CartWrapper input[type="text"],
body.ws-host .CartWrapper select{background:var(--bg) !important;color:var(--fg) !important;border-color:var(--line) !important;border-radius:calc(var(--radius) * .6) !important}
body.ws-host .qt-btn{border-color:var(--line) !important}

/* ---------- Delivery postcode modal (SiteEditorMaster #PostCodeChangeModal) ---------- */
body.ws-host .pc-modal .modal-dialog{max-width:400px;margin-left:auto;margin-right:auto;padding:0 16px}
body.ws-host .pc-modal .modal-content{position:relative;display:block;padding:30px 26px 24px;border:0;border-radius:calc(var(--radius) + 6px);background:var(--bg);color:var(--fg);box-shadow:0 30px 60px -24px rgba(0,0,0,.5);font-family:var(--body)}
body.ws-host .pc-modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--tint);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;transition:background-color .2s,color .2s}
body.ws-host .pc-modal__close:hover{background:var(--line);color:var(--fg)}
body.ws-host .pc-modal__icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--primary-soft);color:var(--primary-text)}
body.ws-host .pc-modal__title{margin:0 0 6px;font-family:var(--display);font-weight:var(--head-weight);letter-spacing:var(--head-track);text-transform:var(--head-case);font-size:23px;line-height:1.15;color:var(--fg)}
body.ws-host .pc-modal__text{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--muted)}
body.ws-host .pc-modal__label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body.ws-host .pc-modal__input{display:block;width:100%;height:50px;padding:0 14px;border:1.5px solid var(--line);border-radius:calc(var(--radius) * .7);background:var(--bg);color:var(--fg);font:600 18px var(--body);letter-spacing:.06em;text-transform:uppercase;outline:none;transition:border-color .2s,box-shadow .2s}
body.ws-host .pc-modal__input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
body.ws-host .pc-modal__error{display:block;min-height:20px;margin:6px 0 10px;font-size:13px;font-weight:600;color:#b42318}
body.ws-host .pc-modal__error:empty{min-height:8px;margin:0}
body.ws-host .pc-modal__submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:6px;border:0;border-radius:var(--btn-radius);background:var(--primary);color:var(--on-primary);font:800 15px var(--body);letter-spacing:.02em;cursor:pointer;transition:filter .2s}
body.ws-host .pc-modal__submit:hover{filter:brightness(1.12)}
body.ws-host .pc-modal__submit:disabled{cursor:progress;filter:none;opacity:.75}
body.ws-host .pc-modal__spin{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pc-spin .7s linear infinite}
body.ws-host .pc-modal.is-checking .pc-modal__spin{display:block}
@keyframes pc-spin{to{transform:rotate(360deg)}}

/* ---------- Phones and tablets: app-style ordering ---------- */
@media (max-width:991px){
  body.ws-host--app .ws-host-footer,
  body.ws-host--app .ws-topbar{display:none !important}
  body.ws-host .menu-page-layout{padding:12px 12px 0 !important}
  body.ws-host .menuItem{padding:12px 12px !important}
  body.ws-host .menuItem .menuProductImage{width:56px !important;height:56px !important}
  body.ws-host .menuItem .plus{width:36px !important;height:36px !important}
  body.ws-host #categoryName .row > span{font-size:24px !important}

  /* Bottom sheets sit above the tab bar instead of under it, so the Checkout button
     at the bottom of the basket is never covered. */
  body.ws-host .menu-cat-sticky,
  body.ws-host .menu-cart-sticky{bottom:calc(var(--host-tabbar) + env(safe-area-inset-bottom,0px)) !important;max-height:calc(100vh - var(--host-tabbar) - 72px) !important;max-height:calc(100dvh - var(--host-tabbar) - env(safe-area-inset-bottom,0px) - 56px) !important;transform:translateY(calc(100% + var(--host-tabbar) + 24px));border-radius:calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0 !important;padding-bottom:16px !important}
  body.ws-host .menu-info-sheet{bottom:calc(var(--host-tabbar) + env(safe-area-inset-bottom,0px));max-height:calc(100vh - var(--host-tabbar) - 72px);max-height:calc(100dvh - var(--host-tabbar) - env(safe-area-inset-bottom,0px) - 56px);transform:translateY(calc(100% + var(--host-tabbar) + 24px));border-radius:calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;background:var(--bg)}
  body.ws-host .menu-cat-col.mobile-sheet-open .menu-cat-sticky,
  body.ws-host .menu-cart-col.mobile-sheet-open .menu-cart-sticky,
  body.ws-host .menu-info-sheet.mobile-sheet-open{transform:translateY(0)}
  body.ws-host .CartWrapper h3.cart-section-title{font-family:var(--display) !important;font-weight:var(--head-weight);letter-spacing:var(--head-track);text-transform:var(--head-case);font-size:19px;line-height:1.2;color:var(--fg);border-top-color:var(--line);padding:18px 16px 10px}
  body.ws-host .mobile-sheet-body::after{background:linear-gradient(to bottom,transparent,var(--bg) 85%)}
  body.ws-host .menu-page-fade{background:linear-gradient(to bottom,transparent,var(--tint) 90%)}
  body.ws-host .menu-info-key{background:var(--secondary-soft);border:0;border-radius:calc(var(--radius) * .75);color:var(--fg)}

  /* Continuous menu: full-width title bar in the theme's display face */
  body.ws-host .menu-sections .menu-section h2.menu-section__title{margin:0 -12px 12px !important;padding:14px 14px 12px !important;background:var(--tint);font-family:var(--display) !important;font-weight:var(--head-weight) !important;letter-spacing:var(--head-track);text-transform:var(--head-case);font-size:20px !important;color:var(--fg) !important;border-bottom:1px solid var(--line)}
  body.ws-host .menu-section__desc{color:var(--muted)}
  body.ws-host #cssmenu a.is-current{background:var(--primary-soft) !important;color:var(--primary-text) !important}
  body.ws-host .menu-cart-sticky #Cart{border-radius:0 !important}
  body.ws-host .mobile-sheet-header{font-family:var(--display) !important}

  body.ws-host .mobile-tabbar{background:var(--bg);border-top-color:var(--line);min-height:var(--host-tabbar)}
  body.ws-host .mobile-tabbar-btn{color:var(--fg)}
  body.ws-host .mobile-tabbar-btn.active,
  body.ws-host .mobile-tabbar-total{color:var(--primary-text)}
  body.ws-host .mobile-tabbar-badge{background:var(--primary);color:var(--on-primary)}
}