/* ===== GLOBAL THEME ===== */


html {
  transform: none !important;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #FFF8E7; /* soft cream */
   background: linear-gradient(135deg, #fff7e6, #ffffff);
  border-top: 2px solid #ffd27d;

  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
      transform: none !important;
  }
  /* ===============================
   PLAYLIST MODAL (THEMED)
================================ */

#playlistModal .modal-dialog {
  margin-top: 12vh;          /* ⬇ slightly below center */
  max-width: 420px;
}
#playlistModal .modal-content {
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #fff7e6, #ffffff);
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

/* Header */
#playlistModal .modal-header {
  border-bottom: none;
  padding-bottom: 8px;
}

#playlistModal .modal-title {
  font-weight: 700;
  color: #7a1400;
}

/* Close button tint */
#playlistModal .btn-close {
  filter: brightness(0.6);
}

/* Body */
#playlistModal .modal-body {
  padding-top: 6px;
}

  /* ================= MOBILE DRAWER MENU ================= */
.nav-wrapper {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand-wrap {
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand-wrap img {
  height:52px;
}

.brand-wrap span {
  margin-left:8px;
  font-family:'Merriweather', serif;
  font-size:1.4rem;
  font-weight:700;
  color:#FFD700;
}

.menu-btn {
  background:none;
  border:none;
  font-size:30px;
  color:#fff;
  cursor:pointer;
}

.nav-menu {
  position:fixed;
  top:0;
  right:-100%;
  width:80%;
  height:100vh;
  background:linear-gradient(180deg,#ff9800,#b22222);
  padding:80px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:right 0.3s ease;
  z-index:9999;
}

.nav-menu.open {
  right:0;
}

.nav-menu a {
  color:#fff;
  font-size:1.1rem;
  text-decoration:none;
}

.close-btn {
  position:absolute;
  top:16px;
  right:16px;
  background:none;
  border:none;
  font-size:28px;
  color:#fff;
}


  /* ===== BUTTONS ===== */
  .btn-primary {
    background-color: #FF9933;
    border: none;
  }
  .btn-primary:hover {
    background-color: #B22222;
  }
  .btn-success {
    background-color: #FFD700;
    border: none;
    color: #333;
  }
  .btn-success:hover {
    background-color: #FF9933;
    color: #fff;
  }
  .btn-outline-danger {
    border-color: #B22222;
    color: #B22222;
  }
  .btn-outline-danger:hover {
    background: #B22222;
    color: #fff;
  }
  
  /* ===== BLOG CARDS ===== */
  .card {
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .card-title {
    color: #B22222;
    font-weight: bold;
  }
  .blog-content h2, 
  .blog-content h3 {
    color: #FF9933;
  }
  
  /* ===== SIDEBAR ===== */
  .sidebar {
    background: #fff;
    border-left: 4px solid #FF9933;
    padding: 15px;
    border-radius: 10px;
  }
  .sidebar h5 {
    color: #B22222;
    border-bottom: 2px solid #FFD700;
    padding-bottom: 5px;
  }
  
  /* ===== FOOTER ===== */
  .footer {
    background: linear-gradient(90deg, #B22222, #FF9933);
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    font-family: 'Merriweather', serif;
  }
  
  /* ===== COMMENT BOX ===== */
  .comment-box {
    padding: 10px;
    border-radius: 8px;
    background: #FFF3CD; /* soft yellow */
    border-left: 4px solid #FF9933;
    margin-bottom: 10px;
  }
  .comment-box small {
    color: #777;
  }
  
  /* ===== RELATED BLOGS ===== */
  .related-blogs h4 {
    color: #B22222;
    margin-bottom: 20px;
  }
  .related-blogs .card:hover {
    transform: translateY(-5px);
    transition: 0.3s;
  }
  
  /* ===== HERO / BANNERS ===== */
  /* Hero Banner */
.hero {
    background: url('../uploads/temple-bg.jpg') center/cover no-repeat, linear-gradient(rgba(255,153,51,0.6), rgba(178,34,34,0.6));
    color: #fff;
    text-align: center;
    padding: 120px 20px;
    border-radius: 12px;
    position: relative;
  }
  .hero .overlay {
    background: rgba(0,0,0,0.4);
    padding: 40px;
    border-radius: 12px;
  }
  .hero h1 {
    font-family: 'Merriweather', serif;
    font-size: 2.8rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
  }
  .hero p {
    font-size: 1.2rem;
  }
  
  /* Section Headings */
  .section-title {
    color: #B22222;
    border-left: 5px solid #FFD700;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  
  /* Cards */
  .category-card {
    background: #FFF3CD;
    border-left: 5px solid #FF9933;
  }
  .blog-card img, 
  .audio-card img, 
  .video-card img {
    height: 200px;
    object-fit: cover;
  }
  
  /* Events */
  .event-item {
    background: #FFF8E7;
    border-left: 4px solid #FF9933;
  }
  
  /* ensure cards are same height and media don't overflow */
.card.video-card img,
.card.audio-card img {
  object-fit: cover;
  height: 160px;
  width: 100%;
}
.hero-carousel {
  margin-top: 80px; /* navbar height */
}

.hero-carousel .carousel-item {
  height: 70vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.65)
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.hero-overlay h1 {
  font-size: 3rem;
  font-weight: 700;
}

.hero-overlay p {
  font-size: 1.2rem;
  margin: 15px 0 25px;
}

@media (max-width:768px) {
  .hero-overlay h1 { font-size: 2rem; }
  .hero-overlay p { font-size: 1rem; }
}
/* ===== Modern Navbar ===== */
.header-modern {
  background: linear-gradient(90deg, #ff9800, #e65100);
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  padding: 10px 0;
  z-index: 1030;
}

.header-modern .nav-link {
  color: #fff !important;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.25s ease;
}

.header-modern .nav-link:hover {
  background: rgba(255,255,255,0.18);
}

.header-modern .navbar-brand span {
  font-size: 1.2rem;
}

.header-modern .btn {
  font-weight: 600;
}

@media (max-width: 991px) {
  .header-modern .navbar-nav {
    padding-top: 10px;
  }
}
/* ===============================
   HERO / BANNER CAROUSEL
================================ */

.carousel,
.carousel-inner,
.carousel-item {
  height: 460px;              /* DEFAULT DESKTOP HEIGHT */
}

.carousel-item img.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Fill area without stretching */
  object-position: center;    /* Keep focus center */
}

/* Caption overlay */
.carousel-caption {
  bottom: 22%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.25)
  );
  padding: 24px 30px;
  border-radius: 14px;
}

/* ===============================
   TABLET
================================ */
@media (max-width: 992px) {
  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 340px;
  }

  .carousel-caption {
    bottom: 18%;
  }
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 576px) {
  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 100px;
  }

  .carousel-caption {
    bottom: 10%;
    padding: 14px 18px;
  }

  .carousel-caption h2 {
    font-size: 1.3rem;
  }

  .carousel-caption p {
    font-size: 0.9rem;
  }
}
/* ===== CUSTOM MOBILE NAV ===== */
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-btn {
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  display: none;
}

/* Desktop */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 991px) {
  .menu-btn {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 260px;
    height: 100vh;
    background: linear-gradient(180deg, #ff9800, #e65100);
    flex-direction: column;
    padding: 20px;
    gap: 14px;
    transition: right 0.3s ease;
    z-index: 2000;
  }

  .nav-menu.open {
    right: 0;
  }

  .nav-menu li a {
    font-size: 1.1rem;
  }
}


.card.h-100 { display: flex; flex-direction: column; }
.card .card-body { flex: 1 1 auto; }
.audio-card audio { max-width: 100%; }


/* ===============================
   🔥 SWIPER CARD RESET (CRITICAL)
================================ */

/* Stop Swiper from equal-height forcing */
.swiper-slide {
  height: auto !important;
  align-self: flex-start;
}

/* Neutralize Bootstrap h-100 inside Swiper ONLY */
.swiper-slide .card.h-100 {
  height: auto !important;
  display: block !important;
}

/* Reset card-body flex inside Swiper */
.swiper-slide .card .card-body {
  flex: unset !important;
}
/* 🔥 REMOVE EXTRA HEIGHT AFTER SWIPER */
.swiper,
.swiper-wrapper {
  height: auto !important;
}

.readers-corner-section {
  min-height: unset !important;
}
.readers-corner-section .swiper-button-prev,
.readers-corner-section .swiper-button-next {
  top: 45%;
  transform: translateY(-50%);
}
/* ===============================
   🌿 Reader’s Corner – Polish
================================ */

.readers-corner-section {
  background: linear-gradient(
    180deg,
    rgba(255,248,231,0.9),
    rgba(255,248,231,0.6)
  );
  border-radius: 18px;
  margin: 40px 0;
  padding: 30px 24px 20px;
}

/* section title spacing */
.readers-corner-section .section-title {
  margin-bottom: 24px;
}

/* swiper container compact */
.readers-corner-section .swiper {
  padding-bottom: 30px;
}

/* reader cards */
.reader-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
}

/* title */
.reader-card h5 {
  font-size: 1.05rem;
  color: #8B0000;
}

/* excerpt */
.reader-card .excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* comments preview */
.top-comments {
  background: #FFF7E0;
  border-left: 4px solid #FFB703;
}

/* CTA */
.read-discuss {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.9rem;
}

/* arrows – subtle */
.readers-corner-section .swiper-button-prev,
.readers-corner-section .swiper-button-next {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.readers-corner-section .swiper-button-prev::after,
.readers-corner-section .swiper-button-next::after {
  font-size: 14px;
  color: #B22222;
}

/* pagination */
.readers-corner-section .swiper-pagination-bullet {
  background: #FFD700;
  opacity: 0.5;
}
.readers-corner-section .swiper-pagination-bullet-active {
  opacity: 1;
}
/* ===============================
   🌟 MEDIA CARDS – FINAL POLISH
================================ */

.video-card,
.audio-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover lift (subtle) */
.video-card:hover,
.audio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}
/* Fixed media height */
.video-card img,
.audio-card img {
  height: 180px;
  width: 100%;
  object-fit: cover;
  background: #000; /* removes visual illusion */
  transition: transform .35s ease;
}

/* Soft zoom on hover */
.video-card:hover img,
.audio-card:hover img {
  transform: scale(1.06);
}
/* Normalize titles */
.video-card h6,
.audio-card h6 {
  min-height: 46px;           /* SAME HEIGHT */
  font-size: 0.95rem;
  line-height: 1.35;
  color: #7A1400;
  text-align: center;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card .card-body,
.audio-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 14px;
}
.video-card .btn-warning {
  margin-top: auto;
  border-radius: 10px;
  font-weight: 600;
  background: linear-gradient(135deg, #FFB703, #FB8500);
  border: none;
}
.audio-card audio,
.audio-card .btn {
  margin-top: auto;
  width: 100%;
}
/* Pagination dots */
.videos-section .swiper-pagination-bullet,
.audios-section .swiper-pagination-bullet {
  background: #FFB703;
  opacity: 0.4;
}

.videos-section .swiper-pagination-bullet-active,
.audios-section .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Arrows */
.videos-section .swiper-button-prev,
.videos-section .swiper-button-next,
.audios-section .swiper-button-prev,
.audios-section .swiper-button-next {
  color: #B22222;
}
@media (max-width: 576px) {
  .video-card img,
  .audio-card img {
    height: 150px;
  }

  .video-card h6,
  .audio-card h6 {
    min-height: 42px;
    font-size: 0.9rem;
  }
}
.video-card,
.audio-card {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
/* ---- Swiper + card responsive tweaks ---- */
/*  .swiper .swiper-slide { display:flex; align-items:stretch; height:auto !important; }*/
/*  .swiper .swiper-slide .card { display:flex; flex-direction:column; height:100%; min-height:1px; overflow:hidden; }*/
/*  .card .card-img-top, .card .thumb, .audio-thumb { width:100%; object-fit:cover; display:block; height:180px; }*/
/*  .card .card-body { flex:1 1 auto; display:flex; flex-direction:column; padding:12px; }*/
/*  .card .card-body .mt-auto { margin-top:auto; }*/
/*  @media (max-width: 991.98px){ .card .card-img-top, .card .thumb, .audio-thumb { height:150px; } }*/
/*  @media (max-width: 767.98px){ .card .card-img-top, .card .thumb, .audio-thumb { height:120px; } }*/
/*  .card audio { width:100%; max-width:100%; }*/
/*  .swiper .swiper-pagination { margin-top:12px; }*/

/* ===============================
   📰 BLOG CARDS – FINAL POLISH
================================ */

/* Blog section spacing */
.blogs-section {
  margin: 40px 0;
}

/* Blog card base */
.blog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover lift (same as video/audio) */
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}

/* Blog thumbnail */
.blog-card img {
  height: 190px;
  width: 100%;
  object-fit: cover;
  background: #000;
  transition: transform .35s ease;
}

/* Image zoom on hover */
.blog-card:hover img {
  transform: scale(1.06);
}

/* Card body layout */
.blog-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Blog title – clamp like videos */
.blog-card .card-title {
  min-height: 48px;           /* SAME HEIGHT ACROSS CARDS */
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 6px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog title link */
.blog-card .card-title a {
  color: #7A1400;
  font-weight: 600;
}

.blog-card .card-title a:hover {
  color: #B22222;
  text-decoration: underline;
}

/* Meta row */
.blog-card .text-muted {
  font-size: 0.8rem;
  margin-bottom: 8px;
}

/* Excerpt text */
.blog-card .card-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;

  /* normalize height */
  min-height: 64px;
}

/* CTA positioning (future-proof) */
.blog-card .read-more {
  margin-top: auto;
  font-weight: 600;
  color: #FF9933;
  text-decoration: none;
}

.blog-card .read-more:hover {
  color: #B22222;
}
.audio-card{border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.audio-card img{height:180px;object-fit:cover}
.audio-badge{background:#FFD700;color:#7A1400;font-size:.75rem;padding:4px 8px;border-radius:12px}

/*#miniPlayer{*/
/*  position:fixed;bottom:0;left:0;right:0;*/
/*  background:#111;color:#fff;*/
/*  padding:8px;display:none;z-index:9999*/
/*}*/

/* ===============================
   MINI PLAYER (NOW PLAYING)
================================ */

.mini-player {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 920px;
  background: linear-gradient(135deg, #fff7e6, #fff);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  padding: 10px 14px;
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 9999;
}

/* Close */
.mini-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: none;
  font-size: 18px;
  color: #b22222;
  cursor: pointer;
}

/* ===============================
   LEFT (THUMB + INFO)
================================ */

.mini-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.mini-left img {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.mini-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #7a1400;
  line-height: 1.2;
}

.mini-cat {
  font-size: 0.75rem;
  color: #ff9800;
  font-weight: 600;
}

/* ===============================
   CONTROLS
================================ */

.mini-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-controls button {
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all .2s ease;
}

.mini-controls button:hover {
  background: #ffefd5;
  transform: translateY(-1px);
}

#playBtn {
  background: linear-gradient(135deg, #ff9800, #b22222);
  color: #fff;
}

/* ===============================
   SEEK BAR
================================ */

.mini-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-progress span {
  font-size: 11px;
  color: #555;
  min-width: 36px;
  text-align: center;
}

.mini-progress input[type=range] {
  flex: 1;
  accent-color: #ff9800;
  cursor: pointer;
}

/* ===============================
   VOLUME
================================ */

.mini-volume {
  width: 80px;
  accent-color: #ff9800;
}

/* ===============================
   QUEUE DRAWER – MODERN LINKS
================================ */

.queue-drawer {
  position: fixed;
  right: 16px;
  bottom: 96px;
  width: 280px;
  max-height: 60vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
  padding: 12px;
  display: none;
  z-index: 2147483647;
  overflow: hidden;
}

.queue-drawer h6 {
  font-weight: 700;
  color: #7a1400;
  margin-bottom: 10px;
  padding-left: 4px;
}

/* Scroll area */
.queue-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 48vh;
  overflow-y: auto;
}

/* Each track = link card */
.queue-drawer li {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  margin-bottom: 6px;

  border-radius: 10px;
  cursor: pointer;

  font-size: 0.9rem;
  color: #5a2a00;
  background: #fff8e7;

  transition: all .2s ease;
}

/* Hover / tap */
.queue-drawer li:hover {
  background: #ffe4b3;
  transform: translateX(2px);
}

/* Active (currently playing) */
.queue-drawer li.active {
  background: linear-gradient(135deg, #ffefd5, #ffd27d);
  font-weight: 600;
  color: #7a1400;
  box-shadow: inset 0 0 0 1px rgba(255,152,0,.35);
}

/* Optional small play dot */
.queue-drawer li.active::before {
  content: "▶";
  font-size: 10px;
  color: #b22222;
}

/* Mobile */
@media (max-width: 768px) {
  .queue-drawer {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 120px;
    max-height: 50vh;
  }
}
/* ===============================
   QUEUE BUTTON ITEMS
================================ */

.queue-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.queue-drawer li {
  margin-bottom: 6px;
}

/* Actual clickable button */
.queue-btn-item {
  width: 100%;
  border: none;
  border-radius: 10px;

  padding: 10px 12px;
  text-align: left;

  background: #fff8e7;
  color: #5a2a00;
  font-size: 0.9rem;
  font-weight: 500;

  cursor: pointer;
  transition: all .2s ease;

  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hover / tap */
.queue-btn-item:hover {
  background: #ffe4b3;
  transform: translateX(2px);
}

/* Active (currently playing) */
.queue-btn-item.active {
  background: linear-gradient(135deg, #ffefd5, #ffd27d);
  color: #7a1400;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,152,0,.4);
}

/* Small play indicator */
.queue-btn-item.active::before {
  content: "▶";
  font-size: 11px;
  color: #b22222;
}

/* Title text */
.queue-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .queue-btn-item {
    padding: 12px;
    font-size: 0.95rem;
  }
}