/* ==========================================================================
   Hezartoo theme — nostalgic glassmorphism, fully responsive, RTL/LTR aware.
   Converted to nested LESS format.
   ========================================================================== */
/* ---- Fonts ---- */
@font-face {
  font-family: "B Homa";
  src: url("/font/BHoma.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ---- Design tokens ---- */
:root {
  --panel: rgba(255, 255, 255, 0.8);
  --panel-strong: rgba(255, 255, 255, 0.9);
  --panel-border: rgba(255, 255, 255, 0.6);
  --glow: rgba(83, 93, 235, 0.28);
  --glow-strong: rgba(83, 93, 235, 0.45);
  --ink: #20242a;
  --muted: #5c6470;
  --brand-red: #c41e3a;
  --accent: #1f7a4d;
  --accent-dark: #155c39;
  --line: rgba(0, 0, 0, 0.08);
  /* Two-tone separators: a darker line under the upper item and a lighter
       line over the item below give every solid divider an engraved, 3D feel. */
  --sep-dark: rgba(210, 210, 210, 0.8);
  --sep-light: rgba(240, 240, 240, 0.9);
  --btn-bgcolor: rgba(31, 122, 77, 0.12);
  --btn-shadow: 3px 3px 5px #aaa;
  --btn-shadow-hover: 4px 4px 7px #aaa;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: #55f 0px 0px 10px;
  --shadow-hover: 0 6px 22px var(--glow-strong);
  --space: clamp(16px, 2.5vw, 28px);
  --container: 1180px;
  --font-fa: "B Homa", Arial, Tahoma, Vazirmatn, system-ui, sans-serif;
  --font-en: "B Homa", Arial, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--accent-dark);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ---- Base / background ---- */
html {
  font-size: 16px;
}
body {
  font-family: var(--font-en);
  color: var(--ink);
  line-height: 1.8;
  background: url("/img/background.jpg") no-repeat center bottom fixed;
  background-size: cover;
  /* RTL Contexts */
  /* A soft veil so text panels stay readable over any background photo. */
}
body[dir="rtl"],
body[lang="fa"] {
  font-family: var(--font-fa);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(20, 60, 40, 0.18));
  z-index: -1;
}
/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space);
}
.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space);
  align-items: start;
  padding-block: var(--space);
}
.layout--single {
  grid-template-columns: 1fr;
}
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
}
.content {
  min-width: 0;
}
.sidebar {
  display: grid;
  gap: var(--space);
}
.sidebar .ad-slot {
  margin: 0 0 var(--space);
}
/* ---- Glass panel ---- */
.panel {
  /* The panel box itself stays transparent: the head, body and foot each
       paint their own band, so the 0.9 head/foot never composite on top of the
       0.8 body. That keeps both colours exact, with no overlap. */
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* Lighter head band. As the top-most item, its bottom edge is the dark
       half of the groove that meets the lighter top edge of the body below. */
  /* Body band — painted on the direct content containers so their children
       sit on the fill and leave no transparent gaps. */
  /* Body band. Light top + dark bottom so the groove forms against the head
       above, the foot below, and any sibling body block in between. */
  /* Lighter decorative bottom strip, mirroring the head band. As the
       bottom-most item, its top edge is the light half of the groove. */
  /* Panels with no head element still get a matching lighter top strip; it
       stands in for the head, so its bottom edge is the dark half. */
}
.panel + .panel {
  margin-top: var(--space);
}
.panel__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--sep-dark);
  background: var(--panel-strong);
  /* A head with no content collapses to a thin strip just taller than
           the corner radius (see the empty heads on ad / link panels). */
}
.panel__head h1,
.panel__head h2,
.panel__head .panel__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-dark);
}
.panel__head:empty {
  min-height: calc(var(--radius) + 5px);
  padding: 0;
  border-bottom: 0;
}
.panel > .panel__body,
.panel > .article-list {
  background: var(--panel);
}
.panel__body {
  padding: 22px;
  border-top: 1px solid var(--sep-light);
  border-bottom: 1px solid var(--sep-dark);
}
.panel::after {
  content: "";
  display: block;
  height: calc(var(--radius) + 5px);
  background: var(--panel-strong);
  border-top: 1px solid var(--sep-light);
}
.panel:not(:has( > .panel__head))::before {
  content: "";
  display: block;
  height: calc(var(--radius) + 5px);
  background: var(--panel-strong);
  border-bottom: 1px solid var(--sep-dark);
}
/* ---- Header ---- */
.site-header {
  padding-top: var(--space);
}
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space);
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--brand-red);
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand__mark {
  font-family: var(--font-fa);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}
@media (max-width: 680px) {
  .brand {
    font-size: 1.35rem;
  }
}
.header-poem {
  flex: 1 1 320px;
  text-align: center;
  min-width: 0;
}
.header-poem img {
  margin-inline: auto;
  opacity: 0.92;
  max-height: 90px;
  width: auto;
}
@media (max-width: 680px) {
  .header-poem {
    order: 3;
    flex-basis: 100%;
  }
}
.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
@media (max-width: 680px) {
  .header-tools {
    order: 2;
  }
}
/* ---- Language switcher ---- */
.lang-switch {
  display: inline-flex;
  gap: 4px;
}
.lang-switch a {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid transparent;
}
.lang-switch a.is-active {
  color: #565;
  background: var(--btn-bgcolor);
  box-shadow: var(--btn-shadow);
}
.lang-switch a:hover {
  text-decoration: none;
  border-color: var(--btn-bgcolor);
}
/* ---- Navigation ---- */
.main-nav {
  margin-top: var(--space);
}
.main-nav a {
  display: block;
  padding: 5px 12px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.main-nav a:hover,
.main-nav a.is-active {
  background: 0, 0, 0, rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
@media (max-width: 680px) {
  .main-nav {
    display: flex;
    flex-direction: column;
  }
  .main-nav__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }
  .main-nav.is-open .main-nav__list {
    display: flex;
  }
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 10px 16px;
}
@media (max-width: 680px) {
  .nav-toggle {
    display: block;
    margin-inline-start: auto;
  }
}
/* ---- Article list ---- */
.article-list {
  display: grid;
  /* No gap: items sit flush so each item's dark bottom edge meets the next
       item's light top edge, forming the 3D groove. */
  gap: 0;
}
.article-item {
  padding: 20px 22px;
  border-top: 1px solid var(--sep-light);
  border-bottom: 1px solid var(--sep-dark);
}
.article-item__title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
}
.article-item__title a {
  color: var(--ink);
}
.article-item__title a:hover {
  color: var(--accent-dark);
}
.article-item__meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.article-item__abstract {
  margin: 0 0 10px;
  color: #34404c;
  text-align: justify;
}
.read-more {
  /* Sit at the reading-end of the card: left in RTL, right in LTR. The auto
       inline-start margin resolves against the card's inherited direction. */
  display: block;
  width: fit-content;
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--accent);
}
/* Language direction helper updates overrides standard behavior */
.dir-rtl {
  direction: rtl;
  text-align: right;
}
.dir-ltr {
  direction: ltr;
  text-align: left;
}
/* ---- Sidebar lists ---- */
.side-links li {
  border-bottom: 1px dashed var(--line);
}
.side-links li:last-child {
  border-bottom: 0;
}
.side-links a {
  display: block;
  padding: 9px 4px;
  color: var(--ink);
  font-size: 0.95rem;
}
.side-links a:hover {
  color: var(--accent-dark);
}
/* ---- Article detail ---- */
.article-head {
  text-align: center;
}
.article-head h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 10px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.article-body {
  font-size: 1.05rem;
  line-height: 2.1;
}
.article-body p {
  margin: 0 0 1.1em;
  text-align: justify;
}
.article-body img {
  border-radius: var(--radius-sm);
  margin-block: 1em;
}
.article-figure {
  margin: 0 0 var(--space);
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space);
}
.tag {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  background: rgba(31, 122, 77, 0.12);
  color: var(--accent-dark);
}
.other-langs {
  margin-top: 16px;
  font-size: 0.9rem;
}
.badge-premium {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
/* ---- Books ---- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space);
}
.book-card {
  display: flex;
  flex-direction: column;
}
.book-card__cover {
  aspect-ratio: 3 / 4;
  background: rgba(0, 0, 0, 0.05);
  display: grid;
  place-items: center;
  color: var(--muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}
.book-card__title {
  font-weight: 700;
  margin: 0 0 4px;
}
.book-card__author {
  color: var(--muted);
  font-size: 0.85rem;
}
.book-detail {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space);
}
.book-detail__meta {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.book-detail__meta li {
  padding: 6px 0;
  border-top: 1px solid var(--sep-light);
  border-bottom: 1px solid var(--sep-dark);
  font-size: 0.92rem;
}
@media (max-width: 900px) {
  .book-detail {
    grid-template-columns: 1fr;
  }
}
/* ---- Forms ---- */
.form-row {
  margin-bottom: 16px;
}
.form-row label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.input,
.textarea,
.select {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.15);
}
.textarea {
  min-height: 130px;
  resize: vertical;
}
.btn {
  display: inline-block;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 11px 26px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--btn-bgcolor);
  color: #565;
  box-shadow: var(--btn-shadow);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:hover {
  text-decoration: none;
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* ---- Search ---- */
.search-bar {
  display: flex;
  gap: 10px;
}
.search-bar .input {
  flex: 1;
}
/* ---- Subscription / billing ---- */
.sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space);
  align-items: start;
}
@media (max-width: 760px) {
  .sub-grid {
    grid-template-columns: 1fr;
  }
}
.plan-option {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px 14px 42px;
  margin-bottom: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
}
.plan-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31, 122, 77, 0.2);
}
.plan-option input {
  position: absolute;
  inset-inline-start: 14px;
  top: 16px;
}
.plan-option__name {
  font-weight: 700;
}
.plan-option__price {
  color: var(--accent-dark);
  font-weight: 700;
}
.plan-option__trial {
  color: var(--muted);
  font-size: 0.82rem;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.summary-row:last-child {
  border-bottom: 0;
}
.summary-total {
  font-weight: 800;
  font-size: 1.1rem;
  border-top: 2px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
}
.paywall {
  text-align: center;
  padding: 26px;
  background: rgba(31, 122, 77, 0.07);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  margin-top: 18px;
}
.paywall__title {
  font-weight: 700;
  margin: 0 0 14px;
  font-size: 1.1rem;
}
.paywall__hint {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.amount-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
/* ---- Ads ---- */
.ad-slot {
  margin: 16px auto;
  text-align: center;
  /* The ad sits inside a .panel; keep its body padding tight so the lighter
       head/foot strips read as thin bands and the creative fills the width. */
}
.ad-slot .panel__body {
  padding: 8px;
}
.ad-slot__label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 4px;
}
.ad-slot img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-inline: auto;
}
.ad-slot--header,
.ad-slot--footer {
  margin-inline: auto;
}
/* ---- API tokens ---- */
.token-reveal {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-sm);
  font-family: monospace;
  word-break: break-all;
  user-select: all;
}
.token-usage {
  margin-top: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.85rem;
}
/* ---- Auth ---- */
.auth-card {
  max-width: 460px;
  margin-inline: auto;
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}
.btn-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.btn-google:hover {
  background: #f7f7f7;
}
.auth-alt {
  margin-top: 18px;
  text-align: center;
  font-size: 0.9rem;
}
.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin: 18px 0;
  font-size: 0.85rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* ---- User menu (header) ---- */
.user-menu {
  position: relative;
}
.user-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--ink);
}
.user-menu__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
}
.user-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-menu__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  z-index: 30;
}
.user-menu__panel a,
.user-menu__panel button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.user-menu__panel a:hover,
.user-menu__panel button:hover {
  background: rgba(31, 122, 77, 0.1);
  text-decoration: none;
}
.user-menu.is-open .user-menu__panel {
  display: block;
}
/* ---- Comments ---- */
.comment-as {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
}
.comment {
  padding: 16px 0;
  border-top: 1px solid var(--sep-light);
  border-bottom: 1px solid var(--sep-dark);
  /* Comments are nested inside the padded body, not flush to a foot, so the
       last one drops its trailing dark line. */
}
.comment:last-child {
  border-bottom: 0;
}
.comment__name {
  font-weight: 700;
  color: var(--accent-dark);
}
.comment__date {
  font-size: 0.78rem;
  color: var(--muted);
  margin-inline-start: 8px;
}
.comment__body {
  margin: 6px 0 0;
}
.comment__replies {
  margin-inline-start: 24px;
  margin-top: 10px;
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 16px;
}
/* ---- Reconstruction banner ---- */
.reconstruction-banner {
  background: linear-gradient(180deg, rgba(196, 30, 58, 0.96), rgba(160, 24, 47, 0.96));
  color: #fff;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow);
}
.reconstruction-banner .container {
  padding-block: 10px;
}
/* ---- Alerts ---- */
.alert {
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space);
}
.alert-success {
  background: rgba(31, 122, 77, 0.14);
  color: var(--accent-dark);
  border: 1px solid rgba(31, 122, 77, 0.3);
}
.alert-error {
  background: rgba(196, 30, 58, 0.1);
  color: var(--brand-red);
  border: 1px solid rgba(196, 30, 58, 0.3);
}
.field-error {
  color: var(--brand-red);
  font-size: 0.82rem;
  margin-top: 4px;
}
/* ---- Pagination ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: var(--space);
  /* Disabled prev/next and the "…" gap markers. */
}
.pagination a,
.pagination span {
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.9rem;
}
.pagination .active,
.pagination a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  text-decoration: none;
}
.pagination .disabled {
  opacity: 0.55;
}
/* ---- Footer ---- */
.site-footer {
  margin-top: calc(var(--space) * 1.5);
  padding-block: var(--space);
}
.site-footer h3 {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 1rem;
}
@media (max-width: 900px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-bottom {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  padding-top: 14px;
  border-top: 1px solid var(--sep-light);
}