:root {
  --leather-dark: #2c0e08;
  --leather-main: #4a1c12;
  --leather-light: #6d2d20;
  --gold-leaf: #d4af37;
  --paper: #f9f4e8;
  --ink: #2b2621;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #12100e;
  background-image: radial-gradient(circle, #26201b 0%, #000 100%);
  color: var(--ink);
  font-family: "Palatino", "Georgia", serif;
  overflow-x: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
}

.app-header {
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: var(--gold-leaf);
}

.menu-btn {
  background: linear-gradient(145deg, var(--leather-main), var(--leather-dark));
  color: var(--gold-leaf);
  border: 1px solid var(--gold-leaf);
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 4px;
}

/* --- SIDEBAR (REGISTER) --- */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 320px;
  background: var(--paper);
  z-index: 1000;
  transform: translateX(-100%);
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 10px 0 30px rgba(0,0,0,0.5);
  border-right: 4px solid var(--leather-main);
}

.sidebar.open { transform: translateX(0); }

.sidebar__header {
  background: var(--leather-dark);
  color: var(--gold-leaf);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--gold-leaf);
}

.sidebar__search { padding: 15px; background: rgba(0,0,0,0.05); }
.sidebar__search input {
  width: 100%; padding: 10px; border: 1px solid var(--gold-leaf);
  border-radius: 4px; background: #fff;
}

.sidebar__content {
  flex: 1;
  overflow-y: auto; /* Zorgt dat je door de boeken kunt scrollen! */
  padding: 20px;
}

.book-group-title {
  font-weight: bold; text-transform: uppercase; font-size: 0.75rem;
  color: #8c7a61; margin: 20px 0 10px 0; letter-spacing: 1px;
}

.book-link {
  display: block; padding: 10px; color: var(--ink);
  text-decoration: none; cursor: pointer; border-radius: 4px;
}

.book-link:hover { background: rgba(212, 175, 55, 0.15); }
.book-link.active { background: var(--leather-main); color: var(--gold-leaf); font-weight: bold; }

.chapter-chips {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px;
}

.chip {
  background: #fff; border: 1px solid #ddd; text-align: center;
  padding: 8px 0; cursor: pointer; border-radius: 3px; font-size: 0.9rem;
}

.chip.active { background: var(--gold-leaf); color: #fff; border-color: var(--gold-leaf); }

.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: none; z-index: 999;
}

.close-btn { background: none; border: none; color: white; font-size: 2rem; cursor: pointer; }

/* --- BOEK LAYOUT --- */
.book-container {
  display: flex; width: 100%; max-width: 1000px; min-height: 80vh;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8); border-radius: 4px 12px 12px 4px;
}

.book-spine {
  width: 60px; background: var(--leather-main);
  background-image: linear-gradient(to right, #2c0e08, #6d2d20, #2c0e08);
  display: flex; flex-direction: column; justify-content: space-around; align-items: center;
  border-right: 2px solid rgba(0,0,0,0.3); flex-shrink: 0;
}

.spine-title { color: var(--gold-leaf); writing-mode: vertical-rl; font-size: 0.8rem; letter-spacing: 3px; opacity: 0.7; }
.spine-rib { width: 100%; height: 5px; background: rgba(0,0,0,0.3); }

.book-page {
  background: var(--paper); flex: 1; display: flex; position: relative;
  box-shadow: inset 20px 0 40px rgba(0,0,0,0.1);
}

.page-inner { padding: 40px 60px; width: 100%; }

.nav-arrow {
  background: none; border: none; font-size: 2.5rem; color: var(--gold-leaf);
  cursor: pointer; padding: 20px; transition: 0.2s;
}

.nav-arrow:hover { transform: scale(1.2); }
.nav-arrow:disabled { opacity: 0.1; cursor: default; }

.bible-text { font-size: 1.25rem; line-height: 1.8; text-align: justify; }
.verse-num { color: #b84d39; font-weight: bold; font-size: 0.8rem; margin-right: 5px; vertical-align: super; }

.mobile-footer-nav { display: none; }

/* --- MOBIEL --- */
@media (max-width: 768px) {
  .book-spine, .nav-arrow { display: none; }
  .page-inner { padding: 25px 20px; }
  .mobile-footer-nav { display: flex; gap: 10px; margin-top: 30px; }
  .gold-btn {
    flex: 1; padding: 15px; background: var(--leather-main);
    color: var(--gold-leaf); border: 1px solid var(--gold-leaf); border-radius: 4px;
  }
  .sidebar { width: 85%; }
}