/* Core page background and typography
   A warm, paper-like palette and muted green accent that many book readers find pleasant.
   - Paper background: soft warm beige
   - Accent: deep forest green for calm, readable contrast
   - Muted text for long reading comfort
*/

:root{
  --paper-bg: #ffffff;        /* warm paper */
  --muted-text: #000000;      /* comfortable reading text */
  --accent: #ffffff;          /* deep forest green */
  --accent-variant: #000000;  /* softer green for hover */
  --card-bg: #ffffff;         /* slightly lighter card */
  --bottom-bg: #ffffff;       /* bottom bar warm */
  --icon-muted: #000000;
  --border: #000000;
}

/* Page background and default text */
.page-bg {
  background-color: var(--paper-bg);
  color: var(--muted-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* NAVBAR */
.navbar-custom {
  background-color: var(--accent);
  border-bottom: 1px solid rgba(0,0,0,1);
}
.navbar-custom .navbar-brand,
.navbar-custom .bi {
  color: #000000;
}
.navbar-custom .navbar-brand:hover {
  opacity: 0.95;
}

/* Search box */
.search-box {
  max-width: 350px;
}
.search-input {
  padding-left: 45px;   /* space for icon (RTL: left side) */
  padding-right: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--muted-text);
  box-shadow: none;
}
.search-input::placeholder {
  color: #8b8b84;
}
.search-btn {
  position: absolute;
  left: 10px;           /* RTL: button on the left */
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #fff;          /* white icon on green navbar */
  font-size: 1.4rem;
}
.search-box .search-btn .bi {
  color: #fff;
}

/* Responsive search width */
@media (max-width: 576px) {
  .search-box {
      max-width: 200px;
  }
}

/* Bottom bar */
.bottom-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: var(--bottom-bg);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 9999;
}
.bottom-bar a {
  text-decoration: none;
  color: var(--icon-muted);
  text-align: center;
  flex: 1;
  padding: 6px 0;
}
.bottom-bar i {
  font-size: 1.9rem;
}
.bottom-bar a.active i {
  color: black;
}

/* Make icons slightly larger and more readable on touch */
.bottom-bar a i {
  transition: transform .12s ease, color .12s ease;
}
.bottom-bar a:hover i {
  transform: translateY(-3px);
  color: var(--accent-variant);
}

/* Utility: cards and containers */
.container {
  color: var(--muted-text);
  padding-bottom: 140px;
}

/* Dark mode toggle support (keeps warm tone but darker) */
body.dark-mode {
  background-color: #1b1b18;
  color: #e6e2d9;
}
body.dark-mode .navbar-custom {
  background-color: #254733;
}
body.dark-mode .search-input {
  background: #22221f;
  border-color: #2b2b28;
  color: #e6e2d9;
}
body.dark-mode .bottom-bar {
  background: #151513;
  border-top-color: #2b2b28;
}
body.dark-mode .bottom-bar a {
  color: #bdb9b0;
}
body.dark-mode .bottom-bar a.active i {
  color: #9fc7a0;
}

/* Small visual polish */
a.navbar-brand, a.navbar-brand i {
  line-height: 1;
}

/* Card and button styles tuned for the bookish palette */
.card-spot {
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
  border-radius: 10px;
}
.card-spot:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Icon inside cards uses the accent color for visual consistency */
.card-icon {
  color: black;
  line-height: 1;
}

/* Card title */
.card-title {
  color: var(--muted-text);
  font-weight: 600;
}

/* Accent button matching the theme */
.btn-accent {
  background-color: var(--accent);
  color: #000000;
  border: 2px dashed rgba(0,0,0,1);
  box-shadow: none;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--accent-variant);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(59,90,64,0.12);
}

/* Make sure icons inside buttons align correctly in RTL */
.btn-accent .bi {
  vertical-align: -0.125em;
}

/* Responsive spacing polish */
@media (max-width: 576px) {
  .card-spot { border-radius: 8px; }
  .display-4 { font-size: 2.2rem; }
}

/* Magazine page specific styles tuned to the bookish palette */

/* Header accent for sidebar card */
.header-accent {
  background-color: var(--accent);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Magazine card visual */
.mag-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  margin-inline-end: 0.75rem;
}
.mag-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 6px;
}

/* Shelf and items (moved from inline style) */
.shelf {
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.shelf-item { flex: 0 0 auto; min-width: 160px; }

/* Cover sizing */
.cover-wrap { height: 180px; }
.issue-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.cover-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

/* Buttons and outlines matching theme */
.btn-outline-accent {
  color: var(--accent);
  border-color: rgba(59,90,64,0.12);
}
.btn-outline-accent:hover {
  background: rgba(59,90,64,0.06);
}

/* Ensure card-spot style is applied consistently */
.card-spot {
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
  border-radius: 10px;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .shelf-item { min-width: 140px; }
  .cover-wrap { height: 140px; }
  .mag-logo, .mag-logo-placeholder { width: 56px; height: 56px; }
}

/* Modern filter sidebar */
.sticky-filter {
  position: sticky;
  top: 1rem;
  border-radius: 12px;
  overflow: visible;
}

/* Header */
.sticky-filter .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Clear button */
#clear-filters {
  background: rgba(255,255,255,0.08);
  border: 0;
  color: #fff;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
#clear-filters:hover { opacity: .95; }

/* Input group polish */
.input-group-text { background: transparent; border: 1px solid var(--border); border-right: 0; }
.input-group .form-control { border-left: 0; }

/* Chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chip {
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .85rem;
  transition: all .12s ease;
  border: 1px solid transparent;
}
.chip-inactive {
  background: rgba(0, 0, 0, 1);
  color: var(--muted-text);
  border-color: transparent;
}
.chip-active {
  background: black;
  color: #000000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.04);
}

/* Range value */
.range-value { min-width: 48px; text-align: center; }

/* Small responsive tweaks */
@media (max-width: 767px) {
  .sticky-filter { position: relative; top: 0; }
  .filter-chips { gap: .4rem; }
}

/* Accessibility focus */
.chip:focus, .chip:active, .chip:hover { outline: none; transform: translateY(-2px); }