/* Frontend styles - Minimal + Glasmorphism */
.ffb-form {
  border: var(--ffb-form-border-width, 1px) solid var(--ffb-form-border-color, rgba(255,255,255,0.5));
  padding: var(--ffb-form-padding, 20px);
  border-radius: var(--ffb-form-radius, 16px);
  background: var(--ffb-form-bg, rgba(255,255,255,0.35));
  box-shadow: var(--ffb-shadow, 0 10px 30px rgba(0,0,0,0.08));
  -webkit-backdrop-filter: blur(var(--ffb-glass-blur, 10px));
  backdrop-filter: blur(var(--ffb-glass-blur, 10px));
}

.ffb-form .ffb-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ffb-gap, 12px);
}

.ffb-form .ffb-field { display: block; }

.ffb-form .ffb-span-12 { grid-column: span 12 / span 12; }
.ffb-form .ffb-span-9  { grid-column: span 9 / span 12; }
.ffb-form .ffb-span-8  { grid-column: span 8 / span 12; }
.ffb-form .ffb-span-6  { grid-column: span 6 / span 12; }
.ffb-form .ffb-span-4  { grid-column: span 4 / span 12; }
.ffb-form .ffb-span-3  { grid-column: span 3 / span 12; }

@media (max-width: 768px) {
  .ffb-form .ffb-span-9,
  .ffb-form .ffb-span-8,
  .ffb-form .ffb-span-6,
  .ffb-form .ffb-span-4,
  .ffb-form .ffb-span-3 {
    grid-column: span 12 / span 12;
  }
}

.ffb-form label { display:block; font-weight:600; margin-bottom:6px; }

.ffb-form input,
.ffb-form textarea,
.ffb-form select {
  width: 100%;
  padding: var(--ffb-input-padding, 12px 14px);
  border: var(--ffb-input-border-width, 1px) solid var(--ffb-input-border-color, rgba(0,0,0,0.08));
  border-radius: var(--ffb-input-radius, 12px);
  background: var(--ffb-input-bg, rgba(255,255,255,0.65));
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}

.ffb-form input:focus,
.ffb-form textarea:focus,
.ffb-form select:focus {
  border-color: var(--ffb-input-focus-border-color, #2271b1);
  box-shadow: 0 0 0 3px rgba(34,113,177,0.25);
  background: rgba(255,255,255,0.85);
}

.ffb-form .ffb-actions { margin-top: 6px; }

.ffb-submit {
  background: var(--ffb-button-bg, #2271b1);
  color: var(--ffb-button-color, #fff);
  border: none;
  padding: var(--ffb-button-padding, 10px 16px);
  border-radius: var(--ffb-button-radius, 12px);
  cursor: pointer;
  font-weight: 600;
}
.ffb-submit:hover { opacity:.95; }

.ffb-message { margin-top:12px; padding:10px; border-radius:8px; display:none; }
.ffb-message.ok { background:#e8fff3; color:#0a7; border:1px solid #bff0d2; }
.ffb-message.error { background:#ffecec; color:#b00; border:1px solid #ffb3b3; }
.ffb-form.ffb-loading { opacity:.6; pointer-events:none; }