/* =========================================================================
   Saung order-flow "buka lembaran buku" (book page-open) transition.
   Scoped ONLY to the store + cart order flow via app/store/template.jsx and
   app/cart/template.jsx. Pure CSS (no JS lib). Re-triggers on every navigation
   because Next.js templates re-mount per navigation.
   Anti-flicker: rotateY page-turn (not slide), opacity starts at 0.45 (not 0),
   ends at transform:none so it never leaves a transform that would break the
   mobile position:fixed CTA.
   ========================================================================= */
@keyframes saungBookOpen {
  0% {
    transform: perspective(1800px) rotateY(-16deg) translate3d(30px, 0, 0);
    opacity: 0.45;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.order-turn {
  animation: saungBookOpen 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left center;
}

/* Users who prefer reduced motion get no animation at all. */
@media (prefers-reduced-motion: reduce) {
  .order-turn {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- Inline checkout account section (guest register/login, WHMCS-style) ---- */
.co-sec-h .co-acct-toggle {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ds-brand-700, #047857);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.co-sec-h .co-acct-toggle:hover { text-decoration: underline; }
.co-acct-who {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ds-ink, #0f172a);
}
.co-acct-who i { color: var(--ds-brand, #059669); font-size: 18px; }
.co-acct-who span { color: var(--ds-muted, #64748b); font-size: 12.5px; }