/* Flowfi — Checkout CSS */
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* ---- Float Labels ---- */
.float-field { position: relative; }

.float-input {
  width: 100%;
  min-height: 56px;
  padding: 20px 16px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px; /* 16px prevents iOS Safari auto-zoom on focus */
  color: #111827;
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
}

.float-input:focus { border-color: #3b82f6; }

.float-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #6b7280;
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
}

/* Label sobe quando input tem conteúdo ou está focado */
.float-input:not(:placeholder-shown) + .float-label,
.float-input:focus + .float-label {
  top: 10px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.float-input:not(:placeholder-shown) { padding-top: 22px; padding-bottom: 6px; }

.field-error {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  margin-left: 4px;
}

/* ---- CTA Button ---- */
.cta-btn {
  position: relative;
  letter-spacing: 0.01em;
  transform: translateY(0);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.cta-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.cta-btn:not(:disabled):active { transform: translateY(0); }

/* ---- Card brand icon overlay ---- */
.float-field .absolute { top: 50%; transform: translateY(-50%); right: 14px; }

/* ---- Animations ---- */
@keyframes fadeSlideIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.animate-in { animation: fadeSlideIn 0.3s ease-out both; }

/* ---- QR code copy animation ---- */
#pix-code-input { cursor: default; }

/* ---- Social proof toast ---- */
#sp-toast { backdrop-filter: blur(4px); }

/* ---- Mobile tweaks ---- */
@media (max-width: 420px) {
  .cta-btn { font-size: 1rem; }
}