/* ==========================================================
   MindSoul - Appointment Booking Calendar
   Premium therapeutic booking modal
   Flexbox only / No CSS Grid / No clamp()
   Scoped only to .appointment-booking-calendar
========================================================== */

.appointment-booking-calendar {
    --ms-section-bg: #f7fbf9;
    --ms-section-surface: rgba(255, 255, 255, 0.94);
    --ms-section-surface-soft: rgba(247, 251, 249, 0.92);
    --ms-section-text: #243632;
    --ms-section-muted: #63736f;
    --ms-section-muted-soft: #7a8a86;
    --ms-section-accent: #4f9283;
    --ms-section-accent-light: #4f9a82;
    --ms-section-accent-dark: #347d68;
    --ms-section-accent-soft: rgba(79, 146, 131, 0.11);
    --ms-section-accent-softer: rgba(79, 146, 131, 0.06);
    --ms-section-purple: #6E4FB3;
    --ms-section-purple-dark: #5A3D96;
    --ms-section-purple-soft: rgba(110, 79, 179, 0.10);
    --ms-section-line: rgba(79, 146, 131, 0.16);
    --ms-section-line-soft: rgba(36, 54, 50, 0.09);
    --ms-section-white: #ffffff;
    --ms-section-danger: #9f2d2d;
    --ms-section-danger-soft: rgba(159, 45, 45, 0.10);
  
    --ms-radius-small: 12px;
    --ms-radius-medium: 20px;
    --ms-radius-large: 32px;
  
    --ms-transition-fast: 180ms ease;
    --ms-transition: 280ms cubic-bezier(.22, 1, .36, 1);
    --ms-transition-slow: 520ms cubic-bezier(.22, 1, .36, 1);
  
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
      radial-gradient(circle at 12% 14%, rgba(79, 146, 131, 0.22) 0, rgba(79, 146, 131, 0) 340px),
      radial-gradient(circle at 88% 84%, rgba(110, 79, 179, 0.16) 0, rgba(110, 79, 179, 0) 360px),
      rgba(20, 31, 28, 0.48);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    transition:
      opacity var(--ms-transition-slow),
      background var(--ms-transition-slow);
  }
  
  .appointment-booking-calendar,
  .appointment-booking-calendar *,
  .appointment-booking-calendar *::before,
  .appointment-booking-calendar *::after {
    box-sizing: border-box;
  }
  
  .appointment-booking-calendar.on {
    opacity: 1;
    z-index: 999999;
    pointer-events: all;
  }
  
  .appointment-booking-calendar .wrapper {
    position: relative;
    z-index: 1;
    width: 92vw;
    height: 90vh;
    max-width: 1440px;
    max-height: 920px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    color: var(--ms-section-text);
    background:
      radial-gradient(circle at 10% 4%, rgba(79, 146, 131, 0.12) 0, rgba(79, 146, 131, 0) 280px),
      radial-gradient(circle at 96% 8%, rgba(110, 79, 179, 0.08) 0, rgba(110, 79, 179, 0) 300px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 249, 0.96) 100%);
    border-radius: var(--ms-radius-large);
    overflow: hidden;
    box-shadow:
      0 32px 86px rgba(14, 28, 24, 0.24),
      0 8px 28px rgba(79, 146, 131, 0.12);
    opacity: 0;
    transform: translateX(24px) scale(0.985);
    transition:
      transform var(--ms-transition-slow),
      opacity var(--ms-transition-slow),
      box-shadow var(--ms-transition);
  }
  
  .appointment-booking-calendar.on .wrapper {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  
  .appointment-booking-calendar .wrapper::before,
  .appointment-booking-calendar .wrapper::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
  }
  
  .appointment-booking-calendar .wrapper::before {
    width: 360px;
    height: 360px;
    right: -140px;
    top: -140px;
    background: rgba(79, 146, 131, 0.10);
  }
  
  .appointment-booking-calendar .wrapper::after {
    width: 280px;
    height: 280px;
    left: -130px;
    bottom: -150px;
    background: rgba(110, 79, 179, 0.07);
  }
  
  /* ==========================================================
     Reset theme gradient text inside the modal for readability
  ========================================================== */
  
  .appointment-booking-calendar .mountain-lake-azure-text-gradient,
  .appointment-booking-calendar .simply-purple-text-gradient {
    background: none;
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    text-fill-color: currentColor;
  }
  
  .appointment-booking-calendar .bg-linear-mountain-lake-azure {
    background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
    filter: none;
  }
  
  /* ==========================================================
     Header / Form area
  ========================================================== */
  
  .appointment-booking-calendar .abcal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ms-section-line);
  }
  
  .appointment-booking-calendar .abcal-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, rgba(79, 146, 131, 0.54), rgba(79, 146, 131, 0));
  }
  
  .appointment-booking-calendar .form-control-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 18px 20px;
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .appointment-booking-calendar .form-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 1 auto;
  }
  
  .appointment-booking-calendar .abcal-header .form-control label,
  .appointment-booking-calendar .programm-selection .text-wrapper .text {
    color: var(--ms-section-text);
  }
  
  .appointment-booking-calendar .abcal-header .form-control label {
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  
  .appointment-booking-calendar .programm-selection {
    flex: 0 0 270px;
    min-width: 270px;
  }
  
  .appointment-booking-calendar .abcal-header .form-control .custom-select,
  .appointment-booking-calendar .abcal-header .programm-selection .custom-select {
    width: 100%;
  }
  
  .appointment-booking-calendar .editable-container {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  
  .appointment-booking-calendar .editable-text,
  .appointment-booking-calendar .custom-select .text-wrapper {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    transition:
      transform var(--ms-transition),
      opacity var(--ms-transition),
      background var(--ms-transition),
      box-shadow var(--ms-transition);
  }
  
  .appointment-booking-calendar .editable-text.lg {
    width: 210px;
  }
  
  .appointment-booking-calendar .editable-text.sm {
    width: 76px;
    flex: 0 0 76px;
  }
  
  .appointment-booking-calendar .editable-text::before,
  .appointment-booking-calendar .custom-select .text-wrapper::before,
  .appointment-booking-calendar .dropdown-wrapper.mountain-lake-azure-gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(79, 146, 131, 0.34), rgba(110, 79, 179, 0.14));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  
  .appointment-booking-calendar .editable-text > div {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--ms-section-text);
    font-size: 0.94rem;
    line-height: 1.3;
    font-weight: 500;
    outline: none;
  }
  
  .appointment-booking-calendar .editable-text.sm > div {
    justify-content: center;
    padding: 0 10px;
    color: var(--ms-section-accent-dark);
    font-weight: 700;
  }
  
  .appointment-booking-calendar .editable-text:focus-within,
  .appointment-booking-calendar .custom-select .text-wrapper:focus-visible,
  .appointment-booking-calendar .custom-select.on .text-wrapper {
    background: rgba(255, 255, 255, 0.94);
    transform: translateY(-1px);
    box-shadow:
      0 0 0 4px rgba(79, 146, 131, 0.11),
      0 12px 26px rgba(79, 146, 131, 0.10);
  }
  
  .appointment-booking-calendar .editable-text:focus-within::before,
  .appointment-booking-calendar .custom-select .text-wrapper:focus-visible::before,
  .appointment-booking-calendar .custom-select.on .text-wrapper::before {
    background: linear-gradient(135deg, rgba(79, 146, 131, 0.70), rgba(110, 79, 179, 0.24));
  }
  
  .appointment-booking-calendar .no-pointer {
    pointer-events: none;
  }
  
  /* ==========================================================
     Custom select / Dropdown
  ========================================================== */
  
  .appointment-booking-calendar .custom-select {
    position: relative;
  }
  
  .appointment-booking-calendar .custom-select .text-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px 0 16px;
    cursor: pointer;
  }
  
  .appointment-booking-calendar .custom-select .text-wrapper .text {
    position: relative;
    z-index: 1;
    min-width: 0;
    color: var(--ms-section-text);
    font-size: 0.94rem;
    line-height: 1.35;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .appointment-booking-calendar .custom-select .text-wrapper .chevron {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    background: rgba(79, 146, 131, 0.12);
  }
  
  .appointment-booking-calendar .custom-select .text-wrapper .chevron::before,
  .appointment-booking-calendar .custom-select .text-wrapper .chevron::after {
    content: "";
    position: absolute;
    top: 8px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: var(--ms-section-accent-dark);
    transition:
      transform var(--ms-transition-fast),
      background var(--ms-transition-fast);
  }
  
  .appointment-booking-calendar .custom-select .text-wrapper .chevron::before {
    left: 4px;
    transform: rotate(45deg);
  }
  
  .appointment-booking-calendar .custom-select .text-wrapper .chevron::after {
    right: 4px;
    transform: rotate(-45deg);
  }
  
  .appointment-booking-calendar .custom-select.on .text-wrapper .chevron::before {
    transform: rotate(-45deg);
  }
  
  .appointment-booking-calendar .custom-select.on .text-wrapper .chevron::after {
    transform: rotate(45deg);
  }
  
  .appointment-booking-calendar .custom-select .dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    max-height: 0;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--ms-transition-fast),
      transform var(--ms-transition-fast),
      visibility 0s linear 180ms;
  }
  
  .appointment-booking-calendar .custom-select.on .dropdown {
    max-height: 320px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity var(--ms-transition-fast),
      transform var(--ms-transition-fast),
      visibility 0s;
  }
  
  .appointment-booking-calendar .custom-select .dropdown .dropdown-wrapper {
    position: relative;
    max-height: 260px;
    padding: 10px 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    overflow: auto;
    box-shadow:
      0 18px 42px rgba(22, 38, 34, 0.14),
      0 4px 16px rgba(79, 146, 131, 0.10);
  }
  
  .appointment-booking-calendar .custom-select .dropdown .dropdown-wrapper::before {
    border-radius: 18px;
  }
  
  .appointment-booking-calendar .custom-select .dropdown .dropdown-wrapper .text {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 9px 15px;
    color: var(--ms-section-muted);
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 500;
    cursor: pointer;
    transition:
      transform var(--ms-transition-fast),
      color var(--ms-transition-fast),
      background var(--ms-transition-fast),
      opacity var(--ms-transition-fast);
  }
  
  .appointment-booking-calendar .custom-select .dropdown .dropdown-wrapper .text:hover,
  .appointment-booking-calendar .custom-select .dropdown .dropdown-wrapper .text.selected {
    color: var(--ms-section-accent-dark);
    background: rgba(79, 146, 131, 0.08);
    transform: translateX(2px);
    opacity: 1;
  }
  
  .appointment-booking-calendar .custom-select .dropdown .dropdown-wrapper .text.selected {
    font-weight: 700;
  }
  
  /* ==========================================================
     Calendar actions
  ========================================================== */
  
  .appointment-booking-calendar .c-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 2px 0 18px;
  }
  
  .appointment-booking-calendar .c-actions .left-area,
  .appointment-booking-calendar .c-actions .right-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 280px;
    min-width: 0;
  }
  
  .appointment-booking-calendar .c-actions .right-area {
    justify-content: flex-end;
  }
  
  .appointment-booking-calendar .calendar-modes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  
  .appointment-booking-calendar .middle-area {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  
  .appointment-booking-calendar .middle-area .text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    color: var(--ms-section-text);
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px var(--ms-section-line-soft);
  }
  
  .appointment-booking-calendar .btn,
  .appointment-booking-calendar .chevron-wrapper,
  .appointment-booking-calendar .cheron-wrapper {
    border: 0;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      transform var(--ms-transition),
      opacity var(--ms-transition),
      color var(--ms-transition-fast),
      background var(--ms-transition),
      border-color var(--ms-transition-fast),
      box-shadow var(--ms-transition);
  }
  
  .appointment-booking-calendar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--ms-section-white);
    font-size: 0.92rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
    box-shadow: 0 8px 20px rgba(52, 125, 104, 0.16);
  }
  
  .appointment-booking-calendar .btn:hover,
  .appointment-booking-calendar .btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 14px 28px rgba(52, 125, 104, 0.20),
      0 0 0 4px rgba(79, 146, 131, 0.11);
    outline: none;
  }
  
  .appointment-booking-calendar .btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(52, 125, 104, 0.16);
  }
  
  .appointment-booking-calendar .calendar-modes .btn {
    min-height: 36px;
    padding: 0 13px;
    color: var(--ms-section-accent-dark);
    background: rgba(79, 146, 131, 0.08);
    box-shadow: none;
  }
  
  .appointment-booking-calendar .calendar-modes .btn.active {
    color: var(--ms-section-white);
    background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
    box-shadow: 0 10px 22px rgba(52, 125, 104, 0.18);
  }
  
  .appointment-booking-calendar .btn[disabled],
  .appointment-booking-calendar .btn.disabled,
  .appointment-booking-calendar .btn[aria-disabled="true"] {
    color: rgba(36, 54, 50, 0.38);
    background: rgba(36, 54, 50, 0.06);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  /* ==========================================================
     Chevron buttons
  ========================================================== */
  
  .appointment-booking-calendar .c-actions .chevron-wrapper,
  .appointment-booking-calendar .c-actions .cheron-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    background: rgba(79, 146, 131, 0.08);
    box-shadow: none;
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper:hover,
  .appointment-booking-calendar .c-actions .chevron-wrapper:focus-visible,
  .appointment-booking-calendar .c-actions .cheron-wrapper:hover,
  .appointment-booking-calendar .c-actions .cheron-wrapper:focus-visible {
    transform: translateY(-2px);
    background: rgba(79, 146, 131, 0.14);
    box-shadow: 0 0 0 4px rgba(79, 146, 131, 0.10);
    outline: none;
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper .chevron,
  .appointment-booking-calendar .c-actions .cheron-wrapper .chevron {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper .chevron::before,
  .appointment-booking-calendar .c-actions .chevron-wrapper .chevron::after,
  .appointment-booking-calendar .c-actions .cheron-wrapper .chevron::before,
  .appointment-booking-calendar .c-actions .cheron-wrapper .chevron::after {
    content: "";
    position: absolute;
    left: 7px;
    width: 2px;
    height: 9px;
    border-radius: 999px;
    background: var(--ms-section-accent-dark);
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper.previous .chevron::after,
  .appointment-booking-calendar .c-actions .cheron-wrapper.previous .chevron::after {
    top: 1px;
    transform: rotate(45deg);
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper.previous .chevron::before,
  .appointment-booking-calendar .c-actions .cheron-wrapper.previous .chevron::before {
    bottom: 1px;
    transform: rotate(-45deg);
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper.next .chevron::before,
  .appointment-booking-calendar .c-actions .cheron-wrapper.next .chevron::before {
    bottom: 1px;
    transform: rotate(45deg);
  }
  
  .appointment-booking-calendar .c-actions .chevron-wrapper.next .chevron::after,
  .appointment-booking-calendar .c-actions .cheron-wrapper.next .chevron::after {
    top: 1px;
    transform: rotate(-45deg);
  }
  
  /* ==========================================================
     Calendar / Week view
  ========================================================== */
  
  .appointment-booking-calendar .slider {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 2px;
    padding: 2px 2px 10px;
    overflow: auto;
    animation: mindsoulBookingFadeUp 680ms cubic-bezier(.22, 1, .36, 1) both;
  }
  
  .appointment-booking-calendar .slider.hide {
    display: none;
  }
  
  .appointment-booking-calendar .slider .outer,
  .appointment-booking-calendar .slider .outer .inner,
  .appointment-booking-calendar .slider .calendar-item {
    min-height: 100%;
  }
  
  .appointment-booking-calendar .calendar-item {
    display: flex;
    flex-direction: column;
    min-width: 820px;
  }
  
  .appointment-booking-calendar .days-container {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: linear-gradient(180deg, rgba(247, 251, 249, 0.98) 0%, rgba(247, 251, 249, 0.92) 100%);
    backdrop-filter: blur(8px);
  }
  
  .appointment-booking-calendar .days-container .item.empty {
    width: 112px;
    flex: 0 0 112px;
    border-bottom: 1px solid var(--ms-section-line);
  }
  
  .appointment-booking-calendar .days {
    width: calc(100% - 112px);
    flex: 0 0 calc(100% - 112px);
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  
  .appointment-booking-calendar .days .item {
    width: calc(100% / 7);
    flex: 0 0 calc(100% / 7);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ms-section-line);
    border-right: 1px solid var(--ms-section-line-soft);
    color: var(--ms-section-muted);
    font-size: 0.9rem;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
  }
  
  .appointment-booking-calendar .days .item:last-child {
    border-right: 0;
  }
  
  .appointment-booking-calendar .days .item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
  }
  
  .appointment-booking-calendar .days .item.enabled {
    color: var(--ms-section-accent-dark);
  }
  
  .appointment-booking-calendar .days .item.enabled span {
    background: rgba(79, 146, 131, 0.09);
  }
  
  .appointment-booking-calendar .days .item:not(.enabled) span {
    opacity: 0.48;
  }
  
  .appointment-booking-calendar .timeline {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }
  
  .appointment-booking-calendar .slider .calendar-item .timeline .time {
    width: 112px;
    flex: 0 0 112px;
    display: flex;
    flex-direction: column;
    position: sticky;
    left: 0;
    z-index: 5;
    background: linear-gradient(90deg, rgba(247, 251, 249, 0.98) 0%, rgba(247, 251, 249, 0.92) 100%);
  }
  
  .appointment-booking-calendar .timeline .time .item {
    width: 112px;
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 52px;
    padding: 12px 14px 0 0;
    border-right: 1px solid var(--ms-section-line);
    border-bottom: 1px solid var(--ms-section-line-soft);
    color: var(--ms-section-muted-soft);
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  
  .appointment-booking-calendar .slider .calendar-item .timeline .main-area {
    width: calc(100% - 112px);
    flex: 0 0 calc(100% - 112px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.22) 100%);
  }
  
  .appointment-booking-calendar .slider .calendar-item .timeline .main-area .row {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 52px;
    border-bottom: 1px solid var(--ms-section-line-soft);
  }
  
  .appointment-booking-calendar .slider .calendar-item .timeline .main-area .row .cell {
    position: relative;
    width: calc(100% / 7);
    flex: 0 0 calc(100% / 7);
    min-height: 52px;
    border: 0;
    border-right: 1px solid var(--ms-section-line-soft);
    background: rgba(255, 255, 255, 0.22);
    font-family: inherit;
    cursor: default;
    user-select: none;
    transition:
      transform var(--ms-transition-fast),
      opacity var(--ms-transition-fast),
      background var(--ms-transition-fast),
      box-shadow var(--ms-transition-fast);
  }
  
  .appointment-booking-calendar .slider .calendar-item .timeline .main-area .row .cell:last-child {
    border-right: 0;
  }
  
  /* ==========================================================
     Calendar cell states
  ========================================================== */
  
  .appointment-booking-calendar .timeline .row .cell.enabled {
    cursor: pointer;
    background: linear-gradient(180deg, rgba(79, 146, 131, 0.08) 0%, rgba(79, 146, 131, 0.045) 100%);
  }
  
  .appointment-booking-calendar .timeline .row .cell.enabled::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38%;
    max-width: 56px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
    opacity: 0.72;
    transform: translate(-50%, -50%);
    transition:
      width var(--ms-transition-fast),
      opacity var(--ms-transition-fast),
      transform var(--ms-transition-fast),
      box-shadow var(--ms-transition-fast);
  }
  
  .appointment-booking-calendar .timeline .row .cell.enabled:hover,
  .appointment-booking-calendar .timeline .row .cell.enabled:focus-visible {
    background: rgba(79, 146, 131, 0.13);
    box-shadow: inset 0 0 0 2px rgba(79, 146, 131, 0.24);
    outline: none;
  }
  
  .appointment-booking-calendar .timeline .row .cell.enabled:hover::after,
  .appointment-booking-calendar .timeline .row .cell.enabled:focus-visible::after {
    width: 48%;
    opacity: 1;
    box-shadow: 0 6px 16px rgba(52, 125, 104, 0.16);
  }
  
  .appointment-booking-calendar .timeline .row .cell.enabled:active {
    transform: scale(0.985);
  }
  
  .appointment-booking-calendar .timeline .row .cell.selected {
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.26) 0, rgba(255, 255, 255, 0) 38px),
      linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.72),
      0 10px 22px rgba(52, 125, 104, 0.20);
  }
  
  .appointment-booking-calendar .timeline .row .cell.selected::after {
    width: 30%;
    height: 8px;
    background: rgba(255, 255, 255, 0.92);
    opacity: 1;
  }
  
  .appointment-booking-calendar .timeline .row .cell.disabled,
  .appointment-booking-calendar .timeline .row .cell[aria-disabled="true"] {
    cursor: not-allowed;
    background: rgba(36, 54, 50, 0.025);
  }
  
  .appointment-booking-calendar .timeline .row .cell.disabled::after,
  .appointment-booking-calendar .timeline .row .cell[aria-disabled="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16%;
    max-width: 24px;
    height: 4px;
    border-radius: 999px;
    background: rgba(36, 54, 50, 0.14);
    transform: translate(-50%, -50%);
  }
  
  .appointment-booking-calendar .timeline .row .cell.booked {
    cursor: not-allowed;
    opacity: 0.82;
    background: repeating-linear-gradient(
      135deg,
      rgba(110, 79, 179, 0.08) 0,
      rgba(110, 79, 179, 0.08) 7px,
      rgba(90, 61, 150, 0.12) 7px,
      rgba(90, 61, 150, 0.12) 14px
    );
  }
  
  .appointment-booking-calendar .timeline .row .cell.booked:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* ==========================================================
     Feedback / Footer buttons
  ========================================================== */
  
  .appointment-booking-calendar .booking-calendar-feedback {
    min-height: 24px;
    margin-top: 14px;
    color: var(--ms-section-accent-dark);
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 600;
    text-align: right;
    transition:
      opacity var(--ms-transition-fast),
      transform var(--ms-transition-fast);
  }
  
  .appointment-booking-calendar .booking-calendar-feedback.is-error {
    color: var(--ms-section-danger);
  }
  
  .appointment-booking-calendar .booking-calendar-feedback.is-success {
    color: var(--ms-section-accent-dark);
  }
  
  .appointment-booking-calendar .booking-calendar-feedback.is-info {
    color: var(--ms-section-purple-dark);
  }
  
  .appointment-booking-calendar .btn-groups {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    margin-top: 0;
    border-top: 1px solid var(--ms-section-line-soft);
  }
  
  .appointment-booking-calendar .btn-groups .btn {
    min-height: 46px;
    padding: 0 24px;
  }
  
  .appointment-booking-calendar .btn-groups .save {
    min-width: 128px;
  }
  
  .appointment-booking-calendar .btn-groups .cancel {
    color: var(--ms-section-accent-dark);
    background: rgba(79, 146, 131, 0.08);
    box-shadow: none;
  }
  
  .appointment-booking-calendar .btn-groups .cancel:hover,
  .appointment-booking-calendar .btn-groups .cancel:focus-visible {
    background: rgba(79, 146, 131, 0.13);
    box-shadow: 0 0 0 4px rgba(79, 146, 131, 0.10);
  }
  
  .appointment-booking-calendar .btn.save.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.78;
  }
  
  .appointment-booking-calendar .btn.save.is-loading::after {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: mindsoulBookingSpin 760ms linear infinite;
  }
  
  /* ==========================================================
     Error / validation states
  ========================================================== */
  
  .appointment-booking-calendar .error-gradient,
  .appointment-booking-calendar .editable-text.error-gradient,
  .appointment-booking-calendar .custom-select .text-wrapper.error-gradient {
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
      0 0 0 4px var(--ms-section-danger-soft),
      0 10px 24px rgba(159, 45, 45, 0.08);
  }
  
  .appointment-booking-calendar .error-gradient::before,
  .appointment-booking-calendar .editable-text.error-gradient::before,
  .appointment-booking-calendar .custom-select .text-wrapper.error-gradient::before {
    background: linear-gradient(135deg, rgba(191, 73, 73, 0.82), rgba(164, 41, 68, 0.52));
  }
  
  .appointment-booking-calendar .error-text-gradient {
    color: var(--ms-section-danger);
    -webkit-text-fill-color: currentColor;
    text-fill-color: currentColor;
  }
  
  /* ==========================================================
     Focus accessibility
  ========================================================== */
  
  .appointment-booking-calendar a:focus-visible,
  .appointment-booking-calendar button:focus-visible,
  .appointment-booking-calendar [role="button"]:focus-visible,
  .appointment-booking-calendar [role="textbox"]:focus-visible {
    outline: 3px solid rgba(79, 146, 131, 0.28);
    outline-offset: 4px;
  }
  
  .appointment-booking-calendar [aria-disabled="true"]:focus-visible,
  .appointment-booking-calendar [disabled]:focus-visible {
    outline: none;
  }
  
  /* ==========================================================
     Modal / loader priority
  ========================================================== */
  
  .modal {
    z-index: 1000002;
  }
  
  .load-more.on {
    z-index: 1000001;
  }
  
  /* ==========================================================
     Animations
  ========================================================== */
  
  @keyframes mindsoulBookingFadeUp {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes mindsoulBookingSpin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* ==========================================================
     Responsive
     Flexbox only / No CSS Grid / No clamp()
  ========================================================== */
  
  @media (max-width: 1180px) {
    .appointment-booking-calendar {
      padding: 22px;
    }
  
    .appointment-booking-calendar .wrapper {
      width: 94vw;
      height: 92vh;
      padding: 26px;
    }
  
    .appointment-booking-calendar .abcal-header {
      gap: 22px;
    }
  
    .appointment-booking-calendar .programm-selection {
      flex: 0 0 250px;
      min-width: 250px;
    }
  
    .appointment-booking-calendar .editable-text.lg {
      width: 190px;
    }
  
    .appointment-booking-calendar .c-actions .left-area,
    .appointment-booking-calendar .c-actions .right-area {
      flex: 0 0 245px;
    }
  }
  
  @media (max-width: 991px) {
    .appointment-booking-calendar {
      align-items: flex-start;
      justify-content: center;
      padding: 18px;
      overflow-y: auto;
    }
  
    .appointment-booking-calendar .wrapper {
      width: 96vw;
      height: auto;
      min-height: 92vh;
      max-height: none;
      padding: 22px;
      overflow: visible;
    }
  
    .appointment-booking-calendar .abcal-header {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
    }
  
    .appointment-booking-calendar .form-control-container {
      width: 100%;
      gap: 16px;
    }
  
    .appointment-booking-calendar .form-control {
      flex: 1 1 260px;
    }
  
    .appointment-booking-calendar .programm-selection {
      width: 100%;
      min-width: 0;
      flex: 0 0 auto;
    }
  
    .appointment-booking-calendar .c-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }
  
    .appointment-booking-calendar .c-actions .left-area,
    .appointment-booking-calendar .c-actions .right-area {
      width: 100%;
      flex: 0 0 auto;
    }
  
    .appointment-booking-calendar .c-actions .left-area {
      justify-content: flex-start;
    }
  
    .appointment-booking-calendar .c-actions .right-area,
    .appointment-booking-calendar .calendar-modes {
      justify-content: flex-start;
    }
  
    .appointment-booking-calendar .middle-area {
      justify-content: flex-start;
    }
  
    .appointment-booking-calendar .middle-area .text {
      width: 100%;
      justify-content: flex-start;
    }
  
    .appointment-booking-calendar .slider {
      width: 100%;
      overflow-x: auto;
      overflow-y: visible;
      padding-bottom: 12px;
    }
  
    .appointment-booking-calendar .calendar-item {
      min-width: 820px;
      min-height: 620px;
    }
  
    .appointment-booking-calendar .booking-calendar-feedback {
      text-align: left;
    }
  }
  
  @media (max-width: 767px) {
    .appointment-booking-calendar {
      padding: 12px;
    }
  
    .appointment-booking-calendar .wrapper {
      width: 100%;
      min-height: 94vh;
      padding: 18px;
      border-radius: 24px;
    }
  
    .appointment-booking-calendar .abcal-header {
      padding-bottom: 18px;
      margin-bottom: 14px;
    }
  
    .appointment-booking-calendar .form-control-container {
      flex-direction: column;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: 14px;
    }
  
    .appointment-booking-calendar .form-control,
    .appointment-booking-calendar .editable-text.lg,
    .appointment-booking-calendar .abcal-header .form-control .custom-select,
    .appointment-booking-calendar .abcal-header .programm-selection .custom-select {
      width: 100%;
      flex: 0 0 auto;
    }
  
    .appointment-booking-calendar .editable-container {
      width: 100%;
    }
  
    .appointment-booking-calendar .editable-container .editable-text.lg {
      flex: 1 1 auto;
    }
  
    .appointment-booking-calendar .editable-text,
    .appointment-booking-calendar .custom-select .text-wrapper {
      min-height: 48px;
    }
  
    .appointment-booking-calendar .editable-text > div {
      min-height: 46px;
      font-size: 0.95rem;
    }
  
    .appointment-booking-calendar .c-actions .left-area,
    .appointment-booking-calendar .calendar-modes,
    .appointment-booking-calendar .btn-groups {
      flex-wrap: wrap;
    }
  
    .appointment-booking-calendar .middle-area .text {
      min-height: 44px;
      padding: 0 16px;
      font-size: 1rem;
    }
  
    .appointment-booking-calendar .btn,
    .appointment-booking-calendar .calendar-modes .btn {
      min-height: 42px;
      padding: 0 15px;
      font-size: 0.9rem;
    }
  
    .appointment-booking-calendar .btn-groups {
      align-items: stretch;
      justify-content: stretch;
    }
  
    .appointment-booking-calendar .btn-groups .btn {
      flex: 1 1 140px;
      min-height: 48px;
    }
  
    .appointment-booking-calendar .calendar-item {
      min-width: 760px;
    }
  
    .appointment-booking-calendar .days-container .item.empty,
    .appointment-booking-calendar .slider .calendar-item .timeline .time,
    .appointment-booking-calendar .timeline .time .item {
      width: 98px;
      flex-basis: 98px;
    }
  
    .appointment-booking-calendar .days,
    .appointment-booking-calendar .slider .calendar-item .timeline .main-area {
      width: calc(100% - 98px);
      flex-basis: calc(100% - 98px);
    }
  
    .appointment-booking-calendar .timeline .time .item {
      font-size: 0.74rem;
      padding-right: 10px;
    }
  }
  
  @media (max-width: 480px) {
    .appointment-booking-calendar {
      padding: 8px;
    }
  
    .appointment-booking-calendar .wrapper {
      padding: 14px;
      border-radius: 20px;
    }
  
    .appointment-booking-calendar .abcal-header .form-control label {
      font-size: 0.8rem;
    }
  
    .appointment-booking-calendar .custom-select .text-wrapper .text,
    .appointment-booking-calendar .editable-text > div {
      font-size: 0.9rem;
    }
  
    .appointment-booking-calendar .c-actions .chevron-wrapper,
    .appointment-booking-calendar .c-actions .cheron-wrapper {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
    }
  
    .appointment-booking-calendar .left-area .btn {
      flex: 1 1 auto;
    }
  
    .appointment-booking-calendar .calendar-modes .btn {
      flex: 1 1 74px;
    }
  
    .appointment-booking-calendar .btn-groups {
      flex-direction: column;
    }
  
    .appointment-booking-calendar .btn-groups .btn {
      width: 100%;
      flex: 0 0 auto;
    }
  }
  
  @media (max-width: 380px) {
    .appointment-booking-calendar .wrapper {
      padding: 12px;
      border-radius: 18px;
    }
  
    .appointment-booking-calendar .editable-text.sm {
      width: 66px;
      flex-basis: 66px;
    }
  
    .appointment-booking-calendar .middle-area .text {
      font-size: 0.94rem;
    }
  
    .appointment-booking-calendar .calendar-modes .btn {
      flex-basis: 68px;
      padding: 0 10px;
    }
  }
  
  /* ==========================================================
     Reduced motion
  ========================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .appointment-booking-calendar,
    .appointment-booking-calendar *,
    .appointment-booking-calendar *::before,
    .appointment-booking-calendar *::after {
      animation: none;
      transition: none;
      scroll-behavior: auto;
    }
  
    .appointment-booking-calendar .wrapper,
    .appointment-booking-calendar.on .wrapper,
    .appointment-booking-calendar .slider {
      transform: none;
    }
  }

  /* ==========================================================
   MindSoul Booking Calendar - Event chips / Month view
   Flexbox only / No CSS Grid / No clamp()
   ========================================================== */

.appointment-booking-calendar .timeline .row .cell.enabled::after,
.appointment-booking-calendar .timeline .row .cell.disabled::after,
.appointment-booking-calendar .timeline .row .cell[aria-disabled="true"]::after,
.appointment-booking-calendar .timeline .row .cell.selected::after {
    content: none;
    display: none;
}

.appointment-booking-calendar .calendar-item .cell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px;
}

.appointment-booking-calendar .booking-slot-event {
    width: 100%;
    min-width: 0;
    min-height: 28px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    padding: 5px 8px;

    border-radius: 8px;
    border-left: 3px solid var(--ms-section-accent);

    background: rgba(79, 146, 131, 0.11);
    color: var(--ms-section-accent-dark);

    font-size: 0.74rem;
    line-height: 1.15;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;

    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        opacity 220ms ease,
        background 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

.appointment-booking-calendar .booking-slot-event-time {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.appointment-booking-calendar .booking-slot-event-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-booking-calendar .cell.enabled:hover .booking-slot-event,
.appointment-booking-calendar .cell.enabled:focus-visible .booking-slot-event {
    transform: translateY(-1px);
    background: rgba(79, 146, 131, 0.17);
    box-shadow: 0 8px 18px rgba(52, 125, 104, 0.14);
}

.appointment-booking-calendar .booking-slot-event.is-selected {
    border-left-color: rgba(255, 255, 255, 0.86);
    background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(52, 125, 104, 0.18);
}

.appointment-booking-calendar .booking-slot-event.is-booked {
    border-left-color: var(--ms-section-purple);
    background: rgba(110, 79, 179, 0.11);
    color: var(--ms-section-purple-dark);
    opacity: 0.82;
}

.appointment-booking-calendar .cell.booked {
    cursor: not-allowed;
}

.appointment-booking-calendar .cell.booked .booking-slot-event {
    pointer-events: none;
}

/* Month view */

.appointment-booking-calendar .booking-month-view {
    min-width: 980px;
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.appointment-booking-calendar .booking-month-weekdays {
    position: sticky;
    top: 0;
    z-index: 8;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    background: rgba(247, 251, 249, 0.96);
    backdrop-filter: blur(8px);

    border-bottom: 1px solid var(--ms-section-line);
}

.appointment-booking-calendar .booking-month-weekday {
    flex: 0 0 calc(100% / 7);

    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-height: 42px;
    padding: 0 12px;

    color: var(--ms-section-muted);
    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.appointment-booking-calendar .booking-month-body {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;

    border-left: 1px solid var(--ms-section-line-soft);
}

.appointment-booking-calendar .booking-month-day {
    flex: 0 0 calc(100% / 7);

    min-height: 132px;
    padding: 9px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    border-right: 1px solid var(--ms-section-line-soft);
    border-bottom: 1px solid var(--ms-section-line-soft);

    background: rgba(255, 255, 255, 0.34);

    transition:
        background 220ms ease,
        box-shadow 220ms ease,
        opacity 220ms ease;
}

.appointment-booking-calendar .booking-month-day:hover {
    background: rgba(255, 255, 255, 0.58);
}

.appointment-booking-calendar .booking-month-day.is-other-month {
    opacity: 0.46;
}

.appointment-booking-calendar .booking-month-day.is-empty {
    background: rgba(36, 54, 50, 0.018);
}

.appointment-booking-calendar .booking-month-day.is-today {
    background:
        radial-gradient(circle at 18px 18px, rgba(79, 146, 131, 0.14), rgba(79, 146, 131, 0) 34px),
        rgba(255, 255, 255, 0.52);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.20);
}

.appointment-booking-calendar .booking-month-day-number {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    color: var(--ms-section-text);
    font-size: 0.88rem;
    line-height: 1;
    font-weight: 700;
}

.appointment-booking-calendar .booking-month-day.is-today .booking-month-day-number {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
}

.appointment-booking-calendar .booking-month-events {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-height: 0;
    max-height: 92px;

    overflow-y: auto;
    padding-right: 2px;
}

.appointment-booking-calendar .booking-month-event.cell {
    width: 100%;
    min-height: 29px;

    flex: 0 0 auto;

    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;

    cursor: pointer;
}

.appointment-booking-calendar .booking-month-event.cell.enabled:hover,
.appointment-booking-calendar .booking-month-event.cell.enabled:focus-visible {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.appointment-booking-calendar .booking-month-event.cell.selected {
    background: transparent;
    box-shadow: none;
}

/* Week view event styling */

.appointment-booking-calendar .timeline .row .cell {
    min-height: 58px;
}

.appointment-booking-calendar .timeline .row .cell.disabled:not(.booked) {
    padding: 0;
}

.appointment-booking-calendar .timeline .row .cell.disabled:not(.booked) .booking-slot-event {
    display: none;
}

.appointment-booking-calendar .timeline .row .cell.enabled {
    background: rgba(79, 146, 131, 0.045);
}

.appointment-booking-calendar .timeline .row .cell.selected {
    background: rgba(79, 146, 131, 0.10);
}

/* Responsive month view */

@media (max-width: 991px) {
    .appointment-booking-calendar .booking-month-view {
        min-width: 900px;
    }

    .appointment-booking-calendar .booking-month-day {
        min-height: 126px;
    }
}

@media (max-width: 767px) {
    .appointment-booking-calendar .booking-month-view {
        min-width: 820px;
    }

    .appointment-booking-calendar .booking-month-weekday {
        min-height: 40px;
        padding: 0 9px;
        font-size: 0.78rem;
    }

    .appointment-booking-calendar .booking-month-day {
        min-height: 118px;
        padding: 7px;
    }

    .appointment-booking-calendar .booking-slot-event {
        min-height: 27px;
        padding: 5px 7px;
        font-size: 0.7rem;
    }

    .appointment-booking-calendar .booking-slot-event-time {
        font-size: 0.69rem;
    }
}

@media (max-width: 380px) {
    .appointment-booking-calendar .booking-month-view {
        min-width: 760px;
    }

    .appointment-booking-calendar .booking-month-day {
        min-height: 112px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .appointment-booking-calendar .booking-slot-event,
    .appointment-booking-calendar .booking-month-day,
    .appointment-booking-calendar .booking-month-event.cell {
        animation: none;
        transition: none;
    }
}

/* ==========================================================
   Empty initial booking state
   Show event only after selected/booked
   ========================================================== */

   .appointment-booking-calendar .timeline .row .cell.enabled::after,
   .appointment-booking-calendar .timeline .row .cell.disabled::after,
   .appointment-booking-calendar .timeline .row .cell[aria-disabled="true"]::after,
   .appointment-booking-calendar .timeline .row .cell.selected::after {
       content: none;
       display: none;
   }
   
   .appointment-booking-calendar .calendar-item .cell {
       display: flex;
       align-items: flex-start;
       justify-content: flex-start;
       padding: 6px;
   }
   
   .appointment-booking-calendar .timeline .row .cell.enabled,
   .appointment-booking-calendar .booking-month-event.cell.enabled {
       background: transparent;
       cursor: pointer;
   }
   
   .appointment-booking-calendar .timeline .row .cell.is-empty-available,
   .appointment-booking-calendar .booking-month-event.cell.is-empty-available {
       background: transparent;
   }
   
   .appointment-booking-calendar .timeline .row .cell.is-empty-available:hover,
   .appointment-booking-calendar .timeline .row .cell.is-empty-available:focus-visible,
   .appointment-booking-calendar .booking-month-event.cell.is-empty-available:hover,
   .appointment-booking-calendar .booking-month-event.cell.is-empty-available:focus-visible {
       background: rgba(79, 146, 131, 0.07);
       box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.16);
       outline: none;
   }
   
   .appointment-booking-calendar .timeline .row .cell.disabled,
   .appointment-booking-calendar .timeline .row .cell[aria-disabled="true"] {
       background: transparent;
       cursor: default;
   }
   
   .appointment-booking-calendar .timeline .row .cell.disabled:hover,
   .appointment-booking-calendar .timeline .row .cell[aria-disabled="true"]:hover {
       background: transparent;
       box-shadow: none;
   }
   
   .appointment-booking-calendar .booking-slot-event {
       width: 100%;
       min-width: 0;
       min-height: 28px;
   
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 6px;
   
       padding: 5px 8px;
   
       border-radius: 8px;
       border-left: 3px solid var(--ms-section-accent);
   
       background: rgba(79, 146, 131, 0.13);
       color: var(--ms-section-accent-dark);
   
       font-size: 0.74rem;
       line-height: 1.15;
       font-weight: 700;
   
       white-space: nowrap;
       overflow: hidden;
   
       transition:
           transform 220ms cubic-bezier(.22, 1, .36, 1),
           opacity 220ms ease,
           background 220ms ease,
           color 220ms ease,
           box-shadow 220ms ease;
   }
   
   .appointment-booking-calendar .booking-slot-event-time {
       flex: 0 0 auto;
       font-size: 0.72rem;
       font-weight: 800;
       letter-spacing: 0.01em;
   }
   
   .appointment-booking-calendar .booking-slot-event-title {
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .appointment-booking-calendar .cell.selected .booking-slot-event,
   .appointment-booking-calendar .booking-slot-event.is-selected {
       border-left-color: rgba(255, 255, 255, 0.86);
       background: linear-gradient(135deg, var(--ms-section-accent-light) 0%, var(--ms-section-accent-dark) 100%);
       color: #ffffff;
       box-shadow: 0 10px 22px rgba(52, 125, 104, 0.18);
   }
   
   .appointment-booking-calendar .cell.booked .booking-slot-event,
   .appointment-booking-calendar .booking-slot-event.is-booked {
       border-left-color: var(--ms-section-purple);
       background: rgba(110, 79, 179, 0.12);
       color: var(--ms-section-purple-dark);
       opacity: 0.9;
   }
   
   .appointment-booking-calendar .cell.enabled:hover .booking-slot-event,
   .appointment-booking-calendar .cell.enabled:focus-visible .booking-slot-event {
       transform: translateY(-1px);
       box-shadow: 0 8px 18px rgba(52, 125, 104, 0.14);
   }

   /* ==========================================================
   Locked calendar state before required fields are completed
   Visual feedback only - real blocking γίνεται από το JS
   ========================================================== */

.appointment-booking-calendar.is-calendar-locked .timeline .row .cell.enabled,
.appointment-booking-calendar.is-calendar-locked .booking-month-event.cell.enabled {
    cursor: not-allowed;
}

.appointment-booking-calendar.is-calendar-locked .timeline .row .cell.enabled:hover,
.appointment-booking-calendar.is-calendar-locked .timeline .row .cell.enabled:focus-visible,
.appointment-booking-calendar.is-calendar-locked .booking-month-event.cell.enabled:hover,
.appointment-booking-calendar.is-calendar-locked .booking-month-event.cell.enabled:focus-visible {
    background: rgba(159, 45, 45, 0.045);
    box-shadow: inset 0 0 0 1px rgba(159, 45, 45, 0.14);
    outline: none;
}

.appointment-booking-calendar.is-calendar-locked .timeline .row .cell.enabled .booking-slot-event,
.appointment-booking-calendar.is-calendar-locked .booking-month-event.cell.enabled .booking-slot-event {
    opacity: 0.55;
}

.appointment-booking-calendar.is-calendar-locked .timeline .row .cell.is-empty-available:hover,
.appointment-booking-calendar.is-calendar-locked .timeline .row .cell.is-empty-available:focus-visible,
.appointment-booking-calendar.is-calendar-locked .booking-month-event.cell.is-empty-available:hover,
.appointment-booking-calendar.is-calendar-locked .booking-month-event.cell.is-empty-available:focus-visible {
    background: rgba(159, 45, 45, 0.045);
    box-shadow: inset 0 0 0 1px rgba(159, 45, 45, 0.14);
}

.appointment-booking-calendar .booking-calendar-feedback.is-error {
    color: var(--ms-section-danger);
}

.appointment-booking-calendar .editable-text.error-gradient {
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 0 4px var(--ms-section-danger-soft),
        0 10px 24px rgba(159, 45, 45, 0.08);
}

.appointment-booking-calendar .editable-text.error-gradient::before {
    background: linear-gradient(135deg, rgba(191, 73, 73, 0.82), rgba(164, 41, 68, 0.52));
}

.appointment-booking-calendar .custom-select .text-wrapper.error-gradient {
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 0 4px var(--ms-section-danger-soft),
        0 10px 24px rgba(159, 45, 45, 0.08);
}

.appointment-booking-calendar .custom-select .text-wrapper.error-gradient::before {
    background: linear-gradient(135deg, rgba(191, 73, 73, 0.82), rgba(164, 41, 68, 0.52));
}

/* ==========================================================
   Improved Day View
   ========================================================== */

   .appointment-booking-calendar .booking-day-view {
    min-width: 760px;
    display: flex;
    justify-content: center;
    padding: 22px 8px 24px;
}

.appointment-booking-calendar .booking-day-shell {
    width: 100%;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.appointment-booking-calendar .booking-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(79, 154, 130, 0.12) 0%, rgba(52, 125, 104, 0.08) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 12px 30px rgba(36, 54, 50, 0.04);
}

.appointment-booking-calendar .booking-day-header.is-disabled-day {
    background: rgba(36, 54, 50, 0.045);
    box-shadow: inset 0 0 0 1px rgba(36, 54, 50, 0.08);
}

.appointment-booking-calendar .booking-day-header-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.appointment-booking-calendar .booking-day-header-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #4f9283;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.appointment-booking-calendar .booking-day-header-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1.28rem;
    line-height: 1.2;
    font-weight: 800;
}

.appointment-booking-calendar .booking-day-header-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: #347d68;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.appointment-booking-calendar .booking-day-header.is-disabled-day .booking-day-header-meta,
.appointment-booking-calendar .booking-day-header.is-disabled-day .booking-day-header-eyebrow {
    background: rgba(255, 255, 255, 0.55);
    color: rgba(36, 54, 50, 0.52);
}

.appointment-booking-calendar .booking-day-slots-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.54);
    box-shadow:
        inset 0 0 0 1px var(--ms-section-line-soft),
        0 18px 38px rgba(36, 54, 50, 0.035);
}

.appointment-booking-calendar .booking-day-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
}

.appointment-booking-calendar .booking-day-event.cell {
    flex: 0 0 calc(33.333% - 8px);
    min-width: 190px;
    width: auto;
    min-height: 58px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        opacity 220ms ease;
}

.appointment-booking-calendar .booking-day-event.cell .booking-slot-event {
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(79, 146, 131, 0.08);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.10);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 220ms ease,
        background 220ms ease;
}

.appointment-booking-calendar .booking-day-event.cell.enabled:hover .booking-slot-event,
.appointment-booking-calendar .booking-day-event.cell.enabled:focus-visible .booking-slot-event {
    transform: translateY(-1px);
    background: rgba(79, 146, 131, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.16),
        0 10px 24px rgba(36, 54, 50, 0.05);
}

.appointment-booking-calendar .booking-day-event.cell.selected .booking-slot-event,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-selected {
    background: linear-gradient(135deg, #4f9a82 0%, #347d68 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 14px 30px rgba(52, 125, 104, 0.20);
}

.appointment-booking-calendar .booking-day-event.cell.selected .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell.selected .booking-slot-event-title,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-selected .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-selected .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-day-event.cell.booked .booking-slot-event,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-booked {
    background: linear-gradient(135deg, #6E4FB3 0%, #5A3D96 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 14px 26px rgba(90, 61, 150, 0.18);
}

.appointment-booking-calendar .booking-day-event.cell.booked .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell.booked .booking-slot-event-title,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-booked .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-booked .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-slot-event-time {
    font-size: 1rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-slot-event-title {
    font-size: 0.92rem;
    line-height: 1.1;
    font-weight: 800;
    text-align: right;
}

.appointment-booking-calendar .booking-day-empty-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 26px 22px;
    border-radius: 22px;
    background: rgba(36, 54, 50, 0.035);
    box-shadow: inset 0 0 0 1px rgba(36, 54, 50, 0.06);
}

.appointment-booking-calendar .booking-day-empty-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1rem;
    font-weight: 800;
}

.appointment-booking-calendar .booking-empty-message {
    margin: 0;
    color: rgba(36, 54, 50, 0.54);
    font-size: 0.93rem;
    line-height: 1.45;
    font-weight: 600;
    padding: 0;
    background: transparent;
}

@media (max-width: 991px) {
    .appointment-booking-calendar .booking-day-view {
        min-width: 680px;
    }

    .appointment-booking-calendar .booking-day-event.cell {
        flex: 0 0 calc(50% - 6px);
        min-width: 160px;
    }
}

@media (max-width: 767px) {
    .appointment-booking-calendar .booking-day-view {
        min-width: 560px;
        padding: 18px 6px 20px;
    }

    .appointment-booking-calendar .booking-day-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 16px;
    }

    .appointment-booking-calendar .booking-day-header-meta {
        min-height: 38px;
        padding: 0 12px;
    }

    .appointment-booking-calendar .booking-day-slots-wrap {
        padding: 14px;
    }

    .appointment-booking-calendar .booking-day-event.cell {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .appointment-booking-calendar .booking-day-event.cell .booking-slot-event {
        min-height: 54px;
    }
}

/* ==========================================================
   Improved List View
   ========================================================== */

.appointment-booking-calendar .booking-list-view {
    min-width: 760px;
    display: flex;
    justify-content: center;
    padding: 22px 8px 24px;
}

.appointment-booking-calendar .booking-list-shell {
    width: 100%;
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.appointment-booking-calendar .booking-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(79, 154, 130, 0.12) 0%, rgba(52, 125, 104, 0.08) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 12px 30px rgba(36, 54, 50, 0.04);
}

.appointment-booking-calendar .booking-list-header-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.appointment-booking-calendar .booking-list-header-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #4f9283;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.appointment-booking-calendar .booking-list-header-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1.26rem;
    line-height: 1.2;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-header-description {
    margin: 0;
    color: rgba(36, 54, 50, 0.58);
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
}

.appointment-booking-calendar .booking-list-header-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: #347d68;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.appointment-booking-calendar .booking-list-days {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appointment-booking-calendar .booking-list-day {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 0 0 1px var(--ms-section-line-soft),
        0 14px 32px rgba(36, 54, 50, 0.035);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        background 220ms ease,
        box-shadow 220ms ease,
        opacity 220ms ease;
}

.appointment-booking-calendar .booking-list-day.is-enabled-day:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.76);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 18px 38px rgba(36, 54, 50, 0.055);
}

.appointment-booking-calendar .booking-list-day.is-disabled-day {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(36, 54, 50, 0.025) 0,
            rgba(36, 54, 50, 0.025) 8px,
            rgba(36, 54, 50, 0.045) 8px,
            rgba(36, 54, 50, 0.045) 16px
        );
    opacity: 0.72;
}

.appointment-booking-calendar .booking-list-day.is-today {
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.26),
        0 16px 34px rgba(36, 54, 50, 0.05);
}

.appointment-booking-calendar .booking-list-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.appointment-booking-calendar .booking-list-day-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.appointment-booking-calendar .booking-list-day-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 800;
    text-transform: capitalize;
}

.appointment-booking-calendar .booking-list-day-subtitle {
    color: rgba(36, 54, 50, 0.55);
    font-size: 0.88rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointment-booking-calendar .booking-list-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(79, 146, 131, 0.10);
    color: #347d68;
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.appointment-booking-calendar .booking-list-day.is-disabled-day .booking-list-day-title,
.appointment-booking-calendar .booking-list-day.is-disabled-day .booking-list-day-subtitle,
.appointment-booking-calendar .booking-list-day.is-disabled-day .booking-list-day-badge {
    color: rgba(36, 54, 50, 0.46);
}

.appointment-booking-calendar .booking-list-day.is-disabled-day .booking-list-day-badge {
    background: rgba(255, 255, 255, 0.48);
}

.appointment-booking-calendar .booking-list-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.appointment-booking-calendar .booking-list-event.cell {
    flex: 0 0 calc(25% - 8px);
    min-width: 150px;
    width: auto;
    min-height: 52px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: transparent;
    cursor: pointer;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event {
    width: 100%;
    min-height: 52px;
    padding: 9px 13px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    background: rgba(79, 146, 131, 0.08);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.10);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 220ms ease,
        background 220ms ease;
}

.appointment-booking-calendar .booking-list-event.cell.enabled:hover .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell.enabled:focus-visible .booking-slot-event {
    transform: translateY(-1px);
    background: rgba(79, 146, 131, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.16),
        0 10px 24px rgba(36, 54, 50, 0.05);
}

.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected {
    background: linear-gradient(135deg, #4f9a82 0%, #347d68 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 14px 30px rgba(52, 125, 104, 0.20);
}

.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked {
    background: linear-gradient(135deg, #6E4FB3 0%, #5A3D96 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 14px 26px rgba(90, 61, 150, 0.18);
}

.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event-time {
    font-size: 0.98rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event-title {
    font-size: 0.88rem;
    line-height: 1.1;
    font-weight: 800;
    text-align: right;
}

.appointment-booking-calendar .booking-list-unavailable {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(36, 54, 50, 0.040);
    color: rgba(36, 54, 50, 0.50);
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 700;
}

@media (max-width: 991px) {
    .appointment-booking-calendar .booking-list-view {
        min-width: 680px;
    }

    .appointment-booking-calendar .booking-list-event.cell {
        flex: 0 0 calc(33.333% - 7px);
        min-width: 140px;
    }
}

@media (max-width: 767px) {
    .appointment-booking-calendar .booking-list-view {
        min-width: 560px;
        padding: 18px 6px 20px;
    }

    .appointment-booking-calendar .booking-list-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .appointment-booking-calendar .booking-list-header-meta {
        min-height: 38px;
        padding: 0 12px;
    }

    .appointment-booking-calendar .booking-list-day {
        padding: 14px;
    }

    .appointment-booking-calendar .booking-list-day-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .appointment-booking-calendar .booking-list-event.cell {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .appointment-booking-calendar .booking-list-event.cell .booking-slot-event {
        min-height: 54px;
    }
}

/* ==========================================================
   Improved List View - Agenda style
   Different from Day View
   ========================================================== */

.appointment-booking-calendar .booking-list-view {
    min-width: 760px;
    display: flex;
    justify-content: center;
    padding: 18px 8px 24px;
}

.appointment-booking-calendar .booking-list-shell {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.appointment-booking-calendar .booking-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.12),
        0 12px 30px rgba(36, 54, 50, 0.035);
}

.appointment-booking-calendar .booking-list-toolbar-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.appointment-booking-calendar .booking-list-eyebrow {
    color: #4f9283;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.appointment-booking-calendar .booking-list-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-counter {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 146, 131, 0.10);
    color: #347d68;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.appointment-booking-calendar .booking-list-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appointment-booking-calendar .booking-list-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow:
        inset 0 0 0 1px rgba(36, 54, 50, 0.06),
        0 10px 26px rgba(36, 54, 50, 0.025);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        background 220ms ease,
        box-shadow 220ms ease,
        opacity 220ms ease;
}

.appointment-booking-calendar .booking-list-row.is-enabled-day:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 14px 32px rgba(36, 54, 50, 0.045);
}

.appointment-booking-calendar .booking-list-row.is-today {
    box-shadow:
        inset 4px 0 0 #4f9283,
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 12px 30px rgba(36, 54, 50, 0.035);
}

.appointment-booking-calendar .booking-list-row.is-disabled-day {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(36, 54, 50, 0.020) 0,
            rgba(36, 54, 50, 0.020) 8px,
            rgba(36, 54, 50, 0.040) 8px,
            rgba(36, 54, 50, 0.040) 16px
        );
    opacity: 0.72;
}

.appointment-booking-calendar .booking-list-date {
    width: 190px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(79, 146, 131, 0.075);
}

.appointment-booking-calendar .booking-list-row.is-disabled-day .booking-list-date {
    background: rgba(36, 54, 50, 0.045);
}

.appointment-booking-calendar .booking-list-weekday {
    color: #4f9283;
    font-size: 0.82rem;
    line-height: 1.15;
    font-weight: 800;
    text-transform: capitalize;
}

.appointment-booking-calendar .booking-list-date-number {
    color: var(--ms-section-text);
    font-size: 1rem;
    line-height: 1.15;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-day-status {
    width: fit-content;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    color: rgba(36, 54, 50, 0.58);
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-slots {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.appointment-booking-calendar .booking-list-event.cell {
    width: auto;
    min-width: 112px;
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event {
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(79, 146, 131, 0.095);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.10);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        background 220ms ease,
        box-shadow 220ms ease;
}

.appointment-booking-calendar .booking-list-event.cell.enabled:hover .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell.enabled:focus-visible .booking-slot-event {
    transform: translateY(-1px);
    background: rgba(79, 146, 131, 0.16);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.18),
        0 8px 18px rgba(36, 54, 50, 0.045);
}

.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected {
    background: linear-gradient(135deg, #4f9a82 0%, #347d68 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 10px 22px rgba(52, 125, 104, 0.18);
}

.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked {
    background: linear-gradient(135deg, #6E4FB3 0%, #5A3D96 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 22px rgba(90, 61, 150, 0.16);
}

.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event-time {
    font-size: 0.92rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event-title {
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-unavailable {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(36, 54, 50, 0.045);
    color: rgba(36, 54, 50, 0.52);
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 700;
}

@media (max-width: 991px) {
    .appointment-booking-calendar .booking-list-view {
        min-width: 680px;
    }

    .appointment-booking-calendar .booking-list-date {
        width: 165px;
        min-width: 165px;
    }

    .appointment-booking-calendar .booking-list-event.cell {
        min-width: 104px;
    }
}

@media (max-width: 767px) {
    .appointment-booking-calendar .booking-list-view {
        min-width: 560px;
        padding: 16px 6px 20px;
    }

    .appointment-booking-calendar .booking-list-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-booking-calendar .booking-list-row {
        flex-direction: column;
        gap: 10px;
    }

    .appointment-booking-calendar .booking-list-date {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .appointment-booking-calendar .booking-list-slots {
        align-items: stretch;
    }

    .appointment-booking-calendar .booking-list-event.cell {
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
    }
}

/* ==========================================================
   DAY VIEW - Focused single-day panel
   ========================================================== */

   .appointment-booking-calendar .booking-day-view {
    min-width: 760px;
    display: flex;
    justify-content: center;
    padding: 20px 8px 24px;
}

.appointment-booking-calendar .booking-day-shell {
    width: 100%;
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.appointment-booking-calendar .booking-day-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(79, 154, 130, 0.12) 0%, rgba(52, 125, 104, 0.08) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.12),
        0 14px 36px rgba(36, 54, 50, 0.04);
}

.appointment-booking-calendar .booking-day-hero.is-disabled-day {
    background: rgba(36, 54, 50, 0.045);
    box-shadow: inset 0 0 0 1px rgba(36, 54, 50, 0.08);
}

.appointment-booking-calendar .booking-day-hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.appointment-booking-calendar .booking-day-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #4f9283;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.appointment-booking-calendar .booking-day-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 2rem;
    line-height: 1.08;
    font-weight: 800;
}

.appointment-booking-calendar .booking-day-desc {
    margin: 0;
    color: rgba(36, 54, 50, 0.62);
    font-size: 0.96rem;
    line-height: 1.45;
    font-weight: 600;
}

.appointment-booking-calendar .booking-day-hero-aside {
    display: flex;
    align-items: center;
}

.appointment-booking-calendar .booking-day-stat {
    min-width: 170px;
    padding: 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.appointment-booking-calendar .booking-day-stat-value {
    color: #347d68;
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-day-stat-label {
    color: rgba(36, 54, 50, 0.56);
    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 700;
}

.appointment-booking-calendar .booking-day-content {
    padding: 24px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.56);
    box-shadow:
        inset 0 0 0 1px var(--ms-section-line-soft),
        0 18px 40px rgba(36, 54, 50, 0.035);
}

.appointment-booking-calendar .booking-day-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.appointment-booking-calendar .booking-day-event.cell {
    flex: 0 0 calc(33.333% - 11px);
    min-width: 190px;
    min-height: 84px;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    cursor: pointer;
}

.appointment-booking-calendar .booking-day-event.cell .booking-slot-event {
    width: 100%;
    min-height: 84px;
    padding: 16px 18px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(79, 146, 131, 0.08);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.10);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        background 220ms ease,
        box-shadow 220ms ease;
}

.appointment-booking-calendar .booking-day-event.cell.enabled:hover .booking-slot-event,
.appointment-booking-calendar .booking-day-event.cell.enabled:focus-visible .booking-slot-event {
    transform: translateY(-2px);
    background: rgba(79, 146, 131, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 14px 26px rgba(36, 54, 50, 0.05);
}

.appointment-booking-calendar .booking-day-event.cell.selected .booking-slot-event,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-selected {
    background: linear-gradient(135deg, #4f9a82 0%, #347d68 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.14),
        0 16px 32px rgba(52, 125, 104, 0.18);
}

.appointment-booking-calendar .booking-day-event.cell.booked .booking-slot-event,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-booked {
    background: linear-gradient(135deg, #6E4FB3 0%, #5A3D96 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 16px 30px rgba(90, 61, 150, 0.16);
}

.appointment-booking-calendar .booking-day-event.cell.selected .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell.selected .booking-slot-event-title,
.appointment-booking-calendar .booking-day-event.cell.booked .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell.booked .booking-slot-event-title,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-selected .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-selected .booking-slot-event-title,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-booked .booking-slot-event-time,
.appointment-booking-calendar .booking-day-event.cell .booking-slot-event.is-booked .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-day-event.cell .booking-slot-event-time {
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-day-event.cell .booking-slot-event-title {
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 800;
    text-align: right;
}

.appointment-booking-calendar .booking-day-empty-card {
    width: 100%;
    padding: 28px 24px;
    border-radius: 24px;
    background: rgba(36, 54, 50, 0.04);
    box-shadow: inset 0 0 0 1px rgba(36, 54, 50, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appointment-booking-calendar .booking-day-empty-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.appointment-booking-calendar .booking-empty-message {
    margin: 0;
    color: rgba(36, 54, 50, 0.54);
    font-size: 0.94rem;
    line-height: 1.45;
    font-weight: 600;
}

/* ==========================================================
   LIST VIEW - Weekly agenda
   ========================================================== */

.appointment-booking-calendar .booking-list-view {
    min-width: 760px;
    display: flex;
    justify-content: center;
    padding: 16px 8px 24px;
}

.appointment-booking-calendar .booking-list-shell {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.appointment-booking-calendar .booking-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.10),
        0 12px 28px rgba(36, 54, 50, 0.03);
}

.appointment-booking-calendar .booking-list-toolbar-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.appointment-booking-calendar .booking-list-eyebrow {
    color: #4f9283;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.appointment-booking-calendar .booking-list-title {
    margin: 0;
    color: var(--ms-section-text);
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-counter {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 146, 131, 0.10);
    color: #347d68;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.appointment-booking-calendar .booking-list-agenda {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appointment-booking-calendar .booking-list-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow:
        inset 0 0 0 1px rgba(36, 54, 50, 0.06),
        0 10px 28px rgba(36, 54, 50, 0.025);
}

.appointment-booking-calendar .booking-list-row.is-today {
    box-shadow:
        inset 4px 0 0 #4f9283,
        inset 0 0 0 1px rgba(79, 146, 131, 0.14),
        0 12px 30px rgba(36, 54, 50, 0.03);
}

.appointment-booking-calendar .booking-list-row.is-disabled-day {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(36, 54, 50, 0.020) 0,
            rgba(36, 54, 50, 0.020) 8px,
            rgba(36, 54, 50, 0.038) 8px,
            rgba(36, 54, 50, 0.038) 16px
        );
    opacity: 0.74;
}

.appointment-booking-calendar .booking-list-rail {
    width: 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(79, 146, 131, 0.07);
}

.appointment-booking-calendar .booking-list-row.is-disabled-day .booking-list-rail {
    background: rgba(36, 54, 50, 0.045);
}

.appointment-booking-calendar .booking-list-weekday {
    color: #4f9283;
    font-size: 0.86rem;
    line-height: 1.15;
    font-weight: 800;
    text-transform: capitalize;
}

.appointment-booking-calendar .booking-list-date-number {
    color: var(--ms-section-text);
    font-size: 1.06rem;
    line-height: 1.15;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-day-status {
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    color: rgba(36, 54, 50, 0.56);
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.appointment-booking-calendar .booking-list-slots {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.appointment-booking-calendar .booking-list-event.cell {
    min-width: 118px;
    min-height: 42px;
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event {
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(79, 146, 131, 0.095);
    box-shadow: inset 0 0 0 1px rgba(79, 146, 131, 0.10);
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        background 220ms ease,
        box-shadow 220ms ease;
}

.appointment-booking-calendar .booking-list-event.cell.enabled:hover .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell.enabled:focus-visible .booking-slot-event {
    transform: translateY(-1px);
    background: rgba(79, 146, 131, 0.16);
    box-shadow:
        inset 0 0 0 1px rgba(79, 146, 131, 0.16),
        0 8px 18px rgba(36, 54, 50, 0.045);
}

.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected {
    background: linear-gradient(135deg, #4f9a82 0%, #347d68 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.14),
        0 10px 22px rgba(52, 125, 104, 0.16);
}

.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked {
    background: linear-gradient(135deg, #6E4FB3 0%, #5A3D96 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 10px 22px rgba(90, 61, 150, 0.16);
}

.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell.selected .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell.booked .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-selected .booking-slot-event-title,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked .booking-slot-event-time,
.appointment-booking-calendar .booking-list-event.cell .booking-slot-event.is-booked .booking-slot-event-title {
    color: #ffffff;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event-time {
    font-size: 0.92rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-event.cell .booking-slot-event-title {
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 800;
}

.appointment-booking-calendar .booking-list-unavailable {
    margin: 0;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(36, 54, 50, 0.045);
    color: rgba(36, 54, 50, 0.50);
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 700;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 991px) {
    .appointment-booking-calendar .booking-day-view,
    .appointment-booking-calendar .booking-list-view {
        min-width: 680px;
    }

    .appointment-booking-calendar .booking-day-event.cell {
        flex: 0 0 calc(50% - 8px);
    }

    .appointment-booking-calendar .booking-list-rail {
        width: 185px;
        min-width: 185px;
    }
}

@media (max-width: 767px) {
    .appointment-booking-calendar .booking-day-view,
    .appointment-booking-calendar .booking-list-view {
        min-width: 560px;
        padding: 16px 6px 20px;
    }

    .appointment-booking-calendar .booking-day-hero {
        flex-direction: column;
        padding: 18px;
    }

    .appointment-booking-calendar .booking-day-title {
        font-size: 1.5rem;
    }

    .appointment-booking-calendar .booking-day-content {
        padding: 16px;
    }

    .appointment-booking-calendar .booking-day-event.cell {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .appointment-booking-calendar .booking-list-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .appointment-booking-calendar .booking-list-row {
        flex-direction: column;
    }

    .appointment-booking-calendar .booking-list-rail {
        width: 100%;
        min-width: 100%;
    }

    .appointment-booking-calendar .booking-list-event.cell {
        flex: 0 0 calc(50% - 5px);
        min-width: 0;
    }
}