/* ===========================
   Quran Clean CSS (Merged)
   Sultan — Final Version
   =========================== */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 400;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v26/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Sultan Script */
@font-face {
  font-family: 'sultan_script';
  src: url('https://www.sult4n.com/quran/fonts/sultan.woff2') format('woff2');
      font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Surah Name Ejazah */
@font-face {
  font-family: 'Surah Name - Ejazah style';
  src: url('https://www.sult4n.com/quran/fonts/ayaat/SurahNameEjazahstyle-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---------- Base ---------- */
body {
  font-family: 'El Messiri';
  background: #cccccc;
  color: #030726;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 20px;
  font-family: 'El Messiri';
  text-align: center;
  color: darkgreen;
}

/* ---------- Surah Grid (Index) ---------- */
ul.suar {
  list-style: none;
  max-width: 900px;
  margin: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

ul.suar li {
  background-color: #f4f4f4;
  border-radius: .475rem;
  border: 1px solid #dee2e6;
  padding: 10px;
  box-shadow: 0 10px 15px rgba(0,0,0,.1);
  text-align: center;
  font-family: 'Surah Name - Ejazah style';
}

ul.suar li a {
  text-decoration: none;
  color: #000800 !important;
  font-size: 40px;
  font-family: 'Surah Name - Ejazah style';
}

ul.sura li:hover a { color: #1bff1b !important; }

/* ---------- Ayah Styles ---------- */
.ayah {
  display: inline;
  font-family: 'sultan_script';
  color: #005800;
}

.ayah:hover {
  background-color: rgba(255,255,0,0.4);
}

.ayah-number {
  color: #7a0000;
}

.ayah-count,
.ayah-word,
.ayah-word2 {
  font-family: 'Aref Ruqaa';
  font-size: 1rem;
  text-align: center;
}
.ayah-count {
    color: #7a0000;
}
.ayah-word {
    color: #4d4d4d !important;
}
/* ---------- Surah Page ---------- */
.sora {
  font-family: 'sultan_script';
  font-size: 40px;
  color: #005800;
  line-height: 1.5;
}

.safha {;
  font-family: 'f5ri_script';
  display: flex;
  justify-content: center;
  margin: 5px 10px;
  text-align: justify;
}

.hh {
  font-family: 'Surah Name - Ejazah style';
  font-size: 40px;
}

/* ---------- Buttons ---------- */
.button {
  background-color: #f4f4f4;
  border: 1px solid #dee2e6;
  color: #030726;
  width: 125px;
  padding: .5rem;
  font-family: 'Surah Name - Ejazah style';
  font-size: 45px;
}

.button:hover { color: green !important; }

/* ---------- Responsive ---------- */
@media (max-width: 639px) {
  .ayah { font-size: 30px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .ayah { font-size: 45px; }
}

@media (min-width: 1024px) {
  .ayah { font-size: 55px; }
}

/* ---------- Dark Mode ---------- */
.dark-mode {
  background-color: #111 !important;
  color: #fff !important;
}

.dark-mode .ayah { color: #e6ffe6 !important; }
.dark-mode h3 { color: #fff !important; }
.dark-mode .ayah-word, .dark-mode .hh, .dark-mode .ayah-word { color: #FFF !important; }

.dark-mode ul.suar li {
  background: #222 !important;
  border-color: #444 !important;
}

.dark-mode ul.suar li:hover {
  background: #333 !important;
}
.dark-mode ul.suar li a {
  color: #FFF !important;
}

/* 📱 الجوال */
@media (max-width: 600px) {
    .quran-search-wrapper {
        flex-direction: column;
    }

    .quran-search-wrapper button {
        width: 100%;
        border-radius: 0;
    }
}
    .content2 img {
        margin: 0 auto;
        display: block;
    }