/* ============================================================================
   design5.css  ·  Design5 customer-menu layout (Starbucks-style)
   ----------------------------------------------------------------------------
   EVERY rule is scoped to body.design5, so Design1-4 are completely unaffected
   (this file is safe to always link — it does nothing unless the page is D5).
   All colours are CSS variables; per-brand values are injected by
   ItemsViewNewController.LoadMenuColors (same pattern as the other designs),
   with the fallbacks below used until then.
   ============================================================================ */
body.design5{
  --d5-page-bg:#ffffff;   --d5-title:#141414;     --d5-accent:#2e7d5b;   --d5-subtitle:#9a9a9a;
  --d5-panel:#2e7d5b;     --d5-panel2:#24684a;
  --d5-cat-bg:#ffffff;    --d5-cat-icon:#2e7d5b;  --d5-cat-text:#eafff5; --d5-cat-ring:#ffd66b;
  --d5-item-name:#ffffff; --d5-item-price:#ffffff;--d5-halo:rgba(255,255,255,.14);
  --d5-dot:rgba(255,255,255,.45); --d5-dot-on:#ffffff;  --d5-hdr-icon:#333333;
}

/* Design5 renders its own block inside #divCategoryList; hide the stock banner and
   the normal category grid/animation for D5 (they still exist for Design1-4). */
body.design5 .brand-logo-banner{ display:none !important; }
body.design5 #divCategoryList > .animation{ display:none !important; }

/* full-height phone-style column, centred on wider screens */
body.design5 .d5-root{
  display:flex; flex-direction:column; min-height:100vh; max-width:520px; margin:0 auto;
  background:var(--d5-page-bg); overflow:hidden;
}

/* ---- header (client logo) — kept compact so the item image gets more room ---- */
body.design5 .d5-hdr{ display:flex; align-items:center; justify-content:center; padding:8px 18px 0; flex:0 0 auto; }
body.design5 .d5-logo{ max-height:38px; max-width:56%; object-fit:contain; }

/* ---- title = current item name + description ---- */
body.design5 .d5-title{ text-align:center; padding:2px 22px 2px; flex:0 0 auto; }
body.design5 .d5-title h1{ margin:0; font-weight:800; font-size:24px; line-height:1.12; color:var(--d5-accent);
  text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.design5 .d5-title p{ margin:4px 0 0; font-size:12px; line-height:1.35; color:var(--d5-subtitle);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- coloured dome panel ---- */
body.design5 .d5-panel{
  position:relative; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,var(--d5-panel),var(--d5-panel2));
  border-radius:50% 50% 0 0 / 122px 122px 0 0;   /* circular dome top */
}

/* ---- category carousel: bubbles ride a circular arc; drag left / right ---- */
body.design5 .d5-arc{ position:relative; height:150px; flex:0 0 auto; overflow:hidden;
  touch-action:pan-y; cursor:grab; -webkit-user-select:none; user-select:none; }
body.design5 .d5-arc:active{ cursor:grabbing; }
body.design5 .d5-arc-strip{ position:absolute; inset:0; }
body.design5 .d5-cat{ position:absolute; left:0; top:0; text-align:center; cursor:pointer;
  transition:transform .4s cubic-bezier(.22,.8,.3,1), opacity .3s ease; will-change:transform, opacity; }
body.design5 .d5-arc.d5-dragging .d5-cat{ transition:none; }
body.design5 .d5-cat .d5-bubble{
  width:70px; height:70px; border-radius:50%; margin:0 auto; overflow:hidden; background:var(--d5-cat-bg);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:box-shadow .2s, transform .2s;
}
body.design5 .d5-cat .d5-bubble img{ width:100%; height:100%; object-fit:cover; }
body.design5 .d5-cat .d5-lbl{ display:inline-block; max-width:106px; margin:8px auto 0; font-size:12px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
  color:var(--d5-cat-text); text-shadow:0 1px 4px rgba(0,0,0,.35); line-height:1.12; max-height:2.24em; overflow:hidden; white-space:normal; overflow-wrap:break-word; }
body.design5 .d5-cat.active .d5-bubble{ box-shadow:0 0 0 3px var(--d5-cat-ring),0 8px 18px rgba(0,0,0,.28); transform:scale(1.08); }

/* ---- item carousel: big CIRCULAR hero, neighbours curve in close on the arc ---- */
body.design5 .d5-carousel{ position:relative; flex:1 1 auto; min-height:380px; overflow:visible; touch-action:pan-y; cursor:grab; }
body.design5 .d5-carousel:active{ cursor:grabbing; }
body.design5 .d5-track{ position:absolute; inset:0; }
body.design5 .d5-cup{
  position:absolute; left:50%; bottom:0; margin-left:-90px; width:180px; height:180px; cursor:pointer;
  transform-origin:bottom center; transition:transform .5s cubic-bezier(.22,.8,.3,1),opacity .35s ease; will-change:transform,opacity;
}
body.design5 .d5-carousel.d5-dragging .d5-cup{ transition:none; }
body.design5 .d5-cup img{ display:block; width:180px; height:180px; border-radius:50%; object-fit:cover;
  box-shadow:0 18px 26px rgba(0,0,0,.34); }
body.design5 .d5-halo{ position:absolute; left:50%; bottom:96px; width:320px; height:320px; margin-left:-160px;
  border-radius:50%; background:var(--d5-halo); z-index:0; }
body.design5 .d5-meta{ position:absolute; left:0; right:0; bottom:40px; text-align:center; z-index:4; pointer-events:none; }
body.design5 .d5-meta .d5-pr{ font-size:20px; font-weight:800; color:var(--d5-item-price); }
body.design5 .d5-dots{ position:absolute; left:0; right:0; bottom:16px; display:flex; gap:6px; justify-content:center; z-index:4; }
body.design5 .d5-dots i{ width:6px; height:6px; border-radius:50%; background:var(--d5-dot); transition:.2s; }
body.design5 .d5-dots i.on{ background:var(--d5-dot-on); width:16px; border-radius:6px; }

/* ============================================================================
   Design5 · Desktop & iPad (>=768px): STRAIGHT slider (curve removed).
   ----------------------------------------------------------------------------
   The category arc and the item "carousel" keep the SAME drag-to-slide engine
   and easing animation as on phones — only their geometry changes: Design5.js
   lays them on a STRAIGHT line instead of a circle (see the `d5IsWide()` branches
   in D5CatLayout / D5ItemLayout). The selected item stays the big centred CIRCLE
   (as on mobile); its neighbours sit smaller to the left/right on the same
   baseline and slide in/out. It is all transform-based, so there are NO
   scrollbars. Here we only need to widen the phone column and flatten the dome —
   the absolute-positioned bubbles/cups, halo, price and dots are untouched.
   Scoped to body.design5 and gated on >=768px, so phones and Design1-4 are
   completely unaffected.
   ============================================================================ */
@media (min-width: 768px){
  /* widen the 520px phone column so the straight slider uses the responsive width */
  body.design5 .d5-root{ max-width:1200px; width:100%; }
  /* flatten the dome — no curve — but keep the panel tall for the big hero */
  body.design5 .d5-panel{ border-radius:0; }

  /* HEADER ROW: item name + ingredients clustered on the RIGHT, next to the
     client logo (name to the left of the logo, both right-aligned). The left of
     the bar is intentionally empty. (.d5-topbar wraps .d5-hdr + .d5-title; on
     phones it's a plain block so the logo stays centred on top with the title
     beneath — mobile is unchanged.) */
  body.design5 .d5-topbar{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:16px; padding:10px 30px 8px; background:var(--d5-page-bg); }
  body.design5 .d5-topbar .d5-title{ order:1; flex:0 1 auto; min-width:0; text-align:right; padding:0; margin:0; }
  body.design5 .d5-topbar .d5-title h1{ font-size:26px; }
  body.design5 .d5-topbar .d5-title p{ font-size:13px; margin-top:2px; }
  body.design5 .d5-topbar .d5-hdr{ order:2; flex:0 0 auto; padding:0; }
  body.design5 .d5-logo{ max-height:46px; max-width:220px; }

  /* categories now sit at the very top of the panel (title moved to the header);
     keep both slider containers scrollbar-free */
  body.design5 .d5-arc, body.design5 .d5-carousel{ overflow:hidden; }
  /* trim the category row a little so the big item hero gets more height */
  body.design5 .d5-arc{ height:120px; }

  /* FILL the left column with green all the way down — removes the tall white gap
     that .main-content adds (it sets padding-bottom:200px on the white .d5-root).
     We fit the root under the fixed 48px header and paint it green so whatever
     bottom padding remains reads as panel green, not white. */
  body.design5 .d5-root{ min-height:calc(100vh - 48px); padding-bottom:52px; background:var(--d5-panel2); }
  /* the footer sits over the green now — make it blend (no white bar, no gap) */
  body.design5 .powered-by{ background:transparent !important; }
  body.design5 .powered-by, body.design5 .powered-by a, body.design5 .powered-by span{ color:#ffffff !important; }
}

/* ============================================================================
   Design5 · TWO-COLUMN desktop (>=992px, Bootstrap lg — the right column
   `d-lg-block` becomes visible here). The selected item's name + ingredients
   move OUT of the top bar and into the RIGHT column (.d5-side), replacing the
   brand logo. Price stays under the item circle on the green menu. Between 768
   and 991px (iPad portrait, right column hidden) the name stays in the top bar.
   ============================================================================ */
@media (min-width: 992px){
  /* logo AND name/ingredients now live in the right panel, so hide the whole top
     bar — the green categories then start right under the site header. */
  body.design5 .d5-topbar{ display:none; }

  /* The green .d5-root fills the column, but the panel/carousel weren't stretching
     to fill it (carousel sat at its min-height:380 with empty green below). Force
     the whole chain to fill the height so the big item hero uses the whole area. */
  body.design5 .d5-panel{ min-height:calc(100vh - 100px); }
  body.design5 .d5-carousel{ min-height:calc(100vh - 224px); }

  /* right-hand panel: brand logo on top, then the selected item's name +
     ingredients (replaces the brand DesktopImage for Design5). */
  body.design5 .d5-side{
    position:relative; height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding:40px 42px; background:var(--d5-page-bg);
  }
  body.design5 .d5-side-logo{ margin-bottom:22px; }
  body.design5 .d5-side-logo img{ max-height:210px; max-width:82%; object-fit:contain; }
  body.design5 .d5-side-info{ max-width:88%; }
  body.design5 .d5-side-info h1{
    margin:0; font-weight:800; font-size:34px; line-height:1.15;
    color:var(--d5-accent); text-transform:capitalize;
  }
  body.design5 .d5-side-info p{
    margin:16px 0 0; font-size:16px; line-height:1.55; color:var(--d5-subtitle);
  }
}