/*
 * NobexSkill Web RC — Visual UI Closure
 * Scope: defensive frontend layout, WhatsApp widget containment, broken-media fallback.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Bootstrap modals must never leak into normal document flow. */
.modal:not(.show),
.modal.fade:not(.show) {
  display: none !important;
}

/* The mobile header must stay mobile-only even if legacy theme rules are reordered. */
@media (min-width: 993px) {
  .fullscreen-search-block,
  .mobile-bottom-bar {
    display: none !important;
  }
}

/* Keep the WhatsApp widget compact even when third-party CSS order changes. */
#myButton,
.venom-button {
  max-width: min(380px, calc(100vw - 24px));
}

.venom-button {
  position: fixed !important;
  left: 15px !important;
  bottom: 15px !important;
  z-index: 2147480000 !important;
}

.venom-button .venom-button-popup:not(.active) {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

.venom-button .venom-button-chat,
.venom-button .venom-button-chat-window {
  max-width: min(360px, calc(100vw - 30px)) !important;
}

/* A failed logo should fall back to clean text, not browser broken-image alt text. */
.logo .nobex-brand-fallback,
.nobex-brand-fallback {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-blue-color, #125875);
  text-decoration: none;
}

/* Generic broken media fallback used by the closure script. */
.nobex-media-fallback {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef6fb 0%, #dcecf4 100%);
}

.nobex-media-fallback::after {
  content: "NobexSkill";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: #577184;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
}

.nobex-media-fallback > img {
  visibility: hidden !important;
}

/* Homepage visual stability when a slider/course image is absent. */
.background-slider-block,
.home-slider-img,
.home-main-block {
  overflow: hidden;
}

.home-main-block {
  background-color: #8da8b7;
}

.view-img {
  overflow: hidden;
  background: #eef6fb;
}

.view-img img,
.genre-slide-image img,
.instructor-img img,
.logo img {
  max-width: 100%;
}

.view-img img,
.genre-slide-image img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Prevent long legacy labels/titles from forcing cards/navigation wider than viewport. */
.student-view-block,
.view-dtl,
.nav-bar-main-block,
.categories-tab-main-block {
  min-width: 0;
}

.view-heading,
.view-heading a,
.nav-bar-main-block a {
  overflow-wrap: anywhere;
}

@media (max-width: 992px) {
  .nav-bar-main-block {
    position: relative;
  }

  .fullscreen-search-block {
    width: 100%;
    max-width: 100%;
  }

  .home-main-block {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-heading {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .logo .nobex-brand-fallback,
  .nobex-brand-fallback {
    font-size: 20px;
    min-height: 32px;
  }

  .home-heading {
    font-size: 36px;
    line-height: 1.08;
  }

  .student-heading {
    font-size: 26px;
    margin-right: 20px;
  }
}