/*
 * Offers layer, loaded on the lander only (includes/lander.php) after
 * fwc-flow-v5.css: promo status line and discount row, the Step 3 payment
 * chooser, finance lines, the checkout-mode payment bar, and the two widget
 * states js/fwc-flow-offers.js toggles (plan block hidden, promo row locked).
 * Tokens follow fwc-flow-v5.css.
 */

/* ── Promo ─────────────────────────────────────────────────────────── */
.fwc-flow-total-row--discount span:last-child{color:#7A8759;font-weight:700}
.fwc-flow-total-note{font-family:'Gotham',sans-serif;font-size:12px;line-height:1.4;color:#333333;opacity:.7;margin:4px 0 0;text-align:right}
.fwc-flow-promo-status,.fwc-flow-pay-status{font-family:'Gotham',sans-serif;font-size:14px;line-height:1.45;color:#333333;margin:10px 0 0;padding-left:12px;border-left:2px solid rgba(51,51,51,.25)}
.fwc-flow-promo-status.is-error,.fwc-flow-pay-status.is-error{border-left-color:#D37872}
.fwc-flow-promo-status.is-ok,.fwc-flow-pay-status.is-ok{border-left-color:#7A8759}
.fwc-flow-promo-status.is-busy,.fwc-flow-pay-status.is-busy{opacity:.75}
.fwc-flow-promo-status.is-busy::after,.fwc-flow-pay-status.is-busy::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;border:2px solid rgba(51,51,51,.25);border-top-color:#333333;border-radius:50%;vertical-align:middle;animation:fwc-offers-spin .8s linear infinite}
@keyframes fwc-offers-spin{to{transform:rotate(360deg)}}
.fwc-flow-promo-input[disabled]{opacity:.6}

/* ── Finance lines (hero, pass card, empty card) ───────────────────── */
.fwc-finance-line{white-space:normal}
.fwc-finance-line[hidden]{display:none}

/* ── Step 3 chooser ────────────────────────────────────────────────── */
.fwc-flow-pay{margin-top:22px;padding-top:18px;border-top:1px solid rgba(51,51,51,.12)}
.fwc-flow-pay .fwc-flow-eyebrow--plain{margin-bottom:10px}
/* Two stacked rows on the white the summary lines use; a drawn radio (the
   theme strips the native one), the display face for the amount. */
.fwc-flow-pay-options{display:flex;flex-direction:column;gap:10px}
.fwc-flow-pay-opt{position:relative;display:flex;align-items:flex-start;gap:14px;margin:0;padding:16px 18px;background:transparent;border:1px solid rgba(51,51,51,.3);border-radius:0;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.fwc-flow-pay-opt:hover{border-color:#404742}
.fwc-flow-pay-opt.is-selected{border-color:#404742;box-shadow:inset 0 0 0 1px #404742}
.fwc-flow-pay-opt.is-disabled{cursor:not-allowed;background:transparent}
.fwc-flow-pay-opt.is-disabled:hover{border-color:rgba(51,51,51,.3)}
.fwc-flow-pay-opt.is-disabled .fwc-flow-pay-opt-title,.fwc-flow-pay-opt.is-disabled .fwc-flow-pay-opt-dot{opacity:.45}
.fwc-flow-pay-opt input[type="radio"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
.fwc-flow-pay-opt:has(input:focus-visible){outline:2px solid #E68D8A;outline-offset:2px}
.fwc-flow-pay-opt-dot{flex:none;position:relative;width:20px;height:20px;margin-top:1px;border:2px solid #404742;border-radius:50%;background:transparent}
.fwc-flow-pay-opt.is-selected .fwc-flow-pay-opt-dot::after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:#404742}
.fwc-flow-pay-opt-body{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:3px;align-items:baseline;font-family:'Gotham',sans-serif;color:#333333}
.fwc-flow-pay-opt-title{font-size:15px;font-weight:700;line-height:1.3}
.fwc-flow-pay-opt-amt{font-family:'Min Sans',sans-serif;font-size:22px;font-weight:700;line-height:1;white-space:nowrap;text-align:right;color:#333333}
.fwc-flow-pay-opt-amt:empty{display:none}
.fwc-flow-pay-opt-sub{grid-column:1 / -1;font-size:13px;line-height:1.4;opacity:.7}
.fwc-flow-pay-opt-sub:empty{display:none}
.fwc-flow-pay-opt-reason{opacity:.85}
.fwc-flow-pay-terms{margin-top:12px}
.fwc-flow-pay-facts{list-style:disc;margin:0 0 6px;padding-left:20px;font-family:'Gotham',sans-serif;font-size:13px;line-height:1.5;color:#333333}
.fwc-flow-pay-facts li{margin:0 0 4px}
.fwc-flow-pay-terms .fwc-flow-toggle{min-height:32px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.fwc-flow-pay-terms-full{margin-top:8px;padding:12px 14px;background:transparent;border:1px solid rgba(51,51,51,.3);font-family:'Gotham',sans-serif;font-size:12px;line-height:1.55;color:#333333}
.fwc-flow-pay-terms-full p{margin:0 0 8px}
.fwc-flow-pay-terms-full p:last-child{margin-bottom:0}
.fwc-flow-pay-status{margin-top:12px}

/* ── Checkout-mode payment bar ─────────────────────────────────────── */
.fwc-pay-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#404742;color:#F7F8F4;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.fwc-pay-bar-inner{max-width:1100px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.fwc-pay-bar-text{font-family:'Gotham',sans-serif;font-size:14px;line-height:1.4;color:#F7F8F4;margin:0}
.fwc-pay-bar-label{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;opacity:.8;margin-right:4px}
.fwc-pay-bar .fwc-flow-strip-link{color:#F7F8F4}
body.fwc-pay-bar-on{padding-bottom:64px}
body.fwc-pay-bar-on .uncode-scroll-to-top,body.fwc-pay-bar-on .scroll-top{bottom:80px}

/* ── Widget states toggled by the offers module ────────────────────── */
/* Stock plan block off screen but in the DOM: React keeps owning it and
   .click() still works. Applied only after detectPlanBlock() found it. */
#squadup-checkout.fwc-offers-plan-hidden #payment-plan-container{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;opacity:0 !important;pointer-events:none !important}
/* Promo row read-only once our auto-apply is confirmed. */
#squadup-checkout.fwc-offers-promo-locked input[name="promo_codes"]{pointer-events:none;opacity:.6;background-color:#F7F8F4 !important}
/* Only the promo row's own Apply button. A bare `.row:has(input)` also matched
   SquadUp's outer .row.squadup-row-centered and greyed out Purchase / Edit Quantity. */
#squadup-checkout.fwc-offers-promo-locked .row:has(> div > input[name="promo_codes"]) > div > button{pointer-events:none;opacity:.5}

@media (max-width:640px){
  .fwc-flow-pay-opt{padding:14px}
  .fwc-flow-pay-opt-amt{font-size:19px}
  .fwc-pay-bar-inner{padding:10px 16px;flex-wrap:wrap}
  .fwc-pay-bar-text{font-size:13px}
  body.fwc-pay-bar-on{padding-bottom:80px}
}