/**
 * GF Converge — Frontend CSS
 *
 * Provides card type indicators, validation colouring, and a clean
 * look for the credit-card section of any Gravity Form.
 */

/* ------------------------------------------------------------------ */
/* Wrapper                                                              */
/* ------------------------------------------------------------------ */

.gfield.gf_creditcard,
.gfield.gf_creditcard_cardnumber {
  position: relative;
}

/* ------------------------------------------------------------------ */
/* Card type badge on the card-number field wrapper                    */
/* ------------------------------------------------------------------ */

[data-gfc-card-type]::before {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 24px;
  background: transparent no-repeat center / contain;
  pointer-events: none;
  opacity: 0.85;
}

/* Visual cues via CSS — swap for real SVG sprites in production */
[data-gfc-card-type="visa"]::before       { background-color: #1a1f71; border-radius: 3px; }
[data-gfc-card-type="mastercard"]::before { background-color: #eb001b; border-radius: 3px; }
[data-gfc-card-type="amex"]::before       { background-color: #2e77bc; border-radius: 3px; }
[data-gfc-card-type="discover"]::before   { background-color: #ff6600; border-radius: 3px; }

/* ------------------------------------------------------------------ */
/* Validation states                                                   */
/* ------------------------------------------------------------------ */

.gfc-valid {
  border-color: #2ecc71 !important;
  outline-color: #2ecc71;
}

.gfc-invalid {
  border-color: #e74c3c !important;
  outline-color: #e74c3c;
}

/* ------------------------------------------------------------------ */
/* Error message box (Gravity Forms injects these)                     */
/* ------------------------------------------------------------------ */

.gform_wrapper .gfield_error .gfc-invalid {
  border-color: #e74c3c !important;
}

/* ------------------------------------------------------------------ */
/* Section heading for credit card block                               */
/* ------------------------------------------------------------------ */

.gf_creditcard_section_title {
  font-weight: 600;
  font-size: 1.05em;
  margin-bottom: .5em;
  color: #333;
}

/* ------------------------------------------------------------------ */
/* Converge logo / sandbox badge (shown in sandbox mode)               */
/* ------------------------------------------------------------------ */

.gfc-sandbox-badge {
  display: inline-block;
  background: #f39c12;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Refund button (entry detail screen)                                  */
/* ------------------------------------------------------------------ */

.gf-converge-refund-btn {
  background-color: #c0392b;
  color: #fff;
  border-color: #a93226;
  margin-top: 8px;
}

.gf-converge-refund-btn:hover,
.gf-converge-refund-btn:focus {
  background-color: #a93226;
  color: #fff;
}

.gf-converge-refund-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.gfc-refund-success {
  color: #27ae60;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Secure payment note below card fields                               */
/* ------------------------------------------------------------------ */

.gfc-secure-note {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gfc-secure-note::before {
  content: '🔒';
  font-size: 13px;
}