/* ===========================================================
   Choco Pop v2 — Profile area (sidebar + all pages under profile_base)
   Templates: templates/layouts/profile_base.html, profiles/templates/profiles/*
   Behaviour: js/choco-motion.js ([data-cp-countup] on the wallet balance)
   =========================================================== */

.cp-profile{
  padding-top:6px !important;padding-bottom:40px !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(237,155,51,.09) 0 2.5px, transparent 3px) 0 0/120px 90px,
    linear-gradient(180deg,#FFFBF6,var(--cp-milk));
}

/* ---------- sidebar ---------- */
.cp-pside{border-radius:32px !important;}
.cp-pside__head{
  position:relative;padding:26px 18px 20px;text-align:center;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.14) 0 3px, transparent 3.5px) 0 0/60px 50px,
    linear-gradient(135deg,var(--clay-wine),var(--clay-wine-dark));
  color:#fff;
}
.cp-pside__head::after{ /* scalloped cream edge */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;
  background:radial-gradient(circle at 50% 100%, #FFF8EE 8px, transparent 8.5px) 0 0/22px 12px repeat-x;
}
.cp-pside__avatar{
  width:76px;height:76px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%, #fff, var(--clay-cream) 80%);
  box-shadow:0 5px 0 rgba(0,0,0,.25), 0 0 0 5px rgba(255,255,255,.18);
  animation:cpPopInT .7s var(--cp-ease-jelly) both, cpAvatarRing 3s ease-in-out infinite 1s;
}
.cp-pside__avatar img{width:44px;height:44px;object-fit:contain;}
@keyframes cpAvatarRing{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.25), 0 0 0 5px rgba(255,255,255,.18);}50%{box-shadow:0 5px 0 rgba(0,0,0,.25), 0 0 0 10px rgba(255,255,255,.08);}}
.cp-pside__hello{font-size:.8rem;opacity:.85;}
.cp-pside__name{font-size:1.15rem;font-weight:900;margin-top:2px;}
.cp-pside__phone{font-size:.82rem;opacity:.8;margin-top:2px;}
.cp-pnav{padding:16px 12px 14px;}
.cp-pnav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.cp-pnav__item{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:18px;
  font-size:.92rem;font-weight:700;color:var(--clay-cocoa-dark);
  transition:background .25s ease, color .2s ease, transform .45s var(--cp-ease-jelly);
}
.cp-pnav__icon{width:38px;height:38px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%, #fff, var(--cp-milk-2) 75%);box-shadow:var(--cp-shadow-xs);transition:transform .5s var(--cp-ease-jelly);}
.cp-pnav__icon img{width:24px;height:24px;object-fit:contain;}
.cp-pnav__item:hover{background:rgba(253,227,189,.55);transform:translateX(-4px);}
.cp-pnav__item:hover .cp-pnav__icon{transform:rotate(-10deg) scale(1.08);}
.cp-pnav__item.is-active{color:#fff;background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));box-shadow:0 4px 0 var(--clay-wine-deep), 0 8px 14px rgba(130,17,35,.2);}
.cp-pnav__item.is-active .cp-pnav__icon{animation:cpHop 1s var(--cp-ease-jelly) .4s both;}
.cp-pnav__count{margin-inline-start:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#fff;background:linear-gradient(180deg,var(--clay-amber),var(--clay-gold-deep));box-shadow:0 2px 0 #a04700;}
.cp-pnav__item--club:not(.is-active){background:linear-gradient(90deg,rgba(246,200,122,.35),transparent);}
.cp-pnav__item--out{color:var(--clay-wine);}
.cp-pnav__item--out:hover{background:rgba(232,167,176,.35);}

/* ---------- main panel + generic content inside it ---------- */
.cp-pmain{border-radius:32px !important;}
.cp-pmain h1{display:flex;align-items:center;gap:10px;font-weight:900 !important;color:var(--clay-cocoa-dark) !important;}
.cp-pmain h1::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--clay-gold);box-shadow:0 0 0 4px rgba(237,155,51,.22);flex-shrink:0;}
.cp-pmain h2{color:var(--clay-cocoa-dark);font-weight:900 !important;}
.cp-pmain .rounded-xl.border,.cp-pmain .rounded-2xl.border,.cp-pmain .rounded-lg.border{border-radius:22px !important;border-color:rgba(237,155,51,.2) !important;}
.cp-pmain table{border-collapse:separate;border-spacing:0;}
.cp-pmain tbody tr{transition:background .2s ease;}
.cp-pmain tbody tr:hover{background:#FFF7EC;}
.cp-pmain input[type=text],.cp-pmain input[type=number],.cp-pmain input[type=tel],.cp-pmain input[type=email],.cp-pmain textarea,.cp-pmain select{
  border-radius:16px !important;transition:border-color .2s ease, box-shadow .25s ease !important;
}
.cp-pmain input:focus,.cp-pmain textarea:focus,.cp-pmain select:focus{outline:none !important;border-color:var(--clay-gold) !important;box-shadow:0 0 0 4px rgba(237,155,51,.18) !important;}
.cp-pmain > * > *{animation:cpRiseIn .5s var(--cp-ease-out) both;}
.cp-pmain > * > *:nth-child(2){animation-delay:.06s;}
.cp-pmain > * > *:nth-child(3){animation-delay:.12s;}
.cp-pmain > * > *:nth-child(n+4){animation-delay:.18s;}

/* wallet hero */
.cp-pmain .wallet-hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0 3px, transparent 3.5px) 0 0/50px 44px,
    linear-gradient(135deg,var(--clay-wine) 0%,var(--clay-wine-dark) 60%,var(--clay-wine-deep) 100%) !important;
  box-shadow:0 9px 0 rgba(94,13,26,.35), 0 22px 36px rgba(94,13,26,.28), inset 0 3px 0 rgba(255,255,255,.18) !important;
  transform-style:preserve-3d;transition:transform .5s var(--cp-ease-jelly);
}
.cp-pmain .wallet-hero::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(115deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);animation:cpShineSweep 4.5s ease-in-out infinite;}
.cp-pmain .wallet-hero:hover{transform:translateY(-4px) rotate(-.6deg);}
.cp-pmain .wallet-hero img{animation:cpFloat 3.4s ease-in-out infinite;}

/* order cards */
.cp-order-card{border-radius:28px !important;}
.cp-order-card > div:first-child{background:linear-gradient(180deg,#FFFBF5,#FFF1DE) !important;}
.cp-order-card .rounded-full.shadow-sm{animation:cpPopInT .6s var(--cp-ease-jelly) both .2s;}

/* favorites: each wrapper becomes a transparent holder so the candy card shows */
.cp-fav-item{background:transparent;border:0;padding:0;}
.cp-fav-item .cp-pc{height:auto;}
.cp-fav-item form button{border-radius:999px !important;transition:transform .4s var(--cp-ease-jelly) !important;}
.cp-fav-item form button:hover{transform:translateY(-2px);}

/* modals opened from profile pages */
.cp-profile ~ * [role=dialog] > div,.cp-pmain [role=dialog] > div > div{border-radius:28px;}

@media (prefers-reduced-motion: reduce){
  .cp-pside__avatar,.cp-pnav__item.is-active .cp-pnav__icon,.cp-pmain > * > *,.cp-pmain .wallet-hero::after,.cp-pmain .wallet-hero img,
  .cp-order-card .rounded-full.shadow-sm{animation:none !important;}
}