/**
 * 60s buy flow cinema — single stage, phase crossfades
 */

.blb-buy-cinema {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
}

.blb-buy-cinema-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.33, 1, 0.38, 1),
              transform 0.5s cubic-bezier(0.33, 1, 0.38, 1),
              visibility 0.5s;
  overflow: auto;
  padding: 8px 4px;
}

.blb-buy-cinema-step.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.blb-video-builtin .blb-stripe-mock {
  max-width: 380px;
  margin: 0 auto;
  padding: 0;
}

.blb-video-builtin .blb-stripe-mock-card {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.blb-video-builtin .blb-stripe-mock-pay.is-charging {
  background: #4f46e5;
  animation: blb-pay-pulse 0.6s ease-in-out infinite;
}

@keyframes blb-pay-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.blb-buy-cinema-processing {
  max-width: 920px;
  margin: 0 auto;
  padding: 4px 8px;
}

.blb-buy-cinema-processing h2 {
  font-family: var(--blb-font-display);
  font-size: clamp(20px, 3vw, 28px);
  margin: 0 0 12px;
}

.blb-buy-cinema-processing .blb-buy-processing-grid {
  gap: 12px;
}

.blb-buy-cinema-processing .blb-buy-term-log {
  min-height: 200px;
  max-height: 220px;
}

.blb-buy-cinema-delivery {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  padding: 4px 8px;
}

@media (max-width: 800px) {
  .blb-buy-cinema-delivery { grid-template-columns: 1fr; }
}

.blb-buy-del-panel {
  border: 1px solid rgba(201, 169, 97, 0.2);
  background: rgba(8, 8, 7, 0.85);
  padding: 16px;
}

.blb-buy-del-panel h3 {
  font-family: var(--blb-font-display);
  font-size: 18px;
  margin: 0 0 8px;
}

.blb-buy-del-log {
  font-family: var(--blb-font-mono, monospace);
  font-size: 10px;
  line-height: 1.65;
  min-height: 120px;
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.blb-buy-del-log div { opacity: 0; transition: opacity 0.25s; }
.blb-buy-del-log div.is-in { opacity: 1; }
.blb-buy-del-log .gold { color: var(--blb-gold); }
.blb-buy-del-log .ok { color: #6fbf7a; }

.blb-buy-del-key {
  font-family: var(--blb-font-mono, monospace);
  font-size: 12px;
  color: var(--blb-gold);
  padding: 10px;
  border: 1px solid rgba(201, 169, 97, 0.25);
  margin: 10px 0;
  letter-spacing: 0.06em;
}

.blb-buy-del-manifest {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--blb-font-mono, monospace);
  font-size: 9px;
}

.blb-buy-del-manifest li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(201, 169, 97, 0.08);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s, transform 0.3s;
}

.blb-buy-del-manifest li.is-in { opacity: 1; transform: none; }

.blb-buy-cinema-install {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px;
}

.blb-buy-cinema-install h2 {
  font-family: var(--blb-font-display);
  font-size: 22px;
  margin: 0 0 8px;
}

.blb-buy-install-log {
  font-family: var(--blb-font-mono, monospace);
  font-size: 11px;
  line-height: 1.75;
  min-height: 200px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(201, 169, 97, 0.15);
  background: rgba(0, 0, 0, 0.35);
}

.blb-buy-install-log .cmd { color: #6fbf7a; }
.blb-buy-install-log .dim { color: var(--blb-text-mute); }
.blb-buy-install-log .ok { color: var(--blb-gold); }

.blb-buy-cinema-activate {
  max-width: 440px;
  margin: 0 auto;
  padding: 8px;
}

.blb-buy-cinema-activate .sov-activate-success .blb-btn { display: none; }

.blb-buy-cinema-operator {
  padding: 4px;
}

.blb-buy-cinema-operator .sov-sidebar { display: none; }
.blb-buy-cinema-operator .sov-body { grid-template-columns: 1fr; }
.blb-buy-cinema-operator .sov-showcase { padding: 0; }
.blb-buy-cinema-operator .sov-window { min-height: 300px; }

.blb-video-page--social .blb-buy-cinema-delivery {
  grid-template-columns: 1fr;
}

.blb-video-page--social .blb-buy-cinema-processing .blb-buy-processing-grid {
  grid-template-columns: 1fr;
}