/* ===== MAIN WRAPPER FIX ===== */
.ff-container {
  max-width: 420px !important;
  margin: 40px auto !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #2f6df6, #27c1d9) !important;
  padding: 20px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
  font-family: 'Inter', sans-serif;
}

/* ===== HEADER ===== */
.ff-header {
  color: #fff !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* ===== WHITE CARD ===== */
.ff-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

/* ===== GRID ===== */
.ff-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* ===== FIELD ===== */
.ff-field {
  display: flex !important;
  flex-direction: column !important;
}

/* ===== LABEL ===== */
.ff-field label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}

/* ===== INPUTS (ALL SAME LOOK) ===== */
.ff-field input,
.ff-field select {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #f3f4f6 !important; /* 🔥 SAME GRAY */
  font-size: 14px !important;
  box-sizing: border-box !important;
  appearance: none !important;
}

/* ===== PLACEHOLDER ===== */
.ff-field input::placeholder {
  color: #6b7280 !important;
}

/* ===== SELECT ICON ===== */
.ff-field select {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='18' viewBox='0 0 24 24' width='18'><path d='M7 10l5 5 5-5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* ===== DATE ICON FIX ===== */
.ff-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}

/* ===== FOCUS ===== */
.ff-field input:focus,
.ff-field select:focus {
  outline: none !important;
  border-color: #9ca3af !important;
  background: #f3f4f6 !important;
  box-shadow: none !important;
}

/* ===== BUTTON ===== */
.ff-submit input[type="submit"] {
  width: 100% !important;
  padding: 14px !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2f6df6, #27c1d9) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* ===== BUTTON HOVER ===== */
.ff-submit input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .ff-row {
    grid-template-columns: 1fr !important;
  }
}