/* ============================================================
   Estilos extras da DEMONSTRAÇÃO — carregados só aqui, depois
   do style.css do app. As classes .demo-* / .dlc-* já vêm do
   style.css do app; aqui ficam só a folha de compra (.demo-pay)
   e ajustes específicos da demo.
   ============================================================ */

@keyframes dpf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dps {
  from {
    transform: translateY(46px);
  }
  to {
    transform: none;
  }
}

.demo-lock,
.demo-lockcard {
  cursor: pointer;
}

.demo-pay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 4, 6, 0.74);
  backdrop-filter: blur(6px);
}
.demo-pay.on {
  display: flex;
  animation: dpf 0.22s ease;
}
.demo-pay-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface, #1a1a20);
  border: 1px solid var(--gold-line, rgba(217, 184, 143, 0.24));
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 20px 20px 26px;
  text-align: center;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7);
  animation: dps 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 88vh;
  overflow-y: auto;
}
.demo-pay .dp-grip {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 auto 16px;
}
.demo-pay .dp-ic {
  font-size: 30px;
  margin-bottom: 8px;
}
.demo-pay .dp-t {
  font-size: 21px;
  font-weight: 800;
  color: var(--tx, #f4f1ec);
  margin-bottom: 7px;
}
.demo-pay .dp-d {
  font-size: 14.5px;
  color: var(--tx-2, #a8a29a);
  line-height: 1.55;
  margin-bottom: 16px;
}
.demo-pay .dp-list {
  text-align: left;
  margin: 0 auto 18px;
  max-width: 330px;
  display: grid;
  gap: 9px;
}
.demo-pay .dp-li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--tx-2, #a8a29a);
  line-height: 1.45;
}
.demo-pay .dp-li i {
  color: var(--gold, #ecd3ac);
  font-style: normal;
  font-weight: 800;
  flex-shrink: 0;
}
.demo-pay .dp-price {
  margin: 0 auto 16px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(217, 184, 143, 0.1);
  border: 1px solid var(--gold-line, rgba(217, 184, 143, 0.24));
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 330px;
}
.demo-pay .dp-de {
  font-size: 14px;
  color: var(--tx-3, #6e6a63);
  text-decoration: line-through;
  text-decoration-color: #f87171;
}
.demo-pay .dp-price b {
  font-size: 29px;
  font-weight: 800;
  color: var(--gold, #ecd3ac);
  line-height: 1;
}
.demo-pay .dp-obs {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--tx-2, #a8a29a);
}
.demo-pay .dp-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, var(--gold, #ecd3ac), var(--gold-3, #b8935f));
  color: #08080a;
  font-size: 15.5px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(217, 184, 143, 0.22);
}
.demo-pay .dp-sub {
  font-size: 11.5px;
  color: var(--tx-3, #6e6a63);
  margin-top: 11px;
}
.demo-pay .dp-close {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--tx-3, #6e6a63);
  font-size: 13.5px;
  cursor: pointer;
  padding: 8px;
}