/**
 * s1-form.css — Formulaire création / édition d'un plan
 */

/* ─── OVERLAY + BOTTOM SHEET ─────────────────────────────────────────────── */

.sf-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #FAF8FF;     /* fond solide — fonctionne en modal et en navigation directe */
  display: flex;
  flex-direction: column;
}

.sf-sheet {
  flex: 1;
  background: #FAF8FF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dh-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) { .sf-sheet { animation: none; } }

/* ─── HEADER (fond blanc) ────────────────────────────────────────────────── */

.sf-modal-header {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-4);
  flex-shrink: 0;
}

.sf-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
}

.sf-modal-close {
  position: absolute;
  right: var(--s-4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-2);
}

.sf-modal-close:active { background: var(--c-border); }

/* ─── SCROLL + FORM ──────────────────────────────────────────────────────── */

.sf-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sf-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-4);
}

/* ─── FOOTER (fond blanc, CTA fixé en bas) ───────────────────────────────── */

.sf-footer {
  background: #fff;
  padding: var(--s-3) var(--s-4) calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex-shrink: 0;
  border-top: 1px solid var(--c-border);
}

/* ─── SECTIONS ───────────────────────────────────────────────────────────── */

.sf-section { display: flex; flex-direction: column; gap: var(--s-2); }

/* Label de section : icône trait accent + texte (14px/600) */
.sf-section-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-2);
}

/* Icône SVG sans background — trait accent seul */
.sf-label-icon {
  width: 16px;
  height: 16px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* ─── CHAMPS DE FORMULAIRE ───────────────────────────────────────────────── */

.sf-input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-m);
  box-shadow: var(--sh-m);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-ink);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}

.sf-input:focus        { border-color: var(--c-accent); }
.sf-input::placeholder { color: var(--c-ink-3); }

/* ─── BUDGET CARD ────────────────────────────────────────────────────────── */

.sf-budget-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-m);
  box-shadow: var(--sh-m);
  transition: border-color .15s;
}

.sf-budget-card:focus-within { border-color: var(--c-accent); }

.sf-budget-symbol {
  font-size: 28px;
  font-weight: 800;
  color: var(--c-accent);
  flex-shrink: 0;
  line-height: 1;
}

.sf-budget-input {
  flex: 1;
  font-size: 32px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.03em;
  border: none;
  background: none;
  font-family: inherit;
  outline: none;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.sf-budget-input::placeholder { color: var(--c-border); }

/* ─── CHIPS DEVISE ───────────────────────────────────────────────────────── */

.sf-chips-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.sf-chips-row::-webkit-scrollbar { display: none; }

/* Inactif */
.sf-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--r-s);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
}

/* Actif */
.sf-chip--active {
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  color: var(--c-accent-light);
  border-radius: var(--r-s);
}

/* ─── DATES DU SÉJOUR ────────────────────────────────────────────────────── */

.sf-dates-trigger {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-m);
  box-shadow: var(--sh-m);
  padding: var(--s-3) var(--s-4);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  gap: var(--s-2);
  transition: border-color .15s;
}

.sf-dates-trigger:active { border-color: var(--c-accent); }

.sf-dates-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.sf-date-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.sf-date-box-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.sf-date-box-value       { font-size: 16px; font-weight: 400; color: var(--c-accent); }
.sf-date-box-placeholder { color: var(--c-ink-3); font-weight: 500; }
.sf-dates-arrow          { font-size: 16px; color: var(--c-ink-3); flex-shrink: 0; }

.sf-dates-edit-row {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--s-1);
  border-top: 1px solid var(--c-border);
}

.sf-dates-edit-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent);
}

/* ─── CARD INFORMATIONS VOYAGE ───────────────────────────────────────────── */
/*
 * Structure :
 *   .sf-info-outer  (#F7F5FF) — carte englobante
 *     .sf-info-item (blanc)   — carte intérieure × 2
 *       .sf-mini-icon (#DFDDFB) — rectangle arrondi avec icône accent
 *       .sf-info-item-body    — titre + valeur calculée
 */

.sf-info-outer {
  background: #F7F5FF;
  border-radius: var(--r-m);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sf-info-item {
  background: #fff;
  border-radius: var(--r-m);
  padding: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Mini card avec fond #DFDDFB contenant l'icône */
.sf-mini-icon {
  width: 38px;
  height: 38px;
  background: #DFDDFB;
  border-radius: var(--r-s);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  flex-shrink: 0;
}

.sf-info-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sf-info-item-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.sf-info-item-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* ─── ERREUR ─────────────────────────────────────────────────────────────── */

.sf-error {
  font-size: 13px;
  color: var(--c-red);
  font-weight: 500;
  text-align: center;
  padding: var(--s-1) 0;
}

/* ─── BOUTONS ────────────────────────────────────────────────────────────── */

.sf-cta {
  width: 100%;
  padding: 16px var(--s-4);
  background: var(--c-accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s;
}

.sf-cta:hover  { background: #3d44b8; }
.sf-cta:active { background: #3034a0; }

.sf-delete {
  width: 100%;
  padding: 14px var(--s-4);
  background: transparent;
  color: var(--c-red);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid var(--c-red);
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s;
}

.sf-delete:active { background: rgba(225,29,72,0.06); }