/**
 * Hello Plataforma · Checkout Waiting Styles
 */


/* ============================================================
   CONTAINER
   ============================================================ */

.hp-waiting {
  background: var(--hp-bg-secondary);
  min-height: 100vh;
}

.hp-waiting-content {
  padding: 24px 16px 40px;
  max-width: 480px;
  margin: 0 auto;
}


/* ============================================================
   HERO CON PULSE
   ============================================================ */

.hp-waiting-hero {
  text-align: center;
  margin-bottom: 32px;
}

.hp-waiting-pulse {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-waiting-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hp-purple);
  opacity: 0;
  animation: hpPulseRing 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.hp-waiting-pulse-ring--2 {
  animation-delay: 1.2s;
}

@keyframes hpPulseRing {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.hp-waiting-pulse-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--hp-gradient-purple-button);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 12px 32px -8px rgba(105, 73, 158, 0.40);
}

.hp-waiting-pulse-icon i {
  font-size: 38px;
  color: #FFFFFF;
}

.hp-waiting-title {
  font-family: var(--hp-font-base);
  font-size: 26px;
  font-weight: 700;
  color: var(--hp-text-primary);
  margin: 0;
  letter-spacing: -0.6px;
}

.hp-waiting-sub {
  font-family: var(--hp-font-base);
  font-size: 14px;
  color: var(--hp-text-secondary);
  margin: 8px 0 0;
  line-height: 1.55;
}

.hp-waiting-sub strong {
  color: var(--hp-text-primary);
  font-weight: 600;
}


/* ============================================================
   TIMELINE
   ============================================================ */

.hp-waiting-timeline {
  background: var(--hp-bg-primary);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow:
    0 0 0 0.5px var(--hp-border-purple),
    0 4px 12px -2px rgba(105, 73, 158, 0.06);
}

.hp-timeline-step {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.hp-timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hp-bg-card);
  border: 1.5px solid var(--hp-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--hp-duration-normal) var(--hp-ease);
}

.hp-timeline-step.is-done .hp-timeline-dot {
  background: var(--hp-green-success);
  border-color: transparent;
}

.hp-timeline-step.is-done .hp-timeline-dot i {
  color: #FFFFFF;
  font-size: 14px;
  stroke-width: 3;
}

.hp-timeline-step.is-active .hp-timeline-dot {
  background: var(--hp-gradient-purple-button);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(149, 117, 205, 0.20);
}

.hp-timeline-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-top-color: #FFFFFF;
  animation: hpSpin 800ms linear infinite;
}

.hp-timeline-line {
  width: 1.5px;
  height: 18px;
  background: var(--hp-border-subtle);
  margin-left: 11.25px;
}

.hp-timeline-content {
  flex: 1;
  min-width: 0;
}

.hp-timeline-step-title {
  font-family: var(--hp-font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--hp-text-primary);
  margin: 0;
  line-height: 1.3;
}

.hp-timeline-step:not(.is-done):not(.is-active) .hp-timeline-step-title {
  color: var(--hp-text-tertiary);
  font-weight: 500;
}

.hp-timeline-step-meta {
  font-family: var(--hp-font-base);
  font-size: 11px;
  color: var(--hp-text-tertiary);
  margin: 2px 0 0;
  line-height: 1.3;
}


/* ============================================================
   EMAIL CARD
   ============================================================ */

.hp-waiting-email-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(149, 117, 205, 0.06) 0%, rgba(149, 117, 205, 0.02) 100%);
  border: 0.5px solid rgba(149, 117, 205, 0.20);
  border-radius: 14px;
  margin-bottom: 16px;
}

.hp-waiting-email-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212, 191, 232, 0.40) 0%, rgba(168, 135, 208, 0.20) 100%);
  border: 0.5px solid rgba(149, 117, 205, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hp-waiting-email-icon i {
  font-size: 18px;
  color: var(--hp-purple-deep);
}

.hp-waiting-email-content {
  flex: 1;
  min-width: 0;
}

.hp-waiting-email-label {
  font-family: var(--hp-font-base);
  font-size: 11px;
  color: var(--hp-text-tertiary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.hp-waiting-email-value {
  font-family: var(--hp-font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--hp-text-primary);
  margin: 2px 0 0;
  word-break: break-all;
}


/* ============================================================
   DETAILS COLLAPSIBLE
   ============================================================ */

.hp-waiting-details {
  background: var(--hp-bg-primary);
  border: 0.5px solid var(--hp-border-purple);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.hp-waiting-details summary {
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
  font-family: var(--hp-font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--hp-text-primary);
}

.hp-waiting-details summary::-webkit-details-marker {
  display: none;
}

.hp-waiting-details summary i {
  font-size: 18px;
  color: var(--hp-text-tertiary);
  transition: transform var(--hp-duration-normal) var(--hp-ease);
}

.hp-waiting-details[open] summary i {
  transform: rotate(180deg);
}

.hp-waiting-details-content {
  padding: 4px 16px 14px;
}

.hp-waiting-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--hp-border-subtle);
}

.hp-waiting-detail-row:last-child {
  border-bottom: none;
}

.hp-waiting-detail-row span:first-child {
  font-family: var(--hp-font-base);
  font-size: 12px;
  color: var(--hp-text-tertiary);
}

.hp-waiting-detail-row span:last-child {
  font-family: var(--hp-font-base);
  font-size: 13px;
  color: var(--hp-text-primary);
  font-weight: 500;
}


/* ============================================================
   ACCIONES
   ============================================================ */

.hp-waiting-actions {
  margin-bottom: 20px;
}


/* ============================================================
   REASSURANCE
   ============================================================ */

.hp-waiting-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--hp-font-base);
  font-size: 12px;
  color: var(--hp-text-tertiary);
  margin: 0;
}

.hp-waiting-reassurance i {
  font-size: 14px;
  color: var(--hp-green-success);
}


/* ============================================================
   EMPTY / ERROR STATE
   ============================================================ */

.hp-waiting-empty {
  text-align: center;
  padding: 60px 16px 40px;
}

.hp-waiting-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: var(--hp-gradient-purple-button);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 24px -8px rgba(105, 73, 158, 0.30);
}

.hp-waiting-empty-icon i {
  font-size: 36px;
  color: #FFFFFF;
}

.hp-waiting-empty-icon--error {
  background: linear-gradient(135deg, #DC5F5F 0%, #C04545 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 24px -8px rgba(192, 69, 69, 0.30);
}

.hp-waiting-empty-title {
  font-family: var(--hp-font-base);
  font-size: 22px;
  font-weight: 700;
  color: var(--hp-text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}

.hp-waiting-empty-sub {
  font-family: var(--hp-font-base);
  font-size: 14px;
  color: var(--hp-text-secondary);
  margin: 0 0 24px;
  line-height: 1.55;
}