/*
Theme Name: chairueng
Theme URI: https://chairueng.com
Author: Ly Komry
Author URI: https://chairueng.com/author/ly-komry
Description: Premium Movie, TV Series and Drama Streaming Theme with native bilingual English and Khmer support, custom player integration, and high-performance layout.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.2
License: Commercial
License URI: https://chairueng.com/license
Text Domain: chairueng
Domain Path: /languages
Tags: entertainment, video, streaming, dark-mode, translation-ready, accessibility-ready
*/

@import url('assets/css/theme.css');

/* ==========================================================================
   Critical Off-Canvas & Mobile Components (Prevents Document Flow Leaks)
   ========================================================================== */

/* 1. Mobile Drawer Isolation */
.cr-mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 320px !important;
  max-width: 86vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: #181818 !important;
  border-right: 1px solid #333 !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.85) !important;
  display: none;
  flex-direction: column !important;
  overflow-y: auto !important;
}

.cr-mobile-drawer.active {
  display: flex !important;
  transform: translateX(0) !important;
}

/* 2. Mobile Backdrop Isolation */
.cr-mobile-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

.cr-mobile-backdrop.active {
  display: block !important;
  opacity: 1 !important;
}

/* 3. Mobile Expandable Search Bar */
.cr-mobile-search-bar {
  display: none;
}

.cr-mobile-search-bar.active {
  display: block !important;
}

/* 4. Desktop vs Mobile Element Display Rules */
@media (min-width: 993px) {
  .cr-mobile-toggle,
  .cr-mobile-search-btn,
  .cr-mobile-search-bar,
  .cr-bottom-nav {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .cr-mobile-toggle,
  .cr-mobile-search-btn {
    display: inline-flex !important;
  }
  .header-nav {
    display: none !important;
  }
  .header-search {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .cr-bottom-nav {
    display: block !important;
  }
}