:root{
  --hhb-blue:#09374f;
  --hhb-beige:#eaeae3;
  --hhb-rose:#d1afa7;
  --hhb-white:#fff;

  --hhb-radius:4px;
  --hhb-radius-sm:4px;
  --hhb-shadow:0 12px 22px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05);
  --hhb-focus:0 0 0 3px rgba(9,55,79,.18);

  --hhb-text:#0b1a22;
  --hhb-muted:#6e7a84;
  --hhb-sep:#e8e8e2;
}

/* Barre de recherche */
.hhb-searchbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  border:1px solid var(--hhb-sep);
  padding:14px; border-radius:4px; background:#fff;
  box-shadow: var(--hhb-shadow);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--hhb-text);
}
.hhb-field{ display:flex; flex-direction:column; min-width:220px; flex:1; position:relative; }
.hhb-row{ display:flex; gap:12px; flex-wrap:wrap; width:100%; }

/* Destination drawer */
.hhb-drawer{ position:relative; }
.hhb-drawer .hhb-drawer-btn{
  justify-content:space-between; display:flex; width:100%; align-items:center;
  height:48px; padding:0 12px;
  cursor: pointer;
  border:1px solid var(--hhb-sep); border-radius:4px;
  background:#fff; text-align:left; color: #09374f;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hhb-drawer .hhb-drawer-btn:focus{ outline:none; border-color:var(--hhb-blue); box-shadow:var(--hhb-focus); }
.hhb-drawer .hhb-placeholder{ color:#737373; }
.hhb-drawer .hhb-drawer-btn svg{ width:20px; height:20px; opacity:.8; fill: #09374f;}
.hhb-drawer .hhb-drawer-panel{
  position:absolute; z-index:50; left:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--hhb-sep); border-radius:4px;
  box-shadow:0 12px 28px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  min-width:260px; padding:8px; display:none; max-height:420px; overflow:auto;
}
.hhb-continent-item{
  display:flex; align-items:center; gap:8px; padding:10px;
  border-radius:4px; cursor:pointer; color:#2a3a44;
}
.hhb-continent-item:hover{ background:#f7f7f7; }
.hhb-continent-item svg {
    width: 60px;
    height: 40px;
    opacity: 1;
    fill: #09374f;
}

/* Dates */
.hhb-search-dates{
  width:100%; height:48px; cursor:pointer;
  padding:0 44px 0 12px;
  border:1px solid var(--hhb-sep); border-radius:4px;
  background:#fff;  color: #09374f; font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hhb-search-dates:focus{ outline:none; border-color:var(--hhb-blue); box-shadow:var(--hhb-focus); }
.hhb-searchbar .hhb-clear-date{
  display:none; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  cursor:pointer; font-size:20px; 
    color: #09374f; line-height:1; user-select:none;
}
.hhb-clear-date:hover{ color:#333; }

/* ==== Voyageurs – version custom (belle dropdown) ==== */
.hhb-searchbar .hhb-travellers-control{
  width:100%; height:48px; background:#fff;
  border:1px solid var(--hhb-sep); border-radius:4px;
  padding:0 38px 0 12px; text-align:left; font-size:15px; cursor:pointer;
  color:#09374f; position:relative;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.hhb-travellers-label.hhb-placeholder{
    color: #737373;
}

.hhb-searchbar .hhb-travellers-control path {
    fill: #09374f;
}
.hhb-searchbar .hhb-travellers-control:focus{ outline:none; border-color:var(--hhb-blue); box-shadow:var(--hhb-focus); }
.hhb-travellers-caret{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.8;
  width: 20px; height: 20px;
}
.hhb-travellers-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--hhb-sep); border-radius:8px;
  box-shadow:var(--hhb-shadow); padding:6px; list-style:none; margin:0;
  z-index: 9999;
}
.hhb-travellers-menu[hidden]{ display:none; }
.hhb-travellers-menu li{
  padding:10px 12px; border-radius:8px; cursor:pointer; font-size:15px; color:#1e2b33;
}
.hhb-travellers-menu li:hover{ background:#f6f8f9; }
.hhb-travellers-menu li[aria-selected="true"]{
  background:#eef5f7; color:var(--hhb-blue); font-weight:600;
}

/* ==== Voyageurs – fallback select natif stylé (si jamais) ==== */
.hhb-select{ position:relative; }
.hhb-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; height:48px; border:1px solid var(--hhb-sep); border-radius:8px;
  padding:0 42px 0 12px; background:#fff; color:#2a3a44; font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hhb-select select:focus{ outline:none; border-color:var(--hhb-blue); box-shadow:var(--hhb-focus); }
.hhb-select-caret{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; opacity:.8; pointer-events:none;
}

/* Action */
.hhb-actions{ display:flex; gap:10px; align-items:center; }

/* Buttons */
.hhb-actions .button {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 13px 34px;
  min-width: 220px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  display: inline-flex;
  font-family: 'Montserrat', sans-serif;
  align-items: center;
  justify-content: center;
}
.hhb-actions .button:active{ transform:translateY(1px); }
.hhb-actions .button{ background:var(--hhb-blue) !important; color:#fff !important; border-color:var(--hhb-blue) !important; }
.hhb-actions .button:hover{ background:#072f40 !important; box-shadow: -1px 1px 5px rgb(0 0 0 / 5%); }
.hhb-actions .button.is-disabled {
    opacity: .89;
    background: #09374f;
    border-color: #09374f;
}

/* ===== Flatpickr – style + largeur = input ===== */
.hhb-searchbar .flatpickr-calendar{
  border-radius:4px; box-shadow:var(--hhb-shadow); border:1px solid var(--hhb-sep);
}

/* Positionnement du calendrier sous le champ dates, sans le forcer à prendre sa largeur */
.hhb-field[data-role="dates"] .flatpickr-calendar{
  width: max-content !important;
  min-width: 700px;
  max-width: calc(100vw - 24px);
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 8px) !important;
  transform: none !important;
  box-sizing: border-box;
}

/* Thème */
.hhb-searchbar .flatpickr-months, 
.hhb-searchbar .flatpickr-weekdays{ background:#fafaf8; color:#2a3a44; }
.hhb-searchbar .flatpickr-day.selected,
.hhb-searchbar .flatpickr-day.startRange,
.hhb-searchbar .flatpickr-day.endRange{ background:var(--hhb-blue); border-color:var(--hhb-blue); color:#fff; }
.hhb-searchbar .flatpickr-day.inRange{ background:rgba(9,55,79,.08); border-color:rgba(9,55,79,.08); }
.hhb-searchbar .flatpickr-day.hhb-search-minstay-blocked,
.hhb-searchbar .flatpickr-day.hhb-search-minstay-blocked:hover{
  background:#f7f7f4;
  color:#a3afb7;
  cursor:not-allowed;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #f3dcd7 !important;
  -webkit-box-shadow: -10px 0 0 #f3dcd7 !important;
}

/* Grille fluide 7 colonnes (évite la colonne du dimanche coupée) */
.hhb-searchbar .flatpickr-innerContainer{ display:block !important; width:auto !important; min-width:100%; }
.hhb-searchbar .flatpickr-rContainer{ width:auto !important; min-width:100%; }

.hhb-searchbar .flatpickr-weekdaycontainer{
  display:grid !important;
  grid-template-columns:repeat(7, minmax(0, 1fr));
}
.hhb-searchbar .flatpickr-weekday{
  text-align:center; font-weight:600; opacity:.7;
}

.hhb-searchbar .flatpickr-days{
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  padding:8px 12px 12px;
  box-sizing:border-box;
}
.hhb-searchbar .dayContainer{
  display:grid !important;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box;
}
.hhb-searchbar .flatpickr-day{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; max-width:none !important; margin:0 !important;
  height:44px; line-height:44px; border-radius:4px;
}

.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-months,
.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-weekdays,
.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-days{
  display:flex !important;
  gap:12px;
}

.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-month,
.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-weekdaycontainer,
.hhb-searchbar .flatpickr-calendar.multiMonth .dayContainer{
  flex:1 1 0;
  width:auto !important;
  min-width:0 !important;
}

.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-innerContainer,
.hhb-searchbar .flatpickr-calendar.multiMonth .flatpickr-rContainer{
  display:block !important;
  width:auto !important;
  min-width:100%;
}

/* États */
.hhb-searchbar .flatpickr-day.selected,
.hhb-searchbar .flatpickr-day.startRange,
.hhb-searchbar .flatpickr-day.endRange{
  background:var(--hhb-blue); border-color:var(--hhb-blue); color:#fff;
}
.hhb-searchbar .flatpickr-day.inRange{
  background:rgba(9,55,79,.08); border-color:rgba(9,55,79,.08);
}

.hhb-searchbar .flatpickr-day{
  border-radius:0px;
}

.flatpickr-day.inRange {
box-shadow: none;
}

/* Petits écrans : resserrer légèrement */
@media (max-width:480px){
  .hhb-field[data-role="dates"] .flatpickr-calendar{
    width: 100% !important;
    min-width: 0;
    max-width: none;
  }
  .hhb-searchbar .flatpickr-innerContainer,
  .hhb-searchbar .flatpickr-rContainer,
  .hhb-searchbar .flatpickr-days{
    width: 100% !important;
    min-width: 0 !important;
  }
  .hhb-searchbar .dayContainer{ gap:4px; }
  .hhb-searchbar .flatpickr-day{ height:38px; line-height:38px; font-size:13px; }
}
@media (max-width:360px){
  .hhb-searchbar .flatpickr-day{ height:34px; line-height:34px; font-size:12px; }
}

/* Responsive */
@media (max-width:760px){
  .hhb-field{ min-width:100%; }
  .hhb-actions .button{ width:100%; }
}
@media (max-width:1200px){
  .hhb-actions { width: 100%; }
  .hhb-actions .button { width: -webkit-fill-available; }
}


/* Drawer panel */
#hhb-dest-panel {
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #e6edf2;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Items */
#hhb-dest-panel .hhb-destination-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Texte par défaut */
#hhb-dest-panel .hhb-destination-item span {
  font-size: 14px;
  color: #0b2331;
}

/* Hover */
#hhb-dest-panel .hhb-destination-item:hover {
  background: rgba(9,55,79,.08); /* #09374f à 8% */
}

/* Focus clavier (accessibilité) */
#hhb-dest-panel .hhb-destination-item:focus {
  outline: 2px solid rgba(9,55,79,.45);
  outline-offset: 2px;
}

/* Sélectionné (aria-selected="true") */
#hhb-dest-panel .hhb-destination-item[aria-selected="true"] {
    background: rgb(238 245 247);
    box-shadow: inset 0 0 0 1px rgb(9 55 79 / 6%);
}
#hhb-dest-panel .hhb-destination-item[aria-selected="true"] span {
  color: #09374f;
  font-weight: 600;
}

/* Petit séparateur visuel entre items (optionnel) */
#hhb-dest-panel .hhb-destination-item + .hhb-destination-item {
  margin-top: 4px;
}

/* Scrollbar discrète (optionnel, WebKit) */
#hhb-dest-panel::-webkit-scrollbar { width: 8px; }
#hhb-dest-panel::-webkit-scrollbar-thumb {
  background: rgba(9,55,79,.25);
  border-radius: 8px;
}
#hhb-dest-panel::-webkit-scrollbar-track { background: transparent; }


.hhb-travellers-label.hhb-placeholder {
    letter-spacing: .2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.flatpickr-input[readonly] {
    letter-spacing: .2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}


.hhb-drawer .hhb-placeholder {
    letter-spacing: .2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.hhb-flex-flag {
display: none;
}
.hhb-flex-flag input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #09374f; /* joli sur les navigateurs qui le supportent */
}

/* footer dans le calendrier flatpickr */
.hhb-search-calendar .hhb-calendar-footer{
  border-top: 1px solid #e6eaee;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hhb-search-calendar .hhb-calendar-footer .hhb-flex-opt{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.hhb-search-calendar .hhb-calendar-footer .hhb-flex-opt input{
  width: 16px;
  height: 16px;
  margin: 0;
}

.hhb-searchbar .flatpickr-current-month{
  white-space: nowrap;
  line-height: 1.1;
}

.hhb-searchbar select.flatpickr-monthDropdown-months,
.hhb-searchbar input.numInput.cur-year{
  font-size: 14px !important;
  line-height: 1.1;
  height: auto;
}