.meb-booking-wrapper {
    border: 1px solid #ddd;
    padding: 20px;
    max-width: 1100px;
    margin: 20px auto;
    background: #fff;
}

.meb-event-title {
    margin-top: 0;
    text-align: center;
}

.meb-dates {
    margin-bottom: 20px;
}

.meb-date-block {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.meb-date-label {
    font-weight: bold;
    margin-bottom: 5px;
}

.meb-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.meb-slot-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.meb-slot-unavailable {
    font-size: 0.9em;
    color: #999;
}

.meb-customer-fields label {
    display: block;
    margin-bottom: 10px;
}

.meb-submit-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

.meb-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
}

/* Wider wrapper (otherwise 50/50 becomes cramped) */
.meb-booking-wrapper{
  max-width: 1100px; /* adjust if you want */
  width: 100%;
  box-sizing: border-box;
}

/* 2 columns: 50/50 */
.meb-calendar-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* IMPORTANT: min-width:0 prevents overflow weirdness in flex children */
.meb-calendar,
.meb-side{
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 10px;
  background:#fff;
  box-sizing: border-box;
}

/* Hide the input (removes the blank “left box” input look) */
.meb-calendar-input{
  display:none !important;
}

/* Make flatpickr inline calendar expand to full width of the left column */
.meb-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none;
  margin: 0;
}

.meb-calendar .flatpickr-rContainer,
.meb-calendar .flatpickr-days,
.meb-calendar .dayContainer{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Make days cells scale nicer (optional but helps “bigger” calendar feel) */
.meb-calendar .flatpickr-day{
  max-width: none !important;
}

.meb-selected-date{
  font-weight:700;
  font-size:18px;
  margin-bottom:10px;
}

/* Hide the flatpickr input (prevents the blank left box) */
.meb-calendar-input{
  display: none !important;
}

/* Make the inline flatpickr calendar expand inside left box */
.meb-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none;
  margin: 0 auto;
}

.meb-calendar .flatpickr-rContainer,
.meb-calendar .flatpickr-days,
.meb-calendar .dayContainer{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.meb-slots-title{
  font-weight:700;
  margin:10px 0 8px;
}

.meb-slots-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.meb-slot-btn{
  border:1px solid #ddd;
  background:#fff;
  color:#000;
  font-size: 110%;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}

.meb-slot-btn.is-active{
  border-color:#111;
}

.meb-slot-btn.is-booked{
  opacity:.55;
  cursor:not-allowed;
}

.meb-customer-fields label{
  display:block;
  margin-bottom:10px;
}

.meb-customer-fields input{
  width:100%;
  padding:8px;
  border:1px solid #ddd;
  border-radius:8px;
}

.meb-message.is-success{ color: #0a7b2e; }
.meb-message.is-error{ color: #b00020; }

/* Badge */
.meb-badge{
  display:inline-block;
  margin:6px 0;
  padding:4px 8px;
  border-radius:6px;
  font-weight:600;
  line-height:1.2;
}
.meb-badge--last-slot{
  background:#ffe08a;
  border:1px solid rgba(0,0,0,.08);
}

/* Mobile */
@media (max-width: 900px){
  .meb-calendar-layout{ flex-direction:column; }
  .meb-calendar{ flex: 1 1 auto; width:100%; }
}