/* Formulaire de réservation Camping.care – Camping des Pêches
 * Les !important neutralisent les styles génériques du site (bootstrap, main.css)
 * sur input / label / button. */
.cc-booking {
  --cc-green: #6a9b35;
  --cc-green-dark: #557d29;
  --cc-blue: #1d5d8f;
  --cc-text: #222;
  --cc-border: #b9b9b9;
  font-family: inherit;
  color: var(--cc-text);
}
.cc-booking *, .cc-booking *::before, .cc-booking *::after { box-sizing: border-box; }
.cc-booking [hidden] { display: none !important; }

.cc-booking .cc-form { display: flex; gap: 12px 20px; margin: 0; }
.cc-booking .cc-field { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cc-booking .cc-field > label,
.cc-booking .cc-label {
  display: block; margin: 0 !important; padding: 0;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.cc-booking .cc-input-wrap { position: relative; }

.cc-booking .cc-input {
  display: block; width: 100%; height: 32px !important; margin: 0 !important;
  padding: 0 30px 0 8px !important;
  font: inherit; font-size: 14px !important; line-height: 30px !important;
  color: var(--cc-text); text-align: left;
  background: #fff no-repeat right 8px center / 16px;
  border: 1px solid var(--cc-border); border-radius: 0; box-shadow: none;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-booking .cc-input:focus { outline: 2px solid var(--cc-blue); outline-offset: 1px; }
.cc-booking input.cc-input[type="hidden"] { display: none !important; }
/* icône calendrier */
.cc-booking .cc-field--dates .cc-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
/* icône personnes */
.cc-booking .cc-guests-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14c2.6 0 4.5 1.8 4.5 4.5'/%3E%3C/svg%3E");
}

/* Panneau personnes */
.cc-booking .cc-guests-panel {
  position: absolute; z-index: 1000; top: calc(100% + 6px); left: 0;
  width: 250px; padding: 12px; background: #fff; color: var(--cc-text);
  border: 1px solid #ccc; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.cc-booking .cc-guest-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.cc-booking .cc-guest-row + .cc-guest-row { border-top: 1px solid #eee; }
.cc-booking .cc-stepper { display: inline-flex; align-items: center; gap: 10px; }
.cc-booking .cc-step {
  width: 30px; height: 30px; padding: 0 !important; margin: 0;
  font-size: 18px; line-height: 1; color: var(--cc-blue); background: #fff;
  border: 1px solid var(--cc-blue); border-radius: 50%; cursor: pointer;
}
.cc-booking .cc-step:disabled { opacity: .3; cursor: default; }
.cc-booking .cc-count { min-width: 18px; text-align: center; font-weight: 600; }
.cc-booking .cc-guests-done {
  display: block; width: 100%; margin: 10px 0 0; height: 32px; padding: 0 !important;
  font: inherit; font-size: 14px; color: #fff; background: var(--cc-green); border: 0; cursor: pointer;
}

/* Sélecteur Tout / Location / Camping */
.cc-booking .cc-seg { display: inline-flex; height: 32px; }
.cc-booking .cc-seg input { position: absolute; opacity: 0; pointer-events: none; margin: 0; }
.cc-booking .cc-seg label {
  display: flex; align-items: center; height: 32px; padding: 0 12px; margin: 0 !important;
  font-size: 14px; font-weight: 400 !important; cursor: pointer; white-space: nowrap;
  border: 1px solid currentColor; user-select: none;
}
.cc-booking .cc-seg label + input + label { border-left: 0; }
.cc-booking .cc-seg input:focus-visible + label { outline: 2px solid var(--cc-blue); outline-offset: 1px; }

/* Bouton */
.cc-booking .cc-submit {
  height: 32px; margin: 0 !important; padding: 0 18px !important;
  font: inherit; font-size: 14px; line-height: 30px !important;
  text-transform: uppercase; letter-spacing: .03em; cursor: pointer; white-space: nowrap; border-radius: 0;
}

.cc-booking .cc-error { flex-basis: 100%; font-size: 13px; }

/* ==================================================================
 * Variante bande verte (homepage) : une seule ligne, labels à gauche
 * ================================================================== */
.cc-booking--band { color: #fff; }
.cc-booking--band .cc-form {
  flex-wrap: nowrap; align-items: center; justify-content: center;
  min-height: 65px; padding: 0 16px; gap: 0 22px;
}
.cc-booking--band .cc-field { flex-direction: row; align-items: center; gap: 8px; }
.cc-booking--band .cc-field--dates .cc-input-wrap  { width: 230px; }
.cc-booking--band .cc-field--guests .cc-input-wrap { width: 170px; }
.cc-booking--band .cc-field > label,
.cc-booking--band .cc-label { color: #fff; font-weight: 400; font-size: 15px; }
.cc-booking--band .cc-field--type .cc-label,
.cc-booking--band .cc-field--submit .cc-label { display: none; }
.cc-booking--band .cc-input { border-color: #fff; }
.cc-booking--band .cc-seg label { color: #fff; }
.cc-booking--band .cc-seg input:checked + label { background: #fff; color: var(--cc-green-dark); }
.cc-booking--band .cc-submit { color: #fff; background: transparent; border: 1px solid #fff; }
.cc-booking--band .cc-submit:hover { background: #fff; color: var(--cc-green-dark); }
/* Le slider (#slider) est en overflow:hidden : le panneau s'ouvre donc vers le haut, sur l'image */
.cc-booking--band .cc-guests-panel { top: auto; bottom: calc(100% + 6px); }
.cc-booking--band .cc-error {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 6px 12px; background: #b3261e; color: #fff; white-space: nowrap;
}
.cc-booking--band .cc-form { position: relative; }

/* ==================================================================
 * Variante empilée (pages internes)
 * ================================================================== */
.cc-booking--stacked .cc-form { flex-direction: column; gap: 14px; max-width: 320px; }
.cc-booking--stacked .cc-seg { display: flex; color: var(--cc-blue); }
.cc-booking--stacked .cc-seg label { flex: 1; justify-content: center; padding: 0 6px; }
.cc-booking--stacked .cc-seg input:checked + label { background: var(--cc-blue); color: #fff; border-color: var(--cc-blue); }
.cc-booking--stacked .cc-field--submit .cc-label { display: none; }
.cc-booking--stacked .cc-submit { width: 100%; color: #fff; background: var(--cc-green); border: 0; }
.cc-booking--stacked .cc-submit:hover { background: var(--cc-green-dark); }
.cc-booking--stacked .cc-guests-panel { width: 100%; }
.cc-booking--stacked .cc-error { color: #b3261e; }

/* Écrans moyens : on réduit les largeurs */
@media (max-width: 1100px) {
  .cc-booking--band .cc-form { gap: 0 12px; }
  .cc-booking--band .cc-field--dates .cc-input-wrap  { width: 200px; }
  .cc-booking--band .cc-field--guests .cc-input-wrap { width: 150px; }
  .cc-booking--band .cc-field > label { display: none !important; }
}
/* Mobile : la bande passe en colonne */
@media (max-width: 768px) {
  .cc-booking--band .cc-form { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 10px; }
  .cc-booking--band .cc-field { flex-direction: column; align-items: stretch; }
  .cc-booking--band .cc-field--dates .cc-input-wrap,
  .cc-booking--band .cc-field--guests .cc-input-wrap { width: auto; }
  .cc-booking--band .cc-seg { display: flex; }
  .cc-booking--band .cc-seg label { flex: 1; justify-content: center; }
  .cc-booking--band .cc-guests-panel { width: 100%; }
}

/* Corrections calendrier :
 * - bootstrap 3 définit .hidden { display:none !important } -> les jours des mois
 *   voisins disparaissaient et tout le mois se décalait (14 oct. sous "samedi")
 * - en affichage 2 mois, flatpickr ne calcule pas la largeur sur ce site */
.flatpickr-calendar .flatpickr-day.hidden { display: block !important; visibility: hidden; }
.flatpickr-calendar.multiMonth,
.flatpickr-calendar.multiMonth .flatpickr-days { width: 617.75px !important; }

/* Calendrier aux couleurs du site */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background: #6a9b35; border-color: #6a9b35;
}
.flatpickr-day.inRange { background: #e6f0da; border-color: #e6f0da; box-shadow: -5px 0 0 #e6f0da, 5px 0 0 #e6f0da; }