/* ===========================================================
   Choco Pop v2 — Mobile navigation
   Template: templates/includes/components/bottom_nav_mobile.html
   Behaviour: js/choco-motion.js (initDock, initDrawers); drawer open/close
   logic stays in the template's own script.
   =========================================================== */

:root{ --cp-dock-h:66px; --cp-dock-gap:10px; }

/* ===================== floating candy dock ===================== */
.cp-dock{
  position:fixed;left:var(--cp-dock-gap);right:var(--cp-dock-gap);
  bottom:calc(var(--cp-dock-gap) + env(safe-area-inset-bottom, 0px));
  z-index:9999;pointer-events:none;
}
.cp-dock__bar{
  position:relative;height:var(--cp-dock-h);border-radius:28px;pointer-events:auto;
  background:
    radial-gradient(circle at 12% 30%, rgba(237,155,51,.12) 0 2px, transparent 2.5px) 0 0/64px 34px,
    linear-gradient(180deg,#FFFBF5,#FFF0DC);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 0 rgba(166,106,41,.22), 0 16px 30px rgba(79,44,29,.25), inset 0 2px 0 #fff, inset 0 -4px 8px rgba(204,90,0,.08);
}
.cp-dock__list{position:relative;z-index:1;display:flex;align-items:stretch;justify-content:space-between;height:100%;margin:0;padding:0 4px;list-style:none;}
.cp-dock__list > li{flex:1;display:flex;}
.cp-dock__item{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  padding:0 0 8px;border:0;background:none;color:var(--clay-cocoa-light);
  -webkit-tap-highlight-color:transparent;
}
.cp-dock__icon{
  position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%, #fff, #FFF3DF 60%, var(--clay-cream) 100%);
  box-shadow:0 3px 0 rgba(166,106,41,.24), inset 0 2px 0 #fff;
  transition:transform .55s var(--cp-ease-jelly), background .3s ease, box-shadow .3s ease;
}
.cp-dock__icon img{width:23px;height:23px;object-fit:contain;transition:transform .55s var(--cp-ease-jelly);}
.cp-dock__label{font-size:10.5px;font-weight:700;line-height:1;transition:color .25s ease, transform .45s var(--cp-ease-jelly);}

/* active: the icon rises out of the bar into the jelly bump */
.cp-dock__item.is-active{color:var(--clay-wine);}
.cp-dock__item.is-active .cp-dock__icon{
  transform:translateY(-20px) scale(1.14);
  background:radial-gradient(circle at 32% 26%, #FFE9C4, var(--clay-gold) 55%, var(--clay-gold-deep) 100%);
  box-shadow:0 5px 0 var(--clay-wine-dark), 0 10px 16px rgba(130,17,35,.3), inset 0 2px 0 rgba(255,255,255,.6);
}
.cp-dock__item.is-active .cp-dock__icon img{transform:rotate(-8deg) scale(1.05);}
.cp-dock__item.is-active .cp-dock__label{transform:translateY(-2px);}
.cp-dock__item:active .cp-dock__icon{transform:scale(.86,1.08);}
.cp-dock__item.is-active:active .cp-dock__icon{transform:translateY(-20px) scale(1.02,1.2);}
.cp-dock__item.is-hop .cp-dock__icon img{animation:cpHop .55s var(--cp-ease-jelly);}

/* the bump: a blob of the bar itself that slides under the active item */
.cp-dock__bump{
  position:absolute;left:0;top:-22px;width:68px;height:68px;margin-left:-34px;border-radius:50%;z-index:0;
  background:linear-gradient(180deg,#FFFBF5,#FFF6E8 60%);
  box-shadow:0 -4px 10px -4px rgba(79,44,29,.22), inset 0 2px 0 #fff;
  clip-path:inset(-20px -20px 46% -20px);
  opacity:0;scale:.4;
  transition:transform .6s var(--cp-ease-jelly), opacity .25s ease, scale .45s var(--cp-ease-jelly);
}
.cp-dock__bump.is-on{opacity:1;scale:1;}
.cp-dock__bump.is-jump{transition:none;}

.cp-dock .clay-badge{top:-5px;right:-6px;}

/* footer runs underneath the floating dock (see base.html mb-16 wrapper) */
@media (max-width:767.98px){
  .cp-footer{margin-bottom:-4rem;}
  .cp-footer__bottom-in{padding-bottom:calc(4rem + 26px + env(safe-area-inset-bottom, 0px)) !important;}
}

/* ===================== sheets (categories + search) ===================== */
.cp-overlay{background:rgba(38,19,11,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.cp-overlay:not(.hidden){animation:cpFadeIn .3s ease both;}
.cp-sheet{
  background:linear-gradient(180deg,#FFF6EA,#FDF3E7 30%);
  transition:transform .5s cubic-bezier(.32,1.12,.5,1);
}
.cp-sheet--side.is-open{box-shadow:0 0 50px -10px rgba(38,19,11,.5);}
.cp-sheet--up{border-radius:0;}
.cp-sheet__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;min-height:68px;
  background:
    radial-gradient(circle at 12% 30%, rgba(237,155,51,.12) 0 2px, transparent 2.5px) 0 0/64px 34px,
    linear-gradient(180deg,#FFFBF5,#FFF1DE);
  border-bottom:1px dashed var(--cp-line-strong);
}
.cp-sheet__title{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:900;color:var(--clay-cocoa-dark);}
.cp-sheet__title img{width:32px;height:32px;object-fit:contain;}
.is-open .cp-sheet__title img{animation:cpHop .7s var(--cp-ease-jelly) .2s both;}
.cp-sheet__close img{transition:transform .45s var(--cp-ease-jelly);}
.cp-sheet__close:active img{transform:rotate(90deg) scale(.8);}
.cp-sheet__foot{margin-top:auto !important;padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;background:linear-gradient(180deg,rgba(253,243,231,.85),#FDF3E7 40%);border-top:1px dashed var(--cp-line-strong);}

/* ---------- categories: right rail ---------- */
.cp-cat-rail{background:rgba(255,241,222,.6);border-inline-start:1px dashed var(--cp-line-strong);}
.cp-cat-tile{
  border-radius:20px;background:#fff;border:1px solid var(--cp-line);
  box-shadow:0 3px 0 rgba(237,155,51,.18);
  transition:transform .45s var(--cp-ease-jelly), background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cp-cat-tile__img{border-radius:14px;background:var(--cp-milk-2);}
.cp-cat-tile__img img{transition:transform .5s var(--cp-ease-jelly);}
.cp-cat-tile__name{font-size:9.5px;font-weight:700;color:var(--clay-cocoa);}
.cp-cat-tile:active{transform:scale(.94,1.04);}
.cp-cat-tile[aria-selected="true"]{
  background:radial-gradient(circle at 30% 20%, #fff, var(--clay-cream) 90%);
  border-color:var(--clay-gold);box-shadow:0 4px 0 var(--clay-gold-deep), 0 8px 14px rgba(204,90,0,.2);
  transform:translateX(-4px);
}
.cp-cat-tile[aria-selected="true"] .cp-cat-tile__img img{transform:scale(1.12) rotate(-6deg);}
.cp-cat-tile[aria-selected="true"] .cp-cat-tile__name{color:var(--clay-wine-dark);}
[data-cp-drawer].is-open .cp-cat-rail > .cp-cat-tile{animation:cpSlideInRow .45s var(--cp-ease-out) both;animation-delay:calc(var(--i, 0) * 40ms + 140ms);}

/* ---------- categories: panel ---------- */
.cp-cat-panel:not(.hidden){animation:cpRiseIn .4s var(--cp-ease-out) both;}
.cp-cat-all{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:8px 14px;border-radius:999px;
  font-size:.8rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));box-shadow:0 4px 0 var(--clay-wine-deep);
}
.cp-cat-group{border-radius:20px;background:#fff;border:1px solid var(--cp-line);padding:2px 14px;box-shadow:0 3px 0 rgba(237,155,51,.14);}
.cp-cat-group__head{color:var(--clay-cocoa-dark);}
.cp-cat-group__head .chev{
  width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  background:var(--cp-milk-2);color:var(--clay-gold-deep);transition:transform .45s var(--cp-ease-jelly) !important;
}
.cp-cat-group__head[aria-expanded="true"]{color:var(--clay-wine);}
.cp-cat-children:not(.hidden){padding-bottom:12px;}
.cp-cat-children:not(.hidden) > a{animation:cpPopInT .45s var(--cp-ease-jelly) both;}
.cp-cat-children:not(.hidden) > a:nth-child(2){animation-delay:.04s;}
.cp-cat-children:not(.hidden) > a:nth-child(3){animation-delay:.08s;}
.cp-cat-children:not(.hidden) > a:nth-child(4){animation-delay:.12s;}
.cp-cat-children:not(.hidden) > a:nth-child(5){animation-delay:.16s;}
.cp-cat-children:not(.hidden) > a:nth-child(n+6){animation-delay:.2s;}
.cp-cat-bubble{
  border-radius:50%;background:radial-gradient(circle at 32% 28%, #fff, var(--cp-milk-2) 75%);
  box-shadow:0 4px 0 rgba(237,155,51,.22), 0 8px 12px rgba(79,44,29,.1), inset 0 2px 0 #fff;
  transition:transform .45s var(--cp-ease-jelly);
}
.cp-cat-bubble--all{background:radial-gradient(circle at 32% 28%, #FFE9C4, var(--clay-cream-gold) 80%);}
.cp-cat-children a:active .cp-cat-bubble{transform:scale(.9);}

/* ---------- search sheet ---------- */
.cp-msearch{height:54px !important;}
.cp-msearch .cp-search__icon{border:0;padding:0;}
.cp-msearch-pop{border-radius:24px !important;}
#mobilePopularSearchTerms > *{animation:cpRiseIn .4s var(--cp-ease-out) both;}
#mobilePopularSearchTerms > *:nth-child(2){animation-delay:.05s;}
#mobilePopularSearchTerms > *:nth-child(3){animation-delay:.1s;}
#mobilePopularSearchTerms > *:nth-child(4){animation-delay:.15s;}
#mobilePopularSearchTerms > *:nth-child(n+5){animation-delay:.2s;}
#mobileSearchResultsContent > *{animation:cpRiseIn .42s var(--cp-ease-out) both;}
#mobileSearchResultsContent > *:nth-child(2){animation-delay:.05s;}
#mobileSearchResultsContent > *:nth-child(3){animation-delay:.1s;}
#mobileSearchResultsContent > *:nth-child(4){animation-delay:.15s;}
#mobileSearchResultsContent > *:nth-child(n+5){animation-delay:.2s;}
#mobileSearchResultsContent a{transition:transform .4s var(--cp-ease-jelly);}
#mobileSearchResultsContent a:active{transform:scale(.97);}
#mobileNoResults:not(.hidden){animation:cpRiseIn .4s var(--cp-ease-out) both;}

@media (prefers-reduced-motion: reduce){
  .cp-dock__icon,.cp-dock__bump,.cp-sheet,.cp-dock__label{transition:none !important;}
  .cp-dock__item.is-hop .cp-dock__icon img,.is-open .cp-sheet__title img,[data-cp-drawer] .cp-cat-tile,
  .cp-cat-panel,.cp-cat-children > a,#mobilePopularSearchTerms > *,#mobileSearchResultsContent > *{animation:none !important;}
}