/* ── Safe Steps Flipbook ── */
.flipbook-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 6px 32px rgba(28,18,8,0.35);
}

/* Top bar */
.flipbook-top {
  background: #1C1208;
  border-radius: 4px 4px 0 0;
  height: 60px;
  position: relative;
  overflow: visible;
  z-index: 2;
}

.flipbook-brand {
  font-family: Arial, sans-serif;
  font-size: .6rem;
  letter-spacing: .08em;
  color: rgba(195,169,125,0.6);
  position: absolute;
  top: 10px;
  left: 20px;
}

/* Spiral: straddles the boundary between dark bar and white page */
.flipbook-spiral {
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  z-index: 10;
}

.flipbook-spiral img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* Page area — 16:9 aspect ratio, no fixed height so mobile fits perfectly */
.flipbook-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  overflow: hidden;
}

.flipbook-page {
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: top center;
  overflow: hidden;
}

.flipbook-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fff;
}

.flipbook-flipping-out { animation: fbFlipOut 0.42s cubic-bezier(0.4,0,1,1) forwards; }
.flipbook-flipping-in  { animation: fbFlipIn  0.42s cubic-bezier(0,0,0.6,1) forwards; }

@keyframes fbFlipOut {
  0%   { transform: perspective(1000px) rotateX(0deg); }
  100% { transform: perspective(1000px) rotateX(-88deg); opacity: 0.2; }
}
@keyframes fbFlipIn {
  0%   { transform: perspective(1000px) rotateX(88deg); opacity: 0.2; }
  100% { transform: perspective(1000px) rotateX(0deg); }
}

/* Nav bar */
.flipbook-nav {
  height: 50px;
  background: #1C1208;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.flipbook-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(195,169,125,0.7);
  background: transparent;
  color: #C3A97D;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: Arial, sans-serif;
}
.flipbook-btn:hover:not(:disabled) { background: rgba(195,169,125,0.15); border-color: #C3A97D; }
.flipbook-btn:active:not(:disabled) { transform: scale(0.94); }
.flipbook-btn:disabled { opacity: 0.25; cursor: default; }

.flipbook-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.flipbook-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 500px;
}

.flipbook-dot {
  width: 5px;
  height: 5px;
  background: rgba(195,169,125,0.4);
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.flipbook-dot.active { background: #C3A97D; width: 14px; }

.flipbook-label {
  font-family: Arial, sans-serif;
  font-size: .55rem;
  letter-spacing: .05em;
  color: rgba(195,169,125,0.75);
}