/* apps/quran/static/quran/css/quran.css */

.stf__wrapper {
  gap: 0 !important;
}

.stf__block {
  margin: 0 !important;
  padding: 0 !important;
}

.stf__shadow {
  display: none !important;
}

.st-page-flip .stf__block {
  box-shadow: none !important;
}

.st-page-flip {
  position: relative;
}

.st-page-flip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #e5e7eb;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}

.st-page-flip.is-portrait::after {
  display: none;
}

/* ===== CORE LAYOUT (CONFIG DRIVEN) ===== */

#mushafFlipContainer {
  width: 100%;
  overflow: hidden;
}

#mushafZoomWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

#mushafFlipBook {
  width: 100%;
  max-width: var(--mushaf-max-width);
  margin-inline: auto;
}

#mushafFlipBook .page {
  background: #fff;
}

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

@media (max-width: 1024px) {
  #mushafArea {
    padding-inline: 0.5rem;
  }

  #mushafFlipBook {
    border-radius: 1.25rem;
  }
}

@media (max-width: 640px) {
  #mushafArea {
    padding-inline: 0.25rem;
  }

  #mushafFlipBook {
    border-radius: 0.9rem;
  }

  #mushafFlipBook .page-content > div {
    padding: 0.5rem !important;
  }
}

/* ===== FULLSCREEN (CONFIG DRIVEN) ===== */

#mushafArea.mushaf-fullscreen {
  background: #000;
  padding: 0 !important;
  margin: 0 !important;
  width: calc(var(--mushaf-fullscreen-width-vw) * 1vw);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#mushafArea.mushaf-fullscreen .st-page-flip {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#mushafArea.mushaf-fullscreen #mushafFlipContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#mushafArea.mushaf-fullscreen #mushafZoomWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

#mushafArea.mushaf-fullscreen #mushafFlipBook {
  margin: 0 auto !important;
  max-width: calc(var(--mushaf-fullscreen-max-width-vw) * 1vw);
}

#mushafArea.mushaf-fullscreen #quranTopToolbar {
  display: none !important;
}

#mushafArea.mushaf-fullscreen #mushafFullscreenBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

#mushafArea.mushaf-fullscreen .tools-panel {
  display: none !important;
}

/* ===== PAGE CONTENT ===== */

.page-content {
  position: relative;
}

/* ===== AYAH LAYER ===== */

.ayah-layer {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.ayah-box {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  transform: scaleY(0.7);
  transform-origin: center;
}

.ayah-box:hover {
  background: transparent;
}

.ayah-polygon {
  fill: transparent;
  transition: fill 0.25s ease, filter 0.25s ease;
  pointer-events: none;
}

.ayah-polygon.ayah-hover {
  fill: transparent !important;
}

.ayah-polygon.ayah-active {
  fill: rgba(255, 235, 59, 0.14) !important;
  filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.45));
}

/* ===== HOVER ===== */

.ayah-hover-unified-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.ayah-hover-piece {
  position: absolute;
  pointer-events: none;
  background: rgba(110, 110, 110, 0.15);
  filter: drop-shadow(0 0 6px rgba(110, 110, 110, 0.35));
}

/* ===== READING MODE ===== */

#mushafArea.reading-mode {
  background: #ffffff !important;
}

#mushafArea.reading-mode #mushafFlipBook {
  max-width: var(--mushaf-max-width) !important;
}

#mushafArea.reading-mode #mushafFlipContainer {
  margin-top: 0 !important;
}

#mushafArea.reading-mode .ayah-layer {
  pointer-events: none !important;
}

#mushafArea.reading-mode .ayah-box {
  cursor: default !important;
}

#mushafArea.reading-mode .ayah-polygon,
#mushafArea.reading-mode .ayah-polygon.ayah-hover,
#mushafArea.reading-mode .ayah-polygon.ayah-active {
  fill: transparent !important;
  transition: none !important;
}

#mushafArea.reading-mode .ayah-hover-unified-layer,
#mushafArea.reading-mode .ayah-hover-piece {
  display: none !important;
}

#mushafArea.reading-mode #ayahMenu {
  display: none !important;
}

/* ===== SAVED ===== */

.ayah-saved {
  background-color: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 6px;
}

.ayah-polygon.ayah-saved {
  fill: rgba(220, 38, 38, 0.22) !important;
}

.ayah-polygon.ayah-saved:hover {
  fill: rgba(220, 38, 38, 0.28) !important;
}

/* ===== BOOKMARK ===== */

#ayahBookmarkIcon {
  transition: color 0.2s ease, transform 0.2s ease;
}

#ayahBookmarkIcon.is-saved {
  color: #b91c1c !important;
}

/* ===== RESUME ===== */

.resume-ayah-target {
  outline: 0.2px solid rgba(16, 185, 129, 0.6);
  outline-offset: -1px;
  border-radius: 6px;
  animation: resumeAyahPulse 2s ease;
}

.resume-ayah-target path,
.resume-ayah-target polygon,
.resume-ayah-target rect,
.resume-ayah-target polyline {
  stroke-width: 2 !important;
  fill: rgba(16, 185, 129, 0.18) !important;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.55));
}

@keyframes resumeAyahPulse {
  0% {
    opacity: 0.2;
    transform: scale(0.995);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}