/* --- General Setup --- */
:root {
  --book-width-closed: 45vw;
  --book-width-open: 90vw;
  --book-height: 65vh;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #bde0fe, #e6f2ff);
  overflow: hidden;
}

h1 {
  text-align: center;
  font-size: 3.5rem;
}

h1,
h2,
h3 {
  letter-spacing: -0.05em;
  color: #003366;
}

p {
  color: #336699;
  line-height: 1.6;
}

hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 1em 0;
}

/* --- Book Structure & Base --- */
.book-container {
  perspective: 2500px;
}

.book {
  width: var(--book-width-closed);
  height: var(--book-height);
  position: relative;
  transition: width 0.8s ease-in-out;
  transform-style: preserve-3d;
}

.book.open {
  width: var(--book-width-open);
}

/* --- Covers and Pages (Shared) --- */
.front-cover,
.page-group,
.back-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

.cover-face,
.page-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding: 2em;
  box-sizing: border-box;
  background-color: #f0f8ff;
  border: 1px solid #a7c7e7;
  border-radius: 16px;
}

/* --- Front Cover --- */
.front-cover {
  transform-origin: left center;
  transition: transform 0.8s ease-out;
  border-radius: 16px;
  z-index: 20;
  cursor: pointer;
}

.cover-flags {
  display: flex;
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: -2rem;
  justify-content: center;
  align-items: center;
}

.cover-flags img {
  height: 88px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.cover-flags img:hover {
  transform: scale(1.1);
}

.book.open .front-cover {
  transform: rotateY(-180deg);
}

.cover-face-front {
  background-color: #cdeaff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cover-face-back {
  transform: rotateY(180deg);
  border-radius: 16px;
}

/* --- Inner Pages Group --- */
.page-group {
  transform-origin: left center;
  transition: transform 1s ease-in-out;
  z-index: 10;
}

.book.flipped .page-group {
  transform: rotateY(-180deg);
}

.page-face-front {
  display: flex;
  padding: 0;
}

.page-face-back {
  transform: rotateY(180deg);
  background-color: #f9f9f9;
}

.page {
  width: 50%;
  height: 100%;
  background: #ffffff;
  padding: 2em;
  box-sizing: border-box;
  border: 1px solid #ddd;
  overflow-y: auto;
  position: relative;
}

.page-left {
  border-radius: 16px 0 0 16px;
}

.page-right {
  border-radius: 0 16px 16px 0;
}

.back-cover img.group-photo {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  display: block;
  margin: 20px 0;
}

/* --- Back Cover --- */
.back-cover {
  z-index: 1;
}

.back-cover .cover-face {
  border-radius: 16px;
}

/* --- Navigation Buttons --- */
.nav-btn {
  position: absolute;
  bottom: 20px;
  background: #003366;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.nav-btn:hover {
  background-color: #0055a4;
}

/* Back button positioning */
#back-btn {
  right: 80px;
}

/* Next button positioning */
#next-btn {
  right: 20px;
}

/* Previous button (on back cover) */
#prev-btn {
  transform: rotate(180deg);
  right: 20px;
}

.bible-verse {
  font-family: "Crimson Pro", serif;
  font-size: 1.5rem;
}

.signature {
  font-size: 1.75rem;
}

/* --- MOBILE VIEW: Single Scrollable Page --- */
@media (max-width: 850px) {
  body {
    overflow: visible;
  }

  .book {
    width: 90vw;
    height: 80vh;
  }

  .book.open {
    width: 90vw;
  }

  .front-cover,
  .page-group {
    transform-origin: center top;
  }

  .book.open .front-cover {
    transform: rotateX(180deg);
  }

  .book.flipped .page-group {
    transform: rotateX(180deg);
  }

  .cover-face-front,
  .cover-face-back,
  .back-cover .cover-face {
    border-radius: 16px;
  }

  .cover-face-back,
  .page-face-back {
    transform: rotateX(180deg);
  }

  /* Make the page content one continuous scrollable area */
  .page-face-front {
    flex-direction: column;
    overflow-y: auto;
    padding: 2em;
    background: #ffffff;
    border-radius: 16px;
  }

  .page {
    width: 100%;
    height: auto;
    min-height: auto;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1em;
    overflow-y: visible;
    background: transparent;
  }

  .page-left,
  .page-right {
    border-radius: 0;
  }

  /* Ensure navigation buttons are properly positioned */
  .nav-btn {
    position: fixed;
    bottom: 20px;
    z-index: 100;
  }

  #back-btn {
    right: 80px;
  }

  #next-btn {
    right: 20px;
  }
}