.checkout {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(40px, 7vw, 88px) 0;
  background:
    radial-gradient(720px 540px at 8% 10%, rgba(91, 119, 157, 0.22), transparent 70%),
    radial-gradient(800px 580px at 92% 18%, rgba(0, 113, 227, 0.19), transparent 72%),
    radial-gradient(680px 480px at 48% 96%, rgba(92, 112, 143, 0.16), transparent 74%),
    linear-gradient(145deg, #fbfcfe 0%, #eef3f8 52%, #e5edf6 100%);
}

.checkout > .wrap {
  width: min(1040px, calc(100% - 32px));
}

.checkout-flow {
  display: grid;
  gap: clamp(72px, 14vh, 150px);
}

.checkout-flow > .paybox {
  scroll-margin-top: clamp(20px, 4vh, 44px);
}

.paybox {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(38px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.616);
  border-radius: clamp(28px, 4vw, 40px);
  background:
    radial-gradient(ellipse 92% 58% at 34% -4%, rgba(255, 255, 255, 0.643), transparent 66%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.509), rgba(255, 255, 255, 0.281));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset -10px -12px 28px rgba(22, 27, 34, 0.045),
    0 38px 110px rgba(41, 68, 104, 0.18),
    0 14px 38px rgba(64, 91, 126, 0.13);
  -webkit-backdrop-filter: blur(32px) saturate(175%);
  backdrop-filter: blur(32px) saturate(175%);
  text-align: center;
  transition:
    border-color 1.05s var(--ease),
    background-color 1.05s var(--ease),
    box-shadow 1.05s var(--ease),
    transform 1.05s var(--ease);
  transform-origin: center;
}

.paybox::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse 82% 36% at 30% -3%, rgba(255, 255, 255, 0.523), transparent 68%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.228), transparent 36%, transparent 78%, rgba(255, 255, 255, 0.08));
  content: "";
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 1.05s var(--ease);
}

.paybox > * {
  position: relative;
  z-index: 1;
}

.paybox > .checkout-brand,
.paybox > .eyebrow,
.paybox > h1,
.paybox > .price,
.paybox > .detail,
.paybox > .checkout-actions,
.paybox > .payment-note,
.paybox > .back-link {
  transition: scale 1.15s var(--ease);
  transform-origin: center;
}

@media (any-hover: hover) and (any-pointer: fine) {
  .paybox:hover {
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
      inset 7px 7px 18px rgba(0, 0, 0, 0.075),
      inset -8px -9px 20px rgba(255, 255, 255, 0.7),
      0 22px 48px rgba(0, 0, 0, 0.22),
      0 42px 96px rgba(0, 0, 0, 0.18);
    animation: premium-urgency-relaxed 3.8s ease-in-out 8s infinite;
    transform: translateY(-6px);
  }

  .paybox:hover::before {
    opacity: 0.92;
  }

  .paybox:hover > .checkout-brand {
    scale: 1.018;
  }

  .paybox:hover > .eyebrow {
    scale: 1.025;
  }

  .paybox:hover > h1 {
    scale: 1.04;
  }

  .paybox:hover > .price {
    scale: 1.035;
  }

  .paybox:hover > .detail,
  .paybox:hover > .checkout-actions,
  .paybox:hover > .payment-note,
  .paybox:hover > .back-link {
    scale: 1.012;
  }

  .paybox:active {
    animation: none;
    box-shadow:
      inset 9px 9px 22px rgba(0, 0, 0, 0.1),
      inset -7px -8px 18px rgba(255, 255, 255, 0.68),
      0 14px 30px rgba(0, 0, 0, 0.2),
      0 26px 68px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px) scale(0.998);
  }
}

.checkout-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin-bottom: 22px;
}

.checkout-brand img {
  width: auto;
  height: 48px;
  transition: scale 0.7s var(--ease);
  transform-origin: center;
}

.checkout-brand:hover img {
  scale: 1.1;
}

.paybox .eyebrow {
  margin-bottom: 12px;
  text-align: center;
}

.paybox h1 {
  max-width: 780px;
  margin: 0 auto 16px;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.04;
  text-align: center;
  transform-origin: center;
}

.paybox .price {
  margin-bottom: 18px;
  font-size: clamp(24px, 3vw, 30px);
  text-align: center;
}

.detail {
  max-width: 720px;
  min-height: 0;
  margin: 0 auto 32px;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
  text-align: center;
  white-space: pre-line;
}

.checkout-actions {
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.checkout-actions .btn {
  min-width: 220px;
}

.checkout-whatsapp {
  border-color: transparent;
  background: #0071e3;
  color: #fff;
}

.checkout-whatsapp:hover,
.checkout-whatsapp:focus-visible,
.checkout-whatsapp:active {
  border-color: transparent;
  background: #0068d1;
  color: #fff;
}

.checkout-call {
  border-color: #0071e3;
  background: rgba(255, 255, 255, 0.16);
  color: #0071e3;
}

.checkout-call:hover,
.checkout-call:focus-visible,
.checkout-call:active {
  border-color: #0071e3;
  background: #0071e3;
  color: #fff;
}

.payment-note {
  max-width: 620px;
  margin: 22px auto 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--blue);
  font-weight: 600;
}

@media (max-width: 420px) {
  .checkout {
    padding: 16px 0;
  }

  .paybox {
    padding: 30px 22px;
    border-radius: 24px;
  }

  .checkout-actions {
    flex-direction: column;
    width: 100%;
  }

  .checkout-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (hover: none) {
  .checkout-brand:hover img {
    scale: 1;
  }

  .paybox.is-touch-showcase {
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
      inset 7px 7px 18px rgba(0, 0, 0, 0.075),
      inset -8px -9px 20px rgba(255, 255, 255, 0.7),
      0 22px 48px rgba(0, 0, 0, 0.22),
      0 42px 96px rgba(0, 0, 0, 0.18);
    animation: premium-urgency-relaxed 3.8s ease-in-out 8s infinite;
    transform: translateY(-6px);
  }

  .paybox.is-touch-showcase::before {
    opacity: 0.92;
  }

  .paybox.is-touch-showcase > .checkout-brand {
    scale: 1.018;
  }

  .paybox.is-touch-showcase > .eyebrow {
    scale: 1.025;
  }

  .paybox.is-touch-showcase > h1 {
    scale: 1.04;
  }

  .paybox.is-touch-showcase > .price {
    scale: 1.035;
  }

  .paybox.is-touch-showcase > .detail,
  .paybox.is-touch-showcase > .checkout-actions,
  .paybox.is-touch-showcase > .payment-note,
  .paybox.is-touch-showcase > .back-link {
    scale: 1.012;
  }

  .paybox:active {
    box-shadow:
      inset 8px 8px 20px rgba(0, 0, 0, 0.09),
      inset -7px -8px 18px rgba(255, 255, 255, 0.65),
      0 18px 44px rgba(0, 0, 0, 0.2);
    transform: scale(0.994);
  }
}

@media (prefers-reduced-motion: reduce) {
  .paybox,
  .paybox.is-touch-showcase {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ferestrele Premium VIP continuă aceeași galaxie și același liquid glass
   ca pachetele Individual / În doi. Nu există aici luminile albastre ADN. */
.checkout-vip-sky {
  display: none;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  contain: layout paint style;
  background: linear-gradient(
    180deg,
    #020508 0%,
    #020304 17%,
    #050b10 50%,
    #020304 83%,
    #020508 100%
  );
  pointer-events: none;
}

.checkout > .wrap {
  position: relative;
  z-index: 2;
}

html.checkout-vip-mode,
html.checkout-vip-mode body {
  background: #020304;
  color: #fff;
}

html.checkout-vip-mode {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(16px, 4vh, 44px);
  scroll-snap-type: y mandatory;
}

html.checkout-vip-mode body {
  overscroll-behavior-y: contain;
}

html.checkout-vip-mode .checkout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(190px, 22svh, 240px);
  background: #020304;
  color: #fff;
}

html.checkout-vip-mode .checkout-flow > .paybox {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html.checkout-vip-mode .checkout-vip-sky {
  display: block;
}

html.checkout-vip-mode .paybox {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(ellipse 95% 64% at 38% 0%, rgba(255, 255, 255, 0.162), transparent 63%),
    linear-gradient(148deg, rgba(39, 45, 55, 0.758), rgba(9, 13, 20, 0.650));
  box-shadow:
    inset 6px 6px 15px rgba(255, 255, 255, 0.1),
    inset -10px -12px 24px rgba(0, 0, 0, 0.36),
    0 24px 52px rgba(0, 0, 0, 0.44),
    0 0 24px rgba(0, 102, 204, 0.07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
}

html.checkout-vip-mode .paybox::before {
  background:
    radial-gradient(ellipse 80% 38% at 32% -4%, rgba(255, 255, 255, 0.271), transparent 66%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.081), transparent 34%, transparent 78%, rgba(80, 156, 255, 0.054));
  opacity: 0.7;
}

/* Reacția de scroll păstrează sticla lizibilă, dar o face să se așeze
   elastic, ca un material lichid. Se animă doar proprietăți compozitate. */
html.checkout-vip-mode .paybox::after {
  position: absolute;
  z-index: 0;
  inset: -38%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(116, 174, 255, 0.075) 20%,
    transparent 58%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-18%, 18%, 0) scale(0.78);
}

html.checkout-vip-mode .paybox.is-flow-arriving {
  z-index: 3;
  animation: vip-liquid-pop 1.12s cubic-bezier(0.22, 0.78, 0.2, 1) both;
  will-change: translate, scale;
}

html.checkout-vip-mode .paybox.is-flow-arriving::after {
  animation: vip-liquid-sheen 1.16s cubic-bezier(0.22, 0.78, 0.2, 1) both;
  will-change: opacity, transform;
}

@keyframes vip-liquid-pop {
  0% {
    translate: 0 22px;
    scale: 0.965 0.982;
  }
  45% {
    translate: 0 -5px;
    scale: 1.016 0.994;
  }
  68% {
    translate: 0 2px;
    scale: 0.995 1.007;
  }
  84% {
    translate: 0 -1px;
    scale: 1.004 0.998;
  }
  100% {
    translate: 0 0;
    scale: 1 1;
  }
}

@keyframes vip-liquid-sheen {
  0% {
    opacity: 0;
    transform: translate3d(-18%, 18%, 0) scale(0.78);
  }
  38% {
    opacity: 0.68;
  }
  72% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translate3d(18%, -16%, 0) scale(1.14);
  }
}

html.checkout-vip-mode .checkout-brand img {
  filter: invert(1) brightness(1.22);
}

html.checkout-vip-mode .paybox h1,
html.checkout-vip-mode .paybox .price {
  color: #fff;
}

html.checkout-vip-mode .detail,
html.checkout-vip-mode .payment-note {
  color: #d2d2d7;
}

@media (any-hover: hover) and (any-pointer: fine) {
  html.checkout-vip-mode .paybox:hover {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
      inset 7px 7px 17px rgba(0, 0, 0, 0.23),
      inset -6px -7px 16px rgba(255, 255, 255, 0.1),
      0 0 34px rgba(255, 255, 255, 0.17),
      0 16px 34px rgba(0, 0, 0, 0.54),
      0 0 24px rgba(0, 102, 204, 0.07);
  }

  html.checkout-vip-mode .paybox:active {
    box-shadow:
      inset 10px 10px 24px rgba(0, 0, 0, 0.42),
      inset -5px -6px 14px rgba(255, 255, 255, 0.08),
      0 10px 24px rgba(0, 0, 0, 0.54),
      0 0 18px rgba(255, 255, 255, 0.1);
  }
}

@media (hover: none) {
  html.checkout-vip-mode .paybox.is-touch-showcase {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
      inset 7px 7px 17px rgba(0, 0, 0, 0.23),
      inset -6px -7px 16px rgba(255, 255, 255, 0.1),
      0 0 34px rgba(255, 255, 255, 0.17),
      0 16px 34px rgba(0, 0, 0, 0.54),
      0 0 24px rgba(0, 102, 204, 0.07);
  }

  html.checkout-vip-mode .paybox:active {
    box-shadow:
      inset 10px 10px 24px rgba(0, 0, 0, 0.42),
      inset -5px -6px 14px rgba(255, 255, 255, 0.08),
      0 10px 24px rgba(0, 0, 0, 0.54),
      0 0 18px rgba(255, 255, 255, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.checkout-vip-mode .paybox.is-flow-arriving,
  html.checkout-vip-mode .paybox.is-flow-arriving::after {
    animation: none !important;
  }
}