/* Écran de fin d'aperçu (« paywall »), le même sur /my-reading et /unlock (ec_rf_open_screen, templates/unlock_offer.php) :
   les cinq cartes du tirage, le titre, l'offre anniversaire (−50 %, compte à rebours, prix barré), le paiement en un
   geste (Apple Pay / Google Pay de Stripe, puis « Pay by card »), la réassurance et Trustpilot.
   Sans portefeuille disponible, « Pay by card » est le bouton principal (rose) ; avec un portefeuille (.has-wallet,
   posé par funnel-unlock.js), le bouton noir du portefeuille passe devant et la carte devient secondaire.
   Le paywall tient dans le lecteur vertical (≈ 340 × 610 px sur téléphone) : lecteur bas → cartes plus petites,
   sans la ligne « Your five cards are ready » (requêtes de conteneur sur .rf-cut--open).
   Classes propres (rf-open__*) : aucune règle des anciens écrans de coupure (rf-cut__*) ne s'y applique. */

.rf-player .rf-cut.rf-cut--open {
  padding:12px; place-items:center; container-type:size;
  background:linear-gradient(180deg, rgba(47,18,76,.22) 0%, rgba(47,18,76,.62) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(1.1); backdrop-filter:blur(7px) saturate(1.1);
}

.rf-open {
  width:100%; min-width:0; max-width:348px; margin:auto; padding:16px 16px 8px;
  border:1px solid rgba(196,154,88,.45); border-radius:18px; background:#fffaf4;
  box-shadow:0 24px 60px -24px rgba(20,4,30,.65);
  text-align:center; color:#35273b; font:400 14px/1.45 var(--ec-sans, 'Archivo', system-ui, sans-serif);
  animation:rf-open-in .45s ease both;
}

/* Les cinq cartes, en éventail */
.rf-open__spread { display:flex; justify-content:center; align-items:flex-end; height:66px; margin:0 0 10px; }
.rf-open__card {
  --lift:0;
  position:relative; display:grid; place-items:center; flex:0 0 auto; width:42px; height:58px; margin:0 -3px;
  border:1px solid #c9a35c; border-radius:6px; background:linear-gradient(160deg, #4d1b66 0%, #2a0d3d 100%);
  box-shadow:0 8px 16px -8px rgba(30,6,45,.7), inset 0 0 0 3px rgba(201,163,92,.16);
  color:#e8c983; transform-origin:50% 100%;
  transform:translateY(calc(var(--lift) * -1px)) rotate(calc((var(--i) - 2) * 7deg));
  animation:rf-open-card .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.12s + var(--i) * .07s);
}
.rf-open__card:nth-child(2), .rf-open__card:nth-child(4) { --lift:5; }
.rf-open__card:nth-child(3) { --lift:8; z-index:1; box-shadow:0 10px 22px -8px rgba(30,6,45,.8), 0 0 0 3px rgba(232,201,131,.25), inset 0 0 0 3px rgba(201,163,92,.16); }
.rf-open__card .ec-card-illustration { width:30px; height:36px; }
.rf-open__card small { display:none; }

.rf-open__kicker {
  display:inline-flex; align-items:center; gap:6px; margin:0;
  font:600 11px/1.2 var(--ec-sans, 'Archivo', system-ui, sans-serif); letter-spacing:.08em; text-transform:uppercase; color:#9a6a2c;
}
.rf-open__kicker .rf-ico { width:12px; height:12px; }
.rf-open__title { margin:6px 0 12px; font:600 20px/1.18 var(--ec-serif, 'Fraunces', Georgia, serif); color:#2f124c; text-wrap:balance; }

/* L'offre anniversaire : −50 %, compte à rebours, formule, prix barré et prix payé */
.rf-open__deal {
  margin:0 0 12px; padding:9px 12px 10px; border:1px solid #efd3a4; border-radius:12px;
  background:linear-gradient(180deg, #fff1dc 0%, #fff8ee 100%); text-align:left;
}
.rf-open__promo {
  display:flex; align-items:center; gap:8px; margin:0 0 6px;
  font:700 11px/1.2 var(--ec-sans, 'Archivo', system-ui, sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#9a5a1c;
}
.rf-open__promo[hidden] { display:none; }
.rf-open__off {
  flex:0 0 auto; padding:4px 7px 3px; border-radius:6px; background:#e0127f; color:#fff;
  font:800 14px/1 var(--ec-sans, 'Archivo', system-ui, sans-serif); letter-spacing:0;
  box-shadow:0 4px 10px -4px rgba(209,12,121,.7);
}
.rf-open__promo-name { min-width:0; }
.rf-open__ends {
  display:flex; align-items:center; gap:5px; margin:7px 0 0; padding-top:7px; border-top:1px dashed #ecd2a8;
  font:500 12px/1.2 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#8a2a5c;
}
.rf-open__ends[hidden] { display:none; }
.rf-open__ends .rf-ico { flex:0 0 auto; width:13px; height:13px; }
.rf-open .rf-open__ends .rf-offer-clock { font-weight:700; font-variant-numeric:tabular-nums; color:inherit; background:none; padding:0; }
/* Prix longs (« 19,99 $ US », « $55.900 COP ») : les montants passent sous la formule plutôt que d'élargir la carte. */
.rf-open__price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; margin:0; }
.rf-open__item { flex:1 0 auto; font:600 14px/1.25 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#2f124c; }
.rf-open__amounts { display:inline-flex; align-items:baseline; gap:7px; flex:0 0 auto; margin-left:auto; white-space:nowrap; }
.rf-open__amounts s { font-size:13.5px; color:#8b7a8a; text-decoration-thickness:1.5px; }
.rf-open__amounts s[hidden] { display:none; }
.rf-open__amounts b { font:800 22px/1 var(--ec-sans, 'Archivo', system-ui, sans-serif); letter-spacing:-.01em; color:#2f124c; }

/* Paiement : portefeuille (Stripe Express Checkout Element, replié tant qu'aucun n'est disponible), puis la carte */
.rf-open__pay { display:grid; gap:8px; }
.rf-open__wallet { max-height:0; overflow:hidden; visibility:hidden; transition:max-height .3s ease; }
.rf-open__wallet.is-on { max-height:120px; visibility:visible; }
.rf-open.is-busy .rf-open__wallet { opacity:.55; pointer-events:none; }

.rf-open .rf-open__bycard {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:50px; margin:0; padding:12px 16px;
  border:0; border-radius:10px; background:linear-gradient(180deg, #e0127f 0%, #c3066a 100%); color:#fff; cursor:pointer;
  font:700 16px/1.2 var(--ec-sans, 'Archivo', system-ui, sans-serif);
  box-shadow:0 12px 24px -12px rgba(209,12,121,.8), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
  animation:rf-open-glow 2.6s ease-in-out 1.2s infinite;
}
.rf-open .rf-open__bycard .rf-ico { width:20px; height:20px; }
.rf-open .rf-open__bycard:hover { background:linear-gradient(180deg, #d10c79 0%, #aa0656 100%); }
.rf-open .rf-open__bycard:active { transform:translateY(1px); }
.rf-open .rf-open__bycard:focus-visible { outline:2px solid #79518e; outline-offset:2px; }
.rf-open .rf-open__bycard[disabled] { cursor:progress; opacity:.6; }
/* Portefeuille disponible : il passe devant, la carte devient secondaire */
.rf-open.has-wallet .rf-open__bycard {
  min-height:48px; padding:11px 16px; border:1.5px solid #cdb7cf; background:#fff; color:#3d1d57;
  font-size:15px; box-shadow:none; animation:none;
}
.rf-open.has-wallet .rf-open__bycard:hover { background:#f8f1f8; border-color:#9a6f9c; }

/* Aperçu de design (?demo=1) : bouton témoin, puis le bouton officiel de Google / Apple (rf-open__official), jamais cliquable */
.rf-open__mock {
  display:flex; align-items:center; justify-content:center; gap:5px; width:100%; height:48px; margin:0; padding:0 16px;
  border:0; border-radius:10px; background:#000; color:#fff; cursor:default; opacity:1;
  font:500 16px/1 -apple-system, system-ui, 'Archivo', sans-serif;
}
.rf-open__mock b { font-weight:700; letter-spacing:-.01em; }
.rf-open__official { height:48px; pointer-events:none; }
.rf-open__official > * { width:100%; height:100%; }
.rf-open__official apple-pay-button {
  display:block; --apple-pay-button-width:100%; --apple-pay-button-height:48px; --apple-pay-button-border-radius:10px;
  --apple-pay-button-padding:0; --apple-pay-button-box-sizing:border-box;
}

.rf-open__error { margin:0; padding:8px 10px; border:1px solid #f1c4cf; border-radius:8px; background:#fff3f5; font-size:12.5px; line-height:1.4; color:#a1123a; text-align:left; }
.rf-open__error[hidden] { display:none; }

/* Réassurance */
.rf-open__guarantee {
  display:flex; align-items:center; justify-content:center; gap:6px; margin:10px 0 0;
  font:600 12.5px/1.3 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#35273b;
}
.rf-open__guarantee .rf-ico { flex:0 0 auto; width:15px; height:15px; color:#2f8f5b; }
.rf-open__trust { display:flex; flex-wrap:wrap; justify-content:center; gap:3px 12px; margin:5px 0 0; padding:0; list-style:none; }
.rf-open__trust li { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; line-height:1.3; color:#6b556b; }
.rf-open__trust .rf-ico { flex:0 0 auto; width:12px; height:12px; color:#2f8f5b; }
.rf-open .rf-trustpilot { margin-top:10px; padding-top:10px; }

.rf-open__links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 6px; margin:6px 0 0; color:#a08aa0; }
.rf-open .rf-open__links a {
  padding:5px 4px; font:600 12.5px/1.3 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#5b146f;
  text-decoration:underline; text-underline-offset:3px;
}
.rf-open .rf-open__replay {
  display:inline-flex; align-items:center; gap:5px; padding:5px 4px; border:0; background:none; cursor:pointer;
  font:500 12.5px/1.3 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#765069; text-decoration:underline; text-underline-offset:3px;
}
.rf-open .rf-open__replay .rf-ico { width:13px; height:13px; }

/* Grand lecteur (ordinateur) : cartes un peu plus grandes, avec leur nom */
@media (min-width:960px) {
  .rf-open { max-width:380px; padding:18px 18px 8px; }
  .rf-open__spread { height:86px; margin-bottom:10px; }
  .rf-open__card { width:52px; height:76px; margin:0 -2px; align-content:center; gap:3px; }
  .rf-open__card .ec-card-illustration { width:34px; height:40px; }
  .rf-open__card small { display:block; font:600 7px/1 var(--ec-sans, 'Archivo', system-ui, sans-serif); letter-spacing:.08em; text-transform:uppercase; color:#e8c983; }
  .rf-open__title { font-size:22px; }
}

/* Lecteur bas (hauteur utile du lecteur, quelle que soit la largeur d'écran) : l'offre, les boutons de paiement et la
   réassurance restent visibles sans défiler ; le décor cède la place d'abord (ligne « five cards », puis éventail
   réduit, puis sans éventail). Mesuré en EN/ES/FR sur 390×844, 375×667, 360×740, 1280×720 et 1440×900. */
@container (max-height:650px) {
  .rf-open { padding-top:14px; }
  .rf-open__kicker { display:none; }
  .rf-open__title { margin-top:0; }
}
@container (max-height:590px) {
  .rf-open__spread { height:48px; margin-bottom:8px; }
  .rf-open__card { width:34px; height:46px; margin:0 -2px; border-radius:5px; }
  .rf-open__card .ec-card-illustration { width:24px; height:28px; }
  .rf-open__card small { display:none; }
  .rf-open__title { margin-bottom:10px; font-size:19px; }
  .rf-open__deal { margin-bottom:10px; padding:8px 11px 8px; }
  .rf-open__ends { margin-top:6px; padding-top:6px; }
  .rf-open__guarantee { margin-top:8px; }
  .rf-open .rf-trustpilot { margin-top:8px; padding-top:8px; }
  .rf-open .rf-trustpilot img { width:70px; }
  .rf-open .rf-trustpilot__copy span { display:none; }
  .rf-open__links { margin-top:2px; }
}
@container (max-height:500px) {
  .rf-open { padding-top:12px; }
  .rf-open__spread { display:none; }
}

/* Bouton d'achat mis en avant après « More options » (funnel-unlock.js, classe posée 2,4 s). */
.rf-btn.is-nudge, [data-rf-sticky] button.is-nudge { animation:rf-nudge 1.2s ease-in-out 2; }

@keyframes rf-nudge {
  0%, 100% { transform:none; }
  25% { transform:scale(1.05); box-shadow:0 0 0 6px rgba(224,18,127,.22), 0 14px 30px -10px rgba(209,12,121,.75); }
  50% { transform:scale(.99); }
  70% { transform:scale(1.02); box-shadow:0 0 0 3px rgba(224,18,127,.14), 0 10px 24px -12px rgba(209,12,121,.6); }
}
@keyframes rf-open-in { from { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes rf-open-card { from { opacity:0; transform:translateY(18px) rotate(0deg); } }
@keyframes rf-open-glow {
  0%, 100% { box-shadow:0 12px 24px -12px rgba(209,12,121,.8), inset 0 1px 0 rgba(255,255,255,.25); }
  50% { box-shadow:0 12px 30px -8px rgba(209,12,121,.95), 0 0 0 4px rgba(224,18,127,.12), inset 0 1px 0 rgba(255,255,255,.25); }
}
@media (prefers-reduced-motion:reduce) {
  .rf-open, .rf-open__card, .rf-open .rf-open__bycard { animation:none; }
  .rf-open__wallet { transition:none; }
  .rf-btn.is-nudge, [data-rf-sticky] button.is-nudge { animation:none; outline:3px solid rgba(224,18,127,.45); outline-offset:3px; }
}

/* Fenêtre de paiement : e-mail du quiz déjà connu, en une ligne (« Change » ouvre le champ) */
.rf-pay__to {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e3d6e6; border-radius:8px; background:#fbf7fb;
}
.rf-pay__to[hidden], .rf-pay__email[hidden] { display:none; }
.rf-pay__to > .rf-ico { flex:0 0 auto; width:18px; height:18px; color:#79518e; }
.rf-pay__to-text { display:grid; flex:1 1 auto; min-width:0; text-align:left; }
.rf-pay__to-text small { font-size:11.5px; line-height:1.3; color:#7a6479; }
.rf-pay__to-text b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 14.5px/1.35 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#2f124c; }
.rf-pay__to-edit {
  flex:0 0 auto; padding:6px 4px; border:0; background:none; cursor:pointer;
  font:600 13px/1.2 var(--ec-sans, 'Archivo', system-ui, sans-serif); color:#5b146f; text-decoration:underline; text-underline-offset:3px;
}
.rf-pay__to-edit[disabled] { cursor:not-allowed; opacity:.5; }
.rf-pay__email { display:grid; gap:12px; }