/*
 * Apple Pay hero banner (templates-post/payment-methods/apple-pay/hero-banner.php).
 * Text, buttons and layout use site classes; this file only adds the logo size and the illustration.
 * Illustration styles are scoped to .ap (set on the illustration column), so nothing leaks into site styles.
 */

/* ---------- Logo above h1 (ACF top_section.logo) ---------- */
.ap-hero-logo { display: block; width: auto; height: 44px; flex: none; }

/* ---------- Tokens + base (illustration only) ---------- */
.ap {
  --tiffany: #129590;
  --tiffany-2: #00817C;
  --tiffany-3: #E8F5F4;
  --ink: #173244;
  --ink-soft: #55536B;
  --line: #D4E8E6;

  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: normal; /* theme sets letter-spacing:.2px on html */
  -webkit-font-smoothing: antialiased;
}
.ap *, .ap *::before, .ap *::after { box-sizing: border-box; }
.ap p { margin: 0; }
@media (max-width: 720px) {
  .ap { font-size: 16px; }
}

/* =========================================================================
 * Illustration
 *
 * Layout: fixed-size stage (--stage-w × --stage-h), statically fitted to the column by --k
 * (hero-banner.js sets --k = column width / stage width; values below are no-JS fallbacks).
 * The phone itself is never transformed — all motion is inside the screen and in the cards.
 *
 * States: default CSS = final static state (no JS, prefers-reduced-motion).
 * .js-on = start frame (checkout); hero-banner.js then adds .s0….s6 in sequence:
 *   s0 Face ID confirmed · s1 Payment request sent · s2 Routed to Acquirer B · s3 Approved
 *   s4 checkout → success screen · s5 Order confirmed · s6 Receipt sent
 * Reset: .is-out (quick fade) → .no-anim + .is-return (snap to start) → checkout fades back in.
 * ========================================================================= */

.ap .ap-demo {
  --stage-w: 720px;
  --stage-h: 660px;
  --k: .72;
  position: relative; width: 100%; min-width: 0; margin: 0;
  height: calc(var(--stage-h) * var(--k));
}
.ap-stage {
  position: absolute; top: 0; left: 50%;
  width: var(--stage-w); height: var(--stage-h);
  margin-left: calc(var(--stage-w) / -2);
  transform: scale(var(--k)); transform-origin: 50% 0;
  transition: opacity .4s ease;
}
/* Phone: slightly right of centre to balance the wider left cards; never animated */
.ap-demo-phone { position: absolute; left: 226px; top: 10px; z-index: 1; }

/* Hide the static state until JS has set the start frame; failsafe reveal if the script never runs */
@media (prefers-reduced-motion: no-preference) {
  .ap-demo:not(.is-ready) .ap-stage { opacity: 0; animation: ap-demo-failsafe 0s linear 2.5s forwards; }
  @keyframes ap-demo-failsafe { to { opacity: 1; } }
}

/* ---------- Phone ---------- */
.ap-phone {
  position: relative; width: 300px; height: 640px; border-radius: 46px; background: #D7E2E4;
  border: 10px solid var(--ink); overflow: hidden; box-shadow: 0 40px 70px -35px rgba(23,50,68,.45);
}
.ap-store { text-align: center; padding: 30px 22px 0; }
.ap-store-name { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ap-product { width: 84px; height: 84px; margin: 10px auto 2px; display: block; }
.ap-product-name { font-weight: 700; font-size: 16px; }
.ap-product-sub { font-size: 13px; color: var(--ink-soft); }
.ap-swatches { display: flex; justify-content: center; gap: 10px; margin: 10px 0 14px; }
.ap-swatches span { width: 16px; height: 16px; border-radius: 50%; }
.ap-swatches .on { box-shadow: 0 0 0 2px #D7E2E4, 0 0 0 3.5px var(--ink); }
.ap-paybtn { height: 44px; border-radius: 8px; background: #000; display: flex; align-items: center; justify-content: center; }
.ap-paybtn-logo { display: block; width: 50px; height: auto; }

/* ---------- Screen state 1: Apple Pay sheet ---------- */
.ap-sheet { position: absolute; left: 6px; right: 6px; bottom: 6px; background: #fff; border-radius: 22px 22px 34px 34px; padding: 14px 18px 18px; font-size: 12px; box-shadow: 0 -8px 24px rgba(23,50,68,.12); }
.ap-sheet-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #E3E8EC; }
.ap-sheet-mark { display: flex; align-items: center; }
.ap-sheet-mark-logo { display: block; width: 44px; height: auto; }
.ap-sheet-cancel { color: var(--tiffany-2); font-size: 14px; }
.ap-sheet-rows { margin: 0; }
.ap-sheet-rows > div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #E3E8EC; }
.ap-sheet-rows dt { color: var(--ink-soft); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; padding-top: 2px; }
.ap-sheet-rows dd { margin: 0; color: var(--ink); line-height: 1.4; }
.ap-sheet-total dd { font-weight: 700; text-align: right; }
.ap-sheet-confirm { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; color: var(--tiffany-2); font-size: 11px; }
.ap-sheet-confirm svg { width: 30px; height: 30px; overflow: visible; }
.ap-faceid-check { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- Screen state 2: payment successful ---------- */
.ap-success {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1; background: #fff; border-radius: 22px 22px 34px 34px;
  padding: 10px 18px 18px; text-align: center; box-shadow: 0 -8px 24px rgba(23,50,68,.12);
}
.ap-success-badge-wrap { position: relative; width: 120px; height: 90px; margin: 0 auto 2px; }
.ap-success-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-success-rays line { stroke: #8ED6D1; stroke-width: 3.5; stroke-linecap: round; }
.ap-success-badge {
  position: absolute; left: 32px; top: 28px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--tiffany); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px -10px rgba(18,149,144,.7);
}
.ap-success-badge svg { width: 30px; height: 30px; }
.ap-success-check { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ap-success-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ap .ap-success-text { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.ap-success-rows { margin: 12px 0 0; text-align: left; font-size: 12px; }
.ap-success-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid #E3E8EC; }
.ap-success-rows > div:last-child { border-bottom: 1px solid #E3E8EC; }
.ap-success-rows dt { color: var(--ink-soft); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.ap-success-rows dd { margin: 0; color: var(--ink); }
.ap-success-total dd { font-weight: 700; }
.ap-success-done {
  display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 14px;
  border-radius: 999px; background: var(--tiffany-2); color: #fff; font-size: 14px; font-weight: 600;
}

/* ---------- Status cards (same look as the former "Approved" chip) ---------- */
.ap-cards { position: absolute; display: flex; flex-direction: column; gap: 14px; }
.ap-cards--left  { left: 0; width: 206px; top: 262px; align-items: flex-end; }
.ap-cards--right { left: 550px; top: 330px; align-items: flex-start; }
.ap-card {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  background: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.35; color: var(--ink);
  box-shadow: 0 18px 40px -18px rgba(23,50,68,.45); border-left: 4px solid var(--line);
}
.ap-card-dot { width: 8px; height: 8px; border-radius: 50%; background: #9DB4B9; box-shadow: 0 0 0 3px #EEF3F4; flex: none; }
.ap-card-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--tiffany-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Approved — the accent card of the left flow */
.ap-card--approved { border-left-color: var(--tiffany); box-shadow: 0 20px 40px -16px rgba(18,149,144,.45); }
.ap-card--approved strong { color: var(--tiffany-2); }
.ap-card-check { width: 18px; height: 18px; border-radius: 50%; background: var(--tiffany); box-shadow: 0 0 0 4px var(--tiffany-3); display: flex; align-items: center; justify-content: center; flex: none; }
.ap-card-check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-cards--right .ap-card { border-left-color: var(--tiffany); }

/* Earlier steps once the next one arrives (also the final static look) */
.ap-card--request, .ap-card--routed { opacity: .6; transform: translateY(-6px); }

/* =========================================================================
   Animated states (only when JS runs the timeline)
   ========================================================================= */
/* Start frame: checkout visible, cards and success hidden */
.ap-demo.js-on .ap-card {
  opacity: 0; transform: translateX(-20px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.ap-demo.js-on .ap-cards--right .ap-card { transform: translateX(20px); }
.ap-demo.js-on .ap-sheet,
.ap-demo.js-on .ap-paybtn { transition: opacity .35s ease, transform .4s ease; }
.ap-demo.js-on .ap-faceid-check { transition: stroke-dashoffset .3s ease; }
.ap-demo.js-on .ap-success { opacity: 0; transform: translateY(22px); transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.ap-demo.js-on .ap-success-badge { transform: scale(0); }
.ap-demo.js-on .ap-success-check { stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; }
.ap-demo.js-on .ap-success-rays line { opacity: 0; transform: translate(var(--dx), var(--dy)); transition: opacity .25s ease, transform .4s cubic-bezier(.22,.61,.36,1); }
.ap-demo.js-on .ap-success-anim { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }

/* Idle hint on Face ID until it is confirmed (inner icon only) */
@media (prefers-reduced-motion: no-preference) {
  .ap-demo.js-on:not(.s0) .ap-sheet-confirm svg { animation: ap-faceid-idle 1.6s ease-in-out infinite; }
  @keyframes ap-faceid-idle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
}

/* s0 — Face ID confirmed */
.ap-demo.js-on.s0 .ap-faceid-check { stroke-dashoffset: 0; }

/* s1 — Payment request sent */
.ap-demo.js-on.s1 .ap-card--request { opacity: 1; transform: none; }

/* s2 — Routed to Acquirer B; previous step steps back */
.ap-demo.js-on.s2 .ap-card--request { opacity: .6; transform: translateY(-6px); }
.ap-demo.js-on.s2 .ap-card--routed  { opacity: 1; transform: none; }

/* s3 — Approved */
.ap-demo.js-on.s3 .ap-card--routed   { opacity: .6; transform: translateY(-6px); }
.ap-demo.js-on.s3 .ap-card--approved { opacity: 1; transform: none; }

/* s4 — checkout content leaves, success panel builds up (delays = order inside the screen) */
.ap-demo.js-on.s4 .ap-sheet,
.ap-demo.js-on.s4 .ap-paybtn { opacity: 0; transform: translateY(16px); }
.ap-demo.js-on.s4 .ap-success { opacity: 1; transform: none; transition-delay: .15s; }
.ap-demo.js-on.s4 .ap-success-badge { animation: ap-badge-pop .4s ease-out .4s both; }
.ap-demo.js-on.s4 .ap-success-check { stroke-dashoffset: 0; transition-delay: .6s; }
.ap-demo.js-on.s4 .ap-success-rays line { opacity: 1; transform: none; transition-delay: .65s; }
.ap-demo.js-on.s4 .ap-success-title { opacity: 1; transform: none; transition-delay: .6s; }
.ap-demo.js-on.s4 .ap-success-text  { opacity: 1; transform: none; transition-delay: .66s; }
.ap-demo.js-on.s4 .ap-success-rows  { opacity: 1; transform: none; transition-delay: .72s; }
.ap-demo.js-on.s4 .ap-success-done  { opacity: 1; transform: none; transition-delay: .78s; }
@keyframes ap-badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* s5 / s6 — result cards on the right */
.ap-demo.js-on.s5 .ap-card--order   { opacity: 1; transform: none; }
.ap-demo.js-on.s6 .ap-card--receipt { opacity: 1; transform: none; }

/* Reset: quick fade out → snap to start frame → checkout fades back in */
.ap-demo.js-on.is-out .ap-card,
.ap-demo.js-on.is-out .ap-success { opacity: 0; transition: opacity .3s ease 0s; }
.ap-demo.js-on.is-return .ap-sheet,
.ap-demo.js-on.is-return .ap-paybtn { opacity: 0; transform: translateY(16px); }
.ap-demo.no-anim *, .ap-demo.no-anim *::before, .ap-demo.no-anim *::after { transition: none !important; animation: none !important; }

/* ---------- Final static state (no JS / reduced motion): checkout content hidden ---------- */
.ap-demo:not(.js-on) .ap-sheet,
.ap-demo:not(.js-on) .ap-paybtn { opacity: 0; }

/* ---------- Mobile: stage = phone height, one card at a time on the phone's side edges ----------
 * Cards sit in the safe band between the product text and the Apple Pay button
 * (~30–38% of phone height) and overlap the phone frame by ~45px (≈30% of the card),
 * which only covers the empty side margin of the screen. Process cards on the left,
 * result cards on the right; each new card replaces the previous one.
 * The demo bleeds 10px into the container gutters so the phone stays as large as possible.
 * overflow-x: clip — hidden cards wait ±12px outside the stage (start of their slide-in) and the
 * hero section itself doesn't clip, so without it the page scrolls horizontally by a few px.
 * clip (not hidden) keeps the vertical axis visible, so the phone/card shadows are not cut. */
@media (max-width: 720px) {
  .ap .ap-demo { --stage-w: 510px; --stage-h: 660px; --k: .71; width: calc(100% + 20px); margin: 0 -10px; overflow-x: clip; }
  .ap-demo-phone { left: 105px; top: 10px; }
  .ap-cards { display: grid; gap: 0; width: 150px; height: 60px; top: 194px; z-index: 2; }
  .ap-cards--left  { left: 0; justify-items: end; }
  .ap-cards--right { left: 360px; justify-items: start; }
  .ap-cards .ap-card {
    grid-area: 1 / 1; align-self: center; max-width: 150px; white-space: normal;
    font-size: 14px; line-height: 1.3; padding: 9px 11px; gap: 8px; border-radius: 12px;
  }

  /* Final static state: process cards gone, last result card shown */
  .ap-demo .ap-cards .ap-card { opacity: 0; transform: none; }
  .ap-demo .ap-cards .ap-card--receipt { opacity: 1; }

  /* Animated: fade + 12px horizontal slide. Slower than desktop and never overlapping:
     the outgoing card fades in 0.45s, the incoming one starts at 0.55s (hero-banner.js mobile timeline). */
  .ap-demo.js-on .ap-cards .ap-card { transition: opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .ap-demo.js-on .ap-cards--left .ap-card  { opacity: 0; transform: translateX(-12px); }
  .ap-demo.js-on .ap-cards--right .ap-card { opacity: 0; transform: translateX(12px); }

  .ap-demo.js-on.s1 .ap-cards .ap-card--request,
  .ap-demo.js-on.s2 .ap-cards .ap-card--routed,
  .ap-demo.js-on.s3 .ap-cards .ap-card--approved,
  .ap-demo.js-on.s5 .ap-cards .ap-card--order,
  .ap-demo.js-on.s6 .ap-cards .ap-card--receipt {
    opacity: 1; transform: none;
    transition: opacity .6s ease-in-out .55s, transform .75s cubic-bezier(.22,.61,.36,1) .55s;
  }
  /* First card of each side has nothing to wait for */
  .ap-demo.js-on.s1 .ap-cards .ap-card--request,
  .ap-demo.js-on.s5 .ap-cards .ap-card--order { transition-delay: 0s; }

  .ap-demo.js-on.s2 .ap-cards .ap-card--request,
  .ap-demo.js-on.s3 .ap-cards .ap-card--routed,
  .ap-demo.js-on.s4 .ap-cards .ap-card--approved,
  .ap-demo.js-on.s6 .ap-cards .ap-card--order {
    opacity: 0; transform: none;
    transition: opacity .45s ease 0s, transform .45s ease 0s;
  }
  .ap-demo.js-on.is-out .ap-cards .ap-card { opacity: 0; transition: opacity .3s ease 0s; }
}