/* quranful.com search: the footer button, the search panel and its results. Loaded after reader.css. */

/*-------- Search: the button at the left of the footer, and the search panel --------*/
#search-button {
  position: absolute;          /* at the left end of the footer, mirroring the share button */
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  font-size: 22px;
  line-height: 0;
  color: #ffffff;
  cursor: pointer;
}
@media only screen and (max-width: 319px) {
  #search-button {
    left: 8px;
  }
}
#search-backdrop {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4000;
}
#search-panel {
  display: none;
  position: fixed;             /* phones: the whole screen */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4001;
  flex-direction: column;
  background-color: #ffffff;
  color: #222;
}
#search-backdrop.open {
  display: block;
  background-color: rgba(0,0,0,0.45);   /* the page dimmed behind the search */
}
#search-panel.open {
  display: flex;
}
.search-top {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));       /* iPhones: below the clock (see reader.css #header) */
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background-color: #005172;
}
.search-box {
  flex: 1;
  min-width: 0;                /* may get narrower than the text box would like, so it never goes past the screen edge */
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #6b7c88;
  font-size: 18px;
  cursor: text;
}
#search-input {
  flex: 1;
  min-width: 0;
  width: 100%;                 /* fills the box, however narrow (a text box otherwise insists on its own width) */
  margin-left: 8px;
  padding: 10px 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 17px;             /* 16px or more: iPhones don't zoom in when it is tapped */
  color: #222;
}
#search-input::-webkit-search-cancel-button {
  display: none;               /* the browser's own small x in the box: hidden, so there is only one x (close) */
}
#search-clear {
  display: none;               /* shown by the script when there is text */
  margin-left: 6px;
  padding: 4px;
  font-size: 20px;
  line-height: 0;
  color: #9aa7b1;              /* a gray circle with a white x */
  cursor: pointer;
}
#search-clear:hover {
  color: #6b7c88;
}
#search-back {
  margin-right: 8px;           /* phones: the back arrow closes search */
  padding: 6px;
  font-size: 22px;
  line-height: 0;
  color: #ffffff;
  cursor: pointer;
}
#search-close {
  display: none;               /* computers only */
  margin-left: 10px;
  padding: 6px;
  font-size: 22px;
  line-height: 0;
  color: #ffffff;
  cursor: pointer;
}
#search-status {
  padding: 10px 16px 4px;
  font-size: 14px;
  color: #6b7c88;
}
#search-status:empty {
  display: none;
}
.search-count {                /* "45 verses", at the top of the results */
  padding: 10px 0 4px;
  font-size: 14px;
  color: #6b7c88;
}
.search-surah {                /* a surah whose name matches: tap to open it. All one color, like a result title. */
  display: flex;
  align-items: center;
  margin: 0 -16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5ecf5;
  color: #00759A;
  cursor: pointer;
}
.search-surah.visited {
  color: #681da8;              /* visited purple, as for verses */
}
.search-surah-number {
  min-width: 90px;              /* "Surah 114", so the names line up */
  font-size: 15px;
}
.search-surah-names {         /* الإنسان • Al-Insan • Man */
  flex: 1;
  min-width: 0;
  font-size: 16px;
}
.search-surah-arabic {
  font-family: "Noto Naskh Arabic", sans-serif;   /* as in the chapter list */
  font-size: 19px;
}
.search-surah.last {
  border-bottom: 2px solid #c8d3dc;   /* a stronger line between the surahs and the verses */
}
#search-results {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 16px;     /* space under the search box */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));  /* iPhones: the last result clear of the home line */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.search-item {
  margin: 0 -16px;             /* the full width of the panel, so the hover color reaches its edges */
  padding: 12px 16px;
  border-bottom: 1px solid #e5ecf5;
  cursor: pointer;
}
.search-ref {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #00759A;
}
.search-item.visited .search-ref {
  color: #681da8;              /* the usual "visited link" purple */
}
@media (hover: hover) {        /* mouse only: on phones a tap would leave the color stuck */
  .search-item:hover,
  .search-surah:hover {
    background-color: #eaf1f6;
  }
  html.night .search-item:hover,
  html.night .search-surah:hover {
    background-color: #1e2429;
  }
}
.search-ar {
  direction: rtl;
  margin-bottom: 4px;
  font-family: var(--arabic-font), Serif, 'sans-serif';   /* the reader's Arabic font (Aa) */
  font-size: calc(21px * var(--text-scale, 1) * var(--arabic-font-scale, 1));   /* follows the reader's text size and font (Aa) */
  line-height: 1.7;
}
.search-en {
  font-size: calc(16px * var(--text-scale, 1));   /* follows the reader's text size (Aa) */
  line-height: 1.45;
}
#search-more {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #c8d3dc;
  border-radius: 8px;
  background-color: #f7f9fb;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #00759A;
  cursor: pointer;
}
#search-more:hover {
  background-color: #eaf1f6;
}
.search-item mark,
.search-surah mark {
  padding: 0 1px;
  border-radius: 2px;
  background-color: #ffe36e;   /* highlighter yellow */
  color: inherit;
}
/* Computers: a tall panel in the middle of the page */
@media only screen and (min-width: 700px) {
  #search-panel {
    top: 70px;
    bottom: 62px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);   /* centered */
    width: 640px;
    max-width: calc(100% - 24px);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    overflow: hidden;
  }
  .search-top {
    background-color: #ffffff;
    border-bottom: 1px solid #e5ecf5;
  }
  .search-box {
    border: 1px solid #c8d3dc;
    background-color: #f7f9fb;
  }
  #search-back {
    display: none;             /* computers: an x at the right closes the panel */
  }
  #search-close {
    display: block;
    color: #555;
  }
}

/* Night mode: search */
html.night #search-backdrop.open {
  background-color: rgba(0,0,0,0.6);
}
html.night #search-panel {
  background-color: #15191d;
  color: #d6dbe0;
}
html.night .search-top {
  background-color: #0d3546;
  border-bottom-color: #283038;
}
html.night .search-box {
  background-color: #22282e;
  border-color: #3a434b;
  color: #94a3ae;
}
html.night #search-input {
  color: #d6dbe0;
}
html.night #search-close,
html.night #search-back {
  color: #c0c8cf;
}
html.night #search-clear {
  color: #5f6d78;
}
html.night #search-clear:hover {
  color: #7d8b96;
}
html.night #search-status,
html.night .search-count {
  color: #94a3ae;
}
html.night .search-surah {
  border-bottom-color: #283038;
  color: #7fb8cf;
}
html.night .search-surah.last {
  border-bottom-color: #3a434b;
}
html.night .search-surah.visited {
  color: #c58af9;
}
html.night .search-item {
  border-bottom-color: #283038;
}
html.night .search-ref {
  color: #7fb8cf;
}
html.night .search-item.visited .search-ref {
  color: #c58af9;              /* visited purple, for dark backgrounds */
}
html.night #search-more {
  border-color: #3a434b;
  background-color: #22282e;
  color: #7fb8cf;
}
html.night #search-more:hover {
  background-color: #2a3238;
}
html.night .search-item mark,
html.night .search-surah mark {
  background-color: #6a5517;   /* a muted amber, so it doesn't glare */
  color: #ffffff;
}