/* Compra y producto: métodos de pago visibles como tarjetas, menos texto, acento morado
   (en vez de negro y rojo). Solo se aplica hover de color en PC con mouse. */

:root {
  --wsc-purple: #a855f7;
  --wsc-purple-soft: #c084fc;
  --wsc-ink: #120e1d;
}

/* Ocultar bloques que consumían espacio: protección, vendedor, garantía */
.ws-hide,
#pd-seller-card,
#buy-warranty-row { display: none !important; }
/* Garantía visible al comprador: duración, tipo y condiciones */
#pd-warranty-box { display: block !important; margin-top: 4px; }

/* Descripción corta: 3 líneas para no cansar al leer */
#pd-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadatos: chips compactos en una sola fila */
#pd-meta-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, max-content)) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

/* Botones de compra con acento morado */
#pd-buy-btn,
#buy-confirm-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
}
#pd-buy-btn:disabled,
#buy-confirm-btn:disabled { opacity: .5; }

/* Reseñas: morado en vez de rojo */
.review-link { color: var(--wsc-purple-soft) !important; }

/* Opciones de pago: tarjetas seleccionables, siempre visibles */
.buy-pay-cards { display: grid; gap: 10px; margin-bottom: 16px; }
.buy-pay-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: linear-gradient(180deg, #17122a, #0e0b18);
  color: var(--m-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.buy-pay-card:disabled { opacity: .45; cursor: not-allowed; }
.buy-pay-card .bpc-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(168, 85, 247, 0.16);
  font-size: 18px;
}
.buy-pay-card .bpc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buy-pay-card .bpc-txt b { font-size: 14px; }
.buy-pay-card .bpc-txt small { font-size: 12px; color: var(--m-muted); }
.buy-pay-card .bpc-dot {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.buy-pay-card.is-on {
  border-color: var(--wsc-purple);
  background: linear-gradient(180deg, #1d1533, #100c1d);
  box-shadow: 0 0 0 1px var(--wsc-purple), 0 10px 26px -12px rgba(168, 85, 247, 0.8);
}
.buy-pay-card.is-on .bpc-dot {
  background: var(--wsc-purple);
  border-color: var(--wsc-purple-soft);
  box-shadow: inset 0 0 0 3px var(--wsc-ink);
}

@media (hover: hover) and (pointer: fine) {
  /* Hover morado en PC: tarjetas, botones y bloques; nunca rojo */
  .buy-pay-card:not(:disabled):hover { border-color: var(--wsc-purple-soft); }
  .m-card:hover,
  .card:hover,
  .prod-card:hover,
  .panel-box:hover,
  .benefit:hover,
  .a-plain-card:hover {
    border-color: rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 14px 34px -16px rgba(168, 85, 247, 0.65) !important;
  }
  .review-link:hover { color: var(--wsc-purple-soft) !important; text-decoration-color: var(--wsc-purple-soft); }
}

/* Celular y pantallas muy angostas */
@media (max-width: 480px) {
  .buy-pay-card { padding: 10px 12px; }
  .buy-pay-card .bpc-ico { flex-basis: 32px; width: 32px; height: 32px; font-size: 16px; }
}

/* Selector viejo (select + radios generados) oculto: la elección es con las tarjetas de arriba */
#buy-direct-payment-box > :not(#buy-qr-box):not(#buy-instructions-box):not(#buy-direct-payment-fields):not(#buy-security-code-box):not(#buy-proof-box) { display: none !important; }
#buy-direct-payment-box { margin-bottom: 12px !important; }

/* Precio y bordes en morado/blanco en vez de rojo */
#buy-total, #pd-price { color: #f5f3ff !important; text-shadow: 0 0 18px rgba(168, 85, 247, 0.35); }
.ws-archive-buy-modal, .ws-archive-detail-modal, .ws-archive-phase-h-modal { border-color: rgba(168, 85, 247, 0.45) !important; box-shadow: 0 30px 80px -30px rgba(124, 58, 237, 0.55) !important; }

/* Fila "copiar" del método de pago: el valor usa todo el ancho (antes se partía letra por letra
   en una columna angosta). Etiqueta y botón arriba, valor debajo. */
div:has(> button[data-copy]) { flex-wrap: wrap !important; row-gap: 8px; }
div:has(> button[data-copy]) > span { order: 1; }
div:has(> button[data-copy]) > button[data-copy] { order: 2; margin-left: auto; }
div:has(> button[data-copy]) > code {
  order: 3;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
  background: rgba(168, 85, 247, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}