/* =========================================================
   Custom styles - Konsta UI inspired
   ========================================================= */

/* Search highlighting in verse content (yellow background) */
.verse-section .search-highlight-detail,
#detail-content .search-highlight-detail {
  background: #ffff99;
  color: #000;
  font-weight: bold;
  padding: 1px 2px;
  border-radius: 2px;
}

/* Search highlighting in search results (bold only, no background) */
.search-result-title .search-highlight {
  background: none !important;
  color: #333 !important;
  font-weight: 900 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.search-highlight {
  background: none;
  color: #333;
  font-weight: bold;
  padding: 0;
  border-radius: 0;
}

/* Special verse titles (Invocation, Dhyanam, etc.) - only in explain view */
#detail-content .tb_title {
  background: #d4a574;
  color: #3d2f1f;
  font-weight: bold;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 12px 0 6px 0;
  display: inline-block;
}

/* Modern iOS-style base */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CSS Variables for pills - match Recent section styling */
:root {
  --pill: #333;
  --pill-fg: rgba(255, 255, 255, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pill: #e9e9ea;
    --pill-fg: #0f0f10;
  }
}

/* Navigation pills styling */
.nav_block {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.pill {
  padding: 6px 10px;
  background: var(--pill);
  color: var(--pill-fg);
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.2s ease;
}

.pill:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.pill:active {
  transform: translateY(0);
}

/* Inline pills for verse references in topics/keywords - match Recent section styling */
.inline-pill {
  padding: 6px 10px;
  background: var(--pill);
  color: var(--pill-fg);
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: all 0.2s ease;
  margin: 0 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.inline-pill:hover {
  opacity: 0.8;
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--pill-fg);
}

.inline-pill:active {
  transform: translateY(0);
}

html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  width: 100%;
}

#app {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  background: #f5f5f7;
  position: relative;
}

/* Dark background for app and view when they contain deity-page */
#app:has(.page.deity-page),
.view:has(.page.deity-page) {
  background: rgba(30, 30, 30, 1);
}

.view {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.page {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f7;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100vw;
}

/* Dark background for page when it has deity-page class */
.page.deity-page {
  background: rgba(30, 30, 30, 1) !important;
}

.page-content {
  padding: 0;
  padding-top: 50px; /* Account for fixed navbar height (single row, 50px) */
  background: #f5f5f7;
  min-height: calc(100vh - 50px); /* Fill remaining viewport height */
}

/* Remove grey space above lists - make list start immediately below navbar */
.page-content .list {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-content .list ul {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure no gap between navbar and list */
.page-content > .list:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove any Framework7 default spacing */
.page-content .block {
  margin-top: 0;
  padding-top: 0;
}

.page-content .block:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Search page specific - no top padding, search bar right below navbar */
#search-page-content {
  padding-top: 0 !important;
}

#search-page-content .block:first-child {
  padding-top: 8px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.block-title {
  padding: 16px 16px 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8e93;
  margin: 0;
}

/* Konsta-style navbar - two rows */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #425561 !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  height: 50px; /* Single row: 50px */
}

.navbar .title {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: #000;
}

/* Clickable app title to go home */
.navbar .title.app-title {
  cursor: pointer;
  user-select: none;
}

.navbar .title.app-title:active {
  opacity: 0.6;
}


/* Detail page: fixed full-viewport parchment layer (sharp, no stretch, no stripes)
   Pseudo-element stays viewport-sized so image stays crisp on long content. */
.page.detail-page {
  position: relative;
  background: transparent;
}

.page.detail-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('/ui/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-blend-mode: lighten;
}

.page.detail-page .navbar {
  z-index: 1;
}

.page.detail-page .page-content {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .page.detail-page::before {
    background-image: url('/ui/backParchment-d.jpg');
  }
}

.page.detail-page .page-content {
  background: transparent;
}

.page-content {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.0);
  background-blend-mode: lighten;
  position: relative;
}

/* Ensure detail content sits above the parchment layer */
.page.detail-page .page-content > * {
  position: relative;
  z-index: 1;
}

/* Detail page content wrapper */
.detail-page-content-wrapper {
  display: flex;
  flex-direction: column;
}

/* Deity image on detail page - mobile-first: at top */
.detail-deity-image {
  width: 100%;
  margin: 0;
  padding: 8px 0 16px 0; /* Added bottom padding for spacing from text */
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  order: -1; /* Show first on mobile */
}

.detail-deity-image img {
  width: 100%;
  max-width: 100%; /* Changed from 280px to 100% */
  height: auto;
  border-radius: 12px; /* Same radius as description box */
  box-shadow: none; /* Remove shadow */
  border: none; /* Remove border */
  object-fit: contain;
  background: transparent; /* Remove white background for transparent PNGs */
}

.detail-content-main {
  flex: 1;
  padding: 0 16px 16px 16px;
  min-width: 0; /* Ensure flex item can shrink */
}

/* Detail page title bar (Gita: left title + pills; Shloka/Text: centered title, no pills) */
.gita-title-bar {
  background: #8B6A4E;
  padding: 8px 16px;
  margin: -16px -16px 16px -16px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.gita-title-bar--centered {
  justify-content: center;
}

.gita-title-bar__title {
  font-size: 18px;
  font-weight: 700;
  color: #FAF3E6;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When bar has pills (Gita), title fills remaining space */
.gita-title-bar:not(.gita-title-bar--centered) .gita-title-bar__title {
  flex: 1;
  min-width: 0;
}

/* When bar is centered (Shloka/Text), title stays content-width, can ellipsis if very long */
.gita-title-bar--centered .gita-title-bar__title {
  max-width: 100%;
}

/* Desktop: show deity image on the right side */
@media (min-width: 768px) {
  .detail-page-content-wrapper {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    padding: 16px;
  }
  
  .detail-deity-image {
    flex-shrink: 0;
    width: 400px;
    padding: 0;
    margin-top: 0px; /* Align with description top */
    order: 1; /* Show last (on right) on desktop */
    position: static; /* Changed from sticky to static for alignment */
    align-self: flex-start;
  }
  
  .detail-deity-image img {
    max-width: 100%;
    width: 100%;
    border-radius: 12px; /* Same radius as description box */
  }
  
  .detail-content-main {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
}

/* Home icon - slightly smaller to match search visual weight */
.navbar .home-icon {
  width: 25px;
  height: 25px;
  fill: #1a1a1a;
}

.navbar .link {
  color: #000;
  opacity: 0.8;
}

.navbar .link:active {
  opacity: 0.5;
}

.navbar .left {
  display: flex;
  align-items: center;
  gap: 0;
  margin-right: 4px !important; /* Override Framework7's 10px margin */
}

.navbar .left .link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0 !important; /* Remove Framework7's 16px margin on home button */
}

.navbar .right {
  display: flex;
  align-items: center;
  gap: 0;
}

.navbar .right .link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Search icon SVG */
.navbar .search-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.8;
}

/* iOS-style search bar in navbar - always visible */
.navbar-search-container {
  display: inline-flex !important;
  position: relative;
  align-items: center;
  width: fit-content !important;
  min-width: 200px !important; /* Minimum width to prevent search bar from being too narrow */
  max-width: 100%;
}

/* Smaller min-width on very small screens */
@media (max-width: 640px) {
  .navbar-search-container {
    min-width: 160px !important;
  }
}

/* Very small screens: reduce gap and adjust padding for more search space */
@media (max-width: 400px) {
  .navbar-row {
    grid-template-columns: 58px 1fr 116px !important;
    gap: 8px !important;
    padding: 0 4px !important;
  }
  
  /* Reduce icon circle size slightly on very small screens */
  .navbar .icon-circle {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Adjust search container min-width for very small screens */
  .navbar-search-container {
    min-width: 140px !important;
  }
}

.navbar-search-input {
  width: 100% !important; /* Back to 100% since container now matches input */
  height: 36px !important;
  padding: 0 40px 0 36px !important; /* Left padding for search icon, right for help icon */
  background: #ffffff !important; /* White background */
  border-radius: 18px !important; /* More rounded - pill shape (half of height) */
  border: 1px solid #d1d1d6 !important; /* Light gray visible border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Subtle drop shadow */
  font-size: 17px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.navbar-search-input::placeholder {
  color: #8e8e93 !important;
}

/* Static page: search form with submit button */
.navbar-search-form {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.navbar-search-form .navbar-search-input {
  flex: 1;
  min-width: 0;
}
.navbar-search-submit {
  flex-shrink: 0;
  padding: 6px 12px;
  height: 36px;
  font-size: 15px;
  border-radius: 18px;
  border: 1px solid #d1d1d6;
  background: #ffffff;
  color: #000;
  cursor: pointer;
  font-weight: 500;
}

/* Search icon on the left */
.navbar-search-container::before {
  content: '' !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238e8e93' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Microphone icon on the right */
/* Help button in search container */
.navbar-help-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  color: #8e8e93 !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

.navbar-help-btn:hover {
  opacity: 1 !important;
}

.navbar-help-btn:active {
  opacity: 0.8 !important;
}

.navbar-help-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* Hide any other search icons */
.navbar .search-icon,
.navbar #search-btn {
  display: none !important;
}

/* Hide title when search is active */
.navbar .title.search-active {
  display: none !important;
}

/* Hide search icon when search is active */
.navbar .right .link.search-active {
  display: none !important;
}

/* Two-row navbar structure */
.navbar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center; /* Center the navbar-row vertically */
}

/* Icon row - top row */
.navbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  width: 100%;
  padding: 0 8px;
  max-width: 700px;
  margin: 0 auto;
}

/* Left icons container */
.navbar-row .navbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  width: 80px; /* Fixed width for equal side spacing */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Search container - centered column */
.navbar-row .navbar-search-container {
  flex: 1; /* Takes remaining space */
  display: flex;
  justify-content: center; /* Center the search input */
}

/* Right icons container */
.navbar-row .navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  width: 80px; /* Same width as left for perfect centering */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Desktop: Edge alignment - icons at edges, search centered */
@media (min-width: 768px) {
  .navbar-row {
    gap: 12px; /* Reduced gap on desktop since icons are at edges */
    padding: 0 16px; /* More padding on desktop for edge spacing */
    max-width: none; /* Remove max-width on desktop for full-width navbar */
  }
}

/* Title row - bottom row */
.navbar-row.title-row {
  display: flex;
  justify-content: center;
  height: 36px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
}

.navbar-inner .left,
.navbar-inner .right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.navbar-inner .title {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: #000;
}

/* Back icon SVG */
.navbar .back-icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.8;
}

:root {
  --f7-theme-color: #000000;
  --f7-navbar-bg-color: #425561 !important;
  --f7-navbar-text-color: #000;
}

/* Force navbar background image and positioning */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: #425561 !important;
}

.navbar-bg {
  background: #425561 !important;
}

/* Konsta-style module grid */
/* Home page – parchment on every layer so no white patch when recents hidden */
/* Body class ensures html/body/#app get parchment even when :has() is not supported */
html:has(body.page-is-home),
body.page-is-home,
body.page-is-home #app,
.page--home,
.page--home .page-content,
#app:has(.page--home),
.view:has(.page--home) {
  background-image: url('/ui/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #e8e2d6;
}

/* Fill viewport so parchment covers bottom/safe area on home */
html:has(body.page-is-home),
body.page-is-home {
  min-height: 100vh;
  min-height: 100dvh;
}

.page--home .page-content {
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: lighten;
}

@media (min-width: 768px) {
  html:has(body.page-is-home),
  body.page-is-home,
  body.page-is-home #app,
  .page--home,
  .page--home .page-content,
  #app:has(.page--home),
  .view:has(.page--home) {
    background-image: url('/ui/backParchment-d.jpg');
  }
}

/* Fallback for pages that have .module-grid but no .page--home (e.g. back nav) */
.page:has(.page-content:has(.module-grid)):not(.page--home) .page-content,
.page-content:has(.module-grid),
.page-content:has(#recents-section) {
  background-image: url('/ui/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.0);
  background-blend-mode: lighten;
}

@media (min-width: 768px) {
  .page-content:has(.module-grid),
  .page-content:has(#recents-section) {
    background-image: url('/ui/backParchment-d.jpg');
  }
}

/* Gita hub page - parchment background */
.page-content:has(.gita-hub-grid) {
  background-image: url('/ui/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.0);
  background-blend-mode: lighten;
}

/* Static explore pages - match dynamic layout */
/* Nested page-content: only outer has padding-top (inner would double it) */
.static-explore #explore-content.page-content {
  padding-top: 50px; /* Navbar clearance */
}
.static-explore #explore-content .page-content {
  padding-top: 0 !important; /* Inner: no extra gap */
}
/* Grid padding - match dynamic (16px all sides) */
.static-explore #explore-content .browse-grid,
.static-explore #explore-content .gita-hub-grid,
.static-explore #explore-content .deity-grid,
.static-explore #explore-content .keywords-grid {
  padding: 16px 16px; /* Match dynamic; was 16px 12px, increase sides */
}
/* Deity shloka list: not direct child of page-content on static (inside deity-list-wrap) */
.static-explore #deity-list-wrap {
  padding: 16px 16px;
}
@media (min-width: 768px) {
  .static-explore #deity-list-wrap {
    padding: 16px 24px;
  }
  .static-explore #deity-list-wrap .deity_shlokas_list {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .static-explore #deity-list-wrap .deity_shlokas_list {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Desktop: override 4px side padding so cards don't hug edges */
@media (min-width: 768px) {
  .static-explore #explore-content .browse-grid,
  .static-explore #explore-content .gita-hub-grid,
  .static-explore #explore-content .deity-grid,
  .static-explore #explore-content .keywords-grid {
    padding: 16px 24px;
  }
}

/* Topics list and Keywords list (Gita browse) - parchment */
.page-content.browse-parchment {
  background-image: url('/ui/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.0);
  background-blend-mode: lighten;
}

@media (min-width: 768px) {
  .page-content.browse-parchment {
    background-image: url('/ui/backParchment-d.jpg');
  }
}

/* Module grid: 2 columns on mobile, responsive above */
.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
  margin: 0 auto;
  max-width: 100%;
}

/* Tablet and up: cap card size, center in grid cells */
@media (min-width: 768px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
    max-width: 480px;
    justify-items: center;
  }
  
  .module-grid .module-card {
    max-width: 220px;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
  }
  
  .module-grid .module-card {
    max-width: 220px;
  }
}

@media (min-width: 1280px) {
  .module-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 960px;
  }
  
  .module-grid .module-card {
    max-width: 220px;
  }
}

.module-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e0d8c8;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.module-card:active {
  transform: translateY(-1px);
}

.module-card-image {
  flex: 1;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.module-card-content {
  flex-shrink: 0;
  padding: 12px 14px;
  background: #f5f0e6;
  border-radius: 0 0 11px 11px;
}

.module-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0 0 2px 0;
  color: #3d3525;
  line-height: 1.2;
}

.module-card-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #6e6858;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Individual card image backgrounds */
.module-card.gita .module-card-image {
  background-image: url('/ui/assets/explore-hub/unified/Thumb_Gita.jpg');
}

.module-card.shlokas .module-card-image {
  background-image: url('/ui/assets/explore-hub/unified/Thumb_Shlokas.jpg');
}

.module-card.texts .module-card-image {
  background-image: url('/ui/assets/explore-hub/unified/texts.jpg');
}

.module-card.favorites .module-card-image {
  background-image: url('/ui/assets/explore-hub/unified/favorites.jpg');
}

/* Gita hub: small text-only cards */
.gita-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.gita-hub-card {
  display: block;
  padding: 14px 16px;
  background: #f5f0e6;
  border: 1px solid #e0d8c8;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.gita-hub-card:hover {
  background: #ebe5d9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.gita-hub-card:active {
  background: #e5dfd2;
}
.gita-hub-card-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #3d3525;
  margin-bottom: 4px;
}
.gita-hub-card-desc {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #6e6858;
  line-height: 1.35;
}
@media (min-width: 480px) {
  .gita-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .gita-hub-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
  }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .module-grid {
    padding: 12px;
    gap: 16px;
  }
  
  .module-card-content {
    padding: 10px 12px;
  }
  
  .module-card-title {
    font-size: 16px;
  }
  
  .module-card-subtitle {
    font-size: 11px;
  }
}

/* Desktop: fixed card size */
@media (min-width: 768px) {
  .module-card {
    max-width: none;
  }
}

/* Konsta-style browse grid */
.browse-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile for topics */
  gap: 12px;
  padding: 16px 12px; /* Top/bottom: 16px, left/right: 12px to match column gap */
}

/* Deity cards and Text cards - override to 2 columns on mobile */
.browse-grid:has(.deity-card) {
  grid-template-columns: repeat(2, 1fr); /* 2 columns for deity/text cards on mobile */
}

/* Chapter cards - override to 2 columns on mobile */
.browse-grid:has(.chapter-card) {
  grid-template-columns: repeat(2, 1fr); /* 2 columns for chapter cards on mobile */
}

/* Keywords grid - 2 columns on mobile, 4 on desktop */
.browse-grid:has(.keyword_sanskrit),
.browse-grid:has(.keyword-card),
.browse-grid.keywords-grid {
  grid-template-columns: repeat(2, 1fr); /* 2 columns for keywords on mobile */
  gap: 16px;
}

/* Tablet: More flexible columns (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .browse-grid:has(.deity-card) {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
    gap: 16px;
  }
  
  .browse-grid:has(.chapter-card) {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
    gap: 16px;
  }
  
  .browse-grid:has(.keyword_sanskrit),
  .browse-grid:has(.keyword-card),
  .browse-grid.keywords-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    gap: 16px;
  }
}

/* Desktop (768px+): Auto-fill with flexible sizing */
@media (min-width: 768px) {
  .browse-grid:has(.keyword_sanskrit),
  .browse-grid:has(.keyword-card),
  .browse-grid.keywords-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for keywords on desktop */
    gap: 24px;
  }
  
  /* Deity cards and Text cards - flow properly on desktop */
  .browse-grid:has(.deity-card) {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); /* Flow to fill space on desktop */
    gap: 24px;
  }
  
  /* Chapter cards - flow properly on desktop */
  .browse-grid:has(.chapter-card) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Flow to fill space on desktop */
    gap: 24px;
  }
}

/* Topic group wrapper - keeps block-title + card together */
.browse-grid .topic-group-wrapper {
  display: flex;
  flex-direction: column;
}

/* Block title styling (Framework7 style) - darker for readability on parchment */
.browse-grid .topic-group-wrapper .block-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #4d4d4d;
  letter-spacing: 0.5px;
}

.browse-grid .topic-group-wrapper:first-child .block-title {
  margin-top: 0;
}

/* Framework7 Card with List styling - rounded edges including top */
.browse-grid .card,
.browse-grid .topic-group-wrapper .card {
  margin: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Ensure card-content also has rounded top */
.browse-grid .card .card-content,
.browse-grid .topic-group-wrapper .card .card-content {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  padding: 0 !important;
  background: white !important;
}

/* Links list styling - remove bullets but keep proper padding */
.links-list ul,
.browse-grid .links-list ul,
.card .links-list ul,
.browse-grid .card .links-list ul,
.browse-grid .list.links-list ul,
.browse-grid .card .list.links-list ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0;
  margin: 0;
}

.links-list ul li,
.browse-grid .links-list ul li,
.card .links-list ul li,
.browse-grid .card .links-list ul li,
.browse-grid .list.links-list ul li,
.browse-grid .card .list.links-list ul li {
  list-style: none !important;
  list-style-type: none !important;
}

.links-list ul li::before,
.links-list ul li::marker,
.browse-grid .links-list ul li::before,
.browse-grid .links-list ul li::marker {
  display: none !important;
  content: none !important;
}

/* Links list item styling - iOS-style list items */
.links-list ul li {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0;
  position: relative;
}

.links-list ul li:last-child {
  border-bottom: none;
}

.links-list ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #000 !important;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 1.4;
  transition: background 0.15s;
  position: relative;
  padding-right: 40px; /* Space for arrow */
}

/* Right-pointing chevron arrow */
.links-list ul li a::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #c7c7cc;
  border-right: 1.5px solid #c7c7cc;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.links-list ul li a:hover,
.links-list ul li a:active {
  background: rgba(0, 0, 0, 0.05);
}

/* Card footer styling */
.browse-grid .card .card-footer,
.browse-grid .topic-group-wrapper .card .card-footer {
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  color: #8e8e93;
  background: white;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}

/* Desktop: wrap cards in rows and columns */
@media (min-width: 768px) {
  .browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    padding: 16px 4px; /* Top/bottom: 16px, left/right: 4px (reduced) */
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  
  .browse-grid .topic-group-wrapper .block-title {
    margin-bottom: 12px;
  }
}

.browse-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
}

.browse-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.browse-card-header {
  padding: 16px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
}

.browse-card-footer {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: #8e8e93;
  background: white;
}

/* Chapter cards - Framework7 style with pastel colors */
.browse-grid .chapter-card {
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.browse-grid .chapter-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Remove borders/lines between header, content, and footer */
.browse-grid .chapter-card .card-header {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom: none !important;
  border: none !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.browse-grid .chapter-card .card-content {
  border-radius: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.browse-grid .chapter-card .card-footer {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  border-top: none !important;
  border: none !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Deity cards with images */
.deity-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  position: relative;
}

.deity-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.deity-card-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 82.5%; /* 4:3 aspect ratio + 10% taller */
  overflow: hidden;
  background: #f5f5f7;
}

.deity-card-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.deity-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

.deity-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  color: white;
}

.deity-card-title {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}

.deity-card-count {
  font-size: 13px;
  opacity: 0.9;
}

/* Navbar icon circles */
.navbar .icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85); /* More opaque white - less transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  position: relative;
  z-index: 10;
}

.navbar .icon-circle:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.navbar .icon-circle:active {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Ensure icons are centered in circles */
.navbar .icon-circle svg {
  position: relative;
  z-index: 1;
}

/* Settings icon - darker color */
.navbar .settings-icon {
  color: #000000 !important; /* Darker black for better visibility */
  opacity: 0.9 !important;
}

.navbar .settings-icon:active,
.navbar #settings-btn:active .settings-icon {
  color: #ff4500 !important; /* Dark orange/red when clicked */
  opacity: 1 !important;
}

.navbar .favorite-icon {
  color: #1a1a1a !important; /* Dark gray to match settings icon */
  fill: none !important; /* No fill - outline only */
  opacity: 0.9 !important;
  transition: color 0.2s ease, fill 0.2s ease;
}

.navbar .favorite-icon.favorited {
  color: #FF3B30 !important; /* Red for filled star - very distinct */
  fill: currentColor !important; /* Fill the star when favorited */
}

/* Override framework7 icon styling */
.navbar .home-icon {
  fill: currentColor !important;
  stroke: none !important;
}

/* Mobile-specific adjustments for deity cards */
@media (max-width: 767px) {
  .deity-card-title {
    font-size: 15px; /* Reduce font size */
    transform: translateY(6px); /* Move title down halfway */
    display: block;
  }
  
  .deity-card-count {
    transform: translateY(4px); /* Move count down */
    display: block;
  }
}

/* Konsta-style list items */
.list {
  background: white;
  border-radius: 0;
}

/* Search filter segmented control */
#search-filter-control .segmented {
  display: flex !important;
  background: #e5e5ea !important;
  border-radius: 8px !important;
  padding: 2px !important;
  margin: 0 !important;
}

/* Desktop: limit search filter width */
@media (min-width: 768px) {
  #search-filter-control {
    max-width: 400px;
    margin: 0 auto !important;
  }
  
  #search-overlay-filter-control {
    max-width: 400px;
    margin: 0 auto 12px auto !important;
  }
}

#search-filter-control .segmented .button {
  flex: 1 !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #000 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  text-decoration: none !important;
  margin: 0 !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

#search-filter-control .segmented .button.active,
#search-filter-control .segmented .button.button-active {
  background: #ffffff !important;
  color: #000 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
}

#search-filter-control .segmented .button:not(.active):not(.button-active) {
  opacity: 0.6 !important;
}

.item-list-item {
  padding: 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  background: white;
  transition: background 0.15s;
}

.item-list-item:active {
  background: rgba(0, 0, 0, 0.05);
}

.item-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
  color: #000;
}

.item-preview {
  font-size: 15px;
  color: #8e8e93;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

/* iOS-style search bar */
.searchbar {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.searchbar-input-wrap {
  background: rgba(142, 142, 147, 0.12) !important;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  margin: 0;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override Framework7 searchbar defaults */
.searchbar {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Remove any borders/shadows from searchbar elements */
.searchbar * {
  border: none !important;
  box-shadow: none !important;
}

.searchbar-input-wrap .icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  opacity: 0.5;
  flex-shrink: 0;
}

.searchbar-input {
  font-size: 17px;
  background: transparent;
  border: none;
  flex: 1;
  padding: 0;
  margin: 0;
}

.searchbar-input:focus {
  outline: none;
}

.searchbar-input::placeholder {
  color: #8e8e93;
}

.search-results-list {
  margin: 0;
  background: white;
}

.search-results-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-results-list ul li {
  list-style: none;
}

.search-result-item {
  padding: 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  background: white;
  transition: background 0.15s;
  list-style: none;
}

.search-result-item:active {
  background: rgba(0, 0, 0, 0.05);
}

.search-result-title {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: #000;
  margin-bottom: 4px;
}

.search-result-preview {
  font-size: 15px;
  color: #8e8e93;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

/* Search overlay - covers page content */
#search-overlay {
  position: fixed;
  top: 50px; /* Below navbar (single row, 50px) */
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 9999; /* Increased to be above Framework7 elements */
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#search-overlay.active {
  display: block;
}

#search-overlay-content {
  padding: 16px;
  padding-top: 8px;
}

/* Help Overlay - same style as search overlay */
#help-overlay {
  position: fixed;
  top: 50px; /* Below navbar (single row, 50px) */
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 9999;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#help-overlay.active {
  display: block;
}

#help-overlay-content {
  padding: 16px;
  padding-top: 8px;
  max-width: 800px;
  margin: 0 auto;
}

#help-overlay-content-inner {
  color: #000;
  font-size: 15px;
  line-height: 1.6;
}

#help-overlay-content-inner h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #000;
}

#help-overlay-content-inner h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 24px 0 12px 0;
  color: #000;
}

#help-overlay-content-inner h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 20px 0 10px 0;
  color: #000;
}

#help-overlay-content-inner p {
  margin: 0 0 12px 0;
  color: #333;
}

#help-overlay-content-inner ul,
#help-overlay-content-inner ol {
  margin: 0 0 12px 0;
  padding-left: 24px;
}

#help-overlay-content-inner li {
  margin: 4px 0;
  color: #333;
}

#help-overlay-content-inner code {
  background: #f5f5f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

#help-overlay-content-inner pre {
  background: #f5f5f7;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
}

#help-overlay-content-inner pre code {
  background: none;
  padding: 0;
}

#help-overlay-content-inner a {
  color: #007AFF;
  text-decoration: none;
}

#help-overlay-content-inner a:hover {
  text-decoration: underline;
}

#help-overlay-content-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

#help-overlay-content-inner table th,
#help-overlay-content-inner table td {
  padding: 8px 12px;
  border: 1px solid #e5e5ea;
  text-align: left;
}

#help-overlay-content-inner table th {
  background: #f5f5f7;
  font-weight: 600;
}

/* Search overlay segmented control */
#search-overlay-filter-control {
  margin-bottom: 12px;
  width: 100%;
}

#search-overlay-filter-control .segmented {
  display: flex !important;
  background: #e5e5ea !important;
  border-radius: 8px !important;
  padding: 2px !important;
  width: 100% !important;
  margin: 0 !important;
}

#search-overlay-filter-control .segmented .button {
  flex: 1 !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #000 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  text-decoration: none !important;
  margin: 0 !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

#search-overlay-filter-control .segmented .button.active,
#search-overlay-filter-control .segmented .button.button-active {
  background: #ffffff !important;
  color: #000 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
}

#search-overlay-filter-control .segmented .button:not(.active):not(.button-active) {
  opacity: 0.6 !important;
}

.detail-content {
  padding: 16px;
}

/* Utility: hide element; JS toggles by adding/removing this class */
.hidden {
  display: none !important;
}

/* Empty / hint / error message blocks (search, help, overlay) */
.empty-message {
  text-align: center;
  color: #8e8e93;
  padding: 20px;
}

.error-message {
  color: #ff3b30;
  padding: 20px;
  text-align: center;
}

.overlay-empty-wrap {
  padding: 40px 20px;
  text-align: center;
}

.overlay-empty-text {
  color: #8e8e93;
  font-size: 15px;
  margin: 0;
}

.recents-section-heading {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
}

/* Favorites empty state */
.favorites-empty-wrap {
  text-align: center;
  padding: 40px 20px;
}

.favorites-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.favorites-empty-heading {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.favorites-empty-img {
  max-width: 300px;
  height: auto;
  margin-top: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Favorites empty/error state on dark deity-page background */
.page.deity-page .favorites-empty-heading {
  color: rgba(255, 255, 255, 0.9);
}
.page.deity-page #favorites-error p,
.page.deity-page #favorites-empty p {
  color: rgba(255, 255, 255, 0.7);
}

/* Keyword / topic content pages (shared layout) */
.keyword-content-wrapper,
.topic-content-wrapper {
  padding: 16px;
}

.keyword-page-title,
.topic-page-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #222;
}

.keyword-html,
.topic-html {
  color: #222;
  line-height: 1.8;
  font-size: 16px;
}

@media (min-width: 768px) {
  .keyword-content-wrapper,
  .topic-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 32px;
  }
  .keyword-page-title,
  .topic-page-title {
    font-size: 32px;
  }
  .keyword-html,
  .topic-html {
    font-size: 18px;
  }
}

/* Sticky audio player at bottom – only when .show; otherwise no space or flash */
.audio-player-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #8B6A4E;
  border-top: 1px solid #e5e5ea;
  padding: 6px 8px;
  display: none;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
  z-index: 1000;
  box-shadow: none;
}

.audio-player-sticky.show {
  display: flex;
  visibility: visible;
  height: auto;
  padding: 6px 8px;
  border-top: 1px solid #e5e5ea;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.audio-player-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.audio-player-button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #000;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audio-player-button svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.audio-player-info {
  flex: 1;
  min-width: 0;
}

.audio-player-title {
  font-size: 15px;
  font-weight: 600;
  color: #FAF3E6;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-player-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-player-progress {
  flex: 1;
  height: 4px;
  background: rgba(250, 243, 230, 0.3);
  border-radius: 2px;
  position: relative;
}

.audio-player-thumb {
  position: absolute;
  top: -6px;
  width: 16px;
  height: 16px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: grab;
  transform: translateX(-50%);
  left: 0%;
  opacity: 1;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.audio-player-thumb:active {
  cursor: grabbing;
}

.audio-player-time {
  font-size: 12px;
  color: #FAF3E6;
  white-space: nowrap;
  flex-shrink: 0;
}

.audio-player-progress-bar {
  height: 100%;
  background: #FAF3E6;
  border-radius: 1px;
  width: 0%;
  transition: width 0.1s linear;
}

.audio-player audio {
  display: none;
}

/* Add padding to page-content when audio player is visible */
.page-content.has-audio {
  padding-bottom: 54px;
}

/* Verse separator */
.verse-separator {
  height: 1px;
  background: rgba(160, 140, 120, 0.6); /* Warmer, more visible golden-brown/tan */
  margin: 24px 0;
}

/* Verse separator for detail pages with parchment background */
.page.detail-page .verse-separator {
  background: #D4AF37;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #5a3d1e;
}

.detail-text {
  font-size: 18px; /* Default/Regular size */
  line-height: 1.6;
  color: #333;
  margin-bottom: 8px;
  white-space: pre-wrap;
}

/* Font size classes for .detail-text */
.font-compact .detail-text {
  font-size: 16px;
}

.font-regular .detail-text {
  font-size: 18px;
}

.font-large .detail-text {
  font-size: 20px;
}

/* Translation styling - serif italic */
.detail-translation {
  font-family: 'Droid Serif', Georgia, "Times New Roman", Times, serif;
  font-style: italic;
}

/* Font size classes for .detail-translation */
.font-compact .detail-translation {
  font-size: 16px;
}

.font-regular .detail-translation {
  font-size: 18px;
}

.font-large .detail-translation {
  font-size: 20px;
}

.detail-sanskrit {
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 27px; /* Default desktop size */
}

@media (max-width: 640px) {
  .detail-sanskrit {
    font-size: 25px; /* Default mobile size */
  }
}

/* Sanskrit font size classes */
.font-compact .detail-sanskrit {
  font-size: 24px; /* Desktop */
}

@media (max-width: 640px) {
  .font-compact .detail-sanskrit {
    font-size: 22px; /* Mobile */
  }
}

.font-regular .detail-sanskrit {
  font-size: 27px; /* Desktop */
}

@media (max-width: 640px) {
  .font-regular .detail-sanskrit {
    font-size: 25px; /* Mobile */
  }
}

.font-large .detail-sanskrit {
  font-size: 32px; /* Desktop */
}

@media (max-width: 640px) {
  .font-large .detail-sanskrit {
    font-size: 30px; /* Mobile */
  }
}

.keyword_sanskrit {
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 28px; /* Default desktop size */
  font-weight: 700;
  margin-bottom: 6px;
  color: #222;
}

@media (max-width: 640px) {
  .keyword_sanskrit {
    font-size: 26px; /* Default mobile size */
  }
}

.detail-section[data-field].field-hidden {
  display: none;
}

/* Hide separators when the following section is hidden */
.verse-separator:has(+ .detail-section.field-hidden) {
  display: none;
}

/* Settings error message animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* iOS-style Settings Popover */
.settings-popover {
  width: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  background: #ffffff;
  position: fixed;
  z-index: 15000;
  opacity: 0;
  transform: scale(0.8) translateY(-10px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
}

.settings-popover.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}


/* Backdrop for settings popover */
.popover-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: none;
}

.popover-backdrop.show {
  opacity: 1;
}

.popover.settings-popover {
  z-index: 15000 !important;
}

/* Remove popover arrow - Framework7 adds this */
.settings-popover:before,
.settings-popover:after,
.popover-arrow,
.settings-popover .popover-arrow,
.popover .popover-arrow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  content: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Custom arrow for settings popover - removed */

.settings-popover .popover-inner {
  background: transparent;
  padding: 12px 0;
  border-radius: 12px;
  overflow: hidden;
}

.settings-popover .block,
.settings-popover .popover-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid #f0f0f0;
}

.settings-popover .block:last-child,
.settings-popover .popover-section:last-child {
  border-bottom: none;
}

.settings-popover .block:first-child,
.settings-popover .popover-section:first-child {
  padding-top: 0;
}

.settings-popover .block-title,
.settings-popover .section-title {
  padding: 12px 16px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.2;
}

.settings-popover .list {
  margin: 0;
  background: transparent;
}

.settings-popover .list ul,
.settings-popover .popover-list ul {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-popover .list ul li,
.settings-popover .popover-list ul li,
.settings-popover .popover-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
  list-style: none;
}

.settings-popover .list ul li:last-child,
.settings-popover .popover-list ul li:last-child,
.settings-popover .popover-item:last-child {
  border-bottom: none;
}

.settings-popover .list ul li + li,
.settings-popover .popover-list ul li + li {
  border-top: none;
}

/* Remove border below Font Size section */
.settings-popover .block:nth-child(2),
.settings-popover .popover-section:nth-child(2) {
  border-bottom: none;
}

.settings-popover .item-content {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  min-height: 24px;
  background: transparent;
}


.settings-popover .item-content.item-input {
  min-height: 28px;
}

.settings-popover .item-content:not(.item-input) {
  min-height: 24px;
}

.settings-popover .item-content.item-input {
  flex-direction: row;
  align-items: center;
  padding: 4px 16px !important;
}

.settings-popover .item-content.item-input .item-inner {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 24px;
  align-items: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.settings-popover .item-content.item-input .item-title {
  font-size: 17px;
  font-weight: 400;
  color: #333;
  line-height: 28px;
  margin-right: auto;
  padding-right: 12px;
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.settings-popover .item-title {
  flex: 1;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  letter-spacing: 0;
}

.settings-popover .item-title.item-label {
  flex: 1;
  font-size: 17px;
  font-weight: 400;
  color: #333;
}

.settings-popover .item-input-wrap {
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 36px;
  padding: 0;
}

.settings-popover .toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  position: relative;
}

.settings-popover .toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.settings-popover .toggle input {
  display: none;
}

/* Fix toggle vertical alignment - ensure it's centered with label */
.settings-popover .item-content.item-input {
  align-items: center !important;
}

.settings-popover .item-content.item-input .item-inner {
  align-items: center !important;
}

.settings-popover .item-after {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.settings-popover .favorites-icon,
.settings-popover .feedback-icon {
  width: 22px;
  height: 22px;
  color: #007aff;
  opacity: 0.8;
}

.settings-popover .item-content:not(.item-input) {
  padding-left: 16px;
  padding-right: 16px;
  min-height: 44px;
}

.settings-popover .item-content:not(.item-input) .item-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Override Framework7 defaults for proper horizontal layout */
.settings-popover .item-content.item-input {
  flex-direction: row !important;
  align-items: center !important;
  display: flex !important;
  padding: 4px 16px !important;
  min-height: 24px !important;
}

.settings-popover .item-content.item-input .item-inner {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
}

.settings-popover .item-content.item-input .item-title.item-label {
  font-size: 17px !important;
  line-height: 28px !important;
  margin-right: auto !important;
  padding-right: 12px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  width: auto !important;
  float: none !important;
}

.settings-popover .item-input-wrap {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  width: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
}

/* Prevent Framework7 from stacking items */
.settings-popover .item-content.item-input .item-inner > * {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* iOS Toggle Switch - Match prototype exactly (51px x 32px) */
.settings-popover .toggle {
  position: relative;
  width: 51px !important;
  height: 32px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  background: #e5e5e5 !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
  border: 1px solid #ccc !important;
}

.settings-popover .toggle-icon {
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  width: 28px !important;
  height: 28px !important;
  background: white !important;
  border-radius: 50% !important;
  transition: transform 0.3s !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #999 !important;
  display: block !important;
}

.settings-popover .toggle.checked {
  background: #34c759 !important;
}

.settings-popover .toggle input:checked + .toggle-icon {
  transform: translateX(19px) !important;
  background: white !important;
}

/* iOS Segmented Control - Match prototype exactly */
.settings-popover .segmented,
.settings-popover .segmented-strong {
  display: flex !important;
  background: #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 2px !important;
  width: 100% !important;
  margin: 0 !important;
}

.settings-popover .item-content .segmented {
  margin: 8px 0 !important;
}

.settings-popover .segmented-button,
.settings-popover .segmented .button {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #666 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  margin: 0 !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

.settings-popover .segmented-button:hover,
.settings-popover .segmented .button:hover {
  color: #333 !important;
}

.settings-popover .segmented-button.active,
.settings-popover .segmented .button.active,
.settings-popover .segmented .button.button-active {
  background: white !important;
  color: #007aff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.settings-popover .segmented-button:not(.active),
.settings-popover .segmented .button:not(.active):not(.button-active) {
  color: #666 !important;
}

.loading-spinner {
  text-align: center;
  padding: 40px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

/* Deity Shlokas List - Legacy Card Layout */
/* Recents section - dark background, horizontal margin so it doesn't hug edges */
#recents-section {
  background: rgba(30, 30, 30, 1);
  border-radius: 12px;
  margin: 16px 16px 0 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Desktop: recents section with side margins, doesn't hug edges */
@media (min-width: 768px) {
  #recents-section {
    margin-left: 24px;
    margin-right: 24px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }
  #recents-section .favorites-grid,
  #recents-section .deity_shlokas_list {
    width: 100%;
    max-width: 100%;
  }
}

#recents-section h2 {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 16px;
  padding-left: 0;
}

#recents-section .favorites-grid,
#recents-section .deity_shlokas_list {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.deity_shlokas_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Desktop: make recent items responsive like module cards */
@media (min-width: 768px) {
  .deity_shlokas_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  /* Shloka list view: top and side spacing so cards don’t hug search bar or edges */
  .page-content.deity-page > .deity_shlokas_list {
    margin-top: 16px;
    padding-left: 24px;
    padding-right: 24px;
  }
  #favorites-content {
    margin-top: 16px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  .deity_shlokas_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .deity_shlokas_list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Related Shlokas List - Reduced left padding to align with heading */
.related-shlokas-section .deity_shlokas_list.related-shlokas-list {
  padding-left: 0 !important;
  padding-right: 24px !important;
  margin-top: 0 !important;
}

/* Override mobile media query for related shlokas */
@media (max-width: 640px) {
  .related-shlokas-section .deity_shlokas_list.related-shlokas-list {
    padding-left: 0 !important;
    padding-right: 16px !important;
  }
}

.deity_shloka_card {
  display: flex;
  gap: 0; /* No gap between image and text */
  padding: 0; /* No padding - image flush with edge */
  background: transparent; /* No background - info area has color */
  border-radius: 12px; /* Rounded corners matching screenshot */
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: none;
  align-items: stretch; /* Stretch both sides to same height */
  overflow: hidden; /* Ensure image respects border-radius */
  height: 80px; /* Fixed height to match image */
  text-decoration: none; /* No underline on related shloka titles */
}

.deity_shloka_card:hover {
  transform: translateX(4px);
}

.deity_shloka_image_container {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden; /* Clip to container for border-radius */
  border-radius: 12px 0 0 12px; /* Rounded left corners only - matching screenshot */
  position: relative;
}

.deity_shloka_image {
  width: 80px;
  height: 80px;
  object-fit: cover; /* Cover container completely */
  border-radius: 12px 0 0 12px; /* Rounded left corners to match container */
  display: block;
  margin: 0;
  padding: 0;
}

.deity_shloka_info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  gap: 4px;
  border-radius: 0 12px 12px 0; /* Rounded right corners only - matching screenshot */
  height: 80px; /* Same height as image container */
  box-sizing: border-box;
}

.deity_shloka_title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
}

/* Dark grey background for deity-page */
.page-content.deity-page {
  background: rgba(30, 30, 30, 1) !important; /* Darker grey background */
  min-height: calc(100vh - 80px); /* Fill remaining viewport height */
  padding-bottom: 80px; /* Space for audio player if it appears */
}

/* Ensure body background is also dark for deity pages (fallback if :has() not supported) */
body:has(.page.deity-page) {
  background: rgba(30, 30, 30, 1);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .deity_shlokas_list {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 16px;
  }
  
  .deity_shloka_card {
    padding: 0; /* No padding - image flush with edge */
    gap: 0; /* No gap between image and text */
    height: 60px; /* Fixed height to match image on mobile */
  }
  
  .deity_shloka_image_container {
    width: 60px;
    height: 60px;
    border-radius: 10px 0 0 10px; /* Rounded left corners on mobile */
  }
  
  .deity_shloka_image {
    width: 60px;
    height: 60px;
    border-radius: 10px 0 0 10px; /* Rounded left corners on mobile */
  }
  
  .deity_shloka_info {
    padding: 12px;
    height: 60px; /* Same height as image container on mobile */
    border-radius: 0 10px 10px 0; /* Rounded right corners on mobile */
    box-sizing: border-box;
  }
  
  .deity_shloka_title {
    font-size: 16px;
  }
}

/* =========================================================
   COMMENTARY STYLING
   ========================================================= */
/* White background for commentaries section */
.commentary_wrapper {
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  padding: 16px 16px 16px 16px;
  background: white;
}

.commentary_header {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Chinmaya Capsules (YouTube): responsive video */
.capsule-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 16px;
}

.capsule-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.commentary_item {
  padding-top: 8px;
  margin-bottom: 16px;
}

.comm_author {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 20px;
}

.commentary_item .meta {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.commentary_item .text {
  white-space: normal;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.5;
}

.commentary_item .text p {
  margin: 0 0 .75em;
}

/* collapsed read more */
.commentary_item .text.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 11;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.commentary_item .text.collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card));
}

.readmore {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

/* Description collapsed (Shloka/Text) */
.description-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

/* Description expanded: ensure full content visible when class removed */
#description-text:not(.description-collapsed) {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Commentary section title styling */
.commentary_section_title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--fg);
}

/* Search/help overlay layout (moved from inline styles in index.html) */
#search-overlay-loading,
#help-overlay-loading {
  padding: 20px;
  text-align: center;
}

#search-overlay-results {
  margin-top: 0;
}

/* ========== Chapter/explain detail (multi-verse) ========== */
.detail-page-title--chapter {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #1d1d1f;
  margin: 0;
  padding: 16px 0 12px 0;
  line-height: 1.3;
}

.chapter-summary-section {
  margin-bottom: 32px;
}

.chapter-summary-title {
  margin: 24px 0 18px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #222;
}

.chapter-summary-section .topic_html,
.chapter-summary-full {
  color: #222;
  line-height: 1.8;
  font-size: 16px;
}

.chapter-summary-section .topic_html {
  margin-bottom: 16px;
}

.read-more-btn--orange {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #ff8d26;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chapter-verses-section {
  margin-top: 24px;
}

.verse-item {
  margin-bottom: 24px;
}

.chapter-verses-section .detail-section {
  margin-bottom: 16px;
}

.chapter-verses-section .detail-text {
  color: #222;
  line-height: 1.8;
}

.verse-separator {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #D4AF37;
}

/* Gita title bar nav pills */
.gita-nav-pills {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

.gita-nav-pill--prev {
  order: 1;
  min-width: 32px;
  text-align: center;
}

.gita-nav-pill--next {
  order: 2;
  min-width: 32px;
  text-align: center;
}

/* Detail description (Shloka/Text) */
.detail-section[data-field="description"] {
  margin: 0 0 20px 0;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .detail-section[data-field="description"] {
    width: calc(100% - 24px);
  }
}

.detail-description-box {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 16px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.detail-description-title {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.detail-description-text {
  white-space: normal;
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 1.6; /* match .detail-text for readable description body */
}

.read-more-btn-inline {
  color: #007aff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin: 6px 0 0 0;
  font-weight: bold;
  text-align: left;
  display: inline-block;
}

/* Related verses / related shlokas — same dark background for both */
.related-verses-section {
  margin-top: 32px;
  padding: 16px;
  background: rgba(30, 30, 30, 1);
  border-radius: 12px;
}

.related-verses-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}

.related-verses-section .inline-pill {
  background: rgba(255, 255, 255, 0.9);
  color: #222;
}

.related-verses-section .inline-pill:hover {
  color: #222;
  background: #fff;
}

.related-verses-section .related-topics-label {
  color: #ccc;
}

.related-verses-section .nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.nav-pill--chapter { order: 0; }
.nav-pill--prev { order: 1; }
.nav-pill--next { order: 2; }

.related-verses-section .related-topics-label {
  margin-bottom: 8px;
  font-size: 14px;
}

.related-verses-section .related-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.related-shlokas-section {
  margin-top: 32px;
  padding: 16px;
  background: rgba(30, 30, 30, 1);
  border-radius: 12px;
}

.related-shlokas-title {
  margin-bottom: 16px;
  color: #fff;
  padding-left: 0;
}

.related-shlokas-section .related-shlokas-list .related-shloka-link {
  display: block;
  color: #e0e0e0;
  padding: 8px 0;
  text-decoration: none;
}

.related-shlokas-section .related-shlokas-list .related-shloka-link:hover {
  color: #fff;
}

/* Simple feedback dialog */
#simple-feedback-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#simple-feedback-dialog .feedback-inner {
  background: #f2f2f7;
  border-radius: 16px;
  padding: 0;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: feedbackSlideUp 0.3s ease-out;
  overflow: hidden;
}

#simple-feedback-dialog .feedback-header {
  background: white;
  padding: 20px 20px 16px 20px;
  border-bottom: 1px solid #e5e5ea;
}

#simple-feedback-dialog .feedback-title {
  font-size: 17px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

#simple-feedback-dialog .feedback-subtitle {
  font-size: 13px;
  color: #3c3c43;
  line-height: 1.4;
}

#simple-feedback-dialog .feedback-stars-wrap {
  background: white;
  padding: 20px;
  border-bottom: 1px solid #e5e5ea;
}

#simple-feedback-dialog .feedback-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
}

#simple-feedback-dialog .star {
  font-size: 32px;
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.15s;
  user-select: none;
  color: #ffd700;
}

#simple-feedback-dialog .feedback-text-wrap {
  background: #f2f2f7;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5ea;
}

#simple-feedback-dialog #feedback-text {
  width: 100%;
  height: 80px;
  padding: 12px;
  border: none;
  border-radius: 0;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  box-sizing: border-box;
  outline: none;
  background: #f2f2f7;
  transition: all 0.15s;
}

#simple-feedback-dialog #feedback-text:focus {
  background: white;
}

#simple-feedback-dialog .feedback-char-count {
  text-align: right;
  margin-top: 6px;
  font-size: 12px;
  color: #8e8e93;
}

#simple-feedback-dialog .feedback-actions {
  background: #f2f2f7;
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
}

#simple-feedback-dialog #feedback-submit {
  padding: 8px 20px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  opacity: 0.3;
  transition: all 0.15s;
  min-width: 80px;
}

@keyframes feedbackSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}