/*
 * cr_paymentbankwire – Confirmation Style
 * Objetivo: Card blanca tipo checkout moderno
 * Compatible con themes que fuerzan fondo azul
 */

/* Wrapper (NO fondo, lo pone el theme) */
.cr-confirmation-wrapper {
  padding: 40px 15px;
}

/* Card principal */
.cr-confirmation-card {
  background: #ffffff !important;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
  padding: 40px 36px !important;
  text-align: center;
  color: #333 !important;
}

/* Reset de textos (clave para que el theme no rompa nada) */
.cr-confirmation-card *,
.cr-confirmation-card p,
.cr-confirmation-card span,
.cr-confirmation-card strong {
  color: #333 !important;
}

/* Header */
.cr-confirmation-header {
  margin-bottom: 20px;
}

.cr-confirmation-header .cr-check {
  display: inline-block;
  background: #f1c40f; /* amarillo */
  color: #fff !important;
  width: 46px;
  height: 46px;
  line-height: 46px;
  border-radius: 50%;
  font-size: 22px;
  margin-bottom: 10px;
}

.cr-confirmation-header h2 {
  margin: 10px 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1f3c88 !important;
  border-bottom: 1px solid #f1e9e9;
}

.cr-confirmation-header p {
  font-size: 0.95rem;
  color: #666 !important;
}

/* Total */
.cr-total {
  margin: 25px 0;
}

.cr-total span {
  font-size: 0.95rem;
  color: #555 !important;
}

.cr-total strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  color: #ff8c1a !important;
}

/* Grid de pagos */
.cr-payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 25px 0;
}

/* Box de pago */
.cr-payment-box {
  background: #f2f9ff !important;
  border-radius: 14px;
  padding: 18px 20px;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.cr-payment-box h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b6cc4 !important;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1e9e9;
}

.cr-payment-box p {
  font-size: 0.9rem;
  margin-bottom: 6px;
}

/* Referencia de pago */
.cr-reference-box {
  background: #fff3df !important;
  border-radius: 12px;
  padding: 16px;
  margin: 25px 0;
}

.cr-reference-box span {
  font-size: 0.9rem;
  color: #555 !important;
}

.cr-reference-box strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ff8c1a !important;
  border-top: 1px solid #f1e9e9;
}

/* Mensaje personalizado */
.cr-info-box {
  background: #eef7fa !important;
  border-left: 4px solid #2794b3;
  border-right: 4px solid #2794b3;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 22px;
  font-size: 0.9rem;
}

/* Footer */
.cr-footer {
  font-size: 0.9rem;
  color: #666 !important;
  line-height: 1.5;
}
/* Separadores tipo checkout */
.cr-divider {
  border-top: 1px solid #e5e5e5;
  margin: 28px 0;
}

/* Header de sección */
.cr-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f3c88 !important;
  margin-bottom: 12px;
  text-align: center;
}

/* Help box */
.cr-help-box {
  border-top: 1px solid #e5e5e5;
  margin-top: 30px;
  padding-top: 20px;
}

.cr-help-title {
  font-size: 0.95rem;
  color: #666 !important;
  margin-bottom: 14px;
}

/* Help items */
.cr-help-items {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.cr-help-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0b6cc4 !important;
  font-size: 0.95rem;
  text-decoration: none;
  font-weight: 500;
}

.cr-help-item:hover {
  text-decoration: underline;
}

/* Icons base */
.cr-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b6cc4;
  color: #fff;
  font-size: 14px;
}

/* Mail icon */
.cr-icon-mail::before {
  content: "✉";
}

/* WhatsApp icon */
.cr-icon-whatsapp {
  background: #25d366;
}

.cr-icon-whatsapp::before {
  content: "📞";
}

/* Responsive */
@media (max-width: 768px) {
  .cr-confirmation-card {
    padding: 30px 22px !important;
  }

  .cr-payment-grid {
    grid-template-columns: 1fr;
  }

  .cr-total strong {
    font-size: 2rem;
  }
}