/* AVEROTP · checkout bar + playful comic motion, 25 Oct 2026.
   Explicitly scoped so the rest of the website/admin keeps its existing layout. */
@layer pop {
  html[data-design="comic-pop"] body.order-checkout-page .mc-page.order-checkout-content {
    padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px))!important;
    min-height:calc(100dvh - 125px)!important;
  }

  /* Checkout does not render a bottom navigation dock. Thus anchor the action
     to the actual visible viewport bottom, not the 120px navigation offset. */
  html[data-design="comic-pop"] body.order-checkout-page .mc-order-sticky.order-checkout-dock {
    position:fixed!important;
    inset:auto auto max(12px, env(safe-area-inset-bottom, 0px)) 50%!important;
    transform:translateX(-50%)!important;
    width:min(660px, calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    margin:0!important;
    padding:10px!important;
    z-index:995!important;
    background:#fff!important;
    border:3px solid #192138!important;
    border-radius:23px!important;
    box-shadow:4px 6px 0 #192138, 0 16px 28px rgba(25,33,56,.12)!important;
    color:#192138!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    opacity:1!important;
    animation:averotpDockReveal .45s ease-out both!important;
  }

  html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action {
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:62px!important;
    margin:0!important;
    padding:14px 16px!important;
    overflow:hidden!important;
    border:3px solid #192138!important;
    border-radius:16px!important;
    background:#ffda40!important;
    color:#192138!important;
    box-shadow:2px 5px 0 #192138!important;
    font:900 clamp(13px, 3.9vw, 18px)/1.25 'Nunito', sans-serif!important;
    letter-spacing:.05px!important;
    -webkit-text-fill-color:#192138!important;
    white-space:normal!important;
    text-align:center!important;
    transition:transform .2s cubic-bezier(.2,.9,.2,1),box-shadow .2s ease,background-color .2s ease!important;
    animation:averotpCtaFloat 3.6s ease-in-out infinite!important;
    isolation:isolate!important;
  }
  html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action:is(:disabled,.is-processing) {
    animation:none!important;
    transform:none!important;
    background:#f0f4ff!important;
    color:#192138!important;
    -webkit-text-fill-color:#192138!important;
  }
  html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action:not(:disabled):active {
    transform:translateY(3px) scale(.985)!important;
    box-shadow:0 1px 0 #192138!important;
    animation:none!important;
  }
  html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action i,
  html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action span {
    position:relative!important;
    z-index:1!important;
    color:inherit!important;
    -webkit-text-fill-color:currentColor!important;
    overflow-wrap:anywhere!important;
  }
  /* Slow diagonal comic highlight moving across the CTA. */
  html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action:not(:disabled)::before {
    content:""!important;
    pointer-events:none!important;
    position:absolute!important;
    inset:-70% auto -70% -55%!important;
    width:30%!important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent)!important;
    transform:rotate(20deg)!important;
    animation:averotpCtaShine 5s ease-in-out infinite!important;
  }

  /* Each section appears once without disturbing the actual order logic. */
  html[data-design="comic-pop"] body.order-checkout-page .order-checkout-content > .mc-card,
  html[data-design="comic-pop"] body.order-checkout-page #opSection,
  html[data-design="comic-pop"] body.order-checkout-page #summarySection {
    animation:averotpCardArrive .42s cubic-bezier(.2,.75,.2,1) both!important;
  }
  html[data-design="comic-pop"] body.order-checkout-page .order-checkout-content > .mc-card:nth-child(2) {animation-delay:.06s!important;}
  html[data-design="comic-pop"] body.order-checkout-page #opSection {animation-delay:.12s!important;}
  html[data-design="comic-pop"] body.order-checkout-page #summarySection {animation-delay:.18s!important;}
  html[data-design="comic-pop"] body.order-checkout-page .op-card {
    transition:transform .2s cubic-bezier(.2,1,.3,1), box-shadow .2s ease, background-color .2s ease!important;
  }
  html[data-design="comic-pop"] body.order-checkout-page .op-card.active {
    animation:averotpOperatorSelect .28s cubic-bezier(.2,1,.3,1) both!important;
    background:#fff0a2!important;
    box-shadow:3px 5px 0 #192138!important;
  }
  html[data-design="comic-pop"] body.order-checkout-page .op-card:active {transform:scale(.97)!important;}
  html[data-design="comic-pop"] body.order-checkout-page .pop-chat-fab {
    bottom:calc(124px + env(safe-area-inset-bottom, 0px))!important;
  }
}
@keyframes averotpDockReveal {from{opacity:0;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12))}to{opacity:1;filter:drop-shadow(0 0 0 transparent)}}
@keyframes averotpCtaFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes averotpCtaShine {0%,18%{left:-55%}42%,100%{left:130%}}
@keyframes averotpCardArrive {from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes averotpOperatorSelect {0%{transform:scale(.97)}75%{transform:scale(1.025)}100%{transform:scale(1)}}
@media (max-width:380px) {
  @layer pop {
    html[data-design="comic-pop"] body.order-checkout-page .mc-order-sticky.order-checkout-dock {
      padding:8px!important;
      width:calc(100vw - 16px)!important;
      max-width:calc(100vw - 16px)!important;
      bottom:max(8px, env(safe-area-inset-bottom, 0px))!important;
    }
    html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action {
      min-height:58px!important;
      font-size:13px!important;
    }
  }
}
@media (prefers-reduced-motion:reduce) {
  @layer pop {
    html[data-design="comic-pop"] body.order-checkout-page .mc-order-sticky.order-checkout-dock,
    html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action,
    html[data-design="comic-pop"] body.order-checkout-page #orderBtn.order-checkout-action::before,
    html[data-design="comic-pop"] body.order-checkout-page .order-checkout-content > .mc-card,
    html[data-design="comic-pop"] body.order-checkout-page #opSection,
    html[data-design="comic-pop"] body.order-checkout-page #summarySection,
    html[data-design="comic-pop"] body.order-checkout-page .op-card.active {
      animation:none!important;
      transition:none!important;
    }
  }
}