/* ==========================================================================
   BF HERO PILL – shared feature CSS
   Clean merged version
   ========================================================================== */

/* ==========================================================================
   HERO WRAPPER
   ========================================================================== */
.bf-shop-hero{
  width: 100%;
  min-height: 80px;
  margin: 14px 0 14px 0;
  padding: 21px 0 14px;
  background: #faf7f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-shop-hero-inner{
  max-width: 1440px;
  width: 100%;
  padding: 0 16px;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px){
  .bf-shop-hero{
    position: sticky;
    top: 90px;
    z-index: 95;
  }
}

/* ==========================================================================
   HERO PILL
   ========================================================================== */
.bf-shop-hero-pill{
  position: relative;
  cursor: default;
  background: #ffffff;
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.09);
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 1;
}

.bf-hero-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.bf-hero-label{
  font-weight: 500;
}

.bf-shop-hero-pill .bf-hero-item--plz,
.bf-shop-hero-pill .bf-hero-item--date,
.bf-shop-hero-pill .bf-hero-item--time,
.bf-shop-hero-pill .bf-hero-item--guests{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  gap: 6px;
  min-width: 115px;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 25px;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.bf-shop-hero-pill .bf-hero-item--plz:hover,
.bf-shop-hero-pill .bf-hero-item--date:hover,
.bf-shop-hero-pill .bf-hero-item--time:hover,
.bf-shop-hero-pill .bf-hero-item--guests:hover{
  border-color: var(--global-palette-btn-bg, #9d0b02);
}

.bf-shop-hero-pill .bf-hero-date-time{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

.bf-shop-hero-pill .bf-hero-separator{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  line-height: 1;
  margin: 0;
  color: #000;
  font-size: 14px;
}

/* ==========================================================================
   HERO ICONS
   ========================================================================== */
.bf-hero-icon{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PLZ */
.bf-hero-icon--plz{
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2a7 7 0 0 0-7 7c0 4.1 5.2 10.2 6.3 11.4a1 1 0 0 0 1.4 0C13.8 19.2 19 13.1 19 9a7 7 0 0 0-7-7zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>\
</svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2a7 7 0 0 0-7 7c0 4.1 5.2 10.2 6.3 11.4a1 1 0 0 0 1.4 0C13.8 19.2 19 13.1 19 9a7 7 0 0 0-7-7zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>\
</svg>') center / contain no-repeat;
}

/* DATE */
.bf-hero-icon--date{
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zm12 7H5v10h14V9z"/>\
</svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zm12 7H5v10h14V9z"/>\
</svg>') center / contain no-repeat;
}

/* TIME */
.bf-hero-icon--time{
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm0 2a8 8 0 1 1-8 8 8 8 0 0 1 8-8zm-1 2v6.06l4.24 2.45a1 1 0 0 1-1 1.73l-4.74-2.74A1 1 0 0 1 9 12V6a1 1 0 0 1 2 0z"/>\
</svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm0 2a8 8 0 1 1-8 8 8 8 0 0 1 8-8zm-1 2v6.06l4.24 2.45a1 1 0 0 1-1 1.73l-4.74-2.74A1 1 0 0 1 9 12V6a1 1 0 0 1 2 0z"/>\
</svg>') center / contain no-repeat;
}

/* GUESTS */
.bf-hero-icon--guests{
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="12" cy="8" r="3"/>\
<path d="M5 20c0-4 3-7 7-7s7 3 7 7"/>\
</svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="12" cy="8" r="3"/>\
<path d="M5 20c0-4 3-7 7-7s7 3 7 7"/>\
</svg>') center / contain no-repeat;
}

/* ==========================================================================
   HERO INPUTS
   ========================================================================== */
.bf-hero-plz-input,
.bf-hero-guests-input{
  width: 55px;
  border: none !important;
  background: transparent;
  font: inherit;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 0 !important;
  outline: none;
  color: inherit;
  line-height: 1;
}

.bf-hero-plz-input::placeholder,
.bf-hero-guests-input::placeholder{
  color: #222;
  font-size: 14px;
  font-weight: 500;
}

.bf-hero-plz-input:-webkit-autofill,
.bf-hero-plz-input:-webkit-autofill:hover,
.bf-hero-plz-input:-webkit-autofill:focus,
.bf-hero-guests-input:-webkit-autofill,
.bf-hero-guests-input:-webkit-autofill:hover,
.bf-hero-guests-input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  box-shadow: 0 0 0 30px #ffffff inset !important;
  background-color: transparent !important;
}

/* ==========================================================================
   HERO MODAL
   ========================================================================== */
.bf-hero-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.bf-hero-modal.is-open{
  display: flex;
}

.bf-hero-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.bf-hero-modal__dialog{
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: 90vh;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  overflow-y: auto;
}

.bf-hero-modal__close{
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

body.bf-hero-modal-open{
  overflow: hidden;
}

/* ==========================================================================
   HERO TIME PICKER
   ========================================================================== */
.bf-hero-time-picker{
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #f0ece6;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  display: none;
  z-index: 40;
  font-size: 14px;
  white-space: nowrap;
}

.bf-hero-time-picker.is-open{
  display: inline-block;
}

.bf-hero-time-inner{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bf-hero-time-field{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 4px;
  border-radius: 25px;
  background: none;
  border: none;
}

.bf-hero-time-arrow{
  border: 0;
  background: transparent;
  color: #9d0b02;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color 0.12s ease, transform 0.05s ease;
}

.bf-hero-time-arrow:hover{
  color: #9d0b02;
  background: #faf7f3;
}

.bf-hero-time-value{
  min-width: 44px !important;
  max-width: 54px !important;
  padding: 8px 8px !important;
  border-radius: 25px !important;
  border: 1px solid #dddddd !important;
  background: #faf7f3 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

.bf-hero-time-sep,
.bf-hero-time-colon{
  font-size: 19px;
  font-weight: 600;
  padding: 0 2px;
}

@media (max-width: 480px){
  .bf-hero-time-picker{
    max-width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   CUSTOM CALENDAR
   ========================================================================== */
.bf-custom-calendar{
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 18px 22px 16px;
  background: #ffffff;
  border-radius: 25px;
  border: 1px solid #f0ece6;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
  display: none;
  z-index: 50;
  font-size: 13px;
  font-family: inherit;
}

.bf-custom-calendar.is-open{
  display: block;
}

.bf-custom-calendar-inner{
  min-width: 280px;
  max-width: 320px;
}

.bf-cc-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bf-cc-month-label{
  font-weight: 600;
  font-size: 14px;
}

.bf-cc-header .bf-cc-nav,
.bf-cc-nav{
  border: 1px solid transparent !important;
  background: transparent;
  cursor: pointer;
  width: 30px !important;
  height: 30px !important;
  border-radius: 25px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #333 !important;
  padding: 0 !important;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.bf-cc-header .bf-cc-nav:hover,
.bf-cc-nav:hover{
  background: #faf7f3 !important;
  color: #9d0b02 !important;
  border: 1px solid #dddddd !important;
  transform: translateY(-1px);
}

.bf-cc-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f5f1ea;
}

.bf-cc-weekdays span{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}

.bf-cc-days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
}

.bf-cc-day{
  padding: 0;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent !important;
  background: transparent;
  color: #333;
  font-size: 13px;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.bf-cc-day.is-empty{
  cursor: default;
  pointer-events: none;
}

.bf-cc-day.is-disabled{
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
}

.bf-cc-day.is-disabled:hover{
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}

.bf-cc-day:not(.is-empty):not(.is-disabled):not(.is-selected):hover{
  background: #faf7f3;
  color: #9d0b02;
  border: 1px solid #dddddd !important;
  transform: translateY(-1px);
}

.bf-cc-day.is-selected{
  background: #9d0b02;
  color: #ffffff;
  border: 1px solid #9d0b02 !important;
  transform: none;
  cursor: default;
}

.bf-cc-day.is-selected:hover{
  background: #9d0b02 !important;
  color: #ffffff !important;
  border: 1px solid #9d0b02 !important;
  transform: none !important;
}

.bf-cc-day.is-today:not(.is-selected){
  box-shadow: 0 0 0 1px #9d0b02;
}

.bf-cc-nav-icon{
  width: 14px;
  height: 14px;
}

@media (max-width: 480px){
  .bf-custom-calendar{
    max-width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   HERO INPUTS
   ========================================================================== */
.bf-hero-plz-input,
.bf-hero-guests-input{
  width: 55px;
  border: none !important;
  background: transparent;
  font: inherit;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 0 !important;
  outline: none;
  color: #222;
  caret-color: #222;
  line-height: 1;
  transition: text-align 0.15s ease, color 0.15s ease;
}

.bf-hero-plz-input::placeholder,
.bf-hero-guests-input::placeholder{
  color: #222;
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.bf-hero-plz-input:focus,
.bf-hero-guests-input:focus{
  text-align: left;
}

.bf-hero-plz-input:focus::placeholder,
.bf-hero-guests-input:focus::placeholder{
  opacity: 0.35;
}

.bf-hero-plz-input:not(:placeholder-shown),
.bf-hero-guests-input:not(:placeholder-shown){
  color: #222;
}

.bf-hero-plz-input:-webkit-autofill,
.bf-hero-plz-input:-webkit-autofill:hover,
.bf-hero-plz-input:-webkit-autofill:focus,
.bf-hero-guests-input:-webkit-autofill,
.bf-hero-guests-input:-webkit-autofill:hover,
.bf-hero-guests-input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  box-shadow: 0 0 0 30px #ffffff inset !important;
  background-color: transparent !important;
}

/* ==========================================================================
   HERO PILL – REAL MOBILE LAYOUT FOR YOUR ACTUAL MARKUP
   only below 630px
   ========================================================================== */

@media (max-width: 630px){
  .bf-shop-hero{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    min-height: 0 !important;
    margin: 8px 0 10px 0 !important;
    padding: 8px 0 6px !important;
  }

  .bf-shop-hero-inner{
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 !important;
    box-sizing: border-box !important;
  }

  .bf-shop-hero-pill{
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  /* hide the desktop separators */
  .bf-shop-hero-pill > .bf-hero-separator,
  .bf-shop-hero-pill .bf-hero-separator--inner{
    display: none !important;
  }

  /* place the real direct children */
  .bf-shop-hero-pill > .bf-hero-item--plz{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .bf-shop-hero-pill > .bf-hero-date-time{
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  .bf-shop-hero-pill > .bf-hero-item--guests{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* style left cells */
  .bf-shop-hero-pill > .bf-hero-item--plz,
  .bf-shop-hero-pill > .bf-hero-item--guests{
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    border: 1px solid #e8e2da !important;
    border-radius: 14px !important;
    background: #faf7f3 !important;
    box-sizing: border-box !important;
  }

  /* turn the date/time wrapper into a vertical stack */
  .bf-shop-hero-pill > .bf-hero-date-time{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  /* style date + time like two stacked cells */
  .bf-shop-hero-pill > .bf-hero-date-time > .bf-hero-item--date,
  .bf-shop-hero-pill > .bf-hero-date-time > .bf-hero-item--time{
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    border: 1px solid #e8e2da !important;
    border-radius: 14px !important;
    background: #faf7f3 !important;
    box-sizing: border-box !important;
  }

  .bf-hero-item{
    gap: 8px !important;
  }

  .bf-hero-icon{
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  .bf-hero-label{
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .bf-hero-plz-input,
  .bf-hero-guests-input{
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 13px !important;
  }

  .bf-hero-plz-input::placeholder,
  .bf-hero-guests-input::placeholder{
    font-size: 13px !important;
  }
}

@media (max-width: 630px){
  .bf-hero-plz-input,
  .bf-hero-guests-input{
    background: transparent !important;
    box-shadow: none !important;
    color: #222 !important;
    caret-color: #222 !important;
  }

  .bf-hero-plz-input::placeholder,
  .bf-hero-guests-input::placeholder{
    color: #222 !important;
    opacity: 1 !important;
  }

  .bf-hero-plz-input:-webkit-autofill,
  .bf-hero-plz-input:-webkit-autofill:hover,
  .bf-hero-plz-input:-webkit-autofill:focus,
  .bf-hero-guests-input:-webkit-autofill,
  .bf-hero-guests-input:-webkit-autofill:hover,
  .bf-hero-guests-input:-webkit-autofill:focus{
    -webkit-text-fill-color: #222 !important;
    -webkit-box-shadow: 0 0 0 30px #faf7f3 inset !important;
    box-shadow: 0 0 0 30px #faf7f3 inset !important;
    background-color: transparent !important;
  }
}