/* Flow Fix Forms — front end */
.ff-booking, .ff-contact {
  --ff-accent: #1A7FE0;
  --ff-accent-dark: #125FBE;
  --ff-gold: #F6A723;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  color: #10233a;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}
.ff-booking *, .ff-contact * { box-sizing: border-box; }

.ff-booking {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(16,35,58,.10);
  padding: 34px 40px 30px;
}

/* progress */
.ff-progress { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-bottom:28px; }
.ff-step-node { display:flex; align-items:center; gap:9px; }
.ff-step-circle { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#e2eaf3; color:#8496a9; flex-shrink:0; transition:.2s; }
.ff-step-label { font-size:13px; font-weight:600; color:#8496a9; }
.ff-step-line { width:44px; height:2px; background:#e2eaf3; margin:0 14px; display:inline-block; }
.ff-step-node.is-done .ff-step-circle { background:var(--ff-accent); color:#fff; }
.ff-step-node.is-active .ff-step-label { color:#10233a; }
.ff-step-node.is-passed .ff-step-line { background:var(--ff-accent); }

.ff-panel-title { font-size:18px; font-weight:700; margin:0 0 22px; text-align:center; }
.ff-panel-sub { font-size:13px; color:#6b7f96; margin:-14px 0 22px; text-align:center; }
.ff-field-label { font-size:13px; font-weight:700; color:#3a4d63; margin-bottom:10px; }

/* service grid */
.ff-svc-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.ff-svc { cursor:pointer; background:#fff; border:1.5px solid #e2eaf3; border-radius:12px; padding:18px 8px; display:flex; flex-direction:column; align-items:center; gap:10px; transition:.15s; font-family:inherit; -webkit-tap-highlight-color:transparent; outline:none; }
.ff-svc i { font-size:20px; color:var(--ff-accent); }
.ff-svc span { font-size:12px; font-weight:600; color:#3a4d63; text-align:center; line-height:1.3; }
.ff-svc:hover, .ff-svc:focus, .ff-svc:focus-visible { background:#e7f2ff !important; border-color:var(--ff-accent) !important; outline:none; }
.ff-svc.is-selected { background:#e7f2ff !important; border-color:var(--ff-accent) !important; }

/* days & times */
.ff-day-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:24px; }
.ff-day { cursor:pointer; background:#fff; border:1.5px solid #e2eaf3; border-radius:10px; padding:12px 6px; text-align:center; font-family:inherit; -webkit-tap-highlight-color:transparent; outline:none; }
.ff-day-dow { display:block; font-size:11px; color:#8496a9; font-weight:600; }
.ff-day-num { display:block; font-size:16px; font-weight:700; color:#10233a; }
.ff-day:hover, .ff-day:focus, .ff-day:focus-visible { background:#e7f2ff !important; border-color:var(--ff-accent) !important; outline:none; }
.ff-day.is-selected { background:#e7f2ff !important; border-color:var(--ff-accent) !important; }
.ff-day.is-selected .ff-day-num { color:var(--ff-accent-dark); }
.ff-time-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ff-time { cursor:pointer; background:#fff; border:1.5px solid #e2eaf3; border-radius:10px; padding:11px 6px; font-size:14px; font-weight:600; color:#10233a; font-family:inherit; -webkit-tap-highlight-color:transparent; outline:none; }
.ff-time:hover, .ff-time:focus, .ff-time:focus-visible { background:#e7f2ff !important; border-color:var(--ff-accent) !important; outline:none; }
.ff-time.is-selected { background:#e7f2ff !important; border-color:var(--ff-accent) !important; color:var(--ff-accent-dark); }

/* inputs */
.ff-row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ff-booking label, .ff-contact label { font-size:12px; font-weight:600; color:#3a4d63; display:block; margin-bottom:6px; }
.ff-in, .ff-contact input, .ff-contact textarea { width:100%; padding:12px 14px; border:1.5px solid #dbe6f2; border-radius:9px; font-size:14px; font-family:inherit; color:#10233a; }
.ff-in:focus, .ff-contact input:focus, .ff-contact textarea:focus { outline:none; border-color:var(--ff-accent); }
.ff-booking textarea { resize:vertical; }

/* confirm */
.ff-confirm-icon { width:64px; height:64px; border-radius:50%; background:#e7f2ff; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.ff-confirm-icon i { font-size:26px; color:var(--ff-accent); }
.ff-summary { text-align:left; background:#f4f8fd; border:1px solid #e2ecf7; border-radius:12px; padding:8px 24px; max-width:460px; margin:0 auto; }
.ff-sum-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #e6eef8; }
.ff-sum-row:last-child { border-bottom:none; }
.ff-sum-row span { color:#8496a9; font-size:13px; }
.ff-sum-row b { font-weight:600; font-size:14px; }

/* nav / buttons */
.ff-nav { display:flex; align-items:center; justify-content:space-between; margin-top:28px; }
.ff-btn { cursor:pointer; border:none; padding:11px 22px; border-radius:9px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; transition:.15s; }
.ff-back { background:#eaf1fb; color:var(--ff-accent); }
.ff-primary { background:var(--ff-accent); color:#fff; padding:11px 26px; }
.ff-primary:hover { background:var(--ff-accent-dark); }
.ff-primary[disabled], .ff-btn[disabled] { opacity:.6; cursor:not-allowed; }
.ff-block { width:100%; padding:15px; font-size:15px; font-weight:700; }
.ff-back[data-hidden="1"] { visibility:hidden; }
.ff-send.is-sent { background:#1e9e57; }

/* notes */
.ff-note { margin:16px 0 0; padding:12px 16px; border-radius:9px; font-size:14px; }
.ff-note.is-error { background:#fdecec; color:#c0392b; border:1px solid #f5c6c6; }
.ff-note.is-success { background:#e8f7ee; color:#1e7d47; border:1px solid #bfe6cd; }

/* contact block */
.ff-contact { max-width:none; }
.ff-contact > div { margin-bottom:16px; }

/* responsive */
@media (max-width:820px){ .ff-booking{ padding:24px 18px; } }
@media (max-width:620px){
  .ff-svc-grid { grid-template-columns:repeat(2,1fr); }
  .ff-day-grid { grid-template-columns:repeat(3,1fr); }
  .ff-time-grid { grid-template-columns:repeat(2,1fr); }
  .ff-row2 { grid-template-columns:1fr; }
  .ff-progress { flex-wrap:nowrap; gap:0; margin-bottom:22px; }
  .ff-step-node { gap:0; }
  .ff-step-line { width:100%; min-width:10px; margin:0 4px; }
  .ff-step-label { display:none; }
  .ff-step-node.is-active .ff-step-label { display:inline-block; font-size:12px; margin-left:8px; white-space:nowrap; }
}