/**
 * Rasamala Theme - OPAC Page components & Layouts
 * Part of SLiMS 9 Bulian OPAC Custom Theme
 * Refactored and Split on: 2026-07-20
 */

/* ----------------------------------------------------
   3. Search and Inputs
   ---------------------------------------------------- */
#search-wraper {
  margin-top: -24px !important;
  margin-bottom: 16px;
  z-index: 100;
  overflow: visible;
}

/* Override negative search box margin on result pages to prevent overlapping/cutoff navbar */
.result-search #search-wraper {
  margin-top: 42px !important;
  margin-bottom: 24px !important;
}

.rasamala-subpage-wrapper #section1 #search-wraper {
  margin-top: 42px !important;
}

#search-wraper .card {
  background: var(--theme-surface) !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: 9999px !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  transition: border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#search-wraper .card:focus-within {
  border-color: var(--rasamala-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb), 0.15), var(--rasamala-card-shadow) !important;
}

#search-input {
  font-family: var(--rasamala-font-stack) !important;
  font-weight: 400;
  color: var(--rasamala-text-primary) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.search .input-transparent {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#search-input::placeholder {
  color: var(--theme-muted) !important;
  opacity: 1 !important;
}

/* Light Search Bar style for homepage hero */
#section1 #search-wraper {
  margin-top: 0 !important;
  margin-bottom: 0;
}

#section1 #search-wraper .card {
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-background) 4%) !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 30%, transparent) !important;
  border-radius: 9999px !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--theme-primary) 8%, transparent) !important;
}

#section1 #search-wraper .card:focus-within {
  background: var(--theme-surface) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 62%, var(--theme-primary) 38%) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 20%, transparent), 0 18px 44px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

#section1 #search-wraper #search-input {
  color: var(--rasamala-text-primary) !important;
}

#section1 #search-wraper #search-input::placeholder {
  color: var(--theme-muted) !important;
  opacity: 1 !important;
}

#section1 #search-wraper .text-muted {
  color: var(--theme-muted) !important;
}

#section1 #search-wraper .text-muted:hover {
  color: var(--rasamala-accent) !important;
}

/* ----------------------------------------------------
   4. Cards and Collections Grid
   ---------------------------------------------------- */
.card,
.grid-item .card,
.slims-content .card,
.slims-content .grid-item {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  overflow: hidden;
}

.card:hover,
.grid-item .card:hover,
.slims-content .card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 20px 40px rgba(66, 66, 66, 0.08) !important;
}

/* Card media images */
.grid-item img.img-thumbnail,
.slims-content img,
.card img.img-fluid {
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(66, 66, 66, 0.06) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.card:hover img.img-thumbnail,
.slims-content .card:hover img,
.card:hover img.img-fluid {
  transform: scale(1.03) !important;
}

/* Topic list cards */
.topic li {
  width: 150px;
  height: 150px;
  border-radius: 18px !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
  background: #ffffff !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  margin: 10px !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.topic li:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(66, 66, 66, 0.08) !important;
}

.topic li a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rasamala-text-primary) !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}

.topic-icon-img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
}

.topic-icon-fa {
  width: 88px !important;
  height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--rasamala-accent) !important;
  font-size: 54px !important;
  line-height: 1 !important;
}

.topic li a:hover {
  color: var(--rasamala-accent) !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------
   5. Search Results & Search Detail
   ---------------------------------------------------- */
.biblio-simple-item {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  position: relative !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  background-color: var(--theme-surface) !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: var(--rasamala-radius-card) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.22s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.22s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.biblio-simple-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--rasamala-border-accent) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-primary) 8%, transparent) !important;
  z-index: 40 !important;
}

.biblio-simple-main {
  min-width: 0 !important;
}

.biblio-simple-title {
  display: block !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.biblio-simple-title:hover {
  color: var(--rasamala-accent) !important;
  text-decoration: none !important;
}

.parallel-title {
  display: block !important;
  min-width: 0 !important;
}

.parallel-title-main {
  display: block !important;
}

.parallel-title-alt {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 4px !important;
  color: var(--theme-muted-on-surface) !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.parallel-title-alt i {
  flex: 0 0 auto !important;
  margin-top: 0.15em !important;
  color: var(--theme-muted-on-surface) !important;
  font-size: 0.95em !important;
}

.parallel-title-detail .parallel-title-alt {
  margin-top: 6px !important;
  font-size: 0.58em !important;
  font-weight: 500 !important;
  color: var(--theme-muted-on-surface) !important;
}

.parallel-title-home .parallel-title-alt,
.parallel-title-grid .parallel-title-alt {
  font-size: 0.86em !important;
}

.biblio-simple-author {
  margin-top: 3px !important;
  color: var(--rasamala-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.biblio-simple-availability {
  flex: 0 0 auto !important;
  min-width: 52px !important;
  position: relative !important;
  text-align: right !important;
  color: var(--rasamala-text-secondary) !important;
}

.biblio-simple-availability-count {
  display: inline-block !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.biblio-avail-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 50px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--rasamala-font-stack) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.biblio-avail-badge * {
  pointer-events: none !important;
}

.biblio-avail-ok {
  background: rgba(40, 167, 69, 0.12) !important;
  color: #218838 !important;
}

.biblio-avail-no {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #c82333 !important;
}

.biblio-avail-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}

.biblio-avail-popover {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  z-index: 80 !important;
  min-width: 320px !important;
  max-width: min(520px, calc(100vw - 32px)) !important;
  margin-top: 8px !important;
  padding: 12px !important;
  text-align: left !important;
  background: #ffffff !important;
  border: 1px solid rgba(66, 66, 66, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

.biblio-avail-popover::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  right: 18px !important;
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  border-left: 1px solid rgba(66, 66, 66, 0.1) !important;
  border-top: 1px solid rgba(66, 66, 66, 0.1) !important;
  transform: rotate(45deg) !important;
}

.biblio-avail-popover.show {
  display: block !important;
}

.biblio-avail-popover-title {
  margin-bottom: 8px !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.biblio-avail-popover-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.biblio-avail-popover-table th,
.biblio-avail-popover-table td {
  padding: 4px 6px !important;
  border-bottom: 1px solid rgba(66, 66, 66, 0.06) !important;
  color: var(--rasamala-text-secondary) !important;
  font-size: 11px !important;
  vertical-align: top !important;
}

.biblio-avail-popover-table th {
  color: var(--rasamala-text-primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

.biblio-avail-row-ok {
  color: #218838 !important;
}

.biblio-avail-row-no {
  color: #c82333 !important;
}

@media (max-width: 767.98px) {
  .biblio-simple-item {
    gap: 10px !important;
  }

  .biblio-avail-popover,
  .detail-avail-popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 1080 !important;
    min-width: min(340px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
    border-radius: 16px !important;
  }

  .biblio-avail-popover::before,
  .detail-avail-popover::before {
    display: none !important;
  }
}

.card.item.border-0 {
  background: #ffffff !important;
  margin-bottom: 24px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
}

.card.item.border-0 .card-body {
  padding: 24px !important;
}

.card.item.border-0 h5 a.card-link {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-primary) !important;
  letter-spacing: -0.015em;
  transition: color 0.2s ease;
}

.card.item.border-0 h5 a.card-link:hover {
  color: var(--rasamala-accent) !important;
}

.authors a.btn-outline-secondary {
  border-radius: var(--rasamala-radius-button) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--rasamala-text-secondary) !important;
  border: 1px solid var(--rasamala-border) !important;
  background: transparent !important;
  padding: 4px 12px !important;
  margin-right: 6px !important;
  margin-bottom: 6px !important;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.authors a.btn-outline-secondary:hover {
  color: var(--rasamala-text-primary) !important;
  border-color: var(--rasamala-text-secondary) !important;
  background: rgba(66, 66, 66, 0.02) !important;
}

.card.availability {
  position: relative !important;
  text-align: center !important;
  overflow: hidden !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card.availability:hover {
  transform: none !important;
  box-shadow: none !important;
}

.card.availability .availability-content {
  transition: filter 0.3s ease, -webkit-filter 0.3s ease !important;
  padding-top: 10px;
  padding-bottom: 8px;
}

.card.availability:hover .availability-content {
  filter: blur(5px) !important;
  -webkit-filter: blur(5px) !important;
}

.card.availability .value {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-primary) !important;
  display: block !important;
}

.card.availability .value.text-danger {
  color: #B85C5C !important;
  /* Muted Red */
}

.card.availability .label {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rasamala-text-secondary) !important;
  display: block !important;
}

.add-to-chart-button {
  cursor: pointer;
}

.detail-cover-wrapper {
  border: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: transform 0.3s ease !important;
  max-width: 200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

.add-to-chart {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(66, 66, 66, 0.95) !important;
  color: #FFFFFF !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease-in-out !important;
  border-radius: 11px !important;
  padding: 4px !important;
  margin: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.card.availability:hover .add-to-chart {
  opacity: 1 !important;
}

.add-to-chart .label {
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  display: block !important;
}

.add-to-chart .value {
  font-size: 16px !important;
  color: #ffffff !important;
  margin-top: 4px !important;
  display: block !important;
}

/* Grid Item Title */
.grid-item--title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-primary) !important;
  display: block;
  line-height: 1.3;
}

.grid-item--title:hover {
  color: var(--rasamala-accent) !important;
}

.grid-item .p-5 {
  padding: 24px !important;
  background-color: var(--rasamala-light-bg) !important;
}

/* Paging list */
.biblioPaging {
  border-top: 1px solid rgba(var(--theme-accent-rgb), 0.12) !important;
  padding-top: 18px !important;
  margin-top: 22px !important;
  text-align: center !important;
}

.biblioPaging .pagingList {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

.biblioPaging .pagingList b {
  background: var(--rasamala-pagination-active-bg) !important;
  border-color: var(--rasamala-pagination-active-border) !important;
  box-shadow: var(--rasamala-pagination-shadow) !important;
  color: var(--rasamala-pagination-active-text) !important;
}

.biblioPaging .pagingList a {
  color: var(--rasamala-pagination-text) !important;
}

.biblioPaging .pagingList a:hover {
  color: var(--rasamala-pagination-hover-text) !important;
  border-color: var(--rasamala-pagination-hover-border) !important;
  background: var(--rasamala-pagination-hover-bg) !important;
}

/* ----------------------------------------------------
   6. Custom Filters & Sorting (Pill Chip style)
   ---------------------------------------------------- */
/* Convert checkboxes and radio options in SLiMS filter to chips */
#desktop-filter-container label,
#mobile-filter-container label,
.filter-item label,
.SearchFilter label {
  display: inline-block !important;
  padding: 6px 14px !important;
  margin-right: 6px !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--rasamala-text-primary) !important;
  background: #ffffff !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: var(--rasamala-radius-button) !important;
  cursor: pointer !important;
  transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  user-select: none !important;
}

#desktop-filter-container label:hover,
#mobile-filter-container label:hover {
  background: rgba(66, 66, 66, 0.03) !important;
  border-color: var(--rasamala-text-secondary) !important;
}

/* Checked/Active state for filters */
#desktop-filter-container input[type="checkbox"]:checked+label,
#desktop-filter-container input[type="radio"]:checked+label,
#mobile-filter-container input[type="checkbox"]:checked+label,
#mobile-filter-container input[type="radio"]:checked+label {
  background: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
}

/* Hide original checkboxes/radios since labels are now interactive chips */
#desktop-filter-container input[type="checkbox"],
#desktop-filter-container input[type="radio"],
#mobile-filter-container input[type="checkbox"],
#mobile-filter-container input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* Sort chips styling */
.sort-chip {
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: var(--rasamala-radius-button) !important;
  border: 1px solid var(--rasamala-control-border) !important;
  background: var(--rasamala-control-bg) !important;
  color: var(--rasamala-control-text) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
}

.sort-chip:hover {
  background: var(--rasamala-control-hover-bg) !important;
  border-color: var(--rasamala-control-hover-border) !important;
  text-decoration: none !important;
}

.sort-chip.active {
  background: var(--rasamala-button-bg) !important;
  border-color: var(--rasamala-button-border) !important;
  color: var(--rasamala-button-text) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary) 20%, transparent) !important;
  text-decoration: none !important;
}

#search-order {
  display: none !important;
}

.search-sort-bar {
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 20%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.search-sort-controls {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  gap: 9px 10px;
}

.search-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  flex: 0 0 auto;
  color: var(--theme-muted-on-surface);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.search-sort-label-icon {
  color: var(--theme-accent);
  font-size: 13px;
}

.search-sort-chips {
  display: flex;
  align-items: center;
  flex: 1 1 420px;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
}

.search-sort-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  max-width: 100%;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-primary) 4%);
  color: var(--theme-on-surface);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.search-sort-chip:hover,
.search-sort-chip:focus {
  border-color: color-mix(in srgb, var(--theme-accent) 42%, transparent);
  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
  color: var(--theme-on-surface);
  box-shadow: 0 8px 18px rgba(var(--theme-accent-rgb), 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.search-sort-chip.active {
  border-color: transparent;
  background: var(--theme-accent);
  color: var(--theme-on-accent);
  box-shadow: 0 9px 20px rgba(var(--theme-accent-rgb), 0.18);
}

.search-view-dropdown {
  flex: 0 0 auto;
}

.search-view-toggle {
  min-height: 38px;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-primary) 4%);
  color: var(--theme-on-surface);
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.search-view-toggle:hover,
.search-view-toggle:focus,
.show>.search-view-toggle.dropdown-toggle {
  border-color: color-mix(in srgb, var(--theme-accent) 42%, transparent);
  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
  color: var(--theme-on-surface);
  box-shadow: 0 8px 18px rgba(var(--theme-accent-rgb), 0.12);
}

.search-view-toggle-icon {
  color: var(--theme-accent);
  font-size: 13px;
}

.search-view-toggle-label {
  overflow-wrap: anywhere;
}

body.rasamala-search-panels-transparent .result-search .search-sort-bar {
  border-color: color-mix(in srgb, var(--theme-accent) 18%, transparent);
  background: color-mix(in srgb, var(--theme-surface) 68%, transparent);
  box-shadow: none;
}

body.rasamala-search-panels-transparent .result-search .search-sort-chip,
body.rasamala-search-panels-transparent .result-search .search-view-toggle {
  background: color-mix(in srgb, var(--theme-surface) 74%, transparent);
}

@media (max-width: 991.98px) {
  .search-sort-bar {
    gap: 12px;
  }

  .search-sort-controls {
    gap: 8px;
  }

  .search-sort-chips {
    flex-basis: 100%;
  }
}

/* ----------------------------------------------------
   7. Detail Page (show_detail) Styling
   ---------------------------------------------------- */
.detail-record {
  position: relative;
  overflow: hidden;
  background: var(--theme-surface);
  background-color: var(--theme-surface);
  border: 1px solid color-mix(in srgb, var(--theme-muted) 24%, transparent);
  border-radius: 22px;
  box-shadow: none;
  padding: clamp(24px, 3vw, 38px);
  font-family: var(--rasamala-font-stack);
}

/* Modernized Detail Tables */
.detail-record table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 15px;
  margin-bottom: 25px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-accent) 6%);
  box-shadow: none;
}

.detail-record table th {
  background-color: transparent;
  color: var(--rasamala-text-secondary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 16px;
  border: 0;
}

.detail-record table td {
  padding: 14px 16px;
  border: 0;
  font-size: 13px;
  color: var(--rasamala-text-primary);
  vertical-align: middle;
}

.detail-record table tr:last-child td {
  border-bottom: none;
}

.detail-record table tr:hover td {
  background-color: color-mix(in srgb, var(--theme-accent) 5%, transparent);
}

/* Responsive Table scroll on Mobile screen sizes */
@media (max-width: 767.98px) {
  .detail-record table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Detail definition list specs style */
.detail-record dl.row {
  border: 0;
  padding-top: 4px;
  margin-left: 0;
  margin-right: 0;
}

.detail-record dl.row dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-on-surface);
  border: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

.detail-record dl.row dd {
  font-size: 14px;
  color: var(--rasamala-text-primary);
  border: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 0;
}

.detail-record dl.row dt:last-of-type,
.detail-record dl.row dd:last-of-type {
  border-bottom: none;
}

/* Comment section bubbles formatting */
.commentList {
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

.commentList>div {
  background-color: var(--rasamala-light-bg) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--rasamala-border) !important;
}

.commentList .comment-header {
  font-weight: 600 !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

.commentList .comment-body {
  font-size: 14px !important;
  color: var(--rasamala-text-secondary) !important;
  line-height: 1.5 !important;
}

/* Global horizontal rule */
hr {
  border-top: 1px solid rgba(66, 66, 66, 0.08) !important;
}

/* Override btn-dark to match Rasamala theme */
.btn-dark {
  background-color: var(--rasamala-text-primary) !important;
  border-color: var(--rasamala-text-primary) !important;
  color: #ffffff !important;
  border-radius: var(--rasamala-radius-button) !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.btn-dark:hover {
  background-color: #424242 !important;
  border-color: #424242 !important;
}

/* ---------------------------------------------------- */

.palette-switcher-panel {
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

.palette-switcher-label {
  display: block !important;
  margin: 6px 0 3px !important;
  color: var(--theme-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.palette-switcher-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 10px !important;
  margin-top: 6px !important;
}

.palette-switcher-field {
  min-width: 0 !important;
}

.palette-switcher-field .palette-switcher-label {
  margin-top: 0 !important;
}

.palette-switcher-select {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 28%, transparent) !important;
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

.palette-switcher-select:focus {
  border-color: var(--theme-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
}

.palette-switcher-section-tools {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted) 16%, transparent) !important;
}

.palette-switcher-section-head {
  margin-bottom: 2px !important;
}

.palette-switcher-section-label {
  margin: 0 !important;
}

.palette-switcher-section-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px 8px !important;
  width: 100% !important;
}

.palette-switcher-section-option {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 22%, transparent) !important;
  border-radius: var(--rasamala-radius-button) !important;
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent) !important;
  color: var(--theme-text) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.palette-switcher-section-option:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 40%, transparent) !important;
  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface) 90%) !important;
}

.palette-switcher-section-option input {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: var(--theme-accent) !important;
  cursor: pointer !important;
}

.palette-switcher-section-option span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.rasamala-opac-sections-hidden #slims-home .rasamala-home-section {
  display: none !important;
}

.palette-switcher-custom-input {
  min-height: 92px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
}

.palette-switcher-help {
  margin-top: 6px !important;
  color: var(--theme-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.palette-switcher-field-help {
  margin: 4px 0 0 !important;
  max-width: 64ch !important;
}

.palette-switcher-swatches {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.palette-switcher-swatch {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border: 2px solid transparent !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, var(--swatch-primary) 0 38%, var(--swatch-secondary) 38% 70%, var(--swatch-accent) 70% 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
}

.palette-switcher-swatch.is-active {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

.palette-switcher-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

/* ----------------------------------------------------
   9. Tailwind Compatibility & Availability Badges
   ---------------------------------------------------- */
.flex {
  display: flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.w-full {
  width: 100% !important;
}

.block {
  display: block !important;
}

.border-gray-300 {
  border-color: rgba(66, 66, 66, 0.08) !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

/* Availability Badge Style Overrides */
.availability-item {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.item-available {
  background-color: var(--rasamala-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
}

.item-onloan,
.item-notforloan {
  background-color: var(--rasamala-text-secondary-dark) !important;
  color: var(--rasamala-text-primary) !important;
  border: none !important;
}

.item-onreserve {
  background-color: var(--rasamala-light-bg) !important;
  color: var(--rasamala-text-primary) !important;
  border: 1px solid var(--rasamala-border) !important;
}

.availability-summary-list {
  display: grid !important;
  gap: 10px !important;
  margin: 10px 0 12px !important;
}

.availability-summary-card {
  background: #ffffff !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03) !important;
}

.availability-summary-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.availability-summary-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.availability-summary-location i {
  color: var(--rasamala-accent) !important;
  flex: 0 0 auto !important;
}

.availability-summary-location span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.availability-summary-count {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: rgba(var(--theme-accent-rgb), 0.1) !important;
  color: var(--rasamala-accent) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.availability-summary-count strong {
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--rasamala-accent) !important;
}

.availability-summary-callnumber,
.availability-summary-statuses {
  margin-top: 7px !important;
  padding-left: 22px !important;
  color: var(--rasamala-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.detail-side-availability {
  max-width: 260px;
  margin: 16px auto 0;
  text-align: left;
}

.detail-meta-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.detail-gmd-label {
  flex: 0 0 auto !important;
}

.detail-actions-icon-group {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

.text-theme-accent {
  color: var(--rasamala-accent) !important;
}

.detail-side-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.detail-side-heading i,
.detail-section-heading i,
.detail-notes-header i,
.detail-callnumber-label i,
.detail-callnumber-tag i,
.detail-gmd-label i,
.detail-qr-label i {
  display: inline-block !important;
  font-size: 14px !important;
  color: var(--rasamala-accent) !important;
  flex: 0 0 auto !important;
}

.detail-side-heading::before {
  display: none !important;
  content: none !important;
}

.detail-callnumber-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 12%, transparent) !important;
  text-align: center;
  width: 100%;
}

.detail-callnumber-label {
  width: 100%;
  color: var(--theme-on-surface);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none !important;
}

.detail-callnumber-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--theme-on-surface) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.2 !important;
  padding: 4px 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.detail-callnumber-tag i {
  margin-right: 6px !important;
  font-size: 12px !important;
  flex: 0 0 auto !important;
}

.detail-avail-rows {
  position: relative !important;
}

.detail-avail-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  margin-bottom: 2px;
  padding: 8px 2px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 10%, transparent) !important;
  border-radius: 0 !important;
  background: transparent;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.detail-avail-row::before {
  display: none !important;
  content: none !important;
}

.detail-avail-row:hover,
.detail-avail-row:focus-within {
  border-color: color-mix(in srgb, var(--theme-accent) 34%, transparent);
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  outline: none;
}

.avail-loc-callno {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.avail-loc-name {
  display: block !important;
  color: var(--theme-on-surface) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

.avail-count {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: transparent;
  background-color: transparent;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.avail-count-ok,
.avail-badge-ok {
  color: #28a745 !important;
}

.avail-count-no,
.avail-badge-no {
  color: #dc3545 !important;
}

.detail-avail-more {
  margin-top: 5px !important;
  text-align: center !important;
}

.detail-avail-more-btn {
  color: var(--rasamala-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.detail-avail-more-btn:hover,
.detail-avail-more-btn:focus {
  color: var(--rasamala-accent) !important;
  text-decoration: none !important;
}

.detail-avail-popover {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 50 !important;
  display: block !important;
  min-width: 300px !important;
  max-width: min(520px, 86vw) !important;
  margin-top: 6px !important;
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.detail-avail-row:hover .detail-avail-popover,
.detail-avail-row:focus-within .detail-avail-popover,
.detail-avail-popover.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.detail-avail-popover-title {
  margin-bottom: 7px !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.detail-avail-popover-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.detail-record .detail-avail-popover-table th,
.detail-record .detail-avail-popover-table td {
  padding: 5px 6px !important;
  border-bottom: 1px solid var(--rasamala-border) !important;
  white-space: nowrap !important;
}

.detail-record .detail-avail-popover-table th {
  background: transparent !important;
  color: var(--rasamala-text-secondary) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}

.detail-record .detail-avail-popover-table td {
  color: var(--rasamala-text-primary) !important;
  font-size: 11px !important;
}

.detail-record .detail-avail-popover-table th:nth-child(3),
.detail-record .detail-avail-popover-table td:nth-child(3) {
  white-space: normal !important;
}

.detail-side-availability .availability-summary-list {
  gap: 8px !important;
  margin: 0 0 10px !important;
}

.detail-side-availability .availability-summary-card {
  padding: 10px 11px !important;
  border-radius: 10px !important;
}

.detail-side-availability .availability-summary-main {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.detail-side-availability .availability-summary-location {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.detail-side-availability .availability-summary-count {
  padding: 5px 9px !important;
}

.detail-side-availability .availability-summary-callnumber,
.detail-side-availability .availability-summary-statuses {
  padding-left: 20px !important;
  font-size: 11px !important;
}

.detail-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 12px !important;
}

.detail-meta-row .detail-gmd-label {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--rasamala-text-secondary) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detail-actions {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.detail-actions .detail-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.detail-actions .detail-link-btn svg {
  flex: 0 0 auto !important;
  margin-right: 0 !important;
  width: 13px !important;
  height: 13px !important;
}

.detail-subject-inline {
  display: block !important;
  line-height: 1.6 !important;
}

.detail-subject-inline br {
  display: none !important;
}

.detail-subject-inline a {
  display: inline !important;
}

.detail-subject-separator {
  color: var(--rasamala-text-secondary) !important;
  margin: 0 3px !important;
}

@media (max-width: 575.98px) {
  .availability-summary-main {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .availability-summary-count {
    align-self: flex-start !important;
  }

  .detail-side-availability {
    max-width: 100% !important;
    margin-top: 14px !important;
  }

  .detail-actions {
    align-items: flex-start !important;
    gap: 5px !important;
    justify-content: flex-end !important;
  }

  .detail-meta-row {
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 14px 0 11px !important;
  }

  .detail-meta-row .detail-gmd-label {
    padding-top: 5px !important;
    color: var(--theme-accent) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }

  .detail-meta-row .detail-gmd-label i {
    color: var(--theme-accent) !important;
    margin-right: 6px !important;
  }

  .detail-actions .detail-link-btn {
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-color: color-mix(in srgb, var(--theme-accent) 34%, transparent) !important;
    background-color: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-accent) 6%) !important;
    color: var(--theme-on-surface) !important;
    font-size: 11.5px !important;
  }

  .detail-actions .detail-link-btn i,
  .detail-actions .detail-link-btn svg {
    color: var(--theme-accent) !important;
  }

  .detail-actions .detail-link-btn.bg-success i,
  .detail-actions .detail-link-btn.bg-success svg {
    color: #ffffff !important;
  }

  .detail-avail-popover {
    left: 0 !important;
    right: auto !important;
    min-width: 260px !important;
    max-width: calc(100vw - 36px) !important;
    overflow-x: auto !important;
  }
}

/* ----------------------------------------------------
   10. Subpage & Global Custom Styled Classes
   ---------------------------------------------------- */
.rasamala-subpage-wrapper {
  background-color: var(--rasamala-light-bg) !important;
  min-height: 0 !important;
  flex-grow: 1 !important;
}

.rasamala-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-bottom: 18px !important;
  color: var(--rasamala-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.rasamala-breadcrumb-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  color: var(--rasamala-text-secondary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.rasamala-breadcrumb-link:hover {
  color: var(--rasamala-accent) !important;
}

.rasamala-breadcrumb-separator {
  flex: 0 0 auto !important;
  color: rgba(var(--theme-accent-rgb), 0.45) !important;
  font-size: 10px !important;
}

.rasamala-breadcrumb-current {
  min-width: 0 !important;
  max-width: 500px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--theme-on-surface) !important;
  font-weight: 600 !important;
}

/* .rasamala-header-dark is defined in the Navbar Overrides section (Section 12) */

.rasamala-main-content-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
}

/* Book Detail Page styles */
.detail-cover-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 210px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 14px 18px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  transition: background-color 0.2s ease;
  overflow: hidden;
}

.detail-cover-wrapper::after {
  content: none;
}

.detail-cover-wrapper:hover {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.detail-cover {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 14px;
}

.detail-cover img {
  display: block;
  width: 100%;
  max-width: 160px;
  max-height: 235px;
  height: auto;
  object-fit: contain;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  box-shadow: var(--rasamala-shadow-sm);
}

.detail-cover .book-cover-placeholder {
  --book-cover-width: 160px;
  --book-cover-height: 235px;
  --book-cover-min-height: 235px;
  --book-cover-aspect-ratio: 2 / 3;
  --book-cover-background: var(--theme-primary);
  --book-cover-shadow: none;
  flex: 0 0 auto;
  max-width: 160px;
  max-height: 235px;
  border-radius: 9px;
}

.detail-cover .book-cover-content {
  inset: 12px 10px !important;
  padding: 18px 10px !important;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent) !important;
}

.detail-cover .book-cover-header-text {
  font-size: 0.58rem !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 8px !important;
}

.detail-cover .book-cover-title-text {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
  margin: auto 0 !important;
}

.detail-cover .book-cover-footer-text {
  font-size: 0.58rem !important;
  letter-spacing: 0.14em !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  width: 60% !important;
}

@media (max-width: 767.98px) {
  .detail-cover-wrapper {
    max-width: min(184px, 56vw) !important;
    padding: 12px 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }

  .detail-cover img {
    max-width: min(145px, 44vw) !important;
    max-height: min(215px, 65vw) !important;
    object-fit: contain !important;
  }

  .detail-cover .book-cover-placeholder {
    --book-cover-width: min(145px, 44vw);
    --book-cover-height: min(215px, 65vw);
    --book-cover-min-height: min(200px, 60vw);
    --book-cover-aspect-ratio: 145 / 215;
    max-width: min(145px, 44vw) !important;
    max-height: min(215px, 65vw) !important;
  }

  .detail-cover .book-cover-title-text {
    font-size: 0.78rem !important;
    line-height: 1.34 !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }
}

.detail-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--rasamala-radius-button);
  font-size: 13px;
  font-weight: 700;
  background-color: color-mix(in srgb, var(--theme-accent) 8%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, transparent);
  color: var(--rasamala-text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: none;
  margin-bottom: 6px;
}

.detail-link-btn:hover {
  background-color: var(--rasamala-accent);
  color: var(--theme-on-primary);
  border-color: var(--rasamala-accent);
  box-shadow: none;
  text-decoration: none;
}

.detail-link-btn.bg-success {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
}

.detail-link-btn.bg-success:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
}

.detail-gmd-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--rasamala-font-stack) !important;
}

.detail-title {
  color: var(--rasamala-text-primary) !important;
  font-family: var(--rasamala-font-stack) !important;
  font-size: clamp(20px, calc(1.15rem + 0.5vw), 24px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.detail-author-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.detail-author-footer a {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--rasamala-radius-button);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  background-color: transparent;
  color: var(--theme-on-surface);
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: none;
}

.detail-author-footer a:hover,
.detail-author-footer a:focus {
  background: transparent;
  background-color: transparent;
  color: var(--rasamala-accent);
  border-color: var(--rasamala-accent);
  box-shadow: none;
}

.detail-author-role-text {
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.72 !important;
  margin-left: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.detail-description {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #424242 !important;
}

.rasamala-divider {
  border-top: 1px solid rgba(66, 66, 66, 0.08) !important;
}

/* Search results & Filters */
.search-result-toolbar-card {
  padding: 11px 13px;
  border-radius: 14px;
}

.search-result-toolbar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
}

.search-result-toolbar-summary,
.search-result-toolbar-actions {
  min-width: 0;
}

.search-result-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--theme-on-surface);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

.search-result-count-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--theme-accent);
  color: var(--theme-on-accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.search-keyword-badge {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 260px);
  min-height: 22px;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-accent) 6%);
  color: var(--theme-on-surface);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}

.search-keyword-badge i {
  color: var(--theme-accent);
  font-size: 10px;
}

.search-result-toolbar-actions {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: 6px;
}

.search-toolbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px;
  max-width: 124px;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 20%, transparent);
  border-radius: var(--rasamala-radius-button);
  background: color-mix(in srgb, var(--theme-surface) 98%, var(--theme-accent) 2%);
  color: var(--theme-on-surface);
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.search-toolbar-action:hover,
.search-toolbar-action:focus {
  border-color: color-mix(in srgb, var(--theme-accent) 44%, transparent);
  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
  color: var(--theme-on-surface);
  box-shadow: none;
}

.search-toolbar-action.is-active {
  border-color: transparent;
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}

.search-toolbar-action.is-active .search-toolbar-action-icon,
.search-toolbar-action.is-active .search-toolbar-badge {
  color: var(--theme-on-accent);
}

.search-toolbar-action-icon {
  flex: 0 0 auto;
  color: var(--theme-accent);
  font-size: 11px;
}

.search-toolbar-action-label {
  min-width: 0;
  max-width: 94px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-toolbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-on-accent) 18%, transparent);
  color: var(--theme-on-accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.search-result-toolbar {
  gap: 12px !important;
}

.search-result-toolbar>.text-sm {
  min-width: 0 !important;
}

.view-switcher-form {
  flex: 0 0 auto !important;
}

.btn-modern-filter {
  border-radius: var(--rasamala-radius-button) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

@media (max-width: 767.98px) {
  .search-result-toolbar-card {
    padding: 10px 12px;
  }

  .search-result-toolbar-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .search-result-summary {
    font-size: 12.5px;
  }

  .search-result-toolbar-actions {
    justify-content: stretch;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .search-toolbar-action {
    flex: 1 1 0;
    max-width: none;
    min-height: 30px;
    padding: 0 7px;
    font-size: 11.5px;
  }
}

.search-control-modal-content {
  background: var(--theme-surface);
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent);
  border-radius: 16px;
  box-shadow: none;
}

.search-control-modal-header {
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 14%, transparent);
  background: color-mix(in srgb, var(--theme-surface) 97%, var(--theme-accent) 3%);
}

.search-control-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--theme-on-surface);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.search-control-modal-title-icon {
  color: var(--theme-accent);
  font-size: 13px;
}

.search-control-modal-subtitle {
  display: block;
  margin-top: 3px;
  color: var(--theme-muted-on-surface);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

.search-control-modal-body {
  padding: 0;
}

.search-control-modal-footer {
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 14%, transparent);
  background: color-mix(in srgb, var(--theme-surface) 97%, var(--theme-accent) 3%);
}

.search-control-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 12%, transparent);
  background: var(--theme-surface);
  color: var(--theme-on-surface);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.search-control-option:hover,
.search-control-option:focus {
  background: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-accent) 6%);
  color: var(--theme-on-surface);
}

.search-control-option.active {
  background: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-accent) 10%);
  color: var(--theme-on-surface);
}

.search-control-option-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.search-control-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
  color: var(--theme-accent);
  font-size: 13px;
}

.search-control-option.active .search-control-option-icon {
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}

.search-control-option-text {
  min-width: 0;
  text-align: left;
}

.search-control-option-title {
  color: var(--theme-on-surface);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.search-control-option-desc {
  display: block;
  margin-top: 2px;
  color: var(--theme-muted-on-surface);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

.search-control-option-check {
  flex: 0 0 auto;
  color: var(--theme-accent);
  font-size: 14px;
}

.search-view-menu {
  min-width: 140px !important;
}

.rasamala-alert-close-centered {
  top: 50% !important;
  right: 15px !important;
  padding: 0 !important;
  position: absolute !important;
  transform: translateY(-50%) !important;
}

.btn-switcher {
  border-radius: 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--rasamala-text-secondary) !important;
  box-shadow: none !important;
}

.view-switcher .btn-switcher:first-child {
  border-top-left-radius: var(--rasamala-radius-button) !important;
  border-bottom-left-radius: var(--rasamala-radius-button) !important;
}

.view-switcher .btn-switcher:last-child {
  border-top-right-radius: var(--rasamala-radius-button) !important;
  border-bottom-right-radius: var(--rasamala-radius-button) !important;
}

.btn-switcher.active {
  background: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
}

.btn-switcher.active i {
  color: var(--theme-on-primary) !important;
}

.btn-switcher:not(.active):hover {
  color: var(--rasamala-accent) !important;
  background: rgba(var(--theme-accent-rgb), 0.08) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.2) !important;
}

@media (max-width: 575.98px) {

  .search-result-toolbar,
  .view-switcher-form,
  .view-switcher {
    width: 100% !important;
  }

  .view-switcher .btn-switcher {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .view-switcher .btn-switcher i {
    margin-right: 6px !important;
  }
}

@media (min-width: 768px) {
  .desktop-sort-bar {
    display: flex !important;
    align-items: flex-start !important;
    /* Align label/switch to the top when chips wrap */
    justify-content: space-between !important;
    padding: 12px 20px !important;
    border-radius: 16px !important;
    border: 1px solid var(--rasamala-border) !important;
    background-color: #ffffff !important;
    box-shadow: var(--rasamala-shadow-md) !important;
  }

  .desktop-sort-bar>div:first-child {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  #desktop-sort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .desktop-sort-title {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--rasamala-text-primary) !important;
    letter-spacing: 0.05em !important;
    margin-top: 6px !important;
    /* Clean centering with the first line of chips */
  }

  .desktop-sort-title .fa-sort {
    display: none !important;
  }

  .desktop-sort-bar>.dropdown {
    align-self: flex-start !important;
    margin-top: 2px !important;
  }
}

.mobile-filter-modal-body {
  max-height: calc(100vh - 120px) !important;
}

.btn-modal-action {
  border-radius: var(--rasamala-radius-button) !important;
  font-size: 14px !important;
}

/* Navbar & Brand Icons */
/* Dynamic search input sizes in CSS instead of inline */
.search-size-small .card-body {
  padding: 8px 16px !important;
}

.search-size-small input {
  font-size: 14px !important;
}

.search-size-small .btn,
.search-size-small a {
  font-size: 16px !important;
}

.search-size-medium .card-body {
  padding: 12px 24px !important;
}

.search-size-medium input {
  font-size: 16px !important;
}

.search-size-medium .btn,
.search-size-medium a {
  font-size: 18px !important;
}

.search-size-large .card-body {
  padding: 22px 36px !important;
}

.search-size-large input {
  font-size: 22px !important;
}

.search-size-large .btn,
.search-size-large a {
  font-size: 26px !important;
}

/* ----------------------------------------------------
   11. Visitor Counter Page Styling Classes
   ---------------------------------------------------- */
.visitor-bg-gradient {
  position: fixed !important;
  z-index: -1 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, #F5F5F5 0%, #E0E0E0 100%) !important;
}

.visitor-backdrop {
  background: rgba(66, 66, 66, 0.2) !important;
}

.visitor-sidebar {
  width: 100% !important;
  max-width: 440px !important;
  min-height: 100vh !important;
  border-right: 1px solid rgba(66, 66, 66, 0.05) !important;
  z-index: 10 !important;
}

.visitor-welcome-title {
  font-family: var(--rasamala-font-stack) !important;
  font-size: 24px !important;
  color: var(--theme-accent-color) !important;
  letter-spacing: -0.015em !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visitor-label {
  font-size: 13px !important;
}

.btn-visitor-checkin {
  border-radius: var(--rasamala-radius-button) !important;
  font-weight: 600 !important;
  padding: 10px !important;
  background: var(--rasamala-dark-bg) !important;
}

.visitor-info-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(66, 66, 66, 0.08) !important;
  border-radius: 18px !important;
  max-width: 600px !important;
  margin: auto !important;
}

.visitor-avatar-wrap {
  width: 96px !important;
  height: 96px !important;
  border: 3px solid #FFFFFF !important;
  overflow: hidden !important;
}

.visitor-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.visitor-quotes-text {
  font-size: 22px !important;
  font-family: var(--rasamala-font-stack) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  text-shadow: 0 2px 10px rgba(66, 66, 66, 0.15) !important;
}

.visitor-quotes-author {
  font-size: 14px !important;
  color: var(--rasamala-accent) !important;
}

.bg-rasamala-light {
  background-color: var(--rasamala-light-bg) !important;
}

.news-card-title {
  font-family: var(--rasamala-font-stack) !important;
  font-size: 24px !important;
  color: var(--rasamala-text-primary) !important;
  letter-spacing: -0.015em !important;
}

.btn-news-readmore {
  border-radius: var(--rasamala-radius-button) !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
}

.social-share-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1060 !important;
}

.social-share-modal .modal-dialog {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100% - 2rem) !important;
  margin: 1rem auto !important;
}

.floating-chat-trigger {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
}

.basket-badge-mobile {
  top: -6px !important;
  right: -10px !important;
  font-size: 8px !important;
  padding: 2px 4px !important;
  border-radius: 50% !important;
}

.libinfo-modal-body {
  max-height: 65vh !important;
  overflow-y: auto !important;
  padding: 28px !important;
}

.libinfo-modal-desc {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #424242 !important;
}

.libinfo-modal-desc a {
  color: var(--rasamala-accent) !important;
  font-weight: 500 !important;
}

.libinfo-modal-desc a:hover {
  color: var(--rasamala-accent-hover) !important;
  text-decoration: underline !important;
}


/* ----------------------------------------------------
   13. Rasamala Search Hero
   ---------------------------------------------------- */
.rasamala-hero-section {
  background: transparent !important;
  background-color: transparent !important;
  color: #424242 !important;
  padding-bottom: 30px !important;
  font-family: var(--rasamala-font-stack) !important;
  border-bottom: 0 !important;
}

.rasamala-search-banner-section {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
}

.rasamala-hero-section-only {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.rasamala-search-banner-section.rasamala-search-banner-hero-only {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  min-height: calc(100vh - 88px) !important;
  padding-top: clamp(32px, 8vh, 96px) !important;
  padding-bottom: clamp(56px, 12vh, 128px) !important;
  border-bottom: 0 !important;
  background: linear-gradient(145deg, rgba(var(--theme-accent-rgb), 0.16) 0%, #ffffff 42%, rgba(var(--theme-accent-rgb), 0.13) 100%) !important;
}

/* Lightweight, static background variants. They do not add network or
   JavaScript work and remain compatible with the selected light/dark palette. */
body.rasamala-hero-bg-style-soft-gradient .rasamala-search-banner-section.rasamala-search-banner-hero-only {
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 38%, var(--theme-background)) 0%, color-mix(in srgb, var(--theme-secondary) 30%, var(--theme-surface)) 48%, color-mix(in srgb, var(--theme-accent) 34%, var(--theme-background)) 100%) !important;
}

body.rasamala-hero-bg-style-aurora-glow .rasamala-search-banner-section.rasamala-search-banner-hero-only {
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--theme-accent) 48%, transparent), transparent 38%),
    radial-gradient(circle at 86% 72%, color-mix(in srgb, var(--theme-secondary) 38%, transparent), transparent 42%),
    linear-gradient(145deg, var(--theme-background), var(--theme-surface)) !important;
}

body.rasamala-hero-bg-style-mesh-light .rasamala-search-banner-section.rasamala-search-banner-hero-only {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--theme-primary) 30%, transparent) 25%, transparent 25%) 0 0 / 34px 34px,
    linear-gradient(300deg, color-mix(in srgb, var(--theme-accent) 26%, transparent) 25%, transparent 25%) 0 0 / 34px 34px,
    linear-gradient(145deg, var(--theme-background), var(--theme-surface)) !important;
}

body.rasamala-hero-bg-style-solid-theme .rasamala-search-banner-section.rasamala-search-banner-hero-only {
  background: var(--theme-background) !important;
}

body.rasamala-hero-bg-style-minimal-surface .rasamala-search-banner-section.rasamala-search-banner-hero-only {
  background: linear-gradient(180deg, var(--theme-surface), var(--theme-background)) !important;
}

/* Background Style applies to the complete page canvas, not only the
   fullscreen search hero. The fixed animation canvas remains a child layer
   (z-index 1), while page content stays above it (z-index 2+). */
.rasamala-background-image-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  contain: paint !important;
}

body.rasamala-background-image-active .rasamala-background-image-layer {
  display: block !important;
}

/* Theme-colored Ocean Waves. The paths mirror bg-ocean-waves.svg, while the
   fills stay as CSS variables so palette and dark/light changes are reflected
   instantly without downloading or recoloring another image. */
.rasamala-theme-wave-layer {
  position: fixed !important;
  inset: auto 0 0 !important;
  z-index: 0 !important;
  display: none !important;
  width: 100% !important;
  height: clamp(190px, 34vh, 360px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  contain: paint !important;
}
body.rasamala-background-style-image-bg-ocean-waves .rasamala-theme-wave-layer {
  display: block !important;
}
.rasamala-theme-wave-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.rasamala-theme-wave-back {
  fill: var(--theme-primary) !important;
  fill: color-mix(in srgb, var(--theme-primary) 34%, var(--theme-background) 66%) !important;
  opacity: .94 !important;
}
.rasamala-theme-wave-front {
  fill: var(--theme-accent) !important;
  fill: color-mix(in srgb, var(--theme-accent) 38%, var(--theme-background) 62%) !important;
  opacity: .78 !important;
}
html body.rasamala-dark .rasamala-theme-wave-back {
  fill: var(--theme-primary) !important;
  fill: color-mix(in srgb, var(--theme-primary) 48%, var(--theme-background) 52%) !important;
}
html body.rasamala-dark .rasamala-theme-wave-front {
  fill: var(--theme-accent) !important;
  fill: color-mix(in srgb, var(--theme-accent) 46%, var(--theme-background) 54%) !important;
  opacity: .86 !important;
}
@media (max-width: 575.98px) {
  .rasamala-theme-wave-layer { height: 230px !important; }
}

/* Generic Theme SVG Layer container */
.rasamala-theme-svg-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: none !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  contain: paint strict !important;
}

.rasamala-theme-pattern-svg,
.rasamala-theme-blobs-svg,
.rasamala-theme-full-svg,
.rasamala-theme-wave-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 767.98px) {
  .rasamala-theme-svg-layer {
    transform: translateZ(0);
    will-change: transform;
  }
  .rasamala-theme-wave-layer {
    height: 100vh !important;
    height: 100dvh !important;
  }
}


/* 1. Liquid Cyber Waves */
body.rasamala-background-style-image-bg-liquid-cyber .rasamala-theme-liquid-layer { display: block !important; }
.rasamala-grad-stop-primary { stop-color: var(--theme-primary); }
.rasamala-grad-stop-secondary { stop-color: var(--theme-secondary); }
.rasamala-grad-stop-accent { stop-color: var(--theme-accent); }
.rasamala-liquid-back { opacity: 0.35 !important; }
.rasamala-liquid-front { opacity: 0.25 !important; }

/* 2. Aurora Neon Borealis */
body.rasamala-background-style-image-bg-aurora-neon .rasamala-theme-aurora-layer { display: block !important; }
.rasamala-aurora-glow-1 { fill: var(--theme-primary) !important; opacity: 0.32 !important; }
.rasamala-aurora-glow-2 { fill: var(--theme-accent) !important; opacity: 0.28 !important; }
.rasamala-aurora-glow-3 { fill: var(--theme-secondary) !important; opacity: 0.22 !important; }

/* 3. Galaxy Nebula & Starfield */
body.rasamala-background-style-image-bg-galaxy-nebula .rasamala-theme-galaxy-layer { display: block !important; }
.rasamala-nebula-stop-1 { stop-color: var(--theme-primary); stop-opacity: 0.38; }
.rasamala-nebula-stop-2 { stop-color: var(--theme-secondary); stop-opacity: 0.22; }
.rasamala-nebula-stop-3 { stop-color: var(--theme-background); stop-opacity: 0; }
.rasamala-star-bright { fill: var(--theme-accent) !important; opacity: 0.85 !important; }
.rasamala-star-dim { fill: #ffffff !important; opacity: 0.45 !important; }

/* 5. Quantum Cyber Mesh */
body.rasamala-background-style-image-bg-quantum-mesh .rasamala-theme-quantum-layer { display: block !important; }
.rasamala-quantum-grid-h { stroke: var(--theme-primary) !important; opacity: 0.28 !important; }
.rasamala-quantum-grid-v { stroke: var(--theme-accent) !important; opacity: 0.22 !important; }

/* 6. Zen Bamboo & Drifting Leaves */
body.rasamala-background-style-image-bg-zen-bamboo .rasamala-theme-bamboo-layer { display: block !important; }
.rasamala-bamboo-stalk-1 { stroke: var(--theme-primary) !important; opacity: 0.22 !important; }
.rasamala-bamboo-stalk-2 { stroke: var(--theme-secondary) !important; opacity: 0.18 !important; }
.rasamala-bamboo-leaf-1 { fill: var(--theme-primary) !important; opacity: 0.28 !important; }
.rasamala-bamboo-leaf-2 { fill: var(--theme-accent) !important; opacity: 0.32 !important; }
.rasamala-bamboo-leaf-floating { fill: var(--theme-accent) !important; opacity: 0.38 !important; }

/* 9. Sunset Wave Horizons */
body.rasamala-background-style-image-bg-sunset-horizons .rasamala-theme-sunset-layer { display: block !important; }
.rasamala-sunset-stop-1 { stop-color: var(--theme-accent); stop-opacity: 0.30; }
.rasamala-sunset-stop-2 { stop-color: var(--theme-primary); stop-opacity: 0.15; }
.rasamala-sunset-dune-1 { opacity: 0.35 !important; }
.rasamala-sunset-dune-2 { fill: var(--theme-primary) !important; opacity: 0.22 !important; }
.rasamala-sunset-dune-3 { fill: var(--theme-secondary) !important; opacity: 0.15 !important; }

/* 10. Floating Books & Scattered Flying Pages */
body.rasamala-background-style-image-bg-flying-books-pages .rasamala-theme-flying-books-layer { display: block !important; }
.rasamala-open-book-page-left { fill: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-surface)) !important; stroke: var(--theme-primary) !important; stroke-width: 1.2 !important; opacity: 0.40 !important; }
.rasamala-open-book-page-right { fill: color-mix(in srgb, var(--theme-secondary) 25%, var(--theme-surface)) !important; stroke: var(--theme-secondary) !important; stroke-width: 1.2 !important; opacity: 0.35 !important; }
.rasamala-book-spine-line { stroke: var(--theme-accent) !important; opacity: 0.50 !important; }
.rasamala-flying-page-1 { fill: var(--theme-primary) !important; opacity: 0.22 !important; }
.rasamala-flying-page-2 { fill: var(--theme-accent) !important; opacity: 0.28 !important; }
.rasamala-flying-page-3 { fill: var(--theme-secondary) !important; opacity: 0.18 !important; }
.rasamala-stack-book-1 { fill: var(--theme-primary) !important; opacity: 0.32 !important; }
.rasamala-stack-book-2 { fill: var(--theme-secondary) !important; opacity: 0.28 !important; }
.rasamala-stack-book-3 { fill: var(--theme-accent) !important; opacity: 0.25 !important; }

/* 11 - 14. Gemini Vector Background Layers */
body.rasamala-background-style-image-bg-gemini-desk .rasamala-theme-gemini-desk-layer { display: block !important; }
body.rasamala-background-style-image-bg-gemini-shelf .rasamala-theme-gemini-shelf-layer { display: block !important; }
body.rasamala-background-style-image-bg-gemini-cosmic .rasamala-theme-gemini-cosmic-layer { display: block !important; }

/* Dynamic Theme Color Stops for Gemini Backgrounds */
.rasamala-gemini-desk-stop-1 { stop-color: var(--theme-background) !important; stop-opacity: 0.95 !important; }
.rasamala-gemini-desk-stop-2 { stop-color: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-background) 82%) !important; stop-opacity: 0.90 !important; }
.rasamala-gemini-desk-stop-3 { stop-color: color-mix(in srgb, var(--theme-accent) 28%, var(--theme-background) 72%) !important; stop-opacity: 0.95 !important; }

.rasamala-gemini-shelf-stop-1 { stop-color: var(--theme-background) !important; stop-opacity: 0.95 !important; }
.rasamala-gemini-shelf-stop-2 { stop-color: color-mix(in srgb, var(--theme-secondary) 22%, var(--theme-background) 78%) !important; stop-opacity: 0.90 !important; }
.rasamala-gemini-shelf-stop-3 { stop-color: color-mix(in srgb, var(--theme-primary) 32%, var(--theme-background) 68%) !important; stop-opacity: 0.95 !important; }

.rasamala-gemini-cosmic-stop-1 { stop-color: color-mix(in srgb, var(--theme-primary) 35%, var(--theme-background) 65%) !important; stop-opacity: 0.95 !important; }
.rasamala-gemini-cosmic-stop-2 { stop-color: color-mix(in srgb, var(--theme-secondary) 25%, var(--theme-background) 75%) !important; stop-opacity: 0.90 !important; }
.rasamala-gemini-cosmic-stop-3 { stop-color: var(--theme-background) !important; stop-opacity: 0.95 !important; }







body.rasamala-background-image-active {
  background-image: none !important;
  background-attachment: fixed !important;
}

/* A. Soft Gradient Layer */
body.rasamala-background-style-soft-gradient .rasamala-theme-soft-gradient-layer { display: block !important; }
.rasamala-soft-grad-stop-1 { stop-color: color-mix(in srgb, var(--theme-primary) 45%, var(--theme-background)); }
.rasamala-soft-grad-stop-2 { stop-color: color-mix(in srgb, var(--theme-secondary) 35%, var(--theme-surface)); }
.rasamala-soft-grad-stop-3 { stop-color: color-mix(in srgb, var(--theme-accent) 40%, var(--theme-background)); }

/* B. Aurora Glow Layer */
body.rasamala-background-style-aurora-glow .rasamala-theme-aurora-glow-layer { display: block !important; }
.rasamala-aurora-core-1 { fill: var(--theme-accent) !important; opacity: 0.38 !important; }
.rasamala-aurora-core-2 { fill: var(--theme-secondary) !important; opacity: 0.32 !important; }
.rasamala-aurora-core-3 { fill: var(--theme-primary) !important; opacity: 0.28 !important; }

body.rasamala-background-style-image-bg-ocean-waves {
  background: var(--theme-background) !important;
  background-attachment: fixed !important;
}

/* Title Basket Best-Practice UI/UX Enhancements */
.rasamala-basket-header {
  background: var(--theme-surface) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 20%, transparent) !important;
}

.rasamala-basket-actions-toolbar {
  background: var(--theme-surface) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 20%, transparent) !important;
}

.rasamala-basket-table {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

.rasamala-basket-table th {
  background: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-primary) 10%) !important;
  color: var(--theme-text) !important;
}

.rasamala-basket-table td {
  border-color: color-mix(in srgb, var(--theme-muted) 15%, transparent) !important;
}

.rasamala-basket-empty-card {
  background: var(--theme-surface) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 20%, transparent) !important;
}

.btn-emerald {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

.btn-emerald:hover, .btn-emerald:focus {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}

body.rasamala-background-style-custom {
  background: var(--theme-background) !important;
  background-attachment: fixed !important;
}

/* Let the selected page canvas show through layout shells. Cards, dialogs,
   navbars, and footer retain their own surfaces for readability. */
body[class*="rasamala-background-style-"] .rasamala-hero-section,
body[class*="rasamala-background-style-"] .rasamala-search-banner-section,
body[class*="rasamala-background-style-"] #slims-home,
body[class*="rasamala-background-style-"] .rasamala-subpage-wrapper,
body[class*="rasamala-background-style-"] .result-search,
body[class*="rasamala-background-style-"] .member-area {
  background: transparent !important;
  background-color: transparent !important;
}

body[class*="rasamala-background-style-"] .background-animation-layer {
  z-index: 1 !important;
}

.rasamala-hero-scroll-indicator {
  position: absolute;
  z-index: 1061;
  left: 50%;
  bottom: clamp(14px, 3vh, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  transform: translateX(-50%);
  color: var(--theme-muted-on-background);
  font-size: 16px;
  text-decoration: none;
  opacity: 0.82;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-background) 34%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-surface) 78%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-primary) 18%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 160ms ease, opacity 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.rasamala-hero-scroll-indicator:hover,
.rasamala-hero-scroll-indicator:focus-visible {
  color: var(--theme-accent);
  opacity: 1;
  text-decoration: none;
  border-color: color-mix(in srgb, var(--theme-accent) 58%, transparent);
  background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface));
  outline: none;
}

.rasamala-hero-scroll-indicator i {
  animation: rasamala-hero-scroll-bounce 1.7s ease-in-out infinite;
  font-size: 16px;
  line-height: 1;
}

/* The bottom running-text ticker is fixed to the viewport. Lift the arrow
   above its full footprint so it remains visible and never overlaps links. */
body:has(> .latest-content-ticker) .rasamala-hero-scroll-indicator {
  bottom: calc(34px + env(safe-area-inset-bottom, 0px) + clamp(14px, 3vh, 30px));
}

@media (max-width: 991.98px) {
  body.mobile-bottom-nav-enabled:has(> .latest-content-ticker) .rasamala-hero-scroll-indicator {
    bottom: calc(56px + 34px + env(safe-area-inset-bottom, 0px) + clamp(14px, 3vh, 30px));
  }

  body.mobile-bottom-nav-hidden:has(> .latest-content-ticker) .rasamala-hero-scroll-indicator {
    bottom: calc(34px + env(safe-area-inset-bottom, 0px) + clamp(14px, 3vh, 30px));
  }
}

@keyframes rasamala-hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .rasamala-hero-scroll-indicator i {
    animation: none;
  }
}

body.rasamala-home-hero-only {
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body.rasamala-home-hero-only .rasamala-hero-section-only {
  min-height: 100vh !important;
}

body.rasamala-home-hero-only .rasamala-search-banner-section.rasamala-search-banner-hero-only {
  min-height: calc(100vh - 48px) !important;
}

body.rasamala-home-few-sections:not(.rasamala-home-hero-only) .rasamala-hero-section {
  border-bottom: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.rasamala-home-few-sections:not(.rasamala-home-hero-only) .rasamala-search-banner-section {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: clamp(300px, 40vh, 430px) !important;
  padding-top: clamp(70px, 12vh, 132px) !important;
  padding-bottom: clamp(18px, 4vh, 42px) !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.rasamala-home-few-sections:not(.rasamala-home-hero-only) .rasamala-search-hero-content {
  width: 100% !important;
}

body.rasamala-home-few-sections:not(.rasamala-home-hero-only) #slims-home {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: clamp(250px, 34vh, 380px) !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.rasamala-home-topic-only #slims-home .rasamala-home-section-topic {
  width: 100% !important;
  max-width: min(1120px, calc(100vw - 64px)) !important;
  margin-top: clamp(10px, 2vh, 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.rasamala-home-topic-only #slims-home .topic {
  justify-content: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 992px) {
  body.rasamala-home-topic-only #slims-home .topic li {
    flex: 0 0 150px !important;
  }
}

.rasamala-search-banner-bg-particles,
.rasamala-search-banner-bg-constellation,
.rasamala-search-banner-bg-rain {
  background:
    linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.46) 0%, #111827 42%, rgba(var(--theme-accent-rgb), 0.36) 100%) !important;
}

.rasamala-search-banner-bg-waves {
  background: linear-gradient(140deg, rgba(var(--theme-accent-rgb), 0.20) 0%, #ffffff 48%, rgba(var(--theme-accent-rgb), 0.24) 100%) !important;
}

.rasamala-search-banner-bg-grid {
  background: linear-gradient(140deg, rgba(var(--theme-accent-rgb), 0.18) 0%, #ffffff 46%, rgba(var(--theme-accent-rgb), 0.26) 100%) !important;
}

.rasamala-search-banner-bg-zen-ripples {
  background:
    radial-gradient(circle at 32% 28%, rgba(var(--theme-accent-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 72% 72%, rgba(var(--theme-accent-rgb), 0.12), transparent 38%),
    linear-gradient(140deg, rgba(var(--theme-accent-rgb), 0.08), #ffffff 54%, rgba(var(--theme-accent-rgb), 0.10)) !important;
}

.rasamala-search-banner-bg-neural-network,
.rasamala-search-banner-bg-starfield-warp,
.rasamala-search-banner-bg-floating-embers {
  background:
    radial-gradient(circle at 20% 18%, rgba(var(--theme-accent-rgb), 0.34), transparent 32%),
    linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.18) 0%, #111827 54%, rgba(var(--theme-accent-rgb), 0.28) 100%) !important;
}

body.rasamala-background-animation-active .rasamala-search-banner-bg-particles,
body.rasamala-background-animation-active .rasamala-search-banner-bg-constellation,
body.rasamala-background-animation-active .rasamala-search-banner-bg-rain,
body.rasamala-background-animation-active .rasamala-search-banner-bg-waves,
body.rasamala-background-animation-active .rasamala-search-banner-bg-grid,
body.rasamala-background-animation-active .rasamala-search-banner-bg-zen-ripples,
body.rasamala-background-animation-active .rasamala-search-banner-bg-neural-network,
body.rasamala-background-animation-active .rasamala-search-banner-bg-starfield-warp,
body.rasamala-background-animation-active .rasamala-search-banner-bg-floating-embers {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.rasamala-search-banner-bg-particles .hero-search-heading h1,
.rasamala-search-banner-bg-constellation .hero-search-heading h1,
.rasamala-search-banner-bg-rain .hero-search-heading h1,
.rasamala-search-banner-bg-neural-network .hero-search-heading h1,
.rasamala-search-banner-bg-starfield-warp .hero-search-heading h1,
.rasamala-search-banner-bg-floating-embers .hero-search-heading h1 {
  color: var(--theme-on-background);
  text-shadow: none;
}

.rasamala-search-banner-hero-only>.container,
.rasamala-search-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.rasamala-search-hero-content::before,
.rasamala-search-hero-content::after,
.rasamala-search-banner-section::before,
.rasamala-search-banner-section::after {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.rasamala-search-hero-content .hero-line,
.rasamala-search-hero-content .hero-neural-line,
.rasamala-search-banner-section .hero-line,
.rasamala-search-banner-section .hero-neural-line {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.rasamala-search-banner-hero-only #search-wraper {
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.rasamala-search-banner-hero-only #search-wraper .card {
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-background) 4%) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 30%, transparent) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--theme-primary) 8%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.rasamala-search-banner-hero-only .hero-search-heading {
  margin-bottom: 28px;
}

.latest-content-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 860px;
  margin: 12px auto 0;
  padding: 0 16px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.latest-content-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0 !important;
  max-width: 100% !important;
}

.latest-content-list.scrollable {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 16px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--theme-accent-rgb), 0.3) rgba(0, 0, 0, 0.05);
}

.latest-content-list.scrollable::-webkit-scrollbar {
  height: 4px;
}

.latest-content-list.scrollable::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.latest-content-list.scrollable::-webkit-scrollbar-thumb {
  background: rgba(var(--theme-accent-rgb), 0.3);
  border-radius: 10px;
}

.latest-content-list.scrollable li {
  scroll-snap-align: start;
  flex: 0 0 auto !important;
}

/* Fading Slideshow Styles */
.latest-content-fade-slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  width: 100%;
  margin-top: 4px;
}

.latest-content-fade-item {
  position: absolute;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index: 1;
}

.latest-content-fade-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Alert Theme (Adaptive Announcement Banner) */
.alert-theme {
  background-color: rgba(var(--theme-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.24) !important;
  color: var(--theme-text) !important;
}

.alert-theme a,
.alert-theme strong {
  color: var(--theme-link) !important;
}

.alert-theme .close {
  color: var(--theme-text) !important;
  opacity: 0.7;
}

.alert-theme .close:hover {
  opacity: 1;
}

.latest-content-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(320px, 86vw) !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.32);
  border-radius: var(--rasamala-radius-button) !important;
  background: rgba(var(--theme-accent-rgb), 0.08);
  color: var(--theme-text);
  font-family: var(--rasamala-font-stack);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35 !important;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(var(--theme-accent-rgb), 0.08);
  /* -webkit-backdrop-filter: blur(12px); (removed for performance) */
  /* backdrop-filter: blur(12px); (removed for performance) */
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
  overflow: visible !important;
  white-space: normal !important;
}

.latest-content-link:hover,
.latest-content-link:focus {
  border-color: rgba(var(--theme-accent-rgb), 0.58);
  background: rgba(var(--theme-accent-rgb), 0.14);
  color: var(--theme-text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(var(--theme-accent-rgb), 0.14);
}

.latest-content-icon {
  flex: 0 0 auto;
  color: var(--theme-accent-color);
  font-size: 0.66rem;
}

.latest-content-title {
  display: block;
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.rasamala-search-banner-bg-particles .latest-content-icon,
.rasamala-search-banner-bg-constellation .latest-content-icon,
.rasamala-search-banner-bg-rain .latest-content-icon {
  color: var(--theme-accent-color);
  text-shadow: none;
}

.rasamala-search-banner-bg-particles .latest-content-link,
.rasamala-search-banner-bg-constellation .latest-content-link,
.rasamala-search-banner-bg-rain .latest-content-link {
  border-color: rgba(var(--theme-accent-rgb), 0.48);
  background: rgba(var(--theme-accent-rgb), 0.10);
  box-shadow: 0 10px 30px rgba(var(--theme-accent-rgb), 0.18);
}

.latest-content-ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1038;
  overflow: hidden;
  min-height: 34px;
  border-top: 1px solid rgba(var(--theme-accent-rgb), 0.55);
  background: rgba(var(--theme-accent-rgb), 0.94);
  box-shadow: 0 -10px 28px rgba(var(--theme-accent-rgb), 0.26);
  /* -webkit-backdrop-filter: blur(16px); (removed for performance) */
  /* backdrop-filter: blur(16px); (removed for performance) */
}

.latest-content-ticker-track {
  display: flex;
  width: max-content;
  animation: latestContentTicker var(--ticker-speed, 32s) linear infinite;
}

.latest-content-ticker:hover .latest-content-ticker-track,
.latest-content-ticker:focus-within .latest-content-ticker-track {
  animation-play-state: paused;
}

.latest-content-ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
  min-height: 34px;
  padding-left: var(--ticker-start-gap, 0px);
  padding-right: 18px;
}

.latest-content-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--theme-on-primary);
  font-family: var(--rasamala-font-stack);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.latest-content-ticker-item:hover,
.latest-content-ticker-item:focus {
  color: var(--theme-on-primary);
  opacity: 0.86;
  text-decoration: none;
}

.latest-content-ticker .latest-content-title {
  overflow: visible;
  white-space: nowrap;
}

@keyframes latestContentTicker {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--ticker-distance, -50%), 0, 0);
  }
}


/* ====================================================
   Librarian Page Styles (Fixing Bootstrap 2 markup in modern layout)
   ==================================================== */
.rasamala-subpage-wrapper .librarian.row-fluid {
  display: flex !important;
  flex-direction: row !important;
  background-color: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(66, 66, 66, 0.08) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  padding: 24px !important;
  margin: 12px 0 24px 0 !important;
  width: 100% !important;
  align-items: flex-start !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@media (min-width: 992px) {
  .rasamala-subpage-wrapper .librarian.row-fluid {
    flex: 0 0 calc(50% - 24px) !important;
    margin: 12px !important;
    width: calc(50% - 24px) !important;
  }
}

.rasamala-subpage-wrapper .librarian.row-fluid:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

/* Image container */
.rasamala-subpage-wrapper .librarian.row-fluid .span2 {
  flex: 0 0 120px !important;
  margin-right: 24px !important;
  text-align: center !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .librarian-image {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  height: 120px !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .span2 img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  background-color: #f8f9fa !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .rasamala-librarian-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  height: 120px !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.18) !important;
  border-radius: 50% !important;
  color: var(--rasamala-accent) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  background: rgba(var(--theme-accent-rgb), 0.1) !important;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.62), 0 8px 18px rgba(var(--theme-accent-rgb), 0.1) !important;
}

/* Info container */
.rasamala-subpage-wrapper .librarian.row-fluid .span8 {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Field Rows */
.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid {
  display: flex !important;
  flex-direction: row !important;
  border-bottom: 1px solid rgba(66, 66, 66, 0.06) !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Labels */
.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span3.key {
  flex: 0 0 120px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-secondary) !important;
  font-family: var(--rasamala-font-stack) !important;
}

/* Values */
.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span7,
.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span9 {
  flex: 1 !important;
  color: var(--rasamala-text-primary) !important;
  font-family: var(--rasamala-font-stack) !important;
  word-break: break-word !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span7 a,
.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span9 a {
  color: var(--rasamala-accent) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span7 a:hover,
.rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span9 a:hover {
  text-decoration: underline !important;
}

/* Social Media list */
.rasamala-subpage-wrapper .librarian.row-fluid ul.librarian-social {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid ul.librarian-social li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: var(--rasamala-light-bg) !important;
  color: var(--rasamala-text-primary) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .librarian-social-label {
  color: var(--rasamala-text-secondary) !important;
  font-weight: 700 !important;
}

.rasamala-subpage-wrapper .librarian.row-fluid .librarian-social-value {
  color: var(--rasamala-text-primary) !important;
}

.rasamala-librarian-empty {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  color: var(--rasamala-text-secondary) !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.14) !important;
  border-radius: var(--rasamala-radius-card) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

/* Responsive adjustment for tablet/mobile */
@media (max-width: 768px) {
  .rasamala-subpage-wrapper .librarian.row-fluid {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
  }

  .rasamala-subpage-wrapper .librarian.row-fluid .span2 {
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }

  .rasamala-subpage-wrapper .librarian.row-fluid .span8 {
    width: 100% !important;
  }

  .rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    padding-bottom: 10px !important;
  }

  .rasamala-subpage-wrapper .librarian.row-fluid .span8 .row-fluid .span3.key {
    flex: 0 0 auto !important;
  }

  .rasamala-subpage-wrapper .librarian.row-fluid ul.librarian-social {
    justify-content: center !important;
  }
}

/* ====================================================
   Member Login Page Styles
   ==================================================== */
.page-member-area .rasamala-main-content-card {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 40px 32px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 40px rgba(66, 66, 66, 0.08) !important;
}

.page-member-area .tagline {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--rasamala-text-primary) !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  font-family: var(--rasamala-font-stack) !important;
}

.page-member-area .loginInfo {
  font-size: 14px !important;
  color: #6c757d !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
}

.page-member-area .rasamala-main-content-card form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.page-member-area .fieldLabel {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-primary) !important;
  margin-bottom: -8px !important;
}

.page-member-area .fieldLabel.marginTop {
  margin-top: 8px !important;
}

.page-member-area .login_input input.form-control,
.page-member-area input.form-control,
.page-member-area select.form-control,
.page-member-area select {
  border-radius: 999px !important;
  border: 1px solid var(--rasamala-border) !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.page-member-area .login_input input.form-control:focus {
  border-color: var(--rasamala-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb), 0.15) !important;
}

.page-member-area .memberButton {
  margin-top: 12px !important;
  background-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--rasamala-radius-button) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  width: 100% !important;
}

.page-member-area .memberButton:hover {
  background-color: var(--rasamala-accent-hover) !important;
}

.page-member-area .memberButton:active {
  transform: scale(0.98) !important;
}

/* ====================================================
   Member Dashboard & Panel Styles
   ==================================================== */
.member-area .rasamala-main-content-card {
  border-radius: 24px !important;
  padding: 32px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
}

.member-area .d-flex {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
}

#member_sidebar {
  width: 100% !important;
  max-width: 260px !important;
  flex: 0 0 100% !important;
  background-color: #f8f9fa !important;
  border-radius: 18px !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
  padding: 24px !important;
  height: fit-content !important;
}

#member_content {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

@media (max-width: 991px) {
  .member-area .d-flex {
    flex-direction: column !important;
  }

  #member_sidebar {
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* Sidebar Avatar image */
#member_sidebar img {
  width: 130px !important;
  height: 130px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 4px solid #ffffff !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  display: block !important;
  margin: 0 auto !important;
}

#member_sidebar .p-4 {
  padding: 0 0 24px 0 !important;
}

/* Sidebar buttons */
#member_sidebar .btn-primary {
  background-color: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  border-radius: var(--rasamala-radius-button) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: background-color 0.2s ease !important;
}

#member_sidebar .btn-primary:hover {
  background-color: var(--rasamala-accent-hover) !important;
  border-color: var(--rasamala-accent-hover) !important;
}

#member_sidebar .btn-danger {
  border-radius: var(--rasamala-radius-button) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Dashboard Tab Navigation */
#member_content .nav-tabs {
  border-bottom: 2px solid #e9ecef !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

#member_content .nav-tabs .nav-item {
  margin-bottom: -2px !important;
}

#member_content .nav-tabs .nav-link {
  border: none !important;
  color: #6c757d !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
  background: transparent !important;
}

#member_content .nav-tabs .nav-link:hover {
  color: var(--rasamala-accent) !important;
  border-bottom-color: rgba(var(--theme-accent-rgb), 0.4) !important;
}

#member_content .nav-tabs .nav-link.active {
  color: var(--rasamala-accent) !important;
  border-bottom-color: var(--rasamala-accent) !important;
}

/* Tab Content Box Override (avoid "box inside a box") */
#member_content .bg-white.border-right.border-bottom.border-left.p-4 {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Responsive tables for loans and bookmarks */
.member-area table.table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-collapse: collapse !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(66, 66, 66, 0.05) !important;
  margin-top: 16px !important;
}

.member-area table.table th {
  background-color: #f8f9fa !important;
  color: var(--rasamala-text-secondary) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #e9ecef !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

.member-area table.table td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  color: var(--rasamala-text-primary) !important;
  border-bottom: 1px solid #e9ecef !important;
}

.member-area table.table tr:last-child td {
  border-bottom: none !important;
}

/* Detail profile table */
.member-area table.memberDetail {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 16px !important;
}

.member-area table.memberDetail td.key {
  font-weight: 600 !important;
  color: var(--rasamala-text-secondary) !important;
  width: 30% !important;
  background-color: #f8f9fa !important;
}

.member-area table.memberDetail td.value {
  color: var(--rasamala-text-primary) !important;
}

/* Change password and comment form button styling - dynamic theme color */
#memberChangePassword input[type="submit"],
#memberChangePassword #loginButton,
.member-area table.memberDetail input[type="submit"],
input[name="SaveComment"],
input[name="comment"],
.comment-form input[type="submit"],
#comment-container input[type="submit"] {
  background-color: var(--rasamala-accent, var(--bs-primary, #0d6efd)) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 50rem !important;
  cursor: pointer !important;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease-in-out !important;
}

#memberChangePassword input[type="submit"]:hover,
#memberChangePassword #loginButton:hover,
.member-area table.memberDetail input[type="submit"]:hover,
input[name="SaveComment"]:hover,
input[name="comment"]:hover,
.comment-form input[type="submit"]:hover,
#comment-container input[type="submit"]:hover {
  background-color: var(--rasamala-accent-hover, var(--rasamala-accent, #0b5ed7)) !important;
  color: #ffffff !important;
  filter: brightness(0.92) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* Download buttons and lists */
.member-area .memberLoanListInfo {
  font-size: 14px !important;
  color: #6c757d !important;
  font-weight: 500 !important;
}

.member-area .btn-outline-primary {
  color: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  border-radius: var(--rasamala-radius-button) !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.member-area .btn-outline-primary:hover {
  background-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
  border-color: var(--rasamala-accent) !important;
}

/* ====================================================
   News Page & Card Styling
   ==================================================== */
.rasamala-subpage-wrapper .card.rasamala-main-content-card {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.rasamala-subpage-wrapper .card.rasamala-main-content-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

.btn-news-readmore {
  background-color: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
  font-weight: 600 !important;
  border-radius: var(--rasamala-radius-button) !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.btn-news-readmore:hover {
  background-color: var(--rasamala-accent-hover) !important;
  border-color: var(--rasamala-accent-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.2) !important;
  transform: translateY(-1px) !important;
}

.btn-news-readmore:active {
  transform: scale(0.98) !important;
}

.news-list-card .news-list-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

.news-list-card.has-thumbnail .news-list-body {
  grid-template-columns: 168px minmax(0, 1fr) !important;
  align-items: start !important;
}

.news-list-thumbnail {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: rgba(var(--theme-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.14) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
}

.news-list-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.news-list-thumbnail:hover img,
.news-list-thumbnail:focus img {
  transform: scale(1.04) !important;
}

.news-list-content {
  min-width: 0 !important;
}

.news-list-card .news-card-title {
  margin-bottom: 8px !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
}

.news-list-card .news-card-title a {
  color: inherit;
  text-decoration: none;
}

.news-list-card .news-card-title a:hover,
.news-list-card .news-card-title a:focus {
  color: var(--rasamala-accent);
  text-decoration: none;
}

.news-list-summary {
  color: var(--rasamala-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.news-list-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.news-list-date {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rasamala-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.news-list-footer .btn-news-readmore {
  flex: 0 0 auto !important;
}

.rasamala-page-news .result-search section.container>.d-flex.flex-column>.alert.alert-info {
  display: none !important;
}

.news-list-card--title_only {
  margin-bottom: 8px !important;
  border-color: rgba(var(--theme-accent-rgb), 0.1) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

.news-list-card--title_only:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.24) !important;
  box-shadow: var(--rasamala-shadow-sm) !important;
}

.news-list-card--title_only .news-list-body {
  padding: 13px 16px !important;
}

.news-list-card--title_only .news-card-title {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.news-list-card--title_only .news-card-title a {
  display: inline !important;
}

.news-list-card--title_only .news-list-footer {
  justify-content: flex-start !important;
  margin-top: 5px !important;
}

.news-list-card--title_only .news-list-date {
  font-size: 11px !important;
  line-height: 1.25 !important;
  opacity: 0.82 !important;
}

@media (max-width: 767.98px) {
  .news-list-card.has-thumbnail .news-list-body {
    grid-template-columns: 1fr !important;
  }

  .news-list-thumbnail {
    max-height: 220px !important;
  }

  .news-list-card .news-card-title {
    font-size: 18px !important;
  }

  .news-list-footer {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .news-list-date {
    flex: 1 1 180px !important;
  }

  .news-list-footer .btn-news-readmore {
    flex: 0 0 auto !important;
  }

  .news-list-card--title_only .news-list-body {
    padding: 12px 14px !important;
  }
}

.rasamala-subpage-wrapper .alert-info {
  background-color: rgba(var(--theme-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.15) !important;
  color: var(--rasamala-text-secondary) !important;
  border-radius: 14px !important;
  font-weight: 500 !important;
  padding: 14px 20px !important;
  margin-bottom: 24px !important;
}




/* ====================================================
   Modern Year Range & ionRangeSlider Custom Overrides
   ==================================================== */
#search-filter {
  list-style: none !important;
  padding-left: 0 !important;
}

#search-filter li.list-group-item {
  border-left: none !important;
  border-right: none !important;
  border-color: rgba(66, 66, 66, 0.06) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
}

/* Make checkbox and radio filters compact & inline */
#search-filter .form-check {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 18px !important;
  margin-bottom: 8px !important;
  padding-left: 0 !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
}

#search-filter .form-check-input {
  position: static !important;
  margin-top: 0 !important;
  margin-right: 6px !important;
  margin-left: 0 !important;
  cursor: pointer !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

#search-filter .form-check-label {
  cursor: pointer !important;
  margin-bottom: 0 !important;
  user-select: none !important;
  white-space: nowrap !important;
}

#search-filter li.list-group-item:first-child {
  border-top: none !important;
}

#search-filter .cursor-pointer strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rasamala-text-primary) !important;
  letter-spacing: -0.01em !important;
  font-family: var(--rasamala-font-stack) !important;
}

#search-filter .cursor-pointer i.dropdown-toggle::after {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 0.255em !important;
  vertical-align: 0.255em !important;
  content: "" !important;
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
  transition: transform 0.2s ease !important;
}

#search-filter .cursor-pointer[aria-expanded="false"] i.dropdown-toggle::after {
  transform: rotate(-90deg) !important;
}

/* Align Start & End Years on a single horizontal row on desktop and mobile */
#search-filter .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#search-filter .row .flex-1 {
  flex: 0 0 42% !important;
  width: 42% !important;
  max-width: 42% !important;
}

#search-filter .row .px-3 {
  flex: 0 0 16% !important;
  width: 16% !important;
  max-width: 16% !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--rasamala-text-secondary) !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
}

#search-filter .js-input-from,
#search-filter .js-input-to {
  text-align: center !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--rasamala-border) !important;
  height: 38px !important;
  font-weight: 500 !important;
  color: var(--rasamala-text-primary) !important;
  background-color: #ffffff !important;
  width: 100% !important;
}

#search-filter .js-input-from:focus,
#search-filter .js-input-to:focus {
  border-color: var(--rasamala-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.15) !important;
  outline: none !important;
}

/* ionRangeSlider Modernization overrides */
.irs {
  font-family: var(--rasamala-font-stack) !important;
  margin-bottom: 20px !important;
}

.irs-line {
  height: 6px !important;
  top: 25px !important;
  background-color: #e9ecef !important;
  border: none !important;
  border-radius: 3px !important;
}

.irs-bar {
  height: 6px !important;
  top: 25px !important;
  background-color: var(--rasamala-accent) !important;
  border: none !important;
}

.irs-handle {
  width: 20px !important;
  height: 20px !important;
  top: 18px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.irs-handle:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.irs-handle i {
  display: none !important;
  /* Hide original handle line indicator */
}

/* Slider values label (e.g. popover above handles) */
.irs-from,
.irs-to,
.irs-single {
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  background-color: var(--rasamala-accent) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  top: -5px !important;
}

.irs-from::after,
.irs-to::after,
.irs-single::after {
  border-top-color: var(--rasamala-accent) !important;
}

/* bounds indicators (Min/Max values) */
.irs-min,
.irs-max {
  color: var(--rasamala-text-secondary) !important;
  font-size: 11px !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  top: 38px !important;
}

/* Grid ticks styling */
.irs-grid-pol {
  background-color: #dee2e6 !important;
}

.irs-grid-text {
  color: #adb5bd !important;
  font-size: 10px !important;
}




/* ====================================================
   14. Premium UI & UX Enhancements (Rasamala Theme)
   ==================================================== */

/* Book Card Hover Enhancements */
.slims-book-card {
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  /* -webkit-backdrop-filter: blur(10px) !important; (removed for performance) */
  /* backdrop-filter: blur(10px) !important; (removed for performance) */
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.slims-book-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

.slims-book-card .card-body {
  padding: 14px !important;
}

.slims-book-card .card-image {
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 2 / 3 !important;
  max-width: 140px !important;
  max-height: 200px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
  background-color: #f7f7f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.slims-book-card .card-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 140px !important;
  max-height: 200px !important;
  object-fit: contain !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.slims-book-card:hover .card-image img {
  transform: scale(1.05) !important;
}

/* CSS Book Cover Mockup Placeholders - FLAT DESIGN */
.book-cover-placeholder {
  --book-cover-a: var(--theme-primary);
  --book-cover-b: color-mix(in srgb, var(--theme-primary) 58%, var(--theme-secondary) 42%);
  --book-cover-c: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-surface) 58%);
  --book-cover-width: 100%;
  --book-cover-height: auto;
  --book-cover-min-height: 0px;
  --book-cover-aspect-ratio: 2 / 3;
  --book-cover-background:
    radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--book-cover-c) 45%, transparent), transparent 33%),
    linear-gradient(145deg, var(--book-cover-a), var(--book-cover-b));
  --book-cover-shadow: var(--rasamala-shadow-md);
  --book-cover-text: var(--theme-on-primary);
  position: relative !important;
  width: var(--book-cover-width) !important;
  height: var(--book-cover-height) !important;
  aspect-ratio: var(--book-cover-aspect-ratio) !important;
  display: flex !important;
  color: var(--book-cover-text) !important;
  font-family: var(--rasamala-font-stack) !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  box-shadow: var(--book-cover-shadow) !important;
  background: var(--book-cover-background) !important;
  background-color: var(--book-cover-a) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 36%, var(--theme-surface) 64%) !important;
}

.book-cover-spine {
  display: none !important;
}

.book-cover-content {
  position: absolute !important;
  inset: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: center !important;
  z-index: 1 !important;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important;
  border-radius: 4px !important;
  padding: 12px 8px !important;
  background: color-mix(in srgb, var(--theme-surface) 8%, transparent) !important;
}

.book-cover-header-text {
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: currentColor !important;
  margin-bottom: 6px !important;
}

.book-cover-title-text {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  word-break: break-word !important;
  color: currentColor !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: auto 0 !important;
}

.book-cover-footer-text {
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: currentColor !important;
  margin-top: 6px !important;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
  padding-top: 6px !important;
  width: 55% !important;
}

.book-cover-author-text {
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: currentColor !important;
  margin-top: 8px !important;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
  padding-top: 6px !important;
  width: 75% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Book Cover Theme-Matching Patterns - FLAT */
.book-cover-gradient-0 {
  --book-cover-a: var(--theme-primary);
  --book-cover-b: color-mix(in srgb, var(--theme-primary) 62%, var(--theme-secondary) 38%);
}

.book-cover-gradient-1 {
  --book-cover-a: color-mix(in srgb, var(--theme-primary) 78%, var(--theme-accent) 22%);
  --book-cover-b: color-mix(in srgb, var(--theme-secondary) 62%, var(--theme-primary) 38%);
}

.book-cover-gradient-2 {
  --book-cover-a: color-mix(in srgb, var(--theme-primary) 68%, var(--theme-text) 32%);
  --book-cover-b: color-mix(in srgb, var(--theme-accent) 52%, var(--theme-primary) 48%);
}

.book-cover-gradient-3 {
  --book-cover-a: color-mix(in srgb, var(--theme-secondary) 70%, var(--theme-primary) 30%);
  --book-cover-b: color-mix(in srgb, var(--theme-primary) 74%, var(--theme-background) 26%);
}

.book-cover-gradient-4 {
  --book-cover-a: color-mix(in srgb, var(--theme-primary) 72%, var(--theme-surface) 28%);
  --book-cover-b: color-mix(in srgb, var(--theme-accent) 64%, var(--theme-secondary) 36%);
}

.book-cover-gradient-5 {
  --book-cover-a: color-mix(in srgb, var(--theme-primary-hover) 74%, var(--theme-primary) 26%);
  --book-cover-b: color-mix(in srgb, var(--theme-secondary) 56%, var(--theme-accent) 44%);
}

.book-cover-gradient-0::before,
.book-cover-gradient-1::before,
.book-cover-gradient-2::before,
.book-cover-gradient-3::before,
.book-cover-gradient-4::before,
.book-cover-gradient-5::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, currentColor 14%, transparent) 0 10px, transparent 10px 100%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--theme-surface) 10%, transparent) 100%) !important;
  opacity: 0.34 !important;
  pointer-events: none !important;
}

/* Member Card & Avatar Enhancements */
.member-card {
  border-radius: 16px !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.16) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  /* -webkit-backdrop-filter: blur(10px) !important; (removed for performance) */
  /* backdrop-filter: blur(10px) !important; (removed for performance) */
  box-shadow: var(--rasamala-shadow-md) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.member-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.28) !important;
  box-shadow: 0 20px 38px rgba(var(--theme-accent-rgb), 0.14) !important;
}

.member-card .card-image-rounded {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
  background: #f8f9fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.member-card .card-image-rounded img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.member-avatar-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: 0.02em !important;
}

/* Member Avatar Gradients */
.member-avatar-gradient-0 {
  background: linear-gradient(135deg, #706fd3 0%, #474787 100%) !important;
}

.member-avatar-gradient-1 {
  background: linear-gradient(135deg, #33d9b2 0%, #218c74 100%) !important;
}

.member-avatar-gradient-2 {
  background: linear-gradient(135deg, #ff5252 0%, #b33939 100%) !important;
}

.member-avatar-gradient-3 {
  background: linear-gradient(135deg, #ff793f 0%, #cd6133 100%) !important;
}

.member-avatar-gradient-4 {
  background: linear-gradient(135deg, #34ace0 0%, #227093 100%) !important;
}

/* Topics Section Card Styling */
.rasamala-group-subject {
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  width: 100% !important;
}

.rasamala-group-subject .btn {
  margin-right: 0 !important;
}

#slims-home .rasamala-group-subject .btn,
#slims-home slims-group-subject .btn {
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 34%, transparent) !important;
  color: var(--theme-text) !important;
}

#slims-home .rasamala-group-subject .btn:hover,
#slims-home .rasamala-group-subject .btn:focus,
#slims-home slims-group-subject .btn:hover,
#slims-home slims-group-subject .btn:focus {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

.topic li {
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--rasamala-shadow-sm) !important;
}

.topic li a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 16px 12px !important;
}

.topic li span {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--rasamala-text-primary) !important;
  margin-top: auto !important;
}

.topic-icon-fa {
  width: 68px !important;
  height: 68px !important;
  font-size: 40px !important;
  margin-bottom: 14px !important;
  background: rgba(var(--theme-accent-rgb), 0.06) !important;
  border-radius: 50% !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease, color 0.3s ease !important;
}

.topic li:hover .topic-icon-fa {
  transform: scale(1.15) rotate(-5deg) !important;
  background-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
}

/* Unify hero and search sections background */
.rasamala-hero-section {
  padding-bottom: 0 !important;
}

.rasamala-hero-section .rasamala-search-banner-section {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Compact & Theme-Friendly News Pills under Searchbox */
/* Latest News/Content List under Searchbox */
#search-wraper .latest-content-strip {
  margin: 14px auto 0 !important;
  padding: 0 16px !important;
  width: 100% !important;
  max-width: 820px !important;
  display: block !important;
}

#search-wraper .latest-content-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
}

#search-wraper .latest-content-list li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#search-wraper .latest-content-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: color-mix(in srgb, var(--theme-surface) 84%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 24%, var(--theme-muted) 12%, transparent) !important;
  border-radius: var(--rasamala-radius-button) !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: none !important;
  max-width: min(320px, 86vw) !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

#search-wraper .latest-content-link .latest-content-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#search-wraper .latest-content-link:hover,
#search-wraper .latest-content-link:focus {
  background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface) 86%) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-primary) 18%, transparent) !important;
  color: var(--theme-on-surface) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-primary) 9%, transparent) !important;
}

#search-wraper .latest-content-ticker {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 30px !important;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 24%, var(--theme-muted) 12%, transparent) !important;
  background: color-mix(in srgb, var(--theme-surface) 84%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

#search-wraper .latest-content-ticker .latest-content-ticker-item {
  color: var(--rasamala-text-primary) !important;
}

#search-wraper .latest-content-ticker .latest-content-icon {
  color: var(--rasamala-accent) !important;
}

.latest-content-icon {
  color: var(--rasamala-accent) !important;
  font-size: 10px !important;
  margin-right: 2px !important;
  transition: color 0.2s ease !important;
}

.latest-content-ticker .latest-content-icon {
  color: var(--theme-on-primary) !important;
}

.latest-content-link:hover .latest-content-icon {
  color: color-mix(in srgb, var(--theme-primary) 74%, var(--theme-accent) 26%) !important;
}

/* Inline Ticker under Searchbox */


/* Restored general styles from split */


/* Librarian / Staff Login Page Alignment */
#loginForm {
  max-width: 480px !important;
  margin: 0 auto !important;
}


#loginForm form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}


#loginForm .heading1 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-primary) !important;
  margin-bottom: 4px !important;
  margin-top: 10px !important;
  text-align: left !important;
}


#loginForm input.login_input,
#loginForm input[type="text"],
#loginForm input[type="password"],
.login_input input {
  display: block !important;
  width: 100% !important;
  border-radius: 999px !important;
  border: 1px solid var(--rasamala-border) !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  background-color: #ffffff !important;
  color: #424242 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}


#loginForm input.login_input:focus {
  border-color: var(--rasamala-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb), 0.15) !important;
  outline: none !important;
}


#loginForm .remember_forgot {
  margin: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
}


#loginForm .remember {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: var(--rasamala-text-secondary) !important;
}


#loginForm .remember input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--rasamala-accent) !important;
  cursor: pointer !important;
}


#loginForm .remember label {
  margin: 0 !important;
  cursor: pointer !important;
}


#loginForm input.loginButton {
  margin-top: 12px !important;
  background-color: var(--rasamala-accent) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--rasamala-radius-button) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  width: 100% !important;
}


#loginForm input.loginButton:hover {
  background-color: var(--rasamala-accent-hover) !important;
}


#loginForm input.loginButton:active {
  transform: scale(0.98) !important;
}


#loginForm input.homeButton {
  margin-top: 8px !important;
  background: transparent !important;
  color: var(--rasamala-accent) !important;
  border: 1.5px solid var(--rasamala-accent) !important;
  padding: 11px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--rasamala-radius-button) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  width: 100% !important;
}


#loginForm input.homeButton:hover {
  background-color: rgba(var(--theme-accent-rgb), 0.08) !important;
}


/* Ensure transparent container for inline news below searchbox */
#search-wraper .latest-content-strip {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* Custom Search Bar Buttons */
#search-wraper #search-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 8px;
  margin: 0;
  color: var(--theme-accent, #3b82f6);
  font-size: 1.15rem;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

#search-wraper #search-form button[type="submit"]:hover {
  background: transparent;
  background-color: transparent;
  color: var(--theme-primary, #0f172a);
  transform: scale(1.1);
  box-shadow: none;
}

#search-wraper #search-form button[type="submit"] > .fa-search,
#search-wraper #search-form button[type="submit"] > .fa-spinner {
  color: inherit;
}

#search-wraper #search-form a[data-bs-target="#adv-modal"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 8px;
  margin: 0;
  color: var(--theme-muted-on-background, #64748b);
  font-size: 1.15rem;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

#search-wraper #search-form a[data-bs-target="#adv-modal"]:hover {
  background: transparent;
  background-color: transparent;
  color: var(--theme-primary, #0f172a);
  transform: scale(1.1);
  box-shadow: none;
}


#search-wraper .card-body {
  padding: 9px 11px 9px 22px !important;
}


/* Theme Clean-up & Dynamic Book Detail Page Spacing */
.detail-record {
  background: var(--theme-surface);
  background-color: var(--theme-surface);
  border: 1px solid color-mix(in srgb, var(--theme-muted) 24%, transparent);
  border-radius: 22px;
  box-shadow: none;
}


/* Premium Compact Vertical Metadata styling inside Book Detail page */
.detail-record dl.row.detail-info-list {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  margin-right: 0;
  gap: 0;
}

/* Responsive Detail Information (Grid on Desktop, Stacked on Mobile) */
@media (max-width: 767.98px) {
  .detail-record dl.row.detail-info-list > dt {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--theme-on-surface) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    border-bottom: none !important;
    text-align: left !important;
  }

  .detail-record dl.row.detail-info-list > dd {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rasamala-text-primary) !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border-bottom: none !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .detail-record dl.row.detail-info-list > dd:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (min-width: 768px) {
  .detail-record dl.row.detail-info-list {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 10px 22px;
    border-bottom: none;
    margin-left: 0;
    margin-right: 0;
    padding: 6px 0;
  }

  .detail-record dl.row.detail-info-list > dt {
    grid-column: 1;
    align-self: start;
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--theme-on-surface) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    padding: 2px 0 0;
    margin: 0;
    border-bottom: none;
    text-align: left;
    white-space: normal;
    line-height: 1.55;
  }

  .detail-record dl.row.detail-info-list > dd {
    grid-column: 2;
    align-self: start;
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rasamala-text-primary) !important;
    padding: 0;
    margin: 0;
    border-bottom: none;
    text-align: left;
    line-height: 1.6;
  }

  .detail-record dl.row.detail-info-list > dd > div {
    max-width: 74ch;
  }
}

/* Style for Detail Page Headings */
.detail-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  color: var(--rasamala-text-primary);
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 12%, transparent) !important;
}

.detail-title-block {
  margin: 0 0 22px;
  padding: 0 0 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 12%, transparent) !important;
}

.detail-section-heading::before {
  display: none !important;
  content: none !important;
}


/* Flat, Clean Card Borders and Spacing across application */
.card,
.grid-item .card,
.slims-content .card,
.slims-content .grid-item {
  border: 1px solid rgba(66, 66, 66, 0.04) !important;
  box-shadow: var(--rasamala-shadow-sm) !important;
}


/* Cleaner Separators */
.rasamala-divider {
  border-top-color: rgba(66, 66, 66, 0.06) !important;
}


/* Homepage typography scale */
#slims-home .rasamala-home-section {
  margin-top: 28px !important;
}


#slims-home .rasamala-home-section:first-of-type {
  margin-top: 12px !important;
}


#slims-home section h4,
#slims-home .rasamala-home-section-title {
  margin-bottom: 14px !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}


#slims-home section h4 .subtitle-section,
#slims-home .subtitle-section {
  max-width: 760px !important;
  margin-top: 4px !important;
  color: var(--theme-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}


#slims-home .collection {
  row-gap: 10px !important;
}


#slims-home .slims-book-card {
  border-radius: 12px !important;
  box-shadow: var(--rasamala-shadow-sm) !important;
}


#slims-home .slims-book-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
}


#slims-home .slims-book-card .card-body {
  padding: 10px 8px !important;
}

#slims-home .slims-book-card .card-image {
  aspect-ratio: 65 / 83 !important;
  width: 100% !important;
  max-width: 135px !important;
  max-height: 190px !important;
  margin: 0 auto 10px auto !important;
  border-radius: 9px !important;
}

#slims-home .slims-book-card .card-image img {
  max-width: 135px !important;
  max-height: 190px !important;
  object-fit: contain !important;
}


#slims-home .slims-book-card .card-text,
#slims-home .slims-book-card .parallel-title-home {
  margin-top: 0 !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}


#slims-home .rasamala-home-section-popular .slims-book-card .card-text,
#slims-home .rasamala-home-section-popular .slims-book-card .parallel-title-home,
#slims-home .rasamala-home-section-new-collection .slims-book-card .card-text,
#slims-home .rasamala-home-section-new-collection .slims-book-card .parallel-title-home {
  text-align: center !important;
}


#slims-home .rasamala-home-section-popular .slims-book-card .parallel-title-main,
#slims-home .rasamala-home-section-popular .slims-book-card .parallel-title-alt,
#slims-home .rasamala-home-section-new-collection .slims-book-card .parallel-title-main,
#slims-home .rasamala-home-section-new-collection .slims-book-card .parallel-title-alt {
  text-align: center !important;
}


#slims-home .slims-book-card .parallel-title-main {
  display: -webkit-box !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}


#slims-home .slims-book-card .parallel-title-alt {
  margin-top: 5px !important;
  color: var(--theme-muted) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}


#slims-home .slims-book-card .book-cover-title-text {
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
}


.rasamala-home-content-cards-section {
  margin-top: 28px !important;
  margin-bottom: 18px !important;
}


.rasamala-home-content-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}


.rasamala-home-content-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: center !important;
  min-height: 112px !important;
  padding: 12px !important;
  overflow: hidden !important;
  color: var(--theme-text, var(--rasamala-text-primary)) !important;
  text-align: left !important;
  text-decoration: none !important;
  border: 1px solid color-mix(in srgb, var(--theme-text, #000) 12%, transparent) !important;
  border-radius: var(--rasamala-radius-card, 16px) !important;
  background: var(--theme-surface, #ffffff) !important;
  background-color: var(--theme-surface, #ffffff) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}


.rasamala-home-content-card:hover,
.rasamala-home-content-card:focus {
  color: var(--theme-text, var(--rasamala-text-primary)) !important;
  text-decoration: none !important;
  border-color: color-mix(in srgb, var(--theme-accent, #059669) 60%, var(--theme-text, #000) 40%) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14) !important;
  transform: translateY(-2px) !important;
  background: color-mix(in srgb, var(--theme-surface, #ffffff) 92%, var(--theme-primary, #059669) 8%) !important;
}


.rasamala-home-content-thumb {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 92px !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: var(--rasamala-radius-control, 10px) !important;
  background: color-mix(in srgb, var(--theme-accent, #059669) 15%, var(--theme-surface, #ffffff) 85%) !important;
}


.rasamala-home-content-thumb img,
.rasamala-home-content-thumb-placeholder {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
}


.rasamala-home-content-thumb img {
  object-fit: cover !important;
}


.rasamala-home-content-thumb-placeholder {
  align-items: center !important;
  justify-content: center !important;
  color: var(--theme-on-primary, #ffffff) !important;
  font-size: 26px !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(135deg, var(--theme-primary, #059669), var(--theme-accent, #10b981)) !important;
}


.rasamala-home-content-body {
  display: block !important;
  min-width: 0 !important;
}


.rasamala-home-content-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--theme-text, var(--rasamala-text-primary)) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}


.rasamala-home-content-excerpt {
  display: -webkit-box !important;
  margin-top: 5px !important;
  overflow: hidden !important;
  color: var(--theme-muted, var(--rasamala-text-secondary)) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.rasamala-hero-inline-title {
  color: var(--theme-text, var(--rasamala-text-primary)) !important;
}


#slims-home .rasamala-group-subject .btn {
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}


#slims-home .topic li span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}


#slims-home .member-card .card-body {
  padding: 18px !important;
}


#slims-home .member-card .card-title {
  margin-bottom: 10px !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}


#slims-home .member-card .card-title small,
#slims-home .member-card .card-text {
  font-size: 12px !important;
  line-height: 1.4 !important;
}


#slims-home .rasamala-home-section-top-reader {
  margin-top: 24px !important;
}

#slims-home .rasamala-home-section-top-reader>.container {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

#slims-home .rasamala-home-section-map {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 24px;
  border-radius: var(--theme-radius-xl, 16px);
  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-background) 8%);
  border: 1px solid color-mix(in srgb, var(--theme-muted) 20%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-primary) 6%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#slims-home .rasamala-home-section-map iframe {
  border-radius: var(--theme-radius-lg, 12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  width: 100%;
}


#slims-home .home-map-contact {
  text-align: left;
  padding: 20px;
  border-radius: var(--theme-radius-lg, 12px);
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


#slims-home .home-library-name {
  margin-bottom: 12px;
  color: var(--theme-on-surface, var(--rasamala-text-primary));
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}


#slims-home .home-map-description,
#slims-home .home-map-description p,
#slims-home .home-map-description li {
  color: var(--theme-muted-on-background, var(--theme-muted));
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}


#slims-home .home-map-description p {
  margin-bottom: 8px;
}


#slims-home .home-map-description a {
  color: var(--theme-link);
  font-weight: 600;
}


#slims-home .home-map-social-links {
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted) 15%, transparent);
}


#slims-home .home-map-social-links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
  background-color: var(--theme-primary);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 80%, var(--theme-accent) 20%);
  color: var(--theme-on-primary, #ffffff);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--theme-primary) 25%, transparent);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#slims-home .home-map-social-links .btn:hover {
  transform: translateY(-2px);
  background-color: var(--theme-primary-hover, var(--theme-accent));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--theme-primary) 35%, transparent);
}


@media (max-width: 991.98px) {
  .rasamala-home-content-cards {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 767.98px) {
  body.rasamala-home-few-sections:not(.rasamala-home-hero-only) .rasamala-search-banner-section {
    min-height: 0 !important;
    align-items: center !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
  }

  body.rasamala-home-few-sections:not(.rasamala-home-hero-only) #slims-home {
    min-height: 0 !important;
    padding-bottom: 28px !important;
  }

  body.rasamala-home-topic-only #slims-home .rasamala-home-section-topic {
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  #slims-home .rasamala-home-section {
    margin-top: 24px !important;
  }

  /* Two-column clean grid for topics on mobile devices */
  .topic li {
    width: calc(50% - 16px) !important;
    height: 120px !important;
    margin: 8px !important;
    border-radius: 12px !important;
  }

  .topic-icon-fa {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .topic li span {
    font-size: 11px !important;
  }

  #slims-home section h4,
  #slims-home .rasamala-home-section-title {
    font-size: 21px !important;
    line-height: 1.28 !important;
  }

  #slims-home section h4 .subtitle-section,
  #slims-home .subtitle-section {
    max-width: 92vw !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  #slims-home .slims-book-card .card-body {
    padding: 10px !important;
  }

  #slims-home .slims-book-card .card-text,
  #slims-home .slims-book-card .parallel-title-home {
    font-size: 12.5px !important;
    line-height: 1.32 !important;
  }

  #slims-home .slims-book-card .parallel-title-alt {
    font-size: 11px !important;
  }

  .rasamala-home-content-cards {
    grid-template-columns: 1fr !important;
  }

  .rasamala-home-content-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    min-height: 98px !important;
    padding: 10px !important;
  }

  .rasamala-home-content-thumb {
    width: 82px !important;
  }

  .rasamala-home-content-title {
    font-size: 13px !important;
  }

  .rasamala-home-content-excerpt {
    font-size: 11.5px !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #slims-home .home-map-contact {
    margin-top: 18px !important;
    text-align: center !important;
  }

  #slims-home .home-library-name {
    font-size: 18px !important;
  }

  #slims-home .home-map-description,
  #slims-home .home-map-description p,
  #slims-home .home-map-description li {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  #slims-home .home-map-social-links {
    justify-content: center !important;
  }
}


/* Search result list polish */
.result-search .text-primary {
  color: var(--rasamala-accent) !important;
}


.result-search section.container.mt-5 {
  max-width: 1200px !important;
  width: 100% !important;
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .result-search section.container.mt-5 {
    max-width: 92% !important;
  }
}

@media (max-width: 767.98px) {
  .result-search section.container.mt-5 {
    max-width: 96% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


.result-search .col-md-3>.card {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.1) !important;
  border-radius: 18px !important;
  box-shadow: var(--rasamala-shadow-md) !important;
}


.result-search .col-md-3>.card h5 {
  color: var(--rasamala-text-primary) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}


.result-search .search-found-info {
  color: var(--rasamala-text-primary) !important;
  font-size: 16px !important;
}


.result-search .search-found-info-keywords {
  color: var(--rasamala-accent) !important;
}


.result-search .desktop-sort-bar {
  margin-bottom: 22px !important;
  padding: 16px 20px !important;
}


.result-search .wrapper .debug {
  margin: 14px 0 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.14) !important;
  border-radius: 12px !important;
  background: rgba(var(--theme-accent-rgb), 0.07) !important;
  color: var(--rasamala-text-primary) !important;
  box-shadow: none !important;
}


.result-search .wrapper .debug summary {
  padding: 10px 14px !important;
  cursor: pointer !important;
  color: var(--rasamala-accent) !important;
  font-size: 14px !important;
}


.result-search .wrapper .debug section {
  max-height: 260px !important;
  overflow: auto !important;
  padding: 12px 14px !important;
  border-top: 1px solid rgba(var(--theme-accent-rgb), 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}


.biblio-list-card {
  overflow: hidden !important;
  border-color: rgba(var(--theme-accent-rgb), 0.08) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
}


.biblio-list-card>.card-body {
  padding: 22px 24px !important;
}


.biblio-list-layout {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 124px !important;
  gap: 22px !important;
  align-items: start !important;
}


.biblio-list-cover {
  display: block !important;
  width: 96px !important;
  height: 146px !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  background: rgba(var(--theme-accent-rgb), 0.08) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  text-decoration: none !important;
}


.biblio-list-cover img,
.biblio-list-cover .book-cover-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 11px !important;
}


.biblio-list-cover .book-cover-content {
  inset: 6px !important;
  padding: 8px 4px !important;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important;
  border-radius: 3px !important;
}

.biblio-list-cover .book-cover-header-text {
  font-size: 0.38rem !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 2px !important;
}

.biblio-list-cover .book-cover-title-text {
  font-size: 0.52rem !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  margin: auto 0 !important;
  text-shadow: none !important;
}

.biblio-list-cover .book-cover-footer-text {
  font-size: 0.38rem !important;
  letter-spacing: 0.06em !important;
  margin-top: 2px !important;
  padding-top: 2px !important;
  width: 70% !important;
}

.biblio-list-cover .book-cover-author-text {
  font-size: 0.38rem !important;
  letter-spacing: 0.04em !important;
  margin-top: 2px !important;
  padding-top: 2px !important;
  width: 85% !important;
}


.biblio-list-content {
  min-width: 0 !important;
}


.biblio-list-title {
  margin-bottom: 6px !important;
}


.biblio-list-title a.card-link {
  font-size: 18px !important;
  line-height: 1.3 !important;
}


.biblio-list-quick-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  margin: 6px 0 7px !important;
}


.biblio-list-quick-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 0 !important;
  color: var(--theme-on-surface) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}


.biblio-list-quick-action:hover,
.biblio-list-quick-action:focus {
  color: var(--rasamala-accent) !important;
  text-decoration: none !important;
}


.biblio-list-quick-action.bg-success,
.biblio-list-quick-action.is-bookmarked {
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--theme-muted-on-surface) 12%, transparent) !important;
  color: var(--theme-on-surface) !important;
}


.biblio-list-card .authors {
  gap: 6px !important;
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}


.biblio-list-card .authors a.btn-outline-secondary {
  margin: 0 !important;
  padding: 4px 10px !important;
  line-height: 1.25 !important;
}


.biblio-list-notes {
  margin: 6px 0 0 !important;
  color: var(--rasamala-text-primary) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}


.biblio-list-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
}


.biblio-list-availability {
  padding: 11px 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent) !important;
  border-radius: 12px !important;
  background: transparent !important;
  text-align: center !important;
}


.biblio-list-availability-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  color: #28a745 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}


.biblio-list-availability strong {
  display: block !important;
  margin-top: 7px !important;
  color: var(--theme-on-surface) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}


.biblio-list-availability.is-unavailable .biblio-list-availability-label,
.biblio-list-availability.is-unavailable strong {
  color: #dc3545 !important;
}


.biblio-list-basket,
.biblio-list-action-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  width: 100% !important;
  padding: 7px 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 22%, transparent) !important;
  border-radius: var(--rasamala-radius-button) !important;
  background: transparent !important;
  color: var(--theme-on-surface) !important;
  font-family: var(--rasamala-font-stack) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}


.biblio-list-basket:hover,
.biblio-list-basket:focus,
.biblio-list-action-link:hover,
.biblio-list-action-link:focus {
  background: color-mix(in srgb, var(--theme-on-surface) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-muted-on-surface) 45%, transparent) !important;
  color: var(--theme-on-surface) !important;
  text-decoration: none !important;
}


.biblio-list-card .expand a {
  color: var(--theme-on-surface) !important;
}


@media (max-width: 767.98px) {
  .biblio-list-card>.card-body {
    padding: 16px !important;
  }

  .biblio-list-layout {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .biblio-list-cover {
    width: 76px !important;
    height: 114px !important;
  }

  .biblio-list-title a.card-link {
    font-size: 16px !important;
  }

  .biblio-list-quick-actions {
    gap: 6px 10px !important;
  }

  .biblio-list-quick-action {
    font-size: 12px !important;
  }

  .biblio-list-notes {
    font-size: 14px !important;
  }

  .biblio-list-side {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .biblio-list-availability {
    flex: 1 1 130px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  .biblio-list-availability-label {
    justify-content: flex-start !important;
    width: auto !important;
  }

  .biblio-list-availability strong {
    margin-top: 0 !important;
  }

  .biblio-list-basket,
  .biblio-list-action-link {
    flex: 1 1 110px !important;
    width: auto !important;
  }
}



/* Homepage search and latest content refinement */
#search-wraper .latest-content-strip {
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  margin: 18px auto 0 !important;
  padding: 0 10px !important;
}


#search-wraper .latest-content-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}


#search-wraper .latest-content-list li {
  display: block !important;
  min-width: 0 !important;
}


#search-wraper .latest-content-link {
  width: 100% !important;
  max-width: none !important;
  min-height: 36px !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--theme-surface) 84%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--theme-muted) 12%, transparent) !important;
  color: var(--theme-on-surface) !important;
  box-shadow: none !important;
}


#search-wraper .latest-content-link .latest-content-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface) 86%) !important;
  color: color-mix(in srgb, var(--theme-primary) 74%, var(--theme-accent) 26%) !important;
  font-size: 9px !important;
}


#search-wraper .latest-content-link .latest-content-title {
  min-width: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


#search-wraper .latest-content-link:hover,
#search-wraper .latest-content-link:focus {
  background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface) 86%) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-primary) 18%, transparent) !important;
  color: var(--theme-on-surface) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-primary) 9%, transparent) !important;
}


@media (max-width: 575.98px) {
  #search-wraper .latest-content-strip {
    margin-top: 12px !important;
    padding: 0 !important;
  }

  #search-wraper .latest-content-list {
    grid-template-columns: 1fr !important;
    max-width: min(100%, 360px) !important;
    gap: 7px !important;
  }
}


/* Filter, sort, and search result panel background setting */
body.rasamala-search-panels-transparent .result-search .col-md-3>.card,
body.rasamala-search-panels-transparent .result-search .desktop-sort-bar,
body.rasamala-search-panels-transparent .result-search .btn-modern-filter,
body.rasamala-search-panels-transparent .result-search .search-toolbar-action,
body.rasamala-search-panels-transparent .result-search .biblio-list-card,
body.rasamala-search-panels-transparent .result-search .grid-item>.card,
body.rasamala-search-panels-transparent .result-search .card.item.border-0,
body.rasamala-search-panels-transparent #mobileFilterModal .modal-content,
body.rasamala-search-panels-transparent #mobileSortModal .modal-content,
body.rasamala-search-panels-transparent #mobileViewModal .modal-content {
  background: rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.14) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}


body.rasamala-search-panels-transparent .result-search .col-md-3>.card,
body.rasamala-search-panels-transparent .result-search .desktop-sort-bar {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


body.rasamala-search-panels-transparent .result-search .desktop-sort-bar {
  padding: 10px 0 !important;
}


body.rasamala-search-panels-transparent .result-search .biblio-simple-item {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: rgba(var(--theme-accent-rgb), 0.14) !important;
  box-shadow: none !important;
}


body.rasamala-search-panels-transparent .result-search .grid-item .p-5,
body.rasamala-search-panels-transparent .result-search #search-filter li.list-group-item,
body.rasamala-search-panels-transparent .result-search #desktop-filter-container .list-group-item,
body.rasamala-search-panels-transparent #mobile-filter-container .list-group-item {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}


body.rasamala-search-panels-transparent .result-search .sort-chip,
body.rasamala-search-panels-transparent .result-search .desktop-sort-bar .btn-light,
body.rasamala-search-panels-transparent .result-search #desktop-filter-container label,
body.rasamala-search-panels-transparent #mobile-filter-container label,
body.rasamala-search-panels-transparent #mobile-sort-options .list-group-item,
body.rasamala-search-panels-transparent .result-search .biblio-list-availability,
body.rasamala-search-panels-transparent .result-search .biblio-list-basket,
body.rasamala-search-panels-transparent .result-search .biblio-list-action-link {
  background: transparent !important;
  background-color: transparent !important;
  border-color: color-mix(in srgb, var(--theme-muted-on-surface) 22%, transparent) !important;
  color: var(--theme-on-surface) !important;
}


body.rasamala-search-panels-transparent .result-search .sort-chip.active,
body.rasamala-search-panels-transparent .result-search .sort-chip:hover,
body.rasamala-search-panels-transparent .result-search .sort-chip:focus,
body.rasamala-search-panels-transparent .result-search #desktop-filter-container input[type="checkbox"]:checked+label,
body.rasamala-search-panels-transparent .result-search #desktop-filter-container input[type="radio"]:checked+label,
body.rasamala-search-panels-transparent #mobile-filter-container input[type="checkbox"]:checked+label,
body.rasamala-search-panels-transparent #mobile-filter-container input[type="radio"]:checked+label,
body.rasamala-search-panels-transparent #mobile-sort-options .list-group-item.active,
body.rasamala-search-panels-transparent #mobile-sort-options .list-group-item:hover,
body.rasamala-search-panels-transparent #mobile-sort-options .list-group-item:focus,
body.rasamala-search-panels-transparent .result-search .biblio-list-basket:hover,
body.rasamala-search-panels-transparent .result-search .biblio-list-basket:focus,
body.rasamala-search-panels-transparent .result-search .biblio-list-action-link:hover,
body.rasamala-search-panels-transparent .result-search .biblio-list-action-link:focus {
  background: var(--rasamala-accent) !important;
  background-color: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
}


body.rasamala-search-panels-solid .result-search .biblio-simple-item {
  margin-bottom: 10px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--rasamala-border) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: var(--rasamala-shadow-md) !important;
}






/* Clean Description Section for Book Detail Page */
.detail-notes-box {
  position: relative;
  overflow: visible;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
  font-family: var(--rasamala-font-stack);
}

.detail-notes-box::before {
  display: none !important;
  content: none !important;
}

.detail-notes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--rasamala-text-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.detail-notes-content {
  color: var(--rasamala-text-primary);
  font-size: 13.5px;
  line-height: 1.68;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.detail-notes-content p {
  margin: 0 0 0.8rem;
}

.detail-notes-content p:last-child {
  margin-bottom: 0;
}

.detail-notes-content br {
  line-height: 1.8;
}

.detail-notes-empty {
  font-size: 13px !important;
  color: var(--rasamala-text-secondary) !important;
  font-style: italic !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 767.98px) {
  .detail-record {
    padding: 18px 14px !important;
  }

  .detail-record .detail-notes-box {
    box-sizing: border-box !important;
    padding: 16px 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .detail-record .detail-notes-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
  }

  .detail-record .detail-notes-content {
    font-size: 13px !important;
    line-height: 1.65 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Premium Advanced Search Modal Styling */
#adv-modal .modal-content {
  font-family: var(--rasamala-font-stack) !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent) !important;
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;
}

#adv-modal .modal-header {
  border-bottom: none !important;
  padding: 20px 24px 0 24px !important;
}

#adv-modal .modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--theme-text) !important;
}

#adv-modal .modal-header .btn-close {
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#adv-modal .modal-header .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

#adv-modal .modal-body {
  padding: 24px !important;
}

#adv-modal label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--rasamala-text-secondary) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 5px !important;
  display: block !important;
}

#adv-modal .form-control,
#adv-modal .form-select,
#adv-modal select,
#adv-modal input {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent) !important;
  padding: 9px 16px !important;
  font-size: 13.5px !important;
  color: var(--rasamala-text-primary) !important;
  background-color: var(--theme-surface) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#adv-modal .form-control:focus,
#adv-modal .form-select:focus,
#adv-modal select:focus,
#adv-modal input:focus {
  border-color: var(--rasamala-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.14) !important;
  outline: 0 !important;
}

#adv-modal .modal-footer {
  border-top: none !important;
  padding: 0 24px 24px 24px !important;
}

#adv-modal .modal-footer .btn-primary {
  border-radius: 999px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  background-color: var(--rasamala-accent) !important;
  border-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.25) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

#adv-modal .modal-footer .btn-primary:hover {
  background-color: var(--rasamala-accent-hover) !important;
  border-color: var(--rasamala-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(var(--theme-accent-rgb), 0.35) !important;
}

/* Clean & Transparent Action Buttons (Share, QR Code, & Bookmark across all pages) */
.btn-theme-share,
.btn-icon-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: var(--theme-muted-on-surface) !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-icon-action:hover {
  color: var(--theme-on-surface) !important;
  background-color: color-mix(in srgb, var(--theme-on-surface) 8%, transparent) !important;
  border-color: transparent !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: none !important;
}

.btn-icon-action i {
  font-size: 13.5px !important;
  color: inherit !important;
}

.btn-theme-action,
.btn-theme-share,
.btn-content-share,
.btn-news-share,
.detail-share-btn,
.btn-theme-qr,
.btn-content-qr,
.btn-news-qr,
.detail-qr-btn-mobile,
.btn-theme-bookmark,
.bookMarkBook.btn-theme-bookmark,
.btn-theme-basket,
.btn-theme-cite {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 4px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: var(--theme-font-family), inherit !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  color: var(--theme-on-surface) !important;
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 22%, transparent) !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.btn-theme-action:hover,
.btn-theme-share:hover,
.btn-content-share:hover,
.btn-news-share:hover,
.detail-share-btn:hover,
.btn-theme-qr:hover,
.btn-content-qr:hover,
.btn-news-qr:hover,
.detail-qr-btn-mobile:hover,
.btn-theme-bookmark:hover,
.bookMarkBook.btn-theme-bookmark:hover,
.btn-theme-basket:hover,
.btn-theme-cite:hover {
  color: var(--rasamala-accent) !important;
  background-color: color-mix(in srgb, var(--theme-accent) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.btn-theme-action i,
.btn-theme-share i,
.btn-content-share i,
.btn-news-share i,
.detail-share-btn i,
.btn-theme-qr i,
.btn-content-qr i,
.btn-news-qr i,
.detail-qr-btn-mobile i,
.btn-theme-bookmark i,
.bookMarkBook.btn-theme-bookmark i,
.btn-theme-basket i,
.btn-theme-cite i {
  font-size: 12px !important;
  flex-shrink: 0 !important;
  color: var(--theme-text) !important;
}

.share-platform-item {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
  cursor: pointer !important;
}

.share-platform-item:hover {
  transform: translateY(-2px) scale(1.04) !important;
  background-color: color-mix(in srgb, var(--theme-on-surface) 6%, transparent) !important;
}

/* Keep social-share controls above the globally elevated backdrop. */
#mediaSocialModal {
  z-index: 100002 !important;
}

#mediaSocialModal .modal-dialog,
#mediaSocialModal .modal-content,
#mediaSocialModal .modal-body,
#mediaSocialModal .share-platform-item,
#mediaSocialModal #shareCopyBtn,
#mediaSocialModal #shareModalInput {
  pointer-events: auto !important;
}

#mediaSocialModal .modal-dialog,
#mediaSocialModal .modal-content {
  position: relative !important;
  z-index: 100003 !important;
}

#mediaSocialModal .modal-content {
  z-index: 100004 !important;
}

.share-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease !important;
}

.share-platform-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--theme-on-surface) !important;
  line-height: 1.2 !important;
}

.bg-whatsapp { background-color: #25d366 !important; }
.bg-facebook { background-color: #1877f2 !important; }
.bg-twitter { background-color: #111111 !important; }
.bg-telegram { background-color: #229ed9 !important; }
.bg-linkedin { background-color: #0a66c2 !important; }
.bg-email { background-color: #ea4335 !important; }

.detail-gmd-label {
  font-size: 0.88rem !important;
  font-family: var(--theme-font-family), inherit !important;
}

/* Hide Scan for Link QR Code buttons on Mobile View (< 768px) */
@media (max-width: 767.98px) {
  .btn-theme-qr,
  .btn-content-qr,
  .btn-news-qr,
  .detail-qr-btn-mobile {
    display: none !important;
  }
}

/* Modal Stacking & Backdrop Fix - Guarantees Modal is ALWAYS above Backdrop Overlay */
.modal {
  z-index: 1060 !important;
}

.modal-dialog {
  z-index: 1061 !important;
  position: relative !important;
}

/* Modal Spring Scale-Up Entrance Animation (Lightweight GPU-Accelerated) */
.modal.fade .modal-dialog {
  transform: scale(0.92) translateY(12px) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out !important;
}

.modal.show .modal-dialog,
.modal.fade.show .modal-dialog {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transform: none !important;
    transition: none !important;
  }
}

.modal-backdrop {
  z-index: 1050 !important;
}

.modal-backdrop + .modal-backdrop {
  display: none !important;
}

/* ==========================================================================
   NO. 3: BREATHING STATUS PULSE & SHOPPING BASKET BADGE RIPPLE
   ========================================================================== */

/* Breathing Pulse Keyframes for Status Badges & Dots */
@keyframes breathingPulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

@keyframes breathingPulseDanger {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Available Status Badge & Breathing Indicator */
.detail-avail-badge-available,
.badge-success,
.bg-success.badge,
.status-dot-available {
  animation: breathingPulseGreen 2.2s infinite ease-in-out !important;
  border-radius: 999px;
}

/* Expired / Unavailable Status Breathing Indicator */
.status-dot-danger,
.rasamala-digital-card-avatar.is-expired,
.rasamala-digital-card-initials.is-expired {
  animation: breathingPulseDanger 2.2s infinite ease-in-out !important;
}

/* Basket Badge Bounce & Ripple Effect on Update */
@keyframes basketBadgeBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  60% {
    transform: scale(0.85);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.count-basket.basket-updated,
#count-basket.basket-updated,
#count-basket-mobile.basket-updated,
.basket-badge-mobile.basket-updated {
  animation: basketBadgeBounce 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: inline-block !important;
}

@media (prefers-reduced-motion: reduce) {
  .detail-avail-badge-available,
  .badge-success,
  .bg-success.badge,
  .status-dot-available,
  .status-dot-danger,
  .rasamala-digital-card-avatar.is-expired,
  .count-basket.basket-updated,
  #count-basket.basket-updated,
  #count-basket-mobile.basket-updated,
  .basket-badge-mobile.basket-updated {
    animation: none !important;
  }
}


/* Grid Item Layout Enhancements - Clean & Minimalist */
.grid-item .card {
  overflow: hidden !important;
  border-radius: 12px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.grid-item .bg-rasamala-light {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  padding: 20px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.grid-item .bg-rasamala-light img,
.grid-item .bg-rasamala-light .book-cover-placeholder {
  width: 124px !important;
  height: 184px !important;
  min-height: 184px !important;
  max-width: 124px !important;
  max-height: 184px !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
}

.grid-item .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 14%, transparent) !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--theme-on-surface) !important;
}

.grid-item .list-group-item:last-child {
  border-bottom: none !important;
}

.grid-item .list-group-item label {
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  font-size: 11px !important;
  color: var(--theme-on-surface) !important;
}

.grid-item .list-group-item span {
  font-weight: 500 !important;
  text-align: right !important;
  max-width: 65% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--theme-on-surface) !important;
}

/* Search filter panel contrast normalization.
   Uses palette tokens so dark palettes remain readable even in light mode. */
.result-search .filter-panel-card,
#mobileFilterModal .modal-content {
  background: color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 22%, transparent) !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

.result-search .filter-panel-title,
#mobileFilterModal .modal-title {
  color: var(--theme-text) !important;
  border-bottom-color: color-mix(in srgb, var(--theme-muted) 24%, transparent) !important;
}

.result-search .filter-panel-title i,
#mobileFilterModal .modal-title i {
  color: var(--theme-accent) !important;
}

#desktop-filter-container,
#mobile-filter-container,
#search-filter,
#search-filter li,
#search-filter li.list-group-item,
#desktop-filter-container .list-group-item,
#mobile-filter-container .list-group-item {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 18%, transparent) !important;
}

#search-filter .cursor-pointer,
#search-filter .cursor-pointer strong,
#search-filter .row .px-3,
#search-filter a,
#search-filter span,
#search-filter small,
#search-filter .text-dark,
#search-filter .text-muted,
#desktop-filter-container .text-dark,
#desktop-filter-container .text-muted,
#mobile-filter-container .text-dark,
#mobile-filter-container .text-muted {
  color: var(--theme-text) !important;
}

#search-filter .text-muted,
#desktop-filter-container .text-muted,
#mobile-filter-container .text-muted,
#search-filter small {
  opacity: 0.78 !important;
}

#desktop-filter-container label,
#mobile-filter-container label,
.filter-item label,
.SearchFilter label,
#search-filter .custom-control-label,
#search-filter .form-check-label {
  background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-background) 12%) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 28%, transparent) !important;
  box-shadow: none !important;
}

#desktop-filter-container label:hover,
#mobile-filter-container label:hover,
.filter-item label:hover,
.SearchFilter label:hover,
#search-filter .custom-control-label:hover,
#search-filter .form-check-label:hover {
  background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface)) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 48%, transparent) !important;
}

#desktop-filter-container input[type="checkbox"]:checked+label,
#desktop-filter-container input[type="radio"]:checked+label,
#mobile-filter-container input[type="checkbox"]:checked+label,
#mobile-filter-container input[type="radio"]:checked+label {
  background: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

#search-filter .js-input-from,
#search-filter .js-input-to,
#search-filter input[type="text"],
#search-filter input[type="number"],
#search-filter select,
#desktop-filter-container select,
#mobile-filter-container select {
  background-color: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-background) 8%) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 34%, transparent) !important;
}

#search-filter .js-input-from:focus,
#search-filter .js-input-to:focus,
#search-filter input[type="text"]:focus,
#search-filter input[type="number"]:focus,
#search-filter select:focus {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 22%, transparent) !important;
}

.irs-line,
.irs-grid-pol {
  background-color: color-mix(in srgb, var(--theme-muted) 20%, transparent) !important;
}

.irs-min,
.irs-max,
.irs-grid-text {
  color: var(--theme-muted) !important;
}

#search-filter .irs-from,
#search-filter .irs-to,
#search-filter .irs-single,
#mobileFilterModal .irs-from,
#mobileFilterModal .irs-to,
#mobileFilterModal .irs-single {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  /* Black text in light mode */
  border: 1px solid color-mix(in srgb, var(--theme-muted) 38%, transparent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

#search-filter .irs-from::after,
#search-filter .irs-to::after,
#search-filter .irs-single::after,
#mobileFilterModal .irs-from::after,
#mobileFilterModal .irs-to::after,
#mobileFilterModal .irs-single::after {
  border-top-color: #ffffff !important;
}

body.rasamala-dark #search-filter .irs-from,
body.rasamala-dark #search-filter .irs-to,
body.rasamala-dark #search-filter .irs-single,
body.rasamala-dark #mobileFilterModal .irs-from,
body.rasamala-dark #mobileFilterModal .irs-to,
body.rasamala-dark #mobileFilterModal .irs-single {
  background: color-mix(in srgb, var(--theme-primary) 58%, #111827 42%) !important;
  background-color: color-mix(in srgb, var(--theme-primary) 58%, #111827 42%) !important;
  color: var(--theme-on-primary) !important;
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary) 18%, transparent) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28) !important;
}

body.rasamala-dark #search-filter .irs-from::after,
body.rasamala-dark #search-filter .irs-to::after,
body.rasamala-dark #search-filter .irs-single::after,
body.rasamala-dark #mobileFilterModal .irs-from::after,
body.rasamala-dark #mobileFilterModal .irs-to::after,
body.rasamala-dark #mobileFilterModal .irs-single::after {
  border-top-color: color-mix(in srgb, var(--theme-primary) 58%, #111827 42%) !important;
}

#search-filter .irs-min,
#search-filter .irs-max,
#search-filter .irs-grid-text,
#mobileFilterModal .irs-min,
#mobileFilterModal .irs-max,
#mobileFilterModal .irs-grid-text {
  color: color-mix(in srgb, var(--theme-text) 76%, var(--theme-muted) 24%) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

#search-filter .irs-line,
#search-filter .irs-grid-pol,
#mobileFilterModal .irs-line,
#mobileFilterModal .irs-grid-pol {
  background-color: color-mix(in srgb, var(--theme-muted) 28%, transparent) !important;
}

#search-filter .irs-handle,
#mobileFilterModal .irs-handle {
  background-color: var(--theme-surface) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 44%, var(--theme-muted) 20%) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--theme-primary) 18%, transparent) !important;
}

body.rasamala-search-panels-transparent .result-search .filter-panel-card,
body.rasamala-search-panels-transparent #mobileFilterModal .modal-content,
body.rasamala-search-panels-transparent .detail-record,
body.rasamala-search-panels-transparent .news-list-card,
body.rasamala-search-panels-transparent .rasamala-main-content-card,
body.rasamala-search-panels-transparent .librarian.row-fluid,
body.rasamala-search-panels-transparent #search-wraper .card {
  background: color-mix(in srgb, var(--theme-surface) 68%, transparent) !important;
  background-color: color-mix(in srgb, var(--theme-surface) 68%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 26%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* Ensure inner white/light elements on detail/subpages are transparent */
body.rasamala-search-panels-transparent .detail-record .bg-rasamala-light,
body.rasamala-search-panels-transparent .detail-record .bg-white,
body.rasamala-search-panels-transparent .rasamala-main-content-card .bg-rasamala-light,
body.rasamala-search-panels-transparent .rasamala-main-content-card .bg-white {
  background: transparent !important;
  background-color: transparent !important;
}

/* Final transparent panel override for search result surfaces.
   Placed after general card/filter normalization so the Tinfo setting wins. */
body.rasamala-search-panels-transparent .result-search .filter-panel-card,
body.rasamala-search-panels-transparent .result-search .biblio-simple-item,
body.rasamala-search-panels-transparent .result-search .biblio-list-card,
body.rasamala-search-panels-transparent .result-search .biblio-list-card>.card-body,
body.rasamala-search-panels-transparent .result-search .card.item.border-0,
body.rasamala-search-panels-transparent .result-search .card.item.border-0>.card-body,
body.rasamala-search-panels-transparent .result-search .grid-item>.card,
body.rasamala-search-panels-transparent .result-search .grid-item>.card>.card-body,
body.rasamala-search-panels-transparent .result-search .grid-item .bg-rasamala-light,
body.rasamala-search-panels-transparent .result-search .grid-item .list-group,
body.rasamala-search-panels-transparent .result-search .grid-item .list-group-item,
body.rasamala-search-panels-transparent #mobileFilterModal .modal-content,
body.rasamala-search-panels-transparent #mobileSortModal .modal-content,
body.rasamala-search-panels-transparent #mobileViewModal .modal-content {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.rasamala-search-panels-transparent .result-search .filter-panel-card,
body.rasamala-search-panels-transparent .result-search .biblio-list-card,
body.rasamala-search-panels-transparent .result-search .card.item.border-0,
body.rasamala-search-panels-transparent .result-search .grid-item>.card,
body.rasamala-search-panels-transparent .result-search .desktop-sort-bar {
  border-color: color-mix(in srgb, var(--theme-muted) 22%, transparent) !important;
}

body.rasamala-search-panels-transparent .result-search .biblio-simple-item,
body.rasamala-search-panels-transparent .result-search .grid-item .list-group-item {
  border-bottom-color: color-mix(in srgb, var(--theme-muted) 22%, transparent) !important;
}

@media (max-width: 767.98px) {

  body.rasamala-search-panels-transparent #mobileFilterModal .modal-content,
  body.rasamala-search-panels-transparent #mobileSortModal .modal-content,
  body.rasamala-search-panels-transparent #mobileViewModal .modal-content,
  body.rasamala-search-panels-transparent #mobileFilterModal .modal-header,
  body.rasamala-search-panels-transparent #mobileFilterModal .modal-body,
  body.rasamala-search-panels-transparent #mobileFilterModal .modal-footer,
  body.rasamala-search-panels-transparent #mobileSortModal .modal-header,
  body.rasamala-search-panels-transparent #mobileSortModal .modal-body,
  body.rasamala-search-panels-transparent #mobileSortModal .modal-footer,
  body.rasamala-search-panels-transparent #mobileViewModal .modal-header,
  body.rasamala-search-panels-transparent #mobileViewModal .modal-body,
  body.rasamala-search-panels-transparent #mobileViewModal .modal-footer {
    background: var(--theme-surface) !important;
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: color-mix(in srgb, var(--theme-muted) 24%, transparent) !important;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--theme-primary) 16%, transparent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter li,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter li.list-group-item,
  body.rasamala-search-panels-transparent #mobileFilterModal #mobile-filter-container,
  body.rasamala-search-panels-transparent #mobileFilterModal #mobile-filter-container .list-group,
  body.rasamala-search-panels-transparent #mobileFilterModal #mobile-filter-container .list-group-item,
  body.rasamala-search-panels-transparent #mobileSortModal #mobile-sort-options,
  body.rasamala-search-panels-transparent #mobileSortModal #mobile-sort-options .list-group-item,
  body.rasamala-search-panels-transparent #mobileViewModal .search-view-modal-options,
  body.rasamala-search-panels-transparent #mobileViewModal .search-view-modal-options .list-group-item {
    background: var(--theme-surface) !important;
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: color-mix(in srgb, var(--theme-muted) 18%, transparent) !important;
    box-shadow: none !important;
  }

  body.rasamala-search-panels-transparent #mobileFilterModal #mobile-filter-container label,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter .custom-control-label,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter .form-check-label,
  body.rasamala-search-panels-transparent #mobileSortModal #mobile-sort-options .list-group-item,
  body.rasamala-search-panels-transparent #mobileViewModal .search-view-modal-options .list-group-item {
    background: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-background) 10%) !important;
    background-color: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-background) 10%) !important;
    color: var(--theme-text) !important;
    border-color: color-mix(in srgb, var(--theme-muted) 24%, transparent) !important;
  }

  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter input,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter select,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter .js-input-from,
  body.rasamala-search-panels-transparent #mobileFilterModal #search-filter .js-input-to {
    background: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-background) 6%) !important;
    background-color: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-background) 6%) !important;
    color: var(--theme-text) !important;
    border-color: color-mix(in srgb, var(--theme-muted) 30%, transparent) !important;
  }
}

@keyframes advModalSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Mobile modal safe viewport: keep filter/sort/advanced search clear of navbar and bottom nav. */
@media (max-width: 767.98px) {
  #mobileFilterModal,
  #mobileSortModal {
    --rasamala-mobile-modal-top: calc(68px + env(safe-area-inset-top, 0px));
    --rasamala-mobile-modal-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    padding-top: var(--rasamala-mobile-modal-top) !important;
    padding-bottom: var(--rasamala-mobile-modal-bottom) !important;
    z-index: var(--z-modal) !important;
  }

  /* Fullscreen Advanced Search Modal on Mobile */
  #adv-modal .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #adv-modal .modal-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #adv-modal.show .modal-content {
    animation: advModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  #adv-modal .modal-header {
    flex: 0 0 auto !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 15%, transparent) !important;
  }

  #adv-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px !important;
  }

  #adv-modal .modal-footer {
    flex: 0 0 auto !important;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 15%, transparent) !important;
    background: var(--theme-surface) !important;
  }

  .modal-backdrop {
    z-index: var(--z-modal-backdrop-under-header) !important;
  }

  body.mobile-bottom-nav-hidden #mobileFilterModal,
  body.mobile-bottom-nav-hidden #mobileSortModal,
  body.mobile-bottom-nav-hidden #mobileViewModal {
    --rasamala-mobile-modal-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  #mobileFilterModal .modal-dialog,
  #mobileSortModal .modal-dialog,
  #mobileViewModal .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    height: calc(100dvh - var(--rasamala-mobile-modal-top) - var(--rasamala-mobile-modal-bottom)) !important;
    max-height: calc(100dvh - var(--rasamala-mobile-modal-top) - var(--rasamala-mobile-modal-bottom)) !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
  }

  #mobileFilterModal .modal-content,
  #mobileSortModal .modal-content,
  #mobileViewModal .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #mobileFilterModal .modal-body,
  #mobileSortModal .modal-body,
  #mobileViewModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
  }

  #mobileFilterModal .modal-header,
  #mobileFilterModal .modal-footer,
  #mobileSortModal .modal-header,
  #mobileSortModal .modal-footer {
    flex: 0 0 auto !important;
  }
}


/* Final custom-palette readability guard for light mode and white-primary palettes. */
.rasamala-theme #slims-home .rasamala-home-section-title,
.rasamala-theme #slims-home section h4,
.rasamala-theme .rasamala-home-section .rasamala-home-section-title {
  color: var(--theme-on-background) !important;
}

.rasamala-theme #slims-home section h4 .subtitle-section,
.rasamala-theme #slims-home .subtitle-section,
.rasamala-theme .rasamala-home-section .subtitle-section {
  color: var(--theme-muted) !important;
}

.rasamala-theme .topic li,
.rasamala-theme #slims-home .topic li {
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-muted) 18%, transparent) !important;
  color: var(--theme-on-surface) !important;
}

.rasamala-theme .topic li a,
.rasamala-theme .topic li span,
.rasamala-theme #slims-home .topic li a,
.rasamala-theme #slims-home .topic li span {
  color: var(--theme-on-surface) !important;
}

/* Palette-Driven Variations for Topic Icons (Strictly using Active Theme Palette Tokens) */
.topic li:nth-child(6n+1) .topic-icon-fa,
.topic li:nth-child(6n+1) i.topic-icon-fa {
  background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface) 86%) !important;
  color: var(--rasamala-readable-accent) !important;
}

.topic li:nth-child(6n+1):hover .topic-icon-fa,
.topic li:nth-child(6n+1):hover i.topic-icon-fa {
  background: var(--theme-accent) !important;
  color: var(--theme-on-accent, #ffffff) !important;
}

.topic li:nth-child(6n+2) .topic-icon-fa,
.topic li:nth-child(6n+2) i.topic-icon-fa {
  background: color-mix(in srgb, var(--theme-primary) 14%, var(--theme-surface) 86%) !important;
  color: color-mix(in srgb, var(--theme-primary) 85%, var(--theme-text) 15%) !important;
}

.topic li:nth-child(6n+2):hover .topic-icon-fa,
.topic li:nth-child(6n+2):hover i.topic-icon-fa {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary, #ffffff) !important;
}

.topic li:nth-child(6n+3) .topic-icon-fa,
.topic li:nth-child(6n+3) i.topic-icon-fa {
  background: color-mix(in srgb, var(--theme-secondary) 14%, var(--theme-surface) 86%) !important;
  color: color-mix(in srgb, var(--theme-secondary) 88%, var(--theme-text) 12%) !important;
}

.topic li:nth-child(6n+3):hover .topic-icon-fa,
.topic li:nth-child(6n+3):hover i.topic-icon-fa {
  background: var(--theme-secondary) !important;
  color: var(--theme-on-secondary, #ffffff) !important;
}

.topic li:nth-child(6n+4) .topic-icon-fa,
.topic li:nth-child(6n+4) i.topic-icon-fa {
  background: color-mix(in srgb, var(--rasamala-accent-hover, var(--theme-accent)) 16%, var(--theme-surface) 84%) !important;
  color: color-mix(in srgb, var(--rasamala-accent-hover, var(--theme-accent)) 90%, var(--theme-text) 10%) !important;
}

.topic li:nth-child(6n+4):hover .topic-icon-fa,
.topic li:nth-child(6n+4):hover i.topic-icon-fa {
  background: var(--rasamala-accent-hover, var(--theme-accent)) !important;
  color: var(--theme-on-accent, #ffffff) !important;
}

.topic li:nth-child(6n+5) .topic-icon-fa,
.topic li:nth-child(6n+5) i.topic-icon-fa {
  background: color-mix(in srgb, var(--theme-primary-hover, var(--theme-primary)) 16%, var(--theme-surface) 84%) !important;
  color: color-mix(in srgb, var(--theme-primary-hover, var(--theme-primary)) 90%, var(--theme-text) 10%) !important;
}

.topic li:nth-child(6n+5):hover .topic-icon-fa,
.topic li:nth-child(6n+5):hover i.topic-icon-fa {
  background: var(--theme-primary-hover, var(--theme-primary)) !important;
  color: var(--theme-on-primary, #ffffff) !important;
}

.topic li:nth-child(6n+6) .topic-icon-fa,
.topic li:nth-child(6n+6) i.topic-icon-fa {
  background: color-mix(in srgb, color-mix(in srgb, var(--theme-primary) 50%, var(--theme-accent) 50%) 15%, var(--theme-surface) 85%) !important;
  color: color-mix(in srgb, var(--theme-primary) 50%, var(--theme-accent) 50%) !important;
}

.topic li:nth-child(6n+6):hover .topic-icon-fa,
.topic li:nth-child(6n+6):hover i.topic-icon-fa {
  background: color-mix(in srgb, var(--theme-primary) 50%, var(--theme-accent) 50%) !important;
  color: #ffffff !important;
}

.rasamala-theme #slims-home .member-card .card-title,
.rasamala-theme #slims-home .member-card .card-title span,
.rasamala-theme #slims-home .member-card .card-text b {
  color: var(--theme-on-surface) !important;
}

.rasamala-theme #slims-home .member-card .card-title small,
.rasamala-theme #slims-home .member-card .card-text,
.rasamala-theme #slims-home .member-card .text-secondary {
  color: var(--theme-muted) !important;
}



/* News page keeps a clean neutral reading style. */
.rasamala-page-news .news-wrapper .opac-section-title {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.rasamala-page-news .news-wrapper a,
.rasamala-page-news .news-list-card .news-card-title a,
.rasamala-page-news .news-list-card .news-list-thumbnail,
.rasamala-page-news .news-list-footer .btn-news-readmore {
  text-decoration: none;
  text-decoration-line: none;
  border-bottom: 0;
  box-shadow: none;
  background-image: none;
}

.rasamala-page-news .news-list-card .news-card-title a:hover,
.rasamala-page-news .news-list-card .news-card-title a:focus,
.rasamala-page-news .news-list-card .news-card-title a:focus-visible,
.rasamala-page-news .news-list-card .news-card-title a:active,
.rasamala-page-news .news-list-card .news-card-title a:visited {
  text-decoration: none;
  text-decoration-line: none;
  border-bottom: 0;
  box-shadow: none;
  background-image: none;
}

body.rasamala-theme.rasamala-page-news:not(.rasamala-dark) .news-list-summary,
body.rasamala-theme.rasamala-page-news:not(.rasamala-dark) .news-list-date,
body.rasamala-theme.rasamala-page-news:not(.rasamala-dark) .news-list-date i {
  color: #111827 !important;
}

body.rasamala-theme.rasamala-page-news:not(.rasamala-dark) .news-list-card .news-card-title,
body.rasamala-theme.rasamala-page-news:not(.rasamala-dark) .news-list-card .news-card-title a {
  color: #111827 !important;
}

/* Compact advanced search: labels stay accessible but live in fields visually. */
#adv-modal .modal-body {
  padding: 18px 20px !important;
}

#adv-modal label.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#adv-modal .form-control,
#adv-modal .form-select {
  min-height: 42px !important;
  padding: 9px 13px !important;
  font-size: 13.5px !important;
}

#adv-modal .modal-footer {
  padding: 12px 20px !important;
}


/* Final modal layer and mobile safe-area guard. */
.rasamala-theme .modal {
  /* Must remain above the later global .modal-backdrop.show (99990). */
  z-index: 100000 !important;
}

.rasamala-theme .modal-backdrop {
  z-index: 99990 !important;
}

.rasamala-theme .modal .modal-dialog,
.rasamala-theme .modal .modal-content {
  pointer-events: auto !important;
}

.rasamala-theme .modal .btn-close,
.rasamala-theme .modal button[data-bs-dismiss="modal"] {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#libinfoModal .libinfo-modal-header,
#adv-modal .modal-header {
  position: relative !important;
  z-index: 2 !important;
}

#adv-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-right: 58px !important;
}

#libinfoModal .libinfo-modal-header .btn-close,
#adv-modal .modal-header .btn-close {
  flex: 0 0 auto !important;
  margin-left: 12px !important;
}

#adv-modal .modal-header .btn-close {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}


  #libinfoModal {
    padding: calc(80px + env(safe-area-inset-top, 0px)) 12px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #libinfoModal .modal-dialog {
    margin: 0 auto !important;
    max-height: calc(100dvh - 156px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }

  #libinfoModal .modal-content {
    max-height: inherit !important;
    overflow: hidden !important;
  }

  #libinfoModal .libinfo-modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

/* ===== Member Area responsive (rasamala) ===== */
@media (max-width: 767.98px) {

  /* F1: stack sidebar di mobile */
  .member-area .d-flex {
    flex-direction: column !important;
  }

  #member_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    border-radius: 8px !important;
  }

  /* F2: foto tidak overflow */
  #member_sidebar img {
    max-width: 140px !important;
    height: auto !important;
  }

  /* F3: tab bisa scroll horizontal */
  .member-area .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .member-area .nav-tabs .nav-link {
    white-space: nowrap !important;
  }

  /* F8: info full width di mobile */
  #info {
    width: 100% !important;
  }

  /* Reduce padding on mobile to maximize viewport area */
  .member-area .bg-white.border-right.border-bottom.border-left.p-4 {
    padding: 1rem !important;
  }

  /* Stack member metadata and change password form cells on mobile */
  .member-area table.memberDetail tr {
    display: block !important;
    margin-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-bottom: 0.75rem !important;
  }

  .member-area table.memberDetail td {
    display: block !important;
    width: 100% !important;
    padding: 0.25rem 0 !important;
    border: none !important;
    overflow-wrap: anywhere !important;
    background: transparent !important;
  }

  .member-area table.memberDetail td.key {
    font-weight: 600 !important;
    color: var(--bs-primary, #0d6efd) !important;
    width: 100% !important;
    background-color: transparent !important;
  }

  .member-area table.memberDetail td.value {
    width: 100% !important;
    background-color: transparent !important;
  }

  .member-area table.memberDetail td[colspan="2"] input.btn {
    width: 100% !important;
  }
}

/* F8: Support obsolete Bootstrap utility classes inside member area */
.member-area #member_sidebar .btn-block {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

.member-area .mr-2 {
  margin-right: 0.5rem !important;
}

.member-area .mt-8 {
  margin-top: 3rem !important;
}

/* Library card button normalization in h1 */
.member-area h1 a.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin-left: 0.5rem !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  border-radius: var(--rasamala-radius-button);
}

/* Native login button styling */
.memberButton {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  background-color: var(--bs-primary, #0d6efd) !important;
  border: 1px solid var(--bs-primary, #0d6efd) !important;
  border-radius: var(--rasamala-radius-button) !important;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
  cursor: pointer !important;
  margin-top: 1.5rem !important;
}

.memberButton:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}

@media (max-width: 767.98px) {
  /* Contextual layout overrides to hide the profile sidebar on sub-sections in mobile */
  .member-area:not(.member-sec-current_loan):not(.member-sec-) #member_sidebar {
    display: none !important;
  }

  .member-area:not(.member-sec-current_loan):not(.member-sec-) #member_content {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 1rem 0 !important;
  }


  /* Hide greeting header, member status and welcome message on mobile sub-sections */
  .member-area:not(.member-sec-current_loan):not(.member-sec-) #member_content>.text-sm.text-grey-dark,
  .member-area:not(.member-sec-current_loan):not(.member-sec-) #member_content>h1,
  .member-area:not(.member-sec-current_loan):not(.member-sec-) #member_content>p#info,
  .member-area:not(.member-sec-current_loan):not(.member-sec-) #member_content>.row {
    display: none !important;
  }

  /* Hide the top tab navigation completely in mobile view (since bottom navigation covers this) */
  #member_content .nav-tabs {
    display: none !important;
  }
}

/* Hide breadcrumbs in member area */
.member-area .rasamala-breadcrumbs,
.page-member-area .rasamala-breadcrumbs {
  display: none !important;
}

/* Fluid responsive digital card code styling */
.member-card-code-wrap {
  display: flex;
  justify-content: center;
}

.rasamala-card-code svg,
#qrcode svg {
  width: 100% !important;
  height: auto !important;
  max-width: 280px !important;
}

.rasamala-card-code--barcode {
  min-height: 88px;
}

.rasamala-card-code--barcode .member-card-barcode-img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

.member-card-code-empty {
  color: var(--theme-muted, #64748b);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Maximize space utilization for the digital card tab */
.member-sec-my_card .rasamala-main-content-card {
  padding: 32px 16px !important;
}

.member-sec-my_card #digital-card-page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.rasamala-digital-card {
  width: 100% !important;
  max-width: 350px !important;
  margin: 0 auto !important;
  text-align: center !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
  border: 1px solid var(--rasamala-border) !important;
  color: #1e293b !important;
}

.rasamala-digital-card-header {
  height: 150px !important;
  position: relative !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 80%, black) 0%, var(--theme-primary) 100%) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  padding: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.rasamala-digital-card-orb {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.rasamala-digital-card-orb-top {
  top: -50px !important;
  right: -50px !important;
  width: 150px !important;
  height: 150px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.rasamala-digital-card-orb-bottom {
  bottom: -30px !important;
  left: -30px !important;
  width: 100px !important;
  height: 100px !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.rasamala-digital-card-library-name {
  font-size: 14px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.5px !important;
}

.rasamala-digital-card-library-subname {
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  margin-top: 2px !important;
}

.rasamala-digital-card-avatar,
.rasamala-digital-card-initials {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  border: 4px solid #ffffff !important;
  position: absolute !important;
  bottom: -45px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.rasamala-digital-card-avatar.is-inactive,
.rasamala-digital-card-initials.is-inactive,
.rasamala-digital-card-avatar.is-expired,
.rasamala-digital-card-initials.is-expired {
  border: 4px solid #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.4), 0 4px 10px rgba(220, 53, 69, 0.25) !important;
}

.rasamala-digital-card-avatar {
  object-fit: cover !important;
}

.rasamala-digital-card-initials {
  background: linear-gradient(135deg, var(--theme-primary), var(--rasamala-accent)) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 28px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.rasamala-digital-card-body {
  padding: 55px 20px 20px !important;
  text-align: center !important;
  background: #ffffff !important;
}

.rasamala-digital-card-name {
  margin: 0 0 10px !important;
  font-size: 20px !important;
  font-weight: bold !important;
  color: var(--theme-primary) !important;
  letter-spacing: 0 !important;
}

.rasamala-digital-card-id {
  margin: 3px 0 !important;
  font-size: 14px !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.rasamala-digital-card-type {
  margin: 2px 0 !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.rasamala-digital-card-institution {
  margin: 2px 0 !important;
  font-size: 13px !important;
  color: #64748b !important;
}

.rasamala-digital-card-code {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 10px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px dashed #e2e8f0 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease !important;
}

.rasamala-digital-card-footer {
  background: linear-gradient(135deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-primary) 80%, black) 100%) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  padding: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

.rasamala-digital-card-actions {
  text-align: center !important;
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
}

.rasamala-digital-card-minimize {
  display: none;
}

.rasamala-digital-card-minimize:not([hidden]) {
  display: inline-block;
}

.rasamala-digital-card.is-fullscreen {
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

#card-container {
  --member-card-surface: #ffffff;
  --member-card-code-surface: #f8fafc;
  --member-card-text: #111827;
  --member-card-muted: #64748b;
  background: var(--member-card-surface) !important;
  color: var(--member-card-text) !important;
}

#card-container>.body {
  background: var(--member-card-surface) !important;
  color: var(--member-card-text) !important;
}

#card-container>.body h3 {
  color: var(--member-card-text) !important;
}

#card-container>.body .rasamala-digital-card-name {
  color: var(--theme-primary) !important;
}

#card-container>.body p {
  color: var(--member-card-muted) !important;
}

#card-container>.body p:first-of-type {
  color: var(--member-card-text) !important;
}

#card-container .rasamala-card-code {
  background: var(--member-card-code-surface) !important;
}

.member-card-expiry-status {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.76rem;
  line-height: 1.25;
}

.member-card-expiry-status-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.member-card-expiry-status-note {
  font-weight: 600;
}

.member-card-expiry-status--active {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.member-card-expiry-status--warning {
  color: #854d0e;
  background: #fef3c7;
  border-color: #facc15;
}

.member-card-expiry-status--expired {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fca5a5;
}

.member-card-expiry-status--unknown {
  color: #334155;
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* Desktop spacing adjustment for member area sub-pages to utilize space */
.member-area .container.py-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

@media (max-width: 575.98px) {

  /* Mobile padding reduction to make card fill space */
  .member-sec-my_card .container.py-5 {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 0.75rem !important;
  }

  .member-sec-my_card .rasamala-main-content-card {
    padding: 0 !important;
  }

  #card-container {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 12px !important;
  }

  .rasamala-card-code svg,
  #qrcode svg {
    max-width: 280px !important;
    width: 90% !important;
  }

  .rasamala-card-code--barcode .member-card-barcode-img {
    max-width: 260px;
  }
}

/* Responsive table scrolling overrides to prevent vertical character wrapping */
.member-area .table-responsive {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 1rem !important;
}

.member-area table.table th,
.member-area table.table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Allow Title column (usually 2nd column) to wrap normally with a sensible minimum width */
.member-area table.table td:nth-child(2),
.member-area table.table th:nth-child(2) {
  white-space: normal !important;
  min-width: 240px !important;
}

/* Premium Digital Card hover and layout transitions */
#card-container {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

#card-container:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

.rasamala-card-code,
#qrcode {
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease !important;
}

.rasamala-card-code:hover,
#qrcode:hover {
  transform: scale(1.03) !important;
  border-color: #cbd5e1 !important;
  background-color: #f1f5f9 !important;
}

/* =============================================================
   Mobile Search Bar — reduce spacing and fix search button clip
   ============================================================= */
@media (max-width: 767.98px) {

  /* Reduce gap between navbar and search box on result/search pages */
  .result-search #search-wraper,
  .rasamala-subpage-wrapper #section1 #search-wraper {
    margin-top: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Tighter padding inside the search card on mobile */
  #search-wraper .card-body {
    padding: 6px 8px 6px 14px !important;
  }

  /* Icon-only search action buttons in mobile */
  #search-wraper #search-form button[type="submit"],
  #search-wraper[class*="search-size-"] #search-form button[type="submit"],
  #search-wraper #search-form a[data-bs-target="#adv-modal"] {
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 6px;
    flex: 0 0 auto;
  }

  /* Ensure the search form icons area doesn't overflow */
  #search-wraper #search-form .d-flex.align-items-center.ms-2 {
    flex-shrink: 0 !important;
    gap: 6px !important;
  }

  /* Prevent the search card from clipping the button */
  #search-wraper .card {
    overflow: visible !important;
  }

  /* Ensure the container section has minimal top spacing */
  .result-search .container.mt-5 {
    margin-top: 1.5rem !important;
  }
}

/* =============================================================
   Search Filter & Detail Availability — remove inner box frames
   ============================================================= */
/* Strip all borders from filter cards and forms to prevent solid framing boxes */
.result-search .filter-panel-card {
  border: 0 !important;
  box-shadow: var(--rasamala-shadow-lg) !important;
}

#search-filter,
.filter-panel-card #search-filter,
#desktop-filter-container #search-filter,
#mobile-filter-container #search-filter {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.rasamala-filter-list {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Strip border outlines from all list items/facets and keep only a bottom divider */
.rasamala-filter-facet,
#search-filter li,
#search-filter li.list-group-item,
#desktop-filter-container .list-group-item,
#desktop-filter-container li,
#mobile-filter-container li,
#mobile-filter-container .list-group-item {
  display: block !important;
  margin: 0 !important;
  padding: 10px 0 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted) 16%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.rasamala-filter-facet:last-child,
#search-filter li:last-child,
#search-filter li.list-group-item:last-child,
#desktop-filter-container .list-group-item:last-child,
#desktop-filter-container li:last-child,
#mobile-filter-container li:last-child,
#mobile-filter-container .list-group-item:last-child {
  border-bottom-color: transparent !important;
  border-bottom: 0 !important;
}

/* Completely strip all box borders and side paddings from collapsible panels (e.g. Year Range container) */
#search-filter .collapse,
#search-filter .collapse>div,
#desktop-filter-container .collapse,
#desktop-filter-container .collapse>div,
#mobile-filter-container .collapse,
#mobile-filter-container .collapse>div {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.rasamala-theme:not(.rasamala-dark) .detail-side-availability,
body.rasamala-theme:not(.rasamala-dark) .availability-panel,
body.rasamala-theme:not(.rasamala-dark) .detail-side-availability .availability-summary-card,
body.rasamala-theme:not(.rasamala-dark) .detail-side-availability .availability-summary-list {
  border: 0;
  box-shadow: none;
}

body.rasamala-theme:not(.rasamala-dark) .detail-avail-row {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 10%, transparent) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  margin-bottom: 2px !important;
}

.detail-side-availability {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 12%, transparent) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.detail-side-availability .availability-summary-card,
.detail-side-availability .availability-summary-list,
.availability-panel {
  border: 0 !important;
  box-shadow: none !important;
}

.detail-avail-row {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 10%, transparent) !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.detail-avail-row::before {
  display: none !important;
  content: none !important;
}

.detail-avail-row-hidden {
  display: none !important;
}

.detail-avail-row:hover,
.detail-avail-row:focus-within {
  border-color: color-mix(in srgb, var(--theme-accent) 34%, transparent) !important;
  border-radius: 999px !important;
}

@media (max-width: 575.98px) {
  .detail-side-heading {
    gap: 7px;
    margin: 0 0 10px;
    font-size: 14px;
  }

  .detail-side-heading::before {
    display: none !important;
    content: none !important;
  }

  .detail-callnumber-strip {
    gap: 8px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid color-mix(in srgb, var(--theme-muted) 18%, transparent);
  }

  .detail-callnumber-label {
    color: var(--theme-on-surface);
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .detail-callnumber-tag {
    min-height: 32px;
    padding: 8px 14px;
    font-size: 13px;
    letter-spacing: 0.01em;
  }

  .detail-avail-row {
    min-height: 44px !important;
    margin-bottom: 9px !important;
    padding: 10px 18px 10px 20px !important;
    border-radius: 999px !important;
    background: transparent;
    background-color: transparent;
  }

  .detail-avail-row::before {
    display: none !important;
    content: none !important;
  }

  .detail-avail-row:hover,
  .detail-avail-row:focus-within {
    border-radius: 999px !important;
  }

  .detail-title-block {
    margin: 0 0 18px;
    padding-bottom: 15px;
  }

  .detail-author-footer {
    gap: 7px;
    margin-top: 12px;
  }

  .detail-author-footer a {
    min-height: 31px;
    padding: 6px 11px;
    font-size: 12px;
    line-height: 1.2;
  }
}

/* Detail Page QR Code Card & Mobile Modal */
.detail-qr-box {
  background: transparent;
  background-color: transparent;
  border: none !important;
  border-color: transparent !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.detail-qr-box:hover {
  transform: translateY(-1px) !important;
  background: transparent;
  background-color: transparent;
  box-shadow: none !important;
}

.detail-qr-img-wrap svg,
.detail-qr-modal-img svg {
  width: 100% !important;
  height: auto !important;
  max-width: 85px !important;
  max-height: 85px !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 6px !important;
}

.content-qr-icon {
  color: var(--rasamala-accent) !important;
}

.search-empty-state-image {
  max-width: 160px;
  height: auto;
}

.detail-qr-fallback-icon {
  color: var(--rasamala-accent, #6f5b43) !important;
}

.content-qr-modal-image {
  max-width: 180px;
  min-height: 180px;
}

.content-qr-fallback-image {
  max-width: 160px;
  height: auto;
}

.detail-qr-modal-input {
  cursor: text;
}

.native-lightbox-modal {
  display: block;
  z-index: 105000;
  background: rgba(0, 0, 0, 0.85);
}

.native-lightbox-preview {
  max-height: 85vh;
  object-fit: contain;
}

.detail-subject-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 3px 11px !important;
  color: var(--theme-on-surface) !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 22%, transparent) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
}

.detail-subject-tag:hover,
.detail-subject-tag:focus,
.detail-author-footer a:hover,
.detail-author-footer a:focus {
  background: color-mix(in srgb, var(--theme-accent) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent) !important;
  color: var(--rasamala-accent) !important;
  text-decoration: none !important;
}

.detail-qr-btn-mobile {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  background-color: color-mix(in srgb, var(--theme-on-surface) 6%, transparent) !important;
  color: var(--rasamala-text-primary) !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent) !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.detail-qr-btn-mobile:hover,
.detail-qr-btn-mobile:focus {
  background-color: var(--rasamala-accent) !important;
  color: var(--theme-on-primary) !important;
  border-color: var(--rasamala-accent) !important;
}

/* In-page citation dialog. This avoids browser popup blockers and keeps the
   user on the record detail page while the citation endpoint loads in a
   same-origin iframe. */
body.rasamala-citation-modal-open {
  overflow: hidden !important;
}

.rasamala-citation-modal[hidden] {
  display: none !important;
}

.rasamala-citation-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.rasamala-citation-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.rasamala-citation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.56);
}

.rasamala-citation-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(640px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 18%, transparent);
  border-radius: 18px;
  background: var(--theme-surface);
  color: var(--theme-on-surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.2s ease;
}

.rasamala-citation-modal.is-open .rasamala-citation-dialog {
  transform: translateY(0) scale(1);
}

.rasamala-citation-dialog-header,
.rasamala-citation-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-surface));
}

.rasamala-citation-dialog-header {
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 14%, transparent);
}

.rasamala-citation-dialog-footer {
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 14%, transparent);
}

.rasamala-citation-dialog-heading {
  min-width: 0;
}

.rasamala-citation-dialog-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--theme-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rasamala-citation-dialog-heading h2 {
  margin: 0;
  overflow: hidden;
  color: var(--theme-on-surface);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rasamala-citation-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--theme-muted-on-surface) 20%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--theme-muted-on-surface);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.rasamala-citation-dialog-close:hover,
.rasamala-citation-dialog-close:focus-visible {
  border-color: var(--theme-primary);
  background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  color: var(--theme-primary);
  outline: none;
}

.rasamala-citation-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--theme-background);
}

.rasamala-citation-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--theme-background);
}

.rasamala-citation-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--theme-background);
  color: var(--theme-muted-on-background);
  font-size: 0.85rem;
  pointer-events: none;
}

.rasamala-citation-loading[hidden] {
  display: none !important;
}

.rasamala-citation-loading.is-error {
  color: var(--theme-danger, #b42318);
}

@media (max-width: 575.98px) {
  .rasamala-citation-modal {
    padding: 10px;
  }

  .rasamala-citation-dialog {
    width: 100%;
    height: min(720px, calc(100vh - 20px));
    border-radius: 15px;
  }

  .rasamala-citation-dialog-header,
  .rasamala-citation-dialog-footer {
    padding: 12px 14px;
  }
}


/* Optional compact homepage tabs for long secondary sections. */
.rasamala-home-section-tabs {
  display: flex;
  align-items: flex-end;
  /* Center the remaining tabs when one or more sections are disabled. */
  justify-content: center;
  gap: 4px;
  width: min(100% - 32px, 920px);
  margin: 28px auto 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 18%, var(--theme-muted) 20%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-primary) 6%, var(--theme-surface));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 10%, transparent);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rasamala-home-section-tabs::-webkit-scrollbar {
  display: none;
}


.rasamala-home-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--theme-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.rasamala-home-tab i {
  width: 1.1em;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: 0.86em;
  text-align: center;
  transition: color 0.18s ease, transform 0.18s ease;
}


.rasamala-home-tab:hover,
.rasamala-home-tab:focus-visible {
  border-color: color-mix(in srgb, var(--theme-primary) 24%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 9%, var(--theme-surface));
  color: var(--theme-primary);
  outline: none;
}

.rasamala-home-tab:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 28%, transparent);
}


.rasamala-home-tab.is-active {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

.rasamala-home-tab.is-active i {
  color: var(--theme-on-primary);
  transform: scale(1.06);
}


.rasamala-home-tab-pane[hidden] {
  display: none !important;
}

/* Keep inactive panes collapsed even if a Vue component re-renders the
   section and drops the HTML `hidden` attribute. The layout class is applied
   by Theme Viewer and is intentionally scoped to the homepage tab panes. */
body.rasamala-home-layout-tabs #slims-home .rasamala-home-tab-pane[aria-hidden="true"] {
  display: none !important;
}

/* In tab mode the tab label is the section heading. Do not repeat the
   heading, subtitle, or subject chips inside the active pane. */
body.rasamala-home-layout-tabs #slims-home .rasamala-home-tab-pane .rasamala-home-section-title,
body.rasamala-home-layout-tabs #slims-home .rasamala-home-tab-pane .subtitle-section,
body.rasamala-home-layout-tabs #slims-home .rasamala-home-tab-pane slims-group-subject {
  display: none !important;
}

.rasamala-home-tab-pane .collection {
  margin-top: 0 !important;
}


@media (max-width: 575.98px) {
  .rasamala-home-section-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: min(100% - 16px, 520px);
    gap: 4px;
    padding: 4px;
    margin-top: 20px;
    border-radius: 13px;
    overflow: visible;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-primary) 8%, transparent);
  }

  .rasamala-home-tab {
    /* Keep a balanced two-column rhythm while centering an incomplete row. */
    width: auto;
    flex: 0 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 0;
    min-height: 48px;
    padding: 8px 7px;
    font-size: 0.72rem;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .rasamala-home-tab span {
    min-width: 0;
  }
}


/* Keep every section of the detail sidebar centred at every breakpoint. */
.detail-sidebar-col,
.detail-sidebar-col .detail-side-availability,
.detail-sidebar-col .detail-avail-row,
.detail-sidebar-col .avail-loc-callno {
  text-align: center !important;
}


.detail-sidebar-col .detail-avail-heading-row,
.detail-sidebar-col .detail-avail-row {
  justify-content: center !important;
}


.detail-sidebar-col .avail-loc-callno {
  flex: 0 1 auto !important;
  max-width: 100% !important;
}

/* Topics in the fullscreen hero intentionally reuse the standard homepage
   card treatment. The placement changes, but the visual language does not. */
.rasamala-hero-topics {
  width: min(100%, 1120px);
  margin: clamp(14px, 2.5vh, 26px) auto 0;
  text-align: center;
}

/* The hero uses the same Vue collection/member components as the homepage,
   but keeps their heading and spacing compact enough for a full-screen search. */
.rasamala-hero-inline-section {
  width: min(100%, 1160px);
  margin: clamp(12px, 2.2vh, 24px) auto 0;
  text-align: center;
}

.rasamala-hero-inline-title {
  margin: 0 0 10px;
  color: var(--theme-text);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rasamala-hero-inline-title i {
  color: var(--theme-accent-color);
  margin-right: 0.3rem;
}

.rasamala-hero-inline-section slims-group-subject {
  display: block;
  margin-bottom: 0.35rem;
}

.rasamala-hero-inline-section slims-collection,
.rasamala-hero-inline-section slims-group-member {
  display: block;
  width: 100%;
}

.rasamala-hero-inline-section .collection,
.rasamala-hero-inline-section .rasamala-group-member {
  margin-top: 0.65rem !important;
}

.rasamala-hero-topics[hidden],
#rasamala-home-topic-section[hidden] {
  display: none !important;
}

.rasamala-hero-topics .topic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.rasamala-hero-topics .topic li {
  width: 150px !important;
  height: 150px !important;
  margin: 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 18%, transparent) !important;
  border-radius: 18px !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--rasamala-shadow-md) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.rasamala-hero-topics .topic li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 16px 12px !important;
  color: var(--theme-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.rasamala-hero-topics .topic li span {
  margin-top: auto !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.rasamala-hero-topics .topic .topic-icon-fa,
.rasamala-hero-topics .topic .topic-icon-img {
  flex: 0 0 auto;
  margin-bottom: 14px !important;
}

.rasamala-hero-topics .topic .topic-icon-fa {
  display: flex !important;
  width: 88px !important;
  height: 88px !important;
  align-items: center;
  justify-content: center;
  color: var(--theme-accent) !important;
  font-size: 54px !important;
}

.rasamala-hero-topics .topic .topic-icon-img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
}

@media (max-width: 575.98px) {
  .rasamala-hero-topics {
    margin-top: 12px;
  }

  .rasamala-hero-topics .topic {
    gap: 0;
  }

  .rasamala-hero-topics .topic li {
    width: calc(50% - 16px) !important;
    height: 120px !important;
    margin: 8px !important;
    border-radius: 12px !important;
  }

  .rasamala-hero-topics .topic li a {
    padding: 12px 8px !important;
  }

  .rasamala-hero-topics .topic .topic-icon-fa {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 8px !important;
    font-size: 26px !important;
  }

  .rasamala-hero-topics .topic .topic-icon-img {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 8px !important;
  }

  .rasamala-hero-topics .topic li span {
    font-size: 11px !important;
  }
}

/* Theme Viewer: progressive disclosure keeps the preview compact and easy to scan. */
.palette-switcher-intro {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--theme-primary) 10%, var(--theme-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 20%, transparent) !important;
  color: var(--theme-text) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.palette-switcher-intro a {
  color: var(--theme-primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  transition: opacity 0.15s ease !important;
}

.palette-switcher-intro a:hover,
.palette-switcher-intro a:focus {
  opacity: 0.8 !important;
}

.palette-switcher-group {
  margin: 0 0 8px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 20%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--theme-surface) 82%, var(--theme-background) 18%) !important;
  overflow: hidden !important;
}

.palette-switcher-group > summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  color: var(--theme-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}

.palette-switcher-group > summary::-webkit-details-marker { display: none !important; }
.palette-switcher-group > summary > i {
  margin-left: auto !important;
  color: var(--theme-muted) !important;
  font-size: 10px !important;
  transition: transform 0.18s ease !important;
}
.palette-switcher-group[open] > summary > i { transform: rotate(90deg) !important; }
.palette-switcher-group-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--theme-accent) 16%, transparent) !important;
  color: var(--theme-accent) !important;
  font-size: 10px !important;
}
.palette-switcher-group-body {
  padding: 0 10px 10px !important;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted) 12%, transparent) !important;
}
.palette-switcher-field-wide { grid-column: 1 / -1 !important; }
.palette-switcher-panel input.palette-switcher-select { line-height: 1.35 !important; }
.palette-switcher-sticky-header {
  position: sticky !important;
  top: -16px !important;
  z-index: 10 !important;
  margin: -16px -16px 12px -16px !important;
  padding: 12px 16px 10px 16px !important;
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-background) 4%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-muted) 20%, transparent) !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}
.palette-switcher-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.palette-switcher-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  border-top: none !important;
}
.palette-switcher-header-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 170px !important;
  min-width: 130px !important;
  max-width: 240px !important;
  margin-left: 2px !important;
}
.palette-switcher-header-search > i {
  position: absolute !important;
  left: 9px !important;
  z-index: 1 !important;
  color: var(--theme-muted) !important;
  font-size: 10px !important;
  pointer-events: none !important;
}
.palette-switcher-header-search-input {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 9px 4px 27px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 24%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--theme-background) 62%, transparent) !important;
  color: var(--theme-on-surface) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.palette-switcher-header-search-input::placeholder { color: var(--theme-muted) !important; opacity: .9 !important; }
.palette-switcher-header-search-input:focus {
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 16%, transparent) !important;
  outline: none !important;
}
/* Dynamic Theme Viewer search filtering. Keep conditionally unavailable
   controls hidden even while a broad search is running. */
.palette-switcher-field[data-theme-search-hidden],
.palette-switcher-builder[data-theme-search-hidden],
.palette-switcher-section-tools[data-theme-search-hidden],
.palette-switcher-advanced-block[data-theme-search-hidden],
.palette-switcher-custom[data-theme-search-hidden],
.palette-switcher-image-options[data-theme-search-hidden] {
  display: none !important;
}
.palette-switcher-save-wrap {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-top: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.palette-switcher-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
  transition: all 0.18s ease !important;
}
.palette-switcher-save-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-accent) 35%, transparent) !important;
}
.palette-switcher-save-status {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--theme-muted) !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.palette-switcher-tinfo-intro {
  margin: 0 0 10px !important;
}
.palette-switcher-builder {
  margin: 0 0 12px !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 16%, transparent) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--theme-background) 42%, transparent) !important;
}
.palette-switcher-builder:last-child { margin-bottom: 0 !important; }
.palette-switcher-builder-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.palette-switcher-builder-title {
  margin: 0 !important;
  color: var(--theme-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.palette-switcher-builder-add {
  flex: 0 0 auto !important;
  min-width: 30px !important;
  min-height: 30px !important;
}
.palette-switcher-builder-rows {
  display: grid !important;
  gap: 7px !important;
}
.palette-switcher-builder-columns-head {
  display: grid !important;
  grid-template-columns: minmax(90px, 1fr) minmax(110px, 1.4fr) 48px auto !important;
  gap: 6px !important;
  margin: 0 0 4px !important;
  color: var(--theme-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.palette-switcher-builder-columns-head span:last-child { visibility: hidden !important; }
.palette-switcher-builder-row {
  display: grid !important;
  grid-template-columns: minmax(90px, 1fr) minmax(110px, 1.4fr) 48px auto !important;
  gap: 6px !important;
  align-items: center !important;
}
.palette-switcher-builder-row .palette-switcher-select { min-width: 0 !important; }
.palette-switcher-builder-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
}
.palette-switcher-builder-action {
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}
.palette-switcher-language-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
  gap: 6px !important;
}
.palette-switcher-language-option {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 18%, transparent) !important;
  border-radius: 6px !important;
  color: var(--theme-text) !important;
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.palette-switcher-language-option input { margin: 0 !important; flex: 0 0 auto !important; }
.palette-switcher-language-option .flag-icon { flex: 0 0 auto !important; }
.palette-switcher-language-option-code { margin-left: 0 !important; opacity: 0.9 !important; font-size: 11px !important; font-weight: 600 !important; }
.palette-switcher-language-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--theme-accent) 62%, transparent) !important;
  background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface)) !important;
}
.palette-switcher-builder-row.is-invalid input,
.palette-switcher-builder-row.is-invalid select {
  border-color: #dc3545 !important;
}
.palette-switcher-builder-remove {
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
}
@media (max-width: 575.98px) {
  .palette-switcher-builder-columns-head { display: none !important; }
  .palette-switcher-builder-row {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }
  .palette-switcher-builder-row input,
  .palette-switcher-builder-row select { grid-column: 1 !important; }
  .palette-switcher-builder-row .palette-switcher-builder-remove {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
  }
}
.palette-switcher-tinfo-search {
  margin-bottom: 10px !important;
}
.palette-switcher-tinfo-list {
  display: grid !important;
  gap: 8px !important;
}
.palette-switcher-tinfo-category {
  border: 1px solid color-mix(in srgb, var(--theme-muted) 16%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--theme-background) 42%, transparent) !important;
  overflow: hidden !important;
}
.palette-switcher-tinfo-category > summary {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 9px !important;
  color: var(--theme-text) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  list-style: none !important;
}
.palette-switcher-tinfo-category > summary::-webkit-details-marker { display: none !important; }
.palette-switcher-tinfo-category > summary > i {
  margin-left: auto !important;
  color: var(--theme-muted) !important;
  font-size: 9px !important;
  transition: transform 0.18s ease !important;
}
.palette-switcher-tinfo-category[open] > summary > i { transform: rotate(90deg) !important; }
.palette-switcher-tinfo-category-body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-top: 1px solid color-mix(in srgb, var(--theme-muted) 12%, transparent) !important;
}
.palette-switcher-tinfo-field {
  min-width: 0 !important;
}
.palette-switcher-tinfo-field:has(textarea) {
  grid-column: 1 / -1 !important;
}

/* Section 5 is a single, shallow workspace: custom background and advanced
   TInfo controls remain visible without another nested accordion. */
.palette-switcher-advanced-block {
  margin: 0 0 10px !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-muted) 16%, transparent) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--theme-background) 35%, transparent) !important;
}
.palette-switcher-advanced-block:last-child { margin-bottom: 0 !important; }
.palette-switcher-advanced-block-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.palette-switcher-advanced-block .palette-switcher-builder-title {
  margin: 0 !important;
  font-size: 12px !important;
}
.palette-switcher-advanced-block .palette-switcher-help {
  font-size: 10px !important;
  line-height: 1.35 !important;
}
.palette-switcher-background-custom[hidden] { display: none !important; }
#theme-background-open-settings[hidden] { display: none !important; }
.palette-switcher-tinfo-textarea {
  min-height: 66px !important;
  resize: vertical !important;
}
@media (max-width: 575.98px) {
  .palette-switcher-header { flex-wrap: wrap !important; }
  .palette-switcher-header-search {
    order: 3 !important;
    flex: 1 0 100% !important;
    max-width: none !important;
    margin: 2px 0 0 !important;
  }
  .palette-switcher-tinfo-category-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .palette-switcher-tinfo-field:has(textarea) { grid-column: auto !important; }
}
@media (max-width: 575.98px) {
  .palette-switcher-panel {
    width: min(calc(100vw - 20px), 440px) !important;
    right: 10px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 88px) !important;
  }
  .palette-switcher-group-body { padding-left: 9px !important; padding-right: 9px !important; }
}

/* Reference-driven theme-colored backgrounds from assets/images/backgrounds/new. */
body.rasamala-background-style-image-bg-theme-aurora-ribbons .rasamala-theme-aurora-ribbons-layer,
body.rasamala-background-style-image-bg-theme-memphis .rasamala-theme-memphis-layer,
body.rasamala-background-style-image-bg-theme-cubes .rasamala-theme-cubes-layer,
body.rasamala-background-style-image-bg-theme-terrazzo .rasamala-theme-terrazzo-layer {
  display: block !important;
}

.rasamala-theme-aurora-bg-1 { stop-color: color-mix(in srgb, var(--theme-primary) 58%, var(--theme-background) 42%); }
.rasamala-theme-aurora-bg-2 { stop-color: color-mix(in srgb, var(--theme-secondary) 32%, var(--theme-background) 68%); }
.rasamala-theme-aurora-bg-3 { stop-color: color-mix(in srgb, var(--theme-accent) 24%, var(--theme-background) 76%); }
.rasamala-theme-aurora-ribbon-1 { fill: color-mix(in srgb, var(--theme-primary) 56%, var(--theme-accent) 44%); opacity: .54 !important; }
.rasamala-theme-aurora-ribbon-2 { fill: color-mix(in srgb, var(--theme-secondary) 52%, var(--theme-accent) 48%); opacity: .44 !important; }
.rasamala-theme-aurora-ribbon-3 { fill: var(--theme-accent) !important; opacity: .24 !important; }
.rasamala-theme-aurora-ribbon-glow path { fill: var(--theme-accent) !important; opacity: .22 !important; }

.rasamala-theme-memphis-base { fill: color-mix(in srgb, var(--theme-background) 94%, var(--theme-surface) 6%); }
.rasamala-memphis-zigzag-1,
.rasamala-memphis-zigzag-2,
.rasamala-memphis-zigzag-3 { fill: none !important; stroke: var(--theme-primary) !important; stroke-width: 5 !important; opacity: .42 !important; }
.rasamala-memphis-zigzag-2 { stroke: var(--theme-accent) !important; opacity: .34 !important; }
.rasamala-memphis-zigzag-3 { stroke: var(--theme-secondary) !important; opacity: .30 !important; }
.rasamala-memphis-ring-1,
.rasamala-memphis-ring-2 { fill: none !important; stroke: var(--theme-accent) !important; stroke-width: 10 !important; opacity: .22 !important; }
.rasamala-memphis-ring-2 { stroke: var(--theme-primary) !important; opacity: .18 !important; }
.rasamala-memphis-dot-1 { fill: var(--theme-secondary) !important; opacity: .50 !important; }
.rasamala-memphis-dot-2 { fill: var(--theme-accent) !important; opacity: .42 !important; }
.rasamala-memphis-triangle-1,
.rasamala-memphis-triangle-2 { fill: var(--theme-primary) !important; opacity: .18 !important; }
.rasamala-memphis-triangle-2 { fill: var(--theme-accent) !important; opacity: .16 !important; }
.rasamala-memphis-cross-1 path,
.rasamala-memphis-cross-2 path { fill: none !important; stroke: var(--theme-secondary) !important; stroke-width: 7 !important; stroke-linecap: round !important; opacity: .34 !important; }
.rasamala-memphis-cross-2 path { stroke: var(--theme-accent) !important; opacity: .28 !important; }
.rasamala-memphis-arc { fill: none !important; stroke: var(--theme-primary) !important; stroke-width: 6 !important; opacity: .24 !important; }

.rasamala-theme-cubes-base { fill: color-mix(in srgb, var(--theme-background) 97%, var(--theme-primary) 3%); }
.rasamala-cube-top-1 { stop-color: color-mix(in srgb, var(--theme-accent) 62%, var(--theme-surface) 38%); }
.rasamala-cube-top-2 { stop-color: var(--theme-accent); }
.rasamala-cube-left-1 { stop-color: color-mix(in srgb, var(--theme-primary) 64%, var(--theme-background) 36%); }
.rasamala-cube-left-2 { stop-color: var(--theme-primary); }
.rasamala-cube-right-1 { stop-color: color-mix(in srgb, var(--theme-secondary) 58%, var(--theme-background) 42%); }
.rasamala-cube-right-2 { stop-color: var(--theme-secondary); }
.rasamala-cube-top,
.rasamala-cube-left,
.rasamala-cube-right,
.rasamala-cube-top-alt,
.rasamala-cube-left-alt,
.rasamala-cube-right-alt { stroke: var(--theme-on-background) !important; stroke-opacity: .16 !important; stroke-width: 1.5 !important; }
.rasamala-cube-top { fill: url(#rasamalaThemeCubeTop) !important; opacity: .48 !important; }
.rasamala-cube-left { fill: url(#rasamalaThemeCubeLeft) !important; opacity: .36 !important; }
.rasamala-cube-right { fill: url(#rasamalaThemeCubeRight) !important; opacity: .30 !important; }
.rasamala-cube-top-alt { fill: color-mix(in srgb, var(--theme-secondary) 56%, var(--theme-accent) 44%) !important; opacity: .48 !important; }
.rasamala-cube-left-alt { fill: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-secondary) 58%) !important; opacity: .36 !important; }
.rasamala-cube-right-alt { fill: color-mix(in srgb, var(--theme-accent) 62%, var(--theme-primary) 38%) !important; opacity: .30 !important; }

.rasamala-terrazzo-pattern-base { fill: color-mix(in srgb, var(--theme-background) 96%, var(--theme-surface) 4%); }
.rasamala-terrazzo-1 { fill: var(--theme-primary) !important; opacity: .22 !important; }
.rasamala-terrazzo-2 { fill: var(--theme-secondary) !important; opacity: .24 !important; }
.rasamala-terrazzo-3 { fill: var(--theme-accent) !important; opacity: .26 !important; }
.rasamala-terrazzo-4 { fill: color-mix(in srgb, var(--theme-primary) 45%, var(--theme-accent) 55%) !important; opacity: .20 !important; }
.rasamala-terrazzo-dot-1 { fill: var(--theme-accent) !important; opacity: .30 !important; }
.rasamala-terrazzo-dot-2 { fill: var(--theme-primary) !important; opacity: .24 !important; }
.rasamala-terrazzo-dot-3 { fill: var(--theme-secondary) !important; opacity: .26 !important; }

html body.rasamala-dark .rasamala-theme-memphis-base,
html body.rasamala-dark .rasamala-theme-cubes-base,
html body.rasamala-dark .rasamala-terrazzo-pattern-base {
  fill: color-mix(in srgb, var(--theme-background) 92%, #000 8%);
}