/* =========================================================
   SISTEM SUNYI - LITANI POPUP v2.1.0
   File: /addons/sistem-sunyi/litani/litani-popup.css
   Scope: #ss-litani-popup + .ss-litani-inline
   Notes: lightweight popup, search mode, collapsible details, inline pause block
========================================================= */

/* =========================================================
   01. POPUP ROOT AND TOKENS
========================================================= */

#ss-litani-popup {
  --ssl-card: rgba(255, 250, 241, .96);
  --ssl-card-solid: #fffaf1;
  --ssl-surface: rgba(255, 255, 255, .62);
  --ssl-surface-2: rgba(255, 255, 255, .82);
  --ssl-surface-3: rgba(255, 255, 255, .48);

  --ssl-text: #263244;
  --ssl-strong: #101827;
  --ssl-muted: rgba(38, 50, 68, .72);
  --ssl-soft: rgba(38, 50, 68, .52);
  --ssl-faint: rgba(38, 50, 68, .34);

  --ssl-line: rgba(38, 50, 68, .13);
  --ssl-line-soft: rgba(38, 50, 68, .08);
  --ssl-line-gold: rgba(154, 111, 53, .34);

  --ssl-gold: #9a6f35;
  --ssl-gold-2: #765322;
  --ssl-blue: #416f98;

  --ssl-gold-soft: rgba(154, 111, 53, .11);
  --ssl-blue-soft: rgba(65, 111, 152, .07);

  --ssl-shadow: 0 30px 90px rgba(25, 34, 48, .18);
  --ssl-shadow-soft: 0 16px 42px rgba(25, 34, 48, .10);

  position: fixed !important;
  inset: 0 !important;
  z-index: 900000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  color: var(--ssl-text) !important;
  font-family: Inter, "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  transition: opacity .22s ease-out !important;
  box-sizing: border-box !important;
}

#ss-litani-popup.ss-litani-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#ss-litani-popup.ss-litani-deep {
  --ssl-card: rgba(7, 15, 24, .96);
  --ssl-card-solid: #071018;
  --ssl-surface: rgba(255, 255, 255, .060);
  --ssl-surface-2: rgba(255, 255, 255, .086);
  --ssl-surface-3: rgba(255, 255, 255, .040);

  --ssl-text: rgba(244, 239, 230, .90);
  --ssl-strong: #fff3dc;
  --ssl-muted: rgba(244, 239, 230, .72);
  --ssl-soft: rgba(244, 239, 230, .52);
  --ssl-faint: rgba(244, 239, 230, .36);

  --ssl-line: rgba(255, 255, 255, .115);
  --ssl-line-soft: rgba(255, 255, 255, .075);
  --ssl-line-gold: rgba(202, 167, 102, .34);

  --ssl-gold: #caa766;
  --ssl-gold-2: #e8cc83;
  --ssl-blue: #8fb3cf;

  --ssl-gold-soft: rgba(202, 167, 102, .125);
  --ssl-blue-soft: rgba(143, 179, 207, .095);

  --ssl-shadow: 0 34px 110px rgba(0, 0, 0, .56);
  --ssl-shadow-soft: 0 18px 52px rgba(0, 0, 0, .32);
}

body.ss-litani-lock {
  overflow: hidden !important;
}

#ss-litani-popup,
#ss-litani-popup *,
.ss-litani-inline,
.ss-litani-inline * {
  box-sizing: border-box !important;
  text-shadow: none !important;
}

#ss-litani-popup button,
#ss-litani-popup input {
  font: inherit !important;
}

#ss-litani-popup a,
#ss-litani-popup a:link,
#ss-litani-popup a:visited,
#ss-litani-popup a:hover,
#ss-litani-popup a:active {
  box-shadow: none !important;
}

/* =========================================================
   02. OVERLAY AND CARD
========================================================= */

#ss-litani-popup .ss-litani-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 111, 53, .10), transparent 34%),
    radial-gradient(circle at 16% 14%, rgba(65, 111, 152, .075), transparent 34%),
    radial-gradient(circle at 84% 92%, rgba(154, 111, 53, .060), transparent 38%),
    rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

#ss-litani-popup.ss-litani-deep .ss-litani-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(202, 167, 102, .17), transparent 34%),
    radial-gradient(circle at 16% 14%, rgba(143, 179, 207, .12), transparent 34%),
    radial-gradient(circle at 84% 92%, rgba(202, 167, 102, .10), transparent 38%),
    rgba(3, 7, 12, .90) !important;
  backdrop-filter: blur(20px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.10) !important;
}

#ss-litani-popup .ss-litani-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(780px, calc(100vw - 28px)) !important;
  max-width: 780px !important;
  max-height: min(88vh, calc(100dvh - 28px)) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 18px 20px 20px !important;
  border: 1px solid var(--ssl-line-gold) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 92% 0%, var(--ssl-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ssl-blue-soft), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .50)),
    var(--ssl-card) !important;
  color: var(--ssl-text) !important;
  box-shadow: var(--ssl-shadow) !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .22s ease-out, transform .22s ease-out, box-shadow .22s ease-out !important;
}

#ss-litani-popup.ss-litani-active .ss-litani-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#ss-litani-popup.ss-litani-deep .ss-litani-card {
  background:
    radial-gradient(circle at 92% 0%, var(--ssl-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ssl-blue-soft), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, .070), rgba(255, 255, 255, .024)),
    var(--ssl-card) !important;
  box-shadow: var(--ssl-shadow), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

#ss-litani-popup .ss-litani-card::before {
  content: "" !important;
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--ssl-gold), transparent) !important;
  opacity: .56 !important;
  pointer-events: none !important;
}

/* =========================================================
   03. TOP ACTIONS
========================================================= */

#ss-litani-popup .ss-litani-top-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  min-height: 32px !important;
}

#ss-litani-popup .ss-litani-title {
  margin-right: auto !important;
  color: var(--ssl-gold) !important;
  opacity: 1 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  user-select: none !important;
  white-space: nowrap !important;
}

#ss-litani-popup .ss-litani-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 1px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  background: linear-gradient(90deg, transparent, var(--ssl-gold)) !important;
  opacity: .86 !important;
}

#ss-litani-popup .ss-litani-top-actions button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--ssl-line) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .060), transparent 64%),
    var(--ssl-surface) !important;
  color: var(--ssl-muted) !important;
  min-width: 31px !important;
  min-height: 31px !important;
  width: 31px !important;
  height: 31px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease !important;
}

#ss-litani-popup .ss-litani-top-actions button:hover,
#ss-litani-popup .ss-litani-search-toggle.is-active {
  border-color: var(--ssl-line-gold) !important;
  background:
    radial-gradient(circle at 50% 0%, var(--ssl-gold-soft), transparent 64%),
    var(--ssl-surface-2) !important;
  color: var(--ssl-strong) !important;
  transform: translateY(-1px) !important;
}

#ss-litani-popup .ss-litani-close {
  font-size: 18px !important;
}

/* =========================================================
   04. SEARCH MODE
========================================================= */

#ss-litani-popup .ss-litani-search {
  display: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 4px 2px 0 !important;
}

#ss-litani-popup.ss-litani-search-mode .ss-litani-search {
  display: flex !important;
  flex-direction: column !important;
}

#ss-litani-popup.ss-litani-search-mode .ss-litani-view {
  display: none !important;
}

#ss-litani-popup .ss-litani-search-row {
  position: relative !important;
  flex: 0 0 auto !important;
}

#ss-litani-popup .ss-litani-search-input {
  width: 100% !important;
  min-height: 43px !important;
  padding: 12px 42px 12px 14px !important;
  border: 1px solid var(--ssl-line) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 255, 255, .050), transparent 34%),
    var(--ssl-surface-2) !important;
  color: var(--ssl-strong) !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#ss-litani-popup .ss-litani-search-input::placeholder {
  color: var(--ssl-soft) !important;
}

#ss-litani-popup .ss-litani-search-input:focus {
  border-color: var(--ssl-line-gold) !important;
  box-shadow: 0 0 0 3px rgba(202, 167, 102, .12) !important;
}

#ss-litani-popup .ss-litani-search-clear {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ssl-soft) !important;
  cursor: pointer !important;
}

#ss-litani-popup .ss-litani-search-clear:hover {
  color: var(--ssl-strong) !important;
  background: var(--ssl-gold-soft) !important;
}

#ss-litani-popup .ss-litani-search-hint {
  flex: 0 0 auto !important;
  margin: 9px 2px 0 !important;
  color: var(--ssl-soft) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

#ss-litani-popup .ss-litani-search-results {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 2px 2px !important;
}

#ss-litani-popup .ss-litani-search-empty,
#ss-litani-popup .ss-litani-search-item {
  border: 1px solid var(--ssl-line-soft) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 255, 255, .050), transparent 35%),
    var(--ssl-surface) !important;
  color: var(--ssl-muted) !important;
}

#ss-litani-popup .ss-litani-search-empty {
  padding: 11px 13px !important;
  font-size: 12.5px !important;
}

#ss-litani-popup .ss-litani-search-item {
  padding: 10px 12px 9px !important;
  cursor: pointer !important;
  transition: background .15s ease, border .15s ease, transform .12s ease !important;
}

#ss-litani-popup .ss-litani-search-item:hover {
  border-color: var(--ssl-line-gold) !important;
  background:
    radial-gradient(circle at 94% 0%, var(--ssl-gold-soft), transparent 36%),
    var(--ssl-surface-2) !important;
  transform: translateY(-1px) !important;
}

#ss-litani-popup .ss-litani-search-title {
  margin: 0 0 4px !important;
  color: var(--ssl-strong) !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 19px !important;
  line-height: 1.42 !important;
}

#ss-litani-popup .ss-litani-search-preview {
  color: var(--ssl-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

#ss-litani-popup .ss-litani-search-meta {
  margin-top: 6px !important;
  color: var(--ssl-gold) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* =========================================================
   05. MAIN VIEW AND TOP LITANI
========================================================= */

#ss-litani-popup .ss-litani-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#ss-litani-popup .ss-litani-main {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 46vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
  margin: 2px 0 12px !important;
  padding: 18px 18px 16px !important;
  border: 1px solid var(--ssl-line-soft) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 94% 0%, var(--ssl-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ssl-blue-soft), transparent 38%),
    var(--ssl-surface) !important;
}

#ss-litani-popup.ss-litani-details-open .ss-litani-main {
  max-height: 30vh !important;
}

#ss-litani-popup .ss-litani-main::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, transparent, var(--ssl-gold), transparent) !important;
  opacity: .62 !important;
}

#ss-litani-popup .ss-litani-main-text {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--ssl-strong) !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: clamp(20px, 2.1vw, 25px) !important;
  line-height: 1.58 !important;
  font-weight: 520 !important;
  letter-spacing: -.018em !important;
}

#ss-litani-popup .ss-litani-meta {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: var(--ssl-soft) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

#ss-litani-popup .ss-litani-meta span {
  white-space: nowrap !important;
}

#ss-litani-popup .ss-litani-meta-orbit {
  color: var(--ssl-gold) !important;
}

/* =========================================================
   06. COLLAPSIBLE DETAILS
========================================================= */

#ss-litani-popup .ss-litani-detail-bar {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#ss-litani-popup .ss-litani-detail-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 1px solid var(--ssl-line-gold) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, var(--ssl-gold-soft), transparent 64%),
    var(--ssl-surface) !important;
  color: var(--ssl-gold-2) !important;
  cursor: pointer !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}

#ss-litani-popup.ss-litani-deep .ss-litani-detail-toggle {
  color: var(--ssl-strong) !important;
}

#ss-litani-popup .ss-litani-detail-toggle:hover {
  transform: translateY(-1px) !important;
  background:
    radial-gradient(circle at 50% 0%, var(--ssl-gold-soft), transparent 64%),
    var(--ssl-surface-2) !important;
}

#ss-litani-popup .ss-litani-details {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}

#ss-litani-popup.ss-litani-details-open .ss-litani-details {
  display: flex !important;
}

#ss-litani-popup .ss-litani-tabs {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  gap: 6px !important;
  padding: 5px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--ssl-line-soft) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .060), transparent 64%),
    var(--ssl-surface) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

#ss-litani-popup .ss-litani-tabs::-webkit-scrollbar {
  display: none !important;
}

#ss-litani-popup .ss-litani-tab-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ssl-muted) !important;
  padding: 8px 13px !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  box-shadow: none !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease !important;
}

#ss-litani-popup .ss-litani-tab-btn:hover {
  color: var(--ssl-strong) !important;
  background: var(--ssl-gold-soft) !important;
}

#ss-litani-popup .ss-litani-tab-btn.is-active {
  color: #17110a !important;
  border-color: rgba(255, 255, 255, .24) !important;
  background: linear-gradient(135deg, #d4b36c, #f0d998) !important;
  box-shadow: 0 12px 28px rgba(154, 111, 53, .14) !important;
}

#ss-litani-popup .ss-litani-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: auto;
}

#ss-litani-popup .ss-litani-tab {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 15px 15px 13px !important;
  border: 1px solid var(--ssl-line-soft) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 255, 255, .050), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .42)),
    var(--ssl-surface-3) !important;
  color: var(--ssl-muted) !important;
}

#ss-litani-popup.ss-litani-deep .ss-litani-tab {
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 255, 255, .050), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .020)),
    var(--ssl-surface-3) !important;
}

#ss-litani-popup .ss-litani-tab.is-active {
  display: block !important;
}

/* =========================================================
   07. TAB CONTENT TYPOGRAPHY
========================================================= */

#ss-litani-popup h4 {
  margin: 12px 0 6px !important;
  padding: 0 !important;
  color: var(--ssl-gold) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

#ss-litani-popup h4:first-child {
  margin-top: 0 !important;
}

#ss-litani-popup .ss-litani-meaning,
#ss-litani-popup .ss-litani-relevant,
#ss-litani-popup .ss-litani-reading-loading,
#ss-litani-popup .ss-litani-reading-empty {
  margin: 0 0 8px !important;
  color: var(--ssl-muted) !important;
  font-size: 13.2px !important;
  line-height: 1.66 !important;
}

#ss-litani-popup .ss-litani-function,
#ss-litani-popup .ss-litani-reading-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 4px !important;
}

#ss-litani-popup .ss-litani-function li,
#ss-litani-popup .ss-litani-reading-list li {
  position: relative !important;
  margin: 0 0 8px !important;
  padding: 10px 11px 10px 25px !important;
  border: 1px solid var(--ssl-line-soft) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 94% 0%, var(--ssl-gold-soft), transparent 34%),
    var(--ssl-surface) !important;
  color: var(--ssl-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#ss-litani-popup .ss-litani-function li::before,
#ss-litani-popup .ss-litani-reading-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 17px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: var(--ssl-gold) !important;
  opacity: .72 !important;
}

#ss-litani-popup .ss-litani-reading-title {
  display: block !important;
  color: var(--ssl-strong) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.48 !important;
  text-decoration: none !important;
}

#ss-litani-popup .ss-litani-reading-title:hover {
  color: var(--ssl-gold-2) !important;
}

#ss-litani-popup .ss-litani-reading-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

#ss-litani-popup .ss-litani-reading-actions a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--ssl-line-gold) !important;
  border-radius: 999px !important;
  background: var(--ssl-gold-soft) !important;
  color: var(--ssl-gold-2) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

#ss-litani-popup.ss-litani-deep .ss-litani-reading-actions a {
  color: var(--ssl-strong) !important;
}

/* =========================================================
   08. SCROLLBAR
========================================================= */

#ss-litani-popup .ss-litani-main::-webkit-scrollbar,
#ss-litani-popup .ss-litani-tab::-webkit-scrollbar,
#ss-litani-popup .ss-litani-search-results::-webkit-scrollbar {
  width: 7px !important;
}

#ss-litani-popup .ss-litani-main::-webkit-scrollbar-thumb,
#ss-litani-popup .ss-litani-tab::-webkit-scrollbar-thumb,
#ss-litani-popup .ss-litani-search-results::-webkit-scrollbar-thumb {
  background: rgba(154, 111, 53, .34) !important;
  border-radius: 999px !important;
}

#ss-litani-popup.ss-litani-deep .ss-litani-main::-webkit-scrollbar-thumb,
#ss-litani-popup.ss-litani-deep .ss-litani-tab::-webkit-scrollbar-thumb,
#ss-litani-popup.ss-litani-deep .ss-litani-search-results::-webkit-scrollbar-thumb {
  background: rgba(202, 167, 102, .40) !important;
}

#ss-litani-popup .ss-litani-main,
#ss-litani-popup .ss-litani-tab,
#ss-litani-popup .ss-litani-search-results {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(154, 111, 53, .40) transparent !important;
}

/* =========================================================
   09. SHORTCODE BUTTONS
========================================================= */

.ss-litani-trigger-box,
.ss-litani-trigger-box-inline {
  text-align: center !important;
  margin: 28px 0 !important;
}

.ss-litani-trigger-btn {
  border: 1px solid rgba(154, 111, 53, .24) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .25), transparent 62%),
    linear-gradient(135deg, #101827, #263244) !important;
  color: #fffaf1 !important;
  padding: 9px 18px !important;
  margin: 0 4px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  box-shadow: 0 14px 34px rgba(25, 34, 48, .14) !important;
}

.ss-litani-trigger-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 42px rgba(25, 34, 48, .18) !important;
}

/* =========================================================
   10. INLINE PAUSE BLOCK
========================================================= */

.ss-litani-inline {
  display: block !important;
  width: 100% !important;
  margin: 26px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.ss-litani-inline-card,
.ss-litani-inline-fallback {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  border: 1px solid rgba(154, 111, 53, .25) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(154, 111, 53, .10), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(65, 111, 152, .06), transparent 38%),
    rgba(255, 250, 241, .72) !important;
  padding: 15px 17px 14px 18px !important;
  color: #263244 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 34px rgba(25, 34, 48, .075) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.ss-litani-inline-card::before,
.ss-litani-inline-fallback::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, transparent, #9a6f35, transparent) !important;
  opacity: .70 !important;
}

.ss-litani-inline-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(154, 111, 53, .42) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(154, 111, 53, .13), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(65, 111, 152, .08), transparent 38%),
    rgba(255, 250, 241, .88) !important;
  box-shadow: 0 18px 40px rgba(25, 34, 48, .10) !important;
}

.ss-litani-inline-kicker {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 7px !important;
  color: #9a6f35 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.ss-litani-inline-kicker:hover {
  color: #765322 !important;
  text-decoration: none !important;
}

.ss-litani-inline-quote,
.ss-litani-inline-text,
.ss-litani-inline-fallback {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 20px !important;
  line-height: 1.52 !important;
  font-weight: 520 !important;
  color: #101827 !important;
}

.ss-litani-inline-action {
  margin-top: 9px !important;
  color: rgba(38, 50, 68, .58) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

/* =========================================================
   11. RESPONSIVE
========================================================= */

@media (max-width: 640px) {
  #ss-litani-popup {
    padding: 10px !important;
    align-items: center !important;
  }

  #ss-litani-popup .ss-litani-card {
    width: min(100%, calc(100vw - 20px)) !important;
    max-height: min(90vh, calc(100dvh - 20px)) !important;
    padding: 15px 15px 16px !important;
    border-radius: 24px !important;
  }

  #ss-litani-popup .ss-litani-title {
    font-size: 9.8px !important;
    letter-spacing: .13em !important;
  }

  #ss-litani-popup .ss-litani-title::before {
    width: 17px !important;
    margin-right: 8px !important;
  }

  #ss-litani-popup .ss-litani-main {
    max-height: 47vh !important;
    margin-bottom: 11px !important;
    padding: 15px 15px 14px !important;
    border-radius: 20px !important;
  }

  #ss-litani-popup.ss-litani-details-open .ss-litani-main {
    max-height: 27vh !important;
  }

  #ss-litani-popup .ss-litani-main-text {
    font-size: 19px !important;
    line-height: 1.54 !important;
  }

  #ss-litani-popup .ss-litani-detail-toggle {
    width: 100% !important;
    min-height: 35px !important;
    font-size: 10.8px !important;
  }

  #ss-litani-popup .ss-litani-details {
    margin-top: 10px !important;
  }

  #ss-litani-popup .ss-litani-tabs {
    border-radius: 18px !important;
    padding: 5px !important;
  }

  #ss-litani-popup .ss-litani-tab {
    border-radius: 18px !important;
    padding: 12px !important;
  }

  #ss-litani-popup .ss-litani-search-preview,
  #ss-litani-popup .ss-litani-search-meta {
    display: none !important;
  }

  .ss-litani-inline {
    margin: 22px 0 !important;
  }

  .ss-litani-inline-card,
  .ss-litani-inline-fallback {
    border-radius: 18px !important;
    padding: 14px 15px 13px 16px !important;
  }

  .ss-litani-inline-quote,
  .ss-litani-inline-text,
  .ss-litani-inline-fallback {
    font-size: 18.5px !important;
    line-height: 1.50 !important;
  }
}

/* =========================================================
   12. FOCUS
========================================================= */

#ss-litani-popup button:focus-visible,
#ss-litani-popup a:focus-visible,
#ss-litani-popup input:focus-visible,
.ss-litani-trigger-btn:focus-visible,
.ss-litani-inline-card:focus-visible,
.ss-litani-inline-kicker:focus-visible {
  outline: 2px solid var(--ssl-gold, #9a6f35) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(202, 167, 102, .16) !important;
}