


.datepicker{border-radius:12px!important;padding:14px!important;box-shadow:0 15px 35px rgba(0,0,0,.18)!important;border:0!important;width:290px;z-index:9999!important}
.datepicker .datepicker-switch{background:#f3f4f6!important;border-radius:6px!important;font-weight:600!important;border:1px solid #e5e7eb!important}
.datepicker table tr td.disabled{background:#e5e7eb!important;color:#9ca3af!important;border-radius:4px!important}
.datepicker table tr td.active.active{background:#fff!important;border:2px solid #3b82f6!important;color:#111!important}
.datepicker .clear{border:1px solid #9ca3af!important;border-radius:6px!important;padding:5px 16px!important;background:#f3f4f6!important}
#datepicker-wrap{position:relative;cursor:pointer} 
#datepicker-wrap .fa{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none}
#datepicker-wrap input{background:#fff!important;cursor:pointer}
/* FIX - prevent clipping */
.bf-field, .bf-step, #step-1 { overflow: visible !important; }
#datepicker-wrap{ overflow: visible !important; position:relative; }
.datepicker-dropdown{ z-index: 99999 !important; }
.datepicker{ 
  z-index: 99999 !important;
  position: absolute !important;
}
.datepicker{ display:none; }
.datepicker.datepicker-dropdown{ display:none; }

/* FORCE DATEPICKER ON TOP OF EVERYTHING */
.datepicker,
.datepicker-dropdown,
.datepicker.datepicker-dropdown{
  z-index: 2147483647 !important; /* max possible */
  position: absolute !important;
}

body > .datepicker{
  z-index: 2147483647 !important;
}


#datepicker-wrap{
  z-index: 10;
}

/* REMOVE YELLOW BORDER ON DATE INPUT */
#input-date-picker,
#input-date-picker:focus,
#input-date-picker:focus-visible,
#input-date,
#booking_date,
#input-time{

  box-shadow: none !important;
 
}

#input-date-picker:focus{
  border-color: none !important; /* grey on focus, not yellow */
}

/* if bootstrap adds .form-control yellow */
.form-control:focus{
  box-shadow: none !important;
  border-color: none !important;
}
/* MAKE CALENDAR FILL INPUT WIDTH */
.datepicker.datepicker-dropdown{
  width: 100% !important;
  max-width: 360px !important; /* same as your input */
  padding: 12px !important;
  box-sizing: border-box;
}

.datepicker table{
  width: 100% !important;
}

.datepicker table tr td,
.datepicker table tr th{
  width: 14.28% !important; /* 7 days = equal spacing */
  height: 10px !important;
  padding: 3px 0 !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* Header bigger */
.datepicker .datepicker-switch{
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Space the Clear/Close button full width */
.datepicker tfoot .clear,
.datepicker .clear{
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px !important;
}
#input-date-picker{
  padding-left: 0px !important;
}