.khab-booking-wrap{margin-top:12px}
.khab-booking-title{margin:0 0 12px 0}
.khab-booking-form input,.khab-booking-form textarea,.khab-booking-form select{
  width:100%;max-width:100%;box-sizing:border-box;padding:10px;
  border:1px solid rgba(0,0,0,.18);border-radius:12px
}
.khab-booking-form textarea{resize:vertical}
.khab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.khab-full{grid-column:1/-1}
.khab-btn{padding:10px 16px;border-radius:12px;border:0;cursor:pointer}
.khab-status{margin-top:10px;opacity:.9}
.khab-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.khab-checks label{display:inline-flex;gap:8px;align-items:center}
.khab-budget{display:flex;gap:8px}
.khab-budget input{flex:1}
.khab-budget select{width:auto;min-width:110px}

.khab-modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:9998;
}
.khab-modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:9999;
}
.khab-modal.is-open,.khab-modal-overlay.is-open{opacity:1; pointer-events:auto}
.khab-modal-card{
  width:min(760px, 100%);
  max-height:85vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  padding:18px;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.khab-modal-close{
  position:absolute; right:10px; top:8px;
  width:36px; height:36px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
html.khab-modal-open{overflow:hidden}

@media (max-width: 640px){
  .khab-grid{grid-template-columns:1fr}
  .khab-budget{flex-direction:column}
  .khab-budget select{width:100%}
}


/* Improvements for readability */
.khab-booking-form label{color:#1a1a1a;font-weight:600}
.khab-booking-form input,.khab-booking-form textarea,.khab-booking-form select{
  color:#111;background:#fff;border:1px solid rgba(0,0,0,.28)
}
.khab-booking-form ::placeholder{color:rgba(0,0,0,.45)}

/* Make checkbox area align nicely */
.khab-checks{display:flex;flex-direction:column;justify-content:center;gap:10px}
.khab-checks label{gap:10px;color:#222;font-weight:500}
.khab-checks input[type="checkbox"]{width:18px;height:18px;accent-color:#0a7b78}

/* Budget layout */
.khab-budget select{min-width:120px}

/* Date input: ensure not squashed */
.khab-booking-form input[name="event_date"]{min-height:44px}

/* Modal background */
.khab-modal-card{background:#ffffff}


/* v2.1.1 compact + align controls */
.khab-modal{padding:10px}
.khab-modal-card{padding:14px; max-height:92vh}
.khab-booking-title{font-size:18px; margin:0 0 8px 0}
.khab-booking-form p{margin:0 0 10px 0}
.khab-grid{gap:10px}
.khab-booking-form input,
.khab-booking-form textarea,
.khab-booking-form select{
  font: inherit;
  line-height: 1.2;
}
.khab-booking-form input,
.khab-booking-form select{
  height:44px;
}
.khab-booking-form textarea{
  min-height:120px;
}

/* Checkboxes in one line (saves vertical space) */
.khab-checks{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}
.khab-checks label{margin:0}

/* Budget: keep select aligned with input */
.khab-budget{align-items:center}
.khab-budget select{
  height:44px;
  padding:10px 12px;
  line-height: 1.2;
}

/* On large screens, allow 3 columns if space (reduces height) */
@media (min-width: 1100px){
  .khab-modal-card{width:min(920px, 96vw)}
  .khab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .khab-full{grid-column:1/-1}
}


/* v2.1.2 layout polish for 3-column grid */
@media (min-width: 1100px){
  .khab-cell-checks{
    padding-top: 22px; /* align with inputs baseline */
  }
  .khab-cell-checks label{
    font-weight:600;
  }
  .khab-cell-budget{
    align-self: end;
  }
}

/* Better budget control layout (prevents wrapping into next row) */
.khab-budget{
  display:grid;
  grid-template-columns: 1fr minmax(120px, 160px);
  gap:8px;
  align-items:center;
}
.khab-budget input{width:100%}
.khab-budget select{
  width:100%;
  appearance: auto;
  -webkit-appearance: menulist;
}

/* Slightly smaller comment area to reduce scrolling */
.khab-booking-form textarea[name="comment"]{
  min-height: 96px;
}


/* v2.1.3: move Budget block under Date (span cols 1-2 in 3-col layout) */
@media (min-width: 1100px){
  .khab-cell-budget{
    grid-column: 1 / 3;   /* under Date+Attendees area */
    align-self: stretch;
  }
}


/* v2.1.4: make Budget label + controls stick together; normalize grid alignment */
.khab-grid{align-items:start}

/* Ensure label wraps block-level and controls don't float/right-align due to theme */
.khab-cell-budget, .khab-cell-budget *{float:none !important}
.khab-cell-budget{justify-self:start}
.khab-cell-budget label{display:block}
.khab-cell-budget .khab-budget{justify-self:start; margin-top:6px; max-width:520px}

/* Keep checkbox cell compact and aligned */
.khab-cell-checks{justify-self:end}
.khab-cell-checks label{white-space:nowrap}
@media (min-width: 1100px){
  .khab-cell-checks{align-self:center; padding-top:0}
  .khab-checks{gap:14px}
  .khab-cell-budget{grid-column: 1 / 3}
}


/* v2.1.5: shrink comment field to save space */
.khab-booking-form textarea[name="comment"]{
  min-height: 64px !important;
  height: 64px !important;
  resize: vertical;
}


/* v2.2.0: table-like layout as requested */
.khab-grid.khab-table{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start}
.khab-full{grid-column:1/-1}
.khab-checkline{margin-top:10px; display:flex; gap:16px; flex-wrap:wrap}
.khab-checkline .khab-check{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#222}
.khab-checkline input[type="checkbox"]{width:18px; height:18px; accent-color:#0a7b78}

@media (max-width: 720px){
  .khab-grid.khab-table{grid-template-columns:1fr}
}

.khab-budget{display:grid; grid-template-columns:1fr minmax(130px,170px); gap:8px; align-items:center}
.khab-budget select{width:100%; height:44px}


/* v2.2.2: use div cells (avoid invalid <p><div>) */
.khab-grid.khab-table .khab-cell{margin:0}
.khab-grid.khab-table .khab-cell label{display:block}
.khab-checkline{justify-content:flex-start}