/* Reduce font size for article */
.af-card {
  font-size: 0.95rem;
}

/* Catchy style for af-gita-ta */
.catchy-gita {
  background: linear-gradient(90deg, #e0f7fa 0%, #ede9fe 100%);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.78em;
  font-weight: 600;
  color: #00796b;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(123,44,191,0.07);
}

/* Pleasing navigation/share buttons */
.pleasing-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 18px;
}
.pleasing-btn {
  background: linear-gradient(90deg, #faf5ff 0%, #e0f7fa 100%);
  color: #7b2cbf;
  border: 1px solid #ede9fe;
  font-size: 1.15em;
  box-shadow: 0 2px 8px rgba(123,44,191,0.08);
  transition: background 0.2s, color 0.2s;
}
.pleasing-btn:active, .pleasing-btn:focus {
  background: #e0f7fa;
  color: #00796b;
}
/* Enhanced side title styling for article section titles */
/* Stronger pill styling for side titles */
/* Remove chip styling, make side titles simple pink text */
.bg-category, .bg-soft {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 700;
  color: #7b2cbf;
  margin-bottom: 8px;
  margin-top: 8px;
  margin-left: 0;
  margin-right: 0;
  box-shadow: none;
  letter-spacing: 0.01em;
  display: block;
  text-align: left;
}
/* Page base */
.astrofacts-detail-wrap { max-width: 820px; margin: 12px auto; padding: 0 10px; }

/* Header */
.af-head {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px;
  margin: 10px 0 6px;
}
.af-home { text-decoration: none; font-size: 20px; line-height: 1; }
.af-title { margin: 0; font-size: 1.05rem; }
.af-slot  { font-size: .9rem; color: #6b7280; }

/* Card */
.af-card {
  background: #fff; border: 1px solid #e0dcec; border-radius: 14px; padding: 16px 16px;
  box-shadow: 0 2px 12px rgba(123,44,191,.08);
}
.af-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { padding: 0; border-radius: 0; border: none; font-size: 1em; background: none; box-shadow: none; }
/* ...existing code... */
.af-short {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: #4b5563;
}
.af-gita { padding-top: 10px; margin-top: 2px; }
.af-gita-verse { font-style: italic; margin-bottom: 6px; color: #374151; }
.af-gita-meaning { color: #4b5563; }
.af-gita-separator {
  border-top: 1px dashed #e5e7eb;
  margin: 10px 0 0 0;
}
.af-long { margin-top: 10px; line-height: 1.45; color: #4b5563; text-wrap: pretty; }

/* Footer actions */
.af-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Removed duplicate .round-btn definition. Use only the one below for brand color. */
.af-note { margin-top: 8px; font-size: .85rem; color: #6b7280; }

/* keep "கீதை 10.41" on one line */
#af-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* make generic pill chips not force a new line */
.af-meta .chip { display: inline-block; white-space: nowrap; }

.af-actions {
  flex-wrap: wrap;
}
.af-actions .round-btn {
  min-width: 38px;
}

/* Force brand color for arrow buttons */
/* Single .round-btn definition for brand color and background */
.round-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid #e0dcec;
  background: #fff !important;
  color: #7b2cbf !important;              /* brand purple */
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(123,44,191,.12);
  transition: background 0.2s, color 0.2s;
}
.round-btn:hover {
  background: #f5f0ff;
  color: #5a189a;
}
.round-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.af-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.nav-btns, .action-btns {
  display: flex;
  gap: 12px;
}