/* Ziyarat Ashura Sync Player — Theme-Aware Style Sheet */
:root {
  --zas-bg: rgba(253, 250, 241, 0.88); /* matching --card */
  --zas-border: var(--line); /* matching --line */
  --zas-text: var(--ink); /* matching --ink */
  --zas-muted: var(--muted); /* matching --muted */
  --zas-active-bg: rgba(201, 162, 39, 0.08); /* soft gold tint */
  --zas-active-border: var(--gold-500); /* matching --gold-500 */
}

.zas-wrap {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 12px 110px; /* extra bottom space for sticky player */
}

.zas-header {
  text-align: center;
  margin: 6px 0 20px;
}

.zas-title-ar {
  font-family: var(--arabic), Arial, Tahoma, serif !important;
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--emerald-900);
}

.zas-subtitle {
  font-family: var(--body);
  font-size: 14px;
  opacity: 0.85;
  color: var(--muted);
}

.zas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zas-seg {
  border: 1px solid var(--zas-border);
  border-radius: var(--radius, 14px);
  padding: 18px 20px;
  background: var(--card);
  width: 100%;
  text-align: center;
  display: block;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(10,40,30,0.02);
}

.zas-seg:hover {
  border-color: var(--line-gold);
  background: var(--ivory-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,40,30,0.04);
}

.zas-seg.is-active {
  background: var(--zas-active-bg);
  border-color: var(--zas-active-border);
  box-shadow: 0 10px 26px rgba(10,40,30,0.08);
}

.zas-ar {
  font-family: var(--arabic), Arial, Tahoma, serif !important;
  direction: rtl;
  text-align: center;
  font-size: 30px !important;
  line-height: 1.5 !important;
  margin: 0 0 6px;
  padding-bottom: 8px;
  color: var(--emerald-900);
}

.zas-translit {
  font-family: var(--serif), Georgia, serif;
  font-style: italic;
  opacity: 0.95;
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--gold-700);
}

.zas-en {
  font-family: var(--body), system-ui, sans-serif;
  margin: 0;
  opacity: 0.9;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.5;
}

.zas-playerbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
}

.zas-playercard {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1.5px solid var(--gold-400);
  background: var(--zas-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px -10px rgba(10,40,30,0.3);
}

.zas-playercard audio {
  width: 100%;
  height: 42px;
  outline: none;
}

.zas-playerhint {
  max-width: 920px;
  margin: 8px auto 0;
  font-family: var(--body);
  font-size: 13px;
  color: var(--emerald-900);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(253, 250, 241, 0.8);
}

@media (max-width: 520px) {
  .zas-ar { font-size: 26px !important; }
  .zas-playercard { border-radius: 18px; padding: 8px; }
  .zas-playercard audio { height: 40px; }
  .zas-playerhint { font-size: 11px; }
}

/* Hide floating contact buttons on the player page */
.floats {
  display: none !important;
}