/*--------------------------------*/
html {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;   /* no grey box flashing behind buttons when tapped on phones */
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;   /* Roboto (loaded from Google Fonts in index.html) for all English; Arial only until it arrives, or if it can't load */
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: none;
}
select, button {
  font-family: inherit;          /* dropdowns and buttons use Roboto too (browsers don't pass the page font to them by themselves) */
}
.container {
  height: 100%;
}

/* Arabic fonts for the verses. A browser downloads a font only when the page uses it. */
@font-face {
  font-family: FontQuran2019;                 /* KFGQPC Hafs Bold: Uthmani Bold */
  src: url(/fonts/fontquran-2019/fontquran-2019.woff2) format('woff2');
}
@font-face {
  font-family: QuranHafs;                     /* KFGQPC Hafs Regular: Uthmani */
  src: url(/fonts/uthmanic-hafs1-ver09/uthmanic-hafs1-ver09.woff2) format('woff2');
}
@font-face {
  font-family: QuranScheherazade;             /* Scheherazade New (SIL Open Font License) */
  src: url(/fonts/scheherazade-new/scheherazade-new.woff2) format('woff2');
}
@font-face {
  font-family: QuranIndoPak;                  /* AlQuran IndoPak by QuranWBW (quranwbw.com): Indo-Pak */
  src: url(/fonts/indopak-nastaleeq/indopak-nastaleeq.woff2) format('woff2');
}

/* The Arabic font the reader chose in the Aa panel (a class on <html>, set by the script in the page's head).
   --arabic-font-scale: some fonts look bigger at the same size, so they are made a little smaller to match. */
:root {
  --arabic-font: QuranHafs;                   /* Uthmani, the default */
  --arabic-font-scale: 1;
}
html.arabic-uthmani-bold {
  --arabic-font: FontQuran2019;
}
html.arabic-scheherazade {
  --arabic-font: QuranScheherazade;
  --arabic-font-scale: 0.88;
}
html.arabic-indopak {
  --arabic-font: QuranIndoPak;
  --arabic-font-scale: 0.9;
}

.hidden{
  visibility: hidden;
}

.visible{
  visibility: visible;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/*-------- Header --------*/
#header {
  background-color: #005172;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  vertical-align: middle;
  padding: 0px 4px;        /* keeps the buttons off the screen edges on very small phones */
  /* iPhones: the page reaches the screen edges (viewport-fit=cover in index.html), so the blue runs up behind the clock,
     and sideways the buttons stay clear of the camera notch. Elsewhere these are 0. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -webkit-transform: translatez(0);
  z-index: 1000;           /* keep the header above the text when it scrolls under it */
  display: flex;           /* buttons in one line, centered; on very small phones the chapter box gets narrower */
  justify-content: center;
  align-items: center;
  height: calc(59px + env(safe-area-inset-top, 0px));   /* fixed, so it is the same on every device whatever the fonts (pages.css: the same for About and Contact) */
}
@media only screen and (min-width: 480px) {
  #header {
    height: calc(63px + env(safe-area-inset-top, 0px));   /* plus the space for the clock on iPhones and iPads (see above) */
  }
}
#header > * {
  flex-shrink: 0;
}
/* The buttons on each side of the chapter box. Both sides take equal room, so the chapter box sits exactly
   in the middle of the screen (above the play button). On a very small phone a side may need more room
   than half; then it simply takes it, and the chapter box moves a little off center. */
.header-side {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}
.header-left {
  justify-content: flex-end;
}
.header-right {
  justify-content: flex-start;
}
.header-button {
  padding-left: 3px;
  padding-right: 3px;
  font-size: 20px;
  color: #eeeeee;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
/* bigger invisible tap area: the full height of the header, and a little to each side */
.header-button {
  position: relative;
}
.header-button::after {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -2px;
  right: -2px;
}
@media only screen and (min-width: 360px) {
  .header-button::after {
    left: -8px;
    right: -8px;
  }
}
.header-button:hover {
  color: #ffffff;
}
.header-button:active {
  color: #ffffff;
}

@media only screen and (min-width: 360px) {
  .header-button {
    margin-left: 6px;
    margin-right: 6px;
  }
}

@media only screen and (min-width: 400px) {
  .header-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media only screen and (min-width: 480px) {
  .header-button {
    margin-left: 12px;
    margin-right: 12px;
  }
}

#chapter-select-button {
  border-left: 1px solid #888888;
  border-right: 1px solid #888888;
  display: inline-block;
  vertical-align: middle;
  padding-top: 8px;       /* small, to make room for the space between the two names */
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 3px;
  margin-right: 3px;
  width: 149px;
  cursor: pointer;
  position: relative;
}
#header > #chapter-select-button {
  flex-shrink: 1;          /* the one part that may get narrower when the screen is small */
  min-width: 0;
  align-self: stretch;     /* as tall as the header, with the names centered in it: with a phone's large font setting, */
                           /* the names can't push the box (and its side lines) below the header */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
#chapter-select-button > div:first-child {   /* the Arabic name's line: one line, clear of the number and the arrow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 22px;        /* room above and below, so the marks over and under the Arabic letters aren't cut off */
  margin: -6px 0;
}
#chapter-name-a {
  font-family: "Noto Naskh Arabic", sans-serif;
  font-size: 18px;
  line-height: 100%;
  color: #f8f8f8;
}
#chapter-name-e {
  white-space: nowrap;      /* one line; a name too long for the box ends in "..." (a phone's large font setting) */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
  line-height: 120%;
  padding-top: 3px;       /* a little space under the Arabic name */
  color: #f8f8f8;
}
#chapter-number {
  font-size: 14px;
  line-height: 120%;
  color: #fff;
  position: absolute;
  left: 7px;
  top: 14px;              /* level with the Arabic name */
}
.caret {
  font-size: 19px;
  color: #ff8c00;
  position: absolute;
  right: 7px;
}
#chapter-selector {
  font-family: Roboto, "Noto Naskh Arabic", sans-serif;   /* English names and numbers in Roboto; Roboto has no Arabic letters, so the Arabic names use Noto Naskh */
  font-size: 17px;
  height: 100%;           /* covers the whole chapter button, so a tap anywhere on it opens the list */
  width: 100%;
  line-height: 35px;      /* Safari needs this */
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-appearance: menulist-text;
  cursor: pointer;
}
/* The loading line at the very top of the page, where the browser shows its own (the script moves it) */
#load-bar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);   /* just below the iPhone's clock */
  left: 0;
  height: 3px;
  width: 0;
  background-color: #7fd3f0;
  opacity: 0;
  transition: width 0.3s ease-out, opacity 0.3s;
  z-index: 1001;                 /* above the header */
  pointer-events: none;
}

/*-------- Footer --------*/
.footer {
  background-color: #00759A;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  vertical-align: middle;
  padding-top: 6px;
  padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 10px));   /* iPhones: the blue runs down behind the home line, the buttons stay just above it */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
  z-index: 1000;
  -webkit-transform: translatez(0);
}

.footer-contents{
  margin: auto;
  max-width: 800px;
  position: relative;
}

.arrow-block {                /* ‹ Prev  (▶)  Next › */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon {
  font-size: 21px;
  vertical-align: middle;
  display: inline-block;
}
.arrow-label {
  font-size: 18px;
  vertical-align: middle;
  display: inline-block;
}

/* The arrows a little closer to their words, so "‹ Prev" and "Next ›" read as one */
#prev-sura-button .arrow-icon {
  margin-right: -2px;
}
#next-sura-button .arrow-icon {
  margin-left: -2px;
}

#prev-sura-button,
#next-sura-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
/* Play / pause: a white circle between Prev and Next */
#audio-button {
  width: 40px;
  height: 40px;
  margin-left: 26px;
  margin-right: 26px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #00759A;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#audio-button .icon-when-paused {
  margin-left: 3px;            /* the triangle looks centered when nudged right a little */
}
/* bigger invisible tap area around Prev and Next */
#prev-sura-button::after, #next-sura-button::after {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -12px;
  left: -10px;
  right: -10px;
}

/* Verse button in the header, next to the chapter: "286 ▾" (or "بسم ▾" on the Bismillah) */
#verse-select-button {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
  font-size: 17px;
  padding: 4px 2px;
  margin-left: 4px;
  margin-right: 8px;
  cursor: pointer;
  width: 3.2em;                /* fixed: room for the widest label ("بسم" or "286"), so the header doesn't shift when the number changes */
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}
#verse-select-label {
  font-family: Roboto, "Noto Naskh Arabic", sans-serif;   /* "بسم" in Noto Naskh, like the chapter name next to it */
  line-height: 1;              /* Noto Naskh is tall: keeps the button (and the header) the same height */
  position: relative;
  top: 1px;                    /* digits sit a little high in their line; this centers them with the icons */
}
#verse-select-label.bismi {    /* "بسم": Noto Naskh looks small and sits high next to the digits, so a little bigger and lower */
  font-size: 20px;
  top: 4px;
}
.verse-caret {                 /* same orange triangle as the chapter button */
  font-size: 17px;
  color: #ff8c00;
  margin-left: 1px;
}

#verse-selector {
  font-family: Roboto, "Noto Naskh Arabic", sans-serif;   /* numbers in Roboto, "بسم الله" in Noto Naskh (not the device's own Arabic font) */
  font-size: 16px;
  height: 100%;           /* covers the whole verse button */
  width: 100%;
  line-height: 35px;      /* Safari needs this */
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-appearance: menulist-text;
  cursor: pointer;
}
/* The heading inside the verse list ("Verses الآيات"): not bold, dark grey */
#verse-selector optgroup {
  font-family: Roboto, "Noto Naskh Arabic", sans-serif;   /* the Arabic heading in Noto Naskh */
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  color: #444;
}
html.night #verse-selector optgroup {
  color: #fff;
}
#chapter-selector option,
#verse-selector option {
  color: CanvasText;           /* the choices keep the normal text color (also correct in night mode) */
}

/*-------- Title and text --------*/
.content {
  padding-top: calc(60px + env(safe-area-inset-top, 0px));    /* below the header */
  padding-left: env(safe-area-inset-left, 0px);                 /* iPhones sideways: clear of the camera notch */
  padding-right: env(safe-area-inset-right, 0px);
}
#title-bar {
  text-align: center;
}
.title {
  color: #005172;
  line-height: 60%;
  font-weight: normal;
}
.title-E {
  font-weight: 400;
  font-size: 28px;
}
.title-E::first-letter {
  font-size: 1.15em;             /* the Q of QURAN a little larger */
}
.title-A {
  font-family: 'Noto Kufi Arabic', serif;
  font-size: 28px;
}
#title-bar-b {
  margin: 0;                     /* a heading (h1) adds space above and below by itself; the padding below sets the space */
  padding-top: 18px;
  padding-bottom: 12px;
  text-align: center;
  display: none;
  color: #005172;               /* the same color and weight as "QURAN" on the home page */
  font-weight: 400;
  font-size: 24px;
}
.text {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: auto;
}

.text-columns{
  max-width: 1000px;
}

.text-rows{
  max-width:700px;
}

.row {
  display: block;
  position: relative;     /* for the middle line below */
  width: 100%;
  cursor: pointer;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding-top: 3px;
  padding-bottom: 3px;
}
/* The line between Arabic and English in columns mode. It is drawn on the whole row
   (not on the English text), so it runs without gaps from row to row. */
.text-columns .row::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 50%;
  width: 1px;
  background-color: #e5ecf5;
}
.row-highlighted {
  border-top: 1px solid #cde7f0;
  border-bottom: 1px solid #cde7f0;
  background-color: #e6f3f7;
}
.row-highlighted-mode3 {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  background-color: #e6f3f7;
}
/* Arabic & English rows mode: a line at the bottom of each verse. It is the row's own border,
   so the highlight fills exactly the space between two lines. */
.text-both-rows .row,
.text-both-rows .row-highlighted-mode3 {
  border-top: 1px solid transparent;
  border-bottom: 1px solid #e5ecf5;
}
.text-rows .row {
  padding-top: 6px;           /* more space between verses in the one-column modes (rows, Arabic only, English only) */
  padding-bottom: 6px;
}
.sen {
  display: inline-block;
  vertical-align: text-top;
  color: #222;
  width: 50%;
  box-sizing: border-box;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 16px;
  padding-right: 16px;
}
.sen-e {
  font-size: 18px;
  line-height: 1.35em;
}
/* A word too long for the whole line (very large text on a narrow screen) breaks, instead of sticking out
   past the screen edge, which makes Firefox zoom the whole page out. Normal text is not affected. */
.sen-e,
.sen-a {
  overflow-wrap: break-word;
}
.sen-a {
  direction: rtl;
  color: #000;
  font-family: var(--arabic-font), Serif, 'sans-serif' !important;
  font-size: 17px;
}
/* Columns mode: lower the English so its first line sits level with the Arabic */
.text-columns .sen-e {
  padding-top: calc(2px + 0.3em);
}
/* Columns mode: less space on each side of the middle line */
.text-columns .sen-a {
  padding-right: 10px;
}
.text-columns .sen-e {
  padding-left: 10px;
}
.span-e {
  color: #005172;
  font-size: 15px;
}
.span-a {
  color: #005172;
  font-family: Serif, 'sans-serif' !important;
  font-size: 14px;
  position: relative;
  top: 0.2em;
}
/* Columns mode: Arabic verse numbers a little higher */
.text-columns .span-a {
  top: 0.1em;
}
.bottom-bar {
  height: calc(60px + env(safe-area-inset-bottom, 0px));        /* room for the footer at the end of the text */
}

/* Narrow phones: a little less room around the verse button, so the surah box stays in the middle of the screen */
@media only screen and (max-width: 399px) {
  #verse-select-button {
    margin-left: 0;
    margin-right: 0;
    width: 3em;
  }
}

/*-------- Larger than phone portrait --------*/
@media only screen and (min-width: 480px) {
  #chapter-select-button {
    margin-left: 9px;
    margin-right: 9px;
    width: 182px;
    padding-top: 9px;
    padding-bottom: 8px;
  }
  #chapter-name-a {
    font-size: 20px;
  }
  #chapter-name-e {
    font-size: 18px;
  }
  #chapter-number {
    font-size: 16px;
    top: 15px;
  }
  .caret {
    font-size: 20px;
  }
  #title-bar {
    padding-top: 15px;
  }
  #title-bar-b {
    font-size: 26px;
    padding-top: 24px;
    padding-bottom: 14px;
  }
  #verse-select-button {
    font-size: 18px;
  }
}
/*-------- Desktops and laptops --------*/
@media only screen and (min-width: 1100px) {
  .content {
    margin-left: 5%;
    margin-right: 5%;
  }
}

/*
 * jQuery dropdown: A simple dropdown plugin
 *
 * Copyright 2013 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/)
 *
 * Licensed under the MIT license: http://opensource.org/licenses/MIT
 *
*/
.dropdown {
  position: absolute;
  z-index: 9999999;
  display: none;
}
.dropdown .dropdown-menu {
  min-width: 160px;
  max-width: 300px;
  list-style: none;
  background: #fefefe;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  overflow: visible;
  padding: 8px 6px;
  margin: 0;
  margin-top: 30px;
  font-size: 18px;
}
.dropdown .dropdown-menu LI {
  list-style: none;
  margin: 0;
  line-height: 18px;
}
.dropdown .dropdown-menu LI > A {
  display: block;
  color: #000;
  text-decoration: none;
  line-height: 24px;
  padding: 10px 14px;  /* 44px a row: still easy to tap on a phone */
  white-space: nowrap;
}
.dropdown .dropdown-menu LI > A:hover {
  background-color: #08C;
  color: #FFF;
  cursor: pointer;
}
.dropdown .dropdown-menu .dropdown-divider {
  font-size: 1px;
  border-top: solid 1px #E5E5E5;
  padding: 0;
  margin: 6px 0;
}

/*-------- Added in this version --------*/

/*-------- Settings panel (the share panel looks the same) --------*/
#settings-backdrop,
#share-backdrop {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.35);
  z-index: 3000;
}
#settings-panel,
#share-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;                   /* phones: a sheet at the bottom of the screen */
  box-sizing: border-box;
  padding: 4px 18px calc(20px + env(safe-area-inset-bottom, 0px));   /* iPhones: clear of the home line */
  background-color: #ffffff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
  font-size: 16px;
  color: #222;
  z-index: 3001;
}
#settings-backdrop.open,
#settings-panel.open,
#share-backdrop.open,
#share-panel.open {
  display: block;
}
#settings-panel.open,
#share-panel.open {
  animation: settings-slide-up 0.2s ease-out;
}
@keyframes settings-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 6px;
}
.settings-title {              /* quiet: it names the panel without competing with the choices */
  font-size: 15px;
  font-weight: 500;            /* Roboto Medium */
  color: #6b7c88;
}
#settings-close {
  font-size: 20px;
  color: #555;
  cursor: pointer;
  padding: 8px;                /* a bigger tap area */
  margin-right: -8px;          /* keeps the X lined up with the right edge of the dropdowns */
  line-height: 0;
}
#settings-close:hover {
  color: #000;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;             /* no lines between rows: the space separates them */
}
.settings-label {
  flex-shrink: 0;
  width: 115px;                /* the same for every row, so all the dropdowns line up */
}
.settings-row select {
  flex: 0 1 230px;             /* all the same width: room for "Arabic & English - columns" (narrower on small phones) */
  min-width: 0;
  text-overflow: ellipsis;     /* a longer reciter name ends in "..." (the open list shows it in full) */
  font-size: 16px;             /* 16px or more: iPhones don't zoom in when it is tapped */
  padding: 6px 8px;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  background-color: #f7f9fb;
  color: #222;
  cursor: pointer;
}
/* An audio list set to Off: slanted, so it is clear at a glance (not gray: gray looks like it can't be clicked).
   The choices in the open list stay upright. */
.settings-row select.is-off {
  font-style: italic;
}
.settings-row select.is-off option {
  font-style: normal;
}
/* God | Allah: two buttons side by side, the same width as the dropdowns */
.settings-switch {
  flex: 0 1 230px;
  display: flex;
  border: 1px solid #00759A;
  border-radius: 6px;
  overflow: hidden;
}
.settings-switch button {
  flex: 1;
  font-size: 16px;
  padding: 7px 8px;
  margin: 0;
  border: none;
  background-color: #ffffff;
  color: #00759A;
  cursor: pointer;
}
.settings-switch button + button {
  border-left: 1px solid #00759A;
}
.settings-switch button.on {
  background-color: #00759A;
  color: #ffffff;
}
/* Repeat: the rows under it (Verses, Times) show only when repeat is on.
   They are indented a little, with a thin line on their left that joins them to Repeat. */
.settings-sub {
  display: none;
  position: relative;
}
.settings-sub.shown {
  display: flex;
}
.settings-sub::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  border-left: 2px solid #c8d3dc;
}
.settings-sub .settings-label {
  padding-left: 20px;
  box-sizing: border-box;
  font-size: 15px;
  color: #6b7c88;
}
.repeat-range {
  flex: 0 1 230px;             /* From and To together are as wide as the other dropdowns */
  min-width: 0;
}
/* Computers and tablets: a small box under the gear (the script sets its left side) */
@media only screen and (min-width: 700px) {
  #settings-backdrop,
  #share-backdrop {
    background-color: transparent;
  }
  #settings-panel,
  #share-panel {
    bottom: auto;
    right: auto;
    width: fit-content;          /* as wide as its contents */
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.25);
  }
  #settings-panel.open,
  #share-panel.open {
    animation: none;
  }

  #share-panel {
    width: fit-content;          /* as wide as its contents */
  }
  #settings-panel {
    width: 384px;                /* the label and dropdown widths, plus padding (Safari on iPads made it much wider: a gap opened in the middle) */
  }
  .settings-row {
    padding: 14px 0;             /* a little more room between the rows than on phones */
  }
}

/*-------- Share: the button in the footer, and the panel's own parts --------*/
#share-button {
  position: absolute;          /* at the right end of the footer, apart from Prev / Play / Next */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  font-size: 22px;
  line-height: 0;
  color: #ffffff;
  cursor: pointer;
}
/* Small phones: Prev / Play / Next stay centered, a little closer together, to leave room for the share button */
@media only screen and (max-width: 359px) {
  #audio-button {
    margin-left: 14px;
    margin-right: 14px;
  }
}
@media only screen and (max-width: 319px) {
  #audio-button {
    margin-left: 10px;
    margin-right: 10px;
  }
  #share-button {
    right: 8px;
  }
}
/* Very narrow screens (or a phone's very large font setting, which Firefox turns into a narrow page):
   the footer shows the arrows without the words Prev and Next, and under 250px the chapter box shows only the number */
@media only screen and (max-width: 299px) {
  .arrow-label {
    display: none;
  }
  #audio-button {
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media only screen and (max-width: 249px) {
  #chapter-name-a,
  #chapter-name-e,
  .caret {
    display: none;
  }
  #chapter-select-button {
    padding-left: 4px;
    padding-right: 4px;
    min-width: 34px;
  }
  #chapter-select-button > div:first-child {
    padding: 6px 0;
  }
  #chapter-number {
    position: static;
    display: block;
    text-align: center;
    font-size: 18px;
  }
}
/* The menu and the panels on very narrow screens: kept inside the screen */
@media only screen and (max-width: 299px) {
  .dropdown .dropdown-menu {             /* the menu: long items wrap onto two lines */
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
  .dropdown .dropdown-menu LI > A {
    white-space: normal;
  }
  body #aa-panel {                       /* Aa: as wide as the screen allows, the buttons share the width (body: wins over the rule further down) */
    width: calc(100vw - 16px);
    max-width: 250px;
    padding-left: 12px;
    padding-right: 12px;
  }
  #aa-panel .settings-switch button {
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
  .settings-row {                        /* Settings: each label above its dropdown, which gets the full width */
    flex-wrap: wrap;
  }
  #settings-panel .settings-label {
    width: 100%;
    margin-bottom: 6px;
  }
  .settings-row select,
  .settings-row .settings-switch,
  .repeat-range {
    flex: 1 1 100%;
  }
}
#share-close {
  font-size: 20px;
  color: #555;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
  line-height: 0;
}
/* "Verses [ 2 ] to [ 5 ]", then the Share button across the whole panel */
.share-body {
  display: flex;
  align-items: flex-start;
  padding: 11px 0 6px;
}
.share-label {
  margin-right: 16px;
  padding-top: 8px;            /* level with the text in the dropdowns */
}
.share-controls {
  display: flex;
  flex-direction: column;
}
.share-range {
  display: flex;
  align-items: center;
}
.share-range select {
  flex: 1;
  min-width: 76px;
  font-size: 16px;             /* 16px or more: iPhones don't zoom in when it is tapped */
  padding: 6px 8px;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  background-color: #f7f9fb;
  color: #222;
  cursor: pointer;
}
.share-word {
  margin: 0 12px;
  color: #555;
}
#share-go {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background-color: #00759A;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

/*-------- Aa button and panel: text size and night mode --------*/
#aa-button {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.5px;
  width: 26px;
  text-align: center;
  line-height: 1;
}
#aa-backdrop {                 /* invisible: a tap outside the panel closes it */
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;
}
#aa-panel {
  display: none;
  position: fixed;             /* the script puts it under the Aa button */
  z-index: 3001;
  width: 250px;
  box-sizing: border-box;
  padding: 12px 16px 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(0,0,0,0.25);
  font-size: 15px;
  color: #222;
}
#aa-backdrop.open,
#aa-panel.open {
  display: block;
}
.aa-label {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7c88;
}
#arabic-font-select {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  font-size: 16px;             /* 16px or more: iPhones don't zoom in when it is tapped */
  padding: 6px 8px;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  background-color: #f7f9fb;
  color: #222;
  cursor: pointer;
}
.aa-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  overflow: hidden;
}
/* A- and A+: two halves of one box (the size itself is in the heading above, not in the box) */
.aa-stepper button {
  flex: 1;
  padding: 8px 0;
  border: none;
  background-color: #f7f9fb;
  font-size: 17px;
  color: #00759A;
  cursor: pointer;
}
.aa-stepper button:disabled {  /* at the smallest or largest size */
  color: #b8c2ca;
  cursor: default;
}
.aa-stepper button + button {
  border-left: 1px solid #c8d3dc;
}
#text-size-name {               /* "Text size: Medium": the size a little darker than the heading */
  color: #222;
}

/*-------- The pop-up panels (Settings, Share, Aa): a thin border and a deeper shadow,
   so they stand apart from the page --------*/
#settings-panel,
#share-panel,
#aa-panel {
  border: 1px solid #c8d3dc;
}
#settings-panel,
#share-panel {
  box-shadow: 0 -6px 20px rgba(0,0,0,0.3);     /* phones: sheets at the bottom, so the shadow is above */
}
#aa-panel {
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
@media only screen and (min-width: 700px) {
  #settings-panel,
  #share-panel {
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);   /* computers: boxes under their buttons */
  }
}

/*-------- Night mode (the class "night" on the page) --------*/
html.night {
  color-scheme: dark;          /* the browser's own parts (scrollbars, dropdown lists) turn dark too */
}
html.night body {
  background-color: #15191d;
}
html.night #header {
  background-color: #0d3546;
}
html.night .footer {
  background-color: #0f4357;
}
html.night #audio-button {
  background-color: #e4e9ee;
  color: #0f4357;
}
html.night .sen {
  color: #d6dbe0;
}
html.night .span-e,
html.night .span-a {
  color: #5f93a8;              /* verse numbers: softer, so they don't compete with the text */
}
html.night .title,
html.night #title-bar-b {
  color: #7fb8cf;              /* titles stay brighter */
}
html.night .row {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
html.night .row-highlighted,
html.night .row-highlighted-mode3 {
  background-color: #2a3138;   /* slate gray: apart from the blue header and footer */
  border-color: #2a3138;
}
html.night .text-both-rows .row,
html.night .text-both-rows .row-highlighted-mode3 {
  border-bottom-color: #283038;
}
html.night .text-columns .row::before {
  background-color: #283038;
}
/* the menu, the settings panel and the Aa panel */
html.night .dropdown .dropdown-menu,
html.night #settings-panel,
html.night #share-panel,
html.night #aa-panel {
  background-color: #22282e;
  border-color: #3a434b;
  color: #d6dbe0;
  box-shadow: 0 5px 16px rgba(0,0,0,0.6);
}
html.night .dropdown .dropdown-menu LI > A {
  color: #d6dbe0;
}
html.night .dropdown .dropdown-menu .dropdown-divider {
  border-top-color: #3a434b;
}
html.night .settings-title,
html.night .aa-label,
html.night .settings-sub .settings-label {
  color: #94a3ae;
}
html.night .settings-sub::before {
  border-left-color: #3a434b;
}
html.night #settings-close,
html.night #share-close,
html.night .share-word {
  color: #c0c8cf;
}
html.night .settings-row select,
html.night #arabic-font-select,
html.night .share-range select,
html.night .aa-stepper button {
  background-color: #2a3138;
  border-color: #3a434b;
  color: #d6dbe0;
}
html.night .aa-stepper,
html.night .aa-stepper button + button {
  border-color: #3a434b;
}
html.night #text-size-name {
  color: #d6dbe0;
}
html.night .aa-stepper button {
  color: #7fb8cf;
}
html.night .aa-stepper button:disabled {
  color: #4f5a63;
}
html.night .settings-switch {
  border-color: #3a6b80;
}
html.night .settings-switch button {
  background-color: #22282e;
  color: #7fb8cf;
}
html.night .settings-switch button + button {
  border-left-color: #3a6b80;
}
html.night .settings-switch button.on {
  background-color: #2f6a82;
  color: #ffffff;
}

/* The real chapter and verse dropdowns sit invisibly on top of the styled buttons,
   so tapping a button opens the phone's own list. */
select.styled {
  opacity: 0;
  z-index: 5;
}

/* While the page opens at a chapter other than 1, hide chapter 1's text and name until the right chapter arrives */
.opening-chapter .content,
.opening-chapter #chapter-name-a,
.opening-chapter #chapter-name-e,
.opening-chapter #chapter-number {
  visibility: hidden;
}

/* Message shown under the header when a chapter could not be loaded */
#load-error {
  display: none;
  position: fixed;
  top: calc(70px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  z-index: 2000;
}

/* SVG icons: sized by the font-size of their button, colored by its text color */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  pointer-events: none;
}
/* The header and footer icons in px, not 1em: a phone's larger font setting (Firefox follows Android's)
   makes the text bigger, but these stay the same size, so the bars keep their room. */
.header-button .icon        { width: 20px; height: 20px; }
.caret .icon                { width: 19px; height: 19px; }
.verse-caret .icon          { width: 17px; height: 17px; }
.arrow-icon .icon           { width: 21px; height: 21px; }
#audio-button .icon         { width: 18px; height: 18px; }
#search-button .icon,
#share-button .icon         { width: 22px; height: 22px; }
@media only screen and (min-width: 480px) {
  .caret .icon              { width: 20px; height: 20px; }
}

/* Play / pause: the button's class (icon-play3 or icon-pause, set by the script) decides which icon shows */
#audio-button .icon-when-playing,
#audio-button.icon-pause .icon-when-paused {
  display: none;
}
#audio-button.icon-pause .icon-when-playing {
  display: inline-block;
}



/* Settings panel on phones: a card under the gear, like on computers (the script sets its left and top) */
@media only screen and (max-width: 699px) {
  #settings-panel {
    width: fit-content;
    max-width: calc(100% - 16px);
    right: auto;
    bottom: auto;
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.25);
  }
  #settings-panel.open {
    animation: none;
  }
}
@media only screen and (max-width: 399px) {
  .settings-label {
    width: 106px;              /* a little narrower, so the dropdowns keep their full width on a typical phone */
  }
}

/* Share panel on phones: as wide as its contents, just above the share button (bottom right) */
@media only screen and (max-width: 699px) {
  #share-panel {
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: 0;
    left: auto;
    right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));   /* just above the footer */
    border-radius: 14px;
  }
}
#share-title {
  margin-right: 24px;          /* keeps the title clear of the X */
}

/*-------- Install as an app: the menu item, and the tip for iPhone and Safari --------*/
.install-item {
  display: none;                 /* the script shows it where the browser can install */
}
#install-backdrop {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.35);
  z-index: 3000;
}
#install-panel {
  display: none;
  position: fixed;               /* in the middle of the screen */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 4px 18px 18px;
  background-color: #ffffff;
  border: 1px solid #c8d3dc;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-size: 16px;
  color: #222;
  z-index: 3001;
}
#install-backdrop.open,
#install-panel.open {
  display: block;
}
#install-close {
  font-size: 20px;
  color: #555;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
  line-height: 0;
}
.install-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 4px;
}
.install-body img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
}
.install-text {
  line-height: 1.45;
}
.install-text b {
  font-weight: 500;
}
.install-already {             /* "Already installed? ..." under the tip: quieter */
  margin-top: 8px;
  font-size: 14px;
  color: #6b7c88;
}
.install-share-icon {
  color: #00759A;
  font-size: 18px;
  vertical-align: -3px;
}
html.night #install-panel {
  background-color: #22282e;
  border-color: #3a434b;
  color: #d6dbe0;
}
html.night #install-close {
  color: #c0c8cf;
}
html.night .install-already {
  color: #94a3ae;
}
html.night .install-share-icon {
  color: #7fb8cf;
}

/* In the installed app: a thin line between the window's title bar and the header (the same gray as the lines beside the surah box) */
@media (display-mode: standalone) {
  #header {
    border-top: 1px solid #888888;
  }
}