/* Cecasem SIP — donations.css (optimizado sin :root ni variables) */

/* Reset local de box-sizing */
.ccsip-donate, .ccsip-donate * { box-sizing: border-box; }

/* 1) CONTENEDOR CENTRADO + GRID (1 col por defecto) */
.ccsip-donate{
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;

  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  color: #ffffff; /* texto base claro */
  position: relative; /* por si se posicionan elementos internos */
}

/* 2 columnas cuando hay resultado (form izq., QR der.) */
.ccsip-donate.ccsip-has-result{
  grid-template-columns: minmax(320px, 420px) minmax(360px, 1fr);
}

/* 2) TARJETA DEL FORMULARIO */
.ccsip-donate #ccsip-form{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #213150; /* secondary */
  color: #ffffff;
}

/* Fila e inputs */
.ccsip-donate .ccsip-row{ margin-bottom:10px; }
.ccsip-donate .ccsip-row label{
  display:block; font-size:14px; margin-bottom:4px;
  color: #ffffff;
}
.ccsip-donate .ccsip-row input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #152030;     /* tertiary */
  background:#ffffff;
  color:#000000;
  outline: none;
}
.ccsip-donate .ccsip-row input:focus{
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(121, 183, 43, 0.35); /* primary con alpha */
}

/* Botones */
.ccsip-donate button{
  padding:10px 14px;
  border:0;
  border-radius:10px;
  background:#79b72b; /* primary */
  color:#ffffff;
  font-weight: 600;
  cursor:pointer;
  transition: filter .15s ease, transform .05s ease;
}
.ccsip-donate button:hover{ filter:brightness(.95); }
.ccsip-donate button:active{ transform: translateY(1px); }
.ccsip-donate button[disabled]{ opacity:.6; cursor:not-allowed; }

/* 3) TARJETA DEL RESULTADO / QR */
.ccsip-donate #ccsip-result,
.ccsip-donate .ccsip-result{
  width: 100%;
  margin-top: 0;
  padding: 12px;
  border: 1px dashed #213150;  /* secondary */
  border-radius: 12px;
  background:#213150;          /* secondary */
  min-height: 40px;
}
.ccsip-donate #ccsip-result[hidden],
.ccsip-donate .ccsip-result[hidden]{ display:none; }

/* Contenedor del QR e imagen */
.ccsip-donate .ccsip-qr{ margin-bottom: 8px; }
.ccsip-donate .ccsip-qr img{
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid #213150;   /* secondary */
  border-radius: 10px;
  padding: 10px;
  background:#213150;          /* secondary */
}

/* Alias debajo del QR (tono claro fijo) */
.ccsip-donate .ccsip-alias{
  font-size:13px;
  color:#d2dbe8;
}

/* Estado + botón en línea */
.ccsip-donate .ccsip-status,
.ccsip-donate .ccsip-actions{
  display:flex; align-items:center; gap:10px; margin-top: 8px;
}

/* Píldoras de estado */
.ccsip-donate .ccsip-pill{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  background:#213150;  /* secondary */
  color:#ffffff;
  border: 1px solid transparent;
}
.ccsip-donate .ccsip-paid{
  background:#79b72b;  /* primary */
  color:#152030;       /* tertiary para contraste */
}
.ccsip-donate .ccsip-error{
  background:#000000;
  color:#ffffff;
  border-color:#213150; /* secondary */
}
.ccsip-donate .ccsip-disabled{
  background:#0f1926;  /* mezcla aprox. de tertiary con negro */
  color:#ffffff;
}
.ccsip-donate .ccsip-pending{
  background:#152030;  /* tertiary */
  color:#ffffff;
}

/* === BLOQUE DE GRACIAS (dentro del modal, sin overlay) === */
.ccsip-thanks-block{
  width: 100%;
  background: #0f172a;              /* slate-900 */
  color: #e2e8f0;                   /* slate-200 */
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
  text-align: center;
  animation: ccsip-fade-in 260ms ease-out both;
  margin: 4px 0;
}
.ccsip-thanks-title{
  margin: 0 0 6px;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: .02em;
  color: #ffffff;
}
.ccsip-thanks-sub{
  margin: 0 8px 10px;
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: .9;
}
.ccsip-thanks-illus{
  margin-top: 6px;
  filter: drop-shadow(0 6px 12px rgba(34,197,94,.25)); /* primary-ish */
}

.ccsip-donate .ccsip-download{
  background:#152030; /* tertiary */
  color:#ffffff;
  border:1px solid #213150; /* secondary */
}
.ccsip-donate .ccsip-download:hover{
  filter:none;
  background:#213150; /* secondary */
}

/* Cinta sutil DEV (opcional) */
.ccsip-donate[data-mode="dev"]::before{
  content: "DEV";
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; letter-spacing: .08em;
  background: #0f1926; color: #e2e8f0;
  border: 1px dashed #213150; border-radius: 999px;
  padding: 3px 8px; opacity: .85;
}

/* Panel de error (opcional) */
.ccsip-result.ccsip-error{
  background:#0b0f1a;
  border:1px solid #7f1d1d;
  color:#fecaca;
  padding:12px; border-radius:10px;
}

/* Animación de entrada */
@keyframes ccsip-fade-in{
  from{ opacity: 0; transform: translateY(6px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)   scale(1); }
}

/* 4) RESPONSIVE: siempre 1 columna en móvil */
@media (max-width: 768px){
  .ccsip-donate,
  .ccsip-donate.ccsip-has-result{
    grid-template-columns: 1fr;
  }
}