/* === FONT FACE DEFINITIONS === */
@font-face {
  font-family: 'BtTelecom';
  src: url('fonts/bttelecom-y5ma-webfont.woff2') format('woff2'),
    url('fonts/bttelecom-y5ma-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* Add this for better font loading */
}

@font-face {
  font-family: 'Dragon';
  src: url('fonts/dragon-xlightita-webfont.woff2') format('woff2'),
    url('fonts/dragon-xlightita-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.navbar-brand {
  font-family: 'BtTelecom', sans-serif !important;
}


/* === BASE STYLES === */
html {
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
  background-color: #000000;
  color: #fff;
  font-family: 'Dragon', Arial, sans-serif;
}


/* === NAVBAR === */
/* Updated with higher specificity to override Bootstrap */
.navbar.navbar-dark .navbar-brand {
  font-family: 'BtTelecom', Arial, sans-serif !important;
  font-size: 24px !important;
  text-align: center;
}


/* === CARD STYLES === */
.card {
  background-color: #1e1e1e;
  border: none;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 255, 255, 0.2);
  z-index: 3;
}

.card-title {
  color: #fff;
}

.card-img-top {
  height: 500px;
  object-fit: cover;
}


/* === TAG / LABELS === */
.tag {
  display: inline-block;
  background-color: #6c757d;
  padding: 3px 10px;
  margin: 2px;
  border-radius: 20px;
  font-size: 0.8rem;
}


/* === TRAILER MODAL === */
.trailer-modal iframe {
  width: 100%;
  height: 400px;
}


/* === IMAGE PREVIEW === */
.img-fluid {
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}


/* === SEASON / EPISODE SECTION === */
#seasonEpisodeSection h6 {
  margin-top: 1rem;
  font-family: 'BtTelecom', sans-serif;
}

#seasonEpisodeSection ul {
  padding-left: 0;
}


/* === PASSWORD BOX === */
.password-box {
  margin-top: 10px;
  font-weight: bold;
  font-size: 0.9rem;
  color: #ffc107;
}


/* === BUTTON STYLES === */
.btn-light.text-dark:hover {
  background-color: #222;
  color: #fff;
  border-color: #fff;
}

.btn-primary {
  background-color: #007bff;
  border: none;
}

.btn-success {
  background-color: #28a745;
  border: none;
}

.btn-warning {
  background-color: #ffc107;
  color: #000;
  border: none;
}

a.btn:focus,
a.btn:active {
  box-shadow: none !important;
}


/* === PLACEHOLDER / INPUTS === */
::placeholder,
input::placeholder {
  color: #fff;
  opacity: 0.6;
}

input:-ms-input-placeholder,
input::-ms-input-placeholder {
  color: #fff;
}

.form-control::placeholder {
  color: #fff !important;
  opacity: 0.75 !important;
}

.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder {
  color: #fff !important;
}


/* === LIVE SEARCH STYLES === */
#liveSearchResults {
  max-height: 300px;
  overflow-y: auto;
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-top: none;
  display: none;
}

#liveSearchResults a {
  color: #fff;
  padding: 10px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  text-decoration: none;
}

#liveSearchResults a:hover {
  background-color: #333;
}

#liveSearchResults img {
  width: 40px;
  height: 60px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 5px;
}


/* === MOVIE CARD REFINEMENTS === */
.movie-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
}

.movie-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 255, 255, 0.2);
}

.movie-card .card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Spinner wrapper for image loading */
.image-wrapper {
  position: relative;
  height: 400px;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Spinner styling */
.spinner-sm {
  width: 2rem;
  height: 2rem;
}


/* === SPACING FIXES === */
#movie-list>div {
  margin-bottom: 2rem;
}

#pagination {
  margin-top: 3rem;
}

.page-link {
  font-size: 0.9rem;
  padding: 6px 12px;
}

.skeleton {
  background: linear-gradient(-90deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%);
  background-size: 400% 400%;
  animation: shimmer 1.2s ease-in-out infinite;
  height: 400px;
  border-radius: 10px;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/*Preview title*/
#preview-title {
  font-weight: 800 !important;
  font-family: 'Dragon', sans-serif;
}

/* === Footer === */
.footer-btn {
  font-size: 0.875rem;
  padding: 0.4rem 1rem;
  border: 1px solid #ffc107;
  color: #fff;
  background-color: #000000;
  border-radius: 50rem;
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.footer-btn:hover {
  box-shadow: 0 0 10px 2px #ffc107;
  transform: translateY(-1px);
  text-decoration: none;
}

/* RATING TAG - SIMPLE GLOW (MATCHING OTHER TAGS) */
.badge.border-warning {
  animation: 
    glow-yellow 2s infinite alternate,
    inner-pulse 2s infinite alternate;
}

@keyframes glow-yellow {
  from { box-shadow: 0 0 5px #ffc107; }
  to { box-shadow: 0 0 15px #ffc107; }
}

/* ===================== */
/* EXISTING TAG GLOW EFFECTS (UNCHANGED) */
/* ===================== */
.badge.bg-primary {
  /* Movie tag */
  animation: glow-blue 2s infinite alternate;
}

.badge.bg-success {
  /* Series tag */
  animation: glow-green 2s infinite alternate;
}

.badge.bg-warning {
  /* Anime tag */
  animation: glow-orange 2s infinite alternate;
}

@keyframes glow-blue {
  from {
    box-shadow: 0 0 3px #0d6efd, 0 0 6px #0d6efd;
  }

  to {
    box-shadow: 0 0 10px #0d6efd, 0 0 20px #0d6efd;
  }
}

@keyframes glow-green {
  from {
    box-shadow: 0 0 3px #198754, 0 0 6px #198754;
  }

  to {
    box-shadow: 0 0 10px #198754, 0 0 20px #198754;
  }
}

@keyframes glow-orange {
  from {
    box-shadow: 0 0 3px #fd7e14, 0 0 6px #fd7e14;
  }

  to {
    box-shadow: 0 0 10px #fd7e14, 0 0 20px #fd7e14;
  }
}

/* Add similar for green and orange as needed */
/* Pop Up modal */
.popup-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #111;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid #333;
  max-width: 400px;
  text-align: center;
}

.popup-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

#confirmRedirect {
  background: transparent;
  color: white;
  border: 1px solid white;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

#confirmRedirect:hover {
  background: rgba(255, 255, 255, 0.1);
}

#cancelRedirect {
  background: transparent;
  color: #ff4444;
  border: 1px solid #ff4444;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

#cancelRedirect:hover {
  background: rgba(255, 68, 68, 0.1);
}