/* Madbax UI Live — mobile chrome drawer, filter, course sliders */

/* Drawer outside .mbx-chrome has no design tokens — force opaque panel */
.mbx-tab__drawer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  z-index: 200020 !important;
}

.mbx-tab__scrim {
  background: rgba(0, 0, 0, 0.32) !important;
  z-index: 200010 !important;
}

.mbx-tab__drawer-nav a {
  color: #17191a !important;
  -webkit-text-fill-color: #17191a !important;
}

.mbx-tab__drawer-cta {
  background: #00e599 !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

/* Filter bar — phone */
@media (max-width: 899px) {
  .mbx-filter {
    padding: 8px 0 12px !important;
  }

  .mbx-filter__inner {
    margin: 0 16px !important;
    padding: 10px 12px !important;
    min-height: 48px !important;
    background: #e8e8eb !important;
    border-radius: 12px !important;
  }

  .mbx-filter__field {
    width: 100%;
  }

  .mbx-filter__field .mbx-tab__menu {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 200030 !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: min(52vh, 360px) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 28px rgba(23, 25, 26, 0.2) !important;
  }
}

@media (max-width: 599px) {
  .mbx-filter__inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .mbx-filter__left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .mbx-filter__right {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .mbx-filter__trigger {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* Course sliders — phone: peek card, swipe, no overlapping arrows */
@media (max-width: 560px) {
  .mbx-cs {
    --mbx-cs-cols: 1.35 !important;
    --mbx-cs-gap: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mbx-cs__nav {
    display: none !important;
  }

  .mbx-cs__body {
    padding: 10px 2px 0 !important;
    min-height: 0 !important;
  }

  .mbx-cs .mbx-cs__title {
    font-size: 14px !important;
    line-height: 20px !important;
    -webkit-line-clamp: 2 !important;
  }

  .page-id-24241 .mbx-cs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-id-24241 .mbx-cs__nav {
    display: none !important;
  }
}