/* MS Graph Booking for Elementor - universal frontend styling (with Elementor-friendly CSS vars) */
.mbb-booking-widget{
  width:100%;
  --mbb-bg:#fff;
  --mbb-border: rgba(0,0,0,.12);
  --mbb-text: rgba(0,0,0,.88);
  --mbb-muted: rgba(0,0,0,.60);
  --mbb-primary:#0a63c9;
  --mbb-danger:#b11f1f;
  --mbb-radius:10px;
  --mbb-card-padding:18px;
  --mbb-input-bg:#fff;
  --mbb-input-border: rgba(0,0,0,.18);
  --mbb-input-padding: 10px 12px;
  --mbb-calendar-available: rgba(10,99,201,.14);
  --mbb-calendar-selected: rgba(10,99,201,.28);
  --mbb-calendar-disabled: rgba(0,0,0,.25);

  /* Calendar + side panel layout (can be overridden from Elementor) */
  --mbb-cal-left: 65%;
  --mbb-cal-right: 35%;
}

/* Calendar section: 2 columns (calendar left, legend/location right) */
.mbb-booking-widget .mbb-cal-layout{
  display:flex;
  gap: 16px;
  align-items:flex-start;
}

.mbb-booking-widget .mbb-cal-left{
  flex: 0 0 var(--mbb-cal-left);
  max-width: var(--mbb-cal-left);
  min-width: 260px;
}

.mbb-booking-widget .mbb-cal-right{
  flex: 0 0 var(--mbb-cal-right);
  max-width: var(--mbb-cal-right);
  min-width: 220px;
}

.mbb-field.mbb-timepref-other {
    margin-top: 10px;
}

.mbb-field {
    margin-bottom: 15px;
}

@media(max-width: 820px){
  .mbb-booking-widget .mbb-cal-layout{ flex-direction: column; }
  .mbb-booking-widget .mbb-cal-left,
  .mbb-booking-widget .mbb-cal-right{ flex: 0 0 100%; max-width:100%; }
}

.mbb-booking-widget .mbb-card{
  border:1px solid var(--mbb-border);
  border-radius: var(--mbb-radius);
  padding: var(--mbb-card-padding);
  background: var(--mbb-bg);
  color: var(--mbb-text);
}

.mbb-booking-widget .mbb-title{
  margin:0 0 10px 0;
  font-size:22px;
  line-height:1.2;
  color: var(--mbb-text);
}

.mbb-booking-widget .mbb-desc{
  margin:0 0 14px 0;
  color: var(--mbb-muted);
}

.mbb-booking-widget .mbb-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media(min-width: 700px){
  .mbb-booking-widget .mbb-grid{
    grid-template-columns: 1fr 1fr;
  }
  .mbb-booking-widget .mbb-grid .mbb-field:nth-child(4){
    grid-column: 1 / -1;
  }
  .mbb-booking-widget .mbb-grid .mbb-time-wrap{
    grid-column: 1 / -1;
    max-width: 320px;
  }
}

.mbb-booking-widget label{
  display:block;
  font-weight:700;
  font-size:13px;
  margin-bottom:6px;
  color: var(--mbb-text);
}

.mbb-booking-widget input[type="text"],
.mbb-booking-widget input[type="email"],
.mbb-booking-widget input[type="tel"],
.mbb-booking-widget input[type="number"],
.mbb-booking-widget select{
  width:100%;
  border:1px solid var(--mbb-input-border);
  border-radius: 10px;
  background: var(--mbb-input-bg);
  padding: var(--mbb-input-padding);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.mbb-booking-widget input:focus,
.mbb-booking-widget select:focus{
  border-color: var(--mbb-primary);
  box-shadow: 0 0 0 3px rgba(10,99,201,.15);
}

.mbb-booking-widget .mbb-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  color: var(--mbb-muted);
}

.mbb-booking-widget .mbb-calendar-wrap{
  border: 1px solid var(--mbb-input-border);
  border-radius: 12px;
  padding: 10px;
  background: var(--mbb-input-bg);
}

/* -------------------------------------------------------------------------- */
/* Custom calendar (inspired by cssscript demo)                                */
/* -------------------------------------------------------------------------- */

.mbb-booking-widget .mbb-calendar{
  width:100%;
}

.mbb-booking-widget .mbb-ec{
  width:100%;
  box-sizing:border-box;
}

.mbb-booking-widget .mbb-ec-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  background:#ff6a2d;
  color:#fff;
  border-radius: 14px;
}

.mbb-booking-widget .mbb-ec-title{
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  text-transform: lowercase;
}

.mbb-booking-widget .mbb-ec-nav{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  background: rgba(255,255,255,.20);
  color:#fff;
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mbb-booking-widget .mbb-ec-nav:hover{
  background: rgba(255,255,255,.28);
}

.mbb-booking-widget .mbb-ec-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 12px 8px 6px 8px;
}

.mbb-booking-widget .mbb-ec-dow{
  text-align:center;
  font-weight: 800;
  font-size: 12px;
  color: var(--mbb-muted);
  padding: 2px 0 4px 0;
  user-select:none;
}

.mbb-booking-widget .mbb-ec-day{
  position:relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 15px;
  color: var(--mbb-text);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  box-sizing:border-box;
  overflow:hidden;
  z-index: 0;
}

.mbb-booking-widget .mbb-ec-day::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: var(--mbb-day-bg, transparent);
  z-index: 0;
}

.mbb-booking-widget .mbb-ec-day:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

.mbb-booking-widget .mbb-ec-day:disabled,
.mbb-booking-widget .mbb-ec-day.mbb-ec-disabled{
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity: .30;
}

.mbb-booking-widget .mbb-ec-day.mbb-ec-other-month{
  opacity: .22;
}

.mbb-booking-widget .mbb-ec-day.mbb-ec-other-month:hover{
  box-shadow:none;
  transform:none;
}

.mbb-booking-widget .mbb-ec-day.mbb-ec-selected{
  box-shadow: 0 0 0 3px rgba(255,106,45,.45), 0 8px 22px rgba(0,0,0,.10);
}

.mbb-booking-widget .mbb-ec-num{
  position:relative;
  z-index:1;
}

.mbb-booking-widget .mbb-ec-dots{ z-index: 1; }

.mbb-booking-widget .mbb-ec-dots{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 7px;
  display:flex;
  gap: 4px;
  z-index: 2;
}

.mbb-booking-widget .mbb-ec-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.65);
}

/* Tip: if you prefer gradient only, you can hide dots with:
   .mbb-booking-widget .mbb-ec-dots{ display:none; }
*/

.mbb-booking-widget .mbb-selected{
  margin-top: 8px;
  font-size: 13px;
  color: var(--mbb-muted);
  display:flex;
  gap:6px;
  align-items: baseline;
}

.mbb-booking-widget .mbb-selected-label{
  font-weight:700;
  color: var(--mbb-text);
}

.mbb-booking-widget .mbb-actions{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.mbb-booking-widget .mbb-btn{
  border:0;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--mbb-primary);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.mbb-booking-widget .mbb-btn:hover{
  filter: brightness(.95);
}

.mbb-booking-widget .mbb-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.mbb-booking-widget .mbb-message{
  font-size: 14px;
}

.mbb-booking-widget .mbb-message.mbb-success{ color: #0b6b24; font-weight: 700; }
.mbb-booking-widget .mbb-message.mbb-error{ color: #b11f1f; font-weight: 700; }

.mbb-booking-widget .mbb-footnote{
  margin-top:12px;
  font-size:13px;
  color: var(--mbb-muted);
}

/* Datepicker (jQuery UI) */
.mbb-booking-widget .ui-datepicker{
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  z-index: 1 !important;
}

/* Slightly more "modern" datepicker chrome */
.mbb-booking-widget .ui-datepicker .ui-datepicker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}

.mbb-booking-widget .ui-datepicker .ui-datepicker-prev span,
.mbb-booking-widget .ui-datepicker .ui-datepicker-next span{
  display:none;
}

.mbb-booking-widget .ui-datepicker .ui-datepicker-prev::before{
  content: '‹';
  font-size: 18px;
  line-height: 1;
  display:block;
}

.mbb-booking-widget .ui-datepicker .ui-datepicker-next::before{
  content: '›';
  font-size: 18px;
  line-height: 1;
  display:block;
}

.mbb-booking-widget .ui-datepicker .ui-datepicker-title{
  font-size: 14px;
}

.mbb-booking-widget .ui-datepicker .ui-datepicker-prev,
.mbb-booking-widget .ui-datepicker .ui-datepicker-next{
  cursor:pointer;
  padding: 6px 8px;
  border-radius: 8px;
}

.mbb-booking-widget .ui-datepicker .ui-datepicker-prev:hover,
.mbb-booking-widget .ui-datepicker .ui-datepicker-next:hover{
  background: rgba(0,0,0,.06);
}

.mbb-booking-widget .ui-datepicker table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.mbb-booking-widget .ui-datepicker th{
  padding: 6px 2px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--mbb-muted);
}

.mbb-booking-widget .ui-datepicker td{
  padding: 2px;
}

.mbb-booking-widget .ui-datepicker td a,
.mbb-booking-widget .ui-datepicker td span{
  display:block;
  padding: 8px 0;
  text-align:center;
  border-radius: 10px;
  text-decoration:none;
  border: 1px solid transparent;
}

.mbb-booking-widget .ui-datepicker td.ui-datepicker-unselectable span{
  color: var(--mbb-calendar-disabled);
}

.mbb-booking-widget .ui-datepicker td.mbb-available a{
  background: var(--mbb-calendar-available);
  font-weight: 800;
  border-color: rgba(10,99,201,.08);
}

.mbb-booking-widget .ui-datepicker td.mbb-available a:hover{
  filter: brightness(.97);
}

.mbb-booking-widget .ui-datepicker td a.ui-state-active{
  background: var(--mbb-calendar-selected);
  border-color: rgba(10,99,201,.18);
}

/* Slot/category picker */
.mbb-booking-widget .mbb-slot-options{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding: 0px 10px 0px 0px;
}

.mbb-slot-wrap label {
    margin-bottom: 10px;
}

/* Fancy “Lokation” radio cards (real radios hidden, styled labels as cards) */
.mbb-booking-widget .mbb-loc-item{ position:relative; }

.mbb-booking-widget .mbb-loc-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mbb-booking-widget .mbb-loc-card{
  display:grid;
  grid-template-columns: 18px 14px 1fr auto;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border: 1px solid var(--mbb-input-border);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, background-color .08s ease;
}

.mbb-booking-widget .mbb-loc-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.mbb-booking-widget .mbb-loc-fakeradio{
  width:16px;
  height:16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.96);
  box-sizing:border-box;
}

.mbb-booking-widget .mbb-loc-swatch{
  width:12px;
  height:12px;
  border-radius: 4px;
  background: var(--mbb-primary);
  border: 1px solid rgba(0,0,0,.12);
}

.mbb-booking-widget .mbb-loc-name{
  color: var(--mbb-text);
  font-weight: 850;
  line-height: 1.1;
}

.mbb-booking-widget .mbb-loc-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.mbb-booking-widget .mbb-loc-check{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid var(--mbb-primary);
  display:none;
  position:relative;
  box-sizing:border-box;
}

.mbb-booking-widget .mbb-loc-check::after{
  content:"";
  position:absolute;
  left:4px;
  top:2px;
  width:5px;
  height:9px;
  border-right:2px solid var(--mbb-primary);
  border-bottom:2px solid var(--mbb-primary);
  transform: rotate(45deg);
}

.mbb-booking-widget .mbb-loc-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(177,31,31,.12);
  color: var(--mbb-danger);
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(177,31,31,.24);
}

/* Checked state */
.mbb-booking-widget .mbb-loc-input:checked + .mbb-loc-card,
.mbb-booking-widget .mbb-loc-card.is-selected{
  border-color: rgba(10,99,201,.55);
  background: rgba(10,99,201,.06);
  box-shadow: 0 8px 22px rgba(10,99,201,.10);
}

.mbb-booking-widget .mbb-loc-input:checked + .mbb-loc-card .mbb-loc-fakeradio,
.mbb-booking-widget .mbb-loc-card.is-selected .mbb-loc-fakeradio{
  border-color: var(--mbb-primary);
  background: radial-gradient(circle at center, rgba(10,99,201,.95) 0 45%, rgba(255,255,255,0) 46%);
}

.mbb-booking-widget .mbb-loc-input:checked + .mbb-loc-card .mbb-loc-check,
.mbb-booking-widget .mbb-loc-card.is-selected .mbb-loc-check{
  display:inline-block;
}

/* Focus for keyboard users */
.mbb-booking-widget .mbb-loc-input:focus + .mbb-loc-card{
  outline:none;
  box-shadow: 0 0 0 3px rgba(10,99,201,.20), 0 8px 22px rgba(0,0,0,.08);
}

/* Disabled/booked */
.mbb-booking-widget .mbb-loc-input:disabled + .mbb-loc-card{
  cursor: not-allowed;
  opacity: .70;
  background: rgba(0,0,0,.02);
  transform:none !important;
  box-shadow:none !important;
  border-style:dashed;
}


.mbb-booking-widget .mbb-slot-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid var(--mbb-input-border);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  cursor:pointer;
}

.mbb-booking-widget .mbb-slot-option input{ margin:0; }

.mbb-booking-widget .mbb-slot-option.mbb-slot-option-disabled{
  cursor: not-allowed;
  opacity: .65;
  filter: grayscale(.10);
}

.mbb-booking-widget .mbb-slot-option.mbb-slot-option-disabled .mbb-slot-text{
  font-weight: 700;
}

.mbb-booking-widget .mbb-slot-swatch{
  width:12px;
  height:12px;
  border-radius: 4px;
  background: var(--mbb-primary);
  border: 1px solid rgba(0,0,0,.12);
}

.mbb-booking-widget .mbb-slot-text{ color: var(--mbb-text); font-weight:700; }

.mbb-booking-widget .ui-datepicker .ui-datepicker-week-col{
  color: var(--mbb-muted);
  font-weight: 700;
  width: 34px;
}

/* --- Updated form layout (v1.1.0) --- */
.mbb-booking-widget .mbb-section{ margin-bottom: 14px; }
.mbb-booking-widget .mbb-section-title{
  font-size:15px;
  font-weight:800;
  margin: 0 0 8px 0;
  color: var(--mbb-text);
}

.mbb-booking-widget .mbb-radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}

.mbb-booking-widget .mbb-radio{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border: 1px solid var(--mbb-input-border);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}

.mbb-booking-widget .mbb-radio input{ margin:0; }

.mbb-booking-widget .mbb-two-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width: 700px){
  .mbb-booking-widget .mbb-two-cols{ grid-template-columns: 1fr 1fr; }
}

.mbb-booking-widget textarea{
  width:100%;
  border:1px solid var(--mbb-input-border);
  border-radius: 10px;
  background: var(--mbb-input-bg);
  padding: var(--mbb-input-padding);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  min-height: 110px;
}

.mbb-booking-widget textarea:focus{
  border-color: var(--mbb-primary);
  box-shadow: 0 0 0 3px rgba(10,99,201,.15);
}

.mbb-booking-widget .mbb-legend{
  list-style:none;
  padding:0;
  margin: 0 0 10px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mbb-booking-widget .mbb-legend li{ display:flex; align-items:center; gap:8px; color: var(--mbb-muted); }
.mbb-booking-widget .mbb-swatch{ width:14px; height:14px; border-radius: 4px; display:inline-block; border: 1px solid rgba(0,0,0,.15); }

/* Date markers */
.mbb-booking-widget .ui-datepicker td{ position:relative; }
.mbb-booking-widget .mbb-day-markers{
  position:absolute;
  left:50%;
  bottom:3px;
  transform: translateX(-50%);
  display:flex;
  gap:2px;
  pointer-events:none;
}
.mbb-booking-widget .mbb-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--mbb-primary);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* Booked highlighting (color is set via CSS variable from availability) */
.mbb-booking-widget{ --mbb-booked-color:#b11f1f; }
.mbb-booking-widget .ui-datepicker td.mbb-has-booked a,
.mbb-booking-widget .ui-datepicker td.mbb-has-booked span{
  box-shadow: inset 0 -3px 0 0 var(--mbb-booked-color);
  border-radius: 6px;
}

@media (max-width: 768px) {
    .mbb-booking-widget .mbb-ec-dots {
        bottom: -4px;
    }
    
    .mbb-booking-widget .mbb-ec-day {
        overflow: visible;
    }
}