/* ebook-1 PR 3 (R81 z, mockup docs/design/ebook-buybox-mockup/): the flag-on buy boxes (VisaBuyBox, BookVisaBox) with
   step 1 Forma (print | e-book). Linked only by src/components/shop/EbookBuyPanel.astro, which renders only while
   FLAGS.ebookEnabled is on, so no other page loads it. Design E tokens only (src/styles/tokens.css; check:tokens).
   The mode is the checked `fmt` radio, read with :has(), so the switch needs no JS (R81 z 4). Print and e-book blocks
   share one grid cell (.eb-stack, EbookModeStack.astro) and the inactive one is hidden with `visibility`, so a switch
   (or the island preselecting the e-book for lead = ebook) moves nothing below it. */

/* ---- step 1 Forma: two radio cards in the language-card style (R81 z 1) ---- */
.eb-fmt { border: 0; margin: 0; padding: 0; min-width: 0; }
.eb-fmt legend, .eb-step { margin: 0 0 10px; padding: 0; font-size: var(--fs-15); font-weight: var(--fw-bold); }
.eb-fmt__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eb-fmt__opt { position: relative; display: block; cursor: pointer; }
.eb-fmt__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eb-fmt__card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; box-sizing: border-box;
  padding: 13px 12px; border-radius: var(--r-14); border: 1px solid var(--c-line-2); background: var(--c-white); color: var(--c-ink); }
.eb-fmt__opt input:checked + .eb-fmt__card { padding: 12px 11px; border: 2px solid var(--c-wine-deep); background: var(--c-wine-tint); box-shadow: var(--sh-card); }
.eb-fmt__opt input:focus-visible + .eb-fmt__card { outline: var(--focus); outline-offset: 3px; }
.eb-fmt__icon { width: 34px; height: 34px; flex: none; color: var(--c-wine-deep); }
.eb-fmt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eb-fmt__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 1.3; }
.eb-fmt__sub { font-size: var(--fs-13); line-height: 1.4; color: var(--c-slate); }
.eb-nowrap { white-space: nowrap; }
.eb-fmt__price { font-family: var(--f-serif); font-size: var(--fs-20); line-height: 1.2; min-height: 1.2em; white-space: nowrap; }
/* the page count of the selected edition (R81 z 7), without JS */
.eb-pages { display: none; }
form:has(input[name="edition"][value="cs"]:checked) .eb-pages[data-ed="cs"],
form:has(input[name="edition"][value="en"]:checked) .eb-pages[data-ed="en"],
form:has(input[name="edition"][value="de"]:checked) .eb-pages[data-ed="de"],
form:has(input[name="edition"][value="hr"]:checked) .eb-pages[data-ed="hr"] { display: inline; }
@media (min-width: 720px) {
  .eb-fmt__card { flex-direction: row; align-items: center; gap: 14px; padding: 17px 18px; }
  .eb-fmt__opt input:checked + .eb-fmt__card { padding: 16px 17px; }
  .eb-fmt__icon { width: 44px; height: 44px; }
  .eb-fmt__text { flex: 1 1 auto; }
  .eb-fmt__title { font-size: var(--fs-17); }
  .eb-fmt__sub { font-size: var(--fs-14); }
  .eb-fmt__price { font-size: var(--fs-22); }
}

/* ---- one grid cell for the print and the e-book block (R81 z 4) ---- */
.eb-stack { display: grid; gap: inherit; min-width: 0; }
.eb-stack > * { grid-area: 1 / 1; min-width: 0; }
.eb-print { display: flex; flex-direction: column; gap: inherit; }
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) [data-eb-print],
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) [data-out="buy"],
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) [data-out="stock"],
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) .pay-note > [data-mask="payment-copy"]:not([data-eb-ebook]),
form[data-ebook-box]:not(:has(input[name="fmt"][value="ebook"]:checked)) [data-eb-ebook],
form[data-ebook-box]:not(:has(input[name="fmt"][value="ebook"]:checked)) [data-eb-submit] { visibility: hidden; }
/* the stock badge and the e-book status share one cell (book header bar, home cover column), and so do the two pay
   notes of the book box, so the longer e-book line moves nothing; the status column is at most half the bar and wraps */
form[data-ebook-box] .head-bar { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%); }
form[data-ebook-box] .head-bar > [data-out="stock"], form[data-ebook-box] .head-bar > .eb-status { grid-area: 1 / 2; justify-self: end; }
form[data-ebook-box] .cover-col { display: grid; justify-items: center; }
form[data-ebook-box] .cover-col > [data-out="stock"], form[data-ebook-box] .cover-col > .eb-status { grid-row: 3; grid-column: 1; }
form[data-ebook-box] .pay-note { display: grid; }
form[data-ebook-box] .pay-note > span { grid-area: 1 / 1; }
/* print-only lines below the CTA (the status line, the watch form) appear only for a sold-out print edition */
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) [data-out="status"],
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) [data-watch] { display: none; }
/* the two submit buttons share one cell; a sold-out print edition does not hide the e-book CTA */
form[data-ebook-box] .buy { display: grid; grid-template-columns: minmax(0, 1fr); }
form[data-ebook-box] .buy > .submit { grid-area: 1 / 1; }
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) .buy { display: grid; }

/* no edition offered as an e-book at runtime (src/scripts/ebook-buy.ts, R81 z 8 (7)): no Forma step, no e-book card */
form[data-ebook-box][data-eb-none] .eb-fmt { display: none; }

/* ---- step 2 in e-book mode: only the editions offered as an e-book, never a disabled card (R81 z 2) ---- */
form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) .ed-opt[data-eb-off] { display: none; }
/* from 480px every layout is one row, so the remaining cards share it; below, they keep the two-column grid (cs, en
   and de fill two rows, as the four print cards do: no height change on a switch) */
@media (min-width: 480px) {
  form[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) .eds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* ---- the e-book panel (R81 z 3): rows 3 to 6 as a checklist on the sage note, the waiver box, the next-step line ---- */
.eb-panel { display: flex; flex-direction: column; gap: 14px; }
.eb-panel .eb-step { margin: 0; }
.eb-checks { list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--c-sage); border-radius: var(--r-12); font-size: var(--fs-15); }
.eb-checks li { display: flex; gap: 10px; align-items: flex-start; }
.eb-checks strong { font-weight: var(--fw-bold); }
.eb-check { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-olive-dark); }
.eb-waiver { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-12);
  background: var(--c-white); border: 1px solid var(--c-line-2); font-size: var(--fs-15); cursor: pointer; }
.eb-waiver:has(input:checked) { padding: 13px 15px; border: 2px solid var(--c-wine-deep); }
.eb-waiver input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--c-wine-deep); }
.eb-next { margin: 0; font-size: var(--fs-14); color: var(--c-slate); }

/* ---- the e-book summary: 1 × e-kniha, the EPUB line, Celkem; no shipping line ---- */
.eb-sum { display: flex; flex-direction: column; gap: 8px; }
.eb-sum p { margin: 0; }
.eb-line { display: flex; justify-content: space-between; gap: 12px; }
.eb-epub { font-size: var(--fs-14); color: var(--c-slate); }
.eb-total { margin-top: 6px; padding-top: 12px; border-top: 2px dashed var(--c-line-2); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.eb-total strong { font-family: var(--f-serif); font-weight: var(--fw-regular); font-size: var(--fs-40); line-height: 1; }
.eb-total strong:empty { display: inline-block; min-block-size: 1em; min-inline-size: 4ch; }
.eb-status-line { padding: 12px 14px; background: var(--c-sage); border-radius: var(--r-10); font-size: var(--fs-14); }
.eb-status-line[hidden] { display: none; }

/* ---- the header status of e-book mode (row 44) ---- */
/* a wrapped status keeps the dot on its first line and the text beside it (start-aligned) */
.eb-status { display: flex; align-items: flex-start; gap: 6px; min-width: 0; text-align: start; line-height: 1.4; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-olive-dark); }
.eb-dot { flex: none; width: 8px; height: 8px; margin-top: calc(0.7em - 4px); border-radius: var(--r-round); background: currentColor; }

/* ---- the home box below 720 px (R81 z 8 (8)): no shared cell; the print block and the e-book block toggle with display,
   so neither reserves space for the other (the box sits below the first viewport; Lighthouse CLS on the homes checks
   it). The book box keeps the shared cell. ---- */
@media (max-width: 719px) {
  form.visa[data-ebook-box] .eb-stack { display: flex; flex-direction: column; gap: inherit; }
  form.visa[data-ebook-box]:has(input[name="fmt"][value="ebook"]:checked) .eb-stack > [data-eb-print],
  form.visa[data-ebook-box]:not(:has(input[name="fmt"][value="ebook"]:checked)) .eb-stack > [data-eb-ebook] { display: none; }
}