/* ===========================================================
   Choco Pop v2 — Checkout (delivery + payment)
   Templates: templates/layouts/checkout_base.html,
              order/templates/order/checkout/{delivery,payment}.html + partials
   All checkout scripts (address, map, delivery options, slots, coupon,
   gateways) are untouched; this is styling + entrance motion only.
   =========================================================== */

/* ---------- minimal checkout header with the chocolate edge ---------- */
.cp-checkout-head__bar{
  position:relative;z-index:3;max-width:none;
  background:
    radial-gradient(circle at 12% 30%, rgba(237,155,51,.10) 0 2px, transparent 2.5px) 0 0/86px 40px,
    linear-gradient(180deg,#FFFBF5,#FFF4E5);
}
.cp-checkout-back{height:42px;font-size:.82rem;font-weight:800;}
.cp-checkout-back img{width:18px !important;height:18px !important;}
.cp-checkout-logo img{height:2rem;width:auto;object-fit:contain;transition:transform .4s var(--cp-ease-jelly);}
.cp-checkout-logo:hover img{animation:cpJelly .7s ease;}
.cp-checkout-secure{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.72rem;font-weight:800;color:#2f8a43;background:#E9F6EC;}
.cp-checkout-secure img{width:16px;height:16px;object-fit:contain;}
@media (max-width:640px){.cp-checkout-secure{display:none;}}

main.cp-checkout{
  padding-top:4px;
  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));
}

/* ---------- steps: a chocolate bar that fills ---------- */
.cp-steps{position:relative;display:flex;align-items:flex-start;justify-content:space-between;max-width:620px;margin:6px auto 22px;padding:0 10px;}
.cp-steps__track{position:absolute;top:24px;right:14%;left:14%;height:10px;border-radius:10px;background:var(--cp-milk-2);box-shadow:inset 0 2px 3px rgba(79,44,29,.14);overflow:hidden;}
.cp-steps__track i{
  position:absolute;top:0;bottom:0;right:0;width:0;border-radius:10px;
  background:linear-gradient(180deg,#7a4630,var(--clay-cocoa) 60%,var(--clay-cocoa-dark));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25);
  animation:cpStepFill 1.2s var(--cp-ease-out) both .2s;
}
.cp-steps[data-step="delivery"] .cp-steps__track i{--w:50%;}
.cp-steps[data-step="payment"] .cp-steps__track i{--w:100%;}
.cp-steps[data-step="cart"] .cp-steps__track i{--w:0%;}
@keyframes cpStepFill{from{width:0;}to{width:var(--w,50%);}}
.cp-steps__item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:90px;text-align:center;}
.cp-steps__dot{
  width:56px;height:56px;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 4px 0 rgba(166,106,41,.25), inset 0 2px 0 #fff;filter:grayscale(.5);opacity:.75;
  transition:transform .5s var(--cp-ease-jelly);
}
.cp-steps__dot img{width:28px;height:28px;object-fit:contain;}
.cp-steps__label{font-size:.75rem;font-weight:800;color:var(--clay-cocoa-light);}
.cp-steps__item.is-done .cp-steps__dot{filter:none;opacity:1;}
.cp-steps__item.is-done .cp-steps__label{color:var(--clay-cocoa);}
.cp-steps__item.is-current .cp-steps__dot{
  filter:none;opacity:1;
  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 0 0 6px rgba(237,155,51,.18), 0 10px 18px rgba(130,17,35,.25);
  animation:cpStepPulse 2.4s ease-in-out infinite;
}
.cp-steps__item.is-current .cp-steps__label{color:var(--clay-wine-dark);}
a.cp-steps__item:hover .cp-steps__dot{transform:translateY(-4px) rotate(-8deg);}
@keyframes cpStepPulse{0%,100%{box-shadow:0 5px 0 var(--clay-wine-dark), 0 0 0 6px rgba(237,155,51,.18), 0 10px 18px rgba(130,17,35,.25);}50%{box-shadow:0 5px 0 var(--clay-wine-dark), 0 0 0 12px rgba(237,155,51,.06), 0 10px 18px rgba(130,17,35,.25);}}

/* ---------- cards ---------- */
.cp-checkout .dk-section{border-radius:30px !important;animation:cpRiseIn .55s var(--cp-ease-out) both;}
.cp-checkout .checkout-page-main > * > .dk-section:nth-child(2),.cp-checkout .checkout-page-main > .dk-section:nth-child(2){animation-delay:.07s;}
.cp-checkout .checkout-page-main .space-y-4 > *:nth-child(3){animation-delay:.12s;}
.cp-checkout .checkout-page-main .space-y-4 > *:nth-child(4){animation-delay:.17s;}
.cp-checkout .checkout-page-main .space-y-4 > *:nth-child(5){animation-delay:.22s;}
.cp-checkout h2{font-weight:900 !important;color:var(--clay-cocoa-dark) !important;}

/* selectable cards (address, delivery option, payment method): input + label siblings */
.cp-checkout input:is([type=radio],[type=checkbox]) + label{
  border-radius:22px !important;transition:transform .45s var(--cp-ease-jelly), border-color .2s ease, background .25s ease, box-shadow .25s ease !important;
}
.cp-checkout input:is([type=radio],[type=checkbox]) + label:hover{transform:translateY(-2px);}
.cp-checkout input:is([type=radio],[type=checkbox]):checked + label{
  border-color:var(--clay-wine) !important;background:linear-gradient(135deg,#fff,#FFF1DE) !important;
  box-shadow:0 5px 0 rgba(130,17,35,.22), 0 10px 18px rgba(130,17,35,.12) !important;animation:cpJelly .6s ease;
}
/* time slots and day cards toggle .selected from delivery_scripts.html */
.cp-checkout .time-slot-checkbox{border-radius:20px !important;transition:transform .45s var(--cp-ease-jelly), box-shadow .25s ease !important;}
.cp-checkout .time-slot-checkbox:hover{transform:translateY(-2px);}
.cp-checkout .selected{animation:cpJelly .6s ease;}
#delivery-options-container label{border-radius:22px !important;}
#delivery-options-container > *{animation:cpRiseIn .45s var(--cp-ease-out) both;}
#delivery-options-container > *:nth-child(3){animation-delay:.06s;}
#delivery-options-container > *:nth-child(4){animation-delay:.12s;}
#delivery-loading:not(.hidden) .animate-spin{border-color:var(--clay-gold) !important;border-top-color:transparent !important;}

.cp-checkout input[type=text],.cp-checkout input[type=tel],.cp-checkout textarea,.cp-checkout select{border-radius:18px;transition:border-color .2s ease, box-shadow .25s ease;}
.cp-checkout input[type=text]:focus,.cp-checkout textarea:focus{border-color:var(--clay-gold) !important;box-shadow:0 0 0 4px rgba(237,155,51,.18) !important;outline:none;}

/* summary sidebar + mobile footer */
.cp-checkout .checkout-page-sidebar .dk-section{position:relative;overflow:hidden;}
.cp-checkout .checkout-page-sidebar .dk-section::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 10px,var(--clay-gold) 10px 20px);background-size:28px 100%;animation:cpCandyRun 1.2s linear infinite;}
.cp-checkout .btn-primary{position:relative;overflow:hidden;}
.cp-checkout .checkout-page-sidebar .btn-primary{margin-bottom:12px;}
.cp-checkout .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:cpShineSweep 3.6s ease-in-out infinite;}
.delivery-mobile-submit-btn{transition:transform .4s var(--cp-ease-jelly) !important;}
.delivery-mobile-submit-btn.btn-primary{animation:cpJelly .6s ease;}

/* ---------- SnapPay installment schedule (payment.html renders .cp-inst__step rows) ----------
   Sized in em and laid out by a container query on em, so when the text grows
   (narrow phones, OS font scaling) the 4 columns fold to 2×2 instead of wrapping words. */
.cp-inst{
  position:relative;container-type:inline-size;font-size:13px;
  border:1.5px solid var(--cp-line);border-radius:22px;
  background:linear-gradient(180deg,#fff,#FFF6EA);
  box-shadow:var(--cp-shadow-xs);
  transform-origin:50% 0;animation:cpInstOpen .5s var(--cp-ease-jelly) both;
}
/* little notch pointing up at the SnapPay card */
.cp-inst::before{
  content:"";position:absolute;top:-8px;inset-inline-start:30px;width:14px;height:14px;
  background:#fff;border:1.5px solid var(--cp-line);border-right:0;border-bottom:0;
  border-radius:4px 0 0 0;transform:rotate(45deg);
}
.cp-inst__head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1.5px dashed var(--cp-line);}
.cp-inst__icon{
  width:34px;height:34px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,#fff,var(--cp-milk-2) 70%);box-shadow:var(--cp-shadow-xs);
  animation:cpHop .7s var(--cp-ease-jelly) .25s both;
}
.cp-inst__icon img{width:20px;height:20px;}
.cp-inst__titles{display:flex;flex-direction:column;min-width:0;line-height:1.5;}
.cp-inst__title{font-size:1em;font-weight:900;color:var(--cp-ink);}
.cp-inst__sub{font-size:.82em;font-weight:600;color:var(--cp-ink-soft);}

.cp-inst__row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:14px 6px 14px;list-style:none;}
/* dashed track behind the dots, from the first column's centre to the last */
.cp-inst__row::before,.cp-inst__row::after{content:"";position:absolute;top:calc(14px + 1em);inset-inline:12.5%;height:4px;margin-top:-2px;border-radius:4px;}
.cp-inst__row::before{background:repeating-linear-gradient(90deg,rgba(237,155,51,.45) 0 7px,transparent 7px 12px);}
.cp-inst__row::after{
  background:linear-gradient(90deg,var(--clay-cocoa),#7a4630);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transform-origin:right center;animation:cpInstDraw .9s var(--cp-ease-out) .15s both;
}
[dir=ltr] .cp-inst__row::after{transform-origin:left center;}

.cp-inst__step{
  position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:0 2px;text-align:center;white-space:nowrap;
  animation:cpRiseIn .5s var(--cp-ease-out) both;animation-delay:calc(var(--i,0) * 150ms + 120ms);
}
.cp-inst__dot{
  width:2em;height:2em;margin-bottom:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1em;font-weight:900;line-height:1;color:var(--clay-cocoa);
  background:var(--cp-surface);border:2px solid var(--clay-gold);box-shadow:0 3px 0 rgba(166,106,41,.28);
  animation:cpSpinIn .55s var(--cp-ease-jelly) both;animation-delay:inherit;
  transition:transform var(--cp-mid) var(--cp-ease-jelly);
}
.cp-inst__step:hover .cp-inst__dot{transform:translateY(-3px) scale(1.08);}
.cp-inst__label{font-size:.8em;font-weight:600;color:var(--cp-ink-faint);}
.cp-inst__amount{font-size:1.15em;font-weight:900;color:var(--cp-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.cp-inst__when{font-size:.8em;font-weight:700;color:var(--cp-ink-soft);padding:1px 9px;border-radius:999px;}

.cp-inst__step.is-now .cp-inst__dot{
  color:#fff;border-color:var(--clay-wine-dark);
  background:linear-gradient(180deg,#C4283F,var(--clay-wine) 55%,var(--clay-wine-dark));
  box-shadow:0 3px 0 var(--clay-wine-deep),0 0 0 0 rgba(166,25,46,.35);
  animation:cpSpinIn .55s var(--cp-ease-jelly) both,cpInstPulse 2.2s ease-out 1s infinite;
}
.cp-inst__step.is-now .cp-inst__amount{color:var(--clay-wine);}
.cp-inst__step.is-now .cp-inst__when{color:#fff;background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));box-shadow:0 2px 0 var(--clay-wine-deep);}

/* not enough room for four amounts side by side → two rows of two */
@container (max-width:21em){
  .cp-inst__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;}
  .cp-inst__row::before,.cp-inst__row::after{display:none;}
}

@keyframes cpInstOpen{from{opacity:0;transform:translateY(-10px) scaleY(.85);}to{opacity:1;transform:none;}}
@keyframes cpInstDraw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes cpInstPulse{0%{box-shadow:0 3px 0 var(--clay-wine-deep),0 0 0 0 rgba(166,25,46,.38);}70%,100%{box-shadow:0 3px 0 var(--clay-wine-deep),0 0 0 10px rgba(166,25,46,0);}}

/* ---------- newer payment-step cards (partials/styles.html) brought onto the Choco surfaces ---------- */
.cp-checkout .sc-pay{
  border-radius:30px;
  box-shadow:0 6px 0 #C98318,0 16px 28px -10px rgba(173,104,8,.55),inset 0 2px 0 rgba(255,255,255,.65);
  animation:cpRiseIn .55s var(--cp-ease-out) both;
}
.cp-checkout .sc-pay__offer{border-radius:22px;box-shadow:0 3px 0 rgba(173,104,8,.25);}
.cp-checkout .sc-pay__offer:has(input:checked){box-shadow:0 4px 0 #15803D,0 10px 18px -8px rgba(34,197,94,.55);}
.cp-checkout .sc-pay__balance{border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 0 rgba(173,104,8,.2);}
.cp-checkout .sc-pay__empty{border-radius:18px;}

.cp-checkout .snapp-blocked-alert{border-radius:22px;box-shadow:var(--cp-shadow-xs);animation:cpRiseIn .5s var(--cp-ease-out) both;}
.cp-checkout .snapp-blocked-alert__btn{
  box-shadow:0 3px 0 rgba(130,17,35,.25);
  transition:transform var(--cp-mid) var(--cp-ease-jelly),box-shadow var(--cp-fast) ease,background-color .15s,border-color .15s;
}
.cp-checkout .snapp-blocked-alert__btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(130,17,35,.25);}
.cp-checkout .snapp-blocked-alert__btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(130,17,35,.25);}
.cp-checkout .coupon-chip{box-shadow:0 2px 0 rgba(34,197,94,.25);}

@media (max-width:640px){
  /* the SEP wordmark is wide; give the gateway names room on small phones */
  label[for=gateway-sep] > img{height:2.25rem;max-width:84px !important;}
  .cp-steps{margin-bottom:16px;}
  .cp-steps__dot{width:46px;height:46px;}
  .cp-steps__dot img{width:24px;height:24px;}
  .cp-steps__track{top:19px;}
  .cp-steps__label{font-size:.68rem;}
}

@media (prefers-reduced-motion: reduce){
  .cp-steps__track i,.cp-steps__item.is-current .cp-steps__dot,.cp-checkout .dk-section,#delivery-options-container > *,
  .cp-checkout input:checked + label,.cp-checkout .selected,.cp-checkout .checkout-page-sidebar .dk-section::before,
  .cp-checkout .btn-primary::after,.delivery-mobile-submit-btn.btn-primary,
  .cp-inst,.cp-inst *,.cp-inst__row::after,.cp-checkout .sc-pay,.cp-checkout .snapp-blocked-alert{animation:none !important;}
  .cp-steps__track i{width:var(--w,50%);}
}