:root {
  /* ---------- Colors ---------- */
  --color-forest: #1b4d3e;
  --color-forest-light: #236352;
  --color-gold: #b8935a;
  --color-cream: #f9f7f2;
  --color-auth-cream: #f8f5f0;
  --color-white: #ffffff;

  /* Common text tints (forest with opacity) */
  --color-text: var(--color-forest);
  --color-text-muted: rgba(27, 77, 62, 0.8);
  --color-text-subtle: rgba(27, 77, 62, 0.6);
  --color-text-faint: rgba(27, 77, 62, 0.5);

  /* Borders */
  --color-border: #e0d8cc;
  --brand-gradient: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%) ;

  /* ---------- Gradients ---------- */
  /* Canonical brand gradient (forest -> gold). brand/title/hero
     are the same gradient; brand-gradient is the canonical name. */
  --gradient-brand: linear-gradient(
    90deg,
    #1b4d3e 0%,
    #295240 7.14%,
    #365743 14.29%,
    #415c45 21.43%,
    #4c6147 28.57%,
    #576649 35.71%,
    #626b4b 42.86%,
    #6d704d 50%,
    #77754f 57.14%,
    #827a51 64.29%,
    #8d7f53 71.43%,
    #978455 78.57%,
    #a28957 85.71%,
    #ad8e58 92.86%,
    #b8935a 100%
  );
  --gradient-gold: linear-gradient(
    270deg,
    #b8935a 0%,
    #b48f57 7.14%,
    #b08b53 14.29%,
    #ab8850 21.43%,
    #a7844d 28.57%,
    #a3804a 35.71%,
    #9f7d46 42.86%,
    #9b7943 50%,
    #9f7d46 57.14%,
    #a3804a 64.29%,
    #a7844d 71.43%,
    #ab8850 78.57%,
    #b08b53 85.71%,
    #b48f57 92.86%,
    #b8935a 100%
  );
  --gradient-footer: linear-gradient(
    135deg,
    #1b4d3e 0%,
    #1a4b3c 7.14%,
    #19483b 14.29%,
    #184639 21.43%,
    #184437 28.57%,
    #174235 35.71%,
    #163f34 42.86%,
    #153d32 50%,
    #163f34 57.14%,
    #174235 64.29%,
    #184437 71.43%,
    #184639 78.57%,
    #19483b 85.71%,
    #1a4b3c 92.86%,
    #1b4d3e 100%
  );
  --gradient-page: linear-gradient(
    180deg,
    rgba(239, 228, 216, 0.3) 0%,
    #ffffff 100%
  );
  --gradient-books: linear-gradient(
    135deg,
    #f8f5f0 0%,
    #f9f7f3 10%,
    #fbf9f6 20%,
    #fcfbf9 30%,
    #fefdfc 40%,
    #ffffff 50%,
    #fdfbf9 57.14%,
    #faf7f4 64.29%,
    #f8f3ee 71.43%,
    #f6f0e9 78.57%,
    #f4ece3 85.71%,
    #f1e8de 92.86%,
    #efe4d8 100%
  );
  --gradient-hero-badge: linear-gradient(
    90deg,
    #b8935a 0%,
    #b59158 9.09%,
    #b38e56 18.18%,
    #b08c54 27.27%,
    #ad8952 36.36%,
    #ab874f 45.45%,
    #a8854d 54.55%,
    #a5824b 63.64%,
    #a38049 72.73%,
    #a07e47 81.82%,
    #9e7b45 90.91%,
    #9b7943 100%
  );
  --gradient-library-hero: linear-gradient(
    90deg,
    rgba(27, 77, 62, 0.05) 0%,
    rgba(184, 147, 90, 0.05) 100%
  );

  /* ---------- Typography ---------- */
  --font-sans: "IBM Plex Sans Arabic", sans-serif;

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale (base / mobile values; responsive steps live in the
     .ds-* classes below). Mapped from values already in use. */
  --fs-hero: 1.75rem;          /* hero h1 (scales up to 3rem)      */
  --fs-page-title: 1.875rem;   /* page h1/h2 (~30px)               */
  --fs-section-title: 1.25rem; /* section h2 (scales up to 1.75rem)*/
  --fs-card-title: 1rem;       /* card h3                          */
  --fs-subtitle: 0.9375rem;    /* 15px lead/subtitle               */
  --fs-body: 16px;         /* default paragraph                */
  --fs-label: 0.8125rem;       /* 13px form label                  */
  --fs-button: 16px;       /* button text                      */
  --fs-nav: 0.9375rem;         /* 15px nav links                   */
  --fs-badge: 16px;        /* badge text                       */
  --fs-small: 0.75rem;         /* small / meta text                */

  /* Line heights */
  --lh-tight: 1.35;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --lh-loose: 1.9;

  /* ---------- Radius ---------- */
  --radius-sm: 5px;
  --radius-md: 0.375rem;  /* rounded-md  */
  --radius-lg: 0.5rem;    /* rounded-lg  */
  --radius-xl: 0.75rem;   /* rounded-xl  */
  --radius-2xl: 1rem;     /* rounded-2xl / 16px */
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 4px 20px rgba(27, 77, 62, 0.05);
  --shadow-elevated: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-auth: 0 4px 24px rgba(27, 77, 62, 0.08);
  --shadow-hover: 0 12px 40px rgba(27, 77, 62, 0.1);

  /* ---------- Spacing ---------- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---------- Transitions ---------- */
  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 600ms ease;
}
button{
  font-family: inherit;
}

@media(max-width: 992px){
  .hero-text-container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .home-hero-actions{
    width: 100%;
    justify-content: center;
  }
}
@media(max-width: 768px){
  .ds-subtitle {
    font-size: 16px !important;
    text-align: center;
  }
}
@media (min-width: 768px) {
    .container {
        max-width: 90% !important;
    }
}

/* ============================================================
   Base font family (kept consistent with per-page CSS)
   ============================================================ */
.ds-font,
.ds-root {
  font-family: var(--font-sans);
}
.text-sm{
  font-size: 16px !important;
}
.nav-notification-badge{
  top: 8px;
  right: 5px;
}

.add-to-cart-btn ,#detailBookPreviewBtn,#addToCartBtn{
  font-size: 14px !important;
  padding: 10px 10px !important;
}
/* ============================================================
   Typography classes
   Same UI element => same size / weight / line-height everywhere.
   ============================================================ */
.ds-hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

@media (min-width: 1024px) {
  .ds-hero-title { font-size: 2rem; }
}

.ds-page-title {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.ds-section-title {
  font-size: var(--fs-section-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
@media (min-width: 768px) {
  .ds-section-title { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .ds-section-title { font-size: 1.75rem; }
}

.ds-card-title {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-forest);
}
@media (min-width: 1024px) {
  .ds-card-title { font-size: 1.125rem; }
}

.ds-subtitle {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

.ds-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.ds-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.ds-small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-text-faint);
}

.ds-footer-text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.8);
}

/* Gradient text helpers (brand = forest->gold, gold = gold sheen) */
.ds-text-gradient {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.ds-text-gradient-gold {
  background-image: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ============================================================
   Buttons
   ============================================================ */
.ds-btn,
.invoice-btn,
.my-book-card__btn,
.settings-btn,
.favorites-add-all-btn,
.book-read-nav__btn,
.checkout-summary__checkout,
.checkout-btn,
.cart-summary__checkout,
.auth-btn,
.favorite-item__btn,
.invoice-detail-btn,
[data-auth-submit],
#loginForm button[type="submit"],
#registerForm button[type="submit"],
#forgotPasswordForm button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  padding: 7px 20px !important;
  min-height: unset !important;
  height: auto !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.ds-btn {
  transition: background-color var(--transition-base),
    color var(--transition-base), opacity var(--transition-base);
}
.ds-btn-primary {
  background-color: var(--color-forest);
  color: var(--color-white);
  border: 1px solid transparent;
}
.ds-btn-primary:hover {
  background-color: var(--color-forest-light);
}
.ds-btn-outline {
  background-color: transparent;
  color: var(--color-forest);
  border: 1px solid var(--color-forest);
}
.ds-btn-outline:hover {
  background-color: rgba(27, 77, 62, 0.05);
}
.ds-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ============================================================
   Cards
   ============================================================ */
.ds-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.ds-card-elevated {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
}

/* ============================================================
   Badges (gold pill)
   ============================================================ */
.ds-badge {
  display: inline-block;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-full);
  background-color: rgba(184, 147, 90, 0.1);
  border: 1px solid rgba(184, 147, 90, 0.2);
  color: var(--color-gold);
  font-size: var(--fs-badge);
  line-height: 1.25rem;
  font-weight: var(--fw-medium);
}

/* ============================================================
   Inputs / Forms
   ============================================================ */
.ds-input {
  width: 100%;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--color-forest);
  background-color: var(--color-auth-cream);
  border: 1.27px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition-base);
}
.ds-input::placeholder {
  color: rgba(27, 77, 62, 0.3);
}
.ds-input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.1);
}
.ds-form-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* ============================================================
   Tables
   ============================================================ */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  color: var(--color-text);
}
.ds-table th {
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-align: right;
  padding: 0.75rem 1rem;
}
.ds-table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   Sections
   ============================================================ */
.ds-section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 1024px) {
  .ds-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ============================================================
   Icons
   ============================================================ */
.ds-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-image: var(--gradient-gold);
  color: var(--color-white);
  flex-shrink: 0;
}

/* ============================================================
   Navbar height (global) — slightly shorter, still usable.
   Uses #navbar id so it overrides Tailwind's h-20 / h-[72px]
   on every page without editing each file.
   ============================================================ */
#navbar .contNav {
  padding: 0.5rem 0;
}
#navbar .h-\[72px\] {
  height: 60px; /* mobile (was 72px) */
}

/* ============================================================
   Responsive navigation breakpoint
   ------------------------------------------------------------
   The navbar markup uses Tailwind's `lg:` (1024px) prefix to swap
   between the desktop nav and the mobile hamburger. We move that
   switch down to 768px so TABLET (768px) keeps the full desktop
   navigation and the hamburger ONLY appears on mobile (<=767px).
   Scoped to #navbar so it overrides the utility classes on every
   page without editing each file.
   ============================================================ */

#navbar {
  background-color: rgba(248, 245, 240, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Keep the navbar login button on a single line at every width (it wraps to
   two lines when the desktop nav gets tight around the 1024px breakpoint). */
#navbar a.bg-forest {
  white-space: nowrap;
}

/* Mobile (≤ 991px): show hamburger, hide desktop nav */
@media (max-width: 991px) {
  #navbar #mobileMenu {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  /* No filled background on nav links — keep hover only */
  #navbar #mobileMenu ul li > a:not(.bg-forest) {
    background-color: transparent;
  }

  /* Force the desktop nav hidden on mobile */
  #navbar .contNav {
    display: none !important;
  }

  /* Force the mobile bar visible on mobile */
  #navbar .flex.lg\:hidden {
    display: flex !important;
  }
}

/* Desktop (> 991px): show full nav, hide hamburger */
@media (min-width: 992px) {
  /* Show the full desktop nav */
  #navbar .contNav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  /* Hide the mobile top bar and the mobile dropdown menu */
  #navbar .flex.lg\:hidden {
    display: none !important;
  }
  #navbar #mobileMenu {
    display: none !important;
  }
}

/* Condensed desktop range (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  #navbar .gap-4 {
    gap: 0.5rem;
  }
  #navbar ul.text-\[15px\] {
    gap: 0;
    font-size: 13px;
  }
  #navbar ul.text-\[15px\] a {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  #navbar a.bg-forest {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    margin-right: 0;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ============================================================
   Slide-in Drawers (Favorites & Cart) — shared component
   ------------------------------------------------------------
   One reusable drawer + overlay used by both the Favorites and
   Cart nav icons. Slides in from the right (RTL), with a fading
   backdrop. Markup is injected by js/main.js.
   ============================================================ */
.app-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(27, 77, 62, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.app-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.app-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100vw;
  background: var(--color-white);
  box-shadow: var(--shadow-modal);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}
.app-drawer.is-open {
  transform: translateX(0);
}
@media (max-width: 480px) {
  .app-drawer {
    width: 100%;
  }
}

/* Header */
.app-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.app-drawer__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  color: var(--color-forest);
}
.app-drawer__title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold);
}
.app-drawer__count {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-faint);
}
.app-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--color-forest);
  transition: background-color var(--transition-base),
    color var(--transition-base);
}
.app-drawer__close:hover {
  background: rgba(27, 77, 62, 0.06);
  color: var(--color-gold);
}

/* Scrollable body */
.app-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Footer (cart summary) */
.app-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 1.125rem 1.25rem;
  background: var(--color-auth-cream);
}

/* ---------- Drawer item ---------- */
.drawer-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-white);
}
.drawer-item__cover {
  flex-shrink: 0;
  width: 64px;
  height: 84px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient-books);
}
.drawer-item__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drawer-item__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}
.drawer-item__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-forest);
  line-height: var(--lh-snug);
}
.drawer-item__desc {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
  line-height: var(--lh-snug);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drawer-item__price {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-forest);
  margin-top: 0.125rem;
}
.drawer-item__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}

/* Small action buttons inside items */
.drawer-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  background: var(--color-forest);
  border-radius: var(--radius-md);
  padding: 0.4375rem 16px;
  transition: background-color var(--transition-base);
}
.drawer-view-btn:hover {
  background: var(--color-forest-light);
}
.drawer-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-discount, #dc2626);
  border-radius: var(--radius-md);
  padding: 0.4375rem 0.625rem;
  transition: background-color var(--transition-base);
}
.drawer-remove-btn:hover {
  background: rgba(220, 38, 38, 0.08);
}

/* Quantity stepper (cart) */
.drawer-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.drawer-qty__btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-forest);
  transition: background-color var(--transition-base);
}
.drawer-qty__btn:hover {
  background: rgba(27, 77, 62, 0.06);
}
.drawer-qty__value {
  min-width: 1.75rem;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-forest);
}

/* ---------- Empty state ---------- */
.app-drawer__empty {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
}
.app-drawer__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: rgba(184, 147, 90, 0.1);
  color: var(--color-gold);
}
.app-drawer__empty-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}
.app-drawer__empty-title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  color: var(--color-forest);
}
.app-drawer__empty-text {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
  max-width: 16rem;
}

/* ---------- Cart summary (footer) ---------- */
.drawer-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.drawer-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: var(--color-forest);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border);
}
.drawer-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}
.drawer-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  background: var(--color-forest);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  transition: background-color var(--transition-base);
}
.drawer-checkout-btn:hover {
  background: var(--color-forest-light);
}
.drawer-continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--color-forest);
  background: transparent;
  border: 1px solid var(--color-forest);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  transition: background-color var(--transition-base);
}
.drawer-continue-btn:hover {
  background: rgba(27, 77, 62, 0.05);
}

/* ---------- Mobile + tablet horizontal card scroll ---------- */
:root {
  --ds-scroll-bleed: 1rem;
  --ds-scroll-gap: 0.75rem;
  --ds-scroll-card-width: min(76vw, 272px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --ds-scroll-card-width: min(52vw, 300px);
  }
}

@media (max-width: 1023px) {
  .ds-mobile-scroll-row,
  .home-mobile-scroll,
  .why-section-box > .grid,
  .features-section-box > .grid,
  #relatedBooksGrid,
  #relatedArticlesGrid,
  div.min-w-0 > div.space-y-4:has(.review-card) {
    padding-top: 10px;
    padding-bottom: 20px;
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: var(--ds-scroll-gap) !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--ds-scroll-bleed);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    justify-items: unset;
    padding-inline: var(--ds-scroll-bleed);
    box-sizing: border-box;
  }

  .ds-mobile-scroll-row::-webkit-scrollbar,
  .home-mobile-scroll::-webkit-scrollbar,
  .why-section-box > .grid::-webkit-scrollbar,
  .features-section-box > .grid::-webkit-scrollbar,
  #relatedBooksGrid::-webkit-scrollbar,
  #relatedArticlesGrid::-webkit-scrollbar,
  div.min-w-0 > div.space-y-4:has(.review-card)::-webkit-scrollbar {
    display: none;
  }

  .ds-mobile-scroll-row > *,
  .home-mobile-scroll > *,
  .why-section-box > .grid > .why-card,
  .features-section-box > .grid > .feature-card,
  #relatedBooksGrid > *,
  #relatedArticlesGrid > .article-related-card,
  div.min-w-0 > div.space-y-4:has(.review-card) > .review-card {
    flex: 0 0 var(--ds-scroll-card-width) !important;
    width: var(--ds-scroll-card-width) !important;
    max-width: var(--ds-scroll-card-width) !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }

  div.min-w-0 > div.space-y-4:has(.review-card) > .review-card {
    margin-top: 0 !important;
  }

  section:has(.home-mobile-scroll),
  section:has(.why-section-box),
  section:has(.features-section-box),
  section:has(#relatedBooksGrid),
  section:has(#relatedArticlesGrid) {
    overflow-x: visible;
  }

  section:has(.features-section-box) > .container,
  section:has(.why-section-box) > .container {
    padding-inline: 0 !important;
    max-width: none !important;
    width: 100%;
  }

  .features-section-box,
  .why-section-box {
    overflow: visible;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
    border-inline: none !important;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.12) !important;
  }

  .features-section-box > .grid > .feature-card,
  .why-section-box > .grid > .why-card {
    min-width: var(--ds-scroll-card-width) !important;
  }
}

.ds-scroll-wrap {
  position: relative;
}

.ds-scroll-arrow {
  display: none;
}

@media (max-width: 1023px) {
  .ds-scroll-wrap .ds-scroll-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid #E0D8CC;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.96);
    color: #1B4D3E;
    box-shadow: 0 2px 8px rgba(27, 77, 62, 0.12);
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
  }

  .ds-scroll-arrow:hover:not(:disabled) {
    background: #FFFFFF;
  }

  .ds-scroll-arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .ds-scroll-arrow[hidden] {
    display: none !important;
  }

  .ds-scroll-arrow svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  .ds-scroll-arrow--prev {
    inset-inline-end: -0.5rem;
  }

  .ds-scroll-arrow--next {
    inset-inline-start: -0.5rem;
  }
}

html {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* ------------------- index page -------------------- */

.about-portrait-card {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 636 / 684;
  overflow: visible;
}

@media (max-width: 1023px) {
  .about-portrait-card {
    max-width: 340px;
  }
}

.about-portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

@media (max-width: 767px) {
  .about-portrait-card>.absolute {
    right: -3%;
    width: 60%;
    max-width: none;
    transform: none;
    transform-origin: 100% 100%;
  }
}

@media (max-width: 639px) {
  .about-portrait-card>.absolute {
      gap: 0px;
      bottom: 4px;
      right: -8%;
      width: 75%;
      padding: 8px;
  }
}

@media (max-width: 399px) {
  .about-portrait-card>.absolute {
    right: 0;
    width: 56%;
    padding: 0.75rem;
  }
}

.hero-portrait-card {
  position: relative;
  overflow: visible;
  width: 100%;
  aspect-ratio: 614 / 778;
}

.hero-portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hero-portrait-card {
    max-width: 340px;
    margin-inline: auto;
  }
}

@media (max-width: 639px) {

  .hero-portrait-card {
    aspect-ratio: auto;
    max-width: 260px;
    margin-inline: auto;
  }

  .hero-portrait-card img {
    height: 260px;
    object-fit: cover;
  }

  .hero-portrait-card>.absolute {
    bottom: -1.5rem;
    inset-inline: 0.375rem;
    padding: 0.375rem 0.625rem;
    gap: 0.5rem;
  }

  .hero-portrait-card>.absolute .text-right p:first-child {
    font-size: 0.8rem;
  }

  .hero-portrait-card>.absolute .text-right p:last-child {
    font-size: 0.6rem;
  }

  .hero-portrait-card>.absolute span {
    width: 1.75rem;
    height: 1.75rem;
  }

  .hero-portrait-card>.absolute span svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  .order-2.lg\:order-1 .flex.flex-wrap.mb-5 {
    justify-content: space-evenly;
    flex-wrap: nowrap;
    width: 100%;
  }

  .order-2.lg\:order-1 .flex.flex-wrap.mb-5>div {
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .text-sm.mt-1 {
    line-height: 0.8rem;
  }
}

.hero-circle {
  position: absolute;
  border-radius: 9999px;
  border: 1.5px solid rgba(184, 147, 90, 0.55);
  pointer-events: none;
  z-index: 20;
  width: 84px;
  height: 84px;
}

.hero-circle-top {
  top: 0;
  right: -16px;
  transform: translateY(-50%);
}

.hero-circle-bottom {
  bottom: 0;
  left: -16px;
  transform: translateY(50%);
}

@media (max-width: 767px) {
  .home-hero-actions {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }

  .home-hero-actions .ds-btn {
    padding: 10px;
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto !important;
    padding-inline: 0.5rem;
    font-size: 0.6875rem;
    gap: 0.375rem;
  }

  .home-hero-actions .ds-btn-outline span.w-7 {
    width: 1.375rem;
    height: 1.375rem;
  }
}
/* -------------------about page---------------------- */

.about-page-bg {
  background-color: #F8F5F0;
}

.about-video-hero {
  background: linear-gradient(180deg, #F8F5F0 0%, #FBF9F6 45%, #FFFFFF 100%);
}

.about-deco-circle {
  position: absolute;
  border-radius: 9999px;
  border: 1.5px solid rgba(184, 147, 90, 0.45);
  pointer-events: none;
  aspect-ratio: 1 / 1;
}

.about-deco-circle-right {
  width: clamp(140px, 22vw, 260px);
  top: 8%;
  right: -4%;
}

.about-deco-circle-left {
  width: clamp(120px, 18vw, 220px);
  bottom: 10%;
  left: -3%;
}

.about-play-btn {
  background: linear-gradient(180deg, #B8935A 0%, #AD8E58 35%, #A28957 65%, #9B7943 100%);
}

.about-info-card {
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
  border: 1.27px solid #E0D8CC;
  border-right: 3px solid #B8935A;
}

.about-intro-title {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem);
  line-height: 1.3;
}

.about-quote-wrap {
  width: 100%;
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-top: 3.82px solid #B8935A;
  background: linear-gradient(270deg, #EFE4D8 0%, #F1E7DC 10%, #F2E9E0 20%, #F4ECE4 30%, #F5EFE8 40%, #F7F1EB 50%, #F9F4EF 60%, #FAF7F3 70%, #FCFAF7 80%, #FDFCFB 90%, #FFFFFF 100%);
  padding: clamp(2rem, 5vw, 3.24rem) clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  text-align: center;
}

.about-quote-text {
  color: #1B4D3E;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw + 0.75rem, 1.875rem);
  line-height: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: 0;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-newsletter-btn {
  background: linear-gradient(180deg, #B8935A 0%, #AD8E58 35%, #A28957 65%, #9B7943 100%);
}

@media (max-width: 479px) {
  .about-deco-circle-right {
    width: clamp(100px, 28vw, 140px);
    right: -8%;
  }
  .about-deco-circle-left {
    width: clamp(90px, 24vw, 120px);
    left: -6%;
  }
}

/* ------------------- faq page -------------------- */

.faq-page-bg {
  background-color: #F8F5F0;
}

.faq-hero {
  background: linear-gradient(180deg, #F8F5F0 0%, #FBF9F6 45%, #FFFFFF 100%);
}

.faq-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.04);
  border: 1.27px solid #E0D8CC;
  transition: all 0.3s ease;
}

.faq-card.active {
  border-color: #B8935A;
  box-shadow: 0px 10px 25px rgba(184, 147, 90, 0.08);
}

.faq-card:hover:not(.active) {
  border-color: rgba(184, 147, 90, 0.6);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
}

.faq-answer.active {
  max-height: 1000px;
  transition: max-height 0.5s cubic-bezier(1, 0, 1, 0);
}

.faq-toggle-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq-toggle-icon.active {
  transform: rotate(180deg);
  color: #B8935A;
}

/* ------------------- library page -------------------- */
.hero-library-title {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.why-section-box {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(239, 228, 216, 0.5) 50%, #FFFFFF 100%);
  border: 1.27px solid #E0D8CC;
  border-radius: 12px;
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .why-section-box {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .why-section-box {
    padding: 65.27px;
  }
}

.why-icon-gradient {
  background: linear-gradient(135deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
}

.why-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  width: 100%;
  max-width: 324.48px;
  min-height: auto;
}

@media (min-width: 768px) {
  .why-card {
    min-height: 266.43px;
  }
}

.pagination-active {
  background: linear-gradient(90deg, #1B4D3E 0%, #2D5341 9.09%, #3C5A44 18.18%, #4A6047 27.27%, #586749 36.36%, #666D4C 45.45%, #73734F 54.55%, #817A51 63.64%, #8F8053 72.73%, #9C8656 81.82%, #AA8D58 90.91%, #B8935A 100%);
}

@media (max-width: 767px) {
  #categoryFilters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: 0.25rem;
    width: calc(100% + 2rem);
    max-width: 100vw;
  }

  #categoryFilters::-webkit-scrollbar {
    display: none;
  }

  #categoryFilters .filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* ------------------- magazine page -------------------- */

.magazine-hero-title {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.magazine-filter-active {
  background: linear-gradient(90deg, #B8935A 0%, #B59158 9.09%, #B38E56 18.18%, #B08C54 27.27%, #AD8952 36.36%, #AB874F 45.45%, #A8854D 54.55%, #A5824B 63.64%, #A38049 72.73%, #A07E47 81.82%, #9E7B45 90.91%, #9B7943 100%);
}

.magazine-badge-new {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
}

.magazine-article-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
}

.magazine-newsletter-box {
  background: linear-gradient(135deg, #1B4D3E 0%, #1A4B3C 7.14%, #19483B 14.29%, #184639 21.43%, #184437 28.57%, #174235 35.71%, #163F34 42.86%, #153D32 50%, #163F34 57.14%, #174235 64.29%, #184437 71.43%, #184639 78.57%, #19483B 85.71%, #1A4B3C 92.86%, #1B4D3E 100%);
  border-radius: 12px;
}

.magazine-category-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.magazine-category-scroll::-webkit-scrollbar {
  display: none;
}

@media (max-width: 639px) {
  .magazine-hero-title {
    font-size: 1.375rem;
    line-height: 1.3;
  }
  .magazine-card-title {
    font-size: 16px;
    line-height: 1.35;
  }
  .magazine-card-text {
    font-size: 0.8125rem;
    line-height: 1.45;
  }
}
/* ------------------- library page -------------------- */
.my-library-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 12px;
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.my-library-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #B8935A;
  z-index: 1;
}

.my-library-card__header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(90deg, #FFFFFF 0%, #FDFCFB 10%, #FCFAF7 20%, #FAF7F3 30%, #F9F4EF 40%, #F7F1EB 50%, #F5EFE8 60%, #F4ECE4 70%, #F2E9E0 80%, #F1E7DC 90%, #EFE4D8 100%);
  border-bottom: 1px solid #E0D8CC;
  text-align: start;
}

.my-library-card__title {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.375rem, 2vw + 0.75rem, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.375rem;
}

.my-library-card__subtitle {
  font-size: 0.8125rem;
  color: #3D3D3D;
  opacity: 0.7;
  margin: 0;
  line-height: 1.6;
}

.my-library-card__body {
  padding: 1.5rem;
  flex: 1;
}

.my-library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.my-book-card {
  display: flex;
  flex-direction: column;
  background: #F3EFE8;
  border: 1.27px solid #E0D8CC;
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
  height: 100%;
}

.my-book-card__cover {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #E8E2D9;
}

.my-book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.my-book-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1rem 1.125rem;
  gap: 0.625rem;
}

.my-book-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1B4D3E;
  line-height: 1.5;
  margin: 0;
}

.my-book-card__date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #3D3D3D;
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
}

.my-book-card__date img {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.my-book-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: auto;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  background: #1B4D3E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s;
}

.my-book-card__btn:hover {
  background: #236352;
}

@media (min-width: 640px) {
  .my-library-card__header {
    padding: 1.5rem 1.75rem;
  }

  .my-library-card__body {
    padding: 1.75rem;
  }

  .my-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .my-library-card__title {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .my-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .my-library-page .profile-main-column {
    min-height: 100%;
  }
}

@media (max-width: 1023px) {
  .my-library-page .profile-main-column {
    min-height: auto;
  }

  .my-library-card {
    flex: none;
    min-height: auto;
  }
}

@media (max-width: 639px) {
  .my-library-card__header {
    padding: 1rem 1.25rem;
  }

  .my-library-card__body {
    padding: 1.25rem;
  }

  .my-book-card__content {
    padding: 16px 16px 1rem;
  }

  .my-book-card__title {
    font-size: 16px;
  }
}

/* ------------------- my library page -------------------- */

.article-content-box {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-top: 3px solid #B8935A;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
}

.article-intro-quote {
  border-right: 3px solid #B8935A;
  color: #1B4D3E;
}

.article-tip-box {
  background: linear-gradient(135deg, #FFFFFF 0%, #FDFCFB 20%, #FAF7F3 50%, #F5EFE8 80%, #EFE4D8 100%);
  border-right: 3px solid #B8935A;
}

.article-summary-box {
  background: #F8F5F0;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
}

.article-related-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
}

.article-share-box {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
}

.article-share-icon {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
}

.article-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.article-hero-avatar {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  color: #FFFFFF;
}

.article-hero-title {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 4.2vw, 48px);
  line-height: 1.25;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.article-section-title {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #1B4D3E;
  max-width: 100%;
}

.article-body-heading {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #1B4D3E;
  max-width: 100%;
}

.article-body-text {
  color: #3D3D3D;
  font-size: 14px;
  line-height: 22.75px;
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 639px) {
  .article-body-text {
    font-size: 13px;
    line-height: 21px;
  }
  .article-hero-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
  .article-hero-title {
    font-size: clamp(22px, 6.5vw, 28px);
    line-height: 1.35;
  }
  .article-intro-quote {
    font-size: 13px;
    line-height: 1.65;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .article-hero-title {
    font-size: clamp(30px, 4.5vw, 42px);
  }
}
/* ------------------- privacy page -------------------- */

.privacy-page-bg {
  background-color: #F8F5F0;
}

.privacy-hero {
  background: linear-gradient(180deg, #F8F5F0 0%, #FBF9F6 45%, #FFFFFF 100%);
}

.privacy-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.04);
  border: 1.27px solid #E0D8CC;
}

.privacy-content h3 {
  color: #1B4D3E;
  font-weight: 700;
  font-size: 1.125rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  border-right: 3px solid #B8935A;
  padding-right: 0.75rem;
}

.privacy-content p {
  color: #3D3D3D;
  font-size: 0.9375rem;
  line-height: 1.85;
  margin-bottom: 1rem;
}

.privacy-content ul, .privacy-content ol {
  margin-bottom: 1rem;
  padding-right: 1.5rem;
}

.privacy-content li {
  color: #3D3D3D;
  font-size: 0.9375rem;
  line-height: 1.8;
  margin-bottom: 0.5rem;
  list-style-type: decimal;
}

.privacy-content ul li {
  list-style-type: disc;
}
/* ------------------- digital products page -------------------- */
.hero-digital-title {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.features-section-box {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(239, 228, 216, 0.5) 50%, #FFFFFF 100%);
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 25px 50px -12px #00000040;
}

.feature-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.digital-icon-gradient {
  background: linear-gradient(135deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
}

/* ------------------- digital product detail page -------------------- */
.digital-stat-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
}

.digital-benefit-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FDFCFB 10%, #FCFAF7 20%, #FAF7F3 30%, #F9F4EF 40%, #F7F1EB 50%, #F5EFE8 60%, #F4ECE4 70%, #F2E9E0 80%, #F1E7DC 90%, #EFE4D8 100%);
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.benefit-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon-wrap svg,
.benefit-icon-wrap img {
  width: 20px;
  height: 20px;
}

.benefit-card-title {
  color: #1B4D3E;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.benefit-card-text {
  color: #3D3D3D;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: 0;
}

@media (max-width: 639px) {
  .benefit-card-title {
    font-size: 18px;
    line-height: 26px;
  }
  .benefit-card-text {
    font-size: 13px;
    line-height: 21px;
  }
}

.digital-related-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.05);
}

/* ------------------ contact page ------------------ */
.contact-hero-title {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
  line-height: 1.25;
  font-weight: 700;
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-hero-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  background: #B8935A;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 639px) {
  .contact-hero-section {
    padding-top: 5.5rem;
  }

  .contact-hero-badge {
    padding: 0.625rem 1.625rem;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem !important;
  }
}

.contact-info-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 12px;
  border: 1.27px solid rgba(224, 216, 204, 1);
  border-top: 1.27px solid rgba(224, 216, 204, 1);
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contact-icon-forest {
  background: #1B4D3E;
}

.contact-info-card:first-child .contact-icon-forest {
  background: linear-gradient(90deg, #1B4D3E 0%, #295240 7.14%, #365743 14.29%, #415C45 21.43%, #4C6147 28.57%, #576649 35.71%, #626B4B 42.86%, #6D704D 50%, #77754F 57.14%, #827A51 64.29%, #8D7F53 71.43%, #978455 78.57%, #A28957 85.71%, #AD8E58 92.86%, #B8935A 100%);
}

.contact-icon-gold {
  background: #B8935A;
}

.contact-hero-section {
  margin-top: -4.75rem;
  padding-top: 4.75rem;
  padding-bottom: 0 !important;
  position: relative;
  isolation: isolate;
  background: none;
}

.contact-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% - 9rem);
  background-image:
    radial-gradient(51.72% 195.43% at 50% 50%, #B8935A 0.14%, rgba(0, 0, 0, 0) 0.14%),
    linear-gradient(135deg, #F8F5F0 0%, #F9F7F3 10%, #FBF9F6 20%, #FCFBF9 30%, #FEFDFC 40%, #FFFFFF 50%, #FDFBF9 57.14%, #FAF7F4 64.29%, #F8F3EE 71.43%, #F6F0E9 78.57%, #F4ECE3 85.71%, #F1E8DE 92.86%, #EFE4D8 100%);
  z-index: -1;
  pointer-events: none;
}

.contact-hero-section > .container {
  position: relative;
  z-index: 1;
}

.contact-hero-section > .container > p {
  margin-bottom: 1.5rem !important;
}

.contact-hero-section > .container > .grid {
  margin-top: 0;
  margin-bottom: -2rem;
  padding-bottom: 1.25rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 640px) {
  .contact-hero-section {
    margin-top: -6rem;
    padding-top: 6rem;
  }

  .contact-hero-section::before {
    height: calc(100% - 10rem);
  }

  .contact-hero-section > .container > p {
    margin-bottom: 2rem !important;
  }

  .contact-hero-section > .container > .grid {
    margin-bottom: -2.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .contact-hero-section {
    margin-top: -7rem;
    padding-top: 7rem;
  }

  .contact-hero-section::before {
    height: calc(100% - 11rem);
  }

  .contact-hero-section > .container > .grid {
    margin-bottom: -3rem;
    padding-bottom: 1.75rem;
  }
}

.contact-main-section {
  background: transparent;
  padding-top: 3rem;
}

@media (min-width: 640px) {
  .contact-main-section {
    padding-top: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .contact-main-section {
    padding-top: 4rem;
  }
}

.contact-main-section > .container > .contact-main-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .contact-main-section > .container > .contact-main-grid {
    grid-template-columns: 1fr 1.28fr;
    align-items: stretch;
  }
}

.contact-info-card h2,
.contact-form-card > h2,
.contact-faq-item h3,
.contact-hours-card > h3,
.contact-main-section .order-2 > h2 {
  color: #1B4D3E;
  font-weight: 700;
}

.contact-info-card h2 {
  font-size: 1.125rem;
}

.contact-form-card > h2,
.contact-main-section .order-2 > h2 {
  font-size: 1.25rem;
}

.contact-faq-item h3 {
  font-size: 1rem;
}

.contact-hours-card > h3 {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  .contact-info-card h2 {
    font-size: 1.1875rem;
  }

  .contact-form-card > h2,
  .contact-main-section .order-2 > h2 {
    font-size: 1.375rem;
  }

  .contact-faq-item h3 {
    font-size: 1.0625rem;
  }

  .contact-hours-card > h3 {
    font-size: 1.25rem;
  }
}

.contact-form-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 12px;
  border: 1.27px solid rgba(224, 216, 204, 1);
  border-top: 1.27px solid rgba(224, 216, 204, 1);
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 1.25rem !important;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .contact-form-card {
    padding: 1.75rem !important;
    max-width: 40rem;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .contact-form-card {
    padding: 41.27px !important;
    max-width: 100%;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #contactForm {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #contactForm > div:has(#message) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .contact-form-card .contact-textarea {
    flex: 1;
    min-height: 0 !important;
    height: auto !important;
    resize: none;
  }

  #contactForm button[type="submit"] {
    margin-top: auto;
    flex-shrink: 0;
  }
}

.contact-field {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0.625rem 16px;
  font-size: 14px;
  color: #1B4D3E;
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-field:focus {
  outline: none;
  border-color: #B8935A;
  box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.12);
}

.contact-field::placeholder {
  color: rgba(27, 77, 62, 0.35);
}

.contact-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.contact-faq-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7.99px;
  width: 100%;
  max-width: none;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1.27px solid rgba(224, 216, 204, 1);
  border-top: 1.27px solid rgba(224, 216, 204, 1);
  box-shadow:
    0px 4px 6px -4px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 1.25rem !important;
}

@media (min-width: 640px) {
  .contact-faq-item {
    padding: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .contact-faq-item {
    padding: 25.27px !important;
  }
}

.contact-faq-item h3 {
  margin-bottom: 0;
}

.contact-hours-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: none;
  min-height: 0;
  background: linear-gradient(135deg, #FFFFFF 0%, #FDFCFB 10%, #FCFAF7 20%, #FAF7F3 30%, #F9F4EF 40%, #F7F1EB 50%, #F5EFE8 60%, #F4ECE4 70%, #F2E9E0 80%, #F1E7DC 90%, #EFE4D8 100%);
  border-radius: 12px;
  border: 1.27px solid rgba(224, 216, 204, 1);
  border-top: 1.27px solid rgba(224, 216, 204, 1);
  box-shadow:
    0px 4px 6px -4px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem !important;
}

@media (min-width: 640px) {
  .contact-hours-card {
    padding: 1.75rem !important;
  }
}

@media (min-width: 1024px) {
  .contact-hours-card {
    padding: 33.26px !important;
    min-height: 190.50293px;
  }
}

.contact-hours-card h3 {
  margin-bottom: 0;
}

.contact-newsletter-btn {
  background: linear-gradient(180deg, #B8935A 0%, #AD8E58 35%, #A28957 65%, #9B7943 100%);
}

@media (max-width: 1023px) {
  .contact-main-grid .order-1 {
    order: 2;
  }

  .contact-main-grid .order-2 {
    order: 1;
  }

  .contact-form-card {
    height: auto !important;
  }

  .contact-main-section {
    padding-top: 2rem;
  }

  .contact-hero-section > .container > .grid {
    margin-bottom: -1.25rem;
    padding-bottom: 1rem;
  }
}

@media (max-width: 639px) {
  .contact-hero-section::before {
    height: calc(100% - 7rem);
  }

  .contact-info-card {
    box-shadow: 0px 12px 24px -8px rgba(0, 0, 0, 0.2);
  }

  .contact-hours-card > div > div {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .contact-field {
    font-size: 16px;
  }
}

/* ------------------ terms page ------------------ */

.terms-page-bg {
  background-color: #F8F5F0;
}

.terms-hero {
  background: linear-gradient(180deg, #F8F5F0 0%, #FBF9F6 45%, #FFFFFF 100%);
}

.terms-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(27, 77, 62, 0.04);
  border: 1.27px solid #E0D8CC;
}

.terms-content h3 {
  color: #1B4D3E;
  font-weight: 700;
  font-size: 1.125rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  border-right: 3px solid #B8935A;
  padding-right: 0.75rem;
}

.terms-content p {
  color: #3D3D3D;
  font-size: 0.9375rem;
  line-height: 1.85;
  margin-bottom: 1rem;
}

.terms-content ul, .terms-content ol {
  margin-bottom: 1rem;
  padding-right: 1.5rem;
}

.terms-content li {
  color: #3D3D3D;
  font-size: 0.9375rem;
  line-height: 1.8;
  margin-bottom: 0.5rem;
  list-style-type: decimal;
}

.terms-content ul li {
  list-style-type: disc;
}


.settings-page .profile-sidebar::before,
.settings-card::before {
  background: #B8935A;
}

.settings-dashboard-section {
  padding-bottom: 1rem;
}

.settings-dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  min-width: 0;
}

.settings-sidebar {
  order: 1;
  height: auto;
  align-self: auto;
}

.settings-main {
  order: 2;
  min-width: 0;
}

.settings-page .settings-sidebar {
  height: auto;
}

.settings-page .settings-sidebar .profile-sidebar__nav {
  flex: none;
}

.settings-card {
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 12px;
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-width: 0;
  position: relative;
}

.settings-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1;
}

.settings-card__header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(90deg, #FFFFFF 0%, #FDFCFB 10%, #FCFAF7 20%, #FAF7F3 30%, #F9F4EF 40%, #F7F1EB 50%, #F5EFE8 60%, #F4ECE4 70%, #F2E9E0 80%, #F1E7DC 90%, #EFE4D8 100%);
  border-bottom: 1px solid #E0D8CC;
}

.settings-card__title {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.375rem;
}

.settings-card__subtitle {
  font-size: 0.8125rem;
  color: #3D3D3D;
  opacity: 0.7;
  margin: 0;
  line-height: 1.6;
}

.settings-card__body {
  padding: 1.25rem 1.5rem;
  min-width: 0;
}

.settings-section {
  min-width: 0;
}

.settings-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1B4D3E;
  margin: 0 0 1rem;
  line-height: 1.4;
}

.settings-section__title--danger {
  color: #C94C4C;
}

.settings-divider {
  border: none;
  border-top: 1px solid #E0D8CC;
  margin: 1.5rem 0;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.settings-form-grid--stack {
  grid-template-columns: minmax(0, 1fr);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.settings-field--full {
  grid-column: 1 / -1;
}

.settings-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1B4D3E;
  line-height: 1.4;
}

.settings-field__required {
  color: #1B4D3E;
  font-weight: 700;
}

.settings-field__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0 16px;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  background: #FFFFFF;
  min-width: 0;
}

.settings-field__input-wrap--phone {
  padding-inline-end: 0;
}

.settings-field__icon {
  width: 1.125rem;
  height: 1.125rem;
  color: #1B4D3E;
  flex-shrink: 0;
}

.settings-field__prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  min-height: 48px;
  border-inline-start: 1.27px solid #E0D8CC;
  background: #F3EFE8;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1B4D3E;
  flex-shrink: 0;
}

.settings-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #3D3D3D;
  line-height: 1.5;
  padding: 0.625rem 0;
}

.settings-field__input:focus {
  outline: none;
}

.settings-field__input-wrap:focus-within {
  border-color: #B8935A;
  box-shadow: 0 0 0 2px rgba(184, 147, 90, 0.2);
}

.settings-section__actions {
  display: flex;
  justify-content: flex-end !important; 
  margin-top: 1.25rem;
}

.settings-section--danger .settings-section__actions {
  justify-content: flex-start;
}

.settings-section[aria-labelledby="settingsProfileTitle"] > .settings-section__actions {
  justify-content: flex-start;
}

.settings-section[aria-labelledby="settingsPasswordTitle"] > .settings-section__actions {
  justify-content: flex-start;
}
#settingsPasswordForm,.settings-section__actions,.settings-check-list{
  max-width: none !important;
}
.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  width: 100%;
}

.settings-btn--primary {
  border: 1.27px solid #1B4D3E;
  background: #1B4D3E;
  color: #FFFFFF;
}

.settings-btn--primary:hover {
  background: #236352;
  border-color: #236352;
}

.settings-btn--danger {
  border: 1.27px solid #C94C4C;
  background: #FFFFFF;
  color: #C94C4C;
}

.settings-btn--danger:hover {
  background: #FEF2F2;
}

.settings-msg {
  font-size: 0.75rem;
  margin: 0.75rem 0 0;
  color: #1B4D3E;
  text-align: right;
}

.settings-msg--error {
  color: #C94C4C;
}

.settings-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  min-width: 0;
  padding: 0.9375rem 1rem;
  background: #FFFFFF;
  border: 1.27px solid #E0D8CC;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.settings-check-row:hover {
  border-color: #D4C9B8;
}

.settings-check-row__label {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #3D3D3D;
  line-height: 1.45;
  text-align: right;
  min-width: 0;
}

.settings-check-row__input {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: #1B4D3E;
  cursor: pointer;
}

.settings-danger__text {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #3D3D3D;
  opacity: 0.8;
  margin: 0;
  max-width: 42rem;
}

@media (min-width: 480px) {
  .settings-form-grid:not(.settings-form-grid--stack) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .settings-card__header {
    padding: 1.5rem 1.75rem;
  }

  .settings-card__body {
    padding: 1.5rem 1.75rem;
  }

  .settings-btn {
    width: auto;
    min-width: 10rem;
  }

  .settings-section[aria-labelledby="settingsPasswordTitle"] > .settings-form,
  .settings-section[aria-labelledby="settingsPasswordTitle"] > .settings-section__actions,
  .settings-section[aria-labelledby="settingsPasswordTitle"] > .settings-msg,
  .settings-section[aria-labelledby="settingsNotificationsTitle"] > .settings-check-list {
    width: 100%;
    max-width: 26rem;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}

@media (min-width: 1024px) {
  .settings-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .settings-sidebar {
    order: unset;
    align-self: start;
    height: auto;
  }

  .settings-main {
    order: unset;
  }
}

@media (max-width: 1023px) {
  .settings-dashboard-grid {
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .settings-dashboard-section {
    padding-bottom: 0.75rem;
  }
}

@media (max-width: 639px) {
  .settings-card__header {
    padding: 1rem 1.25rem;
  }

  .settings-card__body {
    padding: 1.125rem 1.25rem;
  }

  .settings-divider {
    margin: 1.25rem 0;
  }

  .settings-section__title {
    font-size: 0.9375rem;
  }

  .settings-field__input {
    font-size: 16px;
  }

  .settings-field__input-wrap {
    min-height: 44px;
    padding: 0 0.75rem;
  }

  .settings-check-row {
    padding: 0.8125rem 16px;
    gap: 0.75rem;
  }

  .settings-check-row__label {
    font-size: 0.8125rem;
  }

  .settings-field__prefix {
    padding: 0 0.625rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 479px) {
  .settings-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-section__actions {
    margin-top: 1rem;
  }

  .settings-btn {
    width: 100%;
  }
}

@media (max-width: 379px) {
  .settings-check-row {
    padding: 0.75rem;
  }

  .settings-check-row__input {
    width: 1.125rem;
    height: 1.125rem;
  }

  .settings-btn {
    min-height: 42px;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }

  .settings-field__icon {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 359px) {
  .settings-card__body {
    padding: 1rem;
  }

  .settings-card__header {
    padding: 16px 1rem;
  }

  .settings-danger__text {
    font-size: 0.75rem;
  }
}

.bg-hero-badge-gradient {
  background: linear-gradient(90deg, #B8935A 0%, #B59158 9.09%, #B38E56 18.18%, #B08C54 27.27%, #AD8952 36.36%, #AB874F 45.45%, #A8854D 54.55%, #A5824B 63.64%, #A38049 72.73%, #A07E47 81.82%, #9E7B45 90.91%, #9B7943 100%);
}

/* ============================================================
   Book Detail – product info components
   ============================================================ */
.product-cover-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
}

.product-feature-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdfaf5 100%);
  border: 1.27px solid #e0d8cc;
  box-shadow: 0 2px 8px -2px rgba(27, 77, 62, 0.06);
  border-radius: 0.75rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-feature-card:hover {
  border-color: rgba(184, 147, 90, 0.4);
  box-shadow: 0 4px 16px -4px rgba(27, 77, 62, 0.10);
}

.product-learn-box {
  background: linear-gradient(135deg, #ffffff 0%, #fdfaf5 100%);
}

/* ============================================================
   Readers Reviews – full-width section
   ============================================================ */
.review-card {
  background: #ffffff;
  border: 1.27px solid #e0d8cc;
  border-radius: 0.875rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px -2px rgba(27, 77, 62, 0.06);
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.review-card:hover {
  border-color: rgba(184, 147, 90, 0.35);
  box-shadow: 0 6px 20px -4px rgba(27, 77, 62, 0.10);
}

/* Fixed-width card for horizontal carousel */
.review-carousel-card {
  width: 300px;
  min-width: 260px;
  max-width: 340px;
}

@media (max-width: 640px) {
  .review-carousel-card {
    width: 260px;
    min-width: 220px;
  }
}

.review-avatar {
  background: linear-gradient(135deg, #1B4D3E 0%, #b8935a 100%);
}

/* ============================================================
   Preview carousel (inside book detail)
   ============================================================ */
.preview-carousel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.preview-carousel::-webkit-scrollbar {
  display: none;
}

.preview-carousel-slide {
  flex: 0 0 calc(33.333% - 0.5rem);
  min-width: 110px;
  max-width: 180px;
}

@media (max-width: 640px) {
  .preview-carousel-slide {
    flex: 0 0 calc(50% - 0.375rem);
  }
}

@media (max-width: 400px) {
  .preview-carousel-slide {
    flex: 0 0 calc(70% - 0.25rem);
  }
}