/* ─── Magazine Reader — Quintal ─────────────────────────────────────────────
   Tema: bege claro #edebe6 + estrelinhas doodle espalhadas no fundo
   Layout: bar(52) + stage(flex:1) + controls(54)
   ─────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rb:        #edebe6;          /* fundo do stage — bege quente */
  --rb-bar:    #e6e3dd;          /* barras superior e inferior */
  --rb-border: rgba(0,0,0,0.07);
  --rb-lo:     rgba(0,0,0,0.28);
  --rb-mid:    rgba(0,0,0,0.52);
  --rb-hi:     rgba(0,0,0,0.84);
  --primary:   var(--color-primary, #cf3220);
}

html, body {
  width: 100%; height: 100%;
  font-family: var(--font-main, 'Poppins', sans-serif);
  background: var(--rb);
  color: var(--rb-hi);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Root layout ── */
.reader {
  display: flex;
  flex-direction: column;
  height: 100svh;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOP BAR
   ──────────────────────────────────────────────────────────────────────────── */
.reader__bar {
  flex-shrink: 0;
  height: 52px;
  background: var(--rb-bar);
  border-bottom: 1px solid var(--rb-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  position: relative;
  z-index: 20;
}

.reader__back {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rb-lo);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 180ms;
}
.reader__back:hover { color: var(--rb-hi); }

.reader__bar-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.2);
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader__page-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rb-lo);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAGE — livro flutua sobre o fundo bege com estrelinhas
   ──────────────────────────────────────────────────────────────────────────── */
.reader__stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--rb);
}

/* Estrelinhas doodle — padrão SVG em tile de 380×380px */
.reader__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='35,43 36.25,46.75 40,48 36.25,49.25 35,53 33.75,49.25 30,48 33.75,46.75'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='162,16 163,19 166,20 163,21 162,24 161,21 158,20 161,19' transform='rotate(18,162,20)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='270,59 271.5,63.5 276,65 271.5,66.5 270,71 268.5,66.5 264,65 268.5,63.5' transform='rotate(12,270,65)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='88,108.5 88.9,111.1 91.5,112 88.9,112.9 88,115.5 87.1,112.9 84.5,112 87.1,111.1' transform='rotate(45,88,112)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='200,130 201.25,133.75 205,135 201.25,136.25 200,140 198.75,136.25 195,135 198.75,133.75' transform='rotate(15,200,135)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='52,191 53,194 56,195 53,196 52,199 51,196 48,195 51,194' transform='rotate(28,52,195)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='295,167.5 296.1,170.9 299.5,172 296.1,173.1 295,176.5 293.9,173.1 290.5,172 293.9,170.9' transform='rotate(5,295,172)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='135,247 136.25,250.75 140,252 136.25,253.25 135,257 133.75,253.25 130,252 133.75,250.75' transform='rotate(22,135,252)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='245,286.5 245.9,289.1 248.5,290 245.9,290.9 245,293.5 244.1,290.9 241.5,290 244.1,289.1' transform='rotate(38,245,290)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='25,301 26,304 29,305 26,306 25,309 24,306 21,305 24,304' transform='rotate(12,25,305)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='112,51 113,54 116,55 113,56 112,59 111,56 108,55 111,54' transform='rotate(32,112,55)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='232,28.5 232.9,31.1 235.5,32 232.9,32.9 232,35.5 231.1,32.9 228.5,32 231.1,31.1'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='302,117 303.25,120.75 307,122 303.25,123.25 302,127 300.75,123.25 297,122 300.75,120.75' transform='rotate(20,302,122)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='72,266 73,269 76,270 73,271 72,274 71,271 68,270 71,269' transform='rotate(8,72,270)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='182,215.5 183.1,218.9 186.5,220 183.1,221.1 182,224.5 180.9,221.1 177.5,220 180.9,218.9' transform='rotate(30,182,220)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='318,291.5 318.9,294.1 321.5,295 318.9,295.9 318,298.5 317.1,295.9 314.5,295 317.1,294.1' transform='rotate(45,318,295)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='145,161 146,164 149,165 146,166 145,169 144,166 141,165 144,164' transform='rotate(5,145,165)'/%3E%3Cpolygon fill='rgba(0,0,0,0.09)' points='45,137 45.75,139.25 48,140 45.75,140.75 45,143 44.25,140.75 42,140 44.25,139.25' transform='rotate(22,45,140)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* Vinheta interna sutil — escurece levemente as bordas */
.reader__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 50%,
    transparent 50%,
    rgba(0,0,0,0.06) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Zoom wrapper — livro flutua com sombra suave ── */
.reader__zoom-wrapper {
  position: relative;
  z-index: 2;
  transform-origin: center center;
  transition: transform 260ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  will-change: transform;
  filter:
    drop-shadow(0 10px 28px rgba(0,0,0,0.11))
    drop-shadow(0 3px 8px  rgba(0,0,0,0.07));
}

#flipBook {
  display: block;
  /* Dá ao StPageFlip controle total sobre eventos touch,
     impedindo que o browser interfira com scroll ou zoom */
  touch-action: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION ARROWS — circulares, posicionadas fora das bordas do livro
   --book-half-w = largura de uma página simples, definida em reader.js
   ──────────────────────────────────────────────────────────────────────────── */
.reader__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms, color 200ms, border-color 200ms,
              transform 200ms cubic-bezier(0.34,1.56,0.64,1),
              opacity 200ms;
}
.reader__arrow:hover {
  background: rgba(255,255,255,0.9);
  color: rgba(0,0,0,0.75);
  border-color: rgba(0,0,0,0.16);
  transform: translateY(-50%) scale(1.1);
}
.reader__arrow:active {
  transform: translateY(-50%) scale(0.94);
  transition-duration: 70ms;
}
.reader__arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
  transform: translateY(-50%);
}

.reader__arrow--prev { right: calc(50% + var(--book-half-w, 260px) + 10px); }
.reader__arrow--next { left:  calc(50% + var(--book-half-w, 260px) + 10px); }

/* ─────────────────────────────────────────────────────────────────────────────
   BOTTOM CONTROLS BAR
   ──────────────────────────────────────────────────────────────────────────── */
.reader__controls {
  flex-shrink: 0;
  height: 54px;
  background: var(--rb-bar);
  border-top: 1px solid var(--rb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 20px;
  position: relative;
  z-index: 20;
}

.ctrl-btn {
  width: 38px;
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.36);
  font-size: 15px;
  font-weight: 400;
  transition: background 140ms, color 140ms, border-color 140ms;
  font-family: var(--font-main, 'Poppins', sans-serif);
  flex-shrink: 0;
}
.ctrl-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--rb-hi);
  border-color: rgba(0,0,0,0.1);
}
.ctrl-btn:active {
  background: rgba(0,0,0,0.09);
  transition-duration: 60ms;
}
.ctrl-btn:disabled { opacity: 0.18; pointer-events: none; }

.ctrl-separator {
  width: 1px;
  height: 20px;
  background: rgba(0,0,0,0.08);
  margin: 0 6px;
  flex-shrink: 0;
}

.ctrl-zoom-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.3);
  min-width: 48px;
  text-align: center;
  cursor: pointer;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: color 140ms, border-color 140ms, background 140ms;
  font-family: var(--font-main, 'Poppins', sans-serif);
  font-variant-numeric: tabular-nums;
}
.ctrl-zoom-label:hover {
  color: var(--rb-hi);
  border-color: rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.05);
}

.ctrl-btn--thumbs.is-active {
  background: rgba(0,0,0,0.07);
  color: rgba(0,0,0,0.65);
  border-color: rgba(0,0,0,0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE INDICATOR DOTS  (aparecem no hover do stage)
   ──────────────────────────────────────────────────────────────────────────── */
.reader__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms;
  z-index: 5;
}
.reader__stage:hover .reader__dots { opacity: 1; pointer-events: all; }

.reader__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
  transition: background 200ms, transform 220ms cubic-bezier(0.34,1.56,0.64,1);
}
.reader__dot:hover    { background: rgba(0,0,0,0.45); }
.reader__dot.is-active {
  background: var(--primary);
  transform: scale(1.7);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING STATE
   ──────────────────────────────────────────────────────────────────────────── */
.reader__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--rb);
  z-index: 5;
  transition: opacity 500ms;
}
.reader__loading.is-hidden { opacity: 0; pointer-events: none; }

.reader__loading p {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.22);
}

.loading-bar {
  width: 96px;
  height: 1px;
  background: rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}
.loading-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -65%;
  width: 65%;
  background: var(--primary);
  animation: loadSlide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes loadSlide {
  to { left: 110%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   THUMBNAIL STRIP
   ──────────────────────────────────────────────────────────────────────────── */
.reader__thumbstrip {
  position: absolute;
  bottom: 54px;
  left: 0;
  right: 0;
  height: 96px;
  background: rgba(230,227,221,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--rb-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  z-index: 15;
}
.reader__thumbstrip::-webkit-scrollbar { display: none; }
.reader__thumbstrip.is-open { transform: translateY(0); }

.thumb-item {
  flex-shrink: 0;
  height: 68px;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 2px;
  opacity: 0.45;
  transition: opacity 180ms, border-color 180ms, transform 200ms cubic-bezier(0.34,1.56,0.64,1);
  background: rgba(0,0,0,0.04);
}
.thumb-item:hover {
  opacity: 0.8;
  transform: scale(1.06) translateY(-2px);
}
.thumb-item.is-active {
  opacity: 1;
  border-color: var(--primary);
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .reader__bar-title { font-size: 9.5px; letter-spacing: 0.1em; }
}

@media (max-width: 640px) {
  .reader__bar { padding: 0 14px; gap: 10px; }
  .reader__bar-title { display: none; }
  .reader__arrow { display: none; }
  .ctrl-separator { display: none; }
  .reader__controls { gap: 4px; padding: 0 8px; }
  .ctrl-btn { width: 44px; height: 38px; }
  .ctrl-zoom-label { min-width: 44px; }
  .reader__thumbstrip { height: 86px; }
  .thumb-item { height: 58px; }
  /* Dots sempre visíveis no mobile */
  .reader__dots { opacity: 0.6; pointer-events: all; bottom: 10px; }
}

@media (max-width: 360px) {
  .reader__controls { gap: 0; }
  .ctrl-btn { width: 38px; }
}