/* =========================================================
   Cocoon carousel - dashboard card UI
   Actual Cocoon anchor class: .carousel-entry-card-wrap
   ========================================================= */
body.bz-dashboard-ui #carousel {
  padding: 22px 0 18px !important;
  background: linear-gradient(180deg, rgba(244,246,255,.78), rgba(255,255,255,.96)) !important;
  border-top: 1px solid var(--bz-border-soft);
  border-bottom: 1px solid var(--bz-border-soft);
}

body.bz-dashboard-ui #carousel-in {
  width: min(calc(100% - 32px), var(--bz-max)) !important;
  max-width: var(--bz-max) !important;
  margin: 0 auto !important;
  padding: 16px 18px 18px !important;
  border: 1px solid var(--bz-border) !important;
  border-radius: calc(var(--bz-radius) + 4px) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--bz-shadow-soft) !important;
}

body.bz-dashboard-ui #carousel-in .carousel-content {
  padding: 4px 0 6px;
}

body.bz-dashboard-ui #carousel-in .slick-list {
  overflow: hidden !important;
  padding: 0 !important;
}

body.bz-dashboard-ui #carousel-in .slick-track {
  display: flex !important;
  align-items: stretch !important;
}

body.bz-dashboard-ui #carousel-in .slick-slide {
  float: none !important;
  height: auto !important;
}

body.bz-dashboard-ui #carousel-in .slick-slide > div {
  height: 100% !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-wrap,
body.bz-dashboard-ui #carousel-in .bz-carousel-card-wrap {
  display: block !important;
  overflow: hidden !important;
  height: calc(100% - 12px) !important;
  min-height: 0 !important;
  margin: 6px !important;
  padding: 0 !important;
  border: 1px solid var(--bz-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--bz-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: translateZ(0);
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-wrap:hover,
body.bz-dashboard-ui #carousel-in .bz-carousel-card-wrap:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(50,111,237,.28) !important;
  box-shadow: var(--bz-shadow-hover) !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card,
body.bz-dashboard-ui #carousel-in .bz-carousel-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-thumb {
  position: relative !important;
  overflow: hidden !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--bz-surface-tint) !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s ease !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-wrap:hover img {
  transform: scale(1.04) !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

body.bz-dashboard-ui #carousel-in .carousel-entry-card-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(1.55em * 3 + 28px) !important;
  margin: 0 !important;
  padding: 13px 14px 15px !important;
  color: var(--bz-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

body.bz-dashboard-ui #carousel-in .cat-label {
  left: 10px !important;
  bottom: 10px !important;
  max-width: calc(100% - 20px);
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(36,49,79,.82) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body.bz-dashboard-ui #carousel-in :is(.slick-prev, .slick-next) {
  z-index: 5 !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--bz-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: var(--bz-shadow-soft) !important;
}

body.bz-dashboard-ui #carousel-in :is(.slick-prev, .slick-next):hover {
  border-color: rgba(50,111,237,.28) !important;
  box-shadow: var(--bz-shadow) !important;
}

body.bz-dashboard-ui #carousel-in .slick-dots li button::before {
  color: var(--bz-primary) !important;
}