/* Short booking page for ads (/zapis): portrait in an arch, the offer in the language of benefits, the booking card,
   details folded into rows with photos, and a booking button that never leaves the screen. Mobile first. */

html { scroll-padding-top: 14px; }
.z-top { display: flex; justify-content: center; padding: 16px var(--gutter) 4px; }
.z-brand { cursor: default; }
.z svg use { pointer-events: none; }
.z-row__chev, .zs__done svg, .z-booked svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Offer ---------- */
.z-hero { display: grid; gap: 24px; padding-block: 14px 30px; }
.z-hero > * { min-width: 0; }
.z-portrait { position: relative; isolation: isolate; width: calc(100% - 12px); max-width: 420px; margin: 12px auto 0; animation: rise 0.8s var(--ease) backwards; }
.z-portrait::before { /* thin gold arch, offset like a frame behind the photo */
  content: ''; position: absolute; inset: -12px 12px 12px -12px; z-index: -1;
  border: 1px solid var(--gold-soft); border-radius: 999px 999px 32px 32px;
}
.z-portrait__arch { aspect-ratio: 1 / 1.04; box-shadow: var(--shadow); }
.z-portrait__arch img { object-position: 50% 18%; }
.z-portrait__chip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; }
.z-seal { top: 18px; left: -10px; width: 92px; height: 92px; }
.z-seal span { font-size: 25px; }
.z-seal text { font-size: 9.6px; }

.z-hero__text { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.z-hero__text > * { animation: rise 0.7s var(--ease) backwards; }
.z-hero__text > :nth-child(2) { animation-delay: 0.06s; }
.z-hero__text > :nth-child(3) { animation-delay: 0.12s; }
.z-hero__text > :nth-child(n + 4) { animation-delay: 0.18s; }
.z-eyebrow { margin: 0 0 12px; }
.z-title { font-size: clamp(30px, 9.9vw, 60px); line-height: 1.02; text-wrap: balance; }
.z-title em { display: inline-block; } /* the promise stays on one line whenever it fits */
.z-lead { margin: 14px 0 0; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Booking card ---------- */
.z-card { margin-top: 24px; padding: 24px 18px 18px; border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px rgba(176, 138, 87, 0.22); }
.z-card__title { margin: 0; font: 500 28px/1.08 var(--serif); color: var(--ink); text-wrap: balance; }
.z-card__title em { font-style: italic; color: var(--wine); }
.z-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 14px 0 0; }
.z-price b { font-size: 46px; font-weight: 600; line-height: 1; color: var(--wine); }
.z-price s { font-size: 22px; color: var(--muted); text-decoration-thickness: 1.5px; }
.z-tag { align-self: center; padding: 6px 11px; border-radius: 999px; background: var(--paper); color: var(--wine); font: 700 12px/1 var(--sans); letter-spacing: 0.02em; }
.z-in { display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 14px 0 18px; padding: 0; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.z-in li { display: flex; align-items: center; gap: 6px; }
.z-in li::before {
  content: ''; flex: none; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23477261' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.z-label { display: block; margin: 0 4px 8px; font: 600 13px/1.2 var(--sans); color: var(--ink-2); }
/* The card is narrower than the booking sheet: the long label would wrap onto two lines on phones */
@media (max-width: 439px) { .z-card .btn__more { display: none; } }
/* No JavaScript, or the script did not load: no form and no spoilers — the card offers the phone and the chats */
.z-fallback { display: none; }
.no-js .z-fallback { display: grid; gap: 12px; }
.z-fallback p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.z-fallback__alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.z-fallback__alt a { color: var(--wine); font-weight: 600; text-underline-offset: 3px; }
.no-js .z-info, .no-js .zs, .no-js .cookie { display: none; } /* no script: nothing is counted, and the notice could not be closed */
.z-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; text-wrap: balance; }
.z .lead-form .consent { font-size: 12.5px; }
[data-form-slot].is-called { border-radius: 20px; animation: called 0.9s var(--ease); }
@keyframes called { 35% { box-shadow: 0 0 0 9px rgba(122, 31, 53, 0.1); } }
.z-card .done { padding: 10px 0 2px; }

/* ---------- Details: rows with a photo ---------- */
.z-info { padding-block: 10px 4px; }
.z-info__title { margin: 0 0 14px; font: 500 28px/1.15 var(--serif); color: var(--ink); }
.z-acc { display: grid; gap: 10px; }
.z-row { border-radius: 22px; background: var(--paper); border: 1px solid var(--line); transition: box-shadow 0.35s var(--ease); }
.z-row[open] { box-shadow: var(--shadow-sm); }
.z-row summary {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 16px 10px 10px; cursor: pointer; list-style: none;
  border-radius: 22px; -webkit-tap-highlight-color: transparent;
}
.z-row summary::-webkit-details-marker { display: none; }
.z-row summary:hover .z-row__chev { color: var(--wine); }
.z-row__thumb { flex: none; width: 56px; height: 56px; border-radius: 15px; object-fit: cover; background: var(--rose); }
.z-row__t { flex: 1; min-width: 0; font: 600 16px/1.25 var(--sans); color: var(--ink); }
.z-row__t small { display: block; margin-top: 3px; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.z-row__t .stars { font-size: 13.5px; }
.z-row__chev { flex: none; width: 22px; height: 22px; color: var(--ink-2); transition: transform 0.4s var(--ease), color 0.25s; }
.z-row[open] .z-row__chev { transform: rotate(180deg); }
.z-row__body { display: grid; gap: 14px; padding: 4px 16px 18px; animation: rise 0.5s var(--ease); }
.z-more { justify-self: start; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--line-2); background: none; font: 600 15px/1.3 var(--sans); cursor: pointer; }

/* ---------- Panels ---------- */
.z-p__lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.z-p__lead b { color: var(--ink); font-weight: 700; }

.z-route { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.z-route::-webkit-scrollbar { display: none; }
.z-route li { position: relative; flex: 0 0 31%; min-width: 104px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; scroll-snap-align: start; background: var(--rose); }
.z-route img { width: 100%; height: 100%; object-fit: cover; }
.z-route span { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 253, 251, 0.92); font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.z-route b { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--wine); color: #fff; font-size: 11px; }

.z-results { display: grid; gap: 12px; }
.z-results .compare { width: 100%; max-width: 440px; justify-self: center; }
.z-p .cases { margin: 0 -16px; padding: 4px 16px 6px; }
.z-p .cases__btn { flex-basis: 58px; }

.z-incl { margin: 0; padding: 0; list-style: none; }
.z-incl li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); font-size: 15px; color: var(--ink-2); }
.z-incl li b { flex: none; font-weight: 700; font-size: 14px; color: var(--sage); }
.z-incl li b.num { font: 600 19px/1 var(--serif); color: var(--ink); }
.z-incl__total { border-bottom: 0 !important; color: var(--ink) !important; font-weight: 700; }
.z-incl__total s { font: 500 17px/1 var(--serif); color: var(--muted); }
.z-incl__total b.num { font-size: 28px !important; color: var(--wine) !important; }

.z-about { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.z-about__photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 30% 50%; border-radius: 14px; }
.z-about__name { margin: 0; font: 500 27px/1.1 var(--serif); color: var(--ink); }
.z-about__role { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.z-reviews { display: grid; gap: 10px; }
.z-reviews .review { margin: 0; padding: 38px 18px 14px; border-radius: 20px; background: var(--bg); }
.z-reviews .review::before { top: 4px; left: 16px; font-size: 54px; }

.z-faq { display: grid; gap: 14px; margin: 0; }
.z-faq dt { font-weight: 700; color: var(--ink); }
.z-faq dd { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Always-on booking button ---------- */
.zs {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100% - 20px);
  display: flex; justify-content: center; border-radius: 999px;
  transform: translate(-50%, 170%); transition: transform 0.55s var(--ease);
}
.zs.is-on { transform: translate(-50%, 0); }
.zs__btn {
  flex: none; min-height: 60px; padding-right: 26px; font-size: 16.5px; white-space: nowrap;
  box-shadow: 0 20px 40px -14px rgba(122, 31, 53, 0.75), inset 0 0 0 1px rgba(220, 199, 164, 0.4);
}
.zs__btn::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%); animation: zs-sheen 6s var(--ease) 1s infinite; }
@keyframes zs-sheen { 0%, 50% { transform: translateX(-130%); } 78%, 100% { transform: translateX(130%); } }
.zs__pill-price s { font-size: 14px; font-weight: 500; opacity: 0.7; }
.zs__pill-price .zs__now {
  font-size: 19px; font-weight: 600;
  background: linear-gradient(100deg, #fff8f5 38%, #f3cf98 50%, #fff8f5 62%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: z-shine 3.2s linear infinite;
}
@keyframes z-shine { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.zs__done { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px; font-weight: 700; color: var(--sage); }
.zs__done svg { width: 20px; height: 20px; }
.zs.is-booked { padding: 6px 12px; background: var(--paper); box-shadow: 0 18px 40px -16px rgba(90, 20, 38, 0.5), 0 0 0 1px var(--line); }
.z-booked { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 2px; font-weight: 700; line-height: 1.4; color: var(--sage); }
.z-booked svg { flex: none; width: 22px; height: 22px; }
/* The cookie note sits above the booking button, never under it. */
.z .cookie { bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateY(calc(100% + 110px)); }
.z .cookie.is-on { transform: none; }

/* ---------- Footer ---------- */
.z-foot { margin-top: 10px; padding: 26px 0 calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; font-size: 12px; line-height: 1.6; color: var(--muted); }
.z-foot p { max-width: 62em; margin: 0 auto 8px; }
.z-foot a { color: var(--ink-2); }

/* ---------- Booking sheet and the policy window ---------- */
.z-who { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 15px/1.2 var(--sans); color: var(--ink); }
.z-who small { display: block; margin-top: 3px; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.z-who--sheet { margin-bottom: 6px; }
.z-ava { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold-soft); }
.z-doc .sheet__panel { display: flex; flex-direction: column; gap: 12px; }
.z-doc .h3 { padding-right: 44px; font-size: 27px; }
.z-doc__body { max-height: 60svh; overflow: auto; padding-right: 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); overscroll-behavior: contain; }
.z-doc__body h2 { margin: 18px 0 6px; font: 700 15.5px/1.35 var(--sans); color: var(--ink); }
.z-doc__body p, .z-doc__body ul, .z-doc__body ol { margin: 0 0 10px; }
.z-doc__body ul, .z-doc__body ol { padding-left: 20px; }
.z-doc__body .doc__card { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); }
.z-doc__body .doc__meta { font-size: 12.5px; color: var(--muted); }
.z-doc__back { min-height: 50px; }
@media (min-width: 600px) { .z-doc { max-width: 680px; } }

/* ---------- Tablet: the portrait stops growing, the text keeps a readable measure ---------- */
@media (min-width: 600px) and (max-width: 959px) {
  .z-hero { max-width: 620px; }
  .z-about { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; }
  .z-reviews { grid-template-columns: 1fr 1fr; }
}

/* ---------- Desktop: the portrait stays beside the text while the right column scrolls ---------- */
@media (min-width: 960px) {
  .z-top { padding-top: 18px; }
  /* Centred, the cookie note covered the booking button of the first screen on a laptop. */
  .z .cookie { left: 24px; right: auto; max-width: 380px; margin: 0; }
  .z-hero {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: 'vis text' 'vis info';
    gap: 32px 64px; align-items: start; padding-block: 18px 64px;
  }
  .z-portrait { grid-area: vis; position: sticky; top: 28px; align-self: start; width: 100%; margin: 12px 0 0 12px; }
  .z-portrait__arch { aspect-ratio: 3 / 4; }
  .z-seal { width: 112px; height: 112px; left: -30px; }
  .z-seal span { font-size: 31px; }
  .z-hero__text { grid-area: text; max-width: 640px; }
  .z-eyebrow { margin-bottom: 10px; }
  .z-title { font-size: clamp(40px, 3.6vw, 46px); text-wrap: wrap; }
  .z-lead { max-width: none; margin-top: 12px; font-size: 16.5px; }
  .z-card { margin-top: 20px; padding: 22px 26px 20px; }
  .z-card__title { font-size: 30px; }
  .z-in { margin: 12px 0 14px; }
  /* Tiles in one line with the icon beside the word: the whole form fits a laptop screen. */
  .z .how span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 6px; font-size: 13.5px; }
  .z-info { grid-area: info; max-width: 640px; padding-block: 0; }
  .z-info__title { font-size: 32px; }
  .z-row summary { padding: 12px 22px 12px 12px; }
  .z-row__body { padding: 4px 22px 24px; }
  .zmap { aspect-ratio: 16 / 9; }
  .z-route { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
  .z-route li { min-width: 0; }
  .z-reviews { grid-template-columns: 1fr 1fr; }
  .z-results { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
  .z-results .cases { grid-column: 2; grid-row: 1; flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .z-p .z-results .z-p__lead { grid-column: 2; }
  .z-about { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
}