/* =========================
   BOOKING AVAILABLE (theme integrations)
   ========================= */
.br-booking-available .pxp-sp-agent-btns{
  display:none !important; /* hide KONTAKT button area */
}

/* If booking is available, force agent box to behave normal (no sticky) */
body.br-booking-available #sticky-wrapper{
  height:auto !important;
}
body.br-booking-available #sticky-wrapper .pxp-sp-agent-section{
  position:static !important;
  top:auto !important;
  bottom:auto !important;
  width:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* =========================
   BASE LAYOUT
   ========================= */
.br-wrap{margin:16px 0;}
.br-form{
  display:block;
  max-width:520px;
}

/* nicer spacing/lines inside the agent box */
.br-field{
  margin:0 0 12px 0;
}
.br-field input,
.br-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:.35rem;
  box-sizing:border-box;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.br-field textarea{resize:vertical;}
.br-field input::placeholder,
.br-field textarea::placeholder{
  color:rgba(0,0,0,.55);
  font-size:12px;
}

/* subtle focus */
.br-field input:focus,
.br-field textarea:focus{
  outline:none;
  border-color:rgba(167,201,175,.9);
  box-shadow:0 0 0 3px rgba(167,201,175,.18);
}

/* =========================
   BUTTON
   ========================= */
.br-btn{
  display:block;
  width:100%;
  height:46px;
  line-height:46px;
  padding:0;
  border-radius:.35rem;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;

  font-size:.9rem;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;

  font-family:"Brandon Text Medium";
  font-weight:unset;

  background-color:#a7c9af;
  border:1px solid #a7c9af;

  transition:all .2s ease-in-out;
  margin-bottom:10px;
}
.br-btn:hover{
  filter:brightness(.97);
}
.br-btn:focus,
.br-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(167,201,175,.25);
}

/* =========================
   CALENDAR + SLOTS
   ========================= */
.br-grid{display:block;}

/* Head label above calendar */
.br-cal-head{
  font-weight:600;
  margin-bottom:10px;
}

/* Hide the date input above inline calendar (keep it for flatpickr) */
.br-field .br-grid .br-slots-head input#br_date{
display: none!important;
}

/* Flatpickr shell */
.br-cal .flatpickr-calendar.inline{
  box-shadow:none;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  overflow:hidden;
}
.br-cal .flatpickr-months{
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}

/* Day style */
.br-cal .flatpickr-day{
  border-radius:50%;
}

/* Selected day style (your existing look) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay{
  background:#000000 !important;
  box-shadow:none;
  color:#fff;
  border-color:#cccccc !important;
}
.flatpickr-day.today{
  border-color:#d7d7d7;
}

/* === Flatpickr: truly full width (kills fixed/min widths) === */
.br-cal,
.br-cal .flatpickr-wrapper,
.br-cal .flatpickr-calendar,
.br-cal .flatpickr-calendar.inline{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* These are the usual culprits for the “left inside” look */
.br-cal .flatpickr-innerContainer{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
}
.br-cal .flatpickr-rContainer{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  flex:1 1 auto !important;
}
.br-cal .flatpickr-weekdays,
.br-cal .flatpickr-days{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.br-cal .flatpickr-weekdaycontainer{
  width:100% !important;
}
.br-cal .dayContainer{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  flex:1 1 auto !important;
}

/* =========================
   SLOTS
   ========================= */
.br-slots{margin-top:14px;}
.br-slots-head{
  font-weight:600;
  margin-bottom:10px;
}

/* 3 columns + tighter rhythm */
.br-slots-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

/* slot button */
.br-slot{
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:.35rem;
  background:#fff;
  cursor:pointer;
  text-align:center;
  font-size:14px;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.br-slot.is-active{
  border:none;
  box-shadow:0 0 0 1px #cccccc80 inset;
  background:#a7c9af;
  color:#ffffff;
}
.br-slot.is-disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Remove weird browser outlines cleanly */
.br-slot:focus,
.br-slot:focus-visible,
.br-slot:active{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(167,201,175,.35);
}
.br-slot.is-active:focus,
.br-slot.is-active:focus-visible{
  outline:none !important;
}

/* =========================
   SUMMARY BOX
   ========================= */
div#br_term_summary{
  font-size:12px;
  padding:10px 12px;
  border:1px dashed #afafaf;
  background:#f8f8f8;
  margin:0 0 18px auto;
  border-radius:.35rem;
}

/* =========================
   ERRORS (final, matches JS)
   ========================= */

/* red border target */
.br-is-error{
  border-color:#cc0000 !important;
  box-shadow:0 0 0 1px rgba(204,0,0,.25) inset;
}

/* JS injected error ABOVE field */
.br-error{
  font-size:13px;
  color:#cc0000;
}
.br-error.br-js-error{
  margin:0 0 6px 0; /* above field */
}

/* If time missing, JS adds br-is-error to #br_slots */
#br_slots.br-is-error{
  border:1px solid #cc0000;
  border-radius:.35rem;
  padding:6px;
}

/* =========================
   GDPR
   ========================= */
.br-gdpr{margin-top:8px;}
.br-gdpr-label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.35;
}
.br-gdpr-label input{
  width:18px;
  height:18px;
  margin-top:2px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (min-width:1024px){
  .br-form{max-width:560px;}
}
/* ==========================================================
   FIX: Flatpickr layout broken by theme (select/input styles)
   Put this at the END of your CSS file
   ========================================================== */

.br-wrap .flatpickr-calendar,
.br-wrap .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Make header behave + stop theme from making select huge */
.br-wrap .flatpickr-current-month{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  height: auto !important;
}

.br-wrap .flatpickr-current-month select.flatpickr-monthDropdown-months{
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;

  width: auto !important;
  max-width: 100% !important;
  height: auto !important;

  padding: 2px 6px !important;
  margin: 0 !important;

  border: none;
  border-radius: 6px !important;
  background: #fff !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.br-wrap .flatpickr-current-month .numInputWrapper{
  width: auto !important;
}
.br-wrap .flatpickr-current-month input.cur-year{
  font-size: 14px !important;
  padding: 2px 6px !important;
  border: none;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  height: auto !important;
}

/* Force weekdays + days to be a real 7-col grid (theme breaks widths) */
.br-wrap .flatpickr-weekdaycontainer{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.br-wrap .flatpickr-weekday{
  width: auto !important;
  flex: initial !important;
  text-align: center !important;
}

.br-wrap .dayContainer{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Flatpickr day spans have hard widths -> kill them */
.br-wrap .flatpickr-day{
  width: 100% !important;
  max-width: none !important;
  flex-basis: auto !important;
  box-sizing: border-box !important;
}

/* Optional: give the calendar a stable height so it doesn't jump while loading */
.br-wrap .flatpickr-calendar.inline{
  min-height: 320px;
}

/* ---------------- Thank-you popup ---------------- */
.br-popup{display:none;}
.br-popup.is-open{display:block;}

.br-popup-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:99998;
}

.br-popup-card{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(720px, calc(100% - 32px));
  background:#fff;
  border-radius:14px;
  padding:22px 22px 18px;
  z-index:99999;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}

.br-popup-card h2{margin:0 0 10px 0; font-size:22px;}
.br-popup-body{font-size:14px; line-height:1.5;}
.br-popup-body p{margin:0 0 10px 0;}

.br-popup-close{
  position:absolute;
  right:10px; top:10px;
  width:38px; height:38px;
  border:0; background:transparent;
  font-size:28px;
  line-height:38px;
  cursor:pointer;
}

/* lnch */
.flatpickr-months .flatpickr-month {
	padding-bottom:46px;
}
.flatpickr-rContainer, .flatpickr-days, .flatpickr-innerContainer {
	width:100%!important;
}
.flatpickr-innerContainer {
    padding: 0 10px;
}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
	fill: #a7c9af;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
	padding:4px;
	    background: #f7f7f7;
	border: 1px solid #ebebeb;
}
.br-blocked-note{
  margin-top:10px;
  font-size:14px;
  line-height:1.4;
  color:#7a3b2e;
  text-align:center;
}