/* ==========================================
   1. GLOBAL STYLES & CUSTOM SCROLLBAR
   ========================================== */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
}

body { 
  background-color: #0f172a; 
  color: #ffffff; 
  line-height: 1.6;
  overflow-x: hidden;
}

/* របារ Scrollbar បែបទំនើប */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e11d48;
}

/* ==========================================
   2. NAVBAR (GLASSMORPHISM)
   ========================================== */
.navbar { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 16px 5%; 
  background: rgba(15, 23, 42, 0.75); 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 100; 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  transition: all 0.3s ease;
}

.logo { 
  font-size: 26px; 
  font-weight: 800; 
  color: #fff; 
  text-decoration: none; 
  letter-spacing: -0.5px;
}
.logo span { color: #e11d48; }

.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-link { 
  color: #94a3b8; 
  text-decoration: none; 
  font-weight: 500; 
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.nav-link.active, .nav-link:hover { color: #fff; }

.login-btn { 
  background: #e11d48; 
  color: #fff; 
  border: none; 
  padding: 9px 20px; 
  border-radius: 8px; 
  cursor: pointer; 
  font-weight: 600; 
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
}
.login-btn:hover {
  background: #f43f5e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
}

.search-btn, .menu-btn { 
  background: none; 
  border: none; 
  color: #94a3b8; 
  font-size: 20px; 
  cursor: pointer; 
  transition: color 0.2s ease;
}
.search-btn:hover, .menu-btn:hover { color: #fff; }

/* ==========================================
   3. HERO SECTION (CINEMATIC DISPLAY)
   ========================================== */
.hero { 
  height: 85vh; 
  padding: 0 5%; 
  display: flex; 
  align-items: center; 
  background: linear-gradient(
    90deg, 
    rgba(15, 23, 42, 0.98) 0%, 
    rgba(15, 23, 42, 0.75) 50%, 
    rgba(15, 23, 42, 0.2) 100%
  ), url('https://image.tmdb.org/t/p/original/t6HIqrRAclMCA60NsSmeqe9RmNV.jpg') center/cover no-repeat; 
  margin-top: 60px; 
  transition: background-image 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(to top, #0f172a 10%, transparent);
  pointer-events: none;
}

.hero-content {
  max-width: 620px;
  z-index: 2;
}

.hero-content h1 {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.1;
  letter-spacing: -1px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 0.95rem;
  margin-bottom: 16px;
  font-weight: 500;
}

.hero-meta .rating {
  color: #f59e0b;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.hero-content p {
  color: #cbd5e1;
  font-size: 1.05rem;
  margin-bottom: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   4. BUTTONS & ACTIONS
   ========================================== */
.hero-buttons { display: flex; gap: 16px; }

.primary-btn { 
  background: #e11d48; 
  color: #fff; 
  border: none; 
  padding: 14px 28px; 
  border-radius: 10px; 
  font-weight: 700; 
  font-size: 1rem;
  cursor: pointer; 
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4);
}
.primary-btn:hover {
  background: #f43f5e;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(225, 29, 72, 0.6);
}

.secondary-btn { 
  background: rgba(51, 65, 85, 0.7); 
  color: #fff; 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  padding: 14px 28px; 
  border-radius: 10px; 
  font-weight: 700; 
  font-size: 1rem;
  cursor: pointer; 
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.secondary-btn:hover {
  background: rgba(71, 85, 105, 0.9);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================
   5. MOVIE GRID & CARDS
   ========================================== */
.content { padding: 40px 5%; }

.section-header { 
  margin-bottom: 24px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.section-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.movie-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); 
  gap: 24px; 
  margin-bottom: 50px; 
}

.movie-card { 
  background: #1e293b; 
  border-radius: 14px; 
  overflow: hidden; 
  cursor: pointer; 
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
  position: relative;
}

.movie-card:hover { 
  transform: translateY(-10px) scale(1.02); 
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(225, 29, 72, 0.2);
  border-color: rgba(225, 29, 72, 0.4);
}

.movie-card img { 
  width: 100%; 
  height: 300px; 
  object-fit: cover; 
  transition: transform 0.5s ease;
}
.movie-card:hover img {
  transform: scale(1.06);
}

.movie-card-info { 
  padding: 14px; 
  background: #1e293b;
}

.movie-card-info h4 {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.movie-card-info small {
  color: #94a3b8;
  font-size: 0.85rem;
}

/* ==========================================
   6. MODALS & POP-UPS (ANIMATED)
   ========================================== */
.modal, .payment-modal, .success-modal, .search-overlay { 
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(15, 23, 42, 0.85); 
  z-index: 1000; 
  justify-content: center; 
  align-items: center; 
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-content, .payment-box, .success-box, .search-box { 
  background: #1e293b; 
  padding: 32px; 
  border-radius: 16px; 
  max-width: 520px; 
  width: 90%; 
  position: relative; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animation ពេល Modal បើក */
.modal.active, .payment-modal.active, .success-modal.active, .search-overlay.active { 
  display: flex; 
  opacity: 1;
}
.modal.active .modal-content, 
.payment-modal.active .payment-box, 
.success-modal.active .success-box, 
.search-overlay.active .search-box {
  transform: scale(1);
}

/* PAYMENT PLAN SELECTION */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.plan { 
  background: #0f172a; 
  border: 2px solid #334155; 
  padding: 16px 10px; 
  border-radius: 12px; 
  text-align: center; 
  cursor: pointer; 
  transition: all 0.2s ease;
}
.plan:hover { border-color: #64748b; }
.plan.selected { 
  border-color: #e11d48; 
  background: rgba(225, 29, 72, 0.12); 
  box-shadow: 0 0 15px rgba(225, 29, 72, 0.2);
}

.pay-btn { 
  background: #e11d48; 
  color: white; 
  border: none; 
  width: 100%; 
  padding: 14px; 
  border-radius: 10px; 
  font-weight: 700; 
  font-size: 1rem;
  cursor: pointer; 
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4);
}
.pay-btn:hover {
  background: #f43f5e;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.6);
}

.modal-close, .payment-close, .close-search { 
  position: absolute; 
  top: 16px; 
  right: 20px; 
  background: none; 
  border: none; 
  color: #94a3b8; 
  font-size: 24px; 
  cursor: pointer; 
  transition: color 0.2s ease;
}
.modal-close:hover, .payment-close:hover, .close-search:hover { color: #fff; }

/* FOOTER */
footer { 
  text-align: center; 
  padding: 40px 5%; 
  color: #64748b; 
  border-top: 1px solid rgba(255, 255, 255, 0.05); 
  font-size: 0.9rem;
}