/* ──────────────────────────────────────────────────────────────────────────
   Design tokens — aligned with Arabian-Singer Desktop (dark navy + orange)
   Source: Desktop app src/index.css / tailwind.config.ts
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces (near-black navy-blue-gray) */
  --as-bg: hsl(222 20% 8%);          /* deepest background */
  --as-card: hsl(222 20% 11%);       /* panel & container surfaces */
  --as-item: hsl(220 16% 13%);       /* list item background */
  --as-muted: hsl(220 15% 16%);      /* chips, inactive, subtle bg */
  --as-surface: hsl(220 15% 21%);    /* raised / hover surfaces, inputs */
  --as-dropdown: hsl(222 22% 9%);    /* search dropdown — a touch darker */

  /* Text */
  --as-fg: hsl(210 20% 92%);         /* primary near-white text */
  --as-muted-fg: hsl(215 15% 55%);   /* secondary text, labels, metadata */

  /* Borders */
  --as-border: hsl(220 15% 18%);     /* barely-visible separators */

  /* Accent (orange) + live (red) */
  --as-accent: hsl(25 95% 55%);
  --as-accent-hover: hsl(25 95% 62%);
  --as-accent-90: hsl(25 95% 55% / 0.9);   /* primary button hover */
  --as-accent-tint: hsl(25 95% 55% / 0.2); /* active tab / nav icon bg */
  --as-accent-tint-hover: hsl(25 95% 55% / 0.3);
  --as-accent-soft: hsl(25 95% 55% / 0.3);
  --as-accent-fg: #ffffff;
  --as-live: hsl(0 80% 50%);

  /* Ghost / overlay surfaces (desktop component system) */
  --as-ghost-hover: hsl(220 15% 16% / 0.6);  /* hover:bg-muted/60 */
  --as-knob: #ffffff;                         /* switch knob */
  --as-track-off: hsl(215 15% 55% / 0.3);     /* switch off track */

  /* Simple-mode search field (desktop SimpleView) */
  --as-input-bg: hsl(220 15% 16% / 0.3);      /* bg-muted/30 — quiet, dim field */
  --as-input-focus-bg: hsl(222 20% 8%);       /* focus-within:bg-background */
  --as-placeholder: hsl(215 15% 55% / 0.5);   /* softer placeholder */

  /* Radii */
  --as-radius-sm: 10px;
  --as-radius: 14px;                 /* base (buttons, inputs, chips) */
  --as-radius-lg: 18px;              /* cards / panels */
  --as-radius-xl: 22px;              /* big containers */
  --as-radius-pill: 9999px;

  text-align: -webkit-center;
  background-color: var(--as-bg);
}

[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Tooltip content */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--as-card);
  color: var(--as-fg);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  font-family: "Tajawal", sans-serif;
}

/* Show on hover/focus */
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-2] {
  position: relative;
  cursor: pointer;
}

/* Tooltip content */
[data-tooltip-2]::after {
  content: attr(data-tooltip-2);
  position: absolute;
  top: -65%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--as-card);
  color: var(--as-fg);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  font-family: "Tajawal", sans-serif;
}

/* Show on hover/focus */
[data-tooltip-2]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.save-btn {
  margin-top: 5px;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: #eee;
  font-size: 0.8em;
  cursor: pointer;
  color: #333;
  transition: background 0.2s;
}

.save-btn:hover {
  background: var(--as-accent);
  color: white;
}

.save-btn:hover .star-icon {
  stroke: white;
  /* works if the SVG paths use stroke */
}

/* ── Verse / slide card — desktop SlideCard.tsx ──────────────────────────
   Flush rows, hairline divider, right-border accent (RTL) on selected,
   small index badge, dimmed non-selected text.
   ────────────────────────────────────────────────────────────────────────── */
.verse-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;        /* align badge to first text line */
  justify-content: flex-end;
  border-radius: 0;
  transition: background 0.15s ease;
  text-align: right;
  direction: rtl;
  padding: 12px 14px;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid hsl(220 15% 18% / 0.6);
  border-right: 2px solid transparent;   /* accent rail (RTL) */
  font-family: "Tajawal", sans-serif;
  flex-wrap: nowrap;
}

/* Index / chorus badge — desktop: w-5 h-5 rounded, 10px bold */
.verse-prefix {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  /* inactive verse badge: bg-muted, muted-fg */
  background: var(--as-muted);
  color: var(--as-muted-fg);
}

/* Chorus (ق) badge — soft orange tint */
.verse-box.chorus .verse-prefix {
  background: hsl(25 95% 55% / 0.15);
  color: hsl(25 95% 62% / 0.7);
}

.verse-box:hover {
  background: hsl(220 15% 16% / 0.4);    /* hover:bg-muted/40 */
}

/* Selected verse — accent rail + tint + active badge */
.verse-box.selected {
  background: hsl(25 95% 55% / 0.1);     /* bg-primary/10 */
  border-right-color: var(--as-accent);
}
.verse-box.selected .verse-prefix {
  background: var(--as-accent);
  color: var(--as-accent-fg);
}
.verse-box.selected.chorus .verse-prefix {
  background: hsl(25 95% 55% / 0.3);
  color: hsl(25 95% 62%);
}

.verse-content {
  flex: 1;
  line-height: 1.8;
  word-break: break-word;
  text-align: right;
  /* non-selected verses are dimmed (desktop: text-muted-foreground) */
  color: var(--as-muted-fg);
  transition: color 0.15s ease;
}
.verse-box.selected .verse-content {
  color: var(--as-fg);
}

#dropdown li.no-results {
  text-align: center;
  color: hsl(215 15% 55% / 0.6);
  background-color: transparent;
  border: 0;
  padding: 32px 10px;
  font-size: 14px;
  cursor: default;
  pointer-events: none;
}

/* ── Result type badges — desktop UnifiedSearch soft tinted pills ──────────
   Pattern: bg-{color}/10 + text-{color} + border-{color}/25, small & pill.
   ────────────────────────────────────────────────────────────────────────── */
.result-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-top: -2px;
  margin-inline-start: 8px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.result-tag--song {
  color: hsl(25 95% 62%);
  background-color: hsl(25 95% 55% / 0.1);
  border-color: hsl(25 95% 55% / 0.25);
}
.result-tag--bible {
  color: hsl(213 94% 68%);
  background-color: hsl(213 94% 60% / 0.1);
  border-color: hsl(213 94% 60% / 0.25);
}
.result-tag--melody {
  color: hsl(258 90% 76%);
  background-color: hsl(258 90% 66% / 0.1);
  border-color: hsl(258 90% 66% / 0.25);
}
.result-tag--mass {
  color: hsl(38 92% 60%);
  background-color: hsl(38 92% 50% / 0.1);
  border-color: hsl(38 92% 50% / 0.25);
}

.tagtab {
  border-radius: var(--as-radius);   /* match buttons */
  background-color: var(--as-muted);
  color: var(--as-fg);
  border: 1px solid var(--as-border);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Tajawal", sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tagtab:hover {
  background-color: var(--as-surface);
  transform: scale(1.05);
}

.tagtab:active {
  transform: scale(0.95);
  background-color: var(--as-surface);
}

.inner-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--as-radius);   /* match buttons */
  background-color: var(--as-muted);
  color: var(--as-fg);
  border: 1px solid var(--as-border);
  margin: 6px 3px 0px 3px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Tajawal", sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.inner-tag:hover {
  background-color: var(--as-surface);
  transform: scale(1.05);
}

.inner-tag:active {
  transform: scale(0.95);
  background-color: var(--as-surface);
}

.main-container {
  text-align: -webkit-right;
  /* Desktop SimpleView main box: bg-card + subtle thin outline (rounded-2xl) */
  background-color: var(--as-card);
  border: 1px solid var(--as-border);
  padding: 14px;
  border-radius: var(--as-radius-xl);
  justify-items: right;
}

#fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--as-fg);
  font-size: 2em;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  color: #ffffff;
  font-size: 2em;
  font-family: "Tajawal", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 5000;
}

body {
  max-width: 800px;
  font-family: "Tajawal", sans-serif;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  background-color: var(--as-bg);
  color: var(--as-fg);
  transition: background-color 0.25s ease, color 0.25s ease;
}

#logo {
  z-index: 0;
  /* top gap restores the old breathing room (old img sat at the box bottom) */
  margin: 15vh auto -30px auto;
  height: 24vh;
  max-width: 100%;
  padding-bottom: 10px;
  /* Horizontal RTL lockup: mark on the right, text block on the left */
  direction: rtl;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  overflow: visible;
}

.brand-logo .brand-mark {
  margin-top: -20px;
  height: 88%;
  width: auto;
  max-height: 120;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

.brand-logo .brand-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  /* Match the mark's height so title + subtitle together fill it */
  height: 88%;
  max-height: 165px;
  user-select: none;
  -webkit-user-select: none;
}

.brand-logo .brand-title {
  margin: 0;
  font-family: "Tajawal", sans-serif;
  /* large so the two lines together match the SVG height */
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.brand-logo .brand-subtitle {
  margin: 6px 0 0 0;
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  /* "One Body Team" — LTR, uppercase, justified to span the FULL title width */
  direction: ltr;
  font-size: clamp(0.7rem, 2.4vw, 1.15rem);
  text-align: justify;
  text-align-last: justify;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  user-select: none;
  -webkit-user-select: none;
}

.hide-logo {
  animation: hideLogo 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.show-logo {
  animation: showLogo 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes hideLogo {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
    height: 24vh;
    margin-top: 15vh;
  }

  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.5);
    height: 25px;
    margin-top: 70px;
  }
}

@keyframes showLogo {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.5);
    height: 0px;
    margin-top: 70px;
  }

  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
    height: 24vh;
    margin-top: 15vh;
  }
}

.search-container {
  position: relative;
  align-items: center;
  width: 100%;
  /* Solid muted fill + thin outline; ring on focus */
  background-color: var(--as-muted);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  margin-bottom: -4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.search-container:focus-within {
  background-color: var(--as-muted);
  border-color: var(--as-accent);
  box-shadow: 0 0 0 2px var(--as-accent-tint);
}

.search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  color: var(--as-muted-fg);
  pointer-events: none;
}

.clear-search-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 26px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--as-muted-fg);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.clear-search-btn:hover {
  background-color: var(--as-muted);
  color: var(--as-fg);
}

.clear-search-btn.hidden {
  display: none;
}

/* Filter bar — desktop UnifiedSearch: sticky top, hairline divider, tiny pills */
#dropdown li.search-filters {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 14px;
  margin: 0;
  background-color: var(--as-dropdown);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--as-border);
  border-right: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

#dropdown li.search-filters:hover {
  background-color: var(--as-dropdown);
}

.filter-tab {
  background-color: var(--as-muted);
  color: var(--as-muted-fg);
  border: 1px solid var(--as-border);
  border-radius: 9999px;
  padding: 8px 16px;
  font-family: "Tajawal", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filter-tab:hover {
  background-color: var(--as-surface);
  border-color: var(--as-border);
  color: var(--as-fg);
}

.filter-tab.active {
  /* Active filter: orange tint + primary border + primary text */
  background-color: var(--as-accent-tint);
  border-color: var(--as-accent);
  color: var(--as-accent);
  font-weight: 700;
}

#searchBox {
  font-family: "Tajawal", sans-serif;
  inline-size: -webkit-fill-available;
  line-height: 1.5;
  padding: 10px 52px 10px 40px;
  font-size: 16px;
  height: 24px;
  border-radius: var(--as-radius);
  /* Transparent so the dim container bg shows through (desktop: bg-transparent) */
  background-color: transparent;
  border: 0px solid var(--as-border);
  color: var(--as-fg);
  text-align: right;
  direction: rtl;
  outline: none;
}

#searchBox::placeholder {
  color: var(--as-placeholder);
}

#dropdown {
  list-style: none;
  margin: 0;
  position: absolute;
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  z-index: 1000;
  text-align: right;
  /* Darker dropdown fill + 1px outline, rounded, deep shadow */
  background: var(--as-dropdown);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius-lg);
  margin-top: 8px;
  padding: 0;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.55);
}

/* Result row — flush, separated by a hairline; right-border accent (RTL) */
#dropdown li {
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  background: transparent;
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid hsl(220 15% 18% / 0.5);
  border-right: 2px solid transparent;
}

#dropdown li:last-child {
  border-bottom: 0;
}

#dropdown li:hover {
  /* slightly brighter than the muted base on hover */
  background: var(--as-surface);
}

#dropdown li.active {
  background: hsl(25 95% 55% / 0.12);
  border-right-color: var(--as-accent);
}

#dropdown li .title {
  font-weight: 600;          /* desktop t-item-title scaled up for web */
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--as-fg);
}

#dropdown li.active .title {
  color: var(--as-accent);
}

#dropdown li .line {
  font-size: 14px;           /* desktop t-item-sub scaled up for web */
  font-weight: 400;
  margin-top: 4px;
  color: hsl(215 15% 55% / 0.75);
}

#dropdown::-webkit-scrollbar {
  width: 14px;
}

#dropdown::-webkit-scrollbar-thumb {
  background-color: var(--as-surface);
  border-radius: 10px;
  border-width: 4px;
  border-style: solid;
  border-color: var(--as-bg);
  border-image: initial;
}

#dropdown::-webkit-scrollbar-track {
  margin-top: 10px;
  margin-bottom: 10px;
  background: transparent;
}

mark {
  /* Desktop highlight: bg-yellow-400/30 text-yellow-300, rounded */
  background: hsl(48 96% 53% / 0.3);
  color: hsl(48 96% 76%);
  border-radius: 3px;
  padding: 0 1px;
}

#songContainer {
  margin-top: 20px;
  display: inline-block;
  inline-size: -webkit-fill-available;
  text-align: right;
  /* Subtle thin outline (all sides) to match desktop card boxes */
  border: 1px solid var(--as-border);
  background: var(--as-card);
  /* bottom padding gives scroll breathing room (was a thick card-colored border) */
  padding: 0px 1px 12px 15px;
  border-radius: var(--as-radius-xl);
  color: var(--as-fg);
  max-height: calc(100vh - 350px);

  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 0.9em;
  font-weight: bold;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 1;
  transform: scale(1);
  min-width: -moz-available;

}

/* When the settings panel is open, let it own the scroll (single, darker scrollbar).
   height:auto so the container hugs the panel; max-height matches the normal
   song-verses container so it never grows taller than the songs view. */
/* Settings open over a song: #songContainer is the SINGLE scroll context so the
   song-header and the settings-tabs share one sticky context (tabs stay visible,
   sticking right under the header). The inner panel must NOT scroll on its own. */
#songContainer.settings-open {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  max-height: calc(100vh - 350px);
  /* keep symmetric side padding so the settings header/tabs don't touch edges */
  padding: 0 16px 12px 16px;
}

#songContainer.settings-open #settingsPanel {
  max-height: none;
  overflow: visible;
}

/* Stack the settings-tabs directly below the sticky song-header */
#songContainer.settings-open .settings-tabs {
  top: 70px;
  z-index: 15;
  padding-top: 6px;
  margin-bottom: 12px;
}

/* Chrome, Edge, Safari */
#songContainer::-webkit-scrollbar {
  width: 14px;
}

#songContainer::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 30px;
  margin-bottom: 30px;
}

#songContainer::-webkit-scrollbar-thumb {
  background-color: var(--as-surface);
  border-radius: 10px;
  border: 4px solid var(--as-card);
}

.hidden {
  opacity: 0 !important;
  transform: scale(1.1) !important;
  pointer-events: none !important;
  /* collapse layout so a closed (long) song doesn't leave the page scrollable */
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
}

.full-hidden {
  opacity: 0 !important;
  transform: scale(1.1) !important;
  pointer-events: none !important;
  display: none !important;
}

.song-header {
  flex-direction: row-reverse;
  justify-content: space-between;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: var(--as-card);
  /* optional: prevent content underlapping */
  z-index: 20;
  /* optional: ensure it stays on top */
}

#closeBtn {
  background-color: transparent;
  color: var(--as-fg);
  border: none;
  cursor: pointer;
  width: fit-content;
  margin-left: 5px;
  transition: all 0.3s ease;
  padding: 0;
}

#closeBtn:hover {
  transform: scale(1.1);
}

#closeBtn:active {
  transform: scale(0.9);
}

/* Close (×) / Back (chevron) — icon-only ghost circle button */
.closebtn-circle {
  height: 34px;
  width: 34px;
  border-radius: var(--as-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--as-muted);
  color: var(--as-muted-fg);
  transition: background 0.15s ease, color 0.15s ease;
}

#closeBtn:hover .closebtn-circle {
  background: var(--as-surface);
  color: var(--as-fg);
}

/* Back variant — accent tinted (RTL chevron) */
.closebtn-circle.closebtn-back {
  background: var(--as-accent-tint);
  color: var(--as-accent);
}
#closeBtn:hover .closebtn-circle.closebtn-back {
  background: var(--as-accent-tint-hover);
  color: var(--as-accent);
}

#fullscreen-content {
  align-items: center;
  justify-content: center;

  direction: rtl;

  width: 100%;
}

.save-btn {
  background: none;
  padding: 0px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background-color: var(--as-surface);
}

.save-btn .star-icon {
  width: 16px;
  height: 16;
  stroke: rgb(160, 161, 165);
  fill: none;
  transition: fill 0.2s ease;
}

.save-btn.active {
  background-color: var(--as-accent);
}

.save-btn.active .star-icon {
  fill: white;
  stroke: white;
}

.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--as-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: var(--as-fg);
  font-size: 16px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.app-loading.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

.app-loading.hidden {
  display: none;
}

/* ── Animated logo loader ─────────────────────────────────────────────────
   The whole mark breathes; the concentric "rings" rotate at staggered speeds
   (like a spinning record) and softly shimmer in opacity. No JS / Lottie.
   ────────────────────────────────────────────────────────────────────────── */
.loader-logo {
  margin-bottom: 22px;
  animation: loaderBreathe 2.4s ease-in-out infinite;
  transform-origin: center;
  overflow: visible;
}

.loader-ring {
  transform-origin: 96px 110px;   /* rough geometric centre of the rings */
}
.loader-ring-1 { animation: loaderSpin 3.2s linear infinite; }
.loader-ring-2 { animation: loaderSpin 4.6s linear infinite reverse, loaderShimmer 2s ease-in-out infinite; }
.loader-ring-3 { animation: loaderSpin 5.8s linear infinite, loaderShimmer 2.4s ease-in-out infinite 0.3s; }

/* the music note in the middle gives a tiny pulse */
.loader-note {
  transform-origin: center;
  animation: loaderPulse 2.4s ease-in-out infinite;
}

@keyframes loaderBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}
@keyframes loaderShimmer {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}
@keyframes loaderPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

.loading-text {
  margin-top: 10px;
  color: var(--as-muted-fg);
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  animation: loaderTextFade 1.8s ease-in-out infinite;
}
@keyframes loaderTextFade {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

#songheader-controls {
  min-width: fit-content;
}

#songPlayer {
  max-width: 450px !important;
  width: 100%;
  max-width: 600px;
  min-width: 300px;
  border-radius: 10px;
  background-color: #d4d3cc;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  filter: invert(1);
}

/* 🎚 شريط التحكم */
#songPlayer::-webkit-media-controls-panel {
  background-color: #bdbcb4;
}

/* ▶️ زرار التشغيل */
#songPlayer::-webkit-media-controls-play-button {
  background-color: #bdbcb4;
  border-radius: 50%;
}

/* 🔊 أيقونة الصوت */
#songPlayer::-webkit-media-controls-mute-button {
  background-color: #b1b0a7;
  border-radius: 50%;
}

/* ⏱ شريط التقدم */
#songPlayer::-webkit-media-controls-timeline {
  background-color: #bdbcb4;
  border-radius: 5px;
}

/* 🔊 شريط الصوت */
#songPlayer::-webkit-media-controls-volume-slider {
  background-color: #b1b0a7;
  border-radius: 5px;
}

/* ⏱ الوقت */
#songPlayer::-webkit-media-controls-current-time-display,
#songPlayer::-webkit-media-controls-time-remaining-display {
  color: white;
  filter: invert(1);
}

.masses-controls {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  /* مسافة بين كل زرار */
  flex-wrap: wrap;
  /* لو الشاشة ضيقة يتكسر للسطر التالي */
  align-items: center;
  background-color: var(--as-card);
  padding: 8px 0px;
  border-radius: 12px;
}

.masses-controls label {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  background-color: var(--as-muted);
  color: var(--as-fg);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-family: "Tajawal", sans-serif;
  user-select: none;
  transition: all 0.3s ease;
}

/* Hover effect */
.masses-controls label:hover {
  background-color: var(--as-muted);
}

.masses-controls input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--as-muted-fg);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  /* default empty */
  transition: all 0.2s;
}

/* Checked state */
.masses-controls input[type="checkbox"]:checked {
  background-color: var(--as-accent);
  border-color: var(--as-accent);
}

/* Optional: add check mark */
.masses-controls input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 10px;
}

/* Font controls — desktop SimpleView: rounded-lg bordered square, bg-card */
.font-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--as-card);
  border-radius: var(--as-radius);   /* match buttons */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border: 1px solid var(--as-border);
  color: var(--as-muted-fg);
  padding: 10px;
}

.font-btn:hover {
  background-color: var(--as-muted);
  border-color: var(--as-border);
  color: var(--as-fg);
}

.font-btn svg {
  pointer-events: none;
}

/* Icons inherit the button's currentColor (muted → foreground on hover) */
.font-btn svg path {
  fill: currentColor;
}

#left-controls {
  display: flex;
  flex-direction: row;
  width: fit-content;
  min-width: fit-content;
  gap: 5px;
  align-items: center;
}

/* Hide PWA standalone mode title bar icons */
@media (display-mode: standalone) {

  /* Hide the entire title bar area */
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* If there's a specific container for these icons */
  .pwa-title-bar,
  .standalone-header,
  .app-header {
    display: none !important;
  }
}

.row {
  display: flex;
  gap: 1rem;
  /* مسافة بين الاتنين */
  margin-bottom: 0.75rem;
}

.row label {
  flex: 1;
  /* كل label ياخد نص العرض */
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 5px;
  font-weight: normal;
}

.row input,
.row select {
  margin-top: 0.25rem;
}

label.number-drag {
  cursor: default;
  user-select: none;
}

label.number-drag:hover {
  cursor: ew-resize;
  /* horizontal arrows */
}

#songVerses {
  direction: rtl;
  border-top: 1px solid var(--as-surface);
}