.bhajan-form {
    background: #fff3e0;
    padding: 20px;
    border: 1px solid #ff9933;
    border-radius: 8px;
    width: 70%;
    margin: auto;
}
.bhajan-form input, 
.bhajan-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.bhajan-form button {
    background: #ff9933;
    color: white;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}
.bhajan-form button:hover {
    background: #e67e22;
}
.success-msg {
    background: #d4edda;
    color: #155724;
    padding: 10px;
    border-radius: 5px;
    margin: 10px auto;
    width: 70%;
}
.error-msg {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    margin: 10px auto;
    width: 70%;
}


.bhajan-detail {
    background: #fff8e7;
    padding: 20px;
    border: 1px solid #ff9933;
    border-radius: 8px;
    margin: 20px auto;
    width: 75%;
}
.bhajan-detail h2 {
    text-align: center;
    color: #b22222;
    margin-bottom: 20px;
}
.lyrics-box {
    background: #fff;
    border: 1px dashed #ff9933;
    padding: 15px;
    font-size: 1.1em;
    white-space: pre-wrap;
    margin-bottom: 20px;
}
.meaning {
    background: #fef5e7;
    border-left: 4px solid #ff9933;
    padding: 10px;
    font-style: italic;
}
.meta-info {
    text-align: right;
    color: #555;
    margin-top: 15px;
}
.error-msg {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 20px auto;
    width: 70%;
}



.bhajan-detail {
    background: #fff8e7;
    padding: 20px;
    border: 1px solid #ff9933;
    border-radius: 8px;
    margin: 20px auto;
    width: 75%;
}
.bhajan-detail h2 {
    text-align: center;
    color: #b22222;
    margin-bottom: 20px;
}
.lyrics-box {
    background: #fff;
    border: 1px dashed #ff9933;
    padding: 15px;
    font-size: 1.1em;
    white-space: pre-wrap;
    margin-bottom: 20px;
}
.meaning {
    background: #fef5e7;
    border-left: 4px solid #ff9933;
    padding: 10px;
    font-style: italic;
}
.meta-info {
    text-align: right;
    color: #555;
    margin-top: 15px;
}
.nav-links {
    text-align: center;
    margin-top: 20px;
}
.nav-links .btn {
    background: #ff9933;
    color: white;
    padding: 8px 15px;
    margin: 0 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}
.nav-links .btn:hover {
    background: #e67e22;
}
.nav-links .home {
    background: #b22222;
}
.error-msg {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 20px auto;
    width: 70%;
}


.page-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Left (भजन) */
.bhajan-detail {
  flex: 2;
  min-width: 300px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Right (संस्था संदेश) */
.mission-box {
  flex: 1;
  min-width: 250px;
  padding: 15px;
  background: #f0f8ff;
  border-left: 4px solid #0077b6;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
}

/* Title */
.bhajan-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

/* Singer Mode */
.singer-btn {
  display: block;
  margin: 10px auto;
  padding: 8px 16px;
  background: #ffb703;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.singer-btn:hover { background: #fb8500; }

.lyrics-box {
  background: #f9f9f9;
  border-left: 5px solid #c77dff;
  padding: 20px;
  border-radius: 8px;
  font-family: "Noto Sans Devanagari", "Mangal", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.singer-mode {
  font-size: 26px !important;
  line-height: 2.4 !important;
  text-align: center;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .page-container { flex-direction: column; }
  .mission-box { order: -1; } /* 📌 Mobile में संदेश ऊपर दिखे */
  .lyrics-box { font-size: 20px; line-height: 2; }
}