/* V15 phone story after the seat map: checkout of section 7RS with offers (hotel,
   food & drinks, merch, tours), a visible confirmation, then the Michelle -> David transfer.
   The phone shows the Festival Sound store; the page text is Ticketero's. */

/* Page copy: three beats in the same place, one at a time. */
.journey-extras,.journey-confirm{position:absolute;z-index:4;top:22vh;left:7vw;max-width:600px;color:#fff;pointer-events:none}
.journey-extras{opacity:var(--extras-opacity,0);transform:translateY(var(--extras-y,0px))}
.journey-confirm{opacity:var(--confirm-copy-opacity,0);transform:translateY(var(--confirm-copy-y,0px))}
.journey-extras h2,.journey-confirm h2{font-size:clamp(56px,6.8vw,104px);line-height:.9;margin:0 0 25px;letter-spacing:-.075em;max-width:620px}
.journey-extras>p,.journey-confirm>p{font-size:clamp(18px,1.6vw,24px);font-weight:500;line-height:1.35;margin:0;max-width:470px}

/* Checkout screen inside the phone (reuses the .phone-addons surface). */
#transferir .phone-checkout{gap:12px}
#transferir .phone-checkout h3{font-size:24px;margin:4px 0 0}
.checkout-ticket{display:flex;flex-direction:column;gap:3px;padding:12px 13px;background:#27172f;color:#fff}
.checkout-ticket small{font-size:8px;font-weight:700;letter-spacing:.08em;color:#f48ab8}
.checkout-ticket strong{font-size:22px;letter-spacing:-.05em;line-height:1}
.checkout-ticket span{font-size:10px;font-weight:600;color:#ffffffb3}
#transferir .phone-checkout .phone-addon-option{min-height:44px;font-size:15px}
#transferir .phone-checkout .phone-addon-option b{position:relative;width:26px;height:26px;font-size:18px;background:color-mix(in srgb,#e63e85 calc(100% - var(--addon-added,0) * 100%),#27172f)}
.phone-addon-option b i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.phone-addon-option b .add{opacity:calc(1 - var(--addon-added,0))}
.phone-addon-option b .done{opacity:var(--addon-added,0);font-size:14px}
.checkout-pay{margin-top:auto;display:grid;place-items:center;height:42px;background:#27172f;color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em;transform:scale(calc(1 - .06 * var(--pay-press,0)));opacity:var(--pay-ready,0)}

/* Confirmation screen. */
.phone-confirm{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:14px;padding:44px 19px 22px;background:#f8f5f2;color:#27172f;opacity:var(--confirm-opacity,0);pointer-events:none}
.confirm-check{width:58px;height:58px;display:grid;place-items:center;background:#27172f;transform:scale(var(--check-scale,.4))}
.confirm-check svg{width:34px;height:34px;fill:none;stroke:#d7ff3a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:calc(40 * (1 - var(--check-draw,0)))}
.phone-confirm h3{font-size:30px;line-height:.95;letter-spacing:-.06em;margin:6px 0 4px}
.phone-confirm ul{list-style:none;margin:0;padding:0;border-top:1px solid #d5cdd3}
.phone-confirm li{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:38px;border-bottom:1px solid #d5cdd3;font-size:12px;font-weight:700}
.phone-confirm li b{font-size:11px;color:#8f5a77}
.phone-confirm>p{margin:auto 0 0;font-size:11px;font-weight:700;color:#675361}

@media(max-width:700px){
  .journey-extras,.journey-confirm{left:22px;right:22px;top:12vh;max-width:none}
  .journey-extras h2,.journey-confirm h2{font-size:clamp(38px,9.5vw,56px);max-width:340px}
  .journey-extras>p,.journey-confirm>p{font-size:16px;max-width:320px}
  #transferir .phone-checkout h3{font-size:16px}
  .checkout-ticket{padding:8px 9px}
  .checkout-ticket strong{font-size:15px}
  .checkout-ticket span,.checkout-ticket small{font-size:9px}
  #transferir .phone-checkout .phone-addon-option{min-height:30px;font-size:10px}
  #transferir .phone-checkout .phone-addon-option b{width:18px;height:18px;font-size:13px}
  .checkout-pay{height:28px;font-size:10px}
  .phone-confirm{padding:30px 12px 14px;gap:9px}
  .confirm-check{width:38px;height:38px}
  .confirm-check svg{width:22px;height:22px}
  .phone-confirm h3{font-size:20px}
  .phone-confirm li{min-height:26px;font-size:9px}
  .phone-confirm li b,.phone-confirm>p{font-size:9px}
  .phone-confirm li{font-size:10px}
}
/* Phone UI floor on phones: 9px CSS = ~10.4px on screen at the phone's 1.15 scale (390x844). */
@media(max-width:700px){
  #transferir .phone-addons header{font-size:9px}
  #transferir .phone-addons header span{font-size:9px;letter-spacing:.03em}
  #transferir .phone-top,#transferir .phone-top .wallet-label{font-size:9px}
  #transferir .ticket-face small{font-size:9px}
  #transferir .ticket-face p{font-size:9px}
  #transferir .holder small{font-size:9px}
  #transferir .ticket-transfer>small{font-size:9px;letter-spacing:0;line-height:1.25}
  #transferir .ticket-transfer p{font-size:10px}
}


/* Wallet ticket: keep FESTIVAL inside the card at every phone size. */
#transferir .ticket-face h3{font-size:clamp(28px,15cqw,46px)}
#transferir .phone-screen{container-type:inline-size}