/* ═══════════════════════════════════════════════════════════
   Flip card — two stacked faces; the back one peeks out behind,
   scaled down and tilted. Clicking the back layer (or flipCard.flip())
   shuffles them. Used by feature-card and payment-commission (How) and
   order-history and selling-price (What).

   Markup:
     <div class="flip-card" data-flip-card>
       <div class="flip-card-face is-front" data-face="a" style="--front-x…">
         <div class="flip-card-content">…face…</div>
         <button class="flip-card-hit" aria-label="Tampilkan …"></button>
       </div>
       <div class="flip-card-face is-back" data-face="b" style="…">…</div>
     </div>

   Each face carries its own pose numbers (straight from the Figma
   component, so every face lands exactly where its variant draws it):
     --front-x / --front-y   offset of the upright card: x from the box
                             centre, y = top edge
     --back-x  / --back-cy   centre of the tilted card: x from the box
                             centre, y = absolute centre line
     --back-s                back-layer scale (Figma: 0.82 – 0.924)
   Optional, defaults = the How cards:
     --front-r / --back-r    base tilt of each pose (0deg / 9.41deg)
     --flip-w / --flip-h     component box (480×537)
     --face-w                face width (407px)
     --flip-swing            how far the out-card swings right mid-flip
                             (100px; read by flip-card.js)
═══════════════════════════════════════════════════════════ */

.flip-card {
  position: relative;
  flex-shrink: 0;
  width: var(--flip-w, 480px);    /* Figma component box 480×537 */
  height: var(--flip-h, 537px);
}

.flip-card-face {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--face-w, 407px);    /* Figma face width */
  transform-origin: 50% 50%;
}

/* Upright, full size, on top */
.flip-card-face.is-front {
  z-index: 2;
  transform: translate(calc(-50% + var(--front-x, 0px)), var(--front-y, 0px)) rotate(var(--front-r, 0deg));
}

/* Tilted, scaled, behind — 9.41° in every How variant (--back-r overrides) */
.flip-card-face.is-back {
  z-index: 1;
  transform:
    translate(calc(-50% + var(--back-x, 0px)), calc(var(--back-cy, 0px) - 50%))
    rotate(var(--back-r, 9.41deg))
    scale(var(--back-s, 0.82));
}

/* The visible sliver of the back layer is one big button */
.flip-card-hit {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 22px;
  cursor: pointer;
}
.flip-card-face.is-back .flip-card-hit { display: block; }
.flip-card-hit:focus-visible { outline: 3px solid var(--primary, #3f8be7); outline-offset: 4px; }

/* Hover hint on the back layer: it lifts a little */
.flip-card-face.is-back .flip-card-content { transition: box-shadow 0.2s ease; }
.flip-card-face.is-back:hover .flip-card-content {
  box-shadow: 0 10px 28px rgba(33, 43, 54, 0.14);
}

/* While shuffling, the JS animation owns the transform */
.flip-card.is-flipping .flip-card-hit { pointer-events: none; }