/* ────────────────────────────────────────────
   1. Block wrapper & form shell
   ────────────────────────────────────────────*/
.block-albaqi-booking-block .albaqi-booking-form {
  border: 1px solid #D2D6DB;
  border-radius: 1rem;
  padding: 1rem;
}

.block-albaqi-booking-block .booking-grid {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.block-albaqi-booking-block .booking-grid .booking-calendar {
  border-left: 1px solid #D2D6DB;
}

/* ────────────────────────────────────────────
   2. Calendar wrapper
   ────────────────────────────────────────────*/
.block-albaqi-booking-block .abq-calendar-wrapper {
  display: flex;
  flex-direction: column;
}

.block-albaqi-booking-block .abq-calendar-wrapper .abq-calendar-grid {
  padding: 16px 0 16px 16px;
}

.block-albaqi-booking-block .booking-calendar .form-radios { /* hide raw radios */
  display: none;
}

/* Grid rows & weekday header */
.block-albaqi-booking-block .abq-calendar-wrapper .abq-calendar-grid .abq-row {
  display: flex;
  gap: 3rem;
}

.block-albaqi-booking-block .weekday {
  width: 56px;
  padding-top: 1rem;
  color: #384250;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.block-albaqi-booking-block .abq-empty {
  width: 56px;
  height: 68px;
}

/* ── Calendar header (month & arrows) ── */
.block-albaqi-booking-block .abq-calendar-header {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: .5rem;
  text-align: right; /* RTL */
}

.block-albaqi-booking-block .abq-cal-title {
  font-weight: 700;
}

.block-albaqi-booking-block .abq-cal-month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  font-weight: 700;
  padding: 15px 16px 0;
}

/* ── Day cell ── */
.block-albaqi-booking-block .abq-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  background: #fff;
  border: none;
  cursor: pointer;
}

.block-albaqi-booking-block .abq-day .num {
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-albaqi-booking-block .abq-day[data-selected="true"] .num {
  background-color: #3CAE86;
  color: #fff;
  border-radius: 50%;
}

.block-albaqi-booking-block .abq-day .dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.25rem;
  border-radius: 9999px;
}

/* crowd indicators */
.block-albaqi-booking-block .abq-day.crowd-low   .dot { background:#067647; }
.block-albaqi-booking-block .abq-day.crowd-medium .dot { background:#FA9C66; }
.block-albaqi-booking-block .abq-day.crowd-high  .dot { background:#B42318; }

/* hide off-screen radios */
.block-albaqi-booking-block input.abq-visit-radio.visually-hidden {
  position: absolute;
  left: -9999px;
}

/* ────────────────────────────────────────────
   3. LEFT PANE  (period tabs, slots, submit)
   ────────────────────────────────────────────*/
.block-albaqi-booking-block .booking-left {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 460px;
}

/* ── period tabs ─────────────────────────── */
.block-albaqi-booking-block #period-wrapper {
  display: flex;
  padding: 0 1rem;
}

.block-albaqi-booking-block #period-wrapper .form-radios {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.block-albaqi-booking-block #period-wrapper .form-radios .form-type-radio {
  display: flex;
  width: -webkit-fill-available;
}

.block-albaqi-booking-block .booking-left .form-type-radio input[type="radio"] {
  display: none;
}

.block-albaqi-booking-block .booking-left .form-type-radio label {
  flex: 1 1 auto;
  padding: 15px 0;
  color: #6C737F;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  border: 1px solid #D2D6DB;
  border-radius: 4px;
  cursor: pointer;
}

.block-albaqi-booking-block .booking-left
  .form-type-radio input[type="radio"]:checked + label {
  color: #007960;
  border-color: #007960;
  font-weight: 700;
}

/* ── slot list ───────────────────────────── */
.block-albaqi-booking-block #slot-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1rem;
}

.block-albaqi-booking-block #slot-wrapper .form-radios {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.block-albaqi-booking-block #slot-wrapper .form-radios .form-type-radio {
  display: flex;
  width: -webkit-fill-available;
}

.block-albaqi-booking-block #slot-wrapper .slot-list {
  border: 1px solid #DDD;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.block-albaqi-booking-block #slot-wrapper .slot-list label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
}

/* dot per crowd level */
.block-albaqi-booking-block #slot-wrapper .crowd-low::after,
.block-albaqi-booking-block #slot-wrapper .crowd-medium::after,
.block-albaqi-booking-block #slot-wrapper .crowd-high::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.block-albaqi-booking-block #slot-wrapper .crowd-low::after    { background:#28a745; }
.block-albaqi-booking-block #slot-wrapper .crowd-medium::after { background:#f0ad4e; }
.block-albaqi-booking-block #slot-wrapper .crowd-high::after   { background:#dc3545; }

.block-albaqi-booking-block #slot-wrapper .slot-list input[type="radio"] {
  display: none;
}

.block-albaqi-booking-block #slot-wrapper
  .slot-list input[type="radio"]:checked + label {
  border: 1px solid #1D7044;
  background: #F0FAF5;
  border-radius: 0.5rem;
}

/* ── submit button ───────────────────────── */
.block-albaqi-booking-block .booking-left .form-actions {
  margin-top: 1.5rem;
  text-align: end;
  min-width: 565px;
  padding: 0 1rem;
}

.block-albaqi-booking-block .booking-left .form-actions .form-submit {
  max-width: 110px;
  padding: 0.75rem;
  background: #1D7044;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  transition: background .2s;
}

.block-albaqi-booking-block .booking-left .form-actions .form-submit:hover {
  background: #145F38;
}

.block-albaqi-booking-block .booking-left
  .form-actions .form-submit:disabled,
.block-albaqi-booking-block .booking-left
  .form-actions .form-submit.is-disabled {
  background: #ccc;
  cursor: not-allowed;
}

@media (max-width: 1280px) {
  .block-albaqi-booking-block .booking-left .form-actions {
    min-width: unset;
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  .block-albaqi-booking-block .booking-grid {
    flex-direction: column;
  }

  .block-albaqi-booking-block .booking-grid .booking-calendar {
    border-left: none;
    border-bottom: 1px solid #D2D6DB;
    padding-top: 1rem;
  }

  .block-albaqi-booking-block .abq-calendar-wrapper .abq-calendar-grid {
    padding: 1rem 0;
    overflow-x: auto;
  }

  .block-albaqi-booking-block .abq-calendar-wrapper .abq-calendar-grid .abq-row {
    gap: 0rem;
  }

  .block-albaqi-booking-block .abq-calendar-wrapper .abq-row {
    gap: 0rem;
  }

  .block-albaqi-booking-block .booking-left {
    padding: 1rem 0;
    min-height: auto;
    width: 100%;
  }

  .block-albaqi-booking-block .booking-left .form-actions {
    min-width: unset;
    text-align: center;
  }

  .block-albaqi-booking-block .booking-left .form-actions .form-submit {
    max-width: 100%;
    width: 100%;
  }

  .block-albaqi-booking-block #period-wrapper {
    padding: 0;
    flex-direction: row;
    gap: 1rem;
  }

  .block-albaqi-booking-block #period-wrapper .form-radios {
    flex-direction: column;
    gap: 0.75rem;
  }

  .block-albaqi-booking-block #slot-wrapper {
    padding: 0;
  }

  .block-albaqi-booking-block .abq-day .num {
    width: 36px;
    height: 36px;
    font-size: 16px;
    line-height: 26px;
  }

  .block-albaqi-booking-block .weekday {
    font-size: 14px;
    width: 50px;
  }

  .block-albaqi-booking-block .abq-empty {
    width: 50px;
    height: 52px;
  }

  .block-albaqi-booking-block .abq-day {
    padding: 8px 7px;
  }
}

[dir="ltr"] {
  .block-albaqi-booking-block {
    direction: ltr;
  }
}