/* ============================================================
 * Crypto Payments USDT — Frontend Styles
 * ============================================================
 * Estilizado para integrarse con el tema Telvion:
 *   - Fuente Geist + Geist Mono
 *   - Azul tinta como acento (#3b3bff)
 *   - Bordes nítidos (1px), radios moderados, sin sombras pesadas
 *   - Variables CSS del tema con fallbacks por si el plugin se
 *     usa con otro tema (entonces caen colores neutros razonables)
 *
 * Mantiene TODOS los selectores originales para no romper la JS.
 * ============================================================ */

.cpu-payment-widget{
  max-width:480px;
  margin:20px auto;
  padding:32px;
  background:var(--bg-2,#fff);
  border:1px solid var(--line,#e5e3dd);
  border-radius:18px;
  font-family:var(--sans,'Geist',system-ui,-apple-system,sans-serif);
  color:var(--ink,#1a1a1f);
  font-size:14.5px;
  line-height:1.5;
}

.cpu-payment-widget h3{
  margin:0 0 20px 0;
  font-family:var(--sans,'Geist',system-ui,sans-serif);
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink,#1a1a1f);
}

/* ===== Bloque de monto destacado (paso 1) ===== */
.cpu-amount-display{
  text-align:center;
  padding:28px 20px;
  background:var(--ink,#1a1a1f);
  color:#fff;
  border-radius:14px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
.cpu-amount-display::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(400px 240px at 80% 20%,rgba(59,59,255,.25),transparent 60%);
  pointer-events:none;
}
.cpu-amount-value{
  font-family:var(--sans,'Geist',sans-serif);
  font-size:42px;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1;
  display:block;
  position:relative;
}
.cpu-amount-currency{
  font-family:var(--mono,'Geist Mono',monospace);
  font-size:13px;
  opacity:.7;
  margin-top:6px;
  display:inline-block;
  position:relative;
}

.cpu-description{
  color:var(--ink-2,#444);
  margin:14px 0 20px;
  font-size:14px;
  text-align:center;
}

/* ===== Selector de red ===== */
.cpu-network-selector{margin:24px 0}
.cpu-network-selector > label{
  display:block;
  font-family:var(--mono,monospace);
  font-size:11.5px;
  font-weight:500;
  margin-bottom:10px;
  color:var(--ink-3,#888);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.cpu-networks{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cpu-network-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line,#e5e3dd);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  background:var(--bg-2,#fff);
}
.cpu-network-option:hover{
  border-color:var(--ink-3,#888);
  background:var(--bg-3,#f3f2ee);
}
.cpu-network-option input[type="radio"]{
  margin:0;
  accent-color:var(--accent,#3b3bff);
}
.cpu-network-option:has(input:checked){
  border-color:var(--accent,#3b3bff);
  background:rgba(59,59,255,.04);
}
.cpu-network-option span{
  font-family:var(--mono,monospace);
  font-size:13px;
  font-weight:600;
  color:var(--ink,#1a1a1f);
}
.cpu-network-option small{
  font-size:12px;
  color:var(--ink-3,#888);
  margin-left:auto;
}

/* ===== Campos del cliente (nombre + email) ===== */
.cpu-customer-fields{margin:20px 0;display:flex;flex-direction:column;gap:14px}
.cpu-customer-field,
.cpu-email-field{margin:0}
.cpu-customer-field label,
.cpu-email-field label{
  display:block;
  font-family:var(--mono,monospace);
  font-size:11.5px;
  font-weight:500;
  margin-bottom:8px;
  color:var(--ink-3,#888);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.cpu-customer-field input,
.cpu-email-field input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line,#e5e3dd);
  border-radius:10px;
  font-family:var(--sans,sans-serif);
  font-size:14px;
  color:var(--ink,#1a1a1f);
  background:var(--bg-2,#fff);
  box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
}
.cpu-customer-field input::placeholder,
.cpu-email-field input::placeholder{color:var(--ink-3,#aaa);font-size:13px}
.cpu-customer-field input:focus,
.cpu-email-field input:focus{
  outline:none;
  border-color:var(--accent,#3b3bff);
  box-shadow:0 0 0 3px rgba(59,59,255,.08);
}

/* ===== Botones ===== */
.cpu-btn{
  font-family:var(--sans,sans-serif);
  font-weight:500;
  font-size:14px;
  padding:14px 22px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition:all .15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.cpu-btn-primary{
  width:100%;
  background:var(--ink,#1a1a1f);
  color:#fff;
  padding:16px 22px;
}
.cpu-btn-primary:hover{
  background:var(--accent,#3b3bff);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(59,59,255,.2);
}
.cpu-btn-primary:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ===== Paso 2: pago en curso ===== */
.cpu-warning{
  background:rgba(244,159,40,.1);
  border:1px solid rgba(244,159,40,.3);
  color:#9c5800;
  padding:12px 14px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:18px;
  line-height:1.45;
}

.cpu-payment-info{
  background:var(--bg-3,#f3f2ee);
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:20px;
}
.cpu-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line,#e5e3dd);
  font-size:13.5px;
  gap:12px;
}
.cpu-info-row:last-child{border-bottom:none}
.cpu-label{
  font-family:var(--mono,monospace);
  font-size:11.5px;
  color:var(--ink-3,#888);
  text-transform:uppercase;
  letter-spacing:.05em;
  flex-shrink:0;
}
.cpu-value{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:1;
  justify-content:flex-end;
  text-align:right;
}
.cpu-value strong,
.cpu-value code{
  font-family:var(--mono,monospace);
  font-size:13px;
  color:var(--ink,#1a1a1f);
  font-weight:600;
  background:none;
  padding:0;
  word-break:break-all;
}
.cpu-value code{
  font-size:11.5px;
  background:var(--bg-2,#fff);
  padding:4px 8px;
  border-radius:5px;
  border:1px solid var(--line,#e5e3dd);
}

.cpu-copy-btn{
  background:transparent;
  border:1px solid var(--line,#e5e3dd);
  border-radius:5px;
  padding:3px 7px;
  cursor:pointer;
  font-size:13px;
  transition:all .15s;
  flex-shrink:0;
}
.cpu-copy-btn:hover{
  border-color:var(--accent,#3b3bff);
  background:rgba(59,59,255,.06);
}
.cpu-copy-btn.copied{
  background:var(--pos,#0a8553);
  border-color:var(--pos,#0a8553);
  color:#fff;
}

/* ===== QR ===== */
.cpu-qr-container{
  display:flex;
  justify-content:center;
  padding:20px;
  background:#fff;
  border:1px solid var(--line,#e5e3dd);
  border-radius:12px;
  margin-bottom:20px;
}
.cpu-qr-container canvas{display:block}

/* ===== Estado / Spinner ===== */
.cpu-status-box{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:var(--bg-3,#f3f2ee);
  border-radius:10px;
  border-left:3px solid var(--accent,#3b3bff);
  margin-bottom:14px;
}
.cpu-spinner{
  width:18px;
  height:18px;
  border:2px solid var(--line,#e5e3dd);
  border-top-color:var(--accent,#3b3bff);
  border-radius:50%;
  animation:cpu-spin .9s linear infinite;
  flex-shrink:0;
}
@keyframes cpu-spin{to{transform:rotate(360deg)}}

.cpu-status-text{
  font-size:13.5px;
  color:var(--ink-2,#444);
  flex:1;
}

.cpu-timer{
  font-family:var(--mono,monospace);
  font-size:13px;
  color:var(--ink-3,#888);
  font-weight:500;
  transition:color .25s;
}
.cpu-timer.warning{color:#c8412c}

/* === Urgency-tiered timer (set from frontend.js) === */
.cpu-timer--ok   { color:#10b981; }                          /* > 5 min: green */
.cpu-timer--warn { color:#d97706; font-weight:600; }         /* 1-5 min: orange */
.cpu-timer--crit { color:#dc2626; font-weight:700;            /* < 1 min: red + pulse */
                   animation:cpu-timer-pulse 1s ease-in-out infinite; }
.cpu-timer--dead { color:#6b7280; text-decoration:line-through; }

@keyframes cpu-timer-pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .cpu-timer--crit{animation:none}
}

.cpu-order-id{
  text-align:center;
  margin-top:14px;
  font-family:var(--mono,monospace);
  font-size:11.5px;
  color:var(--ink-3,#888);
}
.cpu-order-id code{
  font-size:11.5px;
  background:var(--bg-3,#f3f2ee);
  padding:2px 6px;
  border-radius:4px;
}

/* ===== Paso 3: éxito ===== */
.cpu-success{
  text-align:center;
  padding:40px 20px;
}
.cpu-success-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  background:rgba(10,133,83,.1);
  color:var(--pos,#0a8553);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:600;
}
.cpu-success h3{
  color:var(--pos,#0a8553);
}
.cpu-success p{
  color:var(--ink-2,#444);
  font-size:14.5px;
  margin:8px 0;
}
.cpu-tx{
  margin-top:16px;
  font-family:var(--mono,monospace);
  font-size:11.5px;
  color:var(--ink-3,#888);
  word-break:break-all;
}

/* ===== Paso expirado ===== */
.cpu-expired{
  text-align:center;
  padding:40px 20px;
}
.cpu-expired h3{
  color:#c8412c;
  margin-bottom:14px;
}
.cpu-expired p{
  color:var(--ink-2,#444);
  margin-bottom:20px;
}
.cpu-restart{
  background:var(--ink,#1a1a1f);
  color:#fff;
  width:auto;
  display:inline-flex;
}

/* ===== Errores ===== */
.cpu-error{
  background:rgba(200,65,44,.08);
  border:1px solid rgba(200,65,44,.25);
  color:#a32d1b;
  padding:14px 16px;
  border-radius:10px;
  font-size:14px;
  font-family:var(--sans,sans-serif);
}

/* ===== Responsive ===== */
@media (max-width:600px){
  .cpu-payment-widget{
    margin:12px;
    padding:24px 20px;
  }
  .cpu-amount-value{font-size:34px}
  .cpu-payment-info{padding:14px}
  .cpu-info-row{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .cpu-value{justify-content:flex-start;text-align:left}
}