/* Mobile Header Fixes - Minimal essential fixes only */

/* ========================================
   BOOTSTRAP DROPDOWN OVERRIDE (Critical)
   Bootstrap sets white background by default
======================================== */
.dropdown-menu {
  background-color: #171d21 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-menu a,
.dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #7fdaff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================
   Z-INDEX LAYERING (Essential)
======================================== */
.header__wrap {
  position: relative;
  z-index: 99999;
}

.header__nav {
  z-index: 99998;
}

.header__dropdown-menu {
  z-index: 100002;
}

/* ========================================
   DROPDOWN OVERLAY FIX
   Ensures dropdowns appear on top of all content
======================================== */

/* All dropdown menus should overlay content */
.dropdown-menu,
.header__dropdown-menu,
.dropdown-menu.show,
.header__dropdown-menu.show {
  z-index: 100010 !important;
  position: absolute !important;
  background-color: #171d21 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Dropdown parent containers need proper stacking context */
.dropdown,
.header__nav-item.dropdown,
.header__user-dropdown {
  position: relative !important;
  z-index: 100005 !important;
}

/* Buttons and interactive elements in header */
.header__sign-in,
.header__search-btn,
.header__btn {
  position: relative;
  z-index: 100003 !important;
}

/* Ensure dropdowns overlay movie posters and backgrounds */
.movie-detail,
.movie-detail-banner,
.home__bg,
.card,
.card__cover,
.card-banner {
  z-index: 1 !important;
}

/* Movie details page - ensure buttons overlay poster */
.movie-detail-content {
  position: relative;
  z-index: 10 !important;
}

.movie-detail-content .dropdown-menu,
.movie-detail-content .btn,
.movie-detail-content button,
.details-actions .dropdown-menu {
  z-index: 100 !important;
}

/* Bootstrap dropdown fix for movie details */
.movie-detail .dropdown-menu.show,
.details-actions .dropdown-menu.show {
  z-index: 100010 !important;
  position: absolute !important;
  background-color: #171d21 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important;
}

/* ========================================
   GLOBAL OVERLAY FIX FOR ALL INTERACTIVE ELEMENTS
   Ensures buttons, modals, dropdowns overlay backgrounds
======================================== */

/* All modals should overlay everything */
.modal,
.modal.show,
#shareModal,
#trailerModal {
  z-index: 100020 !important;
}

.modal-backdrop {
  z-index: 100015 !important;
}

.modal-content {
  z-index: 100021 !important;
}

/* Buttons in movie details should be clickable above poster */
.movie-detail-content button,
.movie-detail-content .btn,
.movie-detail-content a.btn,
.movie-detail-content form button,
.details-actions button,
.details-actions .btn,
.buttons-row button,
.buttons-row .btn,
.main-action-btn,
.trailer-round-btn {
  position: relative;
  z-index: 50 !important;
}

/* Share container and its children */
.share-container {
  position: relative;
  z-index: 100 !important;
}

.share-container .modal {
  z-index: 100020 !important;
}

/* Ensure movie poster stays behind interactive elements */
.movie-detail-banner {
  z-index: 1 !important;
}

.movie-detail-banner img {
  z-index: 1 !important;
}

.play-btn {
  z-index: 5 !important;
}

/* Movie detail content should be above banner */
.movie-detail-content {
  position: relative;
  z-index: 10 !important;
}

/* Bootstrap dropdown toggle buttons */
.dropdown-toggle {
  position: relative;
  z-index: 100 !important;
}

/* Ensure all form buttons work */
form button[type="submit"],
form input[type="submit"] {
  position: relative;
  z-index: 50 !important;
}

/* ========================================
   MOBILE NAVIGATION FIX (Essential)
   Ensures slide-out menu links are clickable
======================================== */
@media (max-width: 1199px) {
  .header__nav {
    background-color: #171d21;
    pointer-events: auto;
  }
  
  .header__nav--active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }
  
  .header__nav-item {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }
  
  .header__nav-link {
    color: rgba(255, 255, 255, 0.85);
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    display: block;
    cursor: pointer;
  }
  
  .header__nav-link:hover,
  .header__nav-link:active {
    color: #7fdaff;
  }
  
  /* Dropdown inside mobile nav */
  .header__nav .dropdown-menu,
  .header__nav .header__dropdown-menu {
    position: relative;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
  }
  
  .header__nav .dropdown-menu.show,
  .header__nav .header__dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .header__nav .dropdown-menu a,
  .header__nav .header__dropdown-menu a {
    color: rgba(255, 255, 255, 0.85);
    pointer-events: auto;
  }
  
  .header__nav .dropdown-menu a:hover,
  .header__nav .header__dropdown-menu a:hover {
    color: #7fdaff;
  }
}

/* ========================================
   USER DROPDOWN STYLING
======================================== */
.header__user-dropdown {
  position: relative;
  display: inline-block;
}

.header__user-dropdown .dropdown-toggle {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
}

.header__user-dropdown .dropdown-toggle:hover {
  color: #7fdaff;
}

.header__user-dropdown .dropdown-menu,
.header__user-dropdown .header__dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 180px;
  background-color: #171d21 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 100010 !important;
  display: none;
}

.header__user-dropdown .dropdown-menu.show,
.header__user-dropdown .header__dropdown-menu.show {
  display: block;
}

.header__user-dropdown .dropdown-menu li,
.header__user-dropdown .header__dropdown-menu li {
  padding: 0;
}

.header__user-dropdown .dropdown-menu a,
.header__user-dropdown .header__dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.header__user-dropdown .dropdown-menu a:hover,
.header__user-dropdown .header__dropdown-menu a:hover {
  color: #7fdaff !important;
  background-color: rgba(255, 255, 255, 0.05);
}

/* ========================================
   MOBILE HEADER CLEANUP
======================================== */
@media (max-width: 767px) {
  /* Header content alignment */
  .header__content {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Logo styling - match reference image */
  .header__logo {
    flex-shrink: 0;
    padding: 5px 0;
  }
  
  .header__logo img {
    max-width: 140px;
    max-height: 45px;
    height: auto;
    object-fit: contain;
  }
  
  /* Auth section - search + sign in button */
  .header__auth {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 50px;
  }
  
  /* Search button */
  .header__search-btn {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.85);
  }
  
  /* Sign in button - pill style with border */
  .header__sign-in .btn {
    background: transparent;
    border: 2px solid #7fdaff;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7fdaff;
  }
  
  .header__sign-in .btn:hover {
    background: #7fdaff;
    color: #171d21;
  }
  
  /* Hamburger menu button positioning */
  .header__btn {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -20px;
  }
  
  /* User dropdown positioning */
  .header__auth .header__dropdown-menu,
  .header__auth .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .header__logo img {
    max-width: 120px;
    max-height: 40px;
  }
  
  .header__auth {
    gap: 10px;
    margin-right: 45px;
  }
  
  .header__sign-in .btn {
    padding: 6px 15px;
    font-size: 11px;
  }
}