/* ---------- GLOBAL ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans Devanagari", system-ui, sans-serif;
  background: #f4f6f8;
  color: #222;
}

/* ---------- HEADER ---------- */
.header {
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  padding: 10px 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left h1 {
  margin: 0;
  font-size: 22px;
}

.header-left a { color: #fff; text-decoration: none; }

.header .logo {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

.header .tagline {
  margin: 4px 0 0 72px;
  font-size: 14px;
  opacity: 0.9;
}

/* ---------- SEARCH BOX ---------- */
.search-container { text-align:center; margin:15px 0; }
#search-box {
  width: 90%; max-width:500px;
  padding: 10px 14px; border-radius: 25px;
  border:1px solid #ccc; font-size:16px; outline:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.3s;
}
#search-box:focus {
  border-color: #ff5722;
  box-shadow:0 2px 8px rgba(255,87,34,0.3);
}

/* ---------- CATEGORY BUTTON ---------- */
.category-container { text-align:center; margin:10px 0; }
.category-btn {
  margin: 4px 6px; padding:6px 12px;
  border:none; border-radius:20px;
  background:#ff9800; color:#fff; font-size:14px; cursor:pointer;
  transition: all 0.3s;
}
.category-btn:hover, .category-btn.active { background:#ff5722; }

/* ---------- CONTAINER ---------- */
.container { padding: 14px; max-width:900px; margin:auto; }

/* ---------- CARD ---------- */
.card {
  background:#fff; border-radius:12px; overflow:hidden;
  margin-bottom:16px; box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-2px); }
.card img { width:100%; height:190px; object-fit:cover; }
.card h3 { margin:12px; font-size:18px; line-height:1.4; }
.card a { display:block; margin:0 12px 14px; color:#ff5722; font-weight:600; text-decoration:none; }

/* ---------- SINGLE BHAJAN ---------- */
.bhajan-img { width:100%; max-height:260px; object-fit:cover; border-radius:12px; margin:10px 0 14px; }
.lyrics {
  background:#fff; padding:18px; border-radius:12px; font-size:17px; line-height:1.9;
  white-space: pre-wrap; box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

/* ---------- BACK TO TOP ---------- */
#topBtn {
  display:none; position:fixed; bottom:20px; right:20px; z-index:99;
  font-size:18px; border:none; outline:none;
  background-color:#ff5722; color:white; cursor:pointer;
  padding:10px 14px; border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
#topBtn:hover { background-color:#ff9800; }

/* ---------- FOOTER ---------- */
.footer {
  margin-top:30px;
  padding:15px;
  text-align:center;
  font-size:13px;
  color:#666;
}

.footer a { text-decoration:none; margin:0 5px; }

.social-links { margin-top:6px; }

.social-links a {
  display:inline-block;
  transition: transform 0.3s, filter 0.3s;
}

.social-links a:hover {
  transform: scale(1.2);
  filter: brightness(1.3);
}

.social-links .social-icon {
  width:28px; height:28px; display:block;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 600px) {
  .card img { height:230px; }
  .header-left h1 { font-size:28px; }
  .header .logo { width:80px; height:80px; }
  .header .tagline { margin-left:92px; }
}

@media (max-width: 600px){
  .header-left { flex-direction:row; align-items:center; }
  .header .logo { width:45px; height:45px; }
  .header .tagline { margin-left:55px; font-size:12px; }
}
/* ---------- NATIVE AD ---------- */
.native-ad {
  margin: 20px 0;
  text-align: center;
}