/* =========================
   EDUCATION BOTTOM NAV
========================= */
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;

html, body {
    overflow-x: hidden !important;
}
body {
  overflow-x: hidden;
  padding-bottom: 72px !important;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.custom-bottom-nav,
.custom-bottom-nav *,
.search-sheet,
.search-sheet *,
.share-sheet,
.share-sheet *,
.share-overlay,
.swipe-overlay,
.swipe-overlay * {
  box-sizing: border-box;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.custom-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  padding: 8px 10px 10px !important;
  pointer-events: none;
}

.custom-bottom-nav .bottom-nav {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  width: min(980px, 100%);
  height: 60px;
  margin: 0 auto;
  overflow: visible;
  background:
    linear-gradient(135deg, rgba(20, 24, 39, 0.96), rgba(37, 48, 65, 0.94) 48%, rgba(74, 58, 42, 0.96));
  border: 1px solid rgba(250, 204, 21, 0.22);
  border-radius: 18px;
  box-shadow:
    0 -18px 50px rgba(15, 23, 42, 0.2),
    0 16px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease;
  will-change: transform;
  pointer-events: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.custom-bottom-nav .bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.18), transparent 34%, rgba(14, 116, 144, 0.16));
  pointer-events: none;
}

.custom-bottom-nav .nav-item,
.custom-bottom-nav .more-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.custom-bottom-nav .nav-item,
.custom-bottom-nav .more-menu .nav-item {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 5px;
  color: #dbeafe !important;
  text-decoration: none !important;
  border-radius: 14px;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.custom-bottom-nav .nav-item:hover,
.custom-bottom-nav .more-menu:hover > .nav-item,
.custom-bottom-nav .nav-item:focus-visible {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  outline: none !important;
}

.custom-bottom-nav .nav-item.active,
.custom-bottom-nav .more-menu .nav-item.active,
.custom-bottom-nav .more-menu.active > .nav-item {
  color: #1f1300 !important;
  background: linear-gradient(135deg, #f59e0b, #fde68a) !important;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.28);
}

.custom-bottom-nav .nav-item:active {
  background: rgba(250, 204, 21, 0.22) !important;
}

.custom-bottom-nav .icon {
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.custom-bottom-nav .icon svg,
.bottom-nav .nav-item svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor !important;
}

.custom-bottom-nav .label {
  display: block;
  max-width: 100%;
  margin-top: 1px;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.custom-bottom-nav .nav-indicator {
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 2;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #22c55e, #38bdf8);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.42);
  transition: 0.25s ease;
}

/* More menu */
.custom-bottom-nav .more-menu {
  position: relative;
}

.custom-bottom-nav .more-dropdown {
  position: absolute;
  right: 0;
  bottom: 68px;
  display: none;
  min-width: 218px;
  padding: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.24);
  z-index: 999999;
}

.custom-bottom-nav .more-menu.active .more-dropdown {
  display: block;
}

.custom-bottom-nav .more-dropdown a {
  display: block;
  padding: 11px 12px;
  color: #172033;
  text-decoration: none;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.custom-bottom-nav .more-dropdown a:hover {
  color: #0f766e;
  background: linear-gradient(135deg, #fff7ed, #ecfeff);
  transform: translateX(3px);
}

/* Dark mode toggle button */
.theme-toggle-wrapper {
  position: fixed;
  right: 14px;
  bottom: 78px;
  z-index: 999998;
}

.theme-toggle {
  padding: 9px 13px;
  color: #fef3c7;
  background: linear-gradient(135deg, #172033, #334155);
  border: 1px solid rgba(250, 204, 21, 0.32);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* Search overlay and sheet */
#searchOverlay {
  position: fixed;
  inset: 0;
  z-index: 999990;
  display: none;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#searchOverlay.active {
  display: block;
}

.search-sheet {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 999991;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(680px, calc(100vw - 32px));
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.94);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.search-sheet.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.search-popup-message {
  text-align: center;
}

.plain-heading {
  margin: 0 0 16px;
  color: #172033;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.search-wrapper {
  position: relative;
  width: 100%;
}

.book-search {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

#chapterSearch {
  width: 100%;
  min-height: 48px;
  padding: 12px 44px 12px 14px;
  color: #172033;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  font-size: 14px;
  outline: none;
}

#chapterSearch:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.search-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #64748b;
}

#searchResults {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 999992;
  width: 100%;
  max-height: 320px;
  margin-top: 12px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.search-sheet .book-search,
.search-sheet .book-search *,
.search-sheet .book-search a,
.search-sheet .book-search li,
.search-sheet .book-search div,
.search-sheet .book-search span {
  color: #172033 !important;
}

.search-item {
  padding: 12px 14px;
  color: #172033;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.2s ease, padding-left 0.2s ease;
}

.search-item:hover,
.search-item.active {
  background: linear-gradient(135deg, #fff7ed, #ecfeff);
  padding-left: 18px;
}

.search-item mark,
.search-sheet .book-search mark {
  padding: 0 3px;
  background: #fde68a;
  border-radius: 4px;
  color: #111827 !important;
}

.search-item:empty {
  display: none;
}

/* Share popup */
.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 999990;
  display: none;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.share-overlay.active {
  display: block;
}

.share-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999991;
  width: min(380px, calc(100vw - 32px));
  padding: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.share-sheet.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.share-handle {
  width: 46px;
  height: 5px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, #f59e0b, #0f766e);
  border-radius: 999px;
}

h3 {

    font-size:15px; 
    padding-bottom:20px;
 }

.share-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-options button,
.share-options a {
  display: block;
  width: 100%;
  padding: 12px 14px;
  color: #172033;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, #fff7ed, #f8fafc);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.share-options button:hover,
.share-options a:hover {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.36);
  transform: translateY(-2px);
}

/* Swipe helper */
.swipe-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.62);
  animation: fadeIn 0.3s ease;
}

.swipe-box {
  width: min(300px, 82vw);
  padding: 22px 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
}

.swipe-arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.arrow {
  color: #f59e0b;
  font-size: 28px;
  animation: move 1s infinite alternate;
}

.arrow.right {
  animation-delay: 0.2s;
}

.gesture {
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.swipe-box p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

@keyframes move {
  from {
    opacity: 0.55;
    transform: translateX(0);
  }

  to {
    opacity: 1;
    transform: translateX(8px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .custom-bottom-nav {
    padding: 7px 8px 9px !important;
  }

  .custom-bottom-nav .bottom-nav {
    height: 52px;
    border-radius: 17px;
  }

  .custom-bottom-nav .label {
    display: none;
  }

  .custom-bottom-nav .nav-item,
  .custom-bottom-nav .more-menu .nav-item {
    gap: 0;
    padding: 6px 4px;
  }

  .custom-bottom-nav .icon {
    width: 23px;
    height: 23px;
  }

  .custom-bottom-nav .icon svg,
  .bottom-nav .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .custom-bottom-nav .more-dropdown {
    right: 0;
    bottom: 64px;
    min-width: 206px;
  }

  .theme-toggle-wrapper {
    right: 10px;
    bottom: 74px;
  }

  .theme-toggle {
    padding: 8px 11px;
    font-size: 10.5px;
  }

  .search-sheet {
    top: 10%;
    width: calc(100vw - 20px);
    padding: 18px;
    border-radius: 20px;
  }

  .plain-heading {
    font-size: 18px;
  }

  #chapterSearch {
    font-size: 13.5px;
  }

  .search-item,
  .share-options button,
  .share-options a,
  .custom-bottom-nav .more-dropdown a {
    font-size: 12.5px;
  }

  .share-sheet {
    width: calc(100vw - 28px);
    padding: 16px;
    border-radius: 20px;
  }
}

body.dark-mode .custom-bottom-nav .bottom-nav {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.97), rgba(15, 23, 42, 0.96) 48%, rgba(36, 30, 24, 0.96));
}

body.dark-mode .search-sheet,
body.dark-mode .custom-bottom-nav .more-dropdown,
body.dark-mode .share-sheet,
body.dark-mode .swipe-box {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96));
  border-color: rgba(71, 85, 105, 0.88);
}

body.dark-mode .plain-heading,
body.dark-mode .custom-bottom-nav .more-dropdown a,
body.dark-mode .share-options button,
body.dark-mode .share-options a,
body.dark-mode .gesture {
  color: #f8fafc;
}

body.dark-mode #chapterSearch {
  color: #f8fafc;
  background: #0f172a;
  border-color: #475569;
}

body.dark-mode #searchResults,
body.dark-mode .share-options button,
body.dark-mode .share-options a {
  background: #0f172a;
  border-color: #475569;
}

body.dark-mode .search-item,
body.dark-mode .search-sheet .book-search,
body.dark-mode .search-sheet .book-search *,
body.dark-mode .search-sheet .book-search a {
  color: #f8fafc !important;
}

body.dark-mode .search-item {
  border-bottom-color: #334155;
}

body.dark-mode .swipe-box p {
  color: #cbd5e1;
}



/* ==========================
   WORDPRESS COMMENTS
========================== */

.wp-block-comments,
#comments {
    max-width: 900px;
    margin: 40px 0;
}

#respond {
    max-width: 700px;
    margin: 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

.wp-block-comments .comment-reply-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

.wp-block-comments .comment-notes,
.wp-block-comments .logged-in-as {
    font-size: 14px;
    margin-bottom: 12px;
}

.wp-block-comments label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.wp-block-comments textarea,
.wp-block-comments input[type="text"],
.wp-block-comments input[type="email"],
.wp-block-comments input[type="url"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.wp-block-comments textarea {
    height: 80px;
    min-height: 80px;
    resize: vertical;
}

.wp-block-comments input[type="text"],
.wp-block-comments input[type="email"],
.wp-block-comments input[type="url"] {
    height: 38px;
}

.wp-block-comments .form-submit {
    margin-top: 12px;
}

.wp-block-comments .submit,
.wp-block-comments input[type="submit"] {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
}

.wp-block-comments .submit:hover,
.wp-block-comments input[type="submit"]:hover {
    opacity: .9;
}

/* ==========================
   MOBILE
========================== */

@media (max-width: 768px) {

    .wp-block-comments,
    #comments {
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
    }

    #respond {
           max-width: 450px;
           width: 100%;
           margin: 0;
           padding: 15px;
           box-sizing: border-box;
    }

    .wp-block-comments textarea,
    .wp-block-comments input[type="text"],
    .wp-block-comments input[type="email"],
    .wp-block-comments input[type="url"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .wp-block-comments textarea {
        height: 80px;
        min-height: 80px;
    }

    .wp-block-comments .comment-reply-title {
        font-size: 24px;
    }

    .wp-block-comments .comment-notes,
    .wp-block-comments .logged-in-as {
        font-size: 14px;
    }