body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", tahoma, verdana, sans-serif;
    font-size: 14px;
    margin-top: 0px !important;
}

p{margin: 0;}

a{color: #000; text-decoration: none;}

.SpaceAdjust{height: 70px;}

/* A tapped word: highlighted while its meaning popup is open. */
a.selected {
  background-color: var(--maroon) !important;
  color: #fff;
  z-index: 100;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

/* One aya row. */
.qtexts {
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  padding: 10px 4px;
  line-height: 44px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}

.qtexts:last-of-type { border-bottom: none; }
.qtexts:hover { background: #fafbfe; }

/* A single Quran word inside an aya. */
.contact {
  font-size: 26px;
  font-family: my_quran, "Traditional Arabic", Arial;
  line-height: 50px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .12s ease, color .12s ease;
}

.contact:hover { background: #e8ecf8; }

/* Per-aya toolbar: play / full-translation / aya number.
   LTR island inside the RTL aya row, kept on one line. */
.aya-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  vertical-align: middle;
  margin: 0 6px;
}

.aya-tools .aya-ref {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}

.FullMeaning { cursor: pointer; display: inline-flex; }
.FullMeaning img, .Play { display: block; }

/*.Play{border: 1px solid #ccc;border-radius: 3px; padding: 3px 8px 3px 8px; font-size: 13px; cursor: pointer;}*/
.Play{border: 1px solid var(--line);border-radius: 4px; cursor: pointer; padding: 2px;}
.Play:hover{border-color: var(--navy-light); background: #f2f4fb;}
img.selected{border: 1px solid green;color: #000;}

/* Full-translation panel under an aya. */
.MeaningBox {
  display: none;
  text-align: left;
  direction: ltr;
  color: #333;
  font-size: 15px;
  line-height: 24px;
  margin: 6px 0 4px;
  padding: 10px 12px;
  background: #f7f8fc;
  border-left: 3px solid var(--navy-light);
  border-radius: var(--radius-sm);
}


#ShowData img{margin-top: 13px;}

.radius2{border-radius: var(--radius-sm); border: 1px solid var(--line);}

/* Prev / next aya buttons. */
.next, .prev {
  border: 1px solid var(--line);
  padding: 0 14px;
  height: 40px;
  cursor: pointer;
  font-weight: 700;
  background: var(--surface);
  color: var(--navy);
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.next:hover:not(.disable), .prev:hover:not(.disable) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.disable {
  border: 1px solid var(--line) !important;
  color: #b9bdcc !important;
  background: #f4f5f9 !important;
  cursor: default !important;
  opacity: .75;
}

/* Highlighted search term inside an aya */
.hit{color: #d12b2b; font-weight: bold;}


/* Word-meaning popup. Positioned by js/script.js. */
.messagepop {
  background-color: var(--surface);
  cursor: default;
  display: none;
  position: absolute;
  text-align: left;
  z-index: 50;
  font-size: 18px;
  max-width: 200px;
  min-width: 110px;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border: 2px solid var(--maroon);
  box-shadow: var(--shadow-md);
  line-height: 22px;
  word-wrap: break-word;
  overflow: hidden;
}

.messagepop .close {
  float: right;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  text-align: center;
  /* Fixed box: the old rule grew the font on hover, which resized the
     header and made the popup jump. */
  width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0;
  border-radius: 4px;
  transition: background .15s ease;
}

.messagepop .close:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.messagepop .found { float: left; font-size: 15px; line-height: 24px; }
.messagepop .found a { color: #fff; }
.messagepop .found a:hover { color: #ffd76a !important; }
.messagepop .pop-head {
  background-color: var(--maroon);
  padding: 4px 6px;
}

.messagepop .pop-body {
  padding: 10px;
  color: var(--ink);
}

.clear{clear: both;}






/* =====================================================================
   Design tokens
   ===================================================================== */
:root {
  --site-max:   1020px;
  --gutter:     16px;

  --navy:       #19286C;
  --navy-dark:  #101B4C;
  --navy-light: #2C3E8F;
  --maroon:     #8B1D3F;

  --ink:        #1c1c1e;
  --ink-soft:   #5b6070;
  --line:       #e3e6ef;
  --surface:    #ffffff;
  --canvas:     #eef1f7;

  --radius:     10px;
  --radius-sm:  6px;

  --shadow-sm:  0 1px 2px rgba(16, 27, 76, .06);
  --shadow-md:  0 4px 14px rgba(16, 27, 76, .10);
  --shadow-lg:  0 10px 30px rgba(16, 27, 76, .18);

  --bar-h:      60px;
}

body {
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Arabic display fonts. The files were shipped in js/fonts/ but no
   @font-face ever declared them, so "font-family:my_quran" silently fell
   back to the default sans. */
@font-face {
  font-family: 'my_quran';
  src: url('fonts/my_quran.woff') format('woff'),
       url('fonts/my_quran.ttf')  format('truetype'),
       url('fonts/my_quran.svg#my_quran') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* "hafs" has no font file in the repo: alias it to the one we do have so
   the ayas render in the same face instead of an arbitrary fallback. */
@font-face {
  font-family: 'hafs';
  src: url('fonts/my_quran.woff') format('woff'),
       url('fonts/my_quran.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.quiz-wrapper {
  position: relative;
  display: block;
  max-width: var(--site-max);
  /* NOT "margin:auto": body is a flex column, so auto vertical margins
     would absorb the free space and centre the page vertically. */
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter);
}

/* =====================================================================
   Fixed top bar.
   The <header> is a transparent full-width rail; the visible blue card is
   .bar-inner, capped at --site-max so it lines up with the content below.
   ===================================================================== */
.question-description {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
  padding: 0 var(--gutter);
  color: #fff;
}

.question-description .bar-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  width: 100%;
  min-height: var(--bar-h);
  padding: 8px 14px;

  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);

  display: flex;
  align-items: center;
  gap: 12px;
}

/* Centred title. The 48px padding balances the burger so the text is
   optically centred rather than pushed to the right. */
.question-description .site-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding-right: 48px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.3;
}


/* ---------------------------------------------------------------------
   dl-menu overrides.
   component.css sets ".dl-menuwrapper { position:fixed; top:10px;
   float:left; width:100%; max-width:300px }" which rips the burger out of
   the bar and pins it to the viewport. Put it back into the flex flow.
   component.css is loaded BEFORE this file, so equal specificity is enough.
   --------------------------------------------------------------------- */
.question-description .dl-menuwrapper {
  position: relative;
  top: auto;
  left: auto;
  float: none;
  flex: 0 0 44px;
  width: 44px;
  max-width: none;
  margin: 0;
}

/* Beats ".dl-menuwrapper:first-child { margin-right:100px }" (0,2,0). */
.question-description .dl-menuwrapper:first-child {
  margin-right: 0;
}

/* Burger button: translucent so it reads as part of the bar. */
.question-description .dl-menuwrapper button,
.demo-3 .dl-menuwrapper button {
  display: block;
  width: 44px;
  height: 40px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  transition: background .18s ease;
}

.question-description .dl-menuwrapper button:hover,
.question-description .dl-menuwrapper button.dl-active,
.demo-3 .dl-menuwrapper button:hover,
.demo-3 .dl-menuwrapper button.dl-active {
  background: rgba(255, 255, 255, .24);
}

/* The three bars are drawn by component.css in navy; on a navy bar they
   have to be white. */
.question-description .dl-menuwrapper button:after {
  width: 20px;
  height: 2px;
  left: 12px;
  top: 13px;
  background: #fff;
  box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}

/* The trigger is 44px wide, but the drop-down needs to be readable. */
.question-description .dl-menuwrapper .dl-menu,
.demo-3 .dl-menuwrapper ul {
  width: 250px;
  left: 0;
  margin-top: 8px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 6px;
}

.question-description .dl-menuwrapper li {
  border-bottom: none;
}

.question-description .dl-menuwrapper li a {
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}

.question-description .dl-menuwrapper li a:hover {
  background: var(--canvas);
  color: var(--navy-dark);
}

/* Offset for the fixed bar, applied once instead of per-page margins. */
main {
  padding-top: calc(var(--bar-h) + 24px);
}


/* =====================================================================
   Content card
   ===================================================================== */
.quiz-wrapper .answers {
  font-size: 16px;
  line-height: 23px;
  direction: rtl;
  margin: 0 0 24px;

  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

/* The word list is LTR-agnostic; kill the default bullets/indent. */
.quiz-wrapper .answers ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quiz-wrapper .answers li {
  display: inline-block;
  text-align: center;
  margin-bottom: 8px;
}

/* Repeated-word chips on the home page. */
.quiz-wrapper .answers .target {
  display: inline-block;
  min-width: 92px;
  background: #f7f8fc;
  margin: 0 4px 6px 0;
  padding: 6px 12px;
  text-align: center;

  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 22px;
  font-family: hafs, "Traditional Arabic", Arial;
  color: var(--navy);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.quiz-wrapper .answers a:hover .target {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}

.quiz-wrapper .answers a:hover .target span {
  color: rgba(255, 255, 255, .75) !important;
}

/* =====================================================================
   Search box
   ===================================================================== */
.SearchBox {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.SearchBox #txtSearch {
  flex: 0 1 340px;
  font-size: 16px;
  font-weight: bold;
  padding: 0 14px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.SearchBox #txtSearch:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(44, 62, 143, .14);
}

.SearchBox #btnSearch {
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}

.SearchBox #btnSearch:hover { background: var(--navy-dark); }

/* =====================================================================
   Sura / aya navigator
   ===================================================================== */
.aya-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  direction: ltr;
}

.aya-nav select {
  height: 40px;
  font-size: 15px;
  font-weight: 600;
  padding: 0 10px;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
}

.aya-nav select:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(44, 62, 143, .14);
}

@media screen and (max-width: 768px) {

  :root { --gutter: 10px; }

  .SpaceAdjust { height: 65px; }

  /* The title wraps on narrow screens, so drop the optical-centering pad. */
  .question-description .site-title {
    font-size: 15px;
    padding-right: 0;
  }

  main { padding-top: calc(var(--bar-h) + 18px); }

  .quiz-wrapper .answers { padding: 14px 12px; }

  /* Keep the drop-down inside the viewport. */
  .question-description .dl-menuwrapper .dl-menu {
    width: 220px;
  }

  .SearchBox #txtSearch { flex: 1 1 auto; }
}


/* =====================================================================
   Pagination
   ===================================================================== */
.Page-navigation {
  text-align: center;
  background: transparent;
  margin: 0 0 32px;
  direction: ltr;
}

.pagination {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination > li { display: inline-block; }

.pagination > li > a,
.pagination > li > span {
  position: relative;
  /* was float:left, which needed the negative-margin hack; the parent is
     now a flex row so the floats are unnecessary. */
  float: none;
  display: block;
  min-width: 38px;
  padding: 8px 12px;
  line-height: 20px;
  text-decoration: none;
  color: var(--ink-soft);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-left: 0;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  z-index: 2;
  color: #fff;
  background-color: var(--navy-light);
  border-color: var(--navy-light);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: var(--navy);
  border-color: var(--navy);
  cursor: default;
}

/* Non-link cells ("..." and the current page) must not look clickable. */
.pagination > li > span:hover {
  color: var(--ink-soft);
  background-color: var(--surface);
}

/* =====================================================================
   Audio player.
   script.js flips display:none <-> block inline, so only style the rest.
   Docked to the bottom so it stays reachable while scrolling the ayas.
   ===================================================================== */
#myplayer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 210;

  width: calc(100% - 2 * var(--gutter));
  max-width: 560px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

/* Keep the last aya clear of the docked player. */
main { padding-bottom: 84px; }


/* =====================================================================
   About page
   ===================================================================== */
.about {
  direction: ltr;
  max-width: 860px;
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero */
.about-hero {
  text-align: center;
  color: #fff;
  padding: 36px 28px 32px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .10) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(139, 29, 63, .45) 0, transparent 45%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  box-shadow: var(--shadow-lg);
}

.about-hero-arabic {
  font-family: my_quran, "Traditional Arabic", Arial;
  font-size: 30px;
  line-height: 1.6;
  margin-bottom: 10px;
  opacity: .95;
}

.about-hero h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 12px;
}

.about-hero p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, .88);
}

.about-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.about-btn {
  display: inline-block;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

.about-btn:hover { transform: translateY(-1px); }

.about-btn-light { background: #fff; color: var(--navy); }
.about-btn-light:hover { background: #ffd76a; color: var(--navy-dark); }

.about-btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.about-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Stats strip */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.about-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-stat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.about-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* Content cards */
.about-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
}

.about-card h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  position: relative;
}

/* Maroon accent under the heading */
.about-card h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 48px;
  height: 2px;
  background: var(--maroon);
}

/* How-to steps */
.about-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.about-step {
  background: #f7f8fc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.about-step:hover {
  border-color: var(--navy-light);
  box-shadow: var(--shadow-md);
}

.about-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
}

.about-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.about-step p {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-soft);
}

.about-inline-icon {
  height: 18px;
  vertical-align: -4px;
}

/* Tips */
.about-tips {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-tips li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink);
  border-bottom: 1px dashed var(--line);
}

.about-tips li:last-child { border-bottom: none; }

.about-tips li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--maroon);
  font-weight: 800;
}

.about-tips kbd {
  font-family: inherit;
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f7f8fc;
}

.about-back { text-align: center; }

.about-back a {
  color: var(--navy);
  font-weight: 600;
}

.about-back a:hover { color: var(--maroon); }

@media screen and (max-width: 768px) {
  .about-hero { padding: 28px 18px 26px; }
  .about-hero h1 { font-size: 23px; }
  .about-hero-arabic { font-size: 24px; }

  .about-stats { grid-template-columns: repeat(2, 1fr); }

  .about-card { padding: 20px 16px; }
  .about-steps { grid-template-columns: 1fr; }
}