/* flex-dates.css — styles for the shared exact/flexible date controls
 * (flex-dates.js). Loaded on every page that mounts FlexDates (explore.html,
 * alerts.html, watch.html) so the control looks identical everywhere. Consumes
 * the site's design tokens with fallbacks; never redefines a :root token.
 * CSP is 'self' — no inline styles anywhere. Matches the .sf-tri segmented
 * language already used by the amenity tri-controls. */

/* --- mode toggle (Exact / Flexible) --- */
.fd-mode-toggle {
  display: inline-flex;
  border: 1.5px solid var(--line-strong, #cdd3cd);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 0.7rem;
}
.fd-mode-seg {
  appearance: none;
  border: 0;
  border-left: 1.5px solid var(--line-strong, #cdd3cd);
  background: transparent;
  color: var(--ink, #22271f);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  line-height: 1.2;
}
.fd-mode-seg:first-child { border-left: 0; }
.fd-mode-seg:hover { background: var(--paper-soft, #f2f4ef); }
.fd-mode-seg.is-active { background: var(--forest, #2c5a43); color: #fff; }
.fd-mode-seg:focus-visible { outline: 3px solid var(--forest, #2c5a43); outline-offset: -2px; }

/* --- window prompt --- */
.fd-window-prompt {
  font-size: 0.9rem;
  color: var(--sage, #5f6b5a);
  margin: 0 0 0.4rem;
}

/* --- nights stepper --- */
.fd-nights { margin: 0.7rem 0 0.2rem; }
.fd-nights-label {
  font-size: 0.94rem;
  color: var(--ink, #22271f);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.fd-nights-row {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1.5px solid var(--line-strong, #cdd3cd);
  border-radius: 999px;
  padding: 0.15rem;
}
.fd-step-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--forest, #2c5a43);
  font-size: 1.3rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  cursor: pointer;
}
.fd-step-btn:hover:not(:disabled) { background: var(--paper-soft, #f2f4ef); }
.fd-step-btn:disabled { color: var(--line-strong, #cdd3cd); cursor: default; }
.fd-step-btn:focus-visible { outline: 3px solid var(--forest, #2c5a43); outline-offset: 1px; }
.fd-nights-value {
  min-width: 2.2rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #22271f);
  font-variant-numeric: tabular-nums;
}

/* --- min-stay nudge + flexible explainer --- */
.fd-minstay-nudge,
.fd-flexible-explain {
  font-size: 0.82rem;
  color: var(--sage, #5f6b5a);
  line-height: 1.4;
  margin: 0.45rem 0 0;
}
.fd-flexible-explain { color: var(--ink, #22271f); }

/* --- validation message --- */
.fd-validation {
  font-size: 0.84rem;
  color: var(--clay, #b4532f);
  line-height: 1.4;
  margin: 0.45rem 0 0;
}

/* --- min-stay badge on site/park rows (Scope B) --- */
.fd-minstay-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ember-deep, #8a3d15);
  background: var(--avail-soon-bg, rgba(177, 79, 28, 0.10));
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}