/* ──────────────────────────────────────────────────────────────
   WC InfinitPay v2 — Estilos (Checkout Integrado)
────────────────────────────────────────────────────────────── */

:root {
  --ip-radius  : 10px;
  --ip-border  : #d0d5dd;
  --ip-focus   : #0e6fff;
  --ip-success : #00bd4b;
  --ip-text    : #1a1a2e;
  --ip-muted   : #6b7280;
  --ip-bg      : #ffffff;
  --ip-bg-alt  : #f8fafc;
}

/* ── Caixa de status na página de obrigado ─────────────────── */
.ip-status-box {
  background   : var(--ip-bg-alt);
  border       : 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding      : 24px;
  margin       : 20px 0;
  max-width    : 560px;
}

.ip-status-paid {
  border-color: var(--ip-success);
  background  : #ecfdf5;
  color       : #065f46;
}

/* ── Spinner de aguardo ────────────────────────────────────── */
.ip-spinner-wrap {
  display    : flex;
  align-items: center;
  gap        : 10px;
  font-size  : 14px;
  color      : var(--ip-muted);
  margin-bottom: 14px;
}

.ip-spinner-ring {
  width        : 20px;
  height       : 20px;
  border       : 2.5px solid var(--ip-border);
  border-top-color: var(--ip-focus);
  border-radius: 50%;
  animation    : ip-spin .8s linear infinite;
  flex-shrink  : 0;
}

@keyframes ip-spin {
  to { transform: rotate(360deg); }
}

/* ── Status confirmado ─────────────────────────────────────── */
.ip-confirmed {
  padding     : 10px 16px;
  background  : #ecfdf5;
  border      : 1px solid var(--ip-success);
  border-radius: 8px;
  color       : #065f46;
  font-size   : 14px;
  margin-bottom: 14px;
}

/* ── Botão principal ───────────────────────────────────────── */
.ip-btn-primary {
  display        : inline-block;
  padding        : 12px 22px;
  background     : #1a1a2e;
  color          : #fff !important;
  border-radius  : 8px;
  font-size      : 15px;
  font-weight    : 600;
  text-decoration: none !important;
  transition     : opacity .2s;
  margin-top     : 6px;
}
.ip-btn-primary:hover { opacity: .85; }

/* ── Instruções e aviso ────────────────────────────────────── */
.ip-instructions {
  font-size: 14px;
  color    : var(--ip-text);
  margin   : 12px 0;
}

.ip-notice {
  font-size: 12px;
  color    : var(--ip-muted);
  margin   : 12px 0 0;
}