/* =========================================================
   Mtandao Academy — global responsive foundation
   Mobile-first fixes for front, auth, admin, and watch
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

img,
video,
iframe,
svg,
embed,
object {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

.table-responsive,
.mta-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.container,
.container-fluid {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- Auth / email verify ---------- */
.mta-verify-page {
  min-height: 100vh;
  background: #f4f6fb;
  display: flex;
  flex-direction: column;
}

.mta-verify-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(14, 52, 120, 0.08);
}

.mta-verify-top__logo {
  display: inline-flex;
  align-items: center;
  max-width: min(160px, 55vw);
}

.mta-verify-top__logo img {
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain;
}

.mta-verify-top .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.mta-verify-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
}

.mta-verify-card {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid rgba(14, 52, 120, 0.1);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(14, 52, 120, 0.08);
  overflow: hidden;
}

.mta-verify-card__header {
  padding: 16px 20px;
  background: #0e3478;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.mta-verify-card__body {
  padding: 20px;
  color: #1f2a44;
  line-height: 1.6;
}

.mta-verify-card__body a {
  color: #1a53a1;
  font-weight: 600;
  word-break: break-word;
}

/* Legacy auth verify layout (if old markup still used) */
#nav-bar.nav-bar-main-block-one .row {
  align-items: center;
}

#nav-bar.nav-bar-main-block-one .logo img {
  max-height: 72px !important;
  width: auto !important;
}

#nav-bar.nav-bar-main-block-one .Login-btn {
  text-align: right;
}

#signup.signup-block-main-block {
  padding: 24px 0 48px;
}

#signup .card {
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  #nav-bar.nav-bar-main-block-one .col-lg-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  #nav-bar.nav-bar-main-block-one .row {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  #nav-bar.nav-bar-main-block-one .Login-btn,
  #nav-bar.nav-bar-main-block-one .txt-rgt {
    text-align: center !important;
  }

  #nav-bar.nav-bar-main-block-one .logo img {
    max-height: 56px !important;
  }

  #signup .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .signup-side-block,
  .login-img {
    display: none !important;
  }

  .signup-block-main-block .col-lg-6,
  .signup-block-main-block .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mta-auth .login-block,
  .mta-auth__card {
    margin: 12px auto !important;
    padding: 20px 16px !important;
  }
}

/* ---------- Front header / menus ---------- */
@media (max-width: 991.98px) {
  .header-area .logo img,
  .menu-area .logo img {
    max-height: 48px !important;
    max-width: 48px !important;
  }

  .menu-area .container,
  .header-area .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .menu-area .row {
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .menu-area .second-header-btn,
  .header-three .my-container.second-header-btn {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
  }

  .menu-area .second-header-btn .btn,
  .header-three .second-header-btn .btn {
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .mean-container a.meanmenu-reveal {
    margin-left: 4px !important;
  }

  .mean-container .mean-nav {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Hero: allow content to breathe on tablets/phones */
  :root {
    --mta-hero-h: auto;
  }

  .slider-area.mta-hero,
  .mta-hero,
  body .slider-area.mta-hero,
  body .slider-area.mta-hero .slider-active,
  body .slider-area.mta-hero .slick-list,
  body .slider-area.mta-hero .slick-track,
  body .slider-area.mta-hero .slick-slide,
  body .slider-area.mta-hero .slick-slide > div,
  body .slider-area.mta-hero .single-slider,
  body .slider-area.mta-hero .slider-bg,
  body .slider-area.mta-hero .single-slider.slider-bg,
  body .slider-area.mta-hero .mta-hero__slide {
    height: auto !important;
    min-height: 420px !important;
    max-height: none !important;
  }

  .mta-hero .single-slider .container {
    padding: 28px 16px 48px !important;
    align-items: flex-end !important;
  }

  .mta-hero .slider-content,
  .mta-hero__copy {
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px 14px !important;
    box-sizing: border-box;
  }

  .mta-hero__copy h1,
  .mta-hero__copy h2 {
    font-size: clamp(1.25rem, 6vw, 1.85rem) !important;
    line-height: 1.25 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .mta-hero__lead {
    display: none !important; /* keep hero uncluttered on small screens */
  }

  .mta-hero__actions {
    max-width: 100% !important;
  }

  .mta-hero__links {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .mta-hero a.mta-hero__btn,
  .mta-hero__btn,
  .mta-hero a.mta-hero__btn--ghost,
  .mta-hero__btn--ghost {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    padding: 12px 14px !important;
  }

  .mta-hero .slick-dots {
    bottom: 10px !important;
  }

  .slider-bg,
  .slider-area,
  .slider-bg.slider-two {
    min-height: 280px !important;
    background-position: center center !important;
  }

  .section-t h2,
  .section-title h2 {
    font-size: clamp(1.35rem, 5vw, 2rem) !important;
    line-height: 1.25 !important;
  }

  .f-cta-area {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .service-details-two .row > [class*="col-"] {
    margin-bottom: 12px;
  }
}

@media (max-width: 575.98px) {
  .header-cta ul,
  .header-social {
    display: none !important;
  }

  /* Prefer hamburger menu on very small phones — free header space */
  .menu-area .mta-btn-login,
  .menu-area .mta-btn-register,
  .header-three .mta-btn-login,
  .header-three .mta-btn-register {
    display: none !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary {
    max-width: 100%;
  }

  .breadcrumb,
  .page-title {
    font-size: 0.95rem;
  }

  .mta-help-tabs .nav-link {
    width: 100%;
    text-align: center;
  }

  .mta-auth .login-block,
  .mta-auth__card,
  .login-main-block.mta-auth .login-block {
    margin-left: 12px !important;
    margin-right: 12px !important;
    max-width: calc(100% - 24px) !important;
  }
}

/* Course / card grids */
@media (max-width: 767.98px) {
  .courses-item,
  .single-courses,
  .course-item,
  .courses-box {
    margin-bottom: 16px;
  }

  .courses-content h3,
  .courses-content h4,
  .course-content h3 {
    font-size: 1.05rem !important;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- Admin / instructor panel ---------- */
@media (max-width: 991.98px) {
  .vertical-layout .rightbar {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .vertical-layout .contentbar {
    padding: 12px !important;
  }

  .vertical-layout .topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .dashboard-card .card-body,
  .partial-course-block .card-body {
    padding: 14px !important;
  }

  .menus-button {
    text-align: left !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .menus-button .btn,
  .menus-button .list-inline-item {
    margin: 0 !important;
  }

  .partial-course-main-block .col-lg-3,
  .partial-course-main-block .col-md-6 {
    margin-bottom: 12px;
  }

  .partial-course-img .card-footer .row {
    justify-content: center;
    gap: 4px;
  }

  .partial-course-img .card-footer .col-2,
  .partial-course-img .card-footer .col-1 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 6px;
  }

  .partial-course-img .card-title {
    font-size: 1rem !important;
  }

  .form-card-input.check {
    left: 12px !important;
    top: 12px !important;
  }

  .infobar-settings-sidebar {
    max-width: 100vw !important;
  }
}

@media (max-width: 575.98px) {
  .vertical-layout .breadcrumbbar .page-title,
  .vertical-layout .page-head-title {
    font-size: 1.1rem !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 8px;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .btn-group,
  .button-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-dialog {
    margin: 0.5rem;
  }
}

/* ---------- Watch / player ---------- */
@media (max-width: 900px) {
  .mta-native-watch {
    flex-direction: column;
    min-height: auto;
  }

  .mta-native-watch__main {
    flex: 1 1 auto;
    width: 100%;
  }

  #mtaNativeVideo {
    max-height: min(56vh, 420px);
    width: 100%;
  }

  .mta-native-watch__controls {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .mta-native-watch__volume {
    width: 88px;
  }

  .mta-native-watch__sidebar {
    width: 100% !important;
    max-height: 42vh;
    overflow-y: auto;
  }

  .player-course-chapter,
  .player-course-chapter-list,
  #myDiv {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

@media (max-width: 575.98px) {
  .mta-offline-bar,
  .mta-offline-bar * {
    max-width: 100%;
  }

  .mta-native-watch__time {
    font-size: 0.8rem;
  }
}

/* Prevent horizontal scroll from absolute/fixed UI chrome */
.mean-bar,
.mean-container,
.slick-list,
.owl-carousel {
  max-width: 100%;
}