/* ============================================================
   SalonFlow Search: formuláře (zápis salonu / poptávka na zvýraznění)
   Tokeny dědí ze style.css. Nadpisy vždy přes --color-text (čitelné v obou
   režimech). Ostré rohy scoped pod .sf-form-page, ať se nešíří na web.
   ============================================================ */
.sf-form-page {
  --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px;
  --ease: var(--ease-smooth, cubic-bezier(0.4,0,0.2,1));
}
[hidden] { display: none !important; }

.sfd-form-wrap { max-width: 820px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-3xl); }
.sfd-form-intro { margin-bottom: var(--space-xl); }
.sfd-form-intro h1 { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-4xl); letter-spacing: -0.02em; margin-bottom: var(--space-md); color: var(--color-text); }
.sfd-form-intro p { color: var(--color-text-secondary); font-size: var(--text-lg); max-width: 62ch; }
.sfd-form-intro p + p { margin-top: var(--space-sm); font-size: var(--text-base); }
.sfd-form-intro a { color: var(--color-gold); text-decoration: underline; }

.sfd-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}
.sfd-fs { border: none; margin: 0; padding: 0; }
.sfd-fs + .sfd-fs { margin-top: var(--space-xl); }
.sfd-fs > legend {
  font-family: var(--font-serif); font-weight: 700; font-size: var(--text-xl);
  color: var(--color-text);
  padding-bottom: var(--space-xs); margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-gold); width: 100%;
}
.sfd-fs__hint { font-size: var(--text-sm); color: var(--color-text-tertiary); margin: -8px 0 var(--space-md); }

.sfd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); }
.sfd-field { display: flex; flex-direction: column; gap: 5px; }
.sfd-field--full { grid-column: 1 / -1; }
.sfd-field > label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.sfd-field > label .req { color: var(--color-cat-psa); margin-left: 2px; }
.sfd-field small { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.sfd-input, .sfd-textarea, .sf-form-page select {
  font: inherit; width: 100%; padding: 9px 12px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); color: var(--color-text); outline: none;
}
.sfd-input:focus, .sfd-textarea:focus, .sf-form-page select:focus { border-color: var(--color-gold); }
.sfd-textarea { min-height: 92px; resize: vertical; }

.sfd-choice { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sfd-choice label, .sfd-choice__solo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer;
}
.sfd-choice input, .sfd-choice__solo input { accent-color: var(--color-gold); }
.sfd-choice label:has(input:checked), .sfd-choice__solo:has(input:checked) { border-color: var(--color-gold); background: rgba(194,163,107,.1); }

.sfd-round { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; background: var(--color-bg-alt); }
.sfd-round__head { display: flex; align-items: center; gap: 8px; }
.sfd-round__n { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--color-gold); color: var(--color-umber); border-radius: var(--radius-sm); }
.sfd-round__del { flex-shrink: 0; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; width: 28px; height: 28px; }
.sfd-round__del:hover { border-color: var(--color-cat-psa); color: var(--color-cat-psa); }
.sfd-round__codes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sfd-round__codes .sfd-input { flex: 1 1 130px; }

.sfd-btn {
  font: inherit; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); color: var(--color-text);
}
.sfd-btn:hover { border-color: var(--color-gold); }
.sfd-btn--sm { padding: 7px 12px; font-size: var(--text-sm); }

.sfd-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-text-secondary); }
.sfd-consent input { accent-color: var(--color-gold); margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }

.sfd-form__foot { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.sfd-form__note { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.sfd-form__submit {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 12px 24px; border-radius: var(--radius-sm);
  background: var(--color-gold); border: 1px solid var(--color-gold); color: var(--color-umber);
}
.sfd-form__submit:hover { background: var(--color-gold-dark); border-color: var(--color-gold-dark); }
.sfd-form__submit[disabled] { opacity: .6; cursor: default; }

.sfd-form-result {
  margin-top: var(--space-xl);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--color-surface);
}
.sfd-form-result h2 { font-family: var(--font-serif); color: var(--color-text); font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.sfd-form-result p { color: var(--color-text-secondary); }
.sfd-form-result--err { border-color: var(--color-cat-psa); }
.sfd-form-err { color: var(--color-cat-psa); font-size: var(--text-sm); margin-top: 8px; }

.sfd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .sfd-grid { grid-template-columns: 1fr; }
  .sfd-form { padding: var(--space-lg); }
  .sfd-form-intro h1 { font-size: var(--text-3xl); }
}