/* /rezervacija/ — the result card and the offer cards.
   A separate sheet because prie-parko.css holds ~162 .bk-* rules and the
   search bar is being rebuilt in that same file at the same time. Loaded from
   Base.astro after prie-parko.css, so at equal specificity these win — but
   measure that in the browser rather than trusting it.

   Everything below answers one line of the client's 2026-08-26 list. Each
   block says which. */

/* ============================================================ the photos ==
   „id make the photos into slider and into lightbox, so you can see more"

   The card's media column is now the template's own .w-slider full of
   .w-lightbox frames (widgets/slider.js and widgets/lightbox.js — reused, not
   re-written). base.css ships .w-slider with height: 300px and a grey ground;
   both are overridden here so the slider is exactly the frame the single
   photograph used to fill. */
.bk-result-media .bk-shots,
.bk-result-media .bk-shots .bk-shots-mask {
  height: 100%;
  min-height: inherit;
}
.bk-result-media .bk-shots {
  position: absolute;
  inset: 0;
  background: var(--colors-color-bg-4);
  text-align: left;
}
.bk-result-media .bk-shot-slide { height: 100%; }
.bk-result-media .bk-shot {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.bk-result-media .bk-shot .image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A single-frame room: still a lightbox, just nothing to slide. */
.bk-result-media > .bk-shot {
  position: absolute;
  inset: 0;
}

/* Arrows: the template's own slider button, sized down to sit inside a
   240px frame.

   „the arrows on slider ar broken" — 2026-08-27.

   Measured before touching anything, because the report and the cause were
   not the same thing. The slider boots correctly on all ten cards: dots are
   generated, aria scaffolding is added, `data-hide-arrows` drops the arrow at
   each end of the strip, and a click advances exactly one page — the visible
   frame really does go r6-living.webp -> r6-living-stairs.webp. Nothing in
   widgets/slider.js is wrong, which is just as well, because it is shared
   with every other page.

   The bug was here, in this file: the arrows were `opacity: 0` at rest, and
   the only rules that ever raised it were `.bk-result:hover`,
   `:focus-within` and `:focus-visible`. So:

     · on a phone or tablet, and in any window under 992px, the arrows could
       not be revealed AT ALL — the narrow media query below re-asserted
       `opacity: 0` and touch has neither hover nor a keyboard. The controls
       stayed in the DOM at full size, invisible and still clickable, so the
       only way to meet one was to hit it by accident and watch the gallery
       jump for no visible reason. That is what „broken" was.
     · on a desktop, nothing announced that a slider existed until the pointer
       happened to cross the photograph.

   A control the guest cannot see is not a control. They rest visible now,
   whenever the room has more than one photograph, and brighten under the
   pointer — which is also honest about the dots, because the eight 6px dots
   underneath were carrying the entire affordance on their own. */
/* 2026-08-29, savininkas: „the arrows here are vertically not centered within
   th eimage". Ne apytiksliai, o 43px žemiau vidurio — ir tai išmatuota:
   nuotrauka 544→784 (vidurys 664), rodyklė 707.

   Kaltas paveldėtas `margin: auto`. base.css `.w-slider-arrow-*` turi
   `top:0; bottom:0; margin:auto` — taip šablonas centruoja rodyklę. Mes
   perrašėme `top` į 50%, bet `margin:auto` liko, ir lygtis
   `top + mt + height + mb + bottom = 240` tapo per daug apibrėžta: naršyklė
   likusius 86px padalijo pusiau ir pridėjo 43px viršuje. `margin: 0` grąžina
   sprendimą mūsų `top:50% + translateY(-50%)`. */
.bk-shots-arrow {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colors-color-light) 88%, transparent);
  color: var(--colors-color-dark);
  /* No backdrop-filter here, deliberately. It had blur(6px), which behind an
     88%-opaque white pill is not visible — and these arrows are the same
     recipe as the room-card bug (see the note at the foot of prie-parko.css):
     a backdrop-filtered element that does not exist at first paint (the
     results render from live availability) and then fades in on hover. The
     one thing a mis-composited backdrop paints is a flat light rectangle, and
     the fill here is white. Not worth a render surface for an invisible blur. */
  box-shadow: 0 1px 3px rgb(8 28 43 / 18%);
  cursor: pointer;
  opacity: .9;
  transition: opacity .18s ease, background-color .18s ease;
}
.bk-shots-arrow.prev { left: 10px; }
.bk-shots-arrow.next { right: 10px; }
.bk-shots-arrow .icon-team-slider { width: 9px; height: 16px; display: block; }
/* styles.css gives `.icon-team-slider.next` a 3px left margin (and .prev a 3px
   right one) for the template's label+arrow buttons, where the arrow sits
   beside a word. Inside a 34px circle it just pushes the chevron 1.5px off
   centre. */
.bk-shots-arrow .icon-team-slider.next,
.bk-shots-arrow .icon-team-slider.prev { margin-left: 0; margin-right: 0; }
/* The chevron sat 10px below the middle of its circle, and the circle was not
   the problem: `.icon-team-slider` centres correctly, but the <svg> inside it
   is an inline replaced box resting on the text baseline of a block whose
   line-height is 24px. Measured, not reasoned — button centre y 450, svg
   centre y 460. `display: block` takes it off the baseline. */
.bk-shots-arrow .icon-team-slider svg { display: block; }
.bk-result:hover .bk-shots-arrow,
.bk-result:focus-within .bk-shots-arrow { opacity: 1; }
.bk-shots-arrow:hover { background: var(--colors-color-light); }
.bk-shots-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--colors-color-accent-2);
  outline-offset: 2px;
}
/* `data-hide-arrows="true"` lets slider.js drop the arrow at each end of a
   finite strip, so there is never a live-looking control that does nothing. */

/* Dots: small, low, and out of the photograph's way. */
.bk-shots-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  z-index: 3;
  height: auto;
  padding: 8px 0;
  text-align: center;
}
.bk-shots-nav > div {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  background: color-mix(in srgb, var(--colors-color-light) 55%, transparent);
  border: 0;
  box-shadow: 0 1px 2px rgb(8 28 43 / 30%);
  transition: background-color .18s ease, transform .18s ease;
}
.bk-shots-nav > div.w-active {
  background: var(--colors-color-light);
  transform: scale(1.35);
}
.bk-shots-nav > div:focus-visible {
  outline: 2px solid var(--colors-color-light);
  outline-offset: 2px;
}

/* NOT restyled here: .w-lightbox-backdrop. The lightbox mounts on <body>, so
   there is no ancestor to scope a rule to, and this sheet loads on every page
   — repainting the backdrop would silently repaint the gallery and all fifteen
   room pages too. It keeps the template's own. */

/* ========================================================= the discount ==
   „−12 % rezervuojant tiesiogiai remove this, this is just always the case,
    its not a promotion" — 2026-08-27.

   The pill is gone from the card and its rules are gone from this file.
   `discount_pct` is 0.12 on every room on every date, so the badge marked
   nothing: it was a label announcing that the price is the price. What the
   guest keeps is the arithmetic, in the price block where money belongs —
   priceBlock() renders `base_total` struck through above `final_total`
   whenever the engine sends a reduced figure, so „531 € → 467,28 €" says it
   in euros without calling it an offer.

   Three rule sets in prie-parko.css lost their last user in this pass and are
   now dead: `.bk-state-pill` (~1427 and ~3158, the badge), `.bk-results-meta`
   (~3103, the deleted summary line) and `.bk-plan-terms` (~3525, the old
   <details> paragraph). They are not deleted here because that file is being
   edited elsewhere at the same time — flagged rather than raced. */

/* ============================================================ the price ==
   „the price block is too crammed"

   Two lines left it: the average-per-night figure (deleted — a number nobody
   can pay, sitting under the one they can) and the city tax (moved, see
   below). What is left gets room to be a price. */
.bk-result-price { gap: 4px; }
.bk-result-price .bk-price-was { margin-bottom: 2px; }
.bk-price-now { font-size: var(--text-h4-font-size); line-height: 1.05; }

/* ======================================================== what you get ==
   „pusryciai doent need a checkbox, just an icon and pusryciai iskaiciuoti,
    like in booking.com"
   „for pinigu grazinimas yes we need checkbox, but maybe not entire pill?
    keep it chill, same type of element as breakftas"

   So: two rows in one register. No borders, no pills, no fill. The only
   difference between them is that one has a checkbox, because only one of
   them is a question. */
.bk-plans {
  display: grid;
  gap: 6px;
  margin: 2px 0;
  justify-items: start;
}
.bk-incl,
.bk-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 0;
  font-size: var(--text-text-small-font-size, 14px);
  line-height: 1.4;
  /* base.css sets `label { font-weight: bold; margin-bottom: 5px }` for the
     whole template. The two rows must read as one register, and the one that
     happens to be a <label> was arriving in bold. */
  font-weight: 400;
  border: 0;
  background: none;
  border-radius: 0;
}
.bk-incl { color: color-mix(in srgb, var(--colors-color-dark) 78%, transparent); }
.bk-incl-ico {
  flex: none;
  color: var(--colors-color-accent-1);
}
.bk-opt {
  cursor: pointer;
  user-select: none;
  color: color-mix(in srgb, var(--colors-color-dark) 78%, transparent);
  transition: color .18s ease;
}
.bk-opt:hover { color: var(--colors-color-dark); }
.bk-opt input {
  accent-color: var(--colors-color-accent-2);
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
  cursor: pointer;
}
.bk-opt:has(input:checked) { color: var(--colors-color-dark); }
.bk-opt:has(input:focus-visible) {
  outline: 2px solid var(--colors-color-accent-2);
  outline-offset: 3px;
  border-radius: 3px;
}
.bk-opt-delta {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--colors-color-dark) 55%, transparent);
}

/* „Rezervuojant tiesiogiai" privalumų eilutė ir visos jos taisyklės (.bk-perks,
   -lead, -list, .bk-perk, .bk-perk-ico) 2026-08-29 išimtos savininko prašymu —
   trys versijos tą pačią dieną, paskui „maybe remove this". Du iš keturių
   punktų liko gyvi kainos skydelyje kortelėse. */

/* ===================================================== the fine print ==
   „id put Atšaukimo sąlygos next to 'daugiau apie kambari' and make it a
    small tooltip or smth." — 2026-08-27.

   So the disclosure leaves the plans box and joins the room link on one row:
   the two things a guest reads *about* the room, below the price decision
   instead of inside it.

   „Tooltip" cannot mean hover here. This is the paragraph that says whether
   the money comes back, and a hover tooltip is unreachable on every phone and
   unreadable with a keyboard. It is a real <button> and a panel: click, Enter
   and Space open it, Escape closes it and hands focus back, and a click
   anywhere else dismisses it. See widgets/results.js. */
/* What is in the price and whether it comes back both live under the total
   now (client, 2026-08-29), so they get their own block in the price panel. */
/* What is IN the price sits under the total; whether it comes back went back
   to the room column beside „Daugiau apie kambarį" (client, 2026-08-29). */
.bk-side-terms {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 14px;
}
.bk-side-terms .bk-plans { width: 100%; }

/* The row is the anchor, not the button. Anchoring the panel to the button
   put a 469px box wherever the button happened to start, which at 1440 landed
   it across the price column — the guest was reading the refund terms with
   „467,28 €" hidden behind them. Pinned to the row instead, it is exactly the
   width of the text column it belongs to and never leaves it, at any width.
   `align-self` because .bk-result-body is a flex column with
   `align-items: flex-start`, so this would otherwise shrink to its content. */
/* 2026-08-29, savininkas: „id align all this to bottom". Pavadinimas lieka
   viršuje, likusi vidurio stulpelio dalis nusėda į apačią. Tą pačią dieną,
   vėliau, dvi iš trijų tos grupės eilučių persikėlė į kainos skydelį, tad čia
   liko tik „Daugiau apie kambarį" — bet apačioje, kaip prašyta. */
.bk-result-body > .bk-result-links { margin-top: auto; }

.bk-result-links {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-width: 0;
}
/* A sold-out room with no page of its own has neither a link nor terms, so the
   row would be an invisible flex item still spending one `gap`. */
.bk-result-links:not(:has(> :not([hidden]))) { display: none; }
.bk-terms {
  position: static;
  display: inline-flex;
}
.bk-terms[hidden] { display: none; }
/* 2026-08-29, savininkas: „atsaukimo salyhos should be same size and style as
   'daugiau apie kambari'". Dydžio skirtumą darė `font: inherit`: mygtukas
   paveldėdavo eilutės 16px vietoj savo `text-small` 14px, tad atrodė didesnis
   už kaimyninę nuorodą. Dabar abu — 14px, ta pati ištisinė linija po tekstu,
   ta pati rašalo spalva; ⓘ ženkliukas išimtas, nes „ta pati stilistika" jo
   neturi. Elementas lieka <button> su aria-expanded: jis atidaro skydelį, o
   ne veda kitur. */
.bk-terms-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-text-small-font-size, 14px);
  line-height: 1.4;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease;
}
.bk-terms-btn:hover { color: var(--colors-color-dark); }
.bk-terms-btn:focus-visible {
  outline: 2px solid var(--colors-color-accent-2);
  outline-offset: 3px;
  border-radius: 3px;
}
.bk-terms-btn[aria-expanded='true'] { color: var(--colors-color-dark); }

/* Above the row, not below: the card the guest is about to book is often the
   last thing on screen, and a panel opening downwards would push the page
   under their thumb. */
.bk-terms-pop {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  padding: 14px 16px;
  border-radius: var(--spacing-radius-small);
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  background: var(--colors-color-light);
  color: var(--colors-color-dark);
  box-shadow: 0 12px 32px rgb(8 28 43 / 14%);
}
.bk-terms-pop[hidden] { display: none; }
.bk-terms-text { display: block; margin: 0; }

/* Miesto rinkliavos blokas ir „Į kainą įskaičiuoti…" eilutė 2026-08-29 išimti
   savininko prašymu („id remove these"), kartu su .bk-tax / .bk-tax-figure /
   .bk-tax-text / .bk-tax-name / .bk-tax-calc / .bk-price-note taisyklėmis.
   Rinkliava tebėra tikra (2 €/asmeniui už naktį, neįskaičiuota į rodomas
   sumas); tai užrašyta research/notes/open-questions.md. */

/* ======================================================== offer cards ==
   „these should be sexier, more attractive. maybe they could be wrapped in
    giftwrap and unwrap as you scroll to the section?"

   byq gem: curtain-image-reveal-01 (https://app.byq.supply/gems/curtain-image-reveal-01).
   Its signature is a clip-path curtain wiping off the photograph as the card
   enters, direction alternating per card, with the image settling out of a
   1.25 overscale underneath and the caption fading up 0.7s behind the wipe.
   Every duration, easing, delay and stagger below is the gem's, copied
   verbatim — that is what makes the effect read. Only the colours, type and
   card anatomy are ours.

   The card itself got the weight the client asked for: a taller frame, the
   saving as a seal on the photograph rather than a line of text above the
   title, and a hairline that warms on hover. */
.dl-grid { gap: 16px; }

.dl-offer {
  gap: 0;
  padding: 10px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  background: color-mix(in srgb, var(--colors-color-bg-4) 0%, transparent);
  transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.dl-offer:hover {
  border-color: color-mix(in srgb, var(--colors-color-accent-1) 55%, transparent);
  background: color-mix(in srgb, var(--colors-color-bg-4) 45%, transparent);
  transform: translateY(-3px);
}

.dl-offer-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--spacing-radius-small);
}
@media screen and (min-width: 992px) {
  /* The gem's own ratios: the odd card out is squarer, so a row of three
     never reads as three identical rectangles. */
  .dl-offer:nth-child(3n + 2) .dl-offer-media { aspect-ratio: 1 / 1; }
  .dl-offer:nth-child(3n) .dl-offer-media { aspect-ratio: 3 / 4; }
}

/* The seal: the saving, on the photograph, in the serif the room totals wear.
   It carries the gem's caption timing, so it lands after the curtain. */
.dl-offer-seal {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colors-color-light) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgb(8 28 43 / 18%);
}
.dl-offer-seal .dl-offer-figure {
  font-size: var(--text-h5-font-size);
  color: var(--colors-color-accent-4);
}

.dl-offer-body { gap: 6px; padding: 16px 10px 10px; }
.dl-offer-body .dl-offer-worth {
  margin: 0;
  color: var(--colors-color-accent-3);
  letter-spacing: .02em;
}
.dl-offer-body .text-small { margin-top: 2px; }
.dl-offer-more { margin-top: 10px; }

/* ---- the gem, verbatim ------------------------------------------------
   .cir-frame is the curtain, .cir-img the settle, .cir-caption the late
   fade. The CLOSED state is gated on .js-curtain, which widgets/deals.js
   puts on <html> and takes off again if anything throws: no script, no
   curtain, and the photographs are simply there. Same contract
   widgets/reveal.js uses for the gallery. */
.js-curtain .cir-frame {
  transform: translateZ(0);
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.js-curtain .cir-item[data-wipe="lr"] .cir-frame { clip-path: inset(0 100% 0 0); }
.js-curtain .cir-item[data-wipe="tb"] .cir-frame { clip-path: inset(0 0 100% 0); }
.js-curtain .cir-item[data-wipe="rl"] .cir-frame { clip-path: inset(0 0 0 100%); }

.js-curtain .cir-img {
  transform: scale(1.25);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.js-curtain .cir-caption {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .45s ease calc(var(--d, 0s) + .7s),
    transform .55s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .7s);
}

.js-curtain .cir-item[data-revealed="true"] .cir-frame { clip-path: inset(0 0 0 0); }
.js-curtain .cir-item[data-revealed="true"] .cir-img { transform: scale(1); }
.js-curtain .cir-item[data-revealed="true"] .cir-caption {
  opacity: 1;
  transform: translateY(0);
}

/* The gem's column offset: cards further right start a beat later. */
.js-curtain .cir-item[data-col="1"] { --d: .12s; }
.js-curtain .cir-item[data-col="2"] { --d: .24s; }

/* The gem's own accessibility clause, and the reason deals.js never even arms
   the observer under this query. */
@media (prefers-reduced-motion: reduce) {
  .js-curtain .cir-frame,
  .js-curtain .cir-img,
  .js-curtain .cir-caption {
    clip-path: inset(0 0 0 0) !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .dl-offer { transition: none; }
  .dl-offer:hover { transform: none; }
}

/* ------------------------------------------------------------ narrow ---- */
@media screen and (max-width: 991px) {
  .dl-offer-media { aspect-ratio: 3 / 2; }
  .bk-result-media .bk-shots { position: relative; }
  .bk-result-media > .bk-shot { position: relative; }
  /* This block used to read `.bk-shots-arrow { opacity: 0 }` — „touch has no
     hover to reveal the arrows with, and swiping is the gesture there
     anyway". The first half is true and it is exactly why the rule was wrong:
     with no hover and no keyboard, nothing on a phone could ever raise that
     opacity, so the arrows were permanently invisible and permanently
     clickable. Swiping does work, but a guest who has not discovered swiping
     had no visible control at all — this is the „arrows are broken" in the
     client's list. They stay visible here, and a little larger, because a
     34px circle is under the 44px a thumb wants. */
  .bk-shots-arrow { opacity: .92; width: 40px; height: 40px; }
  .bk-shots-arrow.prev { left: 8px; }
  .bk-shots-arrow.next { right: 8px; }
}
@media screen and (max-width: 767px) {
  .dl-offer-media { aspect-ratio: 4 / 3; }
}

/* ================================ dienos, kurioms galioja pasiūlymas ====
   2026-08-30, savininkas: „maybe in the date picker we should somehow mark the
   dates where discounts are active?"

   Taškas po skaičiumi, ne kita fono spalva: kalendoriuje fonas jau reiškia
   pasirinkimą (atvykimas, išvykimas, tarpas tarp jų), ir dar viena fono būsena
   susimaišytų su ja — svečias nebesuprastų, ar diena pažymėta, ar pasirinkta.
   Taškas gyvena atskirai ir išlieka matomas visose trijose būsenose.

   Spalva — akcentinė žalvario, ta pati, kuria svetainėje žymimos „ribotos
   trukmės" akutės. Reikšmę paaiškina `title` ir `aria-label`: ten įrašomas
   pasiūlymo pavadinimas, o ne „nuolaida", nes kiek ji verta konkrečią naktį
   sprendžia variklis, ne kalendorius. */
.dp-day.has-offer { position: relative; }
.dp-day.has-offer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background-color: var(--colors-color-accent-1);
}
/* Ant pasirinktos dienos fonas tamsus — taškas persijungia į šviesų. */
.dp-day.has-offer.is-from::after,
.dp-day.has-offer.is-to::after { background-color: var(--colors-color-light); }
.dp-day.has-offer[disabled]::after { display: none; }

/* Legenda po tinkleliu: taškas be paaiškinimo yra dėmė. */
.dp-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 0;
  color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent);
}
.dp-legend::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--colors-color-accent-1);
}
.dp-legend[hidden] { display: none; }