/* ==========================================================================
   vxb — Netflix-style browse header for styles/default
   The `cateselector` component (Movies / TV Shows / category / all-* pages):
   big page title with a compact Genres dropdown beside it, Netflix-style
   multi-column genre panel. Consumes only existing customizer variables
   (--vod-*), hovers included (color-mix with rgba fallbacks); vodlix.css is
   untouched and loads before this file.
   ========================================================================== */

.vxb {
  padding-top: 8px;
}
.vxb__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 4px;
}
.vxb__titleWrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.vxb__title {
  margin: 0;
  color: var(--vod-white-color);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Genres / Languages select button — Netflix's dark bordered box
   -------------------------------------------------------------------------- */
.vxb__select {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 8px 4px 14px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--vod-white-color);
  border-radius: 2px;
  color: var(--vod-white-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.vxb__select:hover,
.vxb__select:focus {
  background-color: rgba(0, 0, 0, 0.7);
  background-color: color-mix(in srgb, var(--vod-menu-bg) 80%, transparent);
  color: var(--vod-white-color);
  outline: none;
  box-shadow: none;
}
.vxb__select .mdi {
  font-size: 20px;
  line-height: 1;
}
/* Bootstrap's .dropdown-toggle caret is replaced by the mdi icon */
.vxb__select.dropdown-toggle::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Genre panel — dark multi-column list
   -------------------------------------------------------------------------- */
.vxb__menu.dropdown-menu {
  min-width: 440px;
  margin-top: 6px;
  padding: 12px 4px;
  background-color: rgba(0, 0, 0, 0.92);
  background-color: color-mix(in srgb, var(--vod-menu-bg) 95%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-color: color-mix(in srgb, var(--vod-white-color) 15%, transparent);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.vxb__cols {
  column-count: 3;
  column-gap: 0;
}
.vxb__item {
  display: block;
  break-inside: avoid;
  padding: 5px 18px;
  color: var(--vod-white-color);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vxb__item:hover,
.vxb__item:focus {
  color: var(--vod-white-color);
  text-decoration: underline;
}

.vxb__desc {
  margin: 6px 0 0;
  max-width: 720px;
  color: var(--vod-grey-text);
  font-size: 14px;
}
.vxb__icon {
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .vxb__bar {
    gap: 10px 12px;
  }
  .vxb__menu.dropdown-menu {
    min-width: min(320px, 92vw);
  }
  .vxb__cols {
    column-count: 2;
  }
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl .vxb__select {
  padding: 4px 14px 4px 8px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vxb__select {
    transition: none;
  }
}