/* Generated bundle.css - do not edit. Source: scripts/build-css.sh */

/* === header.css === */
/* Use this to change the color under the navbar
Each page is customized under its own CSS */
html, body {
    background-color: #f8f9fa;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #1a1a2e;
}
.btn-primary:hover {
  color: #f9f7f4;
  background-color: #8fb4fa;
  border-color: #0e6efd;
}
.btn-secondary:hover {
  color: #f9f7f4;
  background-color: #04c3ee;
  border-color: #5b288e;
}
.btn-light:hover {
  color: #f9f7f4;
  background-color: #04c3ee;
  border-color: #5b288e;
}
/* Favorite button active state */
.btn-favorite-article.active,
.btn-favorite-sermon.active {
    color: #eeeeee;
    border-color: #dc3545;
}

/* Notification bell size */
.notification-bell {
    font-size: 1.25rem;
}

/* Toast animation */
.favorites-toast {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* === navbar.css === */
.card:hover {
  background-color: #e1eafe;  
  border-color: #5b288e;
}
.navbar_logo {
  width: 220px;
  height: auto;
  display: inline-block;
  float: none;
  vertical-align: middle;
}
.navbar {
  background-color: white;
  /* to change the color of the navbar background - 
  go to navbar.php and edit the style */
}
/* This lets you change the navbar links color */
.navbar-nav li a{
  color: #395ba9;
}
.navbar-nav li a{
  color: #395ba9;
}
.navbar-nav a:hover{
  color: #0045ff;
}
.navbar_nav_search {
  white-space: nowrap;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}

.nav-item.dropdown.dropdown-mega {
  position: static;
}
.nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 11;
  float: right;
}
.navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: #333;
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}

.icons {
  display: inline-flex;
  margin-left: auto;
}
.icons a {
  transition: all 0.2s ease-in-out;
  padding: 0.2rem 0.4rem;
  color: #ccc !important;
  text-decoration: none;
}
.icons a:hover {
  color: white;
  text-shadow: 0 0 30px white;
}

/* Member avatar in navbar */
.navbar-member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Breadcrumbs (shared across all pages) */
.pg-breadcrumb {
    padding: 0.25rem 0 0.5rem;
}
.pg-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}
.pg-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.pg-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
}
.pg-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.55);
}
.pg-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

/* Light background variant */
.pg-breadcrumb-light .breadcrumb-item a {
    color: #6c757d;
}
.pg-breadcrumb-light .breadcrumb-item a:hover {
    color: #495057;
}
.pg-breadcrumb-light .breadcrumb-item.active {
    color: #adb5bd;
}
.pg-breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    color: #adb5bd;
}

/* Mobile: edge-to-edge divider under breadcrumbs in article/sermon heroes */
@media (max-width: 767.98px) {
    .article-hero .pg-breadcrumb,
    .sermon-hero .pg-breadcrumb {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 0.5rem;
    }
    /* Hide last breadcrumb item on mobile — already shown as page title */
    .pg-breadcrumb .breadcrumb-item:last-child {
        display: none;
    }
}
</style>

/* === articles.css === */
.articles_page {

}
.articles_title {
	font-size: 20px;
	font-weight: bold;
}
.articles_article_count {

}
.articles_name {
	font-size: 20px;
	font-weight: bold;
}
.articles_bits {

}
.articles_bit_author {
	font-size: 18px;
}
.articles_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.articles_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.articles_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.articles_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.articles_bit_article {
	font-size: 20px;
	margin-top: 20px;
}
.articles_bit_published_date {
	font-style: italic;
}
.articles_bit_article_length {
	font-style: italic;
}
.articles_bit_author_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === article.css === */
.article_page {

}
.article_title {
	font-size: 25px;
	color: #18274b;
	text-align: center;
}
.article_subtitle1 {
	font-size: 20px;
	color: #18274b;
	text-align: center;
}					
.article_subtitle2 {
	font-size: 20px;
	color: #18274b;
	text-align: center;
}
.article_subtitle3 {
	font-size: 20px;
	color: #18274b;
	text-align: center;
}
.article_author {
	font-size: 20px;
	color: #18274b;
	text-align:center;
	padding-bottom: 5px;
}
.article_author a:link {
	color: #18274b;
	text-decoration: none;
}
.article_author a:visited  {
	color: #18274b;
	text-decoration: none;
}
.article_author a:active {
	color: #18274b;
	text-decoration: none;	
}
.article_author a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.article_published_date_time {
	font-size: 10px;
	color: #000066;
	font-style: italic;
	text-align:center;						
}
.article_text {
	color: #18274b;
	font-size: 20px;	
}
.article_text a:link {
	color: #304e96;
	text-decoration: none;
}
.article_text a:visited  {
	color: #304e96;
	text-decoration: none;
}
.article_text a:active {
	color: #304e96;
	text-decoration: none;	
}
.article_text a:hover {
	color: #304e96;
	text-decoration:  none;
}
.article_copyright_text {
	color: #888888;
	font-size: 15px;
	line-height: 17pt;
}
.article_not_published {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.article_cookies_required {
	font-size: 18px;
	color: #888888;
	text-align: center;	
}
.article_copyright {
	font-size: 10px;
	color: black;
	text-align: left;
	margin: 15px 15px 0px 0px;
	padding-left: 15px;
}
.article_password_warning {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.article_password_challenge_form {
	background-color: white;
	color: black;
	font-size: 18px;
	text-align: center;
}
.article_password {
  background-color: #ABCDEF;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  padding:10px;
  border:3px;
}
.article_text ol {
	margin: 15px 0px;
}
.article_text ol li {
	margin: 0px 38px;
	list-style-type: decimal; 
}
.article_text p {

}
.article_text blockquote {
	margin: 0px 38px 15px 38px;
}
.article_image_float-end {
	max-width: 175px;
	margin-top:  7px;
	margin-left: 20px;
	margin-bottom: 5px;
	box-shadow:0px 5px 5px 0px  #888;
}
.article_image_float-start {
	height: 100%; 
	max-height: 300px;
	margin-top:  7px;
	margin-right: 20px;
	vertical-align: middle;
	box-shadow:0px 5px 5px 0px  #888;
}
.article_author_bio {
	font-size: 12px;
	color: #203565;
}
.article_published_update_date {
	font-size: 10px;
	color: #203565;
}
.article_topics {
	font-size: 10px;
	color: #203565;
}
.article_topic_bits {
	font-size: 10px;
	color: #203565;
}
.article_topic_bits a:link {
	color: #203565;
	text-decoration: none;
}
.article_topic_bits a:visited  {
	color: #203565;
	text-decoration: none;
}
.article_topic_bits a:active {
	color: #203565;
	text-decoration: none;	
}
.article_topic_bits a:hover {
	color: #203565;
	text-decoration: underline;	
}
.article_author_link {
	font-size: 10px;
	color: #203565;
}
.article_author_link a:link {
	color: #203565;
	text-decoration: none;
}
.article_author_link a:visited  {
	color: #203565;
	text-decoration: none;
}
.article_author_link a:active {
	color: #203565;
	text-decoration: none;	
}
.article_author_link a:hover {
	color: #203565;
	text-decoration: underline;	
}
.article_view_count {
	font-size: 10px;
	color: #203565;
}
.article_latest_articles_title {
	font-size: 20px;
	font-weight: bold;
}
/* === authors.css === */
.authors{ 
}
.authors_page {

	padding-bottom: 20px;
}
.authors_title {
	font-size: 20px;
	font-weight: bold;
}
.authors_bits {

}
.authors_bits_letter{ /* used in the authors_bit_template */
	background-color: #2d3e50;
	color:  #c4d2e7;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 7px;
	margin-bottom: 7px;
}
.authors_bits_author{ /* used in the authors_bit_template */
	font-size:  18px;
	margin-top: 3px;
	margin-bottom: 3px;	
}
.authors_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.authors_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.authors_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.authors_bits a:hover {
	color: #7fd1de;
}

/* === author.css === */
.author_page {

}

.author_image_multiple_items {
	max-width: 220px;
	margin-top:  0px;
	margin-left: 20px;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_image_1_item {
	max-width: 115px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_image_2_items_large_aspect {
	max-width: 175px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_image_3_items_large_aspect {
	max-width: 260px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_article_count {

}
.author_sermon_count {
	padding-left: 10px;
}
.author_sermon_count a:link {
	color: #18274b;
	text-decoration: none;
}
.author_sermon_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.author_sermon_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.author_sermon_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.author_book_count {
	padding-left: 10px;
}
.author_book_count a:link {
	color: #18274b;
	text-decoration: none;
}
.author_book_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.author_book_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.author_book_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.author_name {
	font-size: 20px;
	font-weight: bold;
}
.author_bits {

}
.author_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.author_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.author_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.author_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.author_bit_article {
	font-size: 20px;
	margin-top: 20px;
}
.author_bit_published_date {
	font-style: italic;
}
.author_bit_article_length {
	font-style: italic;
}
/* === topics.css === */
/* Topics Page Redesign */

.topics-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 60vh;
}

/* Grid Layout */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .topics-grid {
        grid-template-columns: 1fr;
    }
}

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

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

/* Topic Card */
.topic-card .card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #fff;
}

.topic-card .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: rgba(13, 110, 253, 0.3);
}

.topic-card-link:hover .card-title {
    color: #0d6efd !important;
}

/* Topic Monogram */
.topic-monogram {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* Arrow */
.topic-arrow {
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateX(-10px);
}

.topic-card:hover .topic-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Card content */
.topic-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.topic-card .card-text {
    font-size: 0.85rem;
    line-height: 1.4;
}

.topic-card .badge {
    font-weight: 500;
    font-size: 0.75rem;
}

/* Min width helper */
.min-width-0 {
    min-width: 0;
}

/* Search input styling */
#topicSearch {
    border-left: none;
}

#topicSearch:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: 0.375rem;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: #86b7fe;
}

/* === topic.css === */
.topic_page {

}
.topic_article_count {

}
.topic_name {
	font-size: 20px;
	font-weight: bold;
}
.topic_bits {

}
.topic_bit_author {
	font-size: 18px;
}
.topic_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.topic_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.topic_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.topic_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.topic_bit_article {
	font-size: 20px;
	margin-top: 20px;
}
.topic_bit_published_date {
	font-style: italic;
}
.topic_bit_article_length {
	font-style: italic;
}
.topic_bit_author_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === sermons.css === */
.sermons_page {

}
.sermons_title {
	font-size: 20px;
	font-weight: bold;
}
.sermons_sermon_count {

}
.sermons_name {
	font-size: 20px;
	font-weight: bold;
}
.sermons_bits {

}
.sermons_bit_preacher {
	font-size: 18px;
}
.sermons_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.sermons_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.sermons_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.sermons_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.sermons_bit_sermon {
	font-size: 20px;
	margin-top: 20px;
}
.sermons_bit_published_date {
	font-style: italic;
}
.sermons_bit_sermon_length {
	font-style: italic;
}
.sermons_bit_preacher_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === sermon.css === */
.sermon_page {

}
.sermon_video {
	padding-bottom: 20px;
}
.sermon_audio {

}
.sermon_text {
	color: #18274b;
	font-size: 20px;	
}
.sermon_text a:link {
	color: #304e96;
	text-decoration: none;
}
.sermon_text a:visited  {
	color: #304e96;
	text-decoration: none;
}
.sermon_text a:active {
	color: #304e96;
	text-decoration: none;	
}
.sermon_text a:hover {
	color: #304e96;
	text-decoration:  none;
}
.sermon_copyright_text {
	color: #888888;
	font-size: 15px;
	line-height: 17pt;
}
.sermon_not_published {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.sermon_cookies_required {
	font-size: 18px;
	color: #888888;
	text-align: center;	
}
.sermon_copyright {
	font-size: 10px;
	color: black;
	text-align: left;
	margin: 15px 15px 0px 0px;
	padding-left: 15px;
}
.sermon_password_warning {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.sermon_password_challenge_form {
	background-color: white;
	color: black;
	font-size: 18px;
	text-align: center;
}
.sermon_password {
  background-color: #ABCDEF;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  padding:10px;
  border:3px;
}
.sermon_text ol {
	margin: 15px 0px;
}
.sermon_text ol li {
	margin: 0px 38px;
	list-style-type: decimal; 
}
.sermon_text p {

}
.sermon_text blockquote {
	margin: 0px 38px 0px 38px;
}
.sermon_image_float-end {
	max-width: 175px;
	margin-top:  7px;
	margin-left: 20px;

	box-shadow:0px 5px 5px 0px  #888;
}
.sermon_image_float-start {
	height: 100%; 
	max-height: 300px;
	margin-top:  7px;
	margin-right: 20px;
	vertical-align: middle;
	box-shadow:0px 5px 5px 0px  #888;
}
.sermon_preacher_bio {
	margin-top: 20px;
	margin-left: 13px;
	font-size: 12px;
	color: #203565;
}
.sermon_published_update_date {
	font-size: 10px;
	color: #203565;
}
.sermon_topics {
	font-size: 10px;
	color: #203565;
}
.sermon_topic_bits {
	font-size: 10px;
	margin-left: 13px;
	color: #203565;
}
.sermon_topic_bits a:link {
	color: #203565;
	text-decoration: none;
}
.sermon_topic_bits a:visited  {
	color: #203565;
	text-decoration: none;
}
.sermon_topic_bits a:active {
	color: #203565;
	text-decoration: none;	
}
.sermon_topic_bits a:hover {
	color: #203565;
	text-decoration: underline;	
}
.sermon_preacher_link {
	margin-left: 13px;
	font-size: 10px;
	color: #203565;
}
.sermon_preacher_link a:link {
	color: #203565;
	text-decoration: none;
}
.sermon_preacher_link a:visited  {
	color: #203565;
	text-decoration: none;
}
.sermon_preacher_link a:active {
	color: #203565;
	text-decoration: none;	
}
.sermon_preacher_link a:hover {
	color: #203565;
	text-decoration: underline;	
}
/* === preachers.css === */
.preachers{ 
}
.preachers_page {

	padding-bottom: 20px;
}
.preachers_title {
	font-size: 20px;
	font-weight: bold;
}
.preachers_bits {

}
.preachers_bits_letter{ /* used in the preachers_bit_template */
	background-color: #454f69;
	color:  #c4d2e7;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 7px;
	margin-bottom: 7px;
}
.preachers_bits_preacher{ /* used in the preachers_bit_template */
	font-size:  18px;
	margin-top: 3px;
	margin-bottom: 3px;	
}
.preachers_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.preachers_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preachers_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.preachers_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}

/* === preacher.css === */
.preacher_page {

}

.preacher_image_multiple_items {
	max-width: 250px;
	margin-top:  0px;
	margin-left: 20px;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_image_1_item {
	max-width: 115px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_image_2_items_large_aspect {
	max-width: 175px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_image_3_items_large_aspect {
	max-width: 260px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_sermon_count {

}
.preacher_article_count {
	padding-left: 10px;
}
.preacher_article_count a:link {
	color: #18274b;
	text-decoration: none;
}
.preacher_article_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preacher_article_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.preacher_article_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.preacher_book_count {
	padding-left: 10px;
}
.preacher_book_count a:link {
	color: #18274b;
	text-decoration: none;
}
.preacher_book_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preacher_book_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.preacher_book_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.preacher_name {
	font-size: 20px;
	font-weight: bold;
}
.preacher_bits {

}
.preacher_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.preacher_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preacher_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.preacher_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.preacher_bit_sermon {
	font-size: 20px;
	margin-top: 20px;
}
.preacher_bit_published_date {
	font-style: italic;
}
.preacher_bit_sermon_length {
	font-style: italic;
}
/* === sermon_topic.css === */
.sermon_sermon_topic_page {

}
.sermon_sermon_topic_sermon_count {

}
.sermon_sermon_topic_name {
	font-size: 20px;
	font-weight: bold;
}
.sermon_sermon_topic_bits {

}
.sermon_sermon_topic_bit_preacher {
	font-size: 18px;
}
.sermon_sermon_topic_bit_preacher {

}
.sermon_sermon_topic_bit_preacher a:link {
	color: #18274b;
	text-decoration: none;
}
.sermon_sermon_topic_bit_preacher a:visited  {
	color: #18274b;
	text-decoration: none;
}
.sermon_sermon_topic_bit_preacher a:active {
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_preacher a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.sermon_sermon_topic_bit_sermon {
	color: #18274b;
	font-size: 20px;
	margin-top: 20px;
}
.sermon_sermon_topic_bit_sermon a:link{
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_sermon a:visited{
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_sermon a:active{
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_sermon a:hover{
	color: #18274b;
	text-decoration:  underline;
}
.sermon_sermon_topic_bit_published_date {
	font-style: italic;
}
.sermon_sermon_topic_bit_preacher_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === sermon_topics.css === */
.sermon_topics_page {

}
.sermon_topics_title {
	font-size: 20px;
	font-weight: bold;
}
.sermon_topics_bit_title{ /* used in the authors_bit_template */
	background-color: #2d3e50;
	color:  #FFFFFF;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 10px;
	margin-bottom: 10px;	
}
.sermon_topics_sermons_count {
	font-size:  12px;
	text-align: right;	
}
.sermon_topics_bits {

}
.sermon_topics_bit{ /* used in the sermon_topics_bit_template */

}
.sermon_topics_bit_description {

}
.sermon_topics_bit_sermon_count {
	font-size:  12px;
	font-style:  italic;
}
.sermon_topics_bit_title {
	font-size: 18px;
}
.sermon_topics_bit_title a:link {
	color: #c4d2e7;
	text-decoration: none;
}
.sermon_topics_bit_title a:visited  {
	color: #c4d2e7;
	text-decoration: none;
}
.sermon_topics_bit_title a:active {
	color: #c4d2e7;
	text-decoration: none;	
}
.sermon_topics_bit_title a:hover {
	color: #7fd1de;
}
/* === search.css === */
/* Dark Mode CSS Variables */
:root {
    --search-page-bg: #f8f9fa;
    --search-hints-color: #888888;
    --search-terms-color: #0e6efd;
    --search-highlighted-color: #0e6efd;
    --search-bit-title-link: #18274b;
    --search-bit-snippet-color: #212529;
    --search-bit-author-color: #18274b;
    --search-bit-length-color: #6c757d;
    --search-time-color: #6c757d;
    --search-number-color: #212529;
}

[data-theme="dark"] {
    --search-page-bg: #1a1a2e;
    --search-hints-color: #a0a0a0;
    --search-terms-color: #6ea8fe;
    --search-highlighted-color: #6ea8fe;
    --search-bit-title-link: #e0e0e0;
    --search-bit-snippet-color: #b0b0b0;
    --search-bit-author-color: #6ea8fe;
    --search-bit-length-color: #a0a0a0;
    --search-time-color: #a0a0a0;
    --search-number-color: #e0e0e0;
}

.search_page {
    background: var(--search-page-bg);
}
.search_hints {
	margin-top: 5px;
	color: var(--search-hints-color);
}
.search_sections {
}
.search_button {
	margin-top: 20px;
}
.search_titles_only {
	margin-top: 20px;
}
.search_number_of_results {
	margin-top: 20px;
	font-size: 18px;
	color: var(--search-number-color);
}
.search_search_terms {
	color: var(--search-terms-color);
}
.search_author_filter {
	margin-top: 20px;
}
.search_time {
	padding-left:  3px;
	font-size: 13px;
	color: var(--search-time-color);
}
.search_bits {
	margin-top: 20px;
}
.search_highlighted_text {
	color: var(--search-highlighted-color);
}
.search_bit {
	margin-bottom: 20px;
}
.search_bit_snippet {
	font-size: 18px;
	color: var(--search-bit-snippet-color);
}
.search_bit_author {
	font-style: italic;
}
.search_bit_length {
	margin-left: 20px;
	font-style:  italic;
	color: var(--search-bit-length-color);
}
.search_bit_title {
	font-size: 20px;
}
.search_bit_title a:link {
	color: var(--search-bit-title-link);
	text-decoration: none;
}
.search_bit_title a:visited  {
	color: var(--search-bit-title-link);
	text-decoration: none;
}
.search_bit_title a:active {
	color: var(--search-bit-title-link);
	text-decoration: none;
}
.search_bit_title a:hover {
	color: var(--search-bit-title-link);
	text-decoration: underline;
}
.search_bit_subtitle1 {

}
.search_bit_subtitle2 {

}
.search_bit_subtitle3 {

}
.search_bit_author_preacher a:link {
	color: var(--search-bit-author-color);
	text-decoration: none;
}
.search_bit_author_preacher a:visited  {
	color: var(--search-bit-author-color);
	text-decoration: none;
}
.search_bit_author_preacher a:active {
	color: var(--search-bit-author-color);
	text-decoration: none;
}
.search_bit_author_preacher a:hover {
	color: var(--search-bit-author-color);
	text-decoration: underline;
}

/* === footer.css === */
/* Footer Dark Mode Variables */
:root {
  --footer-bg: linear-gradient(135deg, #18274b 0%, #304e96 100%);
  --footer-text: #fff;
  --footer-link-hover: #7fd1de;
  --footer-input-bg: #fff;
  --footer-input-border: #ced4da;
  --footer-input-text: #212529;
}

[data-theme="dark"] {
  --footer-bg: linear-gradient(135deg, rgba(8, 8, 18, 0.9) 0%, rgba(18, 18, 34, 0.9) 100%);
  --footer-text: #e0e0e0;
  --footer-link-hover: #7fd1de;
  --footer-input-bg: #252538;
  --footer-input-border: #404055;
  --footer-input-text: #e0e0e0;
}

.footer_area {
	padding-top: 30px;
	color: var(--footer-text);
	background: var(--footer-bg);
}

/* Dark mode: glassy translucent footer so the cosmic background shows through,
   with a clearly visible top border separating it from page content. */
[data-theme="dark"] .footer_area {
	backdrop-filter: blur(14px) saturate(1.1);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	border-top: 1px solid rgba(139, 92, 246, 0.25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Dark mode form styling */
[data-theme="dark"] .footer_area .form-control {
  background-color: var(--footer-input-bg);
  border-color: var(--footer-input-border);
  color: var(--footer-input-text);
}

[data-theme="dark"] .footer_area .form-control::placeholder {
  color: #a0a0a0;
}

.footer-nav-link a:link {
	color: #fff;
	text-decoration: none;
}
.footer-nav-link a:visited  {
	color: #fff;
	text-decoration: none;
}
.footer-nav-link a:active {
	color: #fff;
	text-decoration: none;
}
.footer-nav-link a:hover {
	color: #fff;
	text-decoration: underline;
}
.footer-nav-item {
	color: #fff;
}
.footer-nav-item a:link {
	color: #fff;
	text-decoration: none;
}
.footer-nav-item a:visited  {
	color: #fff;
	text-decoration: none;
}
.footer-nav-item a:active {
	color: #fff;
	text-decoration: none;
}
.footer-nav-item a:hover {
	color: #7fd1de;
}
.footer_pristine_cms_copyright {
	color: #fff;
}
.footer_pristine_cms_copyright a:link {
	color: #fff;
	text-decoration: none;
}
.footer_pristine_cms_copyright a:visited  {
	color: #fff;
	text-decoration: none;
}
.footer_pristine_cms_copyright a:active {
	color: #fff;
	text-decoration: none;
}
.footer_pristine_cms_copyright a:hover {
	color: #7fd1de;
}

/* === SermonAudio Footer Embed Fix === */

.sermonaudio-footer {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Browser (playlist) iframe */
.sermonaudio-footer iframe[src*="embed.sermonaudio.com/browser"] {
  display: block;
  width: 100%;
  height: 360px;      /* adjust if you want taller */
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

/* Player wrapper */
.sermonaudio-footer .player-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  margin: 0;
}

/* Player iframe */
.sermonaudio-footer .player-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}
a[href*="youtube.com"] svg {
  fill: currentColor;
}

a[href*="youtube.com"]:hover svg {
  fill: #ff4444;
}
a[href*="facebook.com"] svg {
  fill: currentColor;
}

a[href*="facebook.com"]:hover svg {
  fill: #4a9ff5;
}
a[href*="sermonaudio.com"] svg {
  fill: currentColor;
}

a[href*="sermonaudio.com"]:hover svg {
  fill: #5a7fff; /* SermonAudio blue - brighter */
}

a[href*="apple.com"] svg {
  fill: currentColor;
}
a[href*="apple.com"]:hover svg {
  fill: #c792ff;
}

a[href*="spotify.com"] svg {
  fill: currentColor;
}
a[href*="spotify.com"]:hover svg {
  fill: #5eff8a;
}

.apple-podcasts-link svg,
.spotify-link svg {
  fill: currentColor;
  transition: fill 0.2s ease;
}

/* Apple Podcasts purple - brighter */
.apple-podcasts-link:hover svg {
  fill: #c792ff;
}

/* Spotify green - brighter */
.spotify-link:hover svg {
  fill: #5eff8a;
}
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: bottom center;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus-visible::after,
.tooltip:focus-visible::before {
  opacity: 1;
}
/* base icon link */
.icon-link{
  color: #fff;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 5;
}

.icon-link svg{
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
  transition: fill .2s ease;
}

/* tooltip */
.icon-link[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  background: rgba(0,0,0,.9);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 99999;
}

.icon-link:hover::after,
.icon-link:focus-visible::after{
  opacity: 1;
  visibility: visible;
}
.podcast-badge {
  height: 40px;        /* visual baseline */
  width: auto;
  object-fit: contain;
}

/* === paging.css === */
/* Until I can take the html out of paging_functions this is the most customization
that is allowed for paging.  All of the paging_gap classes cannot be found in the templates
but the paging_functions.php file.  To fix this I'm going to have to create a paging_bit_template
and rewrite much of that section.  It's pretty difficult, and I'm not sure it's worth it at
this point.  If you really really need this enhancement, send an email to brandan@pristinecms.com
and I can add I'll prioritize your request.  */

/* Dark Mode CSS Variables */
:root {
    --paging-link-color: #18274b;
    --paging-current-color: #006aff;
    --paging-text-color: #212529;
}

[data-theme="dark"] {
    --paging-link-color: #6ea8fe;
    --paging-current-color: #6ea8fe;
    --paging-text-color: #e0e0e0;
}

.paging_gap_1 { /* Base Pixels */
	margin-left: 3px;
	margin-right: 3px;
}
.paging_gap_2 {  /* Base Pixels x 2 */
	margin-left: 6px;
	margin-right: 6px;
}
.paging_gap_3 { /* Base Pixels x 3 */
	margin-left:  9px;
	margin-right: 9px;
}
.paging_gap_right_2 { /* Base Pixels x 4 */
	margin-right: 12px;
}
.paging_gap_left_5 {  /* Base Pixels * 10 */
	margin-left: 30px;
}
.paging_gap_left_3 {  /* Base Pixels * 6 */
	margin-left:  18px;
}
.paging_current_page { /* Highlighed Page */
	color: var(--paging-current-color);
}
.paging_links {
	margin-top:  20px;
	text-align:  center;
	font-size: 20px;
	color: var(--paging-text-color);
}
.paging_links a:link {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_links a:visited  {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_links a:active {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_links a:hover {
	color: var(--paging-link-color);
	text-decoration: underline;
}
.paging_order_by_sort_by {
	text-align: center;
	color: var(--paging-text-color);
}
.paging_order_by_sort_by a:link {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_order_by_sort_by a:visited  {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_order_by_sort_by a:active {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_order_by_sort_by a:hover {
	color: var(--paging-link-color);
	text-decoration: underline;
}

/* === floating-stack.css === */
/**
 * Unified Floating Widget Stack
 * Container for all floating widgets: admin toolbar, cart button, back-to-top
 *
 * Priority order (bottom to top): Admin > Cart > Back-to-Top
 * This ensures proper stacking without overlap or click interception
 */

/* ============================================================================
   MAIN STACK CONTAINER
   ============================================================================ */
.floating-stack {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column-reverse; /* Items stack from bottom up */
    align-items: flex-end;
    gap: 12px;
    z-index: 9000; /* Base z-index for the container */
    pointer-events: none; /* Container doesn't block clicks */
}

/* All direct children receive pointer events */
.floating-stack > * {
    pointer-events: auto;
}

/* ============================================================================
   STACK ITEMS - Base styles for all floating widgets in the stack
   ============================================================================ */
.floating-stack-item {
    /* Reset any conflicting fixed positioning from child components */
    position: relative !important;
    bottom: auto !important;
    right: auto !important;

    /* Ensure proper stacking context */
    isolation: isolate;
}

/* ============================================================================
   ADMIN TOOLBAR WRAPPER
   Admin toolbar has its own internal structure, so we just wrap it
   ============================================================================ */
.floating-stack .pg-admin-toolbar {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 3; /* Highest priority in stack */
}

/* ============================================================================
   CART BUTTON IN STACK
   ============================================================================ */
.floating-stack .floating-cart-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 2; /* Middle priority */
}

/* ============================================================================
   BACK-TO-TOP BUTTON IN STACK
   ============================================================================ */
.floating-stack .back-to-top-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1; /* Lowest priority (appears at bottom of stack) */
    display: none; /* Hidden by default, shown via JS */
}

/* When visible class is added by JS, show and animate */
.floating-stack .back-to-top-btn.visible {
    display: flex;
    animation: slideUp 0.3s ease forwards;
}

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

/* (Book music button removed -- music now accessed via brain menu) */

/* ============================================================================
   BOOK MODAL BUTTON IN STACK
   ============================================================================ */
.floating-stack .book-modal-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    padding: 0;
}

.book-modal-btn-emoji {
    font-size: 1.35rem;
    line-height: 1;
}

.floating-stack .book-modal-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.floating-stack .book-modal-btn:active {
    transform: scale(0.95);
}

[data-theme="dark"] .floating-stack .book-modal-btn {
    background: rgba(50, 50, 70, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .floating-stack .book-modal-btn:hover {
    background: rgba(70, 70, 100, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   BIBLE LOOKUP BUTTON IN STACK
   ============================================================================ */
.floating-stack .bible-lookup-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1;
    width: 48px;
    height: 48px;
    /* Display is controlled by media query, but visibility by JS */
}

/* In stack, visible class controls opacity/visibility */
.floating-stack .bible-lookup-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Tablet and up - slightly more spacing */
@media (min-width: 576px) {
    .floating-stack {
        bottom: 20px;
        right: 20px;
        gap: 14px;
    }
}

/* Desktop - more spacing, adjust for larger buttons */
@media (min-width: 768px) {
    .floating-stack {
        bottom: 24px;
        right: 24px;
        gap: 16px;
    }
}

/* Lift above the persistent bottom music bar (64px) on desktop.
   Placed after other media queries so it wins source-order cascade. */
@media (min-width: 769px) {
    .floating-stack { bottom: 88px !important; }
}
/* Mobile: music bar is ~84px (two-row layout with its own progress line), lift stack clear of it */
@media (max-width: 768px) {
    .floating-stack { bottom: 100px !important; }
}
@media (max-width: 480px) {
    .floating-stack { bottom: 108px !important; }
}

/* ============================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   Reduce vertical spacing in landscape to prevent stack overflow
   ============================================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .floating-stack {
        bottom: 12px;
        right: 12px;
        gap: 8px;
    }

    /* Smaller buttons in cramped landscape */
    .floating-stack .floating-cart-btn {
        width: 44px;
        height: 44px;
    }

    .floating-stack .back-to-top-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .book-modal-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .book-modal-btn .book-modal-btn-emoji {
        font-size: 1.15rem;
    }

    .floating-stack .bible-lookup-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .pg-admin-toggle {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }
}

/* ============================================================================
   SAFE AREA INSETS (for notched devices like iPhone)
   ============================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .floating-stack {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }

    @media (min-width: 768px) {
        .floating-stack {
            bottom: calc(24px + env(safe-area-inset-bottom));
            right: calc(24px + env(safe-area-inset-right));
        }
    }
}

/* ============================================================================
   BRAIN MENU WRAP
   ============================================================================ */
.brain-menu-wrap {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================================
   BRAIN DROPDOWN MENU
   ============================================================================ */
.brain-menu {
    position: absolute;
    bottom: 58px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.brain-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.brain-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.brain-menu-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.brain-menu-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.brain-menu-label {
    font-weight: 500;
}

[data-theme="dark"] .brain-menu-item {
    background: rgba(40, 40, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .brain-menu-item:hover {
    background: rgba(60, 60, 85, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   BRAIN BUTTON -- MENU OPEN STATE
   ============================================================================ */
.book-modal-btn.menu-open {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .book-modal-btn.menu-open {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.4);
}

/* ============================================================================
   NOW PLAYING INDICATOR
   ============================================================================ */
.brain-now-playing {
    position: absolute;
    bottom: -2px;
    right: 56px;
    white-space: nowrap;
    font-size: 0.7rem;
    color: #7c3aed;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 2px 10px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: nowPlayingPulse 2s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="dark"] .brain-now-playing {
    background: rgba(40, 40, 60, 0.85);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

@keyframes nowPlayingPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* ============================================================================
   BRAIN BUTTON BOUNCE (when music is playing)
   ============================================================================ */
.book-modal-btn.brain-btn-bounce {
    animation: brainBounce 2s ease-in-out infinite;
}

@keyframes brainBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-2px); }
}

/* ============================================================================
   MUSIC NOTE PARTICLES
   ============================================================================ */
.music-note-particle {
    position: absolute;
    bottom: 48px;
    font-size: 1rem;
    color: #7c3aed;
    pointer-events: none;
    animation: noteFloat 2s ease-out forwards;
    opacity: 0;
    z-index: -1;
}

[data-theme="dark"] .music-note-particle {
    color: #a78bfa;
}

@keyframes noteFloat {
    0% {
        opacity: 0.8;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) rotate(15deg);
    }
}

/* ============================================================================
   MUSIC PLAYING STATE ON BRAIN BUTTON
   ============================================================================ */
.book-modal-btn.music-playing {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .book-modal-btn.music-playing {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   ACCESSIBILITY: REDUCE MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .floating-stack,
    .floating-stack > * {
        transition: none;
    }
    .book-modal-btn.brain-btn-bounce,
    .music-note-particle {
        animation: none;
    }
}

/* ============================================================================
   PRINT STYLES - Hide floating widgets when printing
   ============================================================================ */
@media print {
    .floating-stack {
        display: none !important;
    }
}

/* === mini-player.css === */
/**
 * Mini Player - Persistent audio player bar
 * Fixed to bottom of viewport, allows listening while browsing
 */

/* ============================================================================
   MINI PLAYER BAR
   ============================================================================ */
.mini-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    font-size: 14px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mini-player *,
.mini-player *::before,
.mini-player *::after {
    box-sizing: border-box;
}

.mini-player.active {
    transform: translateY(0);
}

.mini-player-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

/* ============================================================================
   SERMON INFO (title + preacher)
   ============================================================================ */
.mini-player-info {
    flex: 0 0 auto;
    max-width: 250px;
    min-width: 0;
    line-height: 1.3;
}

.mini-player-title {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.mini-player-title:hover {
    color: #90caf9;
    text-decoration: underline;
}

.mini-player-preacher {
    display: block;
    color: #9e9e9e;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   PLAYBACK CONTROLS
   ============================================================================ */
.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.mini-player-btn {
    background: none;
    border: none;
    color: #e0e0e0;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 18px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.mini-player-btn:hover {
    color: #fff;
}

.mini-player-btn.play-btn {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.mini-player-btn.play-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */
.mini-player-progress-wrap {
    flex: 1;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-player-progress {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: height 0.15s;
}

.mini-player-progress:hover {
    height: 6px;
}

.mini-player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.mini-player-progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.mini-player-progress::-webkit-slider-runnable-track {
    border-radius: 2px;
}

.mini-player-progress::-moz-range-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    height: 4px;
}

.mini-player-time {
    color: #9e9e9e;
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 90px;
    text-align: center;
}

/* ============================================================================
   VOLUME CONTROL
   ============================================================================ */

/* iOS Safari doesn't allow JS to control audio.volume (hardware-only).
   Hide volume/mute on touch devices since they do nothing. */
@media (pointer: coarse) {
    .mini-player-btn.vol-btn,
    .mini-player-volume {
        display: none !important;
    }
}

.mini-player-btn.vol-btn {
    font-size: 16px;
}

.mini-player-volume {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

.mini-player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.mini-player-volume::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
}

.mini-player-volume::-moz-range-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    height: 4px;
}

/* ============================================================================
   SPEED CONTROL
   ============================================================================ */
.mini-player-speed {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}

.mini-player-speed:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mini-player-speed option {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* ============================================================================
   CLOSE BUTTON
   ============================================================================ */
.mini-player-close {
    background: none;
    border: none;
    color: #9e9e9e;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.mini-player-close:hover {
    color: #fff;
}

/* ============================================================================
   BODY PADDING (prevent content from being hidden behind mini player)
   ============================================================================ */
body.mini-player-active {
    padding-bottom: 64px;
}

/* Shift the floating stack up above the mini player bar */
body.mini-player-active .floating-stack {
    bottom: 80px !important;
}

/* Shift toast notifications up above the mini player bar */
body.mini-player-active .favorites-login-toast,
body.mini-player-active .favorites-toast {
    bottom: 64px !important;
}

/* Ensure back-to-top stays aligned within the stack when mini player is active */
body.mini-player-active .floating-stack .back-to-top-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
}

/* ============================================================================
   SERMON PLAYER ACTION BUTTONS (toggle + listen while browsing)
   ============================================================================ */
.sermon-player-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sermon-player-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #1e5631 0%, #0d3320 100%);
    color: #d4edda;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sermon-player-btn:hover {
    background: linear-gradient(135deg, #267340 0%, #154228 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.sermon-player-btn i {
    font-size: 15px;
}

/* Hide the button when mini player is already active for this sermon */
.listen-while-browsing-btn.active-sermon {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */
.mini-player-loading .play-btn {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================================
   RESUME MODAL (shown when returning to site with saved state)
   ============================================================================ */
.mini-player-resume-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(8, 6, 18, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: miniPlayerResumeFadeIn 0.18s ease-out;
}

@keyframes miniPlayerResumeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mini-player-resume-backdrop.mini-player-resume-closing {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.mini-player-resume-modal {
    background: linear-gradient(160deg, #1f1535 0%, #0f0c1f 100%);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 18px;
    padding: 2rem 2rem 1.6rem;
    max-width: 460px;
    width: 100%;
    color: #e9e7f5;
    text-align: center;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    animation: miniPlayerResumePopIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

@keyframes miniPlayerResumePopIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.mini-player-resume-kicker {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #a78bfa;
    margin-bottom: 0.7rem;
    font-weight: 600;
}

.mini-player-resume-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.35rem;
    word-break: break-word;
}

.mini-player-resume-preacher {
    font-size: 0.95rem;
    color: rgba(233, 231, 245, 0.78);
    margin-bottom: 0.5rem;
}

.mini-player-resume-position {
    font-size: 0.85rem;
    color: rgba(233, 231, 245, 0.6);
    font-variant-numeric: tabular-nums;
    margin-bottom: 1.6rem;
    letter-spacing: 0.02em;
}

.mini-player-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
    margin-bottom: 0.6rem;
}

.mini-player-resume-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.5);
}

.mini-player-resume-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

.mini-player-resume-btn .bi-play-fill {
    font-size: 1.4rem;
    margin-left: -4px;
}

.mini-player-resume-dismiss-btn {
    background: transparent;
    color: rgba(233, 231, 245, 0.6);
    border: none;
    font-size: 0.92rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}

.mini-player-resume-dismiss-btn:hover {
    color: rgba(233, 231, 245, 0.95);
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .mini-player-resume-modal {
    background: linear-gradient(160deg, #ffffff 0%, #f3f1fb 100%);
    color: #1a1a2e;
    border-color: rgba(139, 92, 246, 0.32);
}
html[data-theme="light"] .mini-player-resume-title { color: #1a1a2e; }
html[data-theme="light"] .mini-player-resume-preacher { color: rgba(26, 26, 46, 0.75); }
html[data-theme="light"] .mini-player-resume-position { color: rgba(26, 26, 46, 0.6); }
html[data-theme="light"] .mini-player-resume-kicker { color: #6d28d9; }
html[data-theme="light"] .mini-player-resume-dismiss-btn { color: rgba(26, 26, 46, 0.65); }
html[data-theme="light"] .mini-player-resume-dismiss-btn:hover {
    color: rgba(26, 26, 46, 0.95);
    background: rgba(139, 92, 246, 0.08);
}

@media (max-width: 480px) {
    .mini-player-resume-modal { padding: 1.6rem 1.4rem 1.3rem; border-radius: 16px; }
    .mini-player-resume-title { font-size: 1.25rem; }
    .mini-player-resume-btn { font-size: 1rem; padding: 0.85rem 1.25rem; }
}

/* ============================================================================
   RESPONSIVE - MOBILE
   ============================================================================ */
@media (max-width: 768px) {
    .mini-player-inner {
        flex-wrap: wrap;
        padding: 6px 10px 8px;
        gap: 2px 6px;
    }

    /* Row 1: title/preacher + close button */
    .mini-player-info {
        flex: 1 1 auto;
        max-width: calc(100% - 36px);
        order: 1;
    }

    .mini-player-close {
        order: 2;
        margin-left: auto;
    }

    /* Row 2: compact controls */
    .mini-player-controls {
        order: 3;
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    /* Hide skip buttons, volume, speed on mobile — keep it simple */
    #mini-player-skip-back,
    #mini-player-skip-fwd,
    .mini-player-btn.vol-btn,
    .mini-player-volume,
    .mini-player-speed {
        display: none !important;
    }

    /* Smaller play button on mobile */
    .mini-player-btn.play-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
        flex-shrink: 0;
    }

    /* Progress bar fills remaining space */
    .mini-player-progress-wrap {
        flex: 1 1 0%;
        min-width: 0;
    }

    .mini-player-progress {
        min-width: 0;
    }

    .mini-player-time {
        min-width: 0;
        font-size: 11px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    body.mini-player-active {
        padding-bottom: 80px;
    }

    body.mini-player-active .floating-stack {
        bottom: 96px !important;
    }

    body.mini-player-active .favorites-login-toast,
    body.mini-player-active .favorites-toast {
        bottom: 80px !important;
    }
}

/* === back-to-top.css === */
/**
 * Back to Top Button - Glassmorphism Style
 * Mobile-only floating button to scroll back to top
 *
 * Note: When used within .floating-stack, position is overridden to relative
 */

/* Back to Top Button - Glassmorphism */
.back-to-top-btn {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #333;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 900;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    align-items: center;
    justify-content: center;
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.back-to-top-btn:active {
    transform: scale(0.95);
}

/* In stack context, active should not translate */
.floating-stack .back-to-top-btn:active {
    transform: scale(0.95);
}

.back-to-top-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark mode adjustments - matches unified glassmorphism style */
[data-theme="dark"] .back-to-top-btn {
    background: rgba(50, 50, 70, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .back-to-top-btn:hover {
    background: rgba(70, 70, 100, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Only show on mobile (standalone, outside of stack) */
@media (max-width: 767.98px) {
    .back-to-top-btn:not(.floating-stack .back-to-top-btn) {
        display: flex;
    }
}

/* ============================================================================
   FLOATING STACK OVERRIDES
   When button is inside the unified stack container
   Display is controlled entirely by floating-stack.css
   ============================================================================ */
.floating-stack .back-to-top-btn {
    position: relative;
    bottom: auto;
    right: auto;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .back-to-top-btn {
        transition: none;
    }
}

/* === cosmic-dark.css === */
/**
 * Cosmic Dark Mode Background
 * Nebula + starfield + comet applied site-wide in dark mode.
 * Chapter pages (/mind/chapter/*) have their own implementation and skip this.
 */

/* ============================================================================
   BASE: Dark background on html
   ============================================================================ */
[data-theme="dark"] html,
[data-theme="dark"] {
    background: #1a1a2e;
}

/* ============================================================================
   NEBULA
   ============================================================================ */
.cosmic-nebula { display: none; }
[data-theme="dark"] .cosmic-nebula {
    display: block;
    position: fixed;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;  /* Halves nebula brightness while preserving every hue and gradient position */
    animation: cosmicNebulaDrift 80s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 900px 600px at 20% 0%, rgba(139,92,246,0.38), transparent 70%),
        radial-gradient(ellipse 800px 550px at 80% 5%, rgba(234,120,20,0.25), transparent 70%),
        radial-gradient(ellipse 600px 400px at 55% 15%, rgba(255,255,255,0.06), transparent 65%),
        radial-gradient(ellipse 800px 500px at 15% 45%, rgba(139,92,246,0.28), transparent 70%),
        radial-gradient(ellipse 700px 450px at 85% 40%, rgba(234,120,20,0.2), transparent 70%),
        radial-gradient(ellipse 500px 350px at 40% 35%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(ellipse 600px 420px at 70% 55%, rgba(34,197,94,0.2), transparent 70%),
        radial-gradient(ellipse 450px 300px at 25% 70%, rgba(34,197,94,0.12), transparent 65%),
        radial-gradient(ellipse 550px 380px at 90% 75%, rgba(255,255,255,0.05), transparent 65%),
        radial-gradient(ellipse 600px 400px at 50% 85%, rgba(168,85,247,0.28), transparent 70%),
        radial-gradient(ellipse 500px 350px at 10% 100%, rgba(234,88,12,0.18), transparent 70%);
}

@media (max-width: 768px) {
    [data-theme="dark"] .cosmic-nebula {
        background:
            radial-gradient(ellipse 320px 220px at 20% 0%, rgba(139,92,246,0.15), transparent 70%),
            radial-gradient(ellipse 280px 200px at 80% 15%, rgba(234,120,20,0.1), transparent 70%),
            radial-gradient(ellipse 240px 170px at 60% 50%, rgba(34,197,94,0.08), transparent 65%),
            radial-gradient(ellipse 200px 150px at 40% 30%, rgba(255,255,255,0.03), transparent 60%),
            radial-gradient(ellipse 260px 180px at 50% 90%, rgba(168,85,247,0.12), transparent 70%);
    }
}
@media (max-width: 768px) {
    /* No nebula drift on mobile */
    [data-theme="dark"] .cosmic-nebula {
        animation: none !important;
    }
    /* Minimal starfield: layer 1 only, dimmed */
    .cosmic-star-layer-2,
    .cosmic-star-layer-3 { display: none !important; }
    .cosmic-star-layer-1 { opacity: 0.5; animation: none !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
    [data-theme="dark"] .cosmic-nebula { display: none !important; }
}

/* ============================================================================
   STARFIELD
   ============================================================================ */
.cosmic-starfield { display: none; }
[data-theme="dark"] .cosmic-starfield {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.cosmic-star-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

@keyframes cosmicTwinkleSlow {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.25; }
    70% { opacity: 0.75; }
}
@keyframes cosmicTwinkleMed {
    0%, 100% { opacity: 0.85; }
    30% { opacity: 0.15; }
    60% { opacity: 0.65; }
    80% { opacity: 0.3; }
}
@keyframes cosmicTwinkleFast {
    0%, 100% { opacity: 0.75; }
    25% { opacity: 0.1; }
    50% { opacity: 0.85; }
    75% { opacity: 0.2; }
}

/* Layer 1: big bright stars, slow twinkle 7s
   Colors: white, blue-white (Rigel), amber (Betelgeuse), pale yellow (Sun-type), cool red */
.cosmic-star-layer-1 {
    background-image:
        /* Original 9 */
        radial-gradient(4px 4px at 18% 28%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 62% 72%, rgba(255,255,255,0.95), transparent),
        radial-gradient(4.5px 4.5px at 85% 18%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 42% 88%, rgba(200,180,255,0.85), transparent),
        radial-gradient(3px 3px at 75% 45%, rgba(255,200,150,0.8), transparent),
        radial-gradient(4px 4px at 8% 65%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3.5px 3.5px at 28% 52%, rgba(180,210,255,0.85), transparent),
        radial-gradient(4px 4px at 95% 82%, rgba(255,255,255,0.9), transparent),
        radial-gradient(3px 3px at 52% 12%, rgba(255,200,150,0.8), transparent),
        /* New stars with space colors */
        radial-gradient(4px 4px at 35% 8%, rgba(155,190,255,0.95), transparent),        /* blue-white (Rigel) */
        radial-gradient(3.5px 3.5px at 72% 35%, rgba(255,180,100,0.85), transparent),   /* amber (Betelgeuse) */
        radial-gradient(4.5px 4.5px at 12% 82%, rgba(255,255,220,1), rgba(255,255,220,0.2) 50%, transparent), /* pale yellow (Sun) */
        radial-gradient(3px 3px at 58% 55%, rgba(255,150,120,0.7), transparent),         /* cool red */
        radial-gradient(4px 4px at 90% 48%, rgba(155,190,255,0.9), transparent),         /* blue-white */
        radial-gradient(3.5px 3.5px at 22% 38%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3px 3px at 48% 95%, rgba(255,210,160,0.8), transparent),         /* warm amber */
        radial-gradient(4px 4px at 78% 15%, rgba(255,255,240,0.9), transparent),         /* pale yellow */
        radial-gradient(3.5px 3.5px at 5% 45%, rgba(200,180,255,0.85), transparent),    /* lavender */
        /* Extra white + blue-white */
        radial-gradient(4px 4px at 45% 42%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 15% 15%, rgba(155,190,255,0.95), transparent),   /* blue-white */
        radial-gradient(4px 4px at 68% 8%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3px 3px at 32% 62%, rgba(155,190,255,0.9), transparent),         /* blue-white */
        radial-gradient(4.5px 4.5px at 55% 32%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 88% 65%, rgba(180,210,255,0.9), transparent),    /* blue-white */
        radial-gradient(3px 3px at 2% 92%, rgba(255,255,255,0.9), transparent),
        radial-gradient(4px 4px at 72% 88%, rgba(155,190,255,0.85), transparent),        /* blue-white */
        radial-gradient(3.5px 3.5px at 40% 18%, rgba(255,255,255,0.95), transparent);
    /* Gentle twinkle on the big stars only -- layers 2 and 3 stay static for perf */
    animation: cosmicTwinkleSlow 9s ease-in-out infinite;
}

/* Layer 2: medium stars, twinkle 3.5s
   Same color palette at reduced size/opacity */
.cosmic-star-layer-2 {
    background-image:
        /* Original 12 */
        radial-gradient(2.5px 2.5px at 32% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 55% 42%, rgba(200,180,255,0.8), transparent),
        radial-gradient(3px 3px at 78% 62%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2.5px 2.5px at 15% 78%, rgba(255,200,150,0.75), transparent),
        radial-gradient(2px 2px at 92% 35%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 48% 58%, rgba(200,180,255,0.75), transparent),
        radial-gradient(2px 2px at 25% 92%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 68% 8%, rgba(255,200,150,0.8), transparent),
        radial-gradient(2.5px 2.5px at 5% 22%, rgba(180,210,255,0.75), transparent),
        radial-gradient(2px 2px at 88% 68%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 38% 38%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 72% 25%, rgba(255,255,255,0.75), transparent),
        /* New stars */
        radial-gradient(2.5px 2.5px at 10% 55%, rgba(155,190,255,0.8), transparent),    /* blue-white */
        radial-gradient(2px 2px at 42% 72%, rgba(255,180,100,0.7), transparent),         /* amber */
        radial-gradient(3px 3px at 85% 88%, rgba(255,255,220,0.8), transparent),         /* pale yellow */
        radial-gradient(2.5px 2.5px at 60% 18%, rgba(255,150,120,0.6), transparent),     /* cool red */
        radial-gradient(2px 2px at 28% 5%, rgba(155,190,255,0.75), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 75% 48%, rgba(255,210,160,0.7), transparent),     /* warm amber */
        radial-gradient(2px 2px at 50% 85%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 18% 32%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 95% 55%, rgba(255,255,240,0.75), transparent),    /* pale yellow */
        radial-gradient(2px 2px at 35% 62%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 82% 22%, rgba(180,210,255,0.75), transparent),    /* blue-tinted */
        radial-gradient(2px 2px at 62% 38%, rgba(255,180,100,0.65), transparent),        /* amber */
        /* Extra white + blue-white */
        radial-gradient(2.5px 2.5px at 22% 45%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 58% 82%, rgba(155,190,255,0.75), transparent),        /* blue-white */
        radial-gradient(3px 3px at 42% 12%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 8% 68%, rgba(180,210,255,0.75), transparent),    /* blue-white */
        radial-gradient(2px 2px at 75% 32%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 30% 95%, rgba(155,190,255,0.7), transparent),    /* blue-white */
        radial-gradient(2px 2px at 88% 15%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 52% 52%, rgba(180,210,255,0.7), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 15% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 68% 65%, rgba(155,190,255,0.7), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 45% 28%, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 90% 78%, rgba(180,210,255,0.7), transparent);         /* blue-white */
}

/* Layer 3: tiny flickering stars, twinkle 2.2s
   Densest layer -- doubled with color variety */
.cosmic-star-layer-3 {
    background-image:
        /* Original 14 */
        radial-gradient(1.2px 1.2px at 22% 48%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.2px 1.2px at 45% 25%, rgba(200,180,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 68% 82%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.2px 1.2px at 88% 55%, rgba(255,200,150,0.65), transparent),
        radial-gradient(1.2px 1.2px at 12% 38%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 52% 72%, rgba(200,180,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 35% 5%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 82% 28%, rgba(255,200,150,0.6), transparent),
        radial-gradient(1.2px 1.2px at 5% 85%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.5px 1.5px at 72% 48%, rgba(200,180,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 18% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 62% 95%, rgba(180,210,255,0.55), transparent),
        radial-gradient(1.5px 1.5px at 95% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 42% 62%, rgba(255,200,150,0.55), transparent),
        /* New stars */
        radial-gradient(1.2px 1.2px at 8% 22%, rgba(155,190,255,0.65), transparent),    /* blue-white */
        radial-gradient(1.5px 1.5px at 30% 75%, rgba(255,180,100,0.55), transparent),   /* amber */
        radial-gradient(1.2px 1.2px at 55% 8%, rgba(255,255,220,0.6), transparent),     /* pale yellow */
        radial-gradient(1.2px 1.2px at 78% 42%, rgba(255,150,120,0.5), transparent),    /* cool red */
        radial-gradient(1.5px 1.5px at 15% 58%, rgba(155,190,255,0.6), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 48% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 92% 72%, rgba(255,210,160,0.55), transparent),   /* warm amber */
        radial-gradient(1.5px 1.5px at 25% 88%, rgba(200,180,255,0.5), transparent),
        radial-gradient(1.2px 1.2px at 65% 15%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 38% 48%, rgba(180,210,255,0.5), transparent),    /* blue-tinted */
        radial-gradient(1.5px 1.5px at 85% 8%, rgba(255,180,100,0.5), transparent),     /* amber */
        radial-gradient(1.2px 1.2px at 2% 68%, rgba(255,255,240,0.55), transparent),    /* pale yellow */
        radial-gradient(1.2px 1.2px at 58% 52%, rgba(255,150,120,0.45), transparent),   /* cool red */
        radial-gradient(1.5px 1.5px at 75% 92%, rgba(155,190,255,0.55), transparent),   /* blue-white */
        /* Extra white + blue-white */
        radial-gradient(1.2px 1.2px at 28% 32%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 42% 78%, rgba(155,190,255,0.6), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 72% 18%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 10% 52%, rgba(180,210,255,0.55), transparent),   /* blue-white */
        radial-gradient(1.5px 1.5px at 88% 38%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 52% 88%, rgba(155,190,255,0.5), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 32% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 68% 58%, rgba(180,210,255,0.55), transparent),   /* blue-white */
        radial-gradient(1.2px 1.2px at 15% 72%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 82% 5%, rgba(155,190,255,0.5), transparent),     /* blue-white */
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 95% 62%, rgba(180,210,255,0.5), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 20% 92%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.5px 1.5px at 60% 28%, rgba(155,190,255,0.55), transparent);   /* blue-white */
}

/* ============================================================================
   COMET
   ============================================================================ */
.cosmic-comet { display: none; }
[data-theme="dark"] .cosmic-comet {
    display: block;
    position: fixed;
    top: -100px;
    left: 88vw;
    pointer-events: none;
    z-index: 0;
    animation: cometDrift 420s linear infinite;
    /* Uniformly halve the rendered brightness of head + tail + glows. Applied
       at the parent so the inner shimmer/pulse animations still work. */
    filter: brightness(0.5);
}
/* Falling: top-center to bottom-left along a gentle arc. Tail rotation is
   synchronized to the position keyframes so it tracks the direction of motion:
   steeper during the first three quarters of the descent, flattening toward
   the horizontal exit off the left edge. */
@keyframes cometDrift {
    0%   { top: -100px; left: 88vw;   transform: rotate(-35deg); opacity: 0; }
    2%   { opacity: 1; }
    25%  { top: 18vh;   left: 62vw;   transform: rotate(-34deg); }
    50%  { top: 42vh;   left: 38vw;   transform: rotate(-32deg); }
    75%  { top: 68vh;   left: 14vw;   transform: rotate(-28deg); }
    95%  { opacity: 1; }
    100% { top: 100vh;  left: -500px; transform: rotate(-22deg); opacity: 0; }
}
/* Tail: SVG-rendered Bezier curve so the tail actually bends through the arc
   (a flat gradient line can't show curvature, only rotate). The drop-shadow
   filters wrap the SVG stroke for the soft blue/purple glow. */
.cosmic-comet-tail {
    width: 420px;
    height: 80px;
    filter:
        drop-shadow(0 0 8px rgba(200, 225, 255, 0.8))
        drop-shadow(0 0 20px rgba(180, 215, 255, 0.6))
        drop-shadow(0 0 45px rgba(160, 200, 255, 0.35))
        drop-shadow(0 0 80px rgba(139, 92, 246, 0.18));
    animation: cosmicCometShimmer 10s ease-in-out infinite;
}
.cosmic-comet-tail svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.cosmic-comet-tail::before,
.cosmic-comet-tail::after { display: none; }
@keyframes cosmicCometShimmer {
    0%, 100% {
        opacity: 0.7;
        filter: blur(1px)
            drop-shadow(0 0 8px rgba(200, 225, 255, 0.8))
            drop-shadow(0 0 20px rgba(180, 215, 255, 0.6))
            drop-shadow(0 0 45px rgba(160, 200, 255, 0.35))
            drop-shadow(0 0 80px rgba(139, 92, 246, 0.18));
    }
    20% {
        opacity: 1;
        filter: blur(0.5px)
            drop-shadow(0 0 12px rgba(220, 240, 255, 1))
            drop-shadow(0 0 30px rgba(200, 225, 255, 0.8))
            drop-shadow(0 0 60px rgba(180, 215, 255, 0.5))
            drop-shadow(0 0 100px rgba(139, 92, 246, 0.3));
    }
    45% {
        opacity: 0.55;
        filter: blur(1.5px)
            drop-shadow(0 0 5px rgba(200, 225, 255, 0.6))
            drop-shadow(0 0 14px rgba(180, 215, 255, 0.4))
            drop-shadow(0 0 32px rgba(160, 200, 255, 0.22))
            drop-shadow(0 0 60px rgba(139, 92, 246, 0.1));
    }
    70% {
        opacity: 0.9;
        filter: blur(0.7px)
            drop-shadow(0 0 10px rgba(220, 240, 255, 0.95))
            drop-shadow(0 0 25px rgba(200, 225, 255, 0.7))
            drop-shadow(0 0 55px rgba(180, 215, 255, 0.45))
            drop-shadow(0 0 90px rgba(139, 92, 246, 0.25));
    }
}
/* Head: glowing sphere that blends into the bright tail end */
.cosmic-comet-head {
    position: absolute;
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(220, 240, 255, 0.5) 40%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.7),
        0 0 20px rgba(200, 225, 255, 0.5),
        0 0 40px rgba(180, 215, 255, 0.3),
        0 0 65px rgba(160, 200, 255, 0.15),
        0 0 100px rgba(139, 92, 246, 0.08);
    animation: cosmicCometPulse 10s ease-in-out infinite;
}
.cosmic-comet-head::before { display: none; }
@keyframes cosmicCometPulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 255, 255, 0.7),
            0 0 20px rgba(200, 225, 255, 0.5),
            0 0 40px rgba(180, 215, 255, 0.3),
            0 0 65px rgba(160, 200, 255, 0.15),
            0 0 100px rgba(139, 92, 246, 0.08);
    }
    20% {
        box-shadow:
            0 0 14px rgba(255, 255, 255, 0.95),
            0 0 32px rgba(220, 240, 255, 0.8),
            0 0 60px rgba(200, 225, 255, 0.5),
            0 0 95px rgba(180, 215, 255, 0.25),
            0 0 140px rgba(139, 92, 246, 0.15);
    }
    45% {
        box-shadow:
            0 0 6px rgba(255, 255, 255, 0.55),
            0 0 15px rgba(200, 225, 255, 0.4),
            0 0 30px rgba(180, 215, 255, 0.2),
            0 0 50px rgba(160, 200, 255, 0.1),
            0 0 80px rgba(139, 92, 246, 0.05);
    }
    70% {
        box-shadow:
            0 0 12px rgba(255, 255, 255, 0.85),
            0 0 28px rgba(220, 240, 255, 0.7),
            0 0 52px rgba(200, 225, 255, 0.45),
            0 0 85px rgba(180, 215, 255, 0.2),
            0 0 125px rgba(139, 92, 246, 0.12);
    }
}
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) {
    [data-theme="dark"] .cosmic-comet { display: none !important; }
}

/* ============================================================================
   SITE-WIDE DARK MODE TRANSPARENCY
   The cosmic layers are fixed-position at z-index: 0. Everything else paints
   on top. We make body transparent so the nebula/stars show through, and give
   the navbar and footer translucent backgrounds.
   ============================================================================ */
html[data-theme="dark"] body {
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Navbar: translucent so nebula peeks through */
html[data-theme="dark"] #mainNavbar.navbar,
html[data-theme="dark"] nav#mainNavbar {
    background-color: rgba(26, 26, 46, 0.85) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Footer: translucent */
html[data-theme="dark"] .footer_area {
    background: rgba(26, 26, 46, 0.88) !important;
}

/* Dropdowns should stay opaque for readability */
html[data-theme="dark"] .dropdown-menu {
    background-color: #252538 !important;
}

.cosmic-aurora { display: none; }

/* ============================================================================
   NEBULA DRIFT -- slow float so the background never feels frozen
   ============================================================================ */
@keyframes cosmicNebulaDrift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(12px, -8px); }
    50%  { transform: translate(-6px, 10px); }
    75%  { transform: translate(8px, 4px); }
    100% { transform: translate(-10px, -6px); }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .cosmic-nebula,
    .cosmic-star-layer,
    .cosmic-comet-tail,
    .cosmic-comet-head {
        animation: none;
    }
}

/* ============================================================================
   GPU-BASED PERFORMANCE TIERS
   JS detects GPU and sets: cosmic-tier-high, cosmic-tier-medium, cosmic-tier-low
   HIGH: full experience (all layers, animations, parallax)
   MEDIUM: reduced (2 star layers, no comet animation, no parallax)
   LOW: minimal (1 star layer, no comet, no animations, simplified nebula)
   ============================================================================ */

/* --- MEDIUM TIER: keep it pretty but lighter --- */
.cosmic-tier-medium .cosmic-star-layer-3 { display: none !important; }
.cosmic-tier-medium .cosmic-star-layer-1,
.cosmic-tier-medium .cosmic-star-layer-2 {
    animation-duration: 14s !important; /* Slow down twinkle = fewer repaints */
}
.cosmic-tier-medium .cosmic-comet-tail { animation: none !important; }
.cosmic-tier-medium .cosmic-comet-head { animation: none !important; }
.cosmic-tier-medium[data-theme="dark"] .cosmic-nebula,
.cosmic-tier-medium [data-theme="dark"] .cosmic-nebula {
    animation: none !important;
}

/* --- LOW TIER: minimal -- 2 fixed layers total, zero animations --- */
.cosmic-tier-low .cosmic-star-layer-2,
.cosmic-tier-low .cosmic-star-layer-3 { display: none !important; }
.cosmic-tier-low .cosmic-comet { display: none !important; }

.cosmic-tier-low .cosmic-star-layer-1 {
    animation: none !important;
    background-image:
        radial-gradient(3.5px 3.5px at 18% 28%, rgba(255,255,255,0.85), transparent),
        radial-gradient(3px 3px at 62% 72%, rgba(255,255,255,0.8), transparent),
        radial-gradient(3.5px 3.5px at 85% 18%, rgba(155,190,255,0.75), transparent),
        radial-gradient(3px 3px at 42% 88%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 75% 45%, rgba(255,200,150,0.65), transparent),
        radial-gradient(3px 3px at 35% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 8% 65%, rgba(155,190,255,0.7), transparent),
        radial-gradient(3px 3px at 55% 50%, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 28% 62%, rgba(255,255,255,0.65), transparent),
        radial-gradient(2px 2px at 90% 38%, rgba(180,210,255,0.6), transparent),
        radial-gradient(2.5px 2.5px at 48% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 72% 85%, rgba(255,200,150,0.6), transparent) !important;
}

.cosmic-tier-low[data-theme="dark"] .cosmic-nebula,
.cosmic-tier-low [data-theme="dark"] .cosmic-nebula {
    background:
        radial-gradient(ellipse 600px 400px at 20% 10%, rgba(139,92,246,0.3), transparent 70%),
        radial-gradient(ellipse 500px 350px at 80% 30%, rgba(234,120,20,0.18), transparent 70%),
        radial-gradient(ellipse 450px 320px at 60% 60%, rgba(34,197,94,0.15), transparent 70%),
        radial-gradient(ellipse 400px 300px at 40% 85%, rgba(168,85,247,0.2), transparent 70%) !important;
    animation: none !important;
}

/* Backward compat: cosmic-android maps to low tier behavior */
.cosmic-android .cosmic-star-layer-2,
.cosmic-android .cosmic-star-layer-3 { display: none !important; }
.cosmic-android .cosmic-comet { display: none !important; }
.cosmic-android .cosmic-star-layer-1 { animation: none !important; }
.cosmic-android[data-theme="dark"] .cosmic-nebula { animation: none !important; }

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
    .cosmic-nebula,
    .cosmic-starfield,
    .cosmic-comet {
        display: none !important;
    }
}

/* === bible_lookup.css === */
/**
 * Bible Lookup Widget Styles
 *
 * Floating button and modal for KJV Bible verse lookup.
 * Supports light and dark mode via [data-theme="dark"].
 *
 * @package PristineGrace
 * @since 4.3
 */

/* ============================================================================
   FLOATING BUTTON
   ============================================================================ */

.bible-lookup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #333;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.bible-lookup-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.bible-lookup-btn:active {
    transform: scale(0.95);
}

.bible-lookup-btn:focus {
    outline: 2px solid rgba(0, 0, 0, 0.2);
    outline-offset: 2px;
}

/* Dark mode */
[data-theme="dark"] .bible-lookup-btn {
    background: rgba(50, 50, 70, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bible-lookup-btn:hover {
    background: rgba(70, 70, 100, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   MODAL STYLES
   ============================================================================ */

/* Ensure modal sits above floating stack (z-index: 9000) and admin toolbar (9999) */
.bible-modal {
    z-index: 10100 !important;
}

.bible-modal.show ~ .modal-backdrop {
    z-index: 10099 !important;
}

.bible-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.bible-modal .modal-header {
    background: linear-gradient(135deg, #18274b 0%, #304e96 100%);
    color: white;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.bible-modal .modal-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bible-modal .modal-title i {
    font-size: 1.25rem;
}

.bible-modal .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.bible-modal .modal-header .btn-close:hover {
    opacity: 1;
}

.bible-modal .modal-body {
    padding: 1.25rem;
    background: #fdfcfa;
}

.bible-modal .modal-footer {
    border-top: 1px solid #eee;
    background: #f8f7f5;
    padding: 0.75rem 1.25rem;
}

/* Dark mode modal */
[data-theme="dark"] .bible-modal .modal-content {
    background: #1e1e24;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .bible-modal .modal-header {
    background: linear-gradient(135deg, #0d1526 0%, #1a2847 100%);
}

[data-theme="dark"] .bible-modal .modal-body {
    background: #1e1e24;
    color: #e0e0e0;
}

[data-theme="dark"] .bible-modal .modal-footer {
    background: #252530;
    border-top-color: #333;
}

/* ============================================================================
   INPUT MODES (Tabs)
   ============================================================================ */

.bible-input-modes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bible-mode-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
    color: #666;
}

.bible-mode-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.bible-mode-btn.active {
    background: #395ba9;
    border-color: #395ba9;
    color: white;
}

[data-theme="dark"] .bible-mode-btn {
    background: #2a2a35;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .bible-mode-btn:hover {
    background: #333340;
    border-color: #555;
}

[data-theme="dark"] .bible-mode-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: #fff;
}

/* ============================================================================
   INPUT PANELS
   ============================================================================ */

.bible-input-panel {
    display: none;
}

.bible-input-panel.active {
    display: block;
}

/* Text input mode */
.bible-text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.bible-text-input:focus {
    outline: none;
    border-color: #395ba9;
}

.bible-text-input::placeholder {
    color: #999;
}

[data-theme="dark"] .bible-text-input {
    background: #2a2a35;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .bible-text-input:focus {
    border-color: #7fa8e8;
}

[data-theme="dark"] .bible-text-input::placeholder {
    color: #666;
}

/* Example passages - code element styling */
.bible-modal .form-text code {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.85em;
    color: #495057;
    font-family: inherit;
}

[data-theme="dark"] .bible-modal .form-text code {
    background: #343a40;
    border-color: #495057;
    color: #adb5bd;
}

/* Dropdown mode */
.bible-dropdown-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.bible-dropdown-group {
    flex: 1;
    min-width: 120px;
}

.bible-dropdown-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 0.25rem;
}

.bible-dropdown-group select,
.bible-dropdown-group input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

.bible-dropdown-group select:focus,
.bible-dropdown-group input:focus {
    outline: none;
    border-color: #395ba9;
}

[data-theme="dark"] .bible-dropdown-group label {
    color: #888;
}

[data-theme="dark"] .bible-dropdown-group select,
[data-theme="dark"] .bible-dropdown-group input {
    background: #2a2a35;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .bible-dropdown-group select:focus,
[data-theme="dark"] .bible-dropdown-group input:focus {
    border-color: #7fa8e8;
}

/* Verse range separator */
.bible-verse-to {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.5rem;
    color: #999;
    font-size: 0.875rem;
}

/* Verse range hint */
.bible-verse-range-hint {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bible-verse-range-hint i {
    color: #395ba9;
}

[data-theme="dark"] .bible-verse-range-hint {
    background: #2a2a35;
    color: #aaa;
}

[data-theme="dark"] .bible-verse-range-hint i {
    color: #7fa8e8;
}

/* ============================================================================
   BROWSE "GO" BUTTON (compact, inside dropdown panel)
   ============================================================================ */

.bible-browse-go-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    background: #395ba9;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-browse-go-btn:hover {
    background: #2e4a8a;
}

.bible-browse-go-btn:active {
    transform: translateY(0);
}

.bible-browse-go-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .bible-browse-go-btn {
    background: #2a4080;
}

[data-theme="dark"] .bible-browse-go-btn:hover {
    background: #335099;
}

/* ============================================================================
   RECENT LOOKUPS
   ============================================================================ */

.bible-recent-lookups {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.bible-recent-lookups h6 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.5rem;
}

.bible-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bible-recent-item {
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.bible-recent-item:hover {
    background: #e0e0e0;
    color: #333;
}

[data-theme="dark"] .bible-recent-lookups {
    border-top-color: #333;
}

[data-theme="dark"] .bible-recent-item {
    background: #333340;
    color: #aaa;
}

[data-theme="dark"] .bible-recent-item:hover {
    background: #444450;
    color: #ddd;
}

/* ============================================================================
   VERSE DISPLAY
   ============================================================================ */

.bible-verse-result {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #395ba9;
}

/* Back navigation for cross-reference history */
.bible-back-nav {
    margin-bottom: 0.5rem;
}

.bible-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #395ba9;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bible-back-btn:hover {
    background: rgba(57, 91, 169, 0.08);
    color: #2a4580;
}

[data-theme="dark"] .bible-back-btn {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-back-btn:hover {
    background: rgba(127, 168, 232, 0.12);
    color: #9dc0f0;
}

.bible-verse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.bible-verse-reference {
    font-size: 1.25rem;
    font-weight: 600;
    color: #395ba9;
}

.bible-verse-translation {
    font-size: 0.875rem;
    color: #888;
    font-weight: normal;
}

[data-theme="dark"] .bible-verse-result {
    border-top-color: #2a4080;
}

[data-theme="dark"] .bible-verse-reference {
    color: #7fa8e8;
}

/* ============================================================================
   VERSION SELECTOR
   ============================================================================ */

.bible-version-selector-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bible-version-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 26px 3px 8px;
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
    outline: 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 d='M6 8L1 3h10z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    max-width: 200px;
    line-height: 1.4;
}

.bible-version-select:hover {
    border-color: #395ba9;
    color: #395ba9;
}

.bible-version-select:focus {
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.15);
}

[data-theme="dark"] .bible-version-select {
    border-color: #444;
    color: #aaa;
    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 d='M6 8L1 3h10z' fill='%23888'/%3E%3C/svg%3E");
}

[data-theme="dark"] .bible-version-select:hover,
[data-theme="dark"] .bible-version-select:focus {
    border-color: #7fa8e8;
    color: #9dc0f0;
}

/* Disabled Strong's when non-KJV version selected */
.bible-display-option input:disabled + label,
.bible-display-option input:disabled ~ .option-label-full,
.bible-display-option input:disabled ~ .option-label-short {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Verse text display */
.bible-verse-display {
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 1.25rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    max-height: 400px;
    overflow-y: auto;
}

/* Paragraph mode styling */
.bible-verse-display p.bible-verse-text {
    margin-bottom: 1em;
    text-indent: 1.5em;
    text-align: justify;
}

.bible-verse-display p.bible-verse-text:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .bible-verse-display {
    background: #252530;
    border-color: #333;
    color: #e0e0e0;
}

/* Verse numbers */
.verse-number {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.65em;
    vertical-align: super;
    color: #395ba9;
    margin-right: 0.15em;
    font-weight: 700;
}

[data-theme="dark"] .verse-number {
    color: #7fa8e8;
}

/* Pilcrow (paragraph marker) in verse mode */
.bible-pilcrow {
    color: #395ba9;
    font-weight: 600;
    margin-right: 0.25em;
    opacity: 0.7;
    cursor: help;
}

[data-theme="dark"] .bible-pilcrow {
    color: #7fa8e8;
}

/* Psalm titles — [A Psalm of David.] etc. */
.bible-psalm-title {
    text-align: center;
    font-style: italic;
    font-size: 0.85em;
    color: #5a6a7a;
    margin-bottom: 0.4em;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .bible-psalm-title {
    color: #8a9ab0;
}

/* Red letter — Words of Christ */
.bible-red-letter {
    color: #c0392b;
}

[data-theme="dark"] .bible-red-letter {
    color: #e74c3c;
}

/* When red letter toggle is off, revert to inherited color */
.bible-verse-display.red-letter-off .bible-red-letter {
    color: inherit;
}

/* Margin notes — word + dagger wrapped in a hoverable span */
.bible-margin-note {
    position: relative;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(57, 91, 169, 0.45);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    background-color: rgba(57, 91, 169, 0.06);
    border-radius: 2px;
    padding: 0 1px;
    transition: background-color 0.15s ease, text-decoration-color 0.15s ease;
}

.bible-margin-note:hover {
    text-decoration-color: rgba(57, 91, 169, 0.8);
    background-color: rgba(57, 91, 169, 0.12);
}

.bible-margin-symbol {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.6em;
    font-style: normal;
    color: #395ba9;
    vertical-align: super;
    margin-left: 1px;
    opacity: 0.7;
}

.bible-margin-note:hover .bible-margin-symbol {
    opacity: 1;
}

/* Margin note popover — positioned by JS, appended to modal body */
.bible-margin-popover {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    white-space: normal;
    min-width: 140px;
    max-width: 280px;
    width: max-content;
    text-align: center;
    text-decoration: none;
    pointer-events: none;
    z-index: 10110;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.bible-margin-popover.visible {
    opacity: 1;
}

/* Arrow pointing down from popover (default: popover above note) */
.bible-margin-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

/* When popover appears below the note */
.bible-margin-popover.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Dark mode */
[data-theme="dark"] .bible-margin-note {
    text-decoration-color: rgba(127, 168, 232, 0.4);
    background-color: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .bible-margin-note:hover {
    text-decoration-color: rgba(127, 168, 232, 0.8);
    background-color: rgba(127, 168, 232, 0.15);
}

[data-theme="dark"] .bible-margin-symbol {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-margin-popover {
    background: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .bible-margin-popover::after {
    border-top-color: #555;
}

[data-theme="dark"] .bible-margin-popover.below::after {
    border-top-color: transparent;
    border-bottom-color: #555;
}

/* Chapter headers in multi-chapter passages */
.bible-chapter-header {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    color: #395ba9;
    margin: 1rem 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ddd;
}

.bible-chapter-header:first-child {
    margin-top: 0;
}

[data-theme="dark"] .bible-chapter-header {
    color: #7fa8e8;
    border-bottom-color: #444;
}

/* Truncation warning */
.bible-truncation-warning {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #856404;
}

[data-theme="dark"] .bible-truncation-warning {
    background: #3d3520;
    color: #ffc107;
}

/* ============================================================================
   DISPLAY OPTIONS & COPY
   ============================================================================ */

.bible-verse-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.bible-display-options {
    display: flex;
    gap: 1rem;
}

.bible-display-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
}

.bible-display-option input {
    cursor: pointer;
}

/* Short labels hidden on desktop, shown on mobile */
.option-label-short {
    display: none;
}

[data-theme="dark"] .bible-display-option {
    color: #aaa;
}

/* Font size controls */
.bible-font-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.bible-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f8f9fa;
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
}

.bible-font-btn:hover {
    background: #e9ecef;
    border-color: #aaa;
}

.bible-font-btn-decrease {
    font-size: 0.7rem;
}

.bible-font-btn-increase {
    font-size: 0.95rem;
}

[data-theme="dark"] .bible-font-btn {
    background: #2a2a35;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .bible-font-btn:hover {
    background: #363645;
    border-color: #666;
}

/* Copy actions container */
.bible-copy-actions {
    position: relative;
}

/* Copy button group */
.bible-copy-group {
    display: flex;
    gap: 0.25rem;
}

.bible-copy-btn {
    padding: 0.5rem 1rem;
    background: #395ba9;
    color: white;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bible-copy-btn:hover {
    background: #2e4a8a;
}

.bible-copy-dropdown-btn {
    padding: 0.5rem;
    background: #395ba9;
    color: white;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background 0.2s;
}

.bible-copy-dropdown-btn:hover {
    background: #2e4a8a;
}

[data-theme="dark"] .bible-copy-btn,
[data-theme="dark"] .bible-copy-dropdown-btn {
    background: #2a4080;
}

[data-theme="dark"] .bible-copy-btn:hover,
[data-theme="dark"] .bible-copy-dropdown-btn:hover {
    background: #335099;
}

/* Copy format dropdown */
.bible-copy-formats {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050;
    min-width: 200px;
    display: none;
}

.bible-copy-formats.show {
    display: block;
}

.bible-copy-format-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.bible-copy-format-item:hover {
    background: #f5f5f5;
}

.bible-copy-format-item:first-child {
    border-radius: 6px 6px 0 0;
}

.bible-copy-format-item:last-child {
    border-radius: 0 0 6px 6px;
}

[data-theme="dark"] .bible-copy-formats {
    background: #2a2a35;
    border-color: #444;
}

[data-theme="dark"] .bible-copy-format-item {
    color: #ddd;
}

[data-theme="dark"] .bible-copy-format-item:hover {
    background: #333340;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.bible-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #888;
}

.bible-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

/* ============================================================================
   ERROR MESSAGE
   ============================================================================ */

.bible-error {
    padding: 1rem;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
    margin-top: 1rem;
}

[data-theme="dark"] .bible-error {
    background: #3d2020;
    border-color: #5a3030;
    color: #f8d7da;
}

/* ============================================================================
   TOAST NOTIFICATION
   ============================================================================ */

.bible-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: #333;
    color: white;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 10110;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.bible-toast.show {
    opacity: 1;
}

.bible-toast.success {
    background: #28a745;
}

.bible-toast.error {
    background: #dc3545;
}

/* ============================================================================
   DESKTOP TWO-COLUMN LAYOUT
   ============================================================================ */

@media (min-width: 992px) {
    .bible-modal .modal-dialog {
        max-width: 1200px;
    }

    .bible-modal .modal-body {
        display: grid;
        grid-template-columns: minmax(320px, 2fr) minmax(400px, 3fr);
        gap: 1.5rem;
        align-items: start;
        min-height: 400px;
    }

    /* Left column: input controls */
    .bible-input-column {
        display: flex;
        flex-direction: column;
    }

    /* Right column: results */
    .bible-result-column {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Results section adjustments for side-by-side */
    .bible-modal .bible-verse-result {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-left: 2px solid #395ba9;
        padding-left: 1.25rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    [data-theme="dark"] .bible-modal .bible-verse-result {
        border-left-color: #2a4080;
    }

    /* Verse display fills available space */
    .bible-modal .bible-verse-display {
        max-height: calc(70vh - 180px);
        min-height: 200px;
        flex: 1;
    }

    /* Loading/error states span full width when no results */
    .bible-modal .bible-loading,
    .bible-modal .bible-error {
        grid-column: 1 / -1;
    }

    /* History section stays compact on left */
    .bible-history-section {
        margin-top: auto;
        padding-top: 0.75rem;
    }

    /* Empty state message for results column */
    .bible-result-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 300px;
        color: #888;
        text-align: center;
        padding: 2rem;
        border-left: 2px solid #eee;
        padding-left: 1.25rem;
    }

    .bible-result-placeholder i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    [data-theme="dark"] .bible-result-placeholder {
        color: #666;
        border-left-color: #333;
    }

    /* Search results in right column — match verse result styling */
    .bible-modal .bible-search-results {
        border-left: 2px solid #395ba9;
        padding-left: 1.25rem;
        max-height: none;
        border-radius: 0;
        border-top: none;
        border-right: none;
        border-bottom: none;
    }

    [data-theme="dark"] .bible-modal .bible-search-results {
        border-left-color: #2a4080;
    }
}

/* Extra large screens: wider modal */
@media (min-width: 1400px) {
    .bible-modal .modal-dialog {
        max-width: 1320px;
    }

    .bible-modal .modal-body {
        grid-template-columns: minmax(350px, 2fr) minmax(500px, 3fr);
        gap: 2rem;
    }

    .bible-modal .bible-verse-display {
        max-height: calc(75vh - 180px);
    }
}

/* Hide placeholder on mobile/tablet - only useful for desktop two-column */
@media (max-width: 991px) {
    .bible-result-placeholder {
        display: none !important;
    }
}

/* ============================================================================
   RESPONSIVE (MOBILE/TABLET)
   ============================================================================ */

@media (max-width: 576px) {
    .bible-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
    }

    .bible-modal .modal-content {
        border-radius: 12px;
        max-height: calc(100vh - 20px);
        display: flex;
        flex-direction: column;
    }

    .bible-modal .modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .bible-dropdown-row {
        flex-direction: column;
    }

    .bible-dropdown-group {
        min-width: 100%;
    }

    .bible-verse-to {
        display: none;
    }

    .bible-verse-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bible-display-options {
        justify-content: center;
    }

    .bible-copy-group {
        justify-content: center;
    }

    .bible-lookup-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

}

/* Landscape on small devices */
@media (max-height: 500px) and (orientation: landscape) {
    .bible-lookup-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .bible-lookup-btn,
    .bible-mode-btn,
    .bible-browse-go-btn,
    .bible-copy-btn,
    .bible-toast {
        transition: none;
    }

    .bible-lookup-btn:hover {
        transform: none;
    }
}

/* ============================================================================
   ABOUT SECTION
   ============================================================================ */

.bible-about {
    width: 100%;
    text-align: center;
    color: #395ba9;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .bible-about {
    color: #7fa8e8;
}

/* ============================================================================
   FIND PANEL (unified lookup + search)
   ============================================================================ */

/* Find row: input on first line, version + Go on second line */
.bible-find-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: stretch;
}

.bible-find-input-wrapper {
    position: relative;
    flex: 1 1 100%; /* Full width — forces wrap after it */
    min-width: 0;
}

.bible-find-input-wrapper .bible-text-input {
    padding-right: 2.5rem; /* Space for clear button */
}

/* Translation selector in find row */
.bible-find-version {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 1.6rem 0 0.5rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    font-weight: 600;
    color: #395ba9;
    background: #fff;
    cursor: pointer;
    outline: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    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 d='M6 8L1 3h10z' fill='%23395ba9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    transition: border-color 0.2s;
}

.bible-find-version:hover {
    border-color: #395ba9;
}

.bible-find-version:focus {
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.15);
}

[data-theme="dark"] .bible-find-version {
    background-color: #2a2a35;
    border-color: #444;
    color: #7fa8e8;
    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 d='M6 8L1 3h10z' fill='%237fa8e8'/%3E%3C/svg%3E");
}

[data-theme="dark"] .bible-find-version:hover,
[data-theme="dark"] .bible-find-version:focus {
    border-color: #7fa8e8;
}

/* Go / submit button outside the input */
.bible-find-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1rem;
    background: #395ba9;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.bible-find-go:hover {
    background: #2e4a8a;
}

.bible-find-go:active {
    background: #243d75;
}

[data-theme="dark"] .bible-find-go {
    background: #2a4080;
}

[data-theme="dark"] .bible-find-go:hover {
    background: #335099;
}


/* Search options disclosure (hidden by default, revealed after search) */
.bible-find-search-options {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    animation: bibleFindSlideDown 0.2s ease-out;
}

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

[data-theme="dark"] .bible-find-search-options {
    border-top-color: #333;
}

/* Legacy search wrapper (kept for compat) */
.bible-search-input-wrapper {
    position: relative;
}

.bible-search-input {
    padding-right: 2.5rem; /* Space for clear button */
}

.bible-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.9rem;
    line-height: 1;
}

.bible-search-clear:hover {
    color: #666;
}

[data-theme="dark"] .bible-search-clear {
    color: #666;
}

[data-theme="dark"] .bible-search-clear:hover {
    color: #999;
}

/* Search options */
.bible-search-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bible-search-type-label {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

.bible-search-type-select {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    background: #fff;
    color: #333;
    cursor: pointer;
}

.bible-search-type-select:focus {
    outline: none;
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.1);
}

[data-theme="dark"] .bible-search-type-label {
    color: #aaa;
}

[data-theme="dark"] .bible-search-type-select {
    background: #2a2a35;
    border-color: #444;
    color: #ddd;
}

[data-theme="dark"] .bible-search-type-select:focus {
    border-color: #7fa8e8;
    box-shadow: 0 0 0 2px rgba(127, 168, 232, 0.15);
}

/* Search results (right column) */
.bible-search-results {
    margin-top: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for Safari */
}

.bible-search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-size: 0.8rem;
    color: #666;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Back to results button (standalone in right column, between search results and verse result) */
.bible-search-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #395ba9;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: background-color 0.15s, color 0.15s;
}

.bible-search-back-btn:hover {
    background: rgba(57, 91, 169, 0.08);
    color: #2a4580;
}

[data-theme="dark"] .bible-search-back-btn {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-back-btn:hover {
    background: rgba(127, 168, 232, 0.12);
    color: #9dc0f0;
}

.bible-search-results-list {
    /* Content flows naturally, parent handles scrolling */
}

.bible-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.75rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
}

.bible-search-result-item:hover {
    background: #f5f5f5;
}

.bible-search-result-item:last-child {
    border-bottom: none;
}

.bible-search-result-ref {
    font-weight: 600;
    font-size: 0.9rem;
    color: #395ba9;
}

.bible-search-result-text {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bible-search-highlight {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

.bible-search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

[data-theme="dark"] .bible-search-results {
    background: #252530;
    border-color: #444;
}

[data-theme="dark"] .bible-search-results-header {
    background: #2a2a35;
    border-bottom-color: #444;
    color: #888;
}

[data-theme="dark"] .bible-search-result-item {
    border-bottom-color: #333;
}

[data-theme="dark"] .bible-search-result-item:hover {
    background: #2a2a35;
}

[data-theme="dark"] .bible-search-result-ref {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-result-text {
    color: #aaa;
}

[data-theme="dark"] .bible-search-highlight {
    background: #3d3520;
    color: #ffc107;
}

/* ============================================================================
   SEARCH SCOPE FILTER PILLS
   ============================================================================ */

.bible-search-scope {
    margin-bottom: 0.75rem;
}

.bible-scope-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.bible-scope-row-secondary {
    padding-left: 0.25rem;
}

.bible-scope-pill {
    padding: 0.2rem 0.6rem;
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bible-scope-pill:hover {
    background: #e0e0e0;
    color: #333;
}

.bible-scope-pill.active {
    background: #395ba9;
    color: white;
}

[data-theme="dark"] .bible-scope-pill {
    background: #333340;
    color: #aaa;
}

[data-theme="dark"] .bible-scope-pill:hover {
    background: #444450;
    color: #ddd;
}

[data-theme="dark"] .bible-scope-pill.active {
    background: #2a4080;
    color: white;
}

/* ============================================================================
   GROUPED SEARCH RESULTS
   ============================================================================ */

/* Book filter summary bar (horizontal scrollable pills at top of results) */
.bible-search-book-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.bible-search-book-pill {
    padding: 0.15rem 0.5rem;
    background: #e8ecf4;
    border: none;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bible-search-book-pill:hover {
    background: #d0d8ec;
}

.bible-search-book-count {
    background: #395ba9;
    color: white;
    padding: 0 0.35rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

[data-theme="dark"] .bible-search-book-summary {
    background: #252530;
    border-bottom-color: #333;
}

[data-theme="dark"] .bible-search-book-pill {
    background: #2a3050;
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-book-pill:hover {
    background: #334060;
}

[data-theme="dark"] .bible-search-book-count {
    background: #2a4080;
}

/* Collapsible book group headers */
.bible-search-book-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #f5f5f5;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.bible-search-book-header:hover {
    background: #ebebeb;
}

.bible-search-book-toggle {
    font-size: 0.75rem;
    color: #888;
    width: 1rem;
    text-align: center;
}

.bible-search-book-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #395ba9;
    flex: 1;
}

.bible-search-book-badge {
    background: #e8ecf4;
    color: #395ba9;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

[data-theme="dark"] .bible-search-book-header {
    background: #2a2a35;
    border-bottom-color: #333;
}

[data-theme="dark"] .bible-search-book-header:hover {
    background: #333340;
}

[data-theme="dark"] .bible-search-book-name {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-book-badge {
    background: #2a3050;
    color: #7fa8e8;
}

/* Results within a book group */
.bible-search-book-results .bible-search-result-item {
    padding-left: 2rem;
}

/* Mobile adjustments for scope pills and grouped results */
@media (max-width: 576px) {
    .bible-scope-pill {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }

    .bible-search-book-results .bible-search-result-item {
        padding-left: 1.25rem;
    }

    .bible-search-book-pill {
        font-size: 0.65rem;
    }
}

/* ============================================================================
   HISTORY SECTION
   ============================================================================ */

.bible-history-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.bible-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bible-history-header h6 {
    margin-bottom: 0;
}

.bible-history-section h6 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.75rem;
}

.bible-history-clear-btn {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #888;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-history-clear-btn:hover {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

[data-theme="dark"] .bible-history-clear-btn {
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .bible-history-clear-btn:hover {
    background: #3d2020;
    border-color: #5a3030;
    color: #f8d7da;
}

.bible-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bible-history-item {
    padding: 0.35rem 0.5rem 0.35rem 0.65rem;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
}

.bible-history-item:hover {
    background: #e0e0e0;
    color: #333;
}

.bible-history-icon {
    font-size: 0.65rem;
    color: #999;
    flex-shrink: 0;
}

.bible-history-item:hover .bible-history-icon {
    color: #666;
}

.bible-history-label {
    white-space: nowrap;
}

.bible-history-query {
    font-style: italic;
}

.bible-history-count {
    font-size: 0.65rem;
    color: #999;
    flex-shrink: 0;
}

.bible-history-time {
    font-size: 0.6rem;
    color: #aaa;
    flex-shrink: 0;
    margin-left: 0.1rem;
}

.bible-history-delete {
    font-size: 0.85rem;
    color: #bbb;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.15rem;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.bible-history-item:hover .bible-history-delete {
    opacity: 1;
}

.bible-history-delete:hover {
    color: #c0392b;
}

/* Show more button */
.bible-history-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.4rem;
    background: transparent;
    border: 1px dashed #ccc;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.25rem;
}

.bible-history-show-more:hover {
    background: #f0f0f0;
    border-color: #aaa;
    color: #555;
}

.bible-history-remaining {
    font-size: 0.7rem;
    color: #aaa;
    margin-left: 0.25rem;
}

.bible-history-empty {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

/* Clear dropdown menu */
.bible-history-actions {
    position: relative;
}

.bible-history-clear-wrap {
    position: relative;
}

.bible-history-clear-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    z-index: 20;
    min-width: 170px;
    overflow: hidden;
}

.bible-history-clear-menu.show {
    display: block;
}

.bible-history-clear-menu button {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
}

.bible-history-clear-menu button:hover {
    background: #f8d7da;
    color: #721c24;
}

.bible-history-clear-menu button:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.bible-history-guest {
    color: #888;
    font-size: 0.85rem;
    padding: 0.5rem;
}

.bible-history-guest a {
    color: #395ba9;
    text-decoration: underline;
}

/* Guest signup card in history section */
.bible-history-guest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    background: #f8f5f0;
    border: 1px solid #d4a574;
    border-radius: 8px;
    margin: 0.25rem 0;
    gap: 0.5rem;
}

.bible-history-guest-icon {
    font-size: 1.25rem;
    color: #a0a0a0;
}

.bible-history-guest-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #555;
}

.bible-history-guest-text strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
    color: #333;
}

.bible-history-guest-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

.bible-history-guest-btn {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: #3b71ca;
    color: #fff;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

.bible-history-guest-btn:hover {
    background: #305baf;
    color: #fff;
    text-decoration: none;
}

.bible-history-guest-link {
    font-size: 0.75rem;
    color: #6c757d;
    text-decoration: none;
}

.bible-history-guest-link:hover {
    color: #395ba9;
    text-decoration: underline;
}

[data-theme="dark"] .bible-history-guest-card {
    background: #2d2a24;
    border-color: #8b7355;
}

[data-theme="dark"] .bible-history-guest-text {
    color: #a0a0a0;
}

[data-theme="dark"] .bible-history-guest-text strong {
    color: #e0e0e0;
}

[data-theme="dark"] .bible-history-guest-btn {
    background: #4a85d9;
}

[data-theme="dark"] .bible-history-guest-btn:hover {
    background: #5a93e0;
}

[data-theme="dark"] .bible-history-guest-link {
    color: #888;
}

[data-theme="dark"] .bible-history-guest-link:hover {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-history-section {
    border-top-color: #333;
}

[data-theme="dark"] .bible-history-item {
    background: #333340;
    color: #aaa;
}

[data-theme="dark"] .bible-history-item:hover {
    background: #444450;
    color: #ddd;
}

[data-theme="dark"] .bible-history-icon {
    color: #777;
}

[data-theme="dark"] .bible-history-item:hover .bible-history-icon {
    color: #aaa;
}

[data-theme="dark"] .bible-history-time {
    color: #666;
}

[data-theme="dark"] .bible-history-count {
    color: #666;
}

[data-theme="dark"] .bible-history-delete {
    color: #555;
}

[data-theme="dark"] .bible-history-delete:hover {
    color: #e74c3c;
}

[data-theme="dark"] .bible-history-show-more {
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .bible-history-show-more:hover {
    background: #333340;
    border-color: #666;
    color: #ccc;
}

[data-theme="dark"] .bible-history-clear-menu {
    background: #2a2a3a;
    border-color: #444;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] .bible-history-clear-menu button {
    color: #bbb;
}

[data-theme="dark"] .bible-history-clear-menu button:hover {
    background: #3d2020;
    color: #f8d7da;
}

[data-theme="dark"] .bible-history-clear-menu button:not(:last-child) {
    border-bottom-color: #404050;
}

[data-theme="dark"] .bible-history-guest a {
    color: #7fa8e8;
}

/* ============================================================================
   EXPAND CHAPTER BUTTON
   ============================================================================ */

.bible-expand-chapter {
    margin-top: 0.75rem;
    text-align: center;
}

.bible-expand-chapter-btn {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    color: #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-expand-chapter-btn:hover {
    background: #395ba9;
    color: white;
}

[data-theme="dark"] .bible-expand-chapter-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] .bible-expand-chapter-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

/* ============================================================================
   CHAPTER NAVIGATION
   ============================================================================ */

.bible-chapter-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.bible-chapter-nav-btn {
    padding: 0.4rem 0.75rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bible-chapter-nav-btn:hover:not(:disabled) {
    background: #395ba9;
    border-color: #395ba9;
    color: white;
}

.bible-chapter-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f0f0f0;
}

.bible-chapter-nav-current {
    font-size: 0.9rem;
    font-weight: 600;
    color: #395ba9;
}

[data-theme="dark"] .bible-chapter-nav {
    background: #252530;
}

[data-theme="dark"] .bible-chapter-nav-btn {
    background: #2a2a35;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .bible-chapter-nav-btn:hover:not(:disabled) {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] .bible-chapter-nav-btn:disabled {
    background: #1e1e24;
}

[data-theme="dark"] .bible-chapter-nav-current {
    color: #7fa8e8;
}

/* Target verse highlight (for search context) */
.bible-verse-target {
    background: rgba(57, 91, 169, 0.1);
    padding: 0.25rem 0;
    border-radius: 4px;
}

[data-theme="dark"] .bible-verse-target {
    background: rgba(127, 168, 232, 0.15);
}

/* ============================================================================
   MOBILE FIXED COPY BUTTONS
   ============================================================================ */

@media (max-width: 576px) {
    .bible-verse-actions {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .bible-display-options {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0;
        flex: 1;
        gap: 0.4rem;
        flex-wrap: nowrap;
        min-width: 0;
    }

    /* Swap full labels for short symbols on mobile */
    .option-label-full {
        display: none;
    }

    .option-label-short {
        display: inline;
        font-weight: 600;
    }

    .bible-display-option {
        gap: 0.2rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Compact font controls on mobile */
    .bible-font-controls {
        margin-left: 0.25rem;
        gap: 0.15rem;
    }

    .bible-font-btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .bible-font-btn-decrease {
        font-size: 0.6rem;
    }

    .bible-font-btn-increase {
        font-size: 0.85rem;
    }

    /* Compact copy: icon-only button + small dropdown chevron */
    .bible-copy-btn {
        padding: 0.25rem 0.4rem;
        border-radius: 4px 0 0 4px;
        font-size: 0.75rem;
    }

    .bible-copy-btn .copy-label {
        display: none;
    }

    .bible-copy-dropdown-btn {
        padding: 0.25rem 0.3rem;
        border-radius: 0 4px 4px 0;
        font-size: 0.65rem;
    }

    .bible-copy-formats {
        right: 0;
        left: auto;
    }

    .bible-search-result-item {
        padding: 0.6rem;
    }

    /* Compact footer on mobile — hide keyboard hints, minimal height */
    .bible-keyboard-hints {
        display: none;
    }

    .bible-modal .modal-footer {
        padding: 0.15rem 0.75rem;
        min-height: 0;
        border-top: none;
    }

    .bible-about {
        font-size: 0.6rem;
        margin-bottom: 0;
        opacity: 0.6;
    }
}

/* ============================================================================
   MOBILE PANEL NAVIGATION
   ============================================================================ */

/* Hidden on desktop */
.bible-mobile-nav {
    display: none;
}

@media (max-width: 991px) {
    .bible-mobile-nav {
        display: flex;
        gap: 0.375rem;
        padding: 0.5rem 0;
        margin-bottom: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fdfcfa;
    }

    .bible-mobile-nav-btn {
        flex: 1;
        padding: 0.5rem 0.25rem;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 500;
        color: #666;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        white-space: nowrap;
    }

    .bible-mobile-nav-btn:hover:not(:disabled) {
        background: #f5f5f5;
        border-color: #ccc;
    }

    .bible-mobile-nav-btn.active {
        background: #395ba9;
        border-color: #395ba9;
        color: #fff;
    }

    .bible-mobile-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .bible-mobile-nav-btn i {
        font-size: 0.85rem;
    }

    /* Content indicator dot */
    .bible-mobile-nav-btn.has-content::after {
        content: '';
        width: 6px;
        height: 6px;
        background: #395ba9;
        border-radius: 50%;
        margin-left: 0.25rem;
        flex-shrink: 0;
    }

    .bible-mobile-nav-btn.active.has-content::after {
        background: rgba(255, 255, 255, 0.7);
    }

    /* Hide desktop mode tabs on mobile (mobile nav handles mode switching) */
    .bible-input-modes {
        display: none;
    }

    /* Find row: wrap version + Go to second line so input gets full width */
    .bible-find-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .bible-find-input-wrapper {
        flex: 1 1 100%; /* Full width — forces wrap after it */
    }

    .bible-find-version {
        padding: 0 1.4rem 0 0.4rem;
        max-width: none;
        flex: 1;
    }

    .bible-find-go {
        padding: 0 1rem;
        font-size: 0.85rem;
    }

    /* --- Mobile Panel Visibility --- */

    /* Find panel: show find input, hide dropdown + results */
    .bible-modal .modal-body[data-mobile-panel="find"] .bible-result-column {
        display: none;
    }
    .bible-modal .modal-body[data-mobile-panel="find"] #bibleDropdownPanel {
        display: none;
    }

    /* Browse panel: show dropdown, hide find + results */
    .bible-modal .modal-body[data-mobile-panel="browse"] .bible-result-column {
        display: none;
    }
    .bible-modal .modal-body[data-mobile-panel="browse"] #bibleFindPanel {
        display: none;
    }

    /* Results panel: hide input column, show results */
    .bible-modal .modal-body[data-mobile-panel="results"] .bible-input-column {
        display: none;
    }

    /* Clean up results panel top spacing */
    .bible-modal .modal-body[data-mobile-panel="results"] .bible-verse-result {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    /* --- Dark Mode --- */

    [data-theme="dark"] .bible-mobile-nav {
        background: #1e1e24;
    }

    [data-theme="dark"] .bible-mobile-nav-btn {
        background: #2a2a35;
        border-color: #444;
        color: #aaa;
    }

    [data-theme="dark"] .bible-mobile-nav-btn:hover:not(:disabled) {
        background: #333340;
        border-color: #555;
    }

    [data-theme="dark"] .bible-mobile-nav-btn.active {
        background: #2a4080;
        border-color: #2a4080;
        color: #fff;
    }

    [data-theme="dark"] .bible-mobile-nav-btn.has-content::after {
        background: #7fa8e8;
    }
}

/* ============================================================================
   DARK MODE SCROLLBARS
   ============================================================================ */

[data-theme="dark"] .bible-modal .modal-body,
[data-theme="dark"] .bible-verse-display,
[data-theme="dark"] .bible-search-results {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar-track,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar-track,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar-thumb,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar-thumb:hover {
    background: #777;
}


/* ============================================================================
   PARALLEL MODE
   ============================================================================ */

/* Version picker (shown when parallel mode is active) */
.bible-parallel-picker {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.bible-parallel-picker-label {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bible-parallel-picker-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.bible-parallel-picker-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
}

.bible-parallel-picker-btn:hover {
    border-color: #395ba9;
    color: #395ba9;
}

.bible-parallel-picker-btn.selected {
    background: #395ba9;
    border-color: #395ba9;
    color: #fff;
}

.bible-parallel-picker-btn.primary {
    background: #2c4a8a;
    border-color: #2c4a8a;
    color: #fff;
    cursor: default;
}

.bible-parallel-picker-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bible-parallel-picker-hint {
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 0.4rem;
}

/* Stacked translation blocks */
.bible-parallel-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.bible-parallel-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.bible-parallel-version-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #395ba9;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(57, 91, 169, 0.06);
    border-radius: 4px;
    display: inline-block;
}

.bible-parallel-version-name {
    font-weight: 400;
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* Single-version label (shown above results in non-parallel mode) */
.bible-version-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #395ba9;
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: rgba(57, 91, 169, 0.06);
    border-radius: 4px;
    display: block;
    width: fit-content;
}

.bible-version-label-name {
    font-weight: 400;
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* Large passage warning */
.bible-parallel-warning {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6d5a00;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dark mode overrides for parallel mode */
[data-theme="dark"] .bible-parallel-picker {
    border-bottom-color: #444;
}

[data-theme="dark"] .bible-parallel-picker-btn {
    background: #2a2a2a;
    border-color: #555;
    color: #ccc;
}

[data-theme="dark"] .bible-parallel-picker-btn:hover {
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] .bible-parallel-picker-btn.selected {
    background: #395ba9;
    border-color: #395ba9;
    color: #fff;
}

[data-theme="dark"] .bible-parallel-picker-btn.primary {
    background: #2c4a8a;
    border-color: #2c4a8a;
    color: #fff;
}

[data-theme="dark"] .bible-parallel-block {
    border-bottom-color: #444;
}

[data-theme="dark"] .bible-parallel-version-label {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .bible-parallel-version-name {
    color: #777;
}

[data-theme="dark"] .bible-version-label {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .bible-version-label-name {
    color: #777;
}

[data-theme="dark"] .bible-parallel-warning {
    background: #3a3000;
    border-color: #6d5a00;
    color: #ffe082;
}

/* === devotional.css === */
/* ========================================
   DAILY DEVOTIONAL STYLES
   ======================================== */

/* --- CSS Variables --- */
:root {
    --devo-bg: #fff;
    --devo-text: #333;
    --devo-text-muted: #6c757d;
    --devo-border: #dee2e6;
    --devo-scripture-bg: #f8f5f0;
    --devo-scripture-border: #d4a574;
    --devo-scripture-text: #5c4a32;
    --devo-body-text: #444;
    --devo-tab-active: #304e96;
    --devo-tab-inactive: #6c757d;
    --devo-tab-active-bg: rgba(48, 78, 150, 0.08);
    --devo-selector-bg: #f8f9fa;
    --devo-selector-border: #dee2e6;
    --devo-badge-bg: #dc3545;
    --devo-author-text: #6c757d;
    --devo-date-text: #304e96;
    --devo-link: #304e96;
    --devo-sub-tab-bg: #f0f0f0;
    --devo-sub-tab-active-bg: #304e96;
    --devo-sub-tab-active-text: #fff;
}

[data-theme="dark"] {
    --devo-bg: #252538;
    --devo-text: #e0e0e0;
    --devo-text-muted: #a0a0a0;
    --devo-border: #404055;
    --devo-scripture-bg: #2d2a24;
    --devo-scripture-border: #8b7355;
    --devo-scripture-text: #d4c4a8;
    --devo-body-text: #c0c0c0;
    --devo-tab-active: #7fb3ff;
    --devo-tab-inactive: #888;
    --devo-tab-active-bg: rgba(127, 179, 255, 0.1);
    --devo-selector-bg: #2d2d44;
    --devo-selector-border: #404055;
    --devo-badge-bg: #dc3545;
    --devo-author-text: #a0a0a0;
    --devo-date-text: #7fb3ff;
    --devo-link: #7fb3ff;
    --devo-sub-tab-bg: #2d2d44;
    --devo-sub-tab-active-bg: #7fb3ff;
    --devo-sub-tab-active-text: #1a1a2e;
}

/* --- Compact Header Toggle (replaces full-width body tabs) --- */
.devo-header-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px;
    margin-left: auto;
    margin-right: 0.75rem;
    gap: 2px;
}

.devo-header-btn {
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    line-height: 1.3;
}

.devo-header-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
}

.devo-header-btn.active {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 600;
}

.devo-header-btn i {
    font-size: 0.8rem;
}

/* Dark mode header toggle */
[data-theme="dark"] .devo-header-toggle {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .devo-header-btn {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .devo-header-btn:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .devo-header-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

/* --- Tab Panes --- */
.bible-modal .devo-tab-pane {
    display: none;
}

.bible-modal .devo-tab-pane.active {
    display: block;
}

/* --- Grid Layout Fix for Desktop ---
   The .modal-body uses CSS grid on desktop (992px+).
   Devotional pane must span full width.
   Bible pane uses display:contents so its columns become grid items. */
@media (min-width: 992px) {
    .bible-modal .devo-tab-pane#devoTabPaneDevotional {
        grid-column: 1 / -1;
    }

    .bible-modal .devo-tab-pane#devoTabPaneBible.active {
        display: contents;
    }

    .bible-modal .devo-tab-pane#devoTabPanePlan.active {
        display: block;
        grid-column: 1 / -1;
    }

    /* On desktop, cap the devotional body so it doesn't push the modal too tall */
    .devo-body {
        max-height: calc(60vh - 200px);
    }
}

/* --- Devotional Content Area --- */
.devo-content {
    color: var(--devo-text);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#devoContentArea {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Hide content area when JS sets display:none */
#devoContentArea[style*="display: none"] {
    display: none !important;
}

/* On mobile (full-screen modal), devotional tab fills the modal body */
@media (max-width: 576px) {
    .bible-modal .devo-tab-pane#devoTabPaneDevotional.active {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .devo-content {
        flex: 1;
        min-height: 0;
    }
}

/* Devotional Selector (Custom Dropdown) */
.devo-selector {
    margin-bottom: 1rem;
    position: relative;
}

.devo-selector-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--devo-selector-border);
    border-radius: 0.375rem;
    background: var(--devo-selector-bg);
    color: var(--devo-text);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.devo-selector-trigger:hover {
    border-color: var(--devo-tab-active);
}

.devo-selector-trigger:focus {
    border-color: var(--devo-tab-active);
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(48, 78, 150, 0.2);
}

.devo-selector-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.devo-selector-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.devo-selector-author {
    display: block;
    font-size: 0.75rem;
    color: var(--devo-text-muted);
    font-weight: 400;
    margin-top: 0.1rem;
}

/* Trigger icon (image or initials) */
.devo-selector-trigger-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--devo-tab-active);
    margin-right: 0.6rem;
    overflow: hidden;
}

.devo-selector-trigger-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.devo-selector-arrow {
    font-size: 0.75rem;
    color: var(--devo-text-muted);
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.devo-selector.open .devo-selector-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.devo-selector-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--devo-bg);
    border: 1px solid var(--devo-selector-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.35rem;
}

[data-theme="dark"] .devo-selector-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.devo-selector.open .devo-selector-menu {
    display: block;
}

/* Dropdown Items */
.devo-selector-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: var(--devo-text);
}

.devo-selector-item:hover {
    background: var(--devo-tab-active-bg);
}

.devo-selector-item.selected {
    background: var(--devo-tab-active-bg);
}

.devo-selector-item-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--devo-tab-active);
    margin-top: 0.1rem;
    overflow: hidden;
}

.devo-selector-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.devo-selector-item-info {
    flex: 1;
    min-width: 0;
}

.devo-selector-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--devo-text);
    line-height: 1.3;
}

.devo-selector-item-author {
    display: block;
    font-size: 0.75rem;
    color: var(--devo-text-muted);
    margin-top: 0.15rem;
}

.devo-selector-item-desc {
    display: -webkit-box;
    font-size: 0.72rem;
    color: var(--devo-text-muted);
    margin-top: 0.25rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.devo-selector-item-check {
    color: var(--devo-tab-active);
    font-size: 0.85rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    visibility: hidden;
}

.devo-selector-item.selected .devo-selector-item-check {
    visibility: visible;
}

/* Scrollbar for dropdown */
.devo-selector-menu::-webkit-scrollbar {
    width: 5px;
}
.devo-selector-menu::-webkit-scrollbar-track {
    background: transparent;
}
.devo-selector-menu::-webkit-scrollbar-thumb {
    background: var(--devo-border);
    border-radius: 3px;
}

/* Date Navigation Row */
.devo-date-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.devo-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--devo-border);
    border-radius: 50%;
    background: var(--devo-selector-bg);
    color: var(--devo-text-muted);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.devo-nav-btn:hover {
    background: var(--devo-tab-active-bg);
    color: var(--devo-tab-active);
    border-color: var(--devo-tab-active);
}

.devo-nav-btn i {
    font-size: 0.75rem;
}

.devo-today-btn {
    margin-left: 0.5rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--devo-tab-active);
    border-radius: 1rem;
    background: transparent;
    color: var(--devo-tab-active);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.devo-today-btn:hover {
    background: var(--devo-tab-active);
    color: #fff;
}

[data-theme="dark"] .devo-today-btn:hover {
    color: #1a1a2e;
}

/* Date Header */
.devo-date {
    font-size: 0.85rem;
    color: var(--devo-date-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.devo-date i {
    font-size: 1rem;
}

/* Scripture Block */
.devo-scripture {
    background: var(--devo-scripture-bg);
    border-left: 3px solid var(--devo-scripture-border);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

.devo-scripture-text {
    font-style: italic;
    color: var(--devo-scripture-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.4rem 0;
}

.devo-scripture-ref {
    font-size: 0.8rem;
    color: var(--devo-author-text);
    font-weight: 600;
    text-align: right;
}

/* Body */
.devo-body {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--devo-body-text);
    overflow-y: auto;
    padding-right: 0.5rem;
    flex: 1;
    min-height: 0;
}

.devo-body p {
    margin-bottom: 0.75rem;
}

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

/* Floated author image inside devotional body */
.devo-body-author-img {
    float: right;
    max-width: 110px;
    height: auto;
    border-radius: 10px;
    margin: 0.15rem 0 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    shape-outside: margin-box;
}

[data-theme="dark"] .devo-body-author-img {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0.92;
}

/* On mobile, slightly smaller */
@media (max-width: 576px) {
    .devo-body-author-img {
        max-width: 85px;
        border-radius: 8px;
        margin: 0.1rem 0 0.5rem 0.75rem;
    }
}

/* Custom scrollbar for devotional body */
.devo-body::-webkit-scrollbar {
    width: 5px;
}
.devo-body::-webkit-scrollbar-track {
    background: transparent;
}
.devo-body::-webkit-scrollbar-thumb {
    background: var(--devo-border);
    border-radius: 3px;
}

/* Entry title (e.g. Faith's Checkbook daily titles) */
.devo-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--devo-text);
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.devo-title:empty {
    display: none;
}

/* Author attribution */
.devo-author {
    font-size: 0.8rem;
    color: var(--devo-author-text);
    text-align: right;
    margin-top: 0.75rem;
    font-style: italic;
}

.devo-author-link {
    color: var(--devo-author-text);
    text-decoration: none;
    transition: color 0.15s;
}

.devo-author-link:hover {
    color: var(--devo-tab-active);
    text-decoration: underline;
}

/* --- Toolbar (font size + copy) --- */
.devo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--devo-border);
}

.devo-font-controls {
    display: flex;
    gap: 0.25rem;
}

.devo-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--devo-border);
    border-radius: 4px;
    background: var(--devo-selector-bg);
    color: var(--devo-text-muted);
    cursor: pointer;
    font-weight: 700;
    font-family: serif;
    transition: background-color 0.15s, border-color 0.15s;
}

.devo-font-btn:hover {
    background: var(--devo-tab-active-bg);
    border-color: var(--devo-tab-active);
    color: var(--devo-tab-active);
}

.devo-font-decrease {
    font-size: 0.7rem;
}

.devo-font-increase {
    font-size: 0.95rem;
}

.devo-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--devo-border);
    border-radius: 4px;
    background: var(--devo-selector-bg);
    color: var(--devo-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.devo-copy-btn:hover {
    background: var(--devo-tab-active-bg);
    border-color: var(--devo-tab-active);
    color: var(--devo-tab-active);
}

.devo-copy-btn.copied {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

[data-theme="dark"] .devo-copy-btn.copied {
    background: #157347;
    border-color: #157347;
}

/* Morning/Evening sub-tabs (paired devotionals: Spurgeon, Winslow) */
.devo-sub-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.devo-sub-tab {
    flex: 1;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--devo-sub-tab-bg);
    color: var(--devo-text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
}

.devo-sub-tab:hover {
    opacity: 0.85;
}

.devo-sub-tab.active {
    background: var(--devo-sub-tab-active-bg);
    color: var(--devo-sub-tab-active-text);
}

/* Loading state */
.devo-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--devo-text-muted);
}

.devo-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.15rem;
    margin-right: 0.5rem;
}

/* Error state */
.devo-error {
    text-align: center;
    padding: 1rem;
    color: #dc3545;
    font-size: 0.9rem;
}

/* Empty state (no devotional selected) */
.devo-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--devo-text-muted);
}

.devo-empty i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

/* --- Badge on Floating Button --- */
.bible-lookup-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: var(--devo-badge-bg);
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
    animation: devo-badge-pulse 2s infinite;
}

[data-theme="dark"] .bible-lookup-badge {
    border-color: #1a1a2e;
}

.bible-lookup-badge.active {
    display: block;
}

@keyframes devo-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* --- Settings Page Styles --- */
.devo-prefs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.devo-prefs-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--devo-border);
}

.devo-prefs-list li:last-child {
    border-bottom: none;
}

.devo-prefs-list .form-check-label {
    font-size: 0.9rem;
}

.devo-prefs-list .form-check-label small {
    display: block;
    color: var(--devo-text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* Short text label (mobile) — hidden on desktop */
.devo-header-btn-short {
    display: none;
}

/* --- Responsive --- */
@media (max-width: 576px) {
    /* On mobile: hide full label + icon, show short text label */
    .devo-header-btn-label {
        display: none;
    }

    .devo-header-btn i {
        display: none;
    }

    .devo-header-btn-short {
        display: inline;
    }

    .devo-header-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    /* Slightly reduce modal title on mobile for 3-button header */
    .bible-modal .modal-title {
        font-size: 0.9rem;
    }

    .devo-body {
        font-size: 0.88rem;
    }

    .devo-scripture {
        padding: 0.65rem 0.75rem;
    }

    /* Sub-tabs: icon-only on mobile */
    .devo-sub-tab {
        font-size: 0;      /* Hide text */
        padding: 0.45rem;
    }

    .devo-sub-tab i {
        font-size: 0.9rem; /* Show icon */
    }

    /* Copy button: icon-only on mobile */
    .devo-copy-label {
        display: none;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .bible-lookup-badge {
        animation: none;
    }

    .devo-header-btn,
    .devo-sub-tab,
    .devo-nav-btn,
    .devo-today-btn,
    .devo-font-btn,
    .devo-copy-btn {
        transition: none;
    }
}

/* --- Members-only badge --- */
.devo-members-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    background: #6c757d;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.02em;
}
.devo-members-badge i {
    font-size: 0.55rem;
    margin-right: 2px;
}

/* --- Print --- */
@media print {
    .devo-header-toggle,
    .devo-selector,
    .devo-sub-tabs,
    .devo-nav-btn,
    .devo-today-btn,
    .devo-toolbar {
        display: none;
    }
}

/* === gill.css === */
/**
 * Gill Commentary Styles
 *
 * Styles for displaying John Gill's Exposition of the Bible
 * in the Bible lookup modal.
 *
 * @package PristineGrace
 * @since 4.4
 */

/* ==========================================================================
   GILL COMMENTARY CONTAINER
   ========================================================================== */

.gill-commentary-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.gill-commentary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gill-commentary-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gill-commentary-title i {
    color: #6c757d;
}

button.gill-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

button.gill-toggle-btn:hover {
    background: #395ba9;
    color: white;
}

button.gill-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 91, 169, 0.25);
}

button.gill-toggle-btn.active {
    background: #395ba9;
    color: white;
}

button.gill-toggle-btn.active:hover {
    background: #2e4a8a;
    border-color: #2e4a8a;
}

button.gill-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

button.gill-toggle-btn.active i {
    transform: rotate(180deg);
}

#gillCommentaryContent,
.gill-commentary-content {
    display: none !important;
    padding: 1rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    margin-top: 0.75rem;
}

#gillCommentaryContent.show,
.gill-commentary-content.show {
    display: block !important;
}

/* Loading state */
.gill-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

.gill-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

/* Error state */
.gill-error {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.9rem;
}

/* Info state (no commentary available) */
.gill-info {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

/* ==========================================================================
   MULTI-VERSE COMMENTARY DISPLAY
   ========================================================================== */

.gill-verse-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    background: #f1f3f4;
    padding: 0.4rem 0.75rem;
    margin: 1rem -1rem 0.75rem -1rem;
    border-top: 1px solid #e9e5df;
    border-bottom: 1px solid #e9e5df;
}

.gill-verse-header:first-child {
    margin-top: 0;
    border-top: none;
}

.gill-verse-content {
    margin-bottom: 1rem;
}

.gill-verse-content:last-child {
    margin-bottom: 0;
}

.gill-verse-content.gill-no-content {
    color: #6c757d;
    font-style: italic;
    padding: 0.5rem 0;
}

.gill-chapter-divider {
    margin: 1.5rem 0;
    border-top: 2px solid #dee2e6;
}

/* ==========================================================================
   COMMENTARY TEXT ELEMENTS
   ========================================================================== */

/* Paragraphs */
.gill-para {
    margin-bottom: 1em;
    text-align: justify;
}

.gill-para:first-child {
    margin-top: 0;
}

.gill-para:last-child {
    margin-bottom: 0;
}

/* Scripture quotations - styled distinctly */
.gill-scripture {
    color: #1a4a7a;
    font-weight: 500;
}

/* Hebrew text */
.gill-hebrew {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    direction: rtl;
    unicode-bidi: isolate;
    font-size: 1.1em;
    color: #5c4033;
    background: #f9f7f4;
    padding: 0 0.25em;
    border-radius: 2px;
}

/* Show transliteration after Hebrew */
.gill-hebrew::after {
    content: " (" attr(data-translit) ")";
    direction: ltr;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.85em;
    color: #777;
}

/* Greek text */
.gill-greek {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    font-style: italic;
    color: #5c4033;
    background: #f9f7f4;
    padding: 0 0.25em;
    border-radius: 2px;
}

/* Show transliteration after Greek */
.gill-greek::after {
    content: " (" attr(data-translit) ")";
    font-style: normal;
    font-size: 0.85em;
    color: #777;
}

/* Bible reference links */
.gill-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gill-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* Cross-reference links (See commentary on...) */
.gill-crossref {
    color: #6c757d;
    text-decoration: none;
    font-style: italic;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gill-crossref:hover {
    color: #495057;
    text-decoration: underline;
}

/* Footnote markers */
.gill-footnote {
    font-size: 0.8em;
    vertical-align: super;
    color: #6c757d;
    font-weight: 500;
}

/* Block quotes (Targum, etc.) */
.gill-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.gill-quote::before {
    content: none;
}

/* ==========================================================================
   CROSS-REFERENCE INDICATOR
   ========================================================================== */

.gill-crossref-notice {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: #f0f7ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.gill-crossref-notice i {
    color: #0066cc;
    margin-right: 0.5rem;
    margin-top: 0.15rem;
}

.gill-crossref-notice .gill-crossref-link {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
}

.gill-crossref-notice .gill-crossref-link:hover {
    color: #004499;
}

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */

.gill-search-results {
    margin-top: 1rem;
}

.gill-search-result {
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gill-search-result:hover {
    background: #f8f9fa;
}

.gill-search-result:last-child {
    border-bottom: none;
}

.gill-search-result-ref {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.gill-search-result-snippet {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

.gill-search-result-snippet mark {
    background: #fff3cd;
    padding: 0 0.15em;
    border-radius: 2px;
}

/* ==========================================================================
   SEARCH TAB ADDITION
   ========================================================================== */

.gill-search-tab {
    display: none;
    padding: 1rem;
}

.gill-search-tab.active {
    display: block;
}

.gill-search-input-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}

.gill-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
}

.gill-search-input:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .gill-commentary-content {
        max-height: 300px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .gill-quote {
        margin: 0.75em 0.5em;
        padding: 0.5em 0.75em;
    }

    .gill-hebrew::after,
    .gill-greek::after {
        display: block;
        margin-top: 0.25em;
    }
}

/* Mobile-only inline header inside commentary content */
.gill-mobile-header {
    display: none;
}

@media (max-width: 576px) {
    /* On mobile, commentary auto-shows — no toggle needed */
    .gill-commentary-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }

    /* Hide header entirely — commentary loads automatically */
    .gill-commentary-header {
        display: none;
    }

    .gill-commentary-content {
        max-height: none;
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    /* Small inline header visible on mobile */
    .gill-mobile-header {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.5rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid #eee;
    }

    .gill-mobile-header i {
        margin-right: 0.3em;
        font-size: 0.65rem;
    }

    [data-theme="dark"] .gill-mobile-header {
        color: #8a9ab0;
        border-bottom-color: #3d4450;
    }

    /* Search bar still needs to be visible */
    .gill-search-bar {
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .gill-commentary-content {
        max-height: none;
        overflow: visible;
        border: none;
        background: white;
    }

    .gill-toggle-btn {
        display: none;
    }

    .gill-ref,
    .gill-crossref {
        color: inherit;
        border: none;
        text-decoration: none;
    }

    .gill-hebrew::after,
    .gill-greek::after {
        color: #666;
    }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .gill-commentary-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .gill-commentary-title {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-commentary-title i {
    color: #8a9199;
}

[data-theme="dark"] button.gill-toggle-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] button.gill-toggle-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.gill-toggle-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.gill-toggle-btn.active:hover {
    background: #335099;
    border-color: #335099;
}

[data-theme="dark"] #gillCommentaryContent,
[data-theme="dark"] .gill-commentary-content {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-loading {
    color: #8a9199;
}

[data-theme="dark"] .gill-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .gill-info {
    background: #252a30;
    border-color: #3d4450;
    color: #8a9199;
}

/* Commentary text elements - dark mode */
[data-theme="dark"] .gill-scripture {
    color: #6db3f2;
}

[data-theme="dark"] .gill-hebrew {
    color: #d4a574;
    background: #2a2520;
}

[data-theme="dark"] .gill-hebrew::after {
    color: #8a9199;
}

[data-theme="dark"] .gill-greek {
    color: #d4a574;
    background: #2a2520;
}

[data-theme="dark"] .gill-greek::after {
    color: #8a9199;
}

[data-theme="dark"] .gill-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] .gill-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .gill-crossref {
    color: #8a9199;
}

[data-theme="dark"] .gill-crossref:hover {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-footnote {
    color: #8a9199;
}

[data-theme="dark"] .gill-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] .gill-crossref-notice {
    background: #1a2533;
    border-color: #2d4a6d;
}

[data-theme="dark"] .gill-crossref-notice i {
    color: #6db3f2;
}

[data-theme="dark"] .gill-crossref-notice .gill-crossref-link {
    color: #6db3f2;
}

[data-theme="dark"] .gill-crossref-notice .gill-crossref-link:hover {
    color: #93c5fd;
}

/* Search results - dark mode */
[data-theme="dark"] .gill-search-result {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .gill-search-result:hover {
    background: #252a30;
}

[data-theme="dark"] .gill-search-result-ref {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-result-snippet {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-result-snippet mark {
    background: #5c4d1a;
    color: #f5e6a3;
}

[data-theme="dark"] .gill-search-input {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Multi-verse display - dark mode */
[data-theme="dark"] .gill-verse-header {
    color: #c8ccd0;
    background: #252a30;
    border-top-color: #3d4450;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .gill-verse-content.gill-no-content {
    color: #8a9199;
}

[data-theme="dark"] .gill-chapter-divider {
    border-top-color: #4b5563;
}

/* ==========================================================================
   GILL COMMENTARY IN-CONTENT SEARCH
   ========================================================================== */

.gill-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.gill-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.gill-search-icon {
    position: absolute;
    left: 0.75rem;
    color: #6c757d;
    font-size: 0.875rem;
    pointer-events: none;
}

.gill-search-bar .gill-search-input {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 16px; /* Prevent iOS zoom */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

.gill-search-bar .gill-search-input:focus {
    outline: none;
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.1);
}

.gill-search-bar .gill-search-input::placeholder {
    color: #adb5bd;
}

.gill-search-clear {
    position: absolute;
    right: 0.5rem;
    padding: 0.25rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

.gill-search-clear:hover {
    color: #495057;
}

.gill-search-bar .gill-search-results {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.gill-search-nav {
    display: flex;
    gap: 0.25rem;
}

.gill-search-nav-btn {
    padding: 0.25rem 0.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.gill-search-nav-btn:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

/* Search highlight styling */
.gill-search-highlight {
    background: #fff3cd;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

.gill-search-highlight.current {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

/* Dark mode - in-content search */
[data-theme="dark"] .gill-search-bar {
    background: #252a30;
    border-color: #3d4450;
}

[data-theme="dark"] .gill-search-bar .gill-search-input {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-bar .gill-search-input:focus {
    border-color: #7fa8e8;
    box-shadow: 0 0 0 2px rgba(127, 168, 232, 0.15);
}

[data-theme="dark"] .gill-search-bar .gill-search-input::placeholder {
    color: #6c757d;
}

[data-theme="dark"] .gill-search-icon {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-clear {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-clear:hover {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-bar .gill-search-results {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-nav-btn {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-nav-btn:hover {
    background: #2d333b;
    border-color: #4b5563;
}

[data-theme="dark"] .gill-search-highlight {
    background: rgba(255, 193, 7, 0.3);
    color: #e8e0c8;
}

[data-theme="dark"] .gill-search-highlight.current {
    background: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

/* Dark mode scrollbar for Gill commentary content */
[data-theme="dark"] #gillCommentaryContent {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ==========================================================================
   CROSS REFERENCES (Treasury of Scripture Knowledge)
   ========================================================================== */

.crossref-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.crossref-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.crossref-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crossref-title i {
    color: #6c757d;
}

button.crossref-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

button.crossref-toggle-btn:hover {
    background: #395ba9;
    color: white;
}

button.crossref-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 91, 169, 0.25);
}

button.crossref-toggle-btn.active {
    background: #395ba9;
    color: white;
}

button.crossref-toggle-btn.active:hover {
    background: #2e4a8a;
    border-color: #2e4a8a;
}

button.crossref-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

/* Responsive text: short labels hidden on desktop */
.crossref-title-short,
.crossref-btn-short {
    display: none;
}

#crossrefContent,
.crossref-content {
    display: none !important;
    padding: 0.75rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
    margin-top: 0.75rem;
}

#crossrefContent.show,
.crossref-content.show {
    display: block !important;
}

/* Loading and info states */
.crossref-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #6c757d;
}

.crossref-loading .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.crossref-error {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.85rem;
}

.crossref-info {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #6c757d;
    font-size: 0.85rem;
    font-style: italic;
}

/* Scope note for multi-verse lookups */
.crossref-scope-note {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* Reference count */
.crossref-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
}

/* Per-verse headers (multi-verse lookups) */
.crossref-verse-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    background: #f1f3f4;
    padding: 0.4rem 0.75rem;
    margin: 1rem -1rem 0.5rem -1rem;
    border-top: 1px solid #e9e5df;
    border-bottom: 1px solid #e9e5df;
}

.crossref-verse-header.first {
    margin-top: 0;
    border-top: none;
}

.crossref-verse-count {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.8rem;
}

/* Reference list */
.crossref-list {
    display: flex;
    flex-direction: column;
}

.crossref-item {
    border-bottom: 1px solid #f0ede8;
}

.crossref-item:last-child {
    border-bottom: none;
}

.crossref-item-row {
    display: flex;
    align-items: center;
    padding: 0.35rem 0;
    gap: 0.375rem;
}

/* Expand/collapse button */
.crossref-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    color: #6c757d;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    font-size: 0.7rem;
}

.crossref-expand-btn:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
    color: #333;
}

/* Reference link */
.crossref-ref-link {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.crossref-ref-link:hover {
    color: #004499;
    text-decoration: underline;
}

/* Inline verse preview */
.crossref-preview {
    padding: 0.4rem 0.5rem 0.5rem 2rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555;
    font-family: Georgia, "Times New Roman", serif;
}

.crossref-preview-loading {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.85rem;
}

.crossref-preview-loading .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   CROSS REFERENCES - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .crossref-content {
        max-height: 280px;
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .crossref-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    /* Swap to short text on mobile */
    .crossref-title-full,
    .crossref-btn-full {
        display: none;
    }

    .crossref-title-short,
    .crossref-btn-short {
        display: inline;
    }

    /* Compact toggle button on mobile */
    button.crossref-toggle-btn {
        padding: 0.3rem 0.65rem;
        font-size: 0.75rem;
    }

    button.crossref-toggle-btn i {
        font-size: 0.65rem;
    }

    .crossref-title {
        font-size: 0.8rem;
    }

    .crossref-content {
        max-height: 250px;
        padding: 0.4rem;
    }

    .crossref-ref-link {
        font-size: 0.85rem;
    }

    .crossref-preview {
        padding-left: 1.5rem;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   CROSS REFERENCES - DARK MODE
   ========================================================================== */

[data-theme="dark"] .crossref-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .crossref-title {
    color: #c8ccd0;
}

[data-theme="dark"] .crossref-title i {
    color: #8a9199;
}

[data-theme="dark"] button.crossref-toggle-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] button.crossref-toggle-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.crossref-toggle-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.crossref-toggle-btn.active:hover {
    background: #335099;
    border-color: #335099;
}

[data-theme="dark"] #crossrefContent,
[data-theme="dark"] .crossref-content {
    background: #1e2328;
    border-color: #3d4450;
}

[data-theme="dark"] .crossref-loading {
    color: #8a9199;
}

[data-theme="dark"] .crossref-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .crossref-info {
    background: #252a30;
    border-color: #3d4450;
    color: #8a9199;
}

[data-theme="dark"] .crossref-scope-note {
    color: #8a9199;
}

[data-theme="dark"] .crossref-count {
    color: #8a9199;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .crossref-verse-header {
    color: #c8ccd0;
    background: #252a30;
    border-top-color: #3d4450;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .crossref-verse-count {
    color: #8a9199;
}

[data-theme="dark"] .crossref-item {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .crossref-expand-btn {
    border-color: #3d4450;
    color: #8a9199;
}

[data-theme="dark"] .crossref-expand-btn:hover {
    background: #2d333b;
    border-color: #4b5563;
    color: #c8ccd0;
}

[data-theme="dark"] .crossref-ref-link {
    color: #6db3f2;
}

[data-theme="dark"] .crossref-ref-link:hover {
    color: #93c5fd;
}

[data-theme="dark"] .crossref-preview {
    color: #b0b5bb;
}

/* Dark mode scrollbar for cross-ref content */
[data-theme="dark"] #crossrefContent {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ==========================================================================
   CROSS REFERENCES - PRINT
   ========================================================================== */

@media print {
    .crossref-content {
        max-height: none;
        overflow: visible;
        border: none;
        background: white;
    }

    .crossref-toggle-btn {
        display: none;
    }

    .crossref-ref-link {
        color: inherit;
        text-decoration: none;
    }

    .crossref-expand-btn {
        display: none;
    }
}

/* ==========================================================================
   STRONG'S CONCORDANCE WORD STUDY
   ========================================================================== */

/* ---------- Clickable word styles ---------- */

/* Both mapped and unmapped words use same inline-block layout for alignment */
.strongs-word,
.strongs-word-plain {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    line-height: 1.2;
    margin: 0 1px;
}

/* Only mapped words get click/hover styling */
.strongs-word {
    border-bottom: 1px dotted #999;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 1px;
}

/* Plain words (no Strong's mapping) need bottom padding to match height of numbered words */
.strongs-word-plain {
    padding-bottom: 0.7em;
}

.strongs-word:hover {
    border-bottom-color: #395ba9;
    color: #395ba9;
    background: rgba(57, 91, 169, 0.05);
}

.strongs-word-active {
    background: rgba(57, 91, 169, 0.12);
    border-bottom: 2px solid #395ba9;
    color: #395ba9;
}

/* Inline Strong's ID labels (interlinear display below each word) */
.strongs-inline-id {
    display: block;
    font-size: 0.55em;
    line-height: 1;
    color: #7a8bb5;
    text-align: center;
    margin-top: 1px;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: -0.5px;
    pointer-events: none;  /* clicks pass through to parent .strongs-word */
}

/* Extra line spacing when Strong's interlinear mode is active */
.strongs-interlinear {
    line-height: 2.8;
}

/* ---------- Popover container ---------- */

.strongs-popover {
    position: fixed;
    z-index: 1060;
    max-width: 340px;
    min-width: 240px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    max-height: 380px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Arrow pointing at the word */
.strongs-popover-arrow {
    position: absolute;
    top: -7px;
    left: var(--strongs-arrow-left, 50%);
    transform: translateX(-50%);
    width: 14px;
    height: 7px;
    overflow: hidden;
}

.strongs-popover-arrow::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #dee2e6;
}

/* When popover is above the word, arrow points down */
.strongs-popover-above .strongs-popover-arrow {
    top: auto;
    bottom: -7px;
}

.strongs-popover-above .strongs-popover-arrow::before {
    top: auto;
    bottom: 1px;
}

.strongs-popover-content {
    padding: 0.75rem;
    position: relative;
}

/* Close button inside popover */
.strongs-popover-close {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #999;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

.strongs-popover-close:hover {
    background: #f0f0f0;
    border-color: #dee2e6;
    color: #333;
}

/* ---------- Popover inner elements ---------- */

.strongs-popover-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: #6c757d;
}

.strongs-popover-empty {
    padding: 0.5rem;
    color: #6c757d;
    font-style: italic;
}

.strongs-entry-divider {
    border-top: 1px solid #e9ecef;
    margin: 0.75rem 0;
}

.strongs-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.strongs-number {
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
}

.strongs-lang-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.strongs-lang-badge.strongs-hebrew {
    background: #f5efe6;
    color: #8b6914;
}

.strongs-lang-badge.strongs-greek {
    background: #e8f0fe;
    color: #1a5fb4;
}

.strongs-lemma {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.strongs-lemma.strongs-hebrew {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    color: #5c4033;
}

.strongs-lemma.strongs-greek {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    color: #1a4a7a;
}

.strongs-translit {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.25rem;
}

.strongs-pronun {
    color: #777;
    font-size: 0.8rem;
}

.strongs-pos {
    font-size: 0.8rem;
    font-style: italic;
    color: #6c757d;
    margin-bottom: 0.375rem;
}

.strongs-definition {
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 0.375rem;
    line-height: 1.55;
}

.strongs-usage {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0.25rem;
    line-height: 1.45;
}

.strongs-occurrences-summary {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0.375rem;
    line-height: 1.45;
}

.strongs-study-link-container {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.strongs-study-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #395ba9;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.strongs-study-link:hover {
    color: #2e4a8a;
    text-decoration: underline;
}

/* ---------- Occurrences panel ---------- */

.strongs-occurrences-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.strongs-occ-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.strongs-occ-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strongs-occ-title i {
    color: #6c757d;
}

.strongs-occ-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease;
}

.strongs-occ-close:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
    color: #333;
}

.strongs-occ-content {
    padding: 0.75rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.strongs-occ-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: #6c757d;
}

.strongs-occ-error {
    padding: 0.75rem;
    color: #721c24;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-size: 0.85rem;
}

.strongs-occ-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
}

.strongs-occ-list {
    display: flex;
    flex-direction: column;
}

.strongs-occ-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0ede8;
}

.strongs-occ-item:last-child {
    border-bottom: none;
}

.strongs-occ-ref {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.strongs-occ-ref:hover {
    color: #004499;
    text-decoration: underline;
}

.strongs-occ-text {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin-top: 0.15rem;
}

.strongs-occ-text mark {
    background: #fff3cd;
    padding: 0 0.15em;
    border-radius: 2px;
}

.strongs-occ-more-container {
    text-align: center;
    padding-top: 0.75rem;
}

.strongs-occ-load-more {
    display: inline-block;
    padding: 0.375rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    color: #395ba9;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.strongs-occ-load-more:hover {
    background: #395ba9;
    color: #fff;
}

/* ==========================================================================
   STRONG'S - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .strongs-popover {
        max-width: 300px;
        max-height: 320px;
    }

    .strongs-occ-content {
        max-height: 280px;
    }
}

@media (max-width: 576px) {
    .strongs-popover {
        position: fixed;
        left: 8px !important;
        right: 8px;
        max-width: none;
        width: auto;
        bottom: auto;
        max-height: 50vh;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .strongs-popover-arrow {
        display: none;
    }

    .strongs-occurrences-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    .strongs-occ-content {
        max-height: 250px;
        padding: 0.5rem;
    }
}

/* ==========================================================================
   STRONG'S - PRINT
   ========================================================================== */

@media print {
    .strongs-word {
        border-bottom: none;
        cursor: default;
        display: inline;
        margin: 0;
    }

    .strongs-word-plain {
        display: inline;
        padding-bottom: 0;
    }

    .strongs-inline-id {
        display: none !important;
    }

    .strongs-popover {
        display: none !important;
    }

    .strongs-occurrences-section {
        display: none !important;
    }
}

/* ==========================================================================
   STRONG'S - DARK MODE
   ========================================================================== */

/* Word styles */
[data-theme="dark"] .strongs-word {
    border-bottom-color: #6c757d;
}

[data-theme="dark"] .strongs-word:hover {
    border-bottom-color: #7fa8e8;
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .strongs-word-active {
    background: rgba(127, 168, 232, 0.15);
    border-bottom-color: #7fa8e8;
    color: #7fa8e8;
}

/* Inline Strong's ID labels */
[data-theme="dark"] .strongs-inline-id {
    color: #8a9bc5;
}

/* Popover */
[data-theme="dark"] .strongs-popover {
    background: #1e2328;
    border-color: #3d4450;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .strongs-popover-close {
    color: #6c757d;
}

[data-theme="dark"] .strongs-popover-close:hover {
    background: #2a2f36;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-popover-arrow::before {
    background: #1e2328;
    border-color: #3d4450;
}

[data-theme="dark"] .strongs-popover-loading {
    color: #8a9199;
}

[data-theme="dark"] .strongs-popover-empty {
    color: #8a9199;
}

[data-theme="dark"] .strongs-entry-divider {
    border-top-color: #3d4450;
}

[data-theme="dark"] .strongs-number {
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-lang-badge.strongs-hebrew {
    background: #2a2520;
    color: #d4a574;
}

[data-theme="dark"] .strongs-lang-badge.strongs-greek {
    background: #1a2533;
    color: #6db3f2;
}

[data-theme="dark"] .strongs-lemma.strongs-hebrew {
    color: #d4a574;
}

[data-theme="dark"] .strongs-lemma.strongs-greek {
    color: #6db3f2;
}

[data-theme="dark"] .strongs-translit {
    color: #b0b5bb;
}

[data-theme="dark"] .strongs-pronun {
    color: #8a9199;
}

[data-theme="dark"] .strongs-pos {
    color: #8a9199;
}

[data-theme="dark"] .strongs-definition {
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-usage {
    color: #b0b5bb;
}

[data-theme="dark"] .strongs-occurrences-summary {
    color: #b0b5bb;
}

[data-theme="dark"] .strongs-study-link-container {
    border-top-color: #3d4450;
}

[data-theme="dark"] .strongs-study-link {
    color: #7fa8e8;
}

[data-theme="dark"] .strongs-study-link:hover {
    color: #93c5fd;
}

/* Occurrences panel - dark mode */
[data-theme="dark"] .strongs-occurrences-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-title {
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-occ-title i {
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-close {
    border-color: #3d4450;
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-close:hover {
    background: #2d333b;
    border-color: #4b5563;
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-occ-content {
    background: #1e2328;
    border-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-loading {
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .strongs-occ-count {
    color: #8a9199;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-item {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-ref {
    color: #6db3f2;
}

[data-theme="dark"] .strongs-occ-ref:hover {
    color: #93c5fd;
}

[data-theme="dark"] .strongs-occ-text {
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-text mark {
    background: #5c4d1a;
    color: #f5e6a3;
}

[data-theme="dark"] .strongs-occ-load-more {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] .strongs-occ-load-more:hover {
    background: #2a4080;
    color: #fff;
}

/* Dark mode scrollbar for Strong's content */
[data-theme="dark"] .strongs-popover {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .strongs-popover::-webkit-scrollbar {
    width: 6px;
}

[data-theme="dark"] .strongs-popover::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 3px;
}

[data-theme="dark"] .strongs-popover::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

[data-theme="dark"] .strongs-occ-content {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* === commentary.css === */
/**
 * Unified Commentary Styles
 *
 * Styles for the tabbed commentary system supporting Gill, Mahan,
 * Fortner, and future commentators. Gill's content classes remain
 * in gill.css; this file handles the tab bar, unified container,
 * and Mahan/Fortner content classes.
 *
 * @package PristineGrace
 * @since 4.5
 */

/* ==========================================================================
   COMMENTARY TAB BAR
   ========================================================================== */

.commentary-tabs-wrapper {
    position: relative;
}

.commentary-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #dee2e6;
    padding: 0 0.5rem;
}

/* Scroll hint — hidden on desktop, shown on mobile when tabs overflow */
.commentary-tabs-scroll-hint {
    display: none;
}

.commentary-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.commentary-tab:hover {
    color: #395ba9;
    background: rgba(57, 91, 169, 0.04);
}

.commentary-tab.active {
    color: #395ba9;
    border-bottom-color: #395ba9;
    font-weight: 600;
}

/* Commentary detail label — shows full commentary name below tab bar */
.commentary-detail-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #395ba9;
    margin: 0.5rem 0.5rem 0;
    padding: 0.2rem 0.5rem;
    background: rgba(57, 91, 169, 0.06);
    border-radius: 4px;
    display: block;
    width: fit-content;
}

.commentary-detail-label-name {
    font-weight: 400;
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* ==========================================================================
   COMMENTARY SECTION CONTAINER (replaces .gill-commentary-section)
   ========================================================================== */

.commentary-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.commentary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.commentary-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.commentary-title i {
    color: #6c757d;
}

/* Toggle button - reuses gill-toggle-btn styling pattern */
button.commentary-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

button.commentary-toggle-btn:hover {
    background: #395ba9;
    color: white;
}

button.commentary-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 91, 169, 0.25);
}

button.commentary-toggle-btn.active {
    background: #395ba9;
    color: white;
}

button.commentary-toggle-btn.active:hover {
    background: #2e4a8a;
    border-color: #2e4a8a;
}

button.commentary-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

button.commentary-toggle-btn.active i {
    transform: rotate(180deg);
}

/* Commentary content area */
.commentary-content {
    display: none !important;
    padding: 1rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

.commentary-content.show {
    display: block !important;
}

/* When tabs are shown, content gets top border removed (tab bar handles it) */
.commentary-tabs-wrapper ~ .commentary-search-bar + .commentary-content,
.commentary-tabs-wrapper ~ .commentary-content {
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Loading state */
.commentary-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

.commentary-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

/* Error state */
.commentary-error {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.9rem;
}

/* Info state (no commentary available) */
.commentary-info {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

/* ==========================================================================
   VERSE RANGE BADGE (for Mahan/Fortner range entries)
   ========================================================================== */

.commentary-verse-range {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    background: #f0f2f5;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   ENTRY TITLE (for Mahan/Fortner titled entries)
   ========================================================================== */

.commentary-entry-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #eee;
}

/* ==========================================================================
   COMMENTARY SEARCH BAR (unified, replaces .gill-search-bar)
   ========================================================================== */

.commentary-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.commentary-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.commentary-search-icon {
    position: absolute;
    left: 0.75rem;
    color: #6c757d;
    font-size: 0.875rem;
    pointer-events: none;
}

.commentary-search-bar .commentary-search-input {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 16px; /* Prevent iOS zoom */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

.commentary-search-bar .commentary-search-input:focus {
    outline: none;
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.1);
}

.commentary-search-bar .commentary-search-input::placeholder {
    color: #adb5bd;
}

.commentary-search-clear {
    position: absolute;
    right: 0.5rem;
    padding: 0.25rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

.commentary-search-clear:hover {
    color: #495057;
}

.commentary-search-bar .commentary-search-results {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.commentary-search-nav {
    display: flex;
    gap: 0.25rem;
}

.commentary-search-nav-btn {
    padding: 0.25rem 0.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.commentary-search-nav-btn:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

/* Search highlight styling */
.commentary-search-highlight {
    background: #fff3cd;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

.commentary-search-highlight.current {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

/* ==========================================================================
   MAHAN CONTENT CLASSES
   (Generated HTML classes from extract_mahan.php)
   ========================================================================== */

.mahan-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.mahan-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.mahan-para {
    margin-bottom: 1em;
    text-align: justify;
}

.mahan-para:last-child {
    margin-bottom: 0;
}

.mahan-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.mahan-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.mahan-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Mahan scripture references */
a.mahan-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.mahan-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* ==========================================================================
   FORTNER CONTENT CLASSES
   (Generated HTML classes from extract_fortner.php)
   ========================================================================== */

.fortner-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.fortner-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.fortner-para {
    margin-bottom: 1em;
    text-align: justify;
}

.fortner-para:last-child {
    margin-bottom: 0;
}

.fortner-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.fortner-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.fortner-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Fortner scripture references */
a.fortner-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.fortner-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* ==========================================================================
   CALVIN CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.calvin-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.calvin-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.calvin-para {
    margin-bottom: 1em;
    text-align: justify;
}

.calvin-para:last-child {
    margin-bottom: 0;
}

.calvin-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.calvin-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.calvin-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Calvin scripture references */
a.calvin-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.calvin-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* Calvin unparseable scripture references */
.calvin-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* Calvin Hebrew text */
.calvin-hebrew {
    font-family: 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
    font-size: 1.1em;
    direction: rtl;
    unicode-bidi: bidi-override;
}

/* Calvin Greek text */
.calvin-greek {
    font-family: 'SBL Greek', 'Gentium Plus', 'Times New Roman', serif;
    font-size: 1.05em;
}

/* ==========================================================================
   POOLE CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.poole-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.poole-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.poole-para {
    margin-bottom: 1em;
    text-align: justify;
}

.poole-para:last-child {
    margin-bottom: 0;
}

.poole-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.poole-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.poole-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Poole scripture references */
a.poole-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.poole-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

.poole-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* ==========================================================================
   HAWKER CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.hawker-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.hawker-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.hawker-para {
    margin-bottom: 1em;
    text-align: justify;
}

.hawker-para:last-child {
    margin-bottom: 0;
}

.hawker-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.hawker-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.hawker-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Hawker scripture references */
a.hawker-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.hawker-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

.hawker-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* ==========================================================================
   LUTHER CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.luther-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.luther-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.luther-para {
    margin-bottom: 1em;
    text-align: justify;
}

.luther-para:last-child {
    margin-bottom: 0;
}

.luther-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.luther-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.luther-right {
    text-align: right;
    margin-bottom: 0.75em;
}

.luther-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* ==========================================================================
   MATTHEW HENRY CONTENT CLASSES
   (Generated HTML classes from extract_mhc.py)
   ========================================================================== */

.mhc-heading {
    display: block;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
    font-style: italic;
}

.mhc-para {
    margin-bottom: 1em;
    text-align: justify;
}

.mhc-para:last-child {
    margin-bottom: 0;
}

.mhc-verse-text {
    font-size: 1.05em;
    font-weight: 500;
    color: #4a3520;
}

[data-theme="dark"] .mhc-verse-text {
    color: #d4c4a8;
}

/* ==========================================================================
   SPURGEON'S TREASURY OF DAVID CONTENT CLASSES
   ========================================================================== */

.treasury-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.treasury-para {
    margin-bottom: 1em;
    text-align: justify;
}

.treasury-para:last-child {
    margin-bottom: 0;
}

.treasury-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.treasury-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.treasury-right {
    text-align: right;
    margin-bottom: 0.75em;
}

.treasury-scripture {
    color: #4D80B3;
    font-style: italic;
}

a.treasury-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.treasury-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* ==========================================================================
   MOBILE INLINE HEADER
   ========================================================================== */

.commentary-mobile-header {
    display: none;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .commentary-content {
        max-height: 300px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .commentary-tabs {
        padding: 0 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .commentary-tabs::-webkit-scrollbar {
        display: none;
    }

    .commentary-tab {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    /* Scroll hint gradient for tabs */
    .commentary-tabs-scroll-hint {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 2px;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
        align-items: center;
        justify-content: flex-end;
        padding-right: 4px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .commentary-tabs-scroll-hint.visible {
        opacity: 1;
    }

    .commentary-tabs-scroll-hint i {
        color: #6c757d;
        font-size: 0.7rem;
        animation: commentaryTabScrollPulse 1.5s ease-in-out infinite;
    }

    @keyframes commentaryTabScrollPulse {
        0%, 100% { transform: translateX(0); opacity: 0.6; }
        50% { transform: translateX(3px); opacity: 1; }
    }

    .mhc-verse-text {
        font-size: 1em;
    }

    .mahan-quote,
    .fortner-quote,
    .calvin-quote,
    .poole-quote,
    .hawker-quote,
    .luther-quote,
    .treasury-quote {
        margin: 0.75em 0.5em;
        padding: 0.5em 0.75em;
    }
}

@media (max-width: 576px) {
    /* On mobile, commentary auto-shows - no toggle needed */
    .commentary-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }

    /* Hide header entirely - commentary loads automatically */
    .commentary-header {
        display: none;
    }

    .commentary-content {
        max-height: none;
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    /* Small inline header visible on mobile */
    .commentary-mobile-header {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.5rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid #eee;
    }

    .commentary-mobile-header i {
        margin-right: 0.3em;
        font-size: 0.65rem;
    }

    /* Tabs stay visible on mobile for switching — scroll horizontally */
    .commentary-tabs {
        padding: 0;
        margin-bottom: 0;
    }

    .commentary-tab {
        flex-shrink: 0;
        padding: 0.4rem 0.65rem;
        font-size: 0.75rem;
    }

    .commentary-detail-label {
        font-size: 0.72rem;
        margin: 0.35rem 0.35rem 0;
        padding: 0.15rem 0.4rem;
    }

    .commentary-detail-label-name {
        font-size: 0.68rem;
    }

    /* Search bar still needs to be visible */
    .commentary-search-bar {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .commentary-content {
        max-height: none;
        overflow: visible;
        border: none;
        background: white;
    }

    .commentary-toggle-btn {
        display: none;
    }

    .commentary-tabs {
        display: none;
    }

    .commentary-detail-label {
        display: none;
    }

    a.mahan-ref,
    a.fortner-ref,
    a.calvin-ref,
    a.poole-ref,
    a.hawker-ref,
    a.treasury-ref {
        color: inherit;
        border: none;
        text-decoration: none;
    }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* Tab bar */
[data-theme="dark"] .commentary-tabs {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .commentary-tab {
    color: #8a9199;
}

[data-theme="dark"] .commentary-tab:hover {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.06);
}

[data-theme="dark"] .commentary-tab.active {
    color: #7fa8e8;
    border-bottom-color: #7fa8e8;
}

/* Scroll hint dark mode */
[data-theme="dark"] .commentary-tabs-scroll-hint {
    background: linear-gradient(to right, transparent, rgba(30, 33, 39, 0.95));
}

[data-theme="dark"] .commentary-tabs-scroll-hint i {
    color: #8a9199;
}

/* Detail label */
[data-theme="dark"] .commentary-detail-label {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .commentary-detail-label-name {
    color: #777;
}

/* Section */
[data-theme="dark"] .commentary-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .commentary-title {
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-title i {
    color: #8a9199;
}

/* Toggle button */
[data-theme="dark"] button.commentary-toggle-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] button.commentary-toggle-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.commentary-toggle-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.commentary-toggle-btn.active:hover {
    background: #335099;
    border-color: #335099;
}

/* Content area */
[data-theme="dark"] .commentary-content {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-loading {
    color: #8a9199;
}

[data-theme="dark"] .commentary-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .commentary-info {
    background: #252a30;
    border-color: #3d4450;
    color: #8a9199;
}

/* Verse range badge */
[data-theme="dark"] .commentary-verse-range {
    color: #8a9199;
    background: #2d333b;
}

/* Entry title */
[data-theme="dark"] .commentary-entry-title {
    color: #c8ccd0;
    border-bottom-color: #3d4450;
}

/* Mobile header */
[data-theme="dark"] .commentary-mobile-header {
    color: #8a9ab0;
    border-bottom-color: #3d4450;
}

/* Search bar */
[data-theme="dark"] .commentary-search-bar {
    background: #252a30;
    border-color: #3d4450;
}

[data-theme="dark"] .commentary-search-bar .commentary-search-input {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-search-bar .commentary-search-input:focus {
    border-color: #7fa8e8;
    box-shadow: 0 0 0 2px rgba(127, 168, 232, 0.15);
}

[data-theme="dark"] .commentary-search-bar .commentary-search-input::placeholder {
    color: #6c757d;
}

[data-theme="dark"] .commentary-search-icon {
    color: #8a9199;
}

[data-theme="dark"] .commentary-search-clear {
    color: #8a9199;
}

[data-theme="dark"] .commentary-search-clear:hover {
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-search-bar .commentary-search-results {
    color: #8a9199;
}

[data-theme="dark"] .commentary-search-nav-btn {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-search-nav-btn:hover {
    background: #2d333b;
    border-color: #4b5563;
}

[data-theme="dark"] .commentary-search-highlight {
    background: rgba(255, 193, 7, 0.3);
    color: #e8e0c8;
}

[data-theme="dark"] .commentary-search-highlight.current {
    background: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

/* Mahan content - dark mode */
[data-theme="dark"] .mahan-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.mahan-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.mahan-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

/* Fortner content - dark mode */
[data-theme="dark"] .fortner-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.fortner-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.fortner-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

/* Calvin content - dark mode */
[data-theme="dark"] .calvin-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.calvin-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.calvin-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .calvin-scripture {
    color: #7fa8e8;
}

[data-theme="dark"] .calvin-hebrew {
    color: #e0d8c0;
}

[data-theme="dark"] .calvin-greek {
    color: #d8dce0;
}

/* Poole content - dark mode */
[data-theme="dark"] .poole-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.poole-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.poole-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .poole-scripture {
    color: #7fa8e8;
}

/* Hawker content - dark mode */
[data-theme="dark"] .hawker-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.hawker-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.hawker-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .hawker-scripture {
    color: #7fa8e8;
}

/* Luther content - dark mode */
[data-theme="dark"] .luther-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] .luther-scripture {
    color: #7fa8e8;
}

/* Treasury of David content - dark mode */
[data-theme="dark"] .treasury-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.treasury-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.treasury-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .treasury-scripture {
    color: #7fa8e8;
}

/* Dark mode scrollbar */
[data-theme="dark"] .commentary-content {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ==========================================================================
   RESTRICTED COMMENTARY (non-member login prompt)
   ========================================================================== */

.commentary-restricted-snippet {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #495057;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

.commentary-restricted-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.5rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    margin: 0 0.75rem 0.75rem;
}

.commentary-restricted-icon {
    font-size: 1.5rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.commentary-restricted-message {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #495057;
    margin-bottom: 1rem;
    max-width: 360px;
}

.commentary-restricted-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.commentary-restricted-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.25rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.commentary-restricted-btn-primary {
    background: #3b71ca;
    color: #fff;
    border: 1px solid #3b71ca;
}

.commentary-restricted-btn-primary:hover {
    background: #305baf;
    border-color: #305baf;
    color: #fff;
    text-decoration: none;
}

.commentary-restricted-btn-secondary {
    background: transparent;
    color: #3b71ca;
    border: 1px solid #c8d1da;
}

.commentary-restricted-btn-secondary:hover {
    background: #f0f4f8;
    border-color: #3b71ca;
    color: #305baf;
    text-decoration: none;
}

/* Dark mode */
[data-theme="dark"] .commentary-restricted-snippet {
    color: #b0b5bb;
}

[data-theme="dark"] .commentary-restricted-prompt {
    background: #252a30;
    border-color: #3d4450;
}

[data-theme="dark"] .commentary-restricted-icon {
    color: #8a9199;
}

[data-theme="dark"] .commentary-restricted-message {
    color: #b0b5bb;
}

[data-theme="dark"] .commentary-restricted-btn-primary {
    background: #4a85d9;
    border-color: #4a85d9;
}

[data-theme="dark"] .commentary-restricted-btn-primary:hover {
    background: #5a93e0;
    border-color: #5a93e0;
}

[data-theme="dark"] .commentary-restricted-btn-secondary {
    color: #6db3f2;
    border-color: #3d4450;
}

[data-theme="dark"] .commentary-restricted-btn-secondary:hover {
    background: #2a3038;
    border-color: #6db3f2;
    color: #93c5fd;
}

/* Mobile */
@media (max-width: 576px) {
    .commentary-restricted-prompt {
        margin: 0 0.5rem 0.5rem;
        padding: 1rem;
    }

    .commentary-restricted-actions {
        flex-direction: column;
        width: 100%;
    }

    .commentary-restricted-btn {
        justify-content: center;
    }
}

/* === page-loader.css === */
/**
 * Page Loading Indicator
 * Progress bar at top + overlay for slow loads
 */

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */
.page-loader-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #7fd1de, #304e96, #7fd1de);
    background-size: 200% 100%;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.page-loader-bar.active {
    opacity: 1;
    visibility: visible;
    animation: loader-progress 2s ease-out forwards, loader-shimmer 1s linear infinite;
}

@keyframes loader-progress {
    0% { width: 0; }
    20% { width: 30%; }
    50% { width: 60%; }
    80% { width: 80%; }
    100% { width: 95%; }
}

@keyframes loader-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   OVERLAY
   ============================================================================ */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 999998;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page-loader-overlay.active {
    display: flex;
}

/* Dark mode */
[data-theme="dark"] .page-loader-overlay {
    background: rgba(20, 20, 30, 0.9);
}

/* ============================================================================
   SPINNER
   ============================================================================ */
.page-loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(48, 78, 150, 0.2);
    border-top-color: #304e96;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

[data-theme="dark"] .page-loader-spinner {
    border-color: rgba(127, 209, 222, 0.2);
    border-top-color: #7fd1de;
}

@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   LOADING TEXT
   ============================================================================ */
.page-loader-text {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #304e96;
    font-weight: 500;
}

.page-loader-text::after {
    content: '...';
    animation: loader-dots 1s steps(3, end) infinite;
}

@keyframes loader-dots {
    0% { content: ''; }
    33% { content: '.'; }
    66% { content: '..'; }
    100% { content: '...'; }
}

[data-theme="dark"] .page-loader-text {
    color: #7fd1de;
}

/* ============================================================================
   PREVENT DOUBLE-CLICK
   ============================================================================ */
body.page-loading a,
body.page-loading button[type="submit"] {
    pointer-events: none;
    cursor: wait;
}

body.page-loading {
    cursor: wait;
}

/* ============================================================================
   MOBILE
   ============================================================================ */
@media (max-width: 767px) {
    .page-loader-bar {
        height: 4px;
    }

    .page-loader-spinner {
        width: 36px;
        height: 36px;
    }

    .page-loader-text {
        font-size: 0.85rem;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .page-loader-bar,
    .page-loader-bar.active {
        animation: none;
        width: 100%;
    }

    .page-loader-spinner {
        animation: none;
    }

    .page-loader-text::after {
        animation: none;
    }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
    .page-loader-bar,
    .page-loader-overlay {
        display: none !important;
    }
}

/* === scripture_tagger.css === */
/**
 * Scripture Tagger Styles - Pristine Grace
 *
 * Styles for scripture reference links and tooltips.
 * Designed to match the Blue Letter Bible look and feel.
 *
 * @package PristineGrace
 * @since 4.4
 */

/* ============================================================================
   SCRIPTURE REFERENCE LINKS
   ============================================================================ */

a.scripture-ref {
    color: #1a3c6e;
    text-decoration: underline;
    text-decoration-color: rgba(26, 60, 110, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    border: none !important;
    background: none !important;
}

a.scripture-ref:hover {
    color: #395ba9;
    text-decoration-color: rgba(57, 91, 169, 0.7);
}

a.scripture-ref:focus {
    outline: 2px solid rgba(57, 91, 169, 0.3);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Dark mode support */
[data-theme="dark"] a.scripture-ref {
    color: #7fa8e8;
    text-decoration-color: rgba(127, 168, 232, 0.4);
}

[data-theme="dark"] a.scripture-ref:hover {
    color: #a3c4f3;
    text-decoration-color: rgba(163, 196, 243, 0.7);
}

/* ============================================================================
   TOOLTIP CONTAINER
   ============================================================================ */

.scripture-tagger-tooltip {
    position: absolute;
    z-index: 10200;
    max-width: 420px;
    min-width: 280px;
    background: #fff;
    border: 1px solid #c0cfe0;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    animation: tooltipFadeIn 0.15s ease-out;
}

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

.scripture-tagger-tooltip.tooltip-above {
    animation: tooltipFadeInAbove 0.15s ease-out;
}

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

/* ============================================================================
   TOOLTIP HEADER
   ============================================================================ */

.scripture-tooltip-header {
    background: linear-gradient(to bottom, #4a6fa5, #3d5d8f);
    color: #fff;
    padding: 10px 14px;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.scripture-tooltip-header:hover {
    background: linear-gradient(to bottom, #5a7fb5, #4d6d9f);
}

.scripture-tooltip-header:hover .scripture-tooltip-reference {
    text-decoration: underline;
}

.scripture-tooltip-reference {
    flex: 1;
}

.scripture-tooltip-translation {
    font-weight: 400;
    font-size: 13px;
    opacity: 0.9;
    margin-left: 8px;
}

/* ============================================================================
   TOOLTIP CONTENT
   ============================================================================ */

.scripture-tooltip-content {
    padding: 14px;
    color: #333;
    background: #f8fafc;
    max-height: 200px;
    overflow-y: auto;
}

.scripture-tooltip-loading {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

.scripture-tooltip-text {
    line-height: 1.65;
}

.scripture-tooltip-abbrev {
    font-weight: 600;
    color: #1a3c6e;
}

.scripture-tooltip-text sup {
    font-size: 0.7em;
    color: #4a6fa5;
    font-weight: 700;
    margin-right: 2px;
    vertical-align: super;
}

.scripture-tooltip-verse {
    margin-bottom: 6px;
}

.scripture-tooltip-verse:last-child {
    margin-bottom: 0;
}

.scripture-tooltip-inline-ref {
    font-weight: 700;
    color: #1a3c6e;
    font-size: 0.95em;
}

.scripture-tooltip-error {
    color: #c53030;
    font-style: italic;
}

/* Chapter headers for multi-chapter/multi-reference lookups */
.scripture-tooltip-chapter-header {
    font-weight: 700;
    color: #1a3c6e;
    font-size: 13px;
    margin-bottom: 4px;
}

.scripture-tooltip-chapter-break {
    height: 1px;
    background: #d0dce8;
    margin: 10px 0;
}

/* ============================================================================
   TOOLTIP FOOTER
   ============================================================================ */

.scripture-tooltip-footer {
    background: #e8f0f8;
    padding: 8px 14px;
    border-top: 1px solid #d0dce8;
    border-radius: 0 0 5px 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.scripture-tooltip-powered {
    color: #666;
}

.scripture-tooltip-brand {
    color: #1a3c6e;
    font-weight: 700;
}

/* ============================================================================
   DARK MODE TOOLTIP
   ============================================================================ */

[data-theme="dark"] .scripture-tagger-tooltip {
    background: #1e2a3a;
    border-color: #3a4a5e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .scripture-tooltip-header {
    background: linear-gradient(to bottom, #2d4a70, #243d5c);
}

[data-theme="dark"] .scripture-tooltip-content {
    background: #141e2a;
    color: #e0e6ed;
}

[data-theme="dark"] .scripture-tooltip-abbrev {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-text sup {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-inline-ref {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-chapter-header {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-chapter-break {
    background: #2a3a4e;
}

[data-theme="dark"] .scripture-tooltip-footer {
    background: #1a2636;
    border-color: #2a3a4e;
}

[data-theme="dark"] .scripture-tooltip-powered {
    color: #888;
}

[data-theme="dark"] .scripture-tooltip-brand {
    color: #7fa8e8;
}

/* ============================================================================
   SPECIAL CONTEXTS - Match existing BLB overrides
   ============================================================================ */

/* Hero sections with dark backgrounds - white links */
.article-hero a.scripture-ref,
.broadcaster-hero a.scripture-ref,
.broadcaster-hero a[class*="scripture-ref"],
.broadcaster-description a.scripture-ref,
.broadcaster-description a[class*="scripture-ref"] {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    border-bottom: none !important;
    background: none !important;
}

.article-hero a.scripture-ref:hover,
.broadcaster-hero a.scripture-ref:hover,
.broadcaster-description a.scripture-ref:hover {
    color: #fff !important;
    text-decoration-color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 480px) {
    .scripture-tagger-tooltip {
        max-width: calc(100vw - 80px);
        min-width: 220px;
        left: 40px !important;
        right: 40px !important;
    }

    .scripture-tooltip-header {
        padding: 8px 12px;
        font-size: 14px;
    }

    .scripture-tooltip-content {
        padding: 12px;
        font-size: 13px;
        max-height: 160px;
    }

    .scripture-tooltip-footer {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    a.scripture-ref {
        color: inherit !important;
        text-decoration: none !important;
    }

    .scripture-tagger-tooltip {
        display: none !important;
    }
}

/* === reading_plan.css === */
/* ========================================
   BIBLE READING PLAN STYLES
   ======================================== */

/* --- CSS Variables --- */
:root {
    --rp-bg: #fff;
    --rp-text: #333;
    --rp-text-muted: #6c757d;
    --rp-border: #dee2e6;
    --rp-accent: #304e96;
    --rp-accent-light: rgba(48, 78, 150, 0.08);
    --rp-success: #198754;
    --rp-success-light: rgba(25, 135, 84, 0.1);
    --rp-card-bg: #f8f9fa;
    --rp-card-border: #dee2e6;
    --rp-card-hover: #e9ecef;
    --rp-progress-bg: #e9ecef;
    --rp-progress-fill: #304e96;
    --rp-check-color: #198754;
    --rp-link: #304e96;
    --rp-icon-muted: #adb5bd;
    --rp-guest-bg: #f8f5f0;
    --rp-guest-border: #d4a574;
}

[data-theme="dark"] {
    --rp-bg: #252538;
    --rp-text: #e0e0e0;
    --rp-text-muted: #a0a0a0;
    --rp-border: #404055;
    --rp-accent: #7fb3ff;
    --rp-accent-light: rgba(127, 179, 255, 0.1);
    --rp-success: #5cb85c;
    --rp-success-light: rgba(92, 184, 92, 0.1);
    --rp-card-bg: #2d2d44;
    --rp-card-border: #404055;
    --rp-card-hover: #363650;
    --rp-progress-bg: #404055;
    --rp-progress-fill: #7fb3ff;
    --rp-check-color: #5cb85c;
    --rp-link: #7fb3ff;
    --rp-icon-muted: #666;
    --rp-guest-bg: #2d2a24;
    --rp-guest-border: #8b7355;
}

/* --- Main Content Container --- */
.rp-content {
    padding: 1rem;
    color: var(--rp-text);
    min-height: 200px;
}

/* --- Guest State (not logged in) --- */
.rp-guest {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--rp-guest-bg);
    border: 1px solid var(--rp-guest-border);
    border-radius: 8px;
    margin: 1rem 0;
}

.rp-guest i.bi-lock {
    font-size: 2.5rem;
    color: var(--rp-icon-muted);
    display: block;
    margin-bottom: 1rem;
}

.rp-guest h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--rp-text);
}

.rp-guest p {
    font-size: 0.9rem;
    color: var(--rp-text-muted);
    margin-bottom: 0.5rem;
}

.rp-guest a {
    color: var(--rp-link);
    text-decoration: none;
    font-weight: 500;
}

.rp-guest a:hover {
    text-decoration: underline;
}

.rp-guest i.bi-calendar-check {
    font-size: 2.5rem;
    color: var(--rp-icon-muted);
    display: block;
    margin-bottom: 1rem;
}

.rp-guest-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.85rem;
    color: var(--rp-text-muted);
}

.rp-guest-features span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rp-guest-features i {
    color: var(--rp-success);
    font-size: 0.9rem;
}

.rp-guest-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rp-guest-btn {
    display: inline-block;
    padding: 0.45rem 1.25rem;
    background: #3b71ca;
    color: #fff !important;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.rp-guest-btn:hover {
    background: #305baf;
}

[data-theme="dark"] .rp-guest-btn {
    background: #4a85d9;
}

[data-theme="dark"] .rp-guest-btn:hover {
    background: #5a93e0;
}

.rp-guest-signin {
    font-size: 0.8rem;
    color: var(--rp-text-muted);
}

/* --- Plan Selection State --- */
.rp-select-header {
    margin-bottom: 1rem;
}

.rp-select-header h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rp-text);
    margin-bottom: 0.25rem;
}

.rp-select-subtitle {
    font-size: 0.85rem;
    color: var(--rp-text-muted);
    margin: 0;
}

/* Plan Cards */
.rp-plan-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rp-plan-card {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.rp-plan-card:hover {
    background: var(--rp-card-hover);
    border-color: var(--rp-accent);
}

.rp-plan-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--rp-accent-light);
    color: var(--rp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
}

.rp-plan-card-body {
    flex: 1;
    min-width: 0;
}

.rp-plan-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rp-text);
    margin-bottom: 0.15rem;
}

.rp-plan-card-desc {
    font-size: 0.8rem;
    color: var(--rp-text-muted);
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

/* Hidden on desktop where descriptions show in full */
.rp-plan-card-toggle {
    display: none;
}

.rp-plan-card-meta {
    font-size: 0.75rem;
    color: var(--rp-text-muted);
}

.rp-plan-card-meta span {
    margin-right: 0.75rem;
}

.rp-plan-card-btn {
    flex-shrink: 0;
    align-self: center;
    background: var(--rp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.rp-plan-card-btn:hover {
    opacity: 0.85;
}

/* --- Active Plan State --- */
.rp-active-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rp-plan-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rp-text);
}

.rp-day-label {
    font-size: 0.8rem;
    color: var(--rp-text-muted);
}

/* Progress Section */
.rp-progress-section {
    margin-bottom: 1rem;
}

.rp-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rp-progress-label {
    font-size: 0.75rem;
    color: var(--rp-text-muted);
    min-width: 45px;
}

.rp-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--rp-progress-bg);
    border-radius: 4px;
    overflow: hidden;
}

.rp-progress-fill {
    height: 100%;
    background: var(--rp-progress-fill);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 0;
}

.rp-progress-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rp-accent);
    min-width: 32px;
    text-align: right;
}

/* Section Titles */
.rp-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Today's Readings */
.rp-today-section {
    margin-bottom: 1rem;
}

.rp-readings {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.6rem;
}

.rp-reading-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--rp-text);
    background: var(--rp-card-bg);
    gap: 0.5rem;
}

.rp-reading-item > i {
    color: var(--rp-icon-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.rp-reading-item.completed > i {
    color: var(--rp-check-color);
}

.rp-reading-item.completed {
    color: var(--rp-text-muted);
}

.rp-reading-item.completed .rp-reading-link {
    text-decoration: line-through;
    text-decoration-color: var(--rp-text-muted);
}

/* Reading checkbox button */
.rp-reading-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.15rem;
    cursor: pointer;
    color: var(--rp-icon-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.15s, transform 0.1s;
}

.rp-reading-check:hover {
    color: var(--rp-accent);
    transform: scale(1.15);
}

.rp-reading-item.completed .rp-reading-check {
    color: var(--rp-check-color);
}

.rp-reading-item.completed .rp-reading-check:hover {
    color: var(--rp-text-muted);
}

/* Reading reference links */
.rp-reading-link {
    color: var(--rp-accent);
    text-decoration: none;
    cursor: pointer;
}

.rp-reading-link:hover {
    text-decoration: underline;
}

.rp-reading-item.completed .rp-reading-link {
    color: var(--rp-text-muted);
}

/* Mark Done Button */
.rp-mark-done-btn {
    display: inline-flex;
    align-items: center;
    background: var(--rp-success);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rp-mark-done-btn:hover {
    opacity: 0.85;
}

.rp-mark-done-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Already Done State */
.rp-already-done {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rp-check-color);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0;
}

.rp-already-done i {
    font-size: 1.1rem;
}

/* Undo Button (shown when day is complete) */
.rp-undo-btn {
    background: none;
    border: none;
    color: var(--rp-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    text-decoration: underline;
    margin-left: 0.5rem;
}

.rp-undo-btn:hover {
    color: var(--rp-text);
}

/* --- Day Navigation --- */
.rp-day-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    margin: 0.5rem 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-nav-btn {
    background: none;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    color: var(--rp-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s, color 0.15s;
}

.rp-nav-btn:hover {
    background: var(--rp-card-bg);
    color: var(--rp-text);
}

.rp-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.rp-nav-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rp-text);
    min-width: 80px;
    text-align: center;
}

.rp-today-btn {
    background: var(--rp-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 0.25rem;
}

.rp-today-btn:hover {
    opacity: 0.85;
}

/* --- Upcoming Days --- */
.rp-upcoming-section {
    margin-bottom: 1rem;
}

.rp-upcoming {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rp-upcoming-day {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.rp-upcoming-day:hover {
    background: var(--rp-card-hover);
}

.rp-upcoming-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}

.rp-upcoming-day-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rp-text-muted);
}

.rp-upcoming-day-check {
    font-size: 0.75rem;
    color: var(--rp-check-color);
}

.rp-upcoming-day-readings {
    font-size: 0.8rem;
    color: var(--rp-text);
    line-height: 1.4;
}

.rp-upcoming-day.completed {
    opacity: 0.6;
}

.rp-upcoming-day.completed .rp-upcoming-day-readings {
    text-decoration: line-through;
    color: var(--rp-text-muted);
}

/* --- Actions Section --- */
.rp-actions-section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rp-reminder-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--rp-text);
    cursor: pointer;
}

.rp-reminder-toggle input[type="checkbox"] {
    accent-color: var(--rp-accent);
}

.rp-cancel-btn {
    background: none;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    color: var(--rp-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.rp-cancel-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
}

/* --- Completed State --- */
.rp-complete {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.rp-complete i.bi-trophy {
    font-size: 3rem;
    color: #f0ad4e;
    display: block;
    margin-bottom: 1rem;
}

.rp-complete h6 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rp-text);
    margin-bottom: 0.5rem;
}

.rp-complete p {
    font-size: 0.9rem;
    color: var(--rp-text-muted);
    margin-bottom: 1rem;
}

.rp-complete-plan-name {
    font-size: 0.85rem;
    color: var(--rp-text-muted);
    margin-bottom: 1rem;
}

.rp-restart-btn {
    background: var(--rp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rp-restart-btn:hover {
    opacity: 0.85;
}

/* --- Loading State --- */
.rp-loading {
    text-align: center;
    padding: 2rem;
    color: var(--rp-text-muted);
    font-size: 0.9rem;
}

/* --- Error State --- */
.rp-error {
    text-align: center;
    padding: 1.5rem;
    color: #dc3545;
    font-size: 0.9rem;
}

/* --- Confirmation Dialog --- */
.rp-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 0.5rem;
}

.rp-confirm-dialog {
    background: var(--rp-bg);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rp-confirm-dialog p {
    font-size: 0.9rem;
    color: var(--rp-text);
    margin-bottom: 1rem;
}

.rp-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.rp-confirm-yes {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.rp-confirm-no {
    background: var(--rp-card-bg);
    color: var(--rp-text);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    .rp-content {
        padding: 0.75rem;
    }

    .rp-guest {
        padding: 1.5rem 1rem;
    }

    .rp-guest i.bi-lock {
        font-size: 2rem;
    }

    .rp-plan-card {
        padding: 0.7rem;
    }

    .rp-plan-card-icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .rp-plan-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rp-plan-card-desc.expanded {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .rp-plan-card-toggle {
        display: inline-block;
        font-size: 0.75rem;
        color: var(--rp-accent);
        cursor: pointer;
        padding: 0.15rem 0;
        font-weight: 500;
    }

    .rp-plan-card-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.72rem;
    }

    .rp-active-header {
        flex-direction: column;
        gap: 0.1rem;
    }

    .rp-actions-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .rp-complete {
        padding: 1.5rem 1rem;
    }

    .rp-complete i.bi-trophy {
        font-size: 2.5rem;
    }

    .rp-plan-active-card {
        padding: 0.8rem;
    }
}

/* ======================================
   MULTI-PLAN SUPPORT
   ====================================== */

/* Active plan cards */
.rp-plan-active-card {
    background: var(--rp-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.rp-plan-active-card:last-child {
    margin-bottom: 0;
}

/* Add another plan button */
.rp-add-plan {
    text-align: center;
    margin-top: 0.75rem;
}

.rp-add-plan-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px dashed var(--rp-border);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    color: var(--rp-accent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.rp-add-plan-btn:hover {
    background: var(--rp-accent-light);
    border-color: var(--rp-accent);
}

/* Back button on plan selection (when coming from active view) */
.rp-select-back {
    margin-bottom: 0.75rem;
}

.rp-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--rp-accent);
    cursor: pointer;
}

.rp-back-btn:hover {
    text-decoration: underline;
}

/* Enrolled badge on plan cards */
.rp-plan-card.enrolled {
    opacity: 0.65;
    cursor: default;
}

.rp-plan-card-enrolled {
    font-size: 0.75rem;
    color: var(--rp-success);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}