/* ============================================================
   bookmark.css — drop-in widget styles for the Ad Yaeli bookmark.
   Include via <link rel="stylesheet" href="bookmark.css">.
   (April 2026)
   ============================================================ */

/* ------------- 1. Chip on the top-left of the page ------------- */
.bm-chip {
  position: fixed;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 500;
  cursor: pointer;
  direction: rtl;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.bm-chip-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Soft warm amber halo so the artwork reads against a dark page */
  filter:
    drop-shadow(0 0 10px rgba(255, 218, 170, 0.55))
    drop-shadow(0 0 22px rgba(255, 210, 155, 0.32));
  transition: transform 120ms ease-out, filter 150ms ease-out;
}
.bm-chip:hover .bm-chip-icon,
.bm-chip:active .bm-chip-icon {
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 12px rgba(255, 220, 175, 0.7))
    drop-shadow(0 0 28px rgba(255, 212, 160, 0.42));
}

/* Icon artwork: fills the colored tile, respects its own transparency */
.bm-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.bm-chip-icon .bm-number {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
}
.bm-chip-label {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 15px;
  color: #e8e8e8;
  max-width: 88px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
}
.bm-chip-label:empty { display: none; }

@media (max-width: 480px) {
  .bm-chip { top: 16px; left: 16px; }
  .bm-chip-icon { width: 60px; height: 60px; border-radius: 15px; }
  .bm-chip-icon .bm-number { font-size: 22px; }
  .bm-chip-label { font-size: 13px; max-width: 70px; }
}

/* ------------- 2. Backdrop ------------- */
.bm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.bm-backdrop.visible { opacity: 1; }

/* ------------- 3. Modal base ------------- */
.bm-modal {
  position: fixed;
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 28px;
  color: #e8e8e8;
  direction: rtl;
  font-family: "Frank Ruhl Libre", serif;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.75);
  z-index: 1000;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  top: 50%;
  left: 50%;
  user-select: none;
  -webkit-user-select: none;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.bm-modal.visible { opacity: 1; transform: translate(-50%, -50%); }

/* Close button — dark rounded square with X, matches ref2/ref3 */
.bm-btn-close {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #0d0d0d;
  border: 2px solid #333;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms;
}
.bm-btn-close:hover { background: #1f1f1f; }
.bm-btn-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------- 4. Resume popup (ref2) ------------- */
.bm-popup-resume {
  padding: 18px 20px;
  width: min(560px, calc(100vw - 32px));
}
.bm-resume-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bm-resume-title {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 20px;
  color: #ffffff;
  white-space: nowrap;
  flex: 0 0 auto;
}
.bm-resume-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 9px 12px;
  color: #222;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 15px;
  direction: rtl;
  text-align: right;
  outline: none;
  transition: border-color 120ms;
}
.bm-resume-input:focus { border-color: #888; }
.bm-resume-input.error { border-color: #c94b4b; }
.bm-resume-input::placeholder { color: #a8a8a8; }

.bm-popup-resume .bm-btn-close {
  flex: 0 0 auto;
}

/* V (confirm) button that appears on match */
.bm-btn-check {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid #ffffff;
  color: #111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms, transform 120ms;
}
.bm-btn-check[hidden] { display: none; }
.bm-btn-check:hover { background: #f0f0f0; }
.bm-btn-check:active { transform: scale(0.96); }
.bm-btn-check svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-resume-error {
  margin-top: 8px;
  color: #e89090;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 13px;
  min-height: 16px;
  text-align: right;
}

.bm-resume-create-row {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

.bm-btn-outline {
  background: transparent;
  border: 2px solid #666;
  border-radius: 14px;
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 16px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  -webkit-tap-highlight-color: transparent;
}
.bm-btn-outline:hover { background: #1f1f1f; border-color: #888; }

/* ------------- 5. Create modal (refined design) -------------
   Desktop layout (RTL parent, columns flip visually):
     ┌─────────────────────────────────────────┐
     │ [X]                       Title         │   ← X on left, title/subtitle right
     │                           Subtitle      │
     ├─────────────────────────────────────────┤
     │ [preview] [< slider >]  1. בחר אייקון   │   ← step row with preview on far left
     │ [input]                 2. בחר שם       │
     │                  [V]                    │   ← confirm centered
     └─────────────────────────────────────────┘
*/
.bm-popup-create {
  padding: 28px 32px;
  width: min(680px, calc(100vw - 24px));
}
/* Header row: split into TWO header rows so the title sits on the same row
   as the X (and they vertically center together), while the subtitle drops
   to its own full-width row below. This is the same pattern mobile already
   uses; we now apply it on desktop too so "עריכת סימנייה" and the X share
   a midline regardless of how tall the X box is. */
.bm-create-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title    close"
    "subtitle subtitle"
    "step-icon step-icon"
    "step-name step-name"
    "confirm confirm";
  gap: 18px 18px;
  align-items: start;
}
.bm-create-grid .bm-btn-close {
  grid-area: close;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  align-self: center;   /* vertically center the X with the title text */
}
.bm-create-grid .bm-btn-close svg { width: 24px; height: 24px; stroke-width: 2.4; }

/* Header (title + subtitle), right-aligned on desktop.
   `display: contents` removes the wrapper's box so its children (h3 + subtitle)
   become direct grid items and can be placed in distinct rows. */
.bm-popup-create .bm-create-header {
  display: contents;
  text-align: right;
  direction: rtl;
  font-family: "Frank Ruhl Libre", serif;
  color: #e8e8e8;
}
.bm-popup-create .bm-create-header h3 {
  grid-area: title;
  align-self: center;     /* center title vertically against the X */
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  text-align: right;
  direction: rtl;
}
.bm-popup-create .bm-create-subtitle {
  grid-area: subtitle;
  /* Pull subtitle ~50% closer to the title than the default 18px row gap.
     -9px margin-top compresses the visual breathing room while keeping the
     row stack intact (other rows still get the normal 18px gap). */
  margin: -9px 0 0 auto;
  font-size: 17px;
  line-height: 1.55;
  color: #c8c8c8;
  max-width: 460px;
  text-align: right;
  direction: rtl;
}

/* Step rows — label on the right, content on the left.
   Step 1 (desktop): label on top-right, slider full-width below.
   Preview was removed from BOTH layouts (desktop + mobile) — its element
   is hidden globally below; we keep the JS-rendered DOM intact in case
   we want to bring it back, but it never lays out anywhere now. */
.bm-step {
  align-items: center;
  gap: 18px;
  direction: rtl;
}
.bm-step-icon {
  grid-area: step-icon;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "slider";
  row-gap: 14px;
}
.bm-step-icon .bm-step-label  { grid-area: label; }
.bm-step-icon .bm-slider-row  { grid-area: slider; }
/* Preview hidden everywhere — applies to both יצירת סימנייה (create) and
   עריכת סימנייה (edit) modals since they share one component. !important
   neutralizes any inline style or downstream override. */
.bm-popup-create .bm-step-icon .bm-preview,
.bm-step-icon .bm-preview     { display: none !important; }

.bm-step-name {
  grid-area: step-name;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label input";
  /* Stretch both cells to the full row height (driven by the input box),
     then center the label's text vertically inside its stretched cell.
     This is what makes "בחר/י שם" sit on the same midline as "נמר" inside
     the input — applies on desktop AND mobile since it's at the base level. */
  align-items: stretch;
  column-gap: 16px;
}
.bm-step-name .bm-step-label {
  grid-area: label;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
}
/* Desktop-only — push "בחר/י שם" label down ~5px so its visual baseline
   matches the Latin text inside the input (e.g. "Tester"). Hebrew has no
   descenders, so glyphs sit higher in the line box than Latin glyphs do;
   without this nudge the label appears stacked above the input text. The
   mobile media query below uses its own rules and is unaffected. */
@media (min-width: 561px) {
  .bm-step-name .bm-step-label {
    transform: translateY(5px);
  }
}
.bm-step-name .bm-step-input-wrap {
  grid-area: input;
  align-self: stretch;
  justify-content: center;
}

.bm-step-label {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  direction: rtl;
}
.bm-step-num {
  color: #fff;
  opacity: 0.95;
}

.bm-step-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.bm-name-input {
  background: transparent;
  border: 2px solid #666;
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 22px;
  line-height: 1.2;
  direction: rtl;
  text-align: right;
  outline: none;
  width: 100%;
  transition: border-color 120ms;
}
.bm-name-input:focus { border-color: #aaa; }
.bm-name-input.error { border-color: #c94b4b; }
.bm-name-input::placeholder { color: #8a8a8a; }

.bm-name-error {
  margin-top: 6px;
  color: #e89090;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 13px;
  min-height: 16px;
  text-align: right;
  direction: rtl;
}
/* When the error is empty (the default), zero its footprint so the input
   wrap shrinks to JUST the input. Without this, the empty error reserves
   ~22px below the input and `justify-content: center` on the wrap pushes
   the input above the row's true center — visually misaligning it from
   the label. */
.bm-name-error:empty {
  margin-top: 0;
  min-height: 0;
}

/* Preview square — ALWAYS stroke-only (transparent background, dashed grey
   border). The selected icon's artwork floats inside; we don't paint a
   colored tile behind it, even when filled, so the preview reads as a
   "container/frame" rather than a duplicate of a slider item. */
.bm-preview {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 2px dashed #777;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.bm-preview .bm-icon-img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.bm-preview .bm-number {
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 30px;
  font-weight: 600;
}

/* Slider — explicit LTR so item 0 (default owl) sits at the LEFT edge. */
.bm-slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  direction: ltr;
}
.bm-slider-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.bm-slider-track {
  display: flex;
  gap: 14px;
  direction: ltr;
  transition: transform 260ms ease;
  will-change: transform;
}
.bm-slider-item {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: var(--bm-color, #555);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2px transparent border keeps layout stable when .selected adds a real
     border (no shift on click). */
  border: 2px solid transparent;
  transition: transform 120ms, border-color 120ms;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.bm-slider-item:hover { transform: scale(1.05); }
.bm-slider-item.selected {
  /* Thinner, darker grey stroke per design — replaces the old white 3px. */
  border-color: #777;
  border-style: dashed;
}
.bm-slider-item .bm-number {
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 30px;
  font-weight: 600;
}

.bm-slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms, opacity 120ms;
  -webkit-tap-highlight-color: transparent;
}
.bm-slider-arrow:hover { background: #262626; }
.bm-slider-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.bm-slider-arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Confirm button (the V) — centered, larger */
.bm-confirm-row {
  grid-area: confirm;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.bm-btn-confirm {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: #fff;
  border: 2px solid transparent;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, opacity 120ms, transform 120ms;
  -webkit-tap-highlight-color: transparent;
}
.bm-btn-confirm:hover:not(:disabled) { background: #f0f0f0; }
.bm-btn-confirm:active:not(:disabled) { transform: scale(0.96); }
.bm-btn-confirm:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.bm-btn-confirm svg {
  width: 38px;
  height: 38px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reset row — only rendered in EDIT mode. A tertiary "text link" action
   under the V button. Visually subordinate so it doesn't compete with
   confirm; clicking it wipes the device's bookmark identity and reopens
   the resume popup so the user can switch to another bookmark. */
.bm-reset-row {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.bm-btn-reset {
  background: transparent;
  border: none;
  color: #9a9a9a;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(154, 154, 154, 0.5);
  transition: color 120ms, text-decoration-color 120ms;
  -webkit-tap-highlight-color: transparent;
  direction: rtl;
}
.bm-btn-reset:hover,
.bm-btn-reset:focus-visible {
  color: #d8d8d8;
  text-decoration-color: rgba(216, 216, 216, 0.8);
  outline: none;
}

/* ---- Mobile (≤560px) — Inter font, 5-icon-per-view slider, preview
   moves to a top row beside the label so the slider gets full width. ---- */
@media (max-width: 560px) {
  .bm-popup-create {
    /* +10px taller mobile popup — split as +5px top / +5px bottom so the
       modal stays centered visually. Was 18px 18px 22px. The extra room
       absorbs the 10px shift on the name section below without overflow. */
    padding: 23px 18px 27px;
    /* Per-modal Inter override; keeps page-wide Frank Ruhl Libre intact. */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .bm-popup-create,
  .bm-popup-create .bm-create-header h3,
  .bm-popup-create .bm-create-subtitle,
  .bm-popup-create .bm-step-label,
  .bm-popup-create .bm-name-input,
  .bm-popup-create .bm-name-error,
  .bm-popup-create .bm-slider-item .bm-number,
  .bm-popup-create .bm-preview .bm-number {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  .bm-create-grid {
    /* Mobile header is split across two grid rows so the X can vertically
       center with JUST the title (not the whole title+subtitle block).
         row 1: "title close"      ← X icon + title text on the same baseline
         row 2: "subtitle ......"  ← subtitle drops below, spans both cols */
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title    close"
      "subtitle subtitle"
      "step-icon step-icon"
      "step-name step-name"
      "confirm confirm";
    column-gap: 12px;
    row-gap: 14px;
  }
  /* Flatten the header wrapper so its children become direct grid items —
     lets us place title and subtitle in their own rows without changing
     the JS-rendered HTML. */
  .bm-popup-create .bm-create-header { display: contents; }
  .bm-popup-create .bm-create-header h3 {
    grid-area: title;
    align-self: center;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
  }
  .bm-popup-create .bm-create-subtitle {
    grid-area: subtitle;
    margin: 0;
    font-size: 17px;
    font-weight: 200;
    line-height: 1.5;
    text-align: right;
    max-width: none;
  }
  .bm-create-grid .bm-btn-close {
    width: 50px; height: 50px; border-radius: 14px;
    align-self: center; /* vertically center with the title */
  }
  .bm-create-grid .bm-btn-close svg { width: 19px; height: 19px; }

  /* Step 1 (mobile): preview removed per design — just label on top
     (right-aligned in RTL) and a full-width slider below it. The grid
     columns/areas drop the preview cell entirely so nothing else shifts. */
  .bm-step-icon {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "slider";
    row-gap: 12px;
    align-items: center;
  }
  .bm-step-icon .bm-preview {
    display: none;
  }

  /* Step 2: keep label + input on one row. Stretch both cells to the row
     height (driven by the input box), then center the label's text inside
     its stretched box via flex. This guarantees the label's visual midline
     matches the input's text midline regardless of input padding.
     `margin-top: 10px` shifts the WHOLE row (label + input together) down
     10px on mobile per design — pushes step 2 away from the slider above. */
  .bm-step-name {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: stretch;
    margin-top: 10px;
  }
  .bm-step-name .bm-step-label {
    font-size: 18px;
    line-height: 1;
    align-self: stretch;
    display: flex;
    align-items: center;   /* center label text in the row */
    margin: 0;
    /* Reset desktop's translateY nudge — mobile already aligns label/input
       midlines correctly via the stretched flex setup above. */
    transform: none;
  }
  .bm-step-name .bm-step-input-wrap {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .bm-name-input {
    font-size: 18px;
    padding: 11px 14px;
    border-radius: 12px;
    line-height: 1.2;      /* small breathing room so Hebrew descenders sit centered */
  }

  /* Mobile slider: 5 full icons per view, no spaces, no arrows visible.
     Use native horizontal scroll-snap so the user can swipe through. */
  .bm-slider-row {
    gap: 0;
    width: 100%;
  }
  .bm-slider-arrow {
    /* Per fix 5: no half-icon overflow and no dots — also no arrow chrome
       crowding the row. The slider scrolls natively instead. */
    display: none;
  }
  .bm-slider-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar — keep the look clean. */
    scrollbar-width: none;
  }
  .bm-slider-viewport::-webkit-scrollbar { display: none; }
  .bm-slider-track {
    gap: 0;
    /* Transform isn't used on mobile; JS clears it. */
    transform: none !important;
    transition: none;
  }
  .bm-slider-item {
    /* 5 icons fit exactly across the viewport, no gaps. */
    width: 20%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    scroll-snap-align: start;
  }
  .bm-slider-item .bm-number { font-size: 24px; }

  .bm-btn-confirm { width: 64px; height: 64px; border-radius: 18px; }
  .bm-btn-confirm svg { width: 32px; height: 32px; }

  /* Resume popup tighter on mobile */
  .bm-popup-resume { padding: 14px 16px; }
  .bm-resume-row { gap: 10px; }
  .bm-resume-title { font-size: 17px; }
  .bm-resume-input { font-size: 14px; padding: 8px 10px; }
  .bm-btn-check { width: 42px; height: 42px; border-radius: 12px; }
  .bm-btn-check svg { width: 19px; height: 19px; }
}

/* ------------- 6. Toast ------------- */
.bm-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 15px;
  opacity: 0;
  transition: opacity 180ms, transform 180ms;
  z-index: 1100;
  pointer-events: none;
  direction: rtl;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  max-width: calc(100vw - 32px);
  text-align: center;
}
.bm-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Reading Gates — chapter checkpoints
   Markup: <div class="reading-gate" data-gate="N"></div>
   States:
     - default (no class): hidden, layout collapsed (gate not active yet)
     - .active: shows the "להמשיך לקרוא" button + blurs siblings after
     - .cleared: hidden again, no blur (gate already passed)
   ============================================================ */

.reading-gate {
  display: none;          /* default: invisible — JS adds .active to the first uncleared one */
  margin: 48px 0 32px;
  text-align: center;
}

.reading-gate.active {
  display: block;
}

.reading-gate.cleared {
  display: none;          /* once passed, the gate vanishes entirely */
}

/* The button itself */
.reading-gate-button {
  background: #1a1a1a;
  border: 1px solid rgba(255, 218, 170, 0.55);
  color: #e8e8e8;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 22px;
  font-weight: 500;
  padding: 16px 36px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease-out, box-shadow 180ms ease-out, border-color 180ms;
  box-shadow:
    0 0 12px rgba(255, 218, 170, 0.18),
    0 0 28px rgba(255, 210, 155, 0.10);
  direction: rtl;
}

.reading-gate-button:hover,
.reading-gate-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 218, 170, 0.85);
  box-shadow:
    0 0 16px rgba(255, 218, 170, 0.35),
    0 0 36px rgba(255, 210, 155, 0.22);
  outline: none;
}

.reading-gate-button:active {
  transform: translateY(0);
}

.reading-gate-button[disabled] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

@media (max-width: 480px) {
  .reading-gate { margin: 36px 0 28px; }
  .reading-gate-button { font-size: 20px; padding: 14px 28px; }
}

/* All siblings AFTER the active gate are hidden entirely.
   Hard cutoff: no teaser, no scroll past the button — the content
   below is removed from layout, so the page simply ends at the gate. */
.reading-gate.active ~ * {
  display: none !important;
}

/* Give the active gate enough breathing room at the bottom so the page
   doesn't feel like it ends abruptly right under the button. */
.reading-gate.active {
  padding-bottom: 40vh;
}

/* ============================================================
   "Coming soon" modal — temporary end-of-available card.
   Used while more chapters are still being uploaded; replaced
   by the celebratory end-of-book modal when the book is complete.
   ============================================================ */
.bm-popup-coming-soon {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bm-popup-coming-soon .bm-btn-close {
  align-self: flex-start;
}

.bm-coming-soon-body {
  text-align: center;
  padding: 8px 12px 20px;
}

.bm-coming-soon-title {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 24px;
  font-weight: 500;
  color: #f5e9d6;
  line-height: 1.4;
  text-shadow: 0 0 18px rgba(255, 218, 170, 0.18);
}

@media (max-width: 480px) {
  .bm-popup-coming-soon { padding: 16px 18px; }
  .bm-coming-soon-title { font-size: 20px; }
}