/* ==========================================================================
   vxp — Netflix-style subscription plans + TVOD checkout for styles/default
   Applies on /subscription/plans (#plansMain.vxp-plans) and
   /subscription/checkout (#plansMain.vxp-checkout). A select-then-Next plan
   picker with gradient plan headers, a STEP x OF y eyebrow, restyled gateway
   list, card form and summary, and shimmer plan skeletons. Consumes only
   existing customizer variables (--vod-*); tints via color-mix with rgba
   fallbacks. vodlix.css is untouched and loads before this file; its forced
   chrome (.card/.radioCard/.form-control !important) is beaten with scoped
   !important, wallet.css precedent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared shell
   -------------------------------------------------------------------------- */
#plansMain {
  /* padding-block only — the sides keep .insidePadding's 3% */
  padding-block: 32px 72px;
}
/* neutralise ONLY the outer Bootstrap card shell (direct child) — inner
   .card.card2 radio cards + summary get their own treatment below */
#plansMain > .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
#plansMain.vxp-checkout > .card {
  max-width: 1060px;
  margin-inline: auto;
}
/* .card is a Bootstrap column flexbox — without width:100% the auto cross-axis
   margins shrink-wrap this to its content and the plan grid collapses to one
   column */
#plansMain.vxp-plans .stepperHolder {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Page header — eyebrow (STEP x OF y) + title + sub
   -------------------------------------------------------------------------- */
.vxp-head {
  margin-bottom: 38px;
}
.vxp-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vod-grey-text);
}
.vxp-head h2 {
  margin: 0 0 6px;
  color: var(--vod-white-color);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
}
.vxp-head p:not(.vxp-eyebrow) {
  margin: 0;
  color: var(--vod-grey-text);
  font-size: 14px;
}
/* plans-info public page CTA */
.vxp-cta {
  max-width: 440px;
  margin: 0 auto 26px;
}

/* --------------------------------------------------------------------------
   Step 1 — plan cards (select-then-Next)
   -------------------------------------------------------------------------- */
.vxp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  justify-content: center;
  gap: 20px;
  margin-bottom: 34px;
}
/* the element keeps the legacy .planBox class for JS compat; vxp owns the look */
#plansMain .planBox.vxp-plan {
  display: flex;
  flex-direction: column;
  text-align: start;
  padding: 8px 8px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
  /* opaque by construction */
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000;
  backdrop-filter: none;
  cursor: pointer;
  transition: border-color var(--vxl-dur-1) var(--vxl-ease), box-shadow var(--vxl-dur-1) var(--vxl-ease);
}
/* static hover — brighten the border only, no lift (cards were jumping) */
#plansMain .planBox.vxp-plan:hover {
  border-color: color-mix(in srgb, var(--vod-primary) 65%, transparent);
}
#plansMain .planBox.vxp-plan:focus-visible {
  outline: 2px solid var(--vod-primary);
  outline-offset: 2px;
}
#plansMain .planBox.vxp-plan.is-selected {
  border-color: var(--vod-primary);
  box-shadow:
    0 0 0 1px var(--vod-primary),
    0 12px 30px rgba(0, 0, 0, 0.45);
}
/* the user's current subscribed plan — informative, not selectable */
#plansMain .planBox.vxp-plan.is-current {
  opacity: 0.75;
  cursor: default;
}
#plansMain .planBox.vxp-plan.is-current:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
}

/* gradient plan header, Netflix-style */
.vxp-plan__head {
  position: relative;
  padding: 16px 14px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(120, 120, 120, 0.35), rgba(60, 60, 60, 0.2));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--vod-primary) 30%, #1c1c1c),
    color-mix(in srgb, var(--vod-primary) 12%, #101010));
  transition: background var(--vxl-dur-1) var(--vxl-ease);
}
.is-selected .vxp-plan__head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--vod-primary) 65%, #000),
    color-mix(in srgb, var(--vod-primary) 25%, #000));
}
.vxp-plan__head h2 {
  margin: 0;
  color: var(--vod-white-color);
  font-size: 1.05rem;
  font-weight: 700;
  padding-inline-end: 28px;
}
.vxp-plan__duration {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--vod-white-color) 72%, transparent);
}
.vxp-plan__check {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  font-size: 22px;
  line-height: 1;
  color: var(--vod-white-color);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--vxl-dur-1) var(--vxl-ease), transform var(--vxl-dur-1) var(--vxl-ease);
}
.is-selected .vxp-plan__check {
  opacity: 1;
  transform: scale(1);
}

/* body */
.vxp-plan__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 10px;
}
.vxp-plan__price {
  margin: 0 0 14px;
  color: var(--vod-white-color);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}
.vxp-plan__feat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--vod-white-color) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 6%, transparent);
  border-bottom-color: color-mix(in srgb, var(--vod-white-color) 6%, transparent);
}
.vxp-plan__feat:last-of-type {
  border-bottom: 0;
}
.vxp-plan__feat .mdi,
.vxp-plan__feat .vxm-ico {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}
.vxp-plan__feat .mdi-check {
  color: var(--vod-success, #46d369);
}
.vxp-plan__feat .mdi-close {
  color: var(--vod-grey-text);
}
.vxp-plan__trial {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--vod-grey-text);
}
/* "Current plan" pill */
.vxp-plan__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  align-self: flex-start;
  background-color: color-mix(in srgb, var(--vod-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 14%, transparent);
  border-color: color-mix(in srgb, var(--vod-primary) 45%, transparent);
  color: var(--vod-white-color);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Next bar under the grid
   -------------------------------------------------------------------------- */
.vxp-next {
  max-width: 440px;
  margin: 8px auto 0;
  text-align: center;
}
#plansMain .vxp-next__btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--vxl-radius-pill, 999px); /* DS pill */
  font-size: 16px;
  font-weight: 600;
  background-color: var(--vod-primary);
  border: 1px solid var(--vod-primary);
  color: var(--vod-btn-primary-text, #fff);
  transition: filter var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .vxp-next__btn:hover:not(:disabled),
#plansMain .vxp-next__btn:focus:not(:disabled) {
  filter: brightness(1.08);
  color: var(--vod-btn-primary-text, #fff);
}
#plansMain .vxp-next__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vxp-next__hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--vod-grey-text);
}

/* --------------------------------------------------------------------------
   Skeletons — shimmer plan cards while /paid/packages loads
   (.vxs-line shimmer + reduced-motion live in cards.css)
   -------------------------------------------------------------------------- */
.vxp-skgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  justify-content: center;
  gap: 20px;
}
.vxp-skcard {
  min-height: 420px;
  padding: 8px 8px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000;
}
.vxp-skcard .vxs-line {
  margin: 0 10px 14px;
}
.vxp-skcard .vxp-sk__head {
  height: 74px;
  margin: 0 0 22px;
  border-radius: 8px;
}
.vxp-skcard .vxp-sk__price {
  height: 26px;
  width: 45%;
}
.vxp-skcard .vxp-sk__short {
  width: 60%;
}

/* --------------------------------------------------------------------------
   Step 2 — payment gateway radio cards (CSS-only over legacy markup)
   -------------------------------------------------------------------------- */
#plansMain .paymentMethods > h2,
#plansMain .step1 > h2 {
  color: var(--vod-white-color);
  font-weight: 600;
}
#plansMain .card.card2.radioCard {
  min-height: 68px;
  justify-content: center;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent) !important;
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color var(--vxl-dur-1) var(--vxl-ease), background-color var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .card.card2.radioCard:hover {
  border-color: color-mix(in srgb, var(--vod-white-color) 30%, transparent) !important;
}
#plansMain .card.card2.radioCard.active {
  border: 1px solid var(--vod-primary) !important;
  background:
    linear-gradient(color-mix(in srgb, var(--vod-primary) 10%, var(--vod-card-bg)),
                    color-mix(in srgb, var(--vod-primary) 10%, var(--vod-card-bg))),
    #000 !important;
  box-shadow: 0 0 0 1px var(--vod-primary) !important;
}
#plansMain .radioCard .form-check-input[type="radio"] {
  accent-color: var(--vod-primary);
}
#plansMain .radioCard .form-check-label {
  color: var(--vod-white-color);
  font-size: 14.5px;
  font-weight: 500;
  align-items: center;
}
/* text-logo gateways (Square, PayTR render a <strong class="h4">) */
#plansMain .radioCard .paymentLogoImg strong {
  color: var(--vod-white-color);
}

/* the step-2 Continue button (jQuery writes its label — keep text-only) */
#plansMain .continueBTN {
  padding: 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  transition: filter var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .continueBTN:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   Wallet strip (plans step 2 bottom + checkout summary column)
   -------------------------------------------------------------------------- */
#plansMain .vxp-wallet {
  margin-top: 26px;
  padding: 16px;
  text-align: start;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000;
  color: var(--vod-grey-text);
  font-size: 13.5px;
}
#plansMain .vxp-wallet strong {
  color: var(--vod-white-color);
  font-weight: 700;
}
/* secondary-style wallet buttons — !important beats vodlix.css .btn.btn-primary */
#plansMain .vxp-wallet .btn-primary {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 12%, transparent) !important;
  background-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 18%, transparent) !important;
  color: var(--vod-white-color) !important;
  transition: background-color var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .vxp-wallet .btn-primary:hover,
#plansMain .vxp-wallet .btn-primary:focus {
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 20%, transparent) !important;
  background-color: color-mix(in srgb, var(--vod-white-color) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 18%, transparent) !important;
  color: var(--vod-white-color) !important;
}

/* --------------------------------------------------------------------------
   Card form (plans .step3 / checkout .step2)
   -------------------------------------------------------------------------- */
#plansMain .paymentHolder {
  max-width: 560px;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000;
}
#plansMain .paymentHolder h3 {
  color: var(--vod-white-color);
  font-weight: 600;
}
#plansMain .paymentHolder p {
  color: var(--vod-grey-text);
  font-size: 12.5px;
  line-height: 1.55;
}
#plansMain .form-control.form-controlBg,
#plansMain .vxp-summary .form-control {
  height: 50px;
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 6%, transparent) !important;
  background-color: color-mix(in srgb, var(--vod-white-color) 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 16%, transparent) !important;
  border-radius: 8px !important;
  color: var(--vod-white-color) !important;
  font-size: 15px;
  box-shadow: none !important;
}
#plansMain .form-control.form-controlBg::placeholder,
#plansMain .vxp-summary .form-control::placeholder {
  color: var(--vod-placeholder-color, var(--vod-grey-text));
}
#plansMain .form-control.form-controlBg:focus,
#plansMain .vxp-summary .form-control:focus {
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 9%, transparent) !important;
  background-color: color-mix(in srgb, var(--vod-white-color) 9%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-primary) 70%, transparent) !important;
}
#plansMain .paymentHolder .form-check-input[type="checkbox"] {
  accent-color: var(--vod-primary);
}
#plansMain .paymentHolder .form-check-label {
  color: var(--vod-white-color);
  font-size: 13.5px;
}
#plansMain .paymentHolder .btn-link {
  color: var(--vod-grey-text);
  font-weight: 600;
  transition: color var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .paymentHolder .btn-link:hover {
  color: var(--vod-white-color);
}
#plansMain .paymentHolder .btn-primary {
  padding: 12px 26px;
  border-radius: var(--vxl-radius-pill, 999px); /* DS pill */
  font-weight: 600;
  background-color: var(--vod-primary);
  border-color: var(--vod-primary);
  color: var(--vod-btn-primary-text, #fff);
  transition: filter var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .paymentHolder .btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  color: var(--vod-btn-primary-text, #fff);
}
#plansMain .paymentHolder .btn-primary:disabled {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Summary block (shared Vue component)
   -------------------------------------------------------------------------- */
#plansMain .vxp-summary {
  position: sticky;
  top: 88px;
  padding: 22px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent) !important;
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#plansMain .vxp-summary__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vod-grey-text);
}
#plansMain .vxp-summary hr {
  border-top: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent);
  border-top-color: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
}
#plansMain .vxp-summary__row {
  color: var(--vod-grey-text);
  font-size: 14px;
}
#plansMain .vxp-summary__row > span:last-child,
#plansMain .vxp-summary__row > div:last-child {
  color: var(--vod-white-color);
  font-weight: 600;
}
#plansMain .vxp-summary__row--discount > span:last-child,
#plansMain .vxp-summary__row--discount > div:last-child {
  color: var(--vod-success, #46d369);
}
#plansMain .vxp-summary__row--total {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent);
  border-top-color: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
  color: var(--vod-white-color);
  font-size: 15px;
  font-weight: 700;
}
#plansMain .vxp-summary__row--total > span:last-child,
#plansMain .vxp-summary__row--total > div:last-child {
  font-weight: 700;
}
#plansMain .vxp-summary__change {
  align-self: center;
  flex: 0 0 auto;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 12%, transparent);
  background-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 18%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 18%, transparent);
  color: var(--vod-white-color);
  transition: background-color var(--vxl-dur-1) var(--vxl-ease);
}
#plansMain .vxp-summary__change:hover {
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 20%, transparent);
  background-color: color-mix(in srgb, var(--vod-white-color) 20%, transparent);
  color: var(--vod-white-color);
}
#plansMain .vxp-summary .btn-link {
  color: var(--vod-primary);
  font-weight: 600;
}
/* the package-title row: title wraps, Change pill stays put */
#plansMain .vxp-summary .btn-link.whiteColor {
  color: var(--vod-white-color);
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  white-space: normal;
  margin-inline-end: 10px;
}

/* breathing room between the summary and the payment column on desktop */
@media (min-width: 992px) {
  #plansMain .step2 > .row > .col-lg-4,
  #plansMain.vxp-checkout .row > .col-lg-4 {
    padding-inline-end: 30px;
  }
}

/* --------------------------------------------------------------------------
   Empty states + processing overlay
   -------------------------------------------------------------------------- */
.vxp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 20px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 7%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 7%, transparent);
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000;
}
.vxp-empty .mdi,
.vxp-empty .vxm-ico {
  font-size: 42px;
  line-height: 1;
  color: color-mix(in srgb, var(--vod-grey-text) 70%, transparent);
}
.vxp-empty p {
  margin: 0;
  color: var(--vod-grey-text);
  font-size: 14px;
}
#plansMain .overlayPage {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   Payment result pages (/payment/success, /payment/failed)
   -------------------------------------------------------------------------- */
.vxp-result {
  max-width: 520px;
  margin: 56px auto;
  padding: 44px 36px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
  background:
    linear-gradient(var(--vod-card-bg), var(--vod-card-bg)),
    #000;
}
.vxp-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  font-size: 40px;
  line-height: 1;
}
.vxp-result__icon .mdi,
.vxp-result__icon .vxm-ico {
  line-height: 1;
}
.vxp-result__icon--ok {
  color: var(--vod-success, #46d369);
  background-color: rgba(70, 211, 105, 0.12);
  background-color: color-mix(in srgb, var(--vod-success, #46d369) 14%, transparent);
  border: 1px solid rgba(70, 211, 105, 0.4);
  border-color: color-mix(in srgb, var(--vod-success, #46d369) 40%, transparent);
}
.vxp-result__icon--fail {
  color: var(--vod-danger, #e50914);
  background-color: rgba(229, 9, 20, 0.12);
  background-color: color-mix(in srgb, var(--vod-danger, #e50914) 14%, transparent);
  border: 1px solid rgba(229, 9, 20, 0.4);
  border-color: color-mix(in srgb, var(--vod-danger, #e50914) 40%, transparent);
}
.vxp-result__icon--wait {
  color: var(--vod-white-color);
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent);
  background-color: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 14%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 14%, transparent);
}
.vxp-result__title {
  margin: 0 0 8px;
  color: var(--vod-white-color);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
}
.vxp-result__sub {
  margin: 0 0 26px;
  color: var(--vod-grey-text);
  font-size: 14px;
  line-height: 1.55;
}
.vxp-result__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.vxp-result .vxp-result__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background-color: var(--vod-primary) !important;
  border: 1px solid var(--vod-primary) !important;
  color: var(--vod-btn-primary-text, #fff) !important;
  transition: filter var(--vxl-dur-1) var(--vxl-ease);
}
.vxp-result .vxp-result__cta:hover,
.vxp-result .vxp-result__cta:focus {
  filter: brightness(1.08);
  text-decoration: none;
}
.vxp-result .vxp-result__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 12%, transparent) !important;
  background-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 18%, transparent) !important;
  color: var(--vod-white-color) !important;
  transition: background-color var(--vxl-dur-1) var(--vxl-ease);
}
.vxp-result .vxp-result__ghost:hover,
.vxp-result .vxp-result__ghost:focus {
  background-color: color-mix(in srgb, var(--vod-white-color, #fff) 20%, transparent) !important;
  background-color: color-mix(in srgb, var(--vod-white-color) 20%, transparent) !important;
  text-decoration: none;
}
/* app-download strip under the success card */
.vxp-result__apps {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent);
  border-top-color: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
}
.vxp-result__apps h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vod-grey-text);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #plansMain {
    padding-block-start: 16px;
  }
  .vxp-grid,
  .vxp-skgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vxp-next {
    position: sticky;
    bottom: 0;
    z-index: 5;
    max-width: none;
    margin: 0 -15px;
    padding: 12px 16px 16px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9) 35%);
  }
  #plansMain .vxp-summary {
    position: static;
  }
  #plansMain .paymentHolder {
    padding: 18px 16px;
  }
  /* let long gateway labels wrap (vodlix.css forces nowrap) */
  #plansMain .radioCard .form-check-label {
    white-space: normal !important;
  }
  .vxp-result {
    margin: 28px auto;
    padding: 34px 22px;
  }
  .vxp-result__actions .vxp-result__cta,
  .vxp-result__actions .vxp-result__ghost {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl #plansMain .planBox.vxp-plan,
body.rtl #plansMain .vxp-wallet {
  text-align: right;
}
body.rtl .vxp-plan__feat {
  flex-direction: row;
}

/* ── Currency segmented control ──────────────────────────────────────────────
   Sits under the plans heading. Deliberately quiet: it is a qualifier on the
   prices below, not an action — so it reads as a control the eye can skip until
   it is wanted, and never competes with the plan cards or the CTA.

   Built from the same tokens as the rest of this page, and reuses the pill
   radius the site nav already uses, so it looks native rather than adjacent. */
.vxp-cur {
  display: inline-flex;
  /* The control is no longer only on the plans page: it also sits inside the
     rental gate (a narrow col-lg-4 card with p-5) and the wallet top-up header.
     Without wrapping, a tenant selling in four currencies overflows that card
     and the last code is clipped mid-word. */
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 4px;
  /* Breathing room on BOTH sides: the control sits above the heading on the
     checkout and below it on the plans and wallet pages, so a top-only margin
     left it crowding whichever element followed it. */
  margin-top: 18px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--vod-card-bg);
  border-radius: 999px;
}
.vxp-cur__btn {
  /* Horizontal padding shrinks before the pill does, so four codes still fit
     two-up in the narrowest container we put this in. */
  padding: 7px clamp(10px, 4vw, 18px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--vod-grey-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  /* Motion is expected on every interactive element in this UI. */
  transition: background-color var(--vxl-dur-1) var(--vxl-ease), color var(--vxl-dur-1) var(--vxl-ease);
}
.vxp-cur__btn:hover:not(.is-active) {
  color: var(--vod-white-color);
}
.vxp-cur__btn:focus-visible {
  outline: 2px solid var(--vod-primary);
  outline-offset: 2px;
}
.vxp-cur__btn.is-active {
  background: var(--vod-primary);
  color: #fff;
}
.vxp-cur__btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Locked / fallback line. Same size + colour as the page's own subtitle so it
   reads as part of the heading block rather than a warning. */
.vxp-cur__note {
  margin: 12px 0 0;
  color: var(--vod-grey-text);
  font-size: 13px;
}
.vxp-cur__note strong {
  color: var(--vod-white-color);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .vxp-cur__btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Currency switcher — sliding pill (transitions.dev tabs recipe, phase 4).
   The pill is the container's ::before, positioned through CSS custom
   properties written by the engine in theme/js/currency-switcher.js — no
   element is injected, so the Vue-rendered instance (plans) and the
   server-rendered block never fight over the DOM. Until the engine marks
   the container ready, .is-active keeps its own solid background, so the
   control degrades to exactly the old look without JS.
   -------------------------------------------------------------------------- */
.vxp-cur {
  position: relative;
}
.vxp-cur__btn {
  position: relative;
  z-index: 1;
}
.vxp-cur--pill-ready::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--vxp-pill-w, 0) * 1px);
  height: calc(var(--vxp-pill-h, 0) * 1px);
  translate: calc(var(--vxp-pill-x, 0) * 1px) calc(var(--vxp-pill-y, 0) * 1px);
  background: var(--vod-primary);
  border-radius: 999px;
  z-index: 0;
  will-change: translate, width;
}
/* the first paint positions without motion (recipe gotcha: otherwise the
   pill animates in from 0,0); the engine arms this class one frame later */
.vxp-cur--pill-anim::before {
  transition:
    translate var(--vxl-dur-2) var(--vxl-ease),
    width var(--vxl-dur-2) var(--vxl-ease),
    height var(--vxl-dur-2) var(--vxl-ease);
}
.vxp-cur--pill-ready .vxp-cur__btn.is-active {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Payment success — the check draws itself (transitions.dev success-check
   recipe, phase 4). The ok badge is inside a Vue v-if, so it MOUNTS when
   processing flips false — the whole entrance runs as mount animations:
   the badge fades in while un-rotating, un-blurring and bobbing up on a
   springy ease, and the lucide check's path stroke-draws (path length
   ~22.6 → dasharray 24; round caps swallow the overshoot). Independent
   rotate/translate props so the four animations compose.
   -------------------------------------------------------------------------- */
.vxp-result__icon--ok {
  animation:
    vxp-check-fade   var(--vxl-dur-4) var(--vxl-ease) backwards,
    vxp-check-rotate var(--vxl-dur-4) var(--vxl-ease) backwards,
    vxp-check-blur   var(--vxl-dur-4) var(--vxl-ease) backwards,
    vxp-check-bob    var(--vxl-dur-4) cubic-bezier(0.34, 1.35, 0.64, 1) backwards;
}
.vxp-result__icon--ok svg {
  overflow: visible;
}
.vxp-result__icon--ok svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: vxp-check-draw var(--vxl-dur-4) var(--vxl-ease) 80ms forwards;
}
@keyframes vxp-check-fade   { from { opacity: 0; } }
@keyframes vxp-check-rotate { from { rotate: 80deg; } to { rotate: 0deg; } }
@keyframes vxp-check-blur   { from { filter: blur(10px); } }
@keyframes vxp-check-bob    { from { translate: 0 40px; } to { translate: 0 0; } }
@keyframes vxp-check-draw   { to { stroke-dashoffset: 0; } }