/*
 * Luminie public header final contract.
 * Loaded last from common_header.php to stabilize old/new header CSS.
 */
:root {
  --lum-header-mobile-h: 60px;
  --lum-header-tablet-h: 64px;
  --lum-header-desktop-h: 65px;
  --lum-layer-floating: 8000;
  --lum-layer-cookie: 9000;
  --lum-layer-header: 12020;
  --lum-layer-drawer-backdrop: 12030;
  --lum-layer-drawer: 12040;
  --lum-layer-popover: 12050;
  --lum-layer-modal-backdrop: 12100;
  --lum-layer-modal: 12110;
  --lum-header-safe-top: env(safe-area-inset-top, 0px);
  --lum-header-surface: rgba(255, 255, 255, 0.96);
  --lum-header-border: rgba(15, 23, 42, 0.08);
  --lum-header-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

#cookie-consent-banner {
  z-index: var(--lum-layer-cookie) !important;
}

body.menu-open #cookie-consent-banner,
body.header-menu-open #cookie-consent-banner,
body.mobile-search-open #cookie-consent-banner,
body.mobile-profile-open #cookie-consent-banner,
body.modal-open #cookie-consent-banner {
  z-index: calc(var(--lum-layer-cookie) - 1) !important;
}

body.menu-open .chat-widget,
body.menu-open .chat-floating-button,
body.menu-open [class*="chat"],
body.header-menu-open .chat-widget,
body.header-menu-open .chat-floating-button,
body.header-menu-open [class*="chat"],
body.mobile-search-open .chat-widget,
body.mobile-search-open .chat-floating-button,
body.mobile-search-open [class*="chat"],
body.mobile-profile-open .chat-widget,
body.mobile-profile-open .chat-floating-button,
body.mobile-profile-open [class*="chat"] {
  z-index: var(--lum-layer-floating) !important;
}

.modal-backdrop {
  z-index: var(--lum-layer-modal-backdrop) !important;
}

.modal {
  z-index: var(--lum-layer-modal) !important;
}

.modern-navbar.lum-header,
.modern-navbar {
  z-index: var(--lum-layer-header) !important;
}

@media (max-width: 991.98px) {
  :root {
    --lum-active-header-h: var(--lum-header-mobile-h);
  }

  body {
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  body.mobile-nav-ready {
    padding-top: calc(var(--lum-active-header-h) + var(--lum-header-safe-top)) !important;
  }

  .modern-navbar.lum-header,
  .modern-navbar {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    min-height: var(--lum-active-header-h) !important;
    z-index: var(--lum-layer-header) !important;
    background: var(--lum-header-surface) !important;
    border-bottom: 1px solid var(--lum-header-border) !important;
  }

  body.mobile-nav-ready .modern-navbar.lum-header,
  body.mobile-nav-ready .modern-navbar {
    display: none !important;
  }

  .mobile-navbar-container {
    display: flex !important;
    position: fixed !important;
    top: var(--lum-header-safe-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--lum-active-header-h) !important;
    min-height: var(--lum-active-header-h) !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    background: var(--lum-header-surface) !important;
    border-bottom: 1px solid var(--lum-header-border) !important;
    box-shadow: var(--lum-header-shadow) !important;
    z-index: var(--lum-layer-header) !important;
  }

  .mobile-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .mobile-brand img {
    flex: 0 0 auto !important;
    width: auto !important;
    max-height: 36px !important;
  }

  .mobile-brand span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-actions {
    flex: 0 0 auto !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
  }

  .mobile-action-btn,
  .mobile-quota-pill {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  .mobile-menu-overlay {
    position: fixed !important;
    top: calc(var(--lum-active-header-h) + var(--lum-header-safe-top)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: var(--lum-layer-drawer-backdrop) !important;
  }

  .mobile-menu-panel {
    position: fixed !important;
    top: calc(var(--lum-active-header-h) + var(--lum-header-safe-top)) !important;
    right: -100% !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(84vw, 360px) !important;
    max-width: min(84vw, 360px) !important;
    height: calc(100dvh - var(--lum-active-header-h) - var(--lum-header-safe-top)) !important;
    max-height: calc(100dvh - var(--lum-active-header-h) - var(--lum-header-safe-top)) !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    border-left: 1px solid var(--lum-header-border) !important;
    box-shadow: -22px 0 54px rgba(15, 23, 42, 0.16) !important;
    z-index: var(--lum-layer-drawer) !important;
  }

  .mobile-menu-panel.active {
    right: 0 !important;
  }

  .mobile-menu-panel::after {
    display: none !important;
    content: none !important;
  }

  .mobile-menu-header {
    flex: 0 0 auto !important;
  }

  .mobile-menu-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-search-panel {
    position: fixed !important;
    top: calc(var(--lum-active-header-h) + var(--lum-header-safe-top)) !important;
    right: 0 !important;
    left: 0 !important;
    max-height: calc(100dvh - var(--lum-active-header-h) - var(--lum-header-safe-top)) !important;
    overflow-y: auto !important;
    z-index: var(--lum-layer-popover) !important;
  }

  .mobile-profile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--lum-layer-popover) - 1) !important;
  }

  .mobile-profile-dropdown {
    position: fixed !important;
    top: calc(var(--lum-active-header-h) + var(--lum-header-safe-top) + 8px) !important;
    right: 12px !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - var(--lum-active-header-h) - var(--lum-header-safe-top) - 24px) !important;
    overflow-y: auto !important;
    z-index: var(--lum-layer-popover) !important;
  }

  .mobile-menu-overlay[aria-hidden="true"],
  .mobile-menu-panel[aria-hidden="true"],
  .mobile-search-panel[aria-hidden="true"],
  .mobile-profile-dropdown[aria-hidden="true"],
  .mobile-profile-backdrop[aria-hidden="true"] {
    pointer-events: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --lum-active-header-h: var(--lum-header-tablet-h);
  }

  .mobile-navbar-container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .mobile-menu-panel {
    width: min(78vw, 400px) !important;
    max-width: min(78vw, 400px) !important;
  }
}

@media (max-width: 380px) {
  .mobile-brand span,
  .mobile-brand-text {
    display: none !important;
  }

  .mobile-navbar-container {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .mobile-actions {
    gap: 0.22rem !important;
  }

  .mobile-action-btn,
  .mobile-quota-pill {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
}

@media (min-width: 992px) {
  body {
    padding-top: 0 !important;
  }

  .mobile-navbar-container,
  .mobile-menu-overlay,
  .mobile-menu-panel,
  .mobile-search-panel,
  .mobile-notification-panel,
  .mobile-profile-dropdown,
  .mobile-profile-backdrop {
    display: none !important;
  }

  .modern-navbar.lum-header,
  .modern-navbar {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    min-height: var(--lum-header-desktop-h) !important;
    z-index: var(--lum-layer-header) !important;
  }

  .modern-navbar .navbar-collapse {
    overflow: visible !important;
  }

  #mainUserMenu.show,
  #mainUserMenu.is-fixed-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: var(--lum-layer-popover) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modern-navbar *,
  .mobile-navbar-container,
  .mobile-menu-panel,
  .mobile-search-panel,
  .mobile-profile-dropdown {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Ensure the "Luminie.net" brand text uses the "Crafty Girls" font family across all screen sizes and responsive states */
.luminie-brand-text,
.mobile-brand-text,
.mobile-brand span {
  font-family: 'Crafty Girls', cursive !important;
  font-weight: 400 !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Adjust size for mobile brand text to ensure legibility */
.mobile-brand-text,
.mobile-brand span {
  font-size: 1.25rem !important;
}
/* Desktop header polish: keep brand, nav items, and action buttons on one line. */
@media (min-width: 992px) {
  .modern-navbar.lum-header > .container,
  .modern-navbar > .container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.65rem !important;
    min-height: var(--lum-header-desktop-h) !important;
  }

  .modern-navbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 0.55rem !important;
    min-width: 0 !important;
    margin-right: 0.35rem !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  .modern-navbar .navbar-brand img {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
  }

  .modern-navbar .luminie-brand-text {
    display: inline-block !important;
    flex: 0 1 auto !important;
    max-width: 126px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }

  .modern-navbar .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 0.5rem !important;
  }

  .modern-navbar .navbar-nav {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    gap: 0.12rem !important;
    margin-right: 0.35rem !important;
    overflow: hidden !important;
  }

  .modern-navbar .nav-item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .modern-navbar .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.32rem !important;
    white-space: nowrap !important;
    padding: 0.48rem 0.62rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .modern-navbar .nav-link i,
  .modern-navbar .poster-tool-btn i,
  .modern-navbar .cart-btn i,
  .modern-navbar .search-btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .modern-navbar .navbar-auth-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    min-width: 0 !important;
  }

  .modern-navbar .poster-tool-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    width: auto !important;
    min-width: 82px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 0.75rem !important;
    border-radius: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: #162033 !important;
    background: #fff !important;
    border: 1px solid var(--lum-header-border) !important;
  }

  .modern-navbar .poster-tool-label {
    display: inline-block !important;
    line-height: 1 !important;
  }

  .modern-navbar .cart-btn,
  .modern-navbar .search-btn,
  .modern-navbar #mainUserBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    line-height: 1 !important;
  }

  .modern-navbar .compact-quota-display,
  .modern-navbar .quota-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  .modern-navbar .luminie-brand-text {
    max-width: 108px !important;
    font-size: 1.08rem !important;
  }

  .modern-navbar .nav-link {
    padding-inline: 0.48rem !important;
    font-size: 0.86rem !important;
  }

  .modern-navbar .poster-tool-label {
    display: none !important;
  }

  .modern-navbar .poster-tool-btn {
    min-width: 40px !important;
    width: 40px !important;
    padding: 0 !important;
  }
}