.recite-num { order: 2; }/* ==========================================================================
   Quran App - style.css
   1. Variables   2. Base   3. Header   4. Layout & Panels   5. Forms
   6. Buttons     7. Surah list & Ayah display   8. Memorization
   9. Audio player   10. Responsive   11. Accessibility
   ========================================================================== */

/* ---------- 1. Variables ---------- */
@font-face {
  font-family: "Amiri Quran";
  src: url("assets/fonts/AmiriQuran-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  /* الألوان الأساسية */
  --green-900: #0b3326;
  --green-800: #0f4a37;
  --emerald:   #1b7f5c;
  --emerald-600: #16694c;
  --emerald-100: #dcefe6;

  --gold:      #c9a24b;
  --gold-light:#e2c275;
  --gold-soft: #f1e3bd;

  --cream:     #fbf6e9;
  --beige:     #f3ead4;
  --beige-deep:#e6d9b8;
  --white:     #fffdf7;

  --text:        #1d2b25;
  --text-muted:  #5d6b63;
  --border:      #e3d6b4;

  /* الخطوط */
  --font-ui: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arial", sans-serif;
  --font-quran: "Amiri Quran", "Amiri", "KFGQPC Uthmanic Script HAFS", "Traditional Arabic", "Scheherazade New", serif;

  /* الأشكال */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(11, 51, 38, 0.10);
  --shadow-md: 0 6px 18px rgba(11, 51, 38, 0.10);
  --shadow-up: 0 -6px 20px rgba(11, 51, 38, 0.18);

  /* المسافات */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* ارتفاع مشغل الصوت (يُستخدم لترك مساحة أسفل الصفحة) */
  --player-h: 92px;
  --tap-size: 46px;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(201, 162, 75, 0.14) 1px, transparent 0);
  background-size: 22px 22px;
  /* مساحة تمنع تغطية المحتوى بواسطة المشغل الثابت */
  padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + var(--space-4));
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.4;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

/* ---------- 3. Header ---------- */
.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  background:
    linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 55%, var(--emerald-600) 100%);
  color: var(--gold-soft);
  text-align: center;
  border-bottom: 3px solid var(--gold);
  box-shadow: var(--shadow-md);
}

/* خط ذهبي رفيع داخلي للزخرفة */
.app-header::after {
  content: "";
  position: absolute;
  inset: 6px 10px auto 10px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(226, 194, 117, 0.6), transparent);
  pointer-events: none;
}

.app-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-soft);
}

/* أيقونة المصحف (SVG مدمج يعمل بدون إنترنت) */
.app-title::before {
  content: "";
  width: 42px;
  height: 42px;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23E2C275' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 12c-4-3-10-4-16-3v27c6-1 12 0 16 3 4-3 10-4 16-3V9c-6-1-12 0-16 3z'/%3E%3Cpath d='M24 12v27'/%3E%3Cpath d='M13 17c3 0 6 .5 8 1.5M13 24c3 0 6 .5 8 1.5M35 17c-3 0-6 .5-8 1.5M35 24c-3 0-6 .5-8 1.5'/%3E%3C/svg%3E");
}

/* ---------- 4. Layout & Panels ---------- */
.app-main {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}
.panel {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.panel-title {
  position: relative;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-800);
}

/* خط ذهبي قصير تحت العنوان */
.panel-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
}

/* ---------- 5. Forms ---------- */
.selection-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
}

.memorization-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.field-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-800);
}

.field-control {
  width: 100%;
  min-height: var(--tap-size);
  padding: 0.5rem 0.9rem;
  background-color: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.field-control:hover {
  border-color: var(--gold);
}

.field-control:focus {
  outline: none;
  border-color: var(--emerald);
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(27, 127, 92, 0.18);
}

select.field-control {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.4rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: left 0.8rem center;
  background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231B7F5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-size);
  padding: 0.5rem 1.3rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--emerald);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--emerald-600);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--green-800);
  border-color: var(--gold);
}

.btn-secondary:hover {
  background-color: var(--gold-soft);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* أزرار المشغل الدائرية */
.btn-icon {
  width: var(--tap-size);
  height: var(--tap-size);
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--gold-soft);
  border-color: rgba(226, 194, 117, 0.5);
  font-size: 0.85rem;
  line-height: 1;
}

.btn-icon:hover {
  background-color: rgba(226, 194, 117, 0.22);
  border-color: var(--gold-light);
}

.btn-play {
  width: 58px;
  height: 58px;
  background-color: var(--emerald);
  color: var(--white);
  border: 2px solid var(--gold);
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-play:hover {
  background-color: #209870;
  border-color: var(--gold-light);
}

/* ---------- 7. Surah list & Ayah display ---------- */
.surah-list-container {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}
.surah-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-1);
}

.surah-list:empty::before {
  content: "ستظهر قائمة السور هنا";
  grid-column: 1 / -1;
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
}

.surah-list li,
.surah-item {
  padding: 0.55rem 0.9rem;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.surah-list li:hover,
.surah-item:hover {
  background-color: var(--emerald-100);
  border-color: var(--emerald);
}

.surah-list li.is-active,
.surah-item.is-active {
  background-color: var(--emerald);
  border-color: var(--gold);
  color: var(--white);
}

.ayah-display {
  min-height: 160px;
  padding: var(--space-4);
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.current-surah-name {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  text-align: center;
  font-family: var(--font-quran);
  font-size: 1.6rem;
  color: var(--green-800);
  border-bottom: 1px solid var(--gold);
}

.current-surah-name:empty {
  display: none;
}

.ayah-list {
  font-family: var(--font-quran);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 2.4;
  text-align: justify;
  color: var(--text);
}

.ayah-list:empty::before {
  content: "اختر سورة لعرض آياتها";
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* آية واحدة (class جاهز للاستخدام من JavaScript) */
.ayah {
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ayah:hover {
  background-color: var(--gold-soft);
}

.ayah.is-active,
.ayah.is-playing {
  background-color: var(--emerald-100);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* ---------- 8. Memorization ---------- */
.memorization-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.memorization-status {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background-color: var(--emerald-100);
  border-inline-start: 4px solid var(--emerald);
  border-radius: var(--radius-sm);
  color: var(--green-800);
}

.memorization-status:empty {
  display: none;
}

/* ---------- 9. Audio player ---------- */
.audio-player {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr auto;
  grid-template-areas: "info progress controls";
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(135deg, var(--green-900), var(--green-800));
  color: var(--gold-soft);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-up);
}

.player-info {
  grid-area: info;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.95rem;
}

.player-label {
  color: rgba(241, 227, 189, 0.75);
}

.reciter-name {
  font-weight: 700;
  color: var(--gold-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-progress {
  grid-area: progress;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.time {
  flex: none;
  min-width: 3ch;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: rgba(241, 227, 189, 0.85);
}

.player-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* شريط التقدم
   يمكن لاحقًا تحديث التعبئة من JavaScript عبر:
   progressBar.style.setProperty('--progress', '40%') */
.progress-bar {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(to left,
              var(--gold) var(--progress, 0%),
              rgba(255, 255, 255, 0.22) var(--progress, 0%));
}

.progress-bar::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}

.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--emerald);
  border: 3px solid var(--gold-light);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.progress-bar::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}

.progress-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--emerald);
  border: 3px solid var(--gold-light);
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 820px) {
  .selection-form {
    grid-template-columns: 1fr 1fr;
  }

  .selection-form .field:first-child,
  .selection-form .btn {
    grid-column: 1 / -1;
  }

  .memorization-controls {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --player-h: 132px;
  }

  body {
    font-size: 1rem;
  }

  .app-main {
    padding: var(--space-3) var(--space-2);
    gap: var(--space-3);
  }

  .panel {
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .app-title::before {
    width: 34px;
    height: 34px;
  }

  .surah-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .surah-list-container {
    max-height: 220px;
  }

  .ayah-display {
    padding: var(--space-3);
  }

  .ayah-list {
    text-align: right;
    line-height: 2.2;
  }

  .memorization-controls {
    grid-template-columns: 1fr;
  }

  .memorization-actions .btn {
    flex: 1;
  }

  /* المشغل على الموبايل: شريط التقدم في الأعلى ثم القارئ والأزرار */
  .audio-player {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "progress progress"
      "info controls";
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 360px) {
  .surah-list {
    grid-template-columns: 1fr 1fr;
  }

  .btn-icon {
    width: 42px;
    height: 42px;
  }

  .btn-play {
    width: 52px;
    height: 52px;
  }
}

/* ---------- 11. Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.audio-player :focus-visible {
  outline-color: var(--gold-light);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* زر تكرار السورة في المشغل */
.btn-repeat {
  font-size: 1.25rem;
}

.btn-repeat.is-on {
  background-color: var(--emerald);
  color: var(--white);
  border-color: var(--gold-light);
}
.bismillah-line {
  display: block;
  width: 100%;
  margin: 0 auto var(--space-3);
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
  text-align: center;
  text-align-last: center;
  color: var(--green-800);
}

.bismillah-line.is-playing {
  background-color: var(--emerald-100);
  box-shadow: inset 0 -2px 0 var(--gold);
}
.ayah.is-playing {
  background-color: var(--gold-soft);
  box-shadow: inset 0 -3px 0 var(--emerald);
  color: var(--green-900);
}
/* ---------- التسميع ---------- */
:root {
  --danger: #b42318;
  --danger-soft: #fdeceb;
}

.recite-intro {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.recite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.recite-status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--emerald-100);
  border-inline-start: 4px solid var(--emerald);
  border-radius: var(--radius-sm);
  color: var(--green-800);
}

.recite-status:empty {
  display: none;
}

.recite-live {
  min-height: 1.6em;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.recite-board {
  display: grid;
  gap: var(--space-2);
}

.recite-ayah {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 3.4rem;
  padding: var(--space-2) var(--space-3);
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.recite-ayah.is-current {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.recite-num {
  flex: none;
  font-family: var(--font-quran);
  font-size: 1.3rem;
  line-height: 2.2;
  color: var(--green-800);
}

.recite-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-quran);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 2.2;
}

.recite-text:empty::before {
  content: "";
  display: block;
  height: 1.5em;
  border-bottom: 2px dotted var(--border);
}

.recite-ayah.is-unrecited .recite-text::before {
  display: none;
}

.recite-ayah.is-unrecited .recite-text::after {
  content: "لم تُقرأ";
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text-muted);
}

.rw {
  margin-inline-end: 0.35em;
}

.rw-ok {
  color: var(--green-800);
}

.rw-wrong,
.rw-missed,
.rw-extra {
  color: var(--danger);
  font-weight: 700;
}

.rw-extra {
  text-decoration: line-through;
}

.rw-interim {
  opacity: 0.55;
}

.recite-result {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.recite-result[hidden] {
  display: none;
}

.recite-result-title {
  margin-bottom: var(--space-2);
  color: var(--green-800);
}

.recite-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.recite-score-number {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--emerald);
}

.recite-score-grade {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-800);
}

.recite-subtitle {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--green-800);
}

.recite-summary,
.recite-clean {
  margin: 0 0 var(--space-2);
}

.recite-warning {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--danger-soft);
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
}

.recite-issue {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius-sm);
}

.recite-issue-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.recite-issue-list {
  margin: var(--space-1) 0 0;
  padding-inline-start: 1.2rem;
  list-style: disc;
}

.recite-play {
  min-height: 38px;
  padding: 0.25rem 0.9rem;
  font-size: 0.9rem;
}

.recite-advice {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--gold-soft);
  border-radius: var(--radius-sm);
}

.recite-advice p {
  margin: 0 0 var(--space-2);
}

.recite-note {
  margin: var(--space-3) 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* أثناء التسميع: إخفاء نص الآيات ومنع تغيير السورة */
body.recite-active .ayah-display {
  display: none;
}

body.recite-active .surah-list-container {
  pointer-events: none;
  opacity: 0.5;
}
.rw-missed {
  opacity: 0.7;
  text-decoration: underline dotted;
}/* تحسين عرض الآيات في التسميع */
.recite-text,
.recite-text .rw {
  letter-spacing: 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

.rw {
  margin-inline-end: 0;
}

.rw-wrong,
.rw-missed,
.rw-extra {
  font-weight: 400;
  font-synthesis: none;
}

.rw-missed {
  opacity: 0.7;
  text-decoration: underline dotted;
}

.recite-num {
  order: 2;
}