/* Modern, responsive presentation for the Quran parallel-text reader.
   Loaded after legacy styles. JavaScript hooks, classes and content markup
   are deliberately preserved. */

body.day {
  --reader-paper: #ffffff;
  --reader-text: #253746;
  --reader-muted: #567080;
  --reader-line: #e5ebef;
  --reader-border: #dbe5e9;
  --reader-soft: #eef6f7;
  --reader-ui: #ffffff;
  --reader-accent: #137f8d;
  background: linear-gradient(155deg, #f8fafb 0%, #edf3f6 100%) fixed;
  color: var(--reader-text);
}
body.night {
  --reader-paper: #1d2b33;
  --reader-text: #eaf1f3;
  --reader-muted: #b3c5cb;
  --reader-line: #344751;
  --reader-border: #40535b;
  --reader-soft: #283f49;
  --reader-ui: #263a43;
  --reader-accent: #74d7d8;
  background: linear-gradient(155deg, #121c22, #23323c) fixed;
  color: var(--reader-text);
}

/* The original palette selector still changes the site accent. */
body.day.purple    { --reader-accent: #78517c; --reader-soft: #f5edf6; }
body.day.green     { --reader-accent: #537d31; --reader-soft: #f0f5e9; }
body.day.blue      { --reader-accent: #366eaa; --reader-soft: #edf3fa; }
body.day.gray      { --reader-accent: #586c78; --reader-soft: #eef2f4; }
body.day.pink      { --reader-accent: #ac527c; --reader-soft: #fbecf2; }
body.day.dark-blue { --reader-accent: #394b83; --reader-soft: #ecf0f8; }
body.night.purple    { --reader-accent: #e5a9e5; --reader-soft: #493549; }
body.night.green     { --reader-accent: #b5db8d; --reader-soft: #344538; }
body.night.blue      { --reader-accent: #a4c7fd; --reader-soft: #304456; }
body.night.gray      { --reader-accent: #c7d4dd; --reader-soft: #3c4b52; }
body.night.pink      { --reader-accent: #f5afce; --reader-soft: #493840; }
body.night.dark-blue { --reader-accent: #abb9ff; --reader-soft: #34405d; }

body { font-family: Montserrat, system-ui, sans-serif; font-size: 15px; }
body, #head, #wrapper, #foot { box-sizing: border-box; }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible, a:focus-visible {
  outline: 3px solid #25a9bd;
  outline-offset: 2px;
}

/* Header: three responsive areas instead of percent floats. */
#head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "search logo settings";
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
  width: 100%;
  max-width: 1650px;
  margin: auto;
  padding: 16px 18px 8px;
  line-height: normal;
  text-align: left;
}
#head > .head-item { float: none; width: auto; min-width: 0; flex-grow: 0; display: block; }
#head > .left-bar  { grid-area: search; }
#head > .logo-sec  { grid-area: logo; margin: 0; }
#head > .right-bar { grid-area: settings; }
#head .head-item.bar {
  box-sizing: border-box;
  border: 1px solid var(--reader-border);
  border-radius: 17px;
  background: var(--reader-ui);
  box-shadow: 0 3px 18px rgba(17, 48, 69, .065);
  margin: 0;
  padding: 9px 12px;
  min-height: 61px;
  display: flex;
  align-items: center;
}
.top-left-bar, .top-right-bar {
  display: flex;
  float: none;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  gap: 10px;
}
.top-right-bar { justify-content: flex-end; }
.top-left-bar-item, .top-right-bar-item { float: none; width: auto; min-width: 0; margin: 0; }
.top-left-bar-item.back-item, .top-left-bar-item.reload-item {
  width: 38px;
  min-width: 38px;
  max-height: none;
}
#head .top-left-bar-item:last-child { flex: 1 1 auto; width: auto; min-width: 0; position: relative; }
.top-left-bar-item form { width: 100%; position: relative; margin: 0; }
#back, #reload {
  display: block;
  width: 38px;
  height: 40px;
  padding: 0;
  margin: 0;
  background-size: 20px auto;
  background-position: center;
  border-radius: 11px;
}
#back:hover, #reload:hover, #change-fonts:hover, #change-color:hover,
#change-reciter:hover, #foot-menu-icon:hover { background-color: var(--reader-soft); }
#head #search-input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 9px 34px 9px 43px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 12px;
  border: 1px solid var(--reader-border);
  box-shadow: none;
}
.day #head #search-input { background: #f8fbfc url('theme/search-icon.png') no-repeat 12px center / 20px; color: #243944; }
.night #head #search-input { background: #1b2d36 url('theme/search-icon.png') no-repeat 12px center / 20px; color: #f2f7f9; }
#clear-term { right: 9px; top: 10px; padding: 12px; background-position: center; background-size: 11px; }
#logo { display: block; height: auto; width: auto; max-width: min(16vw, 160px); max-height: 73px; margin: 0 auto; object-fit: contain; }
#site-title { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; margin: 2px auto 13px; padding: 0 12px; color: var(--reader-accent); }
#change-fonts, #change-color {
  position: relative;
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 5px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
}
#change-color { text-align: center; }
#change-color-icon { margin-right: 8px; width: 22px; }
#divider { flex: 0 0 1px; height: 30px; margin: 0; }
.Aa { color: var(--reader-accent); font-size: 22px; margin-right: 6px; }
.aafont, .color-theme { font-size: 12px; font-weight: 600; }
.grediant-top, .msie .grediant-top { -webkit-text-fill-color: currentColor; background: none; color: var(--reader-accent); }

/* Make old compact/transformed dropdown labels readable. */
.hover-dropdown {
  min-width: 205px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: min(65vh, 480px);
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--reader-border);
  padding: 9px;
  font: 13px/1.4 Montserrat, system-ui, sans-serif;
  color: var(--reader-text);
  z-index: 150;
}
.day .hover-dropdown { background: #fff; box-shadow: 0 16px 38px rgba(20, 48, 63, .18); }
.night .hover-dropdown { background: #263b45; box-shadow: 0 16px 38px rgba(0,0,0,.3); }
.hover-dropdown::after { display: none; }
.hover-dropdown > ul, #change-fonts .hover-dropdown > ul { margin: 0; padding: 0; }
.hover-dropdown > ul > li, #change-fonts .hover-dropdown > ul > li,
#change-reciter .hover-dropdown > ul > li, #foot-menu .hover-dropdown > ul > li {
  font: 13px/1.45 Montserrat, system-ui, sans-serif;
  text-align: left;
  transform: none;
  height: auto;
  position: static;
  width: auto;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  text-transform: none;
}
.day .hover-dropdown > ul > li { color: #264250; }
.night .hover-dropdown > ul > li { color: #d7eaef; }
#change-fonts.active > .hover-dropdown, #change-color.active > .hover-dropdown {
  position: absolute;
  margin: 0;
  top: calc(100% + 15px);
  bottom: auto;
}
#change-fonts.active > .hover-dropdown { left: 0; right: auto; }
#change-color.active > .hover-dropdown { right: 0; left: auto; width: 260px; }
.color-text, .night-text { margin: 8px 6px 14px; line-height: 1.4; }
.color-item { position: relative; float: none; display: inline-block; width: 35px; height: 43px; margin: 0 4px 0 0; }
.color-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(80,100,105,.13); }
.color-radio + label { position: absolute; top: 2px; left: 3px; bottom: auto; width: 30px; height: 31px; margin: 0; }
.color-radio + label span { margin: 7px 0 0 5px; }
.night-section { clear: both; padding: 7px 5px 2px; }
.night-mode + label { display: inline-block; position: static; margin: 0; }
.night-mode + label span { margin: 0; display: block; width: 45px; height: 32px; }

/* Reader: clean individual columns without replacing the JavaScript engine. */
#wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 14px;
  max-width: 1680px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #8db2bd transparent;
  overscroll-behavior-x: contain;
}
#wrapper .block { float: none; min-width: 0; flex: 0 0 auto; overflow: visible; }
#wrapper .block-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100% - 10px);
  min-height: 0;
  margin: 0 7px 8px;
  border: 1px solid var(--reader-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(21, 53, 67, .075);
}
.day .block-inner { background: var(--reader-paper); }
.night .block-inner { background: var(--reader-paper); }
.block-inner .translation {
  flex: 0 0 46px;
  box-sizing: border-box;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 5px 14px;
  cursor: grab;
  border-bottom: 1px solid var(--reader-line);
}
.block-inner .translation .list, #wrapper .block-inner .translation .list {
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: none;
  left: 0;
  margin: 0;
}
.block .translation-select { margin: 0; border: 1px solid var(--reader-border); border-radius: 9px; }
.day .block .translation-select { background: #f3f7f8; }
.night .block .translation-select { background: #2a3e47; }
.block .translation-select li { box-sizing: border-box; font-size: 12px; padding: 7px 12px; line-height: 1.35; }
.block .translation-select li.translation-text { padding: 7px 24px 7px 12px; }
.translation-text-span, .six .translation-text-span, .seven .translation-text-span { font-size: 12px; font-weight: 600; }
/* Translation chooser: show the complete translator list at once.
   The legacy card used overflow:hidden, which clipped the expanded UL and
   also prevented its internal scrollbar from being useful. */
#wrapper .block-inner:has(.translation-select.active) {
  overflow: visible;
  z-index: 220;
}
#wrapper .block-inner:has(.translation-select.active) .translation,
#wrapper .block-inner:has(.translation-select.active) .translation-list {
  overflow: visible;
}
.block .translation-select.active {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 240;
  width: max(100%, 320px);
  max-width: min(390px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 4px 0 6px;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 48, 63, .22);
}
.block .translation-select.active li {
  display: block;
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 6px 12px;
  line-height: 1.25;
}
.block .translation-select.active li.clearfix {
  height: 0;
  min-height: 0;
  padding: 0;
}
.block .translation-select.active li.translation-text {
  position: sticky;
  top: 0;
  z-index: 2;
}
.close-btn { right: 12px; top: 14px; z-index: 5; width: 25px; height: 25px; border-radius: 7px; }
#close-translation { display: block; width: 24px; height: 24px; padding: 0; background: url('theme/close-gray.png') no-repeat center / 12px; }
.lang-Arabic #close-translation { padding: 0; background-position: center; }
.lang-Arabic .close-btn { right: 12px; top: 14px; }
.night #close-translation { background-image: url('theme/dark-close.png'); }
.chapter {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  padding: 8px 7px;
  background: var(--reader-soft);
  color: var(--reader-accent);
  border-bottom: 1px solid var(--reader-border);
}
.chapter .nav-container, .six .nav-container, .seven .nav-container {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 30px;
  justify-content: center;
  align-items: center;
  width: 30px;
  margin: 0;
  padding: 2px;
  height: 32px;
}
.chapter .right-nav, .chapter .left-nav { display: block; flex: 0 0 14px; width: 14px; height: 24px; padding: 0; background-size: contain; background-position: center; }
.chapter .title-container, .six .title-container, .seven .title-container {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
}
.chapter .title-container p { margin: 4px 0; }
.chapter .scoller-main-title, .three .scoller-main-title, .five .scoller-main-title,
.six .scoller-main-title, .seven .scoller-main-title {
  color: var(--reader-accent);
  font-size: clamp(14px, 1.4vw, 19px);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.title-container .sub-title, .one .title-container .sub-title, .two .title-container .sub-title,
.three .title-container .sub-title, .four .title-container .sub-title,
.five .title-container .sub-title, .six .title-container .sub-title,
.seven .title-container .sub-title { color: var(--reader-muted); font-size: 12px; line-height: 1.4; }
.chapter .verses { display: inline; white-space: nowrap; }
.block-inner .scollers-nano { flex: 1 1 auto; min-height: 0; height: auto; }
.block-inner .scollers-nano.nano > .nano-content { box-sizing: border-box; height: 100% !important; padding: 0 14px 0 0; }
.lang-Arabic .nano .nano-content { padding-left: 14px; padding-right: 0; }
.line, .commentary { /* Keep the legacy jQuery equal-height synchronizer's content-box geometry. */
  box-sizing: content-box; display: flex; gap: 12px; align-items: flex-start; padding: 16px 13px; line-height: 1.7; }
.day .line { border-bottom: 1px solid var(--reader-line); }
.night .line { border-bottom: 1px solid var(--reader-line); }
.lines .line .verse-no {
  box-sizing: border-box;
  background: var(--reader-soft) !important;
  color: var(--reader-accent);
  flex: 0 0 35px;
  float: none;
  width: 35px;
  max-height: none;
  min-height: 29px;
  height: auto;
  margin: 0;
  padding: 5px 0 !important;
  text-align: center;
  line-height: 19px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  border-radius: 10px;
}
.line .verse-content, .commentary .verse-content {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 0;
  font-family: HelveticaNeue, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  text-align: start;
  overflow-wrap: break-word;
  color: var(--reader-text);
}
.lang-Arabic .line .verse-content {
  font-family: AdobeArabic, 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: clamp(25px, 2vw, 31px);
  line-height: 1.85;
  direction: rtl;
  text-align: right;
}
.night .lines { color: var(--reader-text); }
.day .line.current { background: #e6f3f4; }
.night .line.current { background: #314e57; }
.synched_warp {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 39px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--reader-muted);
  border-top: 1px solid var(--reader-line);
}
.day .synched_warp { background: #f3f7f8; }
.night .synched_warp { background: #263b45; }
.synched_warp .synched + label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.synched_warp .synched + label .synched-button { box-sizing: border-box; margin: 0 8px 0 0; padding: 0; width: 19px; height: 20px; background-size: 16px; background-position: center; }
.add-scroller-btn { z-index: 6; top: 23px; width: 19px; height: 19px; }

/* Footer: visible controls, with no absolute-position overlap. */
#foot {
  box-sizing: border-box;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: auto;
  min-height: 57px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--reader-border);
  box-shadow: 0 -4px 20px rgba(17, 48, 69, .07);
  background: var(--reader-ui);
  line-height: 1.3;
}
.day.default-color #foot { background: #fff; }
.night.default-color #foot { background: #243640; }
#foot .foot-item { position: relative; left: auto; right: auto; flex: 0 0 auto; font-size: 13px; line-height: 1.4; }
#reciter { min-width: 0; display: flex; gap: 12px; align-items: center; }
#change-reciter, #surah-no, #verse-no { float: none; padding: 0; white-space: nowrap; }
#change-reciter { position: relative; display: flex; align-items: center; border-radius: 9px; cursor: pointer; }
#reciter-icon { display: inline-block; margin: 0 5px 0 0; background-position: center; background-size: 19px; padding: 14px; }
#reciter-down { display: inline-block; margin: 0 0 0 2px; background-position: center; padding: 12px; background-size: 10px; }
#verse-no input, #surah-no input {
  box-sizing: border-box;
  width: 40px;
  max-width: 40px;
  margin-left: 3px;
  padding: 5px 3px;
  text-align: center;
  border-radius: 7px;
  border: 1px solid var(--reader-border);
  background: var(--reader-paper);
  color: var(--reader-text);
}
#player { left: auto; margin: 0; white-space: nowrap; }
#foot-menu { position: relative; right: auto; margin-left: auto; }
#foot-menu-icon { display: block; width: 36px; height: 33px; padding: 0; margin: 0; background-position: center; background-size: 28px; border-radius: 8px; }
#reciter.active .hover-dropdown, #foot-menu.active > .hover-dropdown {
  position: absolute;
  bottom: calc(100% + 16px);
  top: auto;
  margin: 0;
  max-height: min(65vh, 420px);
}
#reciter.active .hover-dropdown { left: 0; right: auto; width: 295px; }
#foot-menu.active > .hover-dropdown { right: 0; left: auto; }

/* Modal windows and chapter selector. */
.filter { position: fixed; inset: 0; width: 100%; height: 100%; }
.popup { border: 1px solid var(--reader-border); border-radius: 16px; max-width: calc(100vw - 24px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.popup > .title { box-sizing: border-box; height: 48px; padding: 11px 18px; font-size: 16px; line-height: 1.6; background: #177f8c; }
.day .popup > .title, .night .popup > .title { color: #fff; }
.popup > .closebt { top: 17px; right: 15px; width: 17px; height: 17px; }
#dict, #random-verse, #suwar-index .popup {
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  margin-left: 0;
  left: 50%;
  transform: translateX(-50%);
}
#dict { width: min(660px, calc(100vw - 24px)); height: min(65vh, 600px); top: 14%; }
#random-verse { width: min(550px, calc(100vw - 24px)); height: min(58vh, 490px); top: 19%; }
#suwar-index .popup { width: min(750px, calc(100vw - 24px)); height: min(80vh, 720px); top: 10%; }
#suwar-index .f-content { box-sizing: border-box; }
.surah-list tr { cursor: pointer; }
.surah-list th, .surah-list td { padding: 10px 12px; }
.surah-list .verses-number { white-space: nowrap; }
.tag-font { font-size: 11px; transform: none; }
.back-item .tag, .reload-item .tag, .close-btn .tag, .add-scroller-btn .tag { width: auto; height: auto; background: #234a56; color: #fff; padding: 7px 9px; transform: none; border-radius: 6px; line-height: 1.3; }

@media (max-width: 1050px) {
  #head { grid-template-columns: minmax(0, 1fr) auto minmax(0, .9fr); gap: 14px; padding: 12px 12px 7px; }
  #head .head-item.bar { padding: 8px; }
  .top-left-bar, .top-right-bar { gap: 6px; }
  .aafont, .color-theme { font-size: 11px; }
  #logo { max-width: 108px; max-height: 58px; }
  #wrapper { padding: 0 7px; }
  #wrapper .block-inner { margin: 0 5px 8px; }
}

@media (max-width: 760px) {
  #head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo settings" "search search";
    gap: 8px 12px;
    padding: 9px 12px 5px;
  }
  #head > .logo-sec { justify-self: start; }
  #head > .right-bar { width: auto; min-width: 145px; }
  #head > .left-bar { width: 100%; }
  #head .head-item.bar { min-height: 52px; border-radius: 14px; }
  #logo { margin: 0; max-width: 130px; max-height: 58px; }
  #site-title { font-size: 17px; margin: 1px auto 9px; }
  #change-fonts, #change-color { padding: 6px; }
  #change-color-icon { margin-right: 0; width: 22px; }
  .aafont, .color-theme { display: none; }
  #change-fonts .Aa { font-size: 24px; margin: 0; }
  #divider { height: 24px; }
  #wrapper { padding: 0 7px; scroll-snap-type: x proximity; }
  #wrapper .block { scroll-snap-align: start; }
  .chapter .scoller-main-title, .three .scoller-main-title,
  .five .scoller-main-title, .six .scoller-main-title, .seven .scoller-main-title { font-size: 17px; }
  #foot { padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px)); min-height: 56px; gap: 7px; }
  #reciter { gap: 8px; }
  #foot .foot-item { font-size: 12px; }
}

@media (max-width: 500px) {
  body { font-size: 14px; }
  #head { padding: 7px 10px 4px; }
  #head .head-item.bar { min-height: 49px; }
  #logo { max-width: 125px; max-height: 54px; }
  .top-left-bar { gap: 5px; }
  .top-left-bar-item.back-item, .top-left-bar-item.reload-item { width: 34px; min-width: 34px; }
  #back, #reload { width: 34px; height: 36px; background-size: 18px auto; }
  #head #search-input { height: 38px; padding: 7px 30px 7px 38px; font-size: 13px; }
  #site-title { font-size: 16px; margin-bottom: 7px; }
  #wrapper { padding: 0 5px; }
  .line, .commentary { padding: 13px 11px; gap: 10px; }
  .line .verse-content { font-size: 16px; }
  .lang-Arabic .line .verse-content { font-size: 27px; }
  #foot { display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "reciter menu" "player player"; align-items: center; }
  #foot #reciter { grid-area: reciter; min-width: 0; width: 100%; gap: 6px; }
  #foot #player { grid-area: player; justify-self: center; margin: 0; }
  #foot #foot-menu { grid-area: menu; justify-self: end; margin: 0; }
  #reciter-icon, #reciter-down, #change-reciter-label .light { display: none; }
  #change-reciter { display: block; flex: 1 1 auto; min-width: 0; max-width: 115px; overflow: visible; }
  #change-reciter-label { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
  #surah-no, #verse-no { flex: 0 0 auto; font-size: 11px; }
  #surah-no input, #verse-no input { width: 32px; max-width: 32px; padding: 4px 2px; font-size: 12px; }
  #reciter.active .hover-dropdown { position: fixed; left: 10px; right: 10px; bottom: 70px; width: auto; }
  #foot-menu.active > .hover-dropdown { position: fixed; right: 10px; bottom: 70px; }
  #change-color.active > .hover-dropdown { right: -4px; }
  #random-verse { top: 12%; height: min(68vh, 490px); }
  #suwar-index .popup { top: 6%; height: 86%; }
}