/* ========================================
   Premium — tokens locales
   ======================================== */

:root {
  --premium-gold:       #eab308;
  --premium-gold-light: #fde047;
  --premium-gold-deep:  #78350f;
  --premium-ink:        #1a1309;
  --premium-shadow:     rgba(234, 179, 8, 0.45);
  --premium-glow:       rgba(253, 224, 71, 0.28);
  --premium-bg-layer:   rgba(120, 53, 15, 0.55);
  --premium-bg-deep:    rgba(42, 30, 8, 0.95);
}

[data-theme="light"] {
  --premium-gold:       #b45309;
  --premium-gold-light: #eab308;
  --premium-gold-deep:  #78350f;
  --premium-ink:        #1a1309;
  --premium-shadow:     rgba(180, 83, 9, 0.3);
  --premium-glow:       rgba(234, 179, 8, 0.22);
  --premium-bg-layer:   rgba(234, 179, 8, 0.18);
  --premium-bg-deep:    rgba(234, 179, 8, 0.08);
}

/* The legacy .room-card.-premium / .clavalo-logo-wrap / .creator-tag
   styles lived here. The salas list now uses .room-ticket.-premium
   (components/salas.css) — see Phase 4 + Phase 9 of the boletería
   redesign. */

/* ========================================
   Pills y chips reusables (premium)
   ======================================== */

.premium-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background: linear-gradient(90deg, var(--premium-gold-deep), var(--premium-gold), var(--premium-gold-light));
  color: var(--premium-ink);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px -2px var(--premium-shadow);
  white-space: nowrap;
}

.premium-entry-fee {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  background: linear-gradient(90deg, var(--premium-gold-light), var(--premium-gold));
  color: var(--premium-ink);
  font-size: 0.875rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px -2px var(--premium-shadow);
  letter-spacing: 0.02em;
}

/* Badge inline usado en show (al lado del título) */
.premium-badge.-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: linear-gradient(90deg, var(--premium-gold-deep), var(--premium-gold));
  color: var(--premium-ink);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* ========================================
   Show — context bar premium (dorado total)
   ======================================== */

/* (.context-bar.-premium styles removed — context-bar replaced by
    the shared ribbon, premium pill is the gold variant.) */

/* ========================================
   Show — Header VIP v2 (Trophy Pedestal + bottom strip carousel)
   Centrado, corona reemplazada por logo dorado de Clavalo,
   sponsors en tira inferior con scroll horizontal infinito.
   ======================================== */

.sala-premium-header-v2 {
  position: relative;
  background:
    radial-gradient(ellipse at center top, rgba(253, 224, 71, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #1c1810 0%, #14110a 100%);
  border: 1px solid rgba(253, 224, 71, 0.4);
  border-radius: var(--radius-xl, 16px);
  padding: 0.875rem 1rem 0;
  margin-bottom: 1.5rem;
  text-align: center;
  overflow: hidden;
  color: #fff;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(253, 224, 71, 0.18);
}

/* Botón "info" arriba a la izquierda — abre el reglamento como dialog */
.trophy__info-btn {
  position: absolute;
  top: 0.625rem; left: 0.625rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  background: rgba(253, 224, 71, 0.08);
  border: 1px solid rgba(253, 224, 71, 0.3);
  border-radius: var(--radius-pill);
  color: var(--gold, #fde047);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.trophy__info-btn:hover,
.trophy__info-btn:focus-visible {
  background: rgba(253, 224, 71, 0.18);
  border-color: rgba(253, 224, 71, 0.6);
  transform: translateY(-1px);
  outline: none;
}
.trophy__info-btn svg { flex-shrink: 0; }
/* En pantallas muy chicas mostramos solo el icono */
@media (max-width: 380px) {
  .trophy__info-btn span { display: none; }
  .trophy__info-btn { padding: 0.35rem; }
}

/* Shimmer cruzando la card */
.sala-premium-header-v2::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(253, 224, 71, 0.10) 50%,
    transparent 65%);
  background-size: 250% 100%;
  animation: trophy-shimmer 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes trophy-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -100% 0; }
}

/* Rayos cónicos rotando desde el centro inferior */
.trophy__rays {
  position: absolute;
  inset: -50% -50% auto -50%;
  height: 100%;
  background: conic-gradient(from 0deg at 50% 100%,
    transparent 0deg, rgba(253, 224, 71, 0.08) 20deg,
    transparent 40deg, rgba(253, 224, 71, 0.08) 60deg,
    transparent 80deg, rgba(253, 224, 71, 0.08) 100deg,
    transparent 120deg, rgba(253, 224, 71, 0.08) 140deg,
    transparent 160deg, rgba(253, 224, 71, 0.08) 180deg,
    transparent 360deg);
  pointer-events: none;
  animation: trophy-rays-spin 28s linear infinite;
  transform-origin: 50% 100%;
  z-index: 0;
}
@keyframes trophy-rays-spin { to { transform: rotate(360deg); } }

/* Partículas doradas flotando */
.trophy__particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.trophy__particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--gold, #fde047);
  border-radius: 50%;
  filter: blur(0.5px);
  box-shadow: 0 0 8px var(--gold, #fde047);
  animation: trophy-particle-float 6s ease-in-out infinite;
  opacity: 0.5;
}
.trophy__particle:nth-child(1) { top: 18%; left: 10%; animation-delay: 0s; }
.trophy__particle:nth-child(2) { top: 38%; left: 88%; animation-delay: 1.2s; }
.trophy__particle:nth-child(3) { top: 70%; left: 14%; animation-delay: 2.4s; }
.trophy__particle:nth-child(4) { top: 28%; left: 75%; animation-delay: 3.6s; }
.trophy__particle:nth-child(5) { top: 82%; left: 62%; animation-delay: 4.8s; }
.trophy__particle:nth-child(6) { top: 54%; left: 48%; animation-delay: 2.0s; }
.trophy__particle:nth-child(7) { top: 12%; left: 52%; animation-delay: 5.2s; }
@keyframes trophy-particle-float {
  0%, 100% { transform: translateY(0)    scale(1);   opacity: 0.15; }
  50%      { transform: translateY(-24px) scale(1.4); opacity: 0.7; }
}

/* Brand mark: logo de Clavalo en dorado */
.trophy__brand {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 18px rgba(253, 224, 71, 0.55));
  animation: trophy-brand-pulse 3s ease-in-out infinite;
  z-index: 2;
}
.trophy__brand svg { width: 100%; height: 100%; display: block; }
@keyframes trophy-brand-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(253, 224, 71, 0.45));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(253, 224, 71, 0.9));
    transform: scale(1.03);
  }
}

.trophy__title {
  position: relative;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold, #fde047);
  margin-bottom: 0.2rem;
  z-index: 2;
}
.trophy__title::before, .trophy__title::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--gold, #fde047);
  vertical-align: middle;
  margin: 0 0.625rem 3px;
  opacity: 0.5;
}

.trophy__eyebrow {
  position: relative;
  font-size: 0.6875rem;
  color: #d1d5db;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  z-index: 2;
}

.trophy__amount {
  position: relative;
  font-family: var(--font-scoreboard);
  font-size: 2.875rem;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, var(--gold, #fde047) 50%, #eab308 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(253, 224, 71, 0.35));
  margin-bottom: 0.35rem;
  animation: trophy-amount-glow 3.5s ease-in-out infinite;
  z-index: 2;
}
.trophy__amount-cur {
  font-size: 1rem;
  color: #d1d5db;
  letter-spacing: 0.15em;
  margin-left: 0.3rem;
  -webkit-text-fill-color: #d1d5db;
}
@keyframes trophy-amount-glow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(253, 224, 71, 0.25)); }
  50%      { filter: drop-shadow(0 0 28px rgba(253, 224, 71, 0.55)); }
}

.trophy__entry {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.875rem;
  background: rgba(253, 224, 71, 0.1);
  border: 1px solid rgba(253, 224, 71, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: #fff;
  margin-bottom: 0.875rem;
  z-index: 2;
}
.trophy__entry strong { color: var(--gold, #fde047); font-weight: 800; }

.trophy__desc {
  position: relative;
  color: #9ca3af;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-bottom: 0.875rem;
  padding: 0 0.5rem;
  z-index: 2;
}
.trophy__desc p { margin: 0; }
.trophy__desc p + p { margin-top: 0.5rem; }

/* ── Showcase: tira inferior con carousel infinito ──────────── */
.sala-premium-header-v2 .showcase {
  position: relative;
  z-index: 2;
  margin: 0 -1.25rem;
  border-top: 1px dashed rgba(253, 224, 71, 0.3);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
  padding: 0.875rem 1.25rem 1rem;
}

.showcase__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #fde047);
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem 0.5rem;
}
.showcase__label span:first-child::before {
  content: "— ";
  opacity: 0.5;
}

.showcase__viewport {
  position: relative;
  overflow: hidden;
  /* Fade muy sutil en los bordes — sólo el último 2% para no
     "cortar" los bordes de las pills que pasan por ahí. */
  mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}

.showcase__track {
  display: flex;
  width: max-content;
  gap: 0.875rem;
  animation: showcase-scroll 38s linear infinite;
  will-change: transform;
}
.showcase__track:hover { animation-play-state: paused; }
@keyframes showcase-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile-first: pills grandes con logo prominente */
.showcase__card {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.75rem 0.55rem 0.55rem;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(253, 224, 71, 0.25);
  border-radius: var(--radius-pill);
  transition: border-color 0.25s ease, background 0.25s ease;
  text-decoration: none;
  color: inherit;
}
/* Hover sin translateY/shadow: el viewport con overflow:hidden
   recortaba el shadow. Cambiamos solo borde + bg para feedback claro. */
.showcase__card:hover {
  border-color: rgba(253, 224, 71, 0.7);
  background: rgba(253, 224, 71, 0.1);
}

.showcase__card-img {
  flex-shrink: 0;
  width: 64px; height: 64px;
  background: var(--paper, #efe8dc);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(253, 224, 71, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.showcase__card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.showcase__card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.showcase__card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
}
.showcase__card-cat {
  font-size: 0.75rem;
  color: #b8b6ab;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-top: 2px;
}

/* Desktop: más padding general, pills siguen grandes */
@media (min-width: 768px) {
  .sala-premium-header-v2 { padding: 1.25rem 2rem 0; }
  .trophy__brand          { width: 72px; height: 72px; }
  .trophy__amount         { font-size: 4rem; }
  .trophy__amount-cur     { font-size: 1.25rem; }

  .sala-premium-header-v2 .showcase {
    margin: 0 -2rem;
    padding: 1.125rem 2rem 1.25rem;
  }
  .showcase__track {
    gap: 1rem;
    animation-duration: 45s;
  }
  .showcase__card {
    padding: 0.6rem 1.25rem 0.6rem 0.5rem;
    gap: 0.875rem;
    min-width: 0;
  }
  .showcase__card-img  { width: 56px; height: 56px; }
  .showcase__card-name { font-size: 0.9375rem; }
  .showcase__card-cat  { font-size: 0.6875rem; }

  .trophy__info-btn { top: 1rem; left: 1rem; padding: 0.35rem 0.8rem 0.35rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sala-premium-header-v2::before,
  .trophy__rays, .trophy__particle, .trophy__brand,
  .trophy__amount, .showcase__track {
    animation: none !important;
  }
}

/* El reglamento "Cómo se compite" ahora se abre como info-modal
   reutilizable desde el botón ".trophy__info-btn" del header.
   Ver: app/views/shared/_info_modal.html.erb +
        components/_primitives.css (.info-modal__*) */

/* ========================================
   CTA de pago — Immersive Hero
   Hero full-bleed con foto real (sala-vip-hero.jpg), Ken Burns
   sutil, título overlay arriba-izquierda y una glass card flotante
   abajo-derecha con la opción de pago.
   ======================================== */

.premium-cta-hero {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(253, 224, 71, 0.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  margin: 0;
}
@media (max-width: 760px) {
  .premium-cta-hero { height: auto; min-height: 560px; }
}

/* Override del .sala-preview cuando contiene el hero — necesita full width.
   El wrapper original tiene max-width: 480px + align-items: center, que
   colapsa al hero (todos sus hijos son position: absolute). */
.sala-preview:has(.premium-cta-hero) {
  max-width: none;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  align-items: stretch;
  text-align: left;
  gap: 1rem;
}
.sala-preview:has(.premium-cta-hero) .preview-info {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Imagen del túnel con Ken Burns animation */
.premium-cta-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  animation: premium-hero-zoom 24s ease-in-out infinite alternate;
}
@keyframes premium-hero-zoom {
  from { transform: scale(1.08); object-position: center 35%; }
  to   { transform: scale(1.18); object-position: center 38%; }
}

/* Overlay degradado + tinte dorado */
.premium-cta-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(253, 224, 71, 0.16) 0%, transparent 50%),
    linear-gradient(135deg,
      rgba(5, 4, 3, 0.55) 0%,
      rgba(5, 4, 3, 0.15) 40%,
      rgba(5, 4, 3, 0.4) 60%,
      rgba(5, 4, 3, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Bloque de título arriba-izquierda */
.premium-cta-hero__title-block {
  position: absolute;
  top: 2rem; left: 2rem;
  z-index: 2;
  max-width: 60%;
}
@media (max-width: 760px) {
  .premium-cta-hero__title-block {
    top: 1.5rem; left: 1.25rem; right: 1.25rem;
    max-width: none;
  }
}

.premium-cta-hero__eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(254, 240, 138, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  margin-bottom: 0.5rem;
}

.premium-cta-hero__title {
  font-family: var(--font-scoreboard);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow:
    0 0 36px rgba(253, 224, 71, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.9);
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
}

.premium-cta-hero__lead {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: rgba(236, 232, 220, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  max-width: 380px;
  line-height: 1.5;
}

/* Glass card flotante abajo-derecha */
.premium-cta-hero__glass {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  width: min(360px, calc(100% - 3rem));
  padding: 1.25rem 1.375rem 1.25rem;
  background: rgba(14, 10, 4, 0.62);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(253, 224, 71, 0.4);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 3;
  display: flex; flex-direction: column; gap: 0.625rem;
}
@media (max-width: 760px) {
  .premium-cta-hero__glass {
    bottom: 1rem; right: 1rem; left: 1rem;
    width: auto;
  }
}

.premium-cta-hero__price {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 0.625rem;
  border-bottom: 1px dashed rgba(253, 224, 71, 0.25);
}
.premium-cta-hero__lbl {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #fde047);
}
.premium-cta-hero__amt {
  font-family: var(--font-scoreboard);
  font-size: 2rem;
  color: var(--gold, #fde047);
  letter-spacing: 0.04em;
  line-height: 1;
}

.premium-cta-hero__wallet-hint {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--accent, #4ec77a);
  margin-top: 0.125rem;
}
.premium-cta-hero__wallet-hint strong { font-weight: 700; }

.premium-cta-hero__fineprint {
  font-size: 0.6875rem;
  color: var(--fg-2, #b8b6ab);
  margin: 0.125rem 0 0;
  text-align: center;
}
.premium-cta-hero__fineprint a {
  color: var(--accent, #4ec77a);
  text-decoration: none;
}
.premium-cta-hero__fineprint a:hover { text-decoration: underline; }

/* Botones de pago (compartidos por ambos escenarios) */
.premium-cta-hero__glass .btn-pay {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: transform 150ms, box-shadow 200ms, background 200ms;
}
.premium-cta-hero__glass .btn-pay.-credits {
  background: linear-gradient(135deg, var(--accent, #4ec77a), var(--accent-2, #2f9655));
  color: var(--accent-ink, #0e1a12);
  box-shadow: 0 8px 22px rgba(78, 199, 122, 0.4);
}
.premium-cta-hero__glass .btn-pay.-credits:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(78, 199, 122, 0.55);
}
.premium-cta-hero__glass .btn-pay.-mp {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong, rgba(236, 232, 220, 0.22));
  color: var(--fg, #ece8dc);
}
.premium-cta-hero__glass .btn-pay.-mp:hover {
  border-color: rgba(253, 224, 71, 0.5);
  background: rgba(253, 224, 71, 0.08);
  color: var(--gold, #fde047);
}
.premium-cta-hero__glass .btn-pay.-mp.is-primary {
  background: linear-gradient(135deg, var(--gold, #fde047), var(--gold-deep, #eab308));
  border: 0;
  color: var(--paper-ink, #1a1a15);
  box-shadow: 0 8px 22px rgba(234, 179, 8, 0.45);
}
.premium-cta-hero__glass .btn-pay.-mp.is-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 179, 8, 0.6);
}

/* button_to wraps everything in a <form>. Aplanamos los estilos */
.premium-cta-hero__glass form { margin: 0; }
.premium-cta-hero__glass form button { width: 100%; }

/* Mensaje de pago pendiente (en la preview de no-miembro) */
.preview-pending.-premium {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.16), transparent);
  border-color: var(--premium-gold);
  color: var(--premium-gold-light);
}

.preview-pending.-premium a {
  color: var(--premium-gold-light);
  font-weight: 700;
  text-decoration: underline;
}

/* ========================================
   Página de pago pendiente
   ======================================== */

.payment-pending {
  position: relative;
  overflow: hidden;
  max-width: 520px;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
  background:
    radial-gradient(800px 400px at 50% -10%, var(--premium-glow), transparent 60%),
    linear-gradient(180deg, var(--premium-bg-layer) 0%, var(--premium-bg-deep) 50%, var(--bg-card) 100%);
  border: 1px solid var(--premium-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -20px var(--premium-shadow);
}

.payment-pending-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--premium-gold), var(--premium-gold-light));
  color: var(--premium-ink);
  box-shadow: 0 0 48px var(--premium-shadow);
  animation: premium-pulse 2.4s ease-in-out infinite;
}

@keyframes premium-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 48px var(--premium-shadow); }
  50%      { transform: scale(1.05); box-shadow: 0 0 72px var(--premium-shadow); }
}

@media (prefers-reduced-motion: reduce) {
  .premium-cta-hero__photo,
  .payment-pending-icon { animation: none; }
}

.payment-pending h1 {
  font-size: 1.75rem;
  margin: 0 0 0.625rem;
  color: var(--premium-gold-light);
}

.payment-pending p {
  margin: 0.25rem 0;
  color: var(--text-2);
  line-height: 1.6;
}

.payment-pending-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0;
  padding: 0.625rem 0.875rem;
  background: rgba(253, 224, 71, 0.1);
  color: var(--premium-gold-light);
  border: 1px solid var(--premium-gold);
  border-radius: var(--radius);
  font-size: 0.8125rem;
}

.payment-pending-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}