/* ===========================================================
   Choco Pop v2 — System bits: 404 / 500, SweetAlert popups,
   city selector modal, warehouse geo prompt
   Templates: templates/404.html, templates/500.html,
              includes/components/header/header_city_selector.html,
              components/warehouse_geo_prompt.html; SweetAlert is global.
   =========================================================== */

/* ---------- 404 / 500 ---------- */
main.cp-err{
  background:
    radial-gradient(circle at 18% 22%, rgba(237,155,51,.1) 0 2.5px, transparent 3px) 0 0/120px 90px,
    radial-gradient(ellipse at 50% 20%, #FFF1DE, transparent 60%),
    linear-gradient(180deg,#FFFBF6,var(--cp-milk));
}
.cp-err-code{display:flex;align-items:center;justify-content:center;gap:6px;direction:ltr;margin:6px 0 12px;font-size:clamp(5rem,16vw,9rem);font-weight:900;line-height:1;color:var(--clay-wine);text-shadow:0 8px 0 var(--clay-wine-deep), 0 18px 24px rgba(94,13,26,.25);}
.cp-err-code > span:not(.cp-err-zero){display:inline-block;animation:cpDropIn .9s var(--cp-ease-jelly) both;}
.cp-err-code > span:last-child{animation-delay:.15s;}
.cp-err-zero{position:relative;display:inline-flex;width:.95em;height:.95em;align-items:center;justify-content:center;}
.cp-err-zero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(79,44,29,.3));animation:cpErrWobble 3.2s ease-in-out infinite;animation-delay:var(--d,0s);}
.cp-err-zero i{position:absolute;bottom:-.08em;width:.09em;height:.18em;border-radius:0 0 999px 999px;background:linear-gradient(90deg,#74462f,var(--clay-cocoa-dark));transform-origin:50% 0;animation:cpDripStretch2 3.4s ease-in-out infinite;}
.cp-err-zero i:nth-of-type(1){left:28%;animation-delay:-.6s;}
.cp-err-zero i:nth-of-type(2){left:50%;height:.26em;animation-delay:-1.4s;}
.cp-err-zero i:nth-of-type(3){left:68%;animation-delay:-2.2s;}
@keyframes cpErrWobble{0%,100%{transform:rotate(-8deg) translateY(0);}50%{transform:rotate(10deg) translateY(-8px);}}
@keyframes cpDripStretch2{0%,100%{transform:scaleY(.7);}50%{transform:scaleY(1.25);}}
.cp-err-title{font-size:1.15rem;font-weight:900;color:var(--clay-cocoa-dark);margin-bottom:6px;animation:cpRiseIn .6s var(--cp-ease-out) both .4s;}
.cp-err a{transition:transform .45s var(--cp-ease-jelly) !important;}
.cp-err a:hover{transform:translateY(-3px);}

/* ---------- SweetAlert (Django messages, coupon copy, …) ---------- */
.swal2-container.swal2-backdrop-show{background:rgba(38,19,11,.35) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.swal2-popup{
  border-radius:30px !important;font-family:inherit !important;color:var(--clay-cocoa-dark) !important;
  background:radial-gradient(ellipse at 20% 0%, #fff, #FFF8EE 55%, #FFF0DC 100%) !important;
  box-shadow:0 10px 0 rgba(204,90,0,.16), 0 26px 44px rgba(38,19,11,.28), inset 0 3px 0 #fff !important;
}
.swal2-popup.swal2-show{animation:cpSwalIn .6s var(--cp-ease-jelly) !important;}
.swal2-popup.swal2-hide{animation:cpSwalOut .25s ease-in forwards !important;}
@keyframes cpSwalIn{from{opacity:0;transform:scale(.7) translateY(30px) rotate(-3deg);}to{opacity:1;transform:none;}}
@keyframes cpSwalOut{to{opacity:0;transform:scale(.85) translateY(10px);}}
.swal2-popup.swal2-toast{border-radius:999px !important;padding:8px 14px !important;}
.swal2-title,.swal2-html-container{color:var(--clay-cocoa-dark) !important;font-family:inherit !important;}
.swal2-icon.swal2-success{border-color:rgba(47,138,67,.35) !important;color:#2f8a43 !important;}
.swal2-icon.swal2-success [class^=swal2-success-line]{background-color:#2f8a43 !important;}
.swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(47,138,67,.3) !important;}
.swal2-icon.swal2-error{border-color:rgba(166,25,46,.4) !important;}
.swal2-icon.swal2-error [class^=swal2-x-mark-line]{background-color:var(--clay-wine) !important;}
.swal2-icon.swal2-warning,.swal2-icon.swal2-info{border-color:var(--clay-gold) !important;color:var(--clay-gold-deep) !important;}
.swal2-styled.swal2-confirm,.swal2-confirm.swal2-styled{
  border-radius:999px !important;background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark)) !important;
  box-shadow:0 5px 0 var(--clay-wine-deep) !important;font-weight:800 !important;padding:10px 22px !important;
  transition:transform .35s var(--cp-ease-jelly) !important;
}
.swal2-styled.swal2-confirm:hover{transform:translateY(-2px);}
.swal2-styled.swal2-cancel{border-radius:999px !important;background:#fff !important;color:var(--clay-cocoa) !important;border:1px solid var(--cp-line) !important;box-shadow:0 4px 0 rgba(237,155,51,.2) !important;}
.swal2-timer-progress-bar{background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 8px,var(--clay-gold) 8px 16px) !important;height:5px !important;}

/* ---------- city selector modal ---------- */
.header-city-modal__backdrop{background:rgba(38,19,11,.4) !important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.header-city-modal:not(.hidden) .header-city-modal__backdrop{animation:cpFadeIn .3s ease both;}
.header-city-modal__panel{border-radius:32px !important;box-shadow:0 10px 0 rgba(204,90,0,.16), 0 30px 60px rgba(38,19,11,.35) !important;}
.header-city-modal:not(.hidden) .header-city-modal__panel{animation:cpCityIn .6s var(--cp-ease-jelly) both;}
@keyframes cpCityIn{from{opacity:0;scale:.85;translate:0 40px;}to{opacity:1;scale:1;translate:0 0;}}
.header-city-modal__close{transition:transform .45s var(--cp-ease-jelly) !important;}
.header-city-modal__close:hover{transform:rotate(90deg) scale(1.1);}

/* ---------- warehouse geo prompt (mobile) ---------- */
.warehouse-geo-prompt__inner{border-radius:26px !important;box-shadow:0 8px 0 rgba(204,90,0,.16), 0 18px 30px rgba(38,19,11,.25) !important;}
.warehouse-geo-prompt:not(.hidden) .warehouse-geo-prompt__inner{animation:cpCityIn .6s var(--cp-ease-jelly) both;}
.warehouse-geo-prompt__icon img{animation:cpPinDrop 1.6s var(--cp-ease-jelly) infinite 1s;}
.warehouse-geo-prompt__actions .btn-primary{border-radius:999px !important;}

@media (prefers-reduced-motion: reduce){
  .cp-err-code > span,.cp-err-zero img,.cp-err-zero i,.cp-err-title,.swal2-popup.swal2-show,
  .header-city-modal:not(.hidden) .header-city-modal__panel,.warehouse-geo-prompt__inner,.warehouse-geo-prompt__icon img{animation:none !important;}
}
