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

/* Paper-toned shell behind parchment detail pages (prototype / compositor gap fallback). */
:root {
  --parchment-fallback: #e8e0d5;
}

/* 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 results: no marker box — match text is slightly darker than surrounding (detail pages unchanged) */
.search-result-title .search-highlight {
  background: none !important;
  color: #2e2e32 !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.search-result-preview .search-highlight {
  background: none !important;
  color: #5c5c62 !important;
  font-weight: 500 !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,
#detail-content tb_title,
#detail-content vt {
  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;
}

/* Auto chapter / section boundary (multi-verse texts with metadata); chips match floating TOC terracotta */
.verse-section .verse-struct-boundary {
  margin: 16px 0 12px;
}

.verse-section .verse-struct-boundary__hr {
  border: none;
  border-top: 1px solid rgba(181, 115, 57, 0.35);
  margin: 0 0 12px;
}

.verse-section .verse-struct-boundary__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.verse-section .verse-struct-chip {
  margin: 0;
  border: none;
  background: #b57339;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.verse-section .verse-struct-chip:hover {
  background: #9f632f;
  color: #fff;
}

.verse-section .verse-struct-chip:active {
  background: #8c5829;
  color: #fff;
}

.verse-section .verse-struct-boundary__dash {
  color: #b57339;
  font-weight: 700;
  font-size: 15px;
  user-select: none;
  opacity: 0.85;
}

/* Floating TOC tab (same criteria as Reading → TOC: e.g. 20+ shloka verses, 5+ text/gita).
   ~25vh from bottom for right-thumb reach; rises when sticky audio bar is visible. */
.floating-toc-tab {
  position: fixed;
  right: 0;
  top: auto;
  transform: none;
  z-index: 12000;
  margin: 0;
  padding: 16px 10px 16px 12px;
  padding-right: max(10px, calc(10px + env(safe-area-inset-right, 0px)));
  border: none;
  border-radius: 14px 0 0 14px;
  background: #b57339;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
  box-shadow: -2px 4px 16px rgba(0, 0, 0, 0.14);
  -webkit-appearance: none;
  appearance: none;
  bottom: max(25vh, calc(12px + env(safe-area-inset-bottom, 0px)));
}

body:has(#audio-player.show) .floating-toc-tab {
  bottom: max(25vh, calc(92px + 16px + env(safe-area-inset-bottom, 0px)));
}

.floating-toc-tab:hover {
  background: #9f632f;
  color: #fff;
}

.floating-toc-tab:active {
  background: #8c5829;
  color: #fff;
}

.floating-toc-tab--hidden,
.floating-toc-tab[hidden] {
  display: none !important;
}

.floating-toc-tab__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
}

.floating-toc-tab__letter {
  display: block;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
}

@media (prefers-color-scheme: dark) {
  .verse-section .verse-struct-boundary__hr {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .verse-section .verse-struct-chip {
    background: #b57339;
    color: #fff;
  }

  .verse-section .verse-struct-chip:hover {
    background: #c9834a;
    color: #fff;
  }

  .verse-section .verse-struct-chip:active {
    background: #9f632f;
    color: #fff;
  }

  .verse-section .verse-struct-boundary__dash {
    color: #d4a574;
  }

  .floating-toc-tab {
    background: #b57339;
    color: #fff;
    box-shadow: -2px 4px 20px rgba(0, 0, 0, 0.35);
  }

  .floating-toc-tab:hover {
    background: #c9834a;
    color: #fff;
  }

  .floating-toc-tab:active {
    background: #9f632f;
    color: #fff;
  }
}

/* Prevent horizontal shift bug: no overflow, no stuck transform (refresh doesn't clear compositor glitch) */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* 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%;
}

/* Parchment detail: warm shell (deity / other layouts keep rules below). */
html:has(.page.detail-page):not(:has(.page.deity-page)),
body:has(.page.detail-page):not(:has(.page.deity-page)) {
  background-color: var(--parchment-fallback);
}

#app {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll; can fix "stuck" scroll on chapter-nav */
  overscroll-behavior-x: none;
  background: #f5f5f7;
  position: relative;
}

#app:has(.page.detail-page):not(:has(.page.deity-page)) {
  background: var(--parchment-fallback);
}

/*
 * Detail dock (gowiththis-style): one scrollport (#detail-page-content), audio as in-flow footer.
 * SPA: #app > .page.detail-page + #audio-player. Static/featured: .detail-dock-shell > .view + #audio-player.
 */
#app:has(> .page.detail-page):not(:has(.page.deity-page)) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#app:has(> .page.detail-page):not(:has(.page.deity-page)) > .page.detail-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#app:has(> .page.detail-page):not(:has(.page.deity-page)) #detail-page-content.page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
}

#app:has(> .page.detail-page):not(:has(.page.deity-page)) > #audio-player.audio-player-sticky {
  flex-shrink: 0;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  transform: none;
}

html:has(body > .detail-dock-shell) {
  height: 100%;
  overflow: hidden;
}

body:has(> .detail-dock-shell) {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.detail-dock-shell:not(:has(.page.deity-page)) {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.detail-dock-shell:not(:has(.page.deity-page)) > .view.view-main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-dock-shell:not(:has(.page.deity-page)) .page.detail-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-dock-shell:not(:has(.page.deity-page)) #detail-page-content.page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
}

.detail-dock-shell:not(:has(.page.deity-page)) > #audio-player.audio-player-sticky {
  flex-shrink: 0;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  transform: none;
}

/*
 * Installed PWA only (Chrome WebAPK / iOS home screen): the in-flow flex footer for #audio-player
 * often never paints until user interaction — nudges did not fix. Pin the bar to the viewport
 * like the legacy fixed player; keep reading area padding so text stays above the bar.
 */
@media (display-mode: standalone) {
  .detail-dock-shell:not(:has(.page.deity-page)) > #audio-player.audio-player-sticky.show {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 10050 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  #app:has(> .page.detail-page):not(:has(.page.deity-page)) > #audio-player.audio-player-sticky.show {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 10050 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .detail-dock-shell:not(:has(.page.deity-page)) .page-content.has-audio,
  #app:has(> .page.detail-page):not(:has(.page.deity-page)) .page-content.has-audio {
    padding-bottom: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* In-flow dock: no extra page bottom pad for a fixed bar */
#app:has(> .page.detail-page):not(:has(.page.deity-page)) .page-content.has-audio,
.detail-dock-shell:not(:has(.page.deity-page)) .page-content.has-audio {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

html.audio-player-vv-tall
  #app:has(> .page.detail-page):not(:has(.page.deity-page))
  .page-content.has-audio,
html.audio-player-vv-tall .detail-dock-shell:not(:has(.page.deity-page)) .page-content.has-audio {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

/* 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('/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('/backParchment-d.jpg');
  }
}

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

.page-content {
  background-repeat: no-repeat;
  background-attachment: scroll; /* fixed can cause content-layer shift that persists until tab close */
  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 {
  display: block;
  max-width: 100%;
  max-height: min(55vh, 400px);
  width: auto;
  height: auto;
  margin: 0 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 breadcrumb bar (below title bar; no gap) */
.gita-title-bar:has(+ .detail-breadcrumb) {
  margin-bottom: 0;
}
.detail-breadcrumb {
  margin: 0 -16px 0 -16px;
}
.detail-breadcrumb__inner {
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  margin-bottom: 0.75rem;
}
.detail-breadcrumb__text {
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
  letter-spacing: 0.015em;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
.detail-breadcrumb__link {
  color: #4b5563;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.detail-breadcrumb__link:hover {
  color: #c16e24;
}
.detail-breadcrumb__sep {
  color: #c16e24;
  margin: 0 0.375rem;
  pointer-events: none;
}
.detail-breadcrumb__current {
  color: #1f2937;
  font-weight: 700;
}

/* Explore pages (hub, chapters, topics, keywords): breadcrumb as first child of #explore-content */
/* Same transparent bar look: ensure parent has parchment so bar isn’t on gray */
#explore-content.page-content:has(> .detail-breadcrumb):has(> .page-content.browse-parchment) {
  background-image: url('/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: rgba(255, 255, 255, 0.0);
  background-blend-mode: lighten;
}
@media (min-width: 768px) {
  #explore-content.page-content:has(> .detail-breadcrumb):has(> .page-content.browse-parchment) {
    background-image: url('/backParchment-d.jpg');
  }
}
/* Compact bar and no gap below so cards aren’t pushed down */
#explore-content > .detail-breadcrumb {
  margin-bottom: 0;
}
#explore-content > .detail-breadcrumb .detail-breadcrumb__inner {
  padding: 0.35rem 1.5rem;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Less top padding on content when it follows the breadcrumb */
.detail-breadcrumb + .page-content.browse-parchment .gita-hub-grid,
.detail-breadcrumb + .page-content.browse-parchment .browse-grid,
.detail-breadcrumb + .page-content.browse-parchment .keywords-grid {
  padding-top: 8px;
}
/* App (hash routing): breadcrumb inside .page-content.browse-parchment — same compact bar */
.page-content.browse-parchment > .detail-breadcrumb {
  margin-bottom: 0;
}
.page-content.browse-parchment > .detail-breadcrumb .detail-breadcrumb__inner {
  padding: 0.35rem 1.5rem;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.page-content.browse-parchment > .detail-breadcrumb ~ .browse-grid,
.page-content.browse-parchment > .detail-breadcrumb ~ .keywords-grid {
  padding-top: 8px;
}

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

.gita-title-bar--centered {
  justify-content: center;
  padding: 12px 16px;
}

/* Visually hidden but available to crawlers and screen readers (H1 full title for Gita) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.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 only: show deity image on the right (stacked on phones/tablets so description stays readable) */
@media (min-width: 1100px) and (min-height: 480px) {
  .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%;
    max-height: none;
    width: 100%;
    margin: 0;
    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: #c8c8cd !important;
  font-weight: 400 !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 — visible ? inside the field (arrow in placeholder points here) */
.navbar-help-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(66, 85, 97, 0.1) !important;
  border: 1px solid rgba(66, 85, 97, 0.22) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  color: #425561 !important;
  opacity: 1 !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.navbar-help-btn:hover {
  background: rgba(66, 85, 97, 0.16) !important;
  border-color: rgba(66, 85, 97, 0.35) !important;
}

.navbar-help-btn:active {
  transform: translateY(-50%) scale(0.96) !important;
}

.navbar-help-btn svg {
  width: 22px !important;
  height: 22px !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('/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  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('/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('/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  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('/backParchment-d.jpg');
  }
}

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

/* Chapter summary page - fixed parchment (content scrolls over it, same as detail/chapter-nav) */
.page:has(.chapter-summaries-page) {
  position: relative;
  background: transparent;
}
/* iOS: fixed inset:0 can leave a strip above home indicator; body default #f5f5f7 reads as white */
html:has(.chapter-summaries-page),
body:has(.chapter-summaries-page) {
  background-color: var(--parchment-fallback);
  min-height: 100vh;
  min-height: 100dvh;
}
.view:has(.chapter-summaries-page) {
  background-color: var(--parchment-fallback);
}
/* Same as .page.detail-page::before: transparent fill under image — solid + lighten here washes the parchment */
.page:has(.chapter-summaries-page)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Extend below layout viewport so safe-area / dynamic toolbar gaps stay parchment */
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  z-index: 0;
  pointer-events: none;
  background-image: url('/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-blend-mode: lighten;
}
.page:has(.chapter-summaries-page) .navbar {
  z-index: 1;
}
.page:has(.chapter-summaries-page) .page-content {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
.page:has(.chapter-summaries-page) .chapter-summaries-page {
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .page:has(.chapter-summaries-page)::before {
    background-image: url('/backParchment-d.jpg');
  }
}

/* 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: 0 16px 16px 16px;
}
@media (min-width: 768px) {
  .static-explore #deity-list-wrap {
    padding: 0 24px 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;
  }
}

@media (min-width: 768px) {
  .popular-deities-wrap { padding: 0; }
  .popular-deities-title {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

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

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

/* What's new page: parchment via .page-content.browse-parchment; title + dated pills (About-style) */
.whats-new-content {
  padding: 16px 16px 36px;
  max-width: 640px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: #3d3525;
}
.whats-new-title-card.about-page {
  width: 100%;
  max-width: 100%;
  margin: 0 0 22px;
  box-sizing: border-box;
  padding: clamp(14px, 3.5vw, 20px) clamp(18px, 4vw, 28px);
  text-align: center;
  background: linear-gradient(180deg, #fdf5e0 0%, #faf0d6 50%, #f5e9cc 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 14px 42px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(50, 66, 85, 0.05);
}
.whats-new-title-card.about-page h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #2d2520;
}
.whats-new-cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.whats-new-dated-wrap {
  position: relative;
}
.whats-new-date-pill-stack {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: -18px;
  position: relative;
  z-index: 6;
}
.whats-new-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  margin: 0;
  border-radius: 999px;
  background: #f5efdb;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #3d3525;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: calc(100% - 24px);
}
.whats-new-date-pill span {
  font-weight: 600;
  color: #324255;
  line-height: 1.3;
}
.whats-new-content .whats-new-card {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding: clamp(30px, 6vw, 40px) clamp(18px, 4vw, 36px) clamp(22px, 5vw, 36px);
  background: #fff;
  border-radius: 28px 28px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 14px 42px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(50, 66, 85, 0.05);
}
.whats-new-content .whats-new-card > p:first-child {
  margin-top: 0;
}
.whats-new-content h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  color: #2d2520;
}
.whats-new-content h2 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.5rem;
  color: #2d2520;
}
.whats-new-content p {
  margin: 0 0 0.75rem;
}
.whats-new-content ul {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.25rem;
}
.whats-new-content hr {
  border: none;
  border-top: 1px solid #e0d8c8;
  margin: 1.25rem 0;
}
.whats-new-content a {
  color: #1a5fb4;
  text-decoration: underline;
}
.whats-new-content a:hover {
  color: #15539e;
}
.whats-new-content img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0.75rem 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
  .whats-new-content img {
    max-width: min(500px, 100%);
  }
}
.whats-new-content video {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
  .whats-new-content video {
    max-width: min(560px, 100%);
  }
}

/* About page (info/about.html): mockup — logo, pill language, cream card; copy from data/about_intro_all.txt */
.about-mockup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
  text-align: center;
}
.about-logo-mark {
  display: block;
  width: auto;
  height: auto;
  max-height: 72px;
  max-width: min(88px, 22vw);
  object-fit: contain;
}
.about-brand-img {
  display: block;
  max-width: min(320px, 88vw);
  width: auto;
  height: auto;
}
.about-lang-stack {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: -18px;
  position: relative;
  z-index: 6;
}
.about-lang-custom {
  position: relative;
  display: inline-block;
}
.about-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 22px 12px 24px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: #f5efdb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.about-lang-pill:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
}
.about-lang-pill:active {
  transform: scale(0.99);
}
.about-lang-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(181, 115, 57, 0.35), 0 4px 20px rgba(0, 0, 0, 0.08);
}
.about-lang-pill-prefix {
  font-size: 14px;
  font-weight: 700;
  color: #5c574c;
}
.about-lang-pill-value {
  font-size: 15px;
  font-weight: 500;
  color: #324255;
}
.about-lang-pill-chevron {
  display: flex;
  color: #6e6858;
  opacity: 0.9;
  transition: transform 0.22s ease;
}
.about-lang-custom.about-lang-custom--open .about-lang-pill-chevron {
  transform: rotate(180deg);
}
.about-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px;
  list-style: none;
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06);
  z-index: 25;
  /* width set in JS to match .about-lang-pill outer width */
}
.about-lang-menu[hidden] {
  display: none !important;
}
.about-lang-option {
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #324255;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background 0.15s ease, color 0.15s ease;
}
.about-lang-option:hover {
  background: rgba(177, 108, 52, 0.12);
}
.about-lang-option.is-selected,
.about-lang-option[aria-selected="true"] {
  background: #b16c34;
  color: #fff;
}
.about-lang-option:focus {
  outline: none;
}
.about-lang-option:focus-visible {
  box-shadow: 0 0 0 2px rgba(181, 115, 57, 0.45);
}
.about-content-card.about-page.about-intro-card {
  width: 100%;
  max-width: 100%;
  margin: 0 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding: clamp(44px, 9vw, 56px) clamp(20px, 4.5vw, 40px) clamp(28px, 5vw, 44px);
  background: linear-gradient(180deg, #fdf5e0 0%, #faf0d6 50%, #f5e9cc 100%);
  border-radius: 40px 40px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(50, 66, 85, 0.05);
}
.about-page .about-i18n-panel {
  margin: 0;
}
.about-page .about-i18n-panel[hidden] {
  display: none !important;
}
.about-page .about-i18n-panel p {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #324255;
}
.about-page .about-i18n-panel p:last-child {
  margin-bottom: 0;
}
.about-page .about-i18n-panel[data-lang="en"],
.about-page .about-i18n-panel[data-lang="es"],
.about-page .about-i18n-panel[data-lang="de"],
.about-page .about-i18n-panel[data-lang="fr"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.about-page .about-i18n-panel[data-lang="hi"],
.about-page .about-i18n-panel[data-lang="mr"] {
  font-family: 'Noto Sans Devanagari', 'Tiro Devanagari Sanskrit', serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
.about-page .about-i18n-panel[data-lang="ta"] {
  font-family: 'Noto Sans Tamil', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
.about-page .about-i18n-panel[data-lang="te"] {
  font-family: 'Noto Sans Telugu', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
.about-page .about-i18n-panel[data-lang="bn"] {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
.about-page .about-i18n-panel[data-lang="gu"] {
  font-family: 'Noto Sans Gujarati', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
.about-page .about-i18n-panel[data-lang="ml"] {
  font-family: 'Noto Sans Malayalam', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
/* Must beat .about-page .about-i18n-panel p (same 2 classes + p wins over 2 classes alone) */
.about-page .about-i18n-panel p.about-translation-disclaimer {
  margin-top: 1.35rem;
  margin-bottom: 0 !important;
  padding-top: 0.85rem;
  border-top: 1px solid #d4af37;
  font-size: 0.7rem;
  line-height: 1.45;
  color: rgba(50, 66, 85, 0.72);
}
.about-page .about-i18n-panel p.about-translation-disclaimer em {
  font-style: normal;
}

/* Home: About / Language / Book / Updates — one row; width matches .module-grid below */
.home-quick-nav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px 14px;
  margin: 20px auto 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (min-width: 768px) {
  .home-quick-nav {
    max-width: 480px;
    padding: 8px 18px 16px;
    margin-top: 28px;
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  .home-quick-nav {
    max-width: 720px;
  }
}
@media (min-width: 1280px) {
  .home-quick-nav {
    max-width: 960px;
  }
}
.home-quick-nav__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 6px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(224, 216, 200, 0.85);
  background: rgba(255, 252, 245, 0.72);
  color: #3d3525;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  -webkit-appearance: none;
  appearance: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.home-quick-nav__btn:hover {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.home-quick-nav__btn:active {
  transform: scale(0.98);
}
.home-quick-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.92;
}
.home-quick-nav__label {
  text-align: center;
  word-break: break-word;
}
@media (min-width: 400px) {
  .home-quick-nav__btn {
    font-size: 13px;
    padding: 12px 8px;
  }
}

/* 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;
  /* Was 3/4 (tall portrait); square-ish cards leave more room for quick nav + recents */
  aspect-ratio: 1 / 1;
  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: 10px 12px;
  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('/assets/explore-hub/unified/Thumb_Gita.jpg');
}

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

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

.module-card.favorites .module-card-image {
  background-image: url('/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 */
}

/* Chapters page heading - sits at top below navbar, fills the gap */
.gita-chapters-heading {
  margin: -6px 0 12px 0;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-transform: uppercase;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Chapter cards - 1 column on mobile only, 3 columns on desktop, even spacing */
.browse-grid:has(.chapter-card) {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* 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: 1fr; /* Keep 1 column on tablet; 2 cols only on desktop */
    gap: 14px;
  }
  
  .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 - 3 columns on desktop (768px+), even spacing */
  .browse-grid:has(.chapter-card) {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* 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 - match design: off-white card (white on hover), slate badge, bold title, grey subtitle, chevron */
.browse-grid .chapter-card.chapter-card-new {
  display: flex;
  align-items: center;
  padding: 16px 14px 16px 20px;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: visible !important;
  background: #F5F3EF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 12px;
  min-height: 80px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.browse-grid .chapter-card.chapter-card-new:hover {
  background: #FFFFFF !important;
}

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

.browse-grid .chapter-card.chapter-card-new .chapter-card-badge {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #3C444F;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -2px;
}

.browse-grid .chapter-card.chapter-card-new .chapter-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.browse-grid .chapter-card.chapter-card-new .chapter-card-title {
  font-weight: 700;
  font-size: 16px;
  color: #2A2A2A;
  line-height: 1.3;
}

.browse-grid .chapter-card.chapter-card-new .chapter-card-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: #757575;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.3;
}

.browse-grid .chapter-card.chapter-card-new .chapter-card-chevron {
  flex-shrink: 0;
  font-size: 20px;
  color: #BDBDBD;
  font-weight: 300;
}

/* Legacy chapter card styles (if any non-new cards remain) */
.browse-grid .chapter-card:not(.chapter-card-new) {
  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);
}

.browse-grid .chapter-card .card-header,
.browse-grid .chapter-card .card-content,
.browse-grid .chapter-card .card-footer {
  border: none !important;
}

/* Chapter Nav: wrapper inside .page-content (explore template). Same parchment and layout as before. */
.page:has(.page-content > .chapter-nav-content) .navbar {
  z-index: 1;
}
.page-content > .chapter-nav-content {
  position: relative;
  z-index: 1;
  padding: 0 20px 28px;
  background: transparent !important;
  overflow-x: hidden;
}
.page-content > .chapter-nav-content::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/backparchment-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F8F3ED;
}
@media (min-width: 768px) {
  .page-content > .chapter-nav-content::before {
    background-image: url('/backParchment-d.jpg');
  }
}
.page-content > .chapter-nav-content > * {
  position: relative;
  z-index: 1;
}

/* Book page (info/book.html): chapter-nav parchment + parchment-card surfaces */
.book-showcase-inner {
  max-width: 28rem;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 8px;
}
.book-showcase-hero-row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}
.book-showcase-hero-row > .book-showcase-card {
  margin-bottom: 0;
}
.book-showcase-cover-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 20px 24px 22px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 16px;
  background: #f5f2ea;
  border: 1px solid rgba(224, 212, 192, 0.85);
  box-shadow: 0 4px 20px rgba(31, 38, 135, 0.06);
}
.book-showcase-cover {
  display: block;
  max-width: min(280px, 88vw);
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.book-showcase-card {
  border-radius: 16px;
  padding: 28px 22px 24px;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.book-showcase-card.parchment-card {
  background: rgba(252, 249, 242, 0.94);
  border-color: #e0d4c0;
  box-shadow: 0 6px 24px rgba(31, 38, 135, 0.08);
}
.book-showcase-card--secondary {
  padding: 18px 18px 20px;
}
.book-showcase-occasions-title {
  display: block;
  margin: 0 0 14px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2d2520;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.book-showcase-kicker {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  color: #c9956e;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.book-showcase-title {
  margin: 0 0 18px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: #2d2520;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.book-showcase-lead,
.book-showcase-body {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #3d3525;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.book-showcase-features {
  margin: 18px 0 18px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: rgba(255, 244, 238, 0.72);
  border: 1px solid rgba(212, 175, 120, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.book-showcase-features-heading {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #1f1f1f;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.book-showcase-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.65;
  color: #2d2520;
}
.book-showcase-list li {
  position: relative;
  padding-left: 1.15em;
  margin-bottom: 4px;
}
.book-showcase-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: #e07020;
  border-radius: 1px;
}
.book-showcase-list-sub {
  margin: 6px 0 2px;
  padding: 0 0 0 1.1rem;
  list-style: none;
}
.book-showcase-footnote {
  margin: 16px 0 28px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a4338;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.book-showcase-purchase-title {
  margin-top: 0;
  margin-bottom: 18px;
}
.book-showcase-h2 {
  margin: 0 0 14px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d2520;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.book-showcase-h3 {
  margin: 22px 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d2520;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.book-showcase-buy-label {
  margin: 14px 0 8px;
  font-size: 0.92rem;
  color: #3d3525;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.book-showcase-buy-label:first-child {
  margin-top: 0;
}
.book-showcase-buy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.book-showcase-link-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #b36b2d;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 3px 12px rgba(179, 107, 45, 0.35);
  transition: background 0.2s, transform 0.15s;
}
.book-showcase-link-btn:hover {
  background: #9d5e28;
  color: #fff;
}
.book-showcase-link-btn:active {
  transform: scale(0.98);
}
.book-showcase-toc {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #3d3525;
  font-family: Georgia, 'Times New Roman', Times, serif;
  column-gap: 1.5rem;
}
.book-showcase-toc li {
  margin-bottom: 4px;
  break-inside: avoid;
}
@media (min-width: 560px) {
  .book-showcase-toc {
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .book-showcase-inner {
    max-width: 32rem;
  }
  .book-showcase-cover {
    max-width: min(320px, 85vw);
  }
}
@media (min-width: 960px) {
  .book-showcase-inner {
    max-width: 56rem;
  }
  .book-showcase-hero-row {
    flex-direction: row;
    align-items: stretch;
  }
  .book-showcase-hero-row > .book-showcase-card {
    flex: 1 1 0;
    min-width: 0;
  }
}

.chapter-nav-header {
  background: #394047 !important;
  color: #fff !important;
  text-align: center;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 600;
  margin: 0 -20px 20px -20px;
  border-radius: 0;
}
.chapter-nav-header:has(+ .detail-breadcrumb) {
  margin-bottom: 0;
}
/* Card surface: layout (sizing, centering) */
.chapter-nav-card-surface {
  border-radius: 16px;
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
}
/* Parchment card: 30% transparent so parchment shows through */
.parchment-card {
  background: rgba(220, 206, 158, 0.7);
  border: 1px solid #DFC89D;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
.chapter-nav-read-surface {
  margin-top: 8px;
  margin-bottom: 24px;
}
.chapter-nav-read-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}
.chapter-nav-summary-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-color: #3B444C !important;
  border-radius: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.chapter-nav-read-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-color: #3B444C !important;
  border-radius: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.253v13m0-13C10.832 5.818 9.246 5 7.5 5S4.168 5.818 3 6.253v13C4.168 18.818 5.754 18 7.5 18s3.332.818 4.5 1.253m0-13C13.168 5.818 14.754 5 16.5 5c1.747 0 3.332.818 4.5 1.253v13C19.832 18.818 18.247 18 16.5 18c-1.746 0-3.332.818-4.5 1.253z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.chapter-nav-read-body { flex: 1; min-width: 0; }
.chapter-nav-read-title { font-size: 17px; font-weight: 600; color: #303030 !important; }
.chapter-nav-read-desc { font-size: 13px; color: #666666 !important; margin-top: 2px; font-style: italic; }
.chapter-nav-read-chevron { font-size: 20px; color: #AAAAAA !important; }
.chapter-nav-verse-section { margin-top: 28px; }
.chapter-nav-verse-card {
  padding: 18px;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
}
.chapter-nav-verse-heading {
  font-size: 17px;
  font-weight: 600;
  color: #303030 !important;
  margin-bottom: 12px;
  text-align: left;
}
/* Verse grid: centered; more columns when there is room (including mobile) */
.chapter-nav-verse-grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 10px;
  justify-content: center;
}
@media (min-width: 400px) {
  .chapter-nav-verse-grid {
    grid-template-columns: repeat(7, 38px);
    gap: 8px;
  }
}
@media (min-width: 520px) {
  .chapter-nav-verse-grid {
    grid-template-columns: repeat(7, 38px);
    gap: 8px;
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .chapter-nav-verse-grid {
    grid-template-columns: repeat(10, 36px);
    gap: 8px;
    justify-content: center;
  }
}
/* Verse tile: design-tool spec */
.chapter-nav-verse-tile,
.verse-tile {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #B67134 !important;
  background: #F4F0DC !important;
  background-color: #F4F0DC !important;
  border: 1.5px solid #C9AB82 !important;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
@media (min-width: 400px) and (max-width: 767px) {
  .chapter-nav-verse-tile,
  .verse-tile {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
    font-size: 13px;
  }
}
@media (min-width: 768px) {
  .chapter-nav-verse-tile,
  .verse-tile {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    font-size: 13px;
    border-radius: 6px;
  }
}
.chapter-nav-verse-tile:hover,
.chapter-nav-verse-tile:focus,
.verse-tile:hover,
.verse-tile:focus {
  background: #B67134 !important;
  background-color: #B67134 !important;
  color: white !important;
  border-color: #B67134 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(182, 113, 52, 0.25);
}

/* 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;
}

/* Popular deities section (above the full alphabetical grid) */
.popular-deities-wrap {
  margin: 0 0 14px 0;
  padding: 0;
}
.popular-deities-wrap--all {
  margin: 0 0 10px 0;
  padding-top: 6px;
}
.popular-deities-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 2px 0 10px;
  /* Some mobile WebViews were ignoring padding here; force alignment with grid */
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.popular-deities-title--all {
  margin: 0;
}
.popular-deities-grid { margin-bottom: 4px; }

/* Shloka By Type cards: same three-section style as Gita chapter cards (colored header/footer, white body) */
.shloka-type-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-height: 150px;
  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);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.shloka-type-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.shloka-type-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.shloka-type-card-header {
  padding: 8px 16px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.3px;
  text-align: center;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #333;
}
.shloka-type-card-body {
  padding: 10px 16px;
  text-align: center;
  background: #fff !important;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  border: none;
  text-decoration: none;
}
.shloka-type-card-footer {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #444;
}
.shloka-type-card .shloka-type-card-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom: none;
}
.shloka-type-card .shloka-type-card-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-top: none;
}
.shloka-type-card-header,
.shloka-type-card-body,
.shloka-type-card-footer {
  text-decoration: none;
}

/* Override .browse-grid .card .card-content { padding: 0 !important } so By Type cards keep their padding */
.browse-grid .card.shloka-type-card .shloka-type-card-header {
  padding: 8px 16px !important;
}
.browse-grid .card.shloka-type-card .card-content.shloka-type-card-body,
.browse-grid .card.shloka-type-card .shloka-type-card-body {
  padding: 10px 16px !important;
}
.browse-grid .card.shloka-type-card .shloka-type-card-footer {
  padding: 6px 16px !important;
}

/* 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;
}

/* First-visit: after settings popover opens — gear slowly grows/shrinks twice (maybeAutoOpenSettingsFirstVisit) */
@keyframes settings-gear-breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.navbar #settings-btn.settings-btn--gear-breathe .settings-icon-circle {
  animation: settings-gear-breathe 1.4s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .navbar #settings-btn.settings-btn--gear-breathe .settings-icon-circle {
    animation: none;
  }
}

.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: #47474b;
  margin-bottom: 4px;
}

.search-result-preview {
  font-size: 15px;
  color: #8e8e93;
  line-height: 1.4;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 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 — parchment + How To accordion (see mockups) */
#help-overlay {
  position: fixed;
  top: 50px; /* Below navbar (single row, 50px) */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e8dcc8;
  background-image: url('/backparchment-m.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  z-index: 9999;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

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

#help-overlay-content-inner {
  color: #2c3e50;
  font-size: 15px;
  line-height: 1.55;
}

/* How To root — accent matches Contact Us button */
.help-howto {
  padding-bottom: 8px;
  --help-accent: #c45c3e;
  --help-accent-hover: #b54e32;
  /* Slightly toward white vs parchment; header + body share one surface (no strip when open) */
  --help-glass-fill: rgba(255, 255, 255, 0.66);
  /* Spec: 1px white border + a hair more contrast */
  --help-glass-border: rgba(255, 255, 255, 0.3);
  --help-glass-blur: 13px;
  /* List rows: modest radius — large radius on wide short bars looks like pills */
  --help-glass-radius: 12px;
  --help-glass-radius-contact: 16px;
  /* Depth without drowning the border (was shadow-2xl) */
  --help-glass-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.2);
}

/* Top row: "DID YOU KNOW?" centered; × on the right (grid keeps label visually centered) */
.help-howto-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  min-height: 40px;
}

.help-howto-kicker {
  grid-column: 2;
  justify-self: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--help-accent, #c45c3e);
  line-height: 1.2;
  text-align: center;
}

.help-howto-top-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}

.help-howto-close {
  border: none;
  background: rgba(255, 255, 255, 0.55);
  color: #5c4033;
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.help-howto-close:hover {
  background: rgba(255, 255, 255, 0.85);
}

.help-howto-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  color: #5c4033;
  text-align: center;
  margin: 0 0 18px 0;
  letter-spacing: -0.02em;
}

.help-howto-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  color: #4a5568;
  text-align: center;
  margin: 0 0 18px 0;
  line-height: 1.45;
  padding: 0 8px;
}

.help-howto-error {
  text-align: center;
  color: #8b2942;
  padding: 24px 16px;
}

/* Accordion cards */
.help-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.help-accordion-item {
  border-radius: var(--help-glass-radius, 12px);
  overflow: hidden;
  isolation: isolate;
  background: var(--help-glass-fill, rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(var(--help-glass-blur, 13px));
  -webkit-backdrop-filter: blur(var(--help-glass-blur, 13px));
  border: 1px solid var(--help-glass-border, rgba(255, 255, 255, 0.3));
  /* Inner ring reinforces the 1px edge (backdrop can soften outer border) */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    var(--help-glass-shadow, 0 10px 28px -8px rgba(0, 0, 0, 0.2));
}

.help-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 16px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: background 0.15s ease;
}

/* Do not add a second tint when open — that caused a lighter “strip” vs warmer body */
.help-accordion-item--open .help-accordion-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.help-accordion-question {
  font-size: 1.08rem;
  font-weight: 700;
  color: #1e2d3d;
  flex: 1;
  line-height: 1.35;
}

.help-accordion-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-accordion-chevron::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #b87333;
  border-bottom: 2.5px solid #b87333;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.2s ease;
}

.help-accordion-item--open .help-accordion-chevron::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* Same visual plane as header: no extra fill (avoids warm body vs white header) */
.help-accordion-panel {
  background: transparent;
}

.help-accordion-panel[hidden] {
  display: none !important;
}

.help-accordion-body {
  padding: 14px 18px 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  font-size: 1.05rem;
  color: #4a4a4a;
  line-height: 1.55;
}

.help-accordion-body p {
  margin: 0 0 10px 0;
}

.help-accordion-body p:last-child {
  margin-bottom: 0;
}

.help-accordion-body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 12px 0 4px 0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.help-accordion-body p + img,
.help-accordion-body img:first-child {
  margin-top: 8px;
}

.help-accordion-body strong {
  font-weight: 600;
  color: #2c3e50;
}

/* Contact CTA card */
.help-contact-card {
  margin-top: 22px;
  padding: 22px 20px 24px;
  border-radius: var(--help-glass-radius-contact, 16px);
  isolation: isolate;
  background: var(--help-glass-fill, rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(var(--help-glass-blur, 13px));
  -webkit-backdrop-filter: blur(var(--help-glass-blur, 13px));
  border: 1px solid var(--help-glass-border, rgba(255, 255, 255, 0.3));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    var(--help-glass-shadow, 0 10px 28px -8px rgba(0, 0, 0, 0.2));
  text-align: center;
}

.help-contact-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #3d3d3d;
  margin: 0 0 10px 0;
}

.help-contact-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.98rem;
  color: #6b6b6b;
  line-height: 1.5;
  margin: 0 0 18px 0;
}

.help-contact-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--help-accent, #c45c3e);
  box-shadow: 0 2px 10px rgba(196, 92, 62, 0.35);
}

.help-contact-btn:hover {
  background: var(--help-accent-hover, #b54e32);
}

.help-contact-btn:active {
  transform: scale(0.98);
}

/* Featured page + inline CTA (reuse How To glass style tokens) */
.featured-inline-card {
  margin: 0 0 16px 0;
  padding: 18px 16px;
  border-radius: var(--help-glass-radius-contact, 16px);
  background: var(--help-glass-fill, rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(var(--help-glass-blur, 13px));
  -webkit-backdrop-filter: blur(var(--help-glass-blur, 13px));
  border: 1px solid var(--help-glass-border, rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), var(--help-glass-shadow, 0 10px 28px -8px rgba(0, 0, 0, 0.2));
  text-align: center;
}
.featured-inline-title { font-size: 1.02rem; font-weight: 700; color: #3d3d3d; margin-bottom: 6px; }
.featured-inline-text { font-size: 0.94rem; color: #5f6778; margin-bottom: 12px; }

.deity_shlokas_list .featured-inline-card {
  grid-column: 1 / -1;
  width: min(100%, 440px);
  margin: 0 auto 14px;
  box-sizing: border-box;
}
/* Deity browse: featured playlist CTA — opaque panel (not glass) on dark page bg */
.deity_shlokas_list .featured-inline-card--solid {
  background: #f5f0e8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(210, 195, 170, 0.85);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.2);
}
.deity_shlokas_list .featured-inline-card--solid .featured-inline-btn {
  text-decoration: none;
}
.deity_shlokas_list .featured-inline-card--solid .featured-inline-btn:hover {
  text-decoration: none;
}

.featured-page { max-width: none; margin: 0; padding: 0 0 18px; }
.playlist-kind-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b6a4e;
  margin: 0 0 6px 0;
}
.playlist-item-lyrics .playlist-lyric-line {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3d3d3d;
  word-wrap: break-word;
}
.playlist-page .playlist-item-lyrics .playlist-lyric-line {
  color: #4a4a4a;
}
.featured-page .gita-title-bar {
  margin: -16px -16px 16px -16px;
  border-radius: 0;
}
.featured-intro-card {
  margin-bottom: 16px;
  text-align: left;
}
.featured-intro-card .help-contact-title {
  text-align: center;
}
.featured-intro-card,
.featured-items {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.featured-intro-card .detail-deity-image {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 14px;
  padding-top: 6px;
}
.featured-intro-card .detail-deity-image img {
  width: min(100%, 380px);
  max-width: 100%;
  max-height: none;
  height: auto;
}
.featured-intro-text {
  white-space: normal;
  margin-top: 8px;
  text-align: left;
}
.featured-intro-text p {
  color: inherit;
  margin: 0 0 10px 0;
}
.featured-intro-text p:last-child {
  margin-bottom: 0;
}
.playlist-section-title {
  margin: 0 auto 10px;
  max-width: 880px;
  text-align: center;
  font-size: 1.45rem;
  line-height: 1.25;
  color: #2f3f55;
  font-weight: 600;
}
.featured-play-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.featured-items { display: flex; flex-direction: column; gap: 14px; }
.featured-item-card { padding: 14px 14px 10px; }
.playlist-page .featured-item-card {
  border-radius: 18px;
  padding: 16px 18px 14px;
  background: rgba(255, 252, 247, 0.94);
  border-color: rgba(210, 195, 170, 0.45);
}
.playlist-page .featured-item-card:not(.featured-item-card--collapsed) {
  background: #fffbf0;
}
.playlist-page .featured-item-card--collapsed {
  padding-bottom: 16px;
}
.featured-item-card--active { outline: 2px solid rgba(196, 92, 62, 0.5); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) inset, var(--help-glass-shadow, 0 10px 28px -8px rgba(0, 0, 0, 0.2)); }
.featured-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.playlist-page .featured-item-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.playlist-page .featured-item-card:not(.featured-item-card--collapsed) .featured-item-header {
  background: #f2e9d4;
  margin: -16px -18px 0;
  margin-bottom: 0;
  padding: 16px 18px 14px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.14);
}
.playlist-page .featured-item-card--collapsed .featured-item-header {
  margin-bottom: 0;
}
/* Header row toggles expand when track has lyrics (tap target); body stays normal for selecting text. */
.playlist-page .featured-item-card:not(.featured-item-card--no-lyrics) .featured-item-header {
  cursor: pointer;
}
.featured-item-title { margin: 0; font-size: 1.03rem; color: #2c3e50; line-height: 1.35; flex: 1; min-width: 0; }
.playlist-page .featured-item-title {
  font-size: 1.06rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.featured-item-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.playlist-page .featured-item-actions {
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.playlist-include-switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 26px;
  flex-shrink: 0;
}
.playlist-include-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.playlist-include-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(120, 128, 140, 0.4);
  transition: background 0.2s ease;
}
.playlist-include-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.playlist-page .playlist-include-switch input:checked + .playlist-include-slider {
  background: #77d989;
}
.playlist-include-switch input:checked + .playlist-include-slider::before {
  transform: translateX(16px);
}
.featured-item-play-btn {
  border: none;
  border-radius: 999px;
  background: var(--help-accent, #c45c3e);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  cursor: pointer;
}
/* Stadium pill: same height as .playlist-include-switch (26px), not a circle */
.playlist-page .featured-item-play-btn {
  box-sizing: border-box;
  width: 46px;
  min-width: 46px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #b2733d;
  box-shadow: 0 1px 4px rgba(90, 58, 38, 0.22);
  border: 1px solid rgba(98, 58, 35, 0.38);
}
.playlist-page .featured-item-play-btn .featured-item-play-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.featured-item-play-btn:active { transform: scale(0.98); }
.playlist-page .featured-item-play-btn:hover {
  filter: brightness(1.05);
}
.playlist-page .featured-item-play-btn:focus-visible {
  outline: 2px solid rgba(122, 79, 53, 0.65);
  outline-offset: 2px;
}
.featured-item-shloka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 92, 62, 0.45);
  border-radius: 999px;
  color: #9a4630;
  background: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 7px 14px;
  line-height: 1.1;
}
.featured-item-shloka-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}
.playlist-page .playlist-item-body-actions {
  margin: 14px 0;
}
.playlist-page .featured-item-card:not(.featured-item-card--collapsed) .featured-item-body {
  background: #fffbf0;
  margin: 0 -18px -14px;
  padding: 14px 18px 18px;
  border-radius: 0 0 18px 18px;
}
.playlist-page .featured-item-shloka-btn {
  border: 1px solid rgba(98, 58, 35, 0.38);
  border-radius: 10px;
  color: #fff;
  background: #b2733d;
  box-shadow: 0 1px 4px rgba(90, 58, 38, 0.18);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 18px;
  line-height: 1.15;
}
.playlist-page .featured-item-shloka-btn:hover {
  background: #bd7f4a;
  filter: none;
}
.playlist-page .featured-item-shloka-btn:focus-visible {
  outline: 2px solid rgba(122, 79, 53, 0.65);
  outline-offset: 2px;
}
/* Playlist expand: reuse How To accordion chevron (see .help-accordion-chevron) */
.playlist-page .featured-item-toggle-btn {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.playlist-page .featured-item-toggle-btn .help-accordion-chevron::after {
  border-right-color: #5c5c5c;
  border-bottom-color: #5c5c5c;
  border-right-width: 2px;
  border-bottom-width: 2px;
  width: 8px;
  height: 8px;
}
.playlist-page .featured-item-toggle-btn:hover .help-accordion-chevron::after {
  border-color: #3d3d3d;
}
.playlist-page .featured-item-card:not(.featured-item-card--collapsed) .featured-item-toggle-btn .help-accordion-chevron::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.featured-item-toggle-placeholder {
  width: 26px;
  height: 26px;
  min-width: 26px;
  flex-shrink: 0;
  display: inline-block;
  pointer-events: none;
  visibility: hidden;
}
.featured-item-no-audio { color: #6b7280; font-size: 0.82rem; font-weight: 600; }
.featured-item-card--collapsed .featured-item-body { display: none; }
.featured-item-card--collapsed .featured-item-header { margin-bottom: 0; }
.featured-item-body .detail-section { margin-bottom: 6px; }
.featured-item-body .verse-separator {
  display: block !important;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(139, 106, 78, 0.45);
  margin: 18px 0;
}

/* First-visit settings hint — same glass + accent tokens as How To / contact card */
.settings-first-hint {
  position: fixed;
  top: 52px;
  right: 12px;
  width: min(400px, calc(100vw - 24px));
  z-index: 14900;
  box-sizing: border-box;
  animation: settingsFirstHintIn 0.38s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .settings-first-hint {
    animation: none;
  }
}

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

.settings-first-hint-card {
  margin: 0;
  padding: 18px 18px 20px;
  border-radius: var(--help-glass-radius-contact, 16px);
  isolation: isolate;
  background: var(--help-glass-fill, rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(var(--help-glass-blur, 13px));
  -webkit-backdrop-filter: blur(var(--help-glass-blur, 13px));
  border: 1px solid var(--help-glass-border, rgba(255, 255, 255, 0.3));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    var(--help-glass-shadow, 0 10px 28px -8px rgba(0, 0, 0, 0.2));
  text-align: center;
}

.settings-first-hint .help-howto-top {
  margin-bottom: 4px;
}

.settings-first-hint-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #5c4033;
  margin: 0 0 10px 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.settings-first-hint-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.98rem;
  color: #4a5568;
  line-height: 1.5;
  margin: 0 0 18px 0;
  text-align: center;
}

.settings-first-hint-body strong {
  font-weight: 600;
  color: #3d3d3d;
}

.settings-first-hint-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

@media (min-width: 380px) {
  .settings-first-hint-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .settings-first-hint-actions .settings-first-hint-open {
    flex: 0 1 auto;
  }

  .settings-first-hint-actions .settings-first-hint-secondary {
    flex: 0 1 auto;
  }
}

.settings-first-hint-secondary {
  display: inline-block;
  border: 2px solid var(--help-accent, #c45c3e);
  background: rgba(255, 255, 255, 0.45);
  color: var(--help-accent, #c45c3e);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.settings-first-hint-secondary:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--help-accent-hover, #b54e32);
  border-color: var(--help-accent-hover, #b54e32);
}

.settings-first-hint-secondary:active {
  transform: scale(0.98);
}

/* Markdown inside accordion answers only (does not override .help-howto-title) */
#help-overlay-content-inner .help-accordion-body h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 16px 0 8px 0;
  color: #2c3e50;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#help-overlay-content-inner .help-accordion-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 14px 0 6px 0;
  color: #2c3e50;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#help-overlay-content-inner .help-accordion-body ul,
#help-overlay-content-inner .help-accordion-body ol {
  margin: 0 0 12px 0;
  padding-left: 22px;
}

#help-overlay-content-inner .help-accordion-body li {
  margin: 4px 0;
  color: #4a4a4a;
}

#help-overlay-content-inner .help-accordion-body code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

#help-overlay-content-inner .help-accordion-body pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
}

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

#help-overlay-content-inner .help-accordion-body a {
  color: #2a6f97;
  text-decoration: none;
}

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

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

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

#help-overlay-content-inner .help-accordion-body table th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

/* Explore page segment control (By Deity | By Type, By Name | By Type) */
.explore-segment-wrap {
  margin-bottom: 16px;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.explore-segment-wrap .segmented {
  display: flex !important;
  background: #e5e5ea !important;
  border-radius: 8px !important;
  padding: 2px !important;
  width: 100% !important;
  margin: 0 !important;
}
.explore-segment-wrap .segmented .button {
  flex: 1 !important;
  padding: 8px 12px !important;
  font-size: 14px !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: 36px !important;
  line-height: 1.2 !important;
}
.explore-segment-wrap .segmented .button.active,
.explore-segment-wrap .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;
}
.explore-segment-wrap .segmented .button:not(.active):not(.button-active) {
  opacity: 0.7 !important;
}

/* 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;
}
.detail-content:has(> .detail-breadcrumb:first-child) {
  padding-top: 0;
}

/* 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.
   display !important matches mobile-audio-dock prototype (Chrome never leaves a phantom strip). */
.audio-player-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #8B6A4E;
  border-top: 1px solid #e5e5ea;
  padding: 6px 8px;
  display: none !important;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
  z-index: 1000;
  box-shadow: none;
}

.audio-player-sticky.show {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  visibility: visible;
  height: auto;
  padding: 6px 8px;
  /* Lift controls above home indicator / Android gesture bar; brown fills extra padding.
     constant() can resolve before env() on some iOS WebKit builds; --audio-player-pad-bottom
     is set by app.js on iOS to avoid Chrome growing the bar when env() appears after scroll. */
  padding-bottom: max(12px, calc(6px + constant(safe-area-inset-bottom, 0px)));
  padding-bottom: max(12px, calc(6px + env(safe-area-inset-bottom, 0px)));
  padding-bottom: var(--audio-player-pad-bottom);
  border-top: 1px solid #e5e5ea;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  /* iOS (any browser): app.js may set inline top from visualViewport — layout bottom:0 often leaves a gap. Android: bottom:0 only. */
}

/* iOS collapsed chrome (html.audio-player-vv-tall): slightly taller bar so play is easier to hit */
html.audio-player-vv-tall .audio-player-sticky.show {
  padding-top: 9px;
  padding-bottom: calc(
    var(--audio-player-pad-bottom, max(12px, calc(6px + env(safe-area-inset-bottom, 0px)))) + 5px
  );
}

html.audio-player-vv-tall .audio-player-sticky.show:has(.audio-player-multi-note:not(.hidden)) {
  padding-top: 7px;
}

@media (max-width: 640px) {
  html.audio-player-vv-tall .audio-player-sticky.show .audio-player-button {
    min-width: 48px;
    min-height: 48px;
  }
}

html.audio-player-vv-tall .page-content.has-audio {
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* Tuck label against controls so total bar height stays close to the no-label layout */
.audio-player-sticky.show:has(.audio-player-multi-note:not(.hidden)) {
  padding-top: 4px;
}

.audio-player-multi-note {
  font-size: 10px;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  width: 100%;
  padding: 0 8px 1px;
  margin: 0;
  font-weight: 600;
}

.audio-player-sticky.show:has(.audio-player-multi-note:not(.hidden)) .audio-player-row {
  margin-top: -1px;
}

.audio-player-multi-note.hidden {
  display: none !important;
}

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

.audio-player-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  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;
}

/* Easier tap near screen edge on phones (Android nav / iOS reach) */
@media (max-width: 640px) {
  .audio-player-button {
    min-width: 44px;
    min-height: 44px;
  }
}

.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 {
  /* Space for player row + optional multi-version line + safe-area padding inside bar */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* 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;
}

/* TOC jump: align top of first visible block; room under fixed navbar */
.page.detail-page #detail-content .detail-section.toc-jump-focus,
.page.detail-page #detail-content .verse-struct-boundary.toc-jump-focus {
  scroll-margin-top: 58px;
}

.page.detail-page #detail-content .verse-section--toc-active {
  outline: none;
  /* 1px frame, same gold as detail .verse-separator (thinner than default focus ring) */
  box-shadow: inset 0 0 0 1px #D4AF37;
}

.page.detail-page #detail-content .detail-section.toc-jump-focus:focus {
  outline: none;
}

/* Non–detail-page fallback if #detail-content exists without parchment HR color */
#detail-content .verse-section--toc-active {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(160, 140, 120, 0.75);
}

#detail-content .detail-section.toc-jump-focus:focus {
  outline: none;
}

#detail-content .verse-struct-boundary.toc-jump-focus:focus {
  outline: none;
}

/* Legacy “Contents” control from older static HTML (removed from generator) */
.verse-struct-boundary__toc {
  display: none !important;
}

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

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

/* Verse field labels (Sanskrit, transliteration, translation, …) — smaller, caps, grey */
.detail-section-title--verse-field {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 8px;
}

.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-panel--settings .block:nth-child(2),
.settings-popover-panel--settings .popover-section:nth-child(2) {
  border-bottom: none;
}

/* Settings ↔ Table of Contents tabs */
.settings-popover-tabs {
  display: flex;
  gap: 0;
  margin: 0 8px 8px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
}

.settings-popover-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: #636366;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.settings-popover-tab--active {
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.settings-popover-panels {
  min-height: 0;
}

.settings-popover-panel--toc {
  padding: 0 0 4px;
}

.settings-toc-body {
  padding: 0 0 8px;
}

.settings-toc-jump-label {
  font-size: 13px;
  font-weight: 600;
  color: #8e8e93;
  padding: 4px 12px 8px;
}

.settings-toc-dd-labels {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 12px 6px;
}

.settings-toc-dd-label {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: rgba(60, 60, 67, 0.55);
  letter-spacing: 0.01em;
  padding: 0 2px;
  text-transform: none;
}

.settings-toc-dd-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 12px 12px;
}

.settings-toc-ref-jump {
  padding: 0 12px 12px;
}

.settings-toc-ref-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  border: 1px solid #c7c7cc;
  border-radius: 8px;
  background: #fff;
  padding: 1px 2px 1px 7px;
  min-height: 38px;
  box-sizing: border-box;
}

.settings-toc-ref-icon {
  display: flex;
  flex-shrink: 0;
  color: rgba(60, 60, 67, 0.45);
}

.settings-toc-ref-icon svg {
  width: 16px;
  height: 16px;
}

.settings-toc-ref-input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: #1c1c1e;
  padding: 3px 3px;
  line-height: 1.2;
  outline: none;
}

.settings-toc-ref-input::placeholder {
  color: rgba(60, 60, 67, 0.42);
  font-weight: 400;
  font-size: 14px;
}

.settings-toc-ref-go {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: rgba(177, 108, 52, 0.14);
  color: #8b5220;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-toc-ref-go:hover {
  background: rgba(177, 108, 52, 0.22);
  color: #6e4018;
}

.settings-toc-ref-go:active {
  transform: scale(0.96);
}

.settings-toc-ref-go svg {
  width: 15px;
  height: 15px;
}

.settings-toc-ref-status {
  min-height: 1.2em;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 12px;
  color: #c41e3a;
}

.settings-toc-ref-status:empty {
  margin-top: 0;
}

.settings-toc-select {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.25;
  border-radius: 8px;
  border: 1px solid #c7c7cc;
  background: #fff;
  color: #1c1c1e;
  font-family: inherit;
  -webkit-appearance: menulist;
  appearance: menulist;
}

.settings-toc-sections-wrap {
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}

.settings-toc-sections-label {
  font-size: 13px;
  font-weight: 600;
  color: #8e8e93;
  padding: 4px 16px 8px;
}

.settings-toc-section-list {
  max-height: min(48vh, 320px);
  overflow-y: auto;
  padding: 0 8px 8px;
  -webkit-overflow-scrolling: touch;
}

.settings-toc-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  text-align: left;
  border: none;
  background: #f2f2f7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Parchment tint only on interaction (base stays neutral gray) */
.settings-toc-card:hover {
  background: #ebe5d9;
  box-shadow: 0 2px 6px rgba(61, 53, 37, 0.1);
}

.settings-toc-card:active {
  background: #e5dfd2;
  box-shadow: 0 1px 3px rgba(61, 53, 37, 0.08);
}

.settings-toc-card:last-child {
  margin-bottom: 0;
}

.settings-toc-card__title {
  flex: 1 1 100%;
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1e;
}

.settings-toc-card__sub {
  font-size: 13px;
  color: #636366;
}

.settings-toc-card__chev {
  margin-left: auto;
  font-size: 18px;
  font-weight: 300;
  color: #c7c7cc;
  line-height: 1;
}

/* Popover shell stays light (#fff); when OS is dark, keep tabs + TOC matching that sheet */
@media (prefers-color-scheme: dark) {
  .settings-popover .settings-popover-tabs {
    background: rgba(0, 0, 0, 0.06);
  }

  .settings-popover .settings-popover-tab {
    color: #636366;
  }

  .settings-popover .settings-popover-tab--active {
    background: #fff;
    color: #1c1c1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  .settings-popover .settings-toc-select {
    border-color: #c7c7cc;
    background: #fff;
    color: #1c1c1e;
  }

  .settings-popover .settings-toc-ref-row {
    border-color: #c7c7cc;
    background: #fff;
  }

  .settings-popover .settings-toc-ref-input {
    color: #1c1c1e;
  }

  .settings-popover .settings-toc-ref-input::placeholder {
    color: rgba(60, 60, 67, 0.42);
  }

  .settings-popover .settings-toc-ref-icon {
    color: rgba(60, 60, 67, 0.45);
  }

  .settings-popover .settings-toc-sections-wrap {
    border-top-color: #f0f0f0;
  }

  .settings-popover .settings-toc-card {
    background: #f2f2f7;
  }

  .settings-popover .settings-toc-card:hover {
    background: #ebe5d9;
    box-shadow: 0 2px 6px rgba(61, 53, 37, 0.1);
  }

  .settings-popover .settings-toc-card:active {
    background: #e5dfd2;
    box-shadow: 0 1px 3px rgba(61, 53, 37, 0.08);
  }

  .settings-popover .settings-toc-card__title {
    color: #1c1c1e;
  }

  .settings-popover .settings-toc-card__sub {
    color: #636366;
  }

  .settings-popover .settings-toc-card__chev {
    color: #c7c7cc;
  }
}

.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: 1.2 !important;
  margin-right: auto !important;
  padding-right: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  min-height: 32px !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;
}

.settings-popover .settings-feedback-link {
  color: #007aff;
  text-decoration: none;
  font-size: 17px;
  display: block;
  padding: 4px 0;
}
.settings-popover .settings-feedback-link:hover,
.settings-popover .settings-feedback-link:active {
  color: #0051d5;
  text-decoration: none;
}

/* Language block: label + dropdown on one row; vertical center align; spacing below */
.settings-popover .settings-language-block {
  padding-bottom: 16px;
}
.settings-popover .settings-language-block .list ul {
  margin-bottom: 0;
}
.settings-popover .settings-language-block .item-content.item-input .item-inner {
  align-items: center !important;
}
/* Match label height to dropdown (padding 10+10 + line) and center text; override global .item-label */
.settings-popover .settings-language-block .item-title.item-label {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  line-height: 1.2 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.settings-popover .settings-language-block .display-script-select {
  width: auto;
  min-width: 120px;
  max-width: 180px;
  position: relative;
  top: -4px;
}

.settings-popover .display-script-select,
.display-script-select {
  width: 100%;
  max-width: 100%;
  padding: 10px 36px 10px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #000;
  background: #f2f2f7;
  border: none;
  border-radius: 10px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238e8e93' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-tap-highlight-color: transparent;
}
.settings-popover .display-script-select:hover,
.display-script-select:hover {
  background-color: #e8e8ed;
}
.settings-popover .display-script-select:focus,
.display-script-select:focus {
  outline: none;
  box-shadow: none;
}
.settings-popover .display-script-select:active,
.display-script-select:active {
  background-color: #e5e5ea;
}

.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;
}

/* By Type list: add horizontal padding so cards aren’t flush to edges (deities.htm) */
#tag-list-wrap {
  padding: 0 16px 16px 16px;
}
@media (min-width: 768px) {
  #tag-list-wrap {
    padding: 0 24px 16px 24px;
  }
}

/* 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 – fill to bottom of viewport */
.page-content.deity-page {
  background: rgba(30, 30, 30, 1) !important;
  min-height: calc(100vh - 50px); /* Navbar is 50px */
  min-height: calc(100dvh - 50px); /* Prefer dvh on mobile */
  padding-bottom: 24px; /* Small bottom padding; audio player adds its own when visible */
}

/* Ensure html and body fill and stay dark for deity pages (no white strip at bottom) */
html:has(.page.deity-page),
body:has(.page.deity-page) {
  background: rgba(30, 30, 30, 1) !important;
  min-height: 100%;
  min-height: 100dvh;
}

/* 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: dark bar with prev | chapter nav | next icons */
.gita-nav-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 2px;
  background: #3A3D40;
  border-radius: 6px;
  padding: 2px 14px;
}

.gita-nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #D6D7D8;
  text-decoration: none;
  border-radius: 50%;
  transition: opacity 0.2s, color 0.2s;
}

/* Side pills only as wide as icon so no extra gap left of left arrow / right of right arrow */
.gita-nav-pill--prev,
.gita-nav-pill--next {
  min-width: 18px;
  width: 18px;
}

.gita-nav-pill:hover {
  opacity: 0.9;
  color: #fff;
}

.gita-nav-pill--chapter {
  color: #D78536;
}

.gita-nav-pill--chapter:hover {
  color: #e89546;
}

.gita-nav-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.gita-nav-pill--prev {
  order: 1;
}

.gita-nav-pill--chapter {
  order: 2;
}

.gita-nav-pill--next {
  order: 3;
}

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

/* Mobile: make description box same width as image above (break out of .detail-content-main padding) */
@media (max-width: 767px) {
  .detail-section[data-field="description"] {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: calc(100% + 32px);
    box-sizing: border-box;
  }
}

@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; }
}

/* Feedback modal (Settings → Send feedback) */
.feedback-modal-overlay,
#feedback-modal.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.feedback-modal-overlay .feedback-modal {
  background: #f2f2f7;
  border-radius: 16px;
  max-width: 360px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: feedbackSlideUp 0.3s ease-out;
}

.feedback-modal-overlay .feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e5e5ea;
  border-radius: 16px 16px 0 0;
}

.feedback-modal-overlay .feedback-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #000;
}

.feedback-modal-overlay .feedback-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #8e8e93;
  padding: 0 4px;
}

.feedback-modal-overlay .feedback-modal-content {
  padding: 16px 20px;
  background: white;
}

.feedback-modal-overlay .feedback-rating label,
.feedback-modal-overlay .feedback-category label,
.feedback-modal-overlay .feedback-email label,
.feedback-modal-overlay .feedback-message label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #3c3c43;
  margin-bottom: 8px;
}

.feedback-modal-overlay .rating-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.feedback-modal-overlay .rating-icon {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s;
  padding: 4px;
}

.feedback-modal-overlay .rating-icon:hover,
.feedback-modal-overlay .rating-icon.selected {
  opacity: 1;
}

.feedback-modal-overlay .feedback-email {
  margin-bottom: 16px;
}

.feedback-modal-overlay .feedback-email label {
  margin-bottom: 10px;
}

.feedback-modal-overlay #feedback-email-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: white;
  box-sizing: border-box;
}

.feedback-modal-overlay .feedback-category {
  margin-bottom: 16px;
}

.feedback-modal-overlay #feedback-category-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: white;
  box-sizing: border-box;
}

.feedback-modal-overlay .feedback-message {
  margin-bottom: 16px;
}

.feedback-modal-overlay #feedback-message-text {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
}

.feedback-modal-overlay .feedback-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.feedback-modal-overlay .feedback-submit-btn,
.feedback-modal-overlay .feedback-cancel-btn {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}

.feedback-modal-overlay .feedback-submit-btn {
  background: #007aff;
  color: white;
}

.feedback-modal-overlay .feedback-cancel-btn {
  background: #e5e5ea;
  color: #3c3c43;
}

.feedback-modal-overlay .feedback-success-message {
  padding: 24px 0;
  font-size: 16px;
  color: #3c3c43;
  text-align: center;
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
  white-space: pre-line;
}
.feedback-modal-overlay .feedback-modal.feedback-modal--success {
  border-radius: 4px;
}

/* Validation/alert message popup (e.g. "Required field", "Please select a rating") */
.feedback-message-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25000;
  padding: 16px;
  box-sizing: border-box;
}
.feedback-message-popup-box {
  background: #fff;
  border-radius: 2px;
  padding: 20px;
  max-width: 240px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.feedback-message-popup-text {
  margin: 0 0 16px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  word-wrap: break-word;
  white-space: normal;
}
.feedback-message-popup-close {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}