/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

:root {
  --bg: #0b1220;
  --panel: #0f1a2b;
  --panel2: #0c1626;
  --text: #e8eefc;
  --muted: #a9b6d3;
  --brand: #46d39a;
  --line: rgba(255, 255, 255, 0.1);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --sidebarWOpen: 240px;
  --rightW: 320px;

  /* Middle content (light mode) */
  --mainBg: #f6f8fc;
  --mainText: #101828;
  --mainMuted: #475467;
  --mainLine: rgba(16, 24, 40, 0.12);
}

body {
  background: radial-gradient(
      800px 500px at 30% 10%,
      rgba(70, 211, 154, 0.12),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at 80% 30%,
      rgba(91, 162, 255, 0.1),
      transparent 55%
    ),
    var(--bg) !important;
  color: var(--text);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--brand);
}

.app-shell {
  display: flex;
  gap: 18px;
  padding: 18px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Desktop Left Sidebar */
.leftbar {
  position: sticky;
  top: 18px;
  align-self: flex-start;
  width: var(--sidebarWOpen);
  height: calc(100vh - 36px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.25s ease;
  padding: 12px 10px;
}

.leftbar .brand-text,
.leftbar .navlabel,
.leftbar .langbox .lang-title,
.leftbar .lang-buttons .btn .lang-text {
  opacity: 1;
  transform: none;
  width: auto;
}

.brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 211, 154, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.brand-logo img {
  width: 28px;
  height: 28px;
  display: block;
}

.brand-text {
  white-space: nowrap;
  overflow: hidden;
}
.brand-text h6 {
  margin: 0;
  font-weight: 800;
}
.brand-text small {
  color: var(--muted);
}

/* Nav items - FIX icon centering */
.navlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
.navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.navitem:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
}
.navitem.active {
  background: rgba(70, 211, 154, 0.12);
  border-color: rgba(70, 211, 154, 0.28);
}

.navicon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center; /* <-- icon centered */
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #d6e3ff;
  font-size: 18px;
}

.navlabel {
  white-space: nowrap;
  overflow: hidden;
}

/* Language selector - FIX collapsed state */
/* (Language switch moved to top bar) */
.langbox {
  display: none !important;
}

.main {
  flex: 1;
  min-width: 0;
  background: var(--mainBg);
  color: var(--mainText);
  border: 1px solid var(--mainLine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  height: 100%;
}

/* Light-mode overrides inside the middle panel */
.main .muted {
  color: var(--mainMuted);
}
.main .badge-soft {
  background: rgba(16, 24, 40, 0.04);
  border-color: var(--mainLine);
  color: var(--mainMuted);
}
.main .card-soft {
  background: #ffffff;
  border-color: var(--mainLine);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}
.main a:hover {
  color: #1d4ed8;
}
.main .btn-ghost {
  border-color: var(--mainLine);
  background: rgba(16, 24, 40, 0.03);
  color: var(--mainText);
}
.main .btn-ghost:hover {
  border-color: rgba(29, 78, 216, 0.35);
  background: rgba(29, 78, 216, 0.08);
  color: var(--mainText);
}

.rightbar {
  position: sticky;
  top: 18px;
  align-self: flex-start;
  width: var(--rightW);
  height: calc(100vh - 36px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow: auto;
}

.page-hero {
  padding: 14px 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(
    135deg,
    rgba(70, 211, 154, 0.12),
    rgba(91, 162, 255, 0.1)
  );
}
.page-hero h1 {
  font-weight: 900;
  margin-bottom: 8px;
}
.page-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  max-width: 900px;
}

.main .page-hero {
  border-color: var(--mainLine);
  background: linear-gradient(
    135deg,
    rgba(29, 78, 216, 0.08),
    rgba(34, 197, 94, 0.08)
  );
}
.main .page-hero p {
  color: var(--mainMuted);
}

.section-head {
  display: flex;
  align-items: start;

  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.section-head h4 {
  margin: 0;
  font-weight: 900;
}

.badge-soft {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.card-soft {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}
.book-cover {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}
.muted {
  color: var(--muted);
}

.btn-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: rgba(70, 211, 154, 0.35);
  background: rgba(70, 211, 154, 0.08);
  color: var(--text);
}

.featured-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.featured-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease,
    background 0.12s ease;
}
.featured-item:hover {
  transform: translateY(-1px);
  border-color: rgba(70, 211, 154, 0.25);
  background: rgba(70, 211, 154, 0.06);
}
.featured-item small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

/* Mobile Topbar */
/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-brand img {
  width: 28px;
  height: 28px;
}
.topbar-brand .t {
  font-weight: 900;
  line-height: 1;
}
.topbar-brand .s {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lang-switch {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Book detail */
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdf-frame {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

/* Tablet & Mobile: side panels become offcanvas drawers */
@media (max-width: 992px) {
  .app-shell {
    padding-top: 12px;
  }
  .leftbar,
  .rightbar {
    display: none;
  }
  .topbar .wrap {
    padding: 10px 12px;
  }
}

/* Subtle entry animation for page content */
.page-enter {
  animation: fadeUp 0.22s ease forwards;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Offcanvas drawers (Left/Right on tablet & mobile) */
.drawer {
  background: rgba(11, 18, 32, 0.98) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.drawer .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.drawer .offcanvas-body {
  padding: 14px;
}
.drawer .leftbar,
.drawer .rightbar {
  display: block !important;
  position: static;
  width: 100% !important;
  height: auto !important;
  box-shadow: none;
}

/* ===== Fix: ensure middle (light) panel fills full height ===== */
html,
body {
  height: 100%;
}
body {
  min-height: 100vh;
}
.app-shell {
  align-items: stretch;
}
.main {
  min-height: calc(100vh - 36px);
  display: block;
}

/* ===== Nice point lists for article details ===== */
.points {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.points li {
  line-height: 1.6;
}

/* ===== Video card play overlay ===== */
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  opacity: 0.95;
}
.video-play i {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(16, 24, 40, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ===== Hover micro-animation helpers ===== */
.hover-rise {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hover-rise:hover {
  transform: translateY(-2px);
}

/* ===== Book language list UI ===== */
.lang-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}
.lang-pill {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.82);
  color: var(--mainText);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.lang-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.35);
}
.lang-pill.active {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.12);
}

/* ===== RTL fixes ===== */
[dir="rtl"] .section-head {
  direction: rtl;
}
[dir="rtl"] .section-head a.btn i.fa-arrow-left {
  transform: rotate(180deg);
}
[dir="rtl"] .muted,
[dir="rtl"] .main {
  text-align: right;
}
[dir="rtl"] .points {
  padding-inline-start: 0;
  padding-inline-end: 1.1rem;
}
[dir="rtl"] .d-flex.gap-2 .me-1,
[dir="rtl"] .d-flex.gap-2 .me-2,
[dir="rtl"] .me-1,
[dir="rtl"] .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* ===== Topbar language buttons ===== */
.lang-switch .btn-soft {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 12px;
}
.lang-switch .btn-soft.active {
  background: rgba(70, 211, 154, 0.18);
  border-color: rgba(70, 211, 154, 0.45);
  color: var(--text);
}

.modal-backdrop.show {
  background: rgba(11, 18, 32, 0.85);
  display: none;
}

/* ===== Home middle quick cards: centered grid and card styling (matches mock) ===== */
.home-quick-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(29, 78, 216, 0.03),
    rgba(34, 197, 94, 0.02)
  );
  border: 1px solid var(--mainLine);
}
.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.home-quick-card a.card-soft {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  height: 100%;
}
.home-quick-card .navicon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(70, 211, 154, 0.1),
    rgba(29, 78, 216, 0.06)
  );
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #ffffff;
  font-size: 20px;
}
.home-quick-card .fw-bold {
  font-size: 15px;
}
.home-quick-card .quick-sub {
  font-size: 13px;
  margin-top: 2px;
  color: var(--mainMuted);
}

@media (min-width: 1200px) {
  .home-quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .home-quick-wrapper {
    padding: 12px;
  }
  .home-quick-card .navicon {
    width: 48px;
    height: 48px;
    font-size: 18px;
    border-radius: 12px;
  }
}

/* ===== Dark panel wrapper for info + quick grid ===== */
.home-dark-panel {
  background: linear-gradient(349deg, rgba(11, 18, 32, 0.96), rgb(33 63 64));
  border-radius: 16px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 18px;
}
.home-dark-panel .section-head {
  color: var(--text);
}
.home-dark-panel .section-head h4 {
  color: #ffffff;
}
.home-dark-panel .section-head .muted {
  color: rgba(255, 255, 255, 0.78);
}

/* make quick wrapper blend into dark panel */
.home-dark-panel .home-quick-wrapper {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 980px;
}
.home-dark-panel .home-quick-card a.card-soft {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.home-dark-panel .home-quick-card .fw-bold {
  color: #fff;
}
.home-dark-panel .home-quick-card .quick-sub {
  color: rgba(255, 255, 255, 0.72);
}
.home-dark-panel .home-quick-card .navicon {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}