/* Monk Bookings Hub — Premium booking UI */
.monk-bkh-form{
  --bkh-radius:14px;
  --bkh-border: rgba(20,20,20,.18);
  --bkh-border-strong: rgba(20,20,20,.32);
  --bkh-shadow: 0 14px 40px rgba(0,0,0,.10);
  --bkh-shadow-soft: 0 10px 24px rgba(0,0,0,.08);
  --bkh-accent: rgba(180,150,60,.75);
  --bkh-accent-soft: rgba(180,150,60,.16);
}

/* Wraps: ensures CF7 error tip appears under the correct visible control */
.monk-bkh-date-wrap,
.monk-bkh-time-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  display:block;
}

/* Inputs / selects */
.monk-bkh-form .monk-bkh-date-input,
.monk-bkh-form .monk-bkh-select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  height:54px;
  padding:0 14px;
  border-radius:var(--bkh-radius);
  border:1px solid var(--bkh-border);
  background:#fff;
  font-size:16px;
  line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.monk-bkh-form .monk-bkh-date-input{
  cursor:pointer;
  padding-right:44px;
}

.monk-bkh-form .monk-bkh-date-input:focus,
.monk-bkh-form .monk-bkh-select:focus{
  outline:none;
  border-color:var(--bkh-border-strong);
  box-shadow:0 0 0 4px var(--bkh-accent-soft), 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Calendar icon */
.monk-bkh-form .monk-bkh-date-wrap:after{
  content:'📅';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.55;
  font-size:18px;
}

/* Hide original CF7 fields */
.monk-bkh-hidden{display:none!important;}

/* Ensure CF7 tip sits below the visible control */
.monk-bkh-date-wrap + .monk-bkh-hidden + .wpcf7-not-valid-tip,
.monk-bkh-time-wrap + .monk-bkh-hidden + .wpcf7-not-valid-tip{
  margin-top:6px;
}

/* Time select: keep for accessibility, hide visually (pills are primary UI) */
.monk-bkh-form .monk-bkh-time-wrap .monk-bkh-time-select{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* Time grid pills */
.monk-bkh-form .monk-bkh-time-grid{
  display:grid !important;
  width:100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap:10px;
  margin: 4px 0 6px;
}

/* Defensive: some themes override display/layout on div/button inside CF7 */
form.wpcf7-form.monk-bkh-form .monk-bkh-time-grid{ display:grid !important; }
form.wpcf7-form.monk-bkh-form .monk-bkh-time-pill{ width:100% !important; }
form.wpcf7-form.monk-bkh-form .monk-bkh-time-wrap select.monk-bkh-time-select{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

@media (max-width: 900px){
  .monk-bkh-form .monk-bkh-time-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  form.wpcf7-form.monk-bkh-form .monk-bkh-time-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .monk-bkh-form .monk-bkh-time-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  form.wpcf7-form.monk-bkh-form .monk-bkh-time-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.monk-bkh-form .monk-bkh-time-grid.is-disabled{
  opacity:.55;
  pointer-events:none;
}

.monk-bkh-form .monk-bkh-time-pill{
  /* Mobile/theme hardening: keep time text horizontal and on one line */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  text-align:center !important;
  line-height:1 !important;
  padding:0 12px !important;
  min-height:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--bkh-border);
  background:#fff;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
  font-weight:650;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.monk-bkh-form .monk-bkh-time-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  border-color: var(--bkh-border-strong);
}

.monk-bkh-form .monk-bkh-time-pill.is-selected{
  border-color: var(--bkh-accent);
  box-shadow: 0 0 0 4px var(--bkh-accent-soft), 0 16px 30px rgba(0,0,0,.12);
}

.monk-bkh-form .monk-bkh-note{
  font-size:13px;
  color: rgba(0,0,0,.58);
  margin: 6px 2px 0;
}

/* jQuery UI Datepicker (scoped) — compact card */
.ui-datepicker.monk-bkh-datepicker{
  box-sizing:border-box;
  width:320px;
  max-width: calc(100vw - 24px);
  padding:12px 12px 14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
  box-shadow: var(--bkh-shadow);
  z-index:99999!important;
  overflow:hidden;
}

.ui-datepicker.monk-bkh-datepicker .ui-datepicker-header{
  border:0;
  background:transparent;
  padding: 6px 6px 8px;
  position:relative;
}

.ui-datepicker.monk-bkh-datepicker .ui-datepicker-title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:34px;
}

.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev,
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next{
  top:6px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  width:34px;
  height:34px;
  cursor:pointer;
}

/* Some themes remove jQuery UI icons; force arrows */
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev span,
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next span{
  display:none !important;
}
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev:before,
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next:before{
  display:block;
  text-align:center;
  font-size:20px;
  line-height:34px;
  color: rgba(0,0,0,.75);
}
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev:before{ content:'‹'; }
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next:before{ content:'›'; }

/* Header layout: TWO LINES
   Line 1: Month/Year centered full width
   Line 2: Previous / Next buttons */
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-header{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px 10px;
}
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-title{
  flex:0 0 100%;
  order:1;
  text-align:center;
  margin:0 !important;
  padding:2px 0 6px !important;
  line-height:1.2;
  white-space:nowrap;
}
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev,
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next{
  position:static !important;
  order:2;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:92px;
  padding:0 12px;
  text-decoration:none;
  text-indent:0 !important;
  overflow:visible !important;
}
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev{ margin-right:auto; }
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next{ margin-left:auto; }
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev:before{
  content:'Previous';
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
}
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next:before{
  content:'Next';
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
}

.ui-datepicker.monk-bkh-datepicker .ui-datepicker-prev-hover,
.ui-datepicker.monk-bkh-datepicker .ui-datepicker-next-hover{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
}

.ui-datepicker.monk-bkh-datepicker table{
  width:100%;
  table-layout:fixed;
  margin: 6px 0 0;
  border-collapse:separate;
}

.ui-datepicker.monk-bkh-datepicker th{
  padding: 6px 0;
  opacity:.7;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
}

.ui-datepicker.monk-bkh-datepicker td{
  padding: 3px;
}

.ui-datepicker.monk-bkh-datepicker td a,
.ui-datepicker.monk-bkh-datepicker td span{
  display:flex;
  align-items:center;
  justify-content:center;
  height:38px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color: rgba(0,0,0,.85);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.ui-datepicker.monk-bkh-datepicker td a:hover{
  transform: translateY(-1px);
  box-shadow: var(--bkh-shadow-soft);
  border-color: rgba(0,0,0,.12);
}

.ui-datepicker.monk-bkh-datepicker td a.ui-state-active{
  border-color: var(--bkh-accent);
  box-shadow: 0 0 0 4px var(--bkh-accent-soft);
}

.ui-datepicker.monk-bkh-datepicker .ui-state-disabled span{
  color: rgba(0,0,0,.25)!important;
  opacity:.45;
}

/* CF7 validation tips: keep them UNDER each field (no overlap), even if theme uses absolute tips */
form.wpcf7-form.monk-bkh-form .wpcf7-form-control-wrap{ display:block; }
form.wpcf7-form.monk-bkh-form .wpcf7-not-valid-tip{
  position:static !important;
  display:block !important;
  float:none !important;
  clear:both !important;
  width:auto !important;
  margin:8px 0 0 !important;
  max-width:100% !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  box-sizing:border-box;
  line-height:1.35;
  background: rgba(220, 50, 50, .08) !important;
  border: 1px solid rgba(220, 50, 50, .22) !important;
}
form.wpcf7-form.monk-bkh-form .wpcf7-not-valid-tip + .wpcf7-not-valid-tip{ margin-top:6px !important; }