/* booking.css — the hero search bar and the /book page, in the site's own design.
 * Tokens come from the IMPnet theme (dark #241A13, gold #C9A57E, cream #FBF8F3,
 * field #FCFAF6 / #D8CBB9, ink #3A2E25); the buttons and fields reuse the
 * theme's .mr-btn and .mrForm__field so the form reads as the same site. */

/* The tokens (:root — colours, type, elevation) live in home.css: every page
   that loads this file loads that one too, and the pages without the form
   need nothing else from here (28. 9. 2026). */

/* ── hero search ─────────────────────────────────────────────────────── */
.mrHero__center:has(.mrSearch) { width: min(1180px, calc(100% - 48px)); }
.mrSearch { width: 100%; margin: 34px auto 0; text-align: left; pointer-events: auto; }
.mrSearch__bar {
  display: flex; align-items: stretch; gap: 0;
  padding: 8px; background: var(--mr-panel); border-radius: 18px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .65);
}
.mrSearch__seg {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 16px; border-right: 1px solid var(--mr-line-soft);
}
.mrSearch__seg--date { flex: 0 0 168px; }
.mrSearch__seg--time { flex: 0 0 128px; }
.mrSearch__seg--pax { flex: 0 0 104px; border-right: 0; }
.mrSearch__label {
  font: 700 11px/1.2 var(--mr-body); letter-spacing: .08em; text-transform: uppercase; color: #8A7B6A;
}
.mrSearch__input {
  width: 100%; height: 26px; padding: 0; border: 0; background: transparent; outline: 0;
  font: 500 16px/1.4 var(--mr-body); color: var(--mr-dark); text-overflow: ellipsis;
}
.mrSearch__input::placeholder { color: #A99B8B; font-weight: 400; }
select.mrSearch__input { appearance: none; -webkit-appearance: none; cursor: pointer; }
.mrSearch__swap {
  flex: 0 0 auto; align-self: center; width: 36px; height: 36px; margin: 0 4px;
  border: 1px solid var(--mr-line); border-radius: 50%; background: var(--mr-field); color: var(--mr-muted);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s;
}
.mrSearch__swap:hover { background: var(--mr-gold); color: var(--mr-dark); border-color: var(--mr-gold); }
.mrSearch__submit { flex: 0 0 auto; margin-left: 10px; padding: 0 28px; border-radius: 12px; font-size: 16px; gap: 10px; }
.mrSearch__note {
  margin: 14px 0 0; text-align: center; color: #F1E9DF; font: 500 14px/1.5 var(--mr-body);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
@media (max-width: 1100px) {
  .mrSearch__bar { flex-wrap: wrap; row-gap: 4px; }
  .mrSearch__seg { flex: 1 1 calc(50% - 30px); border-right: 0; border-bottom: 1px solid var(--mr-line-soft); }
  .mrSearch__seg--date, .mrSearch__seg--time, .mrSearch__seg--pax { flex: 1 1 30%; border-bottom: 0; }
  .mrSearch__submit { flex: 1 1 100%; margin: 6px 0 0; height: 52px; justify-content: center; }
}
@media (max-width: 900px) {
  /* With the search bar the hero content no longer fits a phone screen, so the
     block flows instead of being pinned to the centre and the hero grows. */
  .mrHero:has(.mrSearch) { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .mrHero__center:has(.mrSearch) {
    position: relative; top: auto; left: auto; transform: none;
    width: 100%; padding: 132px 20px 56px; pointer-events: auto;
  }
  .mrHero__center:has(.mrSearch) .mrHero__title { font-size: 44px !important; line-height: 1.02 !important; }
  .mrHero__center:has(.mrSearch) .mrHero__subtitle { font-size: 17px; margin-top: 16px; }
  .mrHero:has(.mrSearch) .mrHero__cue { display: none; }
}
@media (max-width: 640px) {
  .mrHero__center:has(.mrSearch) { padding: 116px 12px 44px; }
  .mrHero__center:has(.mrSearch) .mrHero__title { font-size: 36px !important; }
  .mrSearch { margin-top: 24px; }
  .mrSearch__seg, .mrSearch__seg--date, .mrSearch__seg--time, .mrSearch__seg--pax { flex: 1 1 100%; border-bottom: 1px solid var(--mr-line-soft); }
  .mrSearch__swap { display: none; }
  .mrSearch__note { font-size: 13px; }
}

/* ── place suggestions (hero + booking form) ─────────────────────────── */
.mrForm__field, .mrSearch__seg { position: relative; }
.mrPlaces {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow: auto; text-align: left;
  background: var(--mr-panel); border-radius: 12px;
  box-shadow: var(--mr-lift-3);
}
.mrSearch__seg .mrPlaces { left: -8px; right: -8px; min-width: 320px; }
.mrPlaces__item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px;
  cursor: pointer; color: var(--mr-dark); font-family: var(--mr-body);
}
.mrPlaces__item.is-active, .mrPlaces__item:hover { background: #FBF3E8; }
.mrPlaces__label { font-weight: 600; font-size: 15px; line-height: 1.3; }
.mrPlaces__detail { font-size: 13px; color: var(--mr-faint); }
.mrPlaces__kind { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mr-accent-ink); }

/* ── /book page ──────────────────────────────────────────────────────── */
/* The theme cuts horizontal overflow with `overflow-x: hidden` on the body
   (and html ends up the same) — which makes them scroll containers of their
   own, and nothing inside one ever sticks: not the summary card beside the
   form, not the way on under the cars on a phone. `clip` cuts the same
   overflow without being a container. The booking pages only. */
html:has(> body.frontend-booking), body.frontend-booking { overflow-x: clip; overflow-y: visible; }
.mrBook { font-family: var(--mr-body); color: var(--mr-ink); }
.mrBook__hero { position: relative; background: var(--mr-dark); color: #fff; }
.mrBook__hero .mr-wrap { padding-top: 150px; padding-bottom: 52px; }
.mrBook__back { margin-bottom: 20px; }
.mrBook__eyebrow {
  margin: 0 0 14px; color: var(--mr-gold-soft); font: 700 14px/1.3 var(--mr-body);
  letter-spacing: .1em; text-transform: uppercase;
}
.mrBook__title { margin: 0; max-width: 16ch; font: 600 54px/1.04 var(--mr-display); color: #fff; letter-spacing: -.01em; }
.mrBook__subtitle { margin: 18px 0 0; max-width: 58ch; color: #F1E9DF; font-size: 19px; line-height: 1.5; }
.mrBook__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; }
.mrBook__step {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .55); font-size: 14px; font-weight: 600;
}
.mrBook__step i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); font-style: normal; font-size: 12px; font-weight: 700;
}
.mrBook__step.is-active { background: var(--mr-gold); color: var(--mr-dark); }
.mrBook__step.is-active i { background: rgba(36, 26, 19, .15); }
.mrBook__step.is-done { color: #fff; }
.mrBook__step.is-done i { background: var(--mr-gold); color: var(--mr-dark); }

.mrBook__body { background: var(--mr-cream); }
.mrBook__body .mr-wrap { padding-top: 56px; padding-bottom: 120px; }
.mrBook__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.mrBook__panel {
  background: var(--mr-panel); border-radius: 20px; padding: 40px;
  box-shadow: 0 1px 0 rgba(36, 26, 19, .04), 0 30px 60px -44px rgba(36, 26, 19, .35);
}
.mrBook__panelTitle { margin: 0 0 8px; font: 600 34px/1.08 var(--mr-display); color: var(--mr-dark); }
.mrBook__panelSub { margin: 0 0 28px; color: #574C40; font-size: 16px; line-height: 1.55; }
.mrBook__fields { display: flex; flex-direction: column; gap: 16px; }
.mrBook__section { margin-top: 40px; }
.mrBook__sectionTitle { margin: 0 0 4px; font: 700 18px/1.3 var(--mr-body); color: var(--mr-dark); }
.mrBook__sectionSub { margin: 0 0 16px; color: var(--mr-faint); font-size: 14px; line-height: 1.5; }
.mrBook .mrForm__field > label { color: var(--mr-muted); font-size: 14px; font-weight: 600; }
.mrBook .mrForm__field textarea { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
/* A field is a filled surface, not an outline — the same rule as every other
   form Matěj owns. The theme draws a 1px edge around its fields; inside the
   booking form that edge goes and the fill does the work, with the gold ring
   kept for focus, where an outline IS the affordance. Scoped to .mrBook and
   .mrSearch on purpose: the mirrored site's own forms keep the theme's look,
   and this override is one block to delete if that ever stops being wanted. */
.mrBook .mrForm__field input,
.mrBook .mrForm__field select,
.mrBook .mrForm__field textarea {
  border-color: transparent;
  transition: background .15s, box-shadow .15s;
}
/* A filled field only reads as a field on a plain ground. Inside the leg — a
   cream group on the white panel — the fill flips to white, or the two creams
   cancel out and nothing on the screen says where to type. */
.mrBook__leg .mrForm__field input,
.mrBook__leg .mrForm__field select,
.mrBook__leg .mrForm__field textarea { background: var(--mr-panel); }
.mrBook__leg .mrForm__field input:hover,
.mrBook__leg .mrForm__field select:hover,
.mrBook__leg .mrForm__field textarea:hover { background: #FFFDF9; }
.mrBook .mrForm__field input:hover,
.mrBook .mrForm__field select:hover,
.mrBook .mrForm__field textarea:hover { background: #F7F2EA; }
.mrBook .mrForm__field input:focus,
.mrBook .mrForm__field select:focus,
.mrBook .mrForm__field textarea:focus {
  background: var(--mr-panel);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--mr-gold);
  outline: none;
}
.mrBook__hint { margin: 4px 0 0; color: var(--mr-faint); font-size: 13px; line-height: 1.45; }
.mrBook__error { margin: 6px 0 0; color: var(--mr-danger); font-size: 14px; }
.mrBook__error:empty { display: none; }
.mrBook__leg {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border-radius: 16px; background: var(--mr-sunken);
}
.mrBook__legHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; color: var(--mr-dark); }
.mrBook__link {
  padding: 0; border: 0; background: none; color: var(--mr-accent-ink); font: 600 14px/1.3 var(--mr-body);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.mrBook__link:hover { color: var(--mr-dark); }
/* "Cesta zpět" is the one people want, so it is a button on a surface; the
   generic "another leg" stays a link beside it. */
.mrBook__legActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mrBook__return {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--mr-panel); color: var(--mr-dark);
  font: 700 15px/1 var(--mr-body); cursor: pointer;
  box-shadow: var(--mr-lift-1); transition: box-shadow .2s, transform .2s;
}
.mrBook__return:hover { box-shadow: var(--mr-lift-2); transform: translateY(-1px); }
.mrBook__return:active { transform: none; }
.mrBook__actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.mrBook__actions .mr-btn { font-size: 16px; padding: 16px 28px; }
.mrBook__actions .mr-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* consent is given by submitting — the sentence sits under the primary button */
.mrBook__legal { flex: 1 1 100%; max-width: 72ch; margin: -2px 0 0 auto; color: var(--mr-faint); font-size: 13px; line-height: 1.5; text-align: right; }
.mrBook__legal a { color: var(--mr-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.mrBook__note { margin: 0; color: var(--mr-faint); font-size: 14px; line-height: 1.5; }
.mrBook__banner {
  margin: 0 0 24px; padding: 16px 18px; border-radius: 12px; background: #FFF1DD;
  color: var(--mr-ink); font-size: 15px; line-height: 1.5;
}
.mrBook__banner--error { background: #FBE4E2; color: #5A1F1B; }
.mrBook__banner strong { display: block; margin-bottom: 4px; }

/* quantity stepper */
.mrQty { display: flex; align-items: center; height: 48px; border-radius: 8px; background: var(--mr-field); box-shadow: inset 0 0 0 1px rgba(36, 26, 19, .07); }
.mrQty button {
  width: 44px; height: 46px; border: 0; background: transparent; color: var(--mr-muted);
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.mrQty button:hover { color: var(--mr-dark); }
.mrQty output { flex: 1; text-align: center; font-weight: 600; color: var(--mr-ink); }
/* Dospělí · Děti · Zavazadla: three counters in a row, two and one on a phone */
.mrBook .mrForm__row.mrForm__row--pax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* one age select per child, as many to a row as fit */
.mrKids { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; }

/* vehicles */
.mrCars { display: grid; gap: 14px; }
.mrCar {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 20px; align-items: center; width: 100%;
  padding: 16px 20px; border: 0; border-radius: 16px; background: var(--mr-panel);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: var(--mr-lift-1); transition: box-shadow .2s, transform .2s;
}
.mrCar:hover { box-shadow: var(--mr-lift-2); transform: translateY(-1px); }
.mrCar.is-selected {
  transform: none;
  box-shadow: 0 0 0 2px var(--mr-gold), 0 0 0 6px rgba(201, 165, 126, .22), var(--mr-lift-2);
}
.mrCar.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.mrCar__img { width: 150px; height: 96px; object-fit: contain; }
.mrCar__name { margin: 0; font: 700 18px/1.2 var(--mr-body); color: var(--mr-dark); }
.mrCar__meta { margin: 4px 0 0; color: var(--mr-faint); font-size: 14px; }
.mrCar__features { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: #574C40; }
.mrCar__features li::before { content: '✓'; margin-right: 5px; color: var(--mr-accent-ink); font-weight: 700; }
.mrCar__price { text-align: right; }
/* what the class is for — one plain line under who fits */
.mrCar__use { margin: 6px 0 0; color: var(--mr-dark); font-size: 14.5px; line-height: 1.45; }
/* "Nechám na vás": the emblem where a photo would be */
.mrCar__img--any { display: grid; place-items: center; border-radius: 14px; background: #FFF1DD; color: var(--mr-accent-ink); font-size: 30px; }
.mrCar__badge {
  display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px;
  background: #F6EFE6; color: var(--mr-accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mrCar__amount { font: 600 26px/1.1 var(--mr-display); color: var(--mr-dark); white-space: nowrap; }
.mrCar__amountNote { display: block; margin-top: 3px; font-size: 12px; color: var(--mr-faint); }

/* add-ons */
.mrAddons { display: flex; flex-direction: column; gap: 12px; }
.mrAddon {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  border-radius: 14px; background: var(--mr-panel); cursor: pointer;
  box-shadow: var(--mr-lift-1); transition: box-shadow .2s, background .2s;
}
.mrAddon:hover { box-shadow: var(--mr-lift-2); }
.mrAddon.is-on { background: #FFF8EE; box-shadow: 0 0 0 2px var(--mr-gold), var(--mr-lift-1); }
.mrAddon input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--mr-gold); flex: 0 0 auto; }
.mrAddon__name { font-weight: 700; color: var(--mr-dark); }
.mrAddon__desc { margin: 3px 0 0; color: var(--mr-faint); font-size: 14px; line-height: 1.45; }
.mrAddon__price { margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--mr-dark); }

/* payment: how the guest pays, when the brand takes no cards online (24. 9. 2026).
   Not .mrPay — the manage page's pay card owns that name further down. */
.mrPayChoice { margin-top: 22px; }
.mrPayChoice__title { margin: 0 0 10px; font-weight: 700; color: var(--mr-dark); }
.mrPayInfo { max-width: 560px; margin: 28px auto 0; padding: 18px 20px; border-radius: 14px; background: #FFF8EE; box-shadow: var(--mr-lift-1); text-align: left; }
.mrPayInfo__title { margin: 0 0 6px; font-weight: 700; color: var(--mr-dark); }
.mrPayInfo__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 15px; color: var(--mr-faint); }
.mrPayInfo__row strong { color: var(--mr-dark); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mrPayInfo__note { margin: 10px 0 0; color: var(--mr-faint); font-size: 13px; line-height: 1.5; }
.mrPayInfo__qr { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; }
.mrPayInfo__qr img { flex: none; width: 132px; height: 132px; border-radius: 8px; background: #fff; }
.mrPayInfo__qr figcaption { color: var(--mr-faint); font-size: 13px; line-height: 1.5; }

/* maps: the route of a transfer, the pin on the exact door */
.mrMap { position: relative; height: 260px; border-radius: 14px; overflow: hidden; background: #EFE7DA; box-shadow: var(--mr-lift-1); }
.mrMap--pick { height: 320px; margin-top: 10px; }
.mrMap.is-loading::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #EFE7DA 25%, #F6EFE6 50%, #EFE7DA 75%);
  background-size: 200% 100%; animation: mrShimmer 1.4s linear infinite;
}
.mrMap.is-resolving::before {
  content: 'Hledáme adresu…'; position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 8px;
  background: rgba(36, 26, 19, .85); color: #fff; font: 600 12px var(--mr-body);
}
@keyframes mrShimmer { to { background-position: -200% 0; } }
.mrMap__fallback { display: grid; place-items: center; height: 100%; padding: 20px; color: var(--mr-faint); font-size: 14px; text-align: center; }
.mrMap__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; color: var(--mr-faint); font-size: 13px; }
.mrMap__meta strong { color: var(--mr-dark); font-weight: 600; }
.mrBook__mapWrap { margin-top: 4px; }
.mrBook__mapWrap .maplibregl-ctrl-attrib { font-size: 10px; }
.mrBook__pinRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mrBook__pinNote { margin: 0; color: var(--mr-faint); font-size: 13px; }

/* the driver waits and brings them back */
.mrWait {
  display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 16px 18px;
  border-radius: 14px; background: #FFF1DD; cursor: pointer; transition: background .2s, box-shadow .2s;
}
/* On by default, so ON is the resting look and OFF is the one that recedes. */
.mrWait.is-on { background: #FFEBD2; box-shadow: 0 0 0 2px var(--mr-gold), var(--mr-lift-1); }
.mrWait input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--mr-gold); flex: 0 0 auto; }
.mrWait__title { display: block; font-weight: 700; color: var(--mr-dark); }
.mrWait__desc { margin: 4px 0 0; color: #574C40; font-size: 14px; line-height: 1.5; }
.mrWait__price { margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--mr-dark); }

/* The theme parks every checkbox 9999 px off-screen ([type="checkbox"] {
   position: absolute; left: -9999px } — the half of a custom-checkbox trick
   whose drawn box the mirror never had), so the add-ons and "Řidič na vás
   počká" showed no box to tick. Ours are real controls: they come back. */
.mrBook input[type="checkbox"] { position: static; left: auto; }

/* checkbox rows */
.mrBook__check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--mr-ink); cursor: pointer; }
.mrBook__check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--mr-gold); flex: 0 0 auto; }
.mrBook__check a { color: var(--mr-accent-ink); }

/* ── the short form (25. 9. 2026): the last step carries what used to be three ──
 * A section that sits close to the one above it; the folds; the recap line;
 * the payment row; the car tiles of a time hire; the sticky way on. */
.mrBook__section--tight { margin-top: 26px; }
/* a fold: one line that opens the fields under it (native <details>) */
.mrBook__folds { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.mrMore { border-radius: 14px; background: var(--mr-sunken); }
.mrMore__summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; position: relative;
  padding: 16px 48px 16px 18px; cursor: pointer; list-style: none; border-radius: 14px;
}
.mrMore__summary::-webkit-details-marker { display: none; }
.mrMore__summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--mr-accent-ink); border-bottom: 2px solid var(--mr-accent-ink);
  transform: rotate(45deg); transition: transform .2s, margin-top .2s;
}
.mrMore[open] > .mrMore__summary::after { transform: rotate(-135deg); margin-top: -2px; }
.mrMore__summary:hover { background: #F6EFE6; }
.mrMore__summary:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 2px; }
.mrMore__title { color: var(--mr-dark); font-size: 15px; font-weight: 700; }
.mrMore__hint { color: var(--mr-faint); font-size: 13px; }
.mrMore__body { padding: 0 18px 18px; }
.mrMore__body .mrForm__row + .mrForm__row { margin-top: 14px; }
/* inside a fold the fields sit on cream, so they turn white (as in the leg) */
.mrMore .mrForm__field input, .mrMore .mrForm__field textarea { background: var(--mr-panel); }
/* how to pay: one row of options and a line about the picked one */
.mrPayChoice__options { display: flex; flex-wrap: wrap; gap: 8px; }
.mrPayOpt {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--mr-line); border-radius: 999px; background: var(--mr-field); color: var(--mr-ink);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.mrPayOpt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mrPayOpt:hover { border-color: var(--mr-gold); }
.mrPayOpt.is-on { background: var(--mr-dark); border-color: var(--mr-dark); color: #fff; }
.mrPayOpt:has(input:focus-visible) { outline: 2px solid var(--mr-gold); outline-offset: 2px; }
.mrPayChoice__desc { margin: 8px 0 0; color: var(--mr-faint); font-size: 13.5px; line-height: 1.5; }
.mrAddon--compact { padding: 12px 16px; }
.mrBook__note--send { margin-top: 22px; }
/* the car of a time hire, picked in the brief: small tiles, "Nechám na vás" first */
.mrBook__carPick { margin-top: 10px; }
.mrBook__carPick .mrBook__sectionSub { margin-bottom: 12px; }
.mrPick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mrPick__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  padding: 10px 12px 12px; border: 0; border-radius: 14px; background: var(--mr-panel);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: var(--mr-lift-1); transition: box-shadow .2s, transform .2s;
}
.mrPick__item:hover { box-shadow: var(--mr-lift-2); transform: translateY(-1px); }
.mrPick__item:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 2px; }
.mrPick__item.is-selected { transform: none; box-shadow: 0 0 0 2px var(--mr-gold), 0 0 0 5px rgba(201, 165, 126, .22), var(--mr-lift-1); }
.mrPick__item.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.mrPick__img { display: block; width: 100%; height: 56px; margin-bottom: 6px; object-fit: contain; }
.mrPick__img--any { display: grid; place-items: center; border-radius: 10px; background: #FFF1DD; color: var(--mr-accent-ink); font-size: 22px; }
.mrPick__name { color: var(--mr-dark); font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.mrPick__meta { color: var(--mr-faint); font-size: 12.5px; line-height: 1.35; }

/* summary card */
.mrBook__summary { position: sticky; top: 130px; padding: 28px; border-radius: 20px; background: var(--mr-dark); color: #fff; }
.mrSum__title { margin: 0 0 14px; font: 700 13px/1.3 var(--mr-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mr-gold-soft); }
.mrSum__empty { margin: 0; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.5; }
.mrSum__leg { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.mrSum__route { font-weight: 600; font-size: 15px; line-height: 1.35; }
.mrSum__when { margin-top: 3px; color: rgba(255, 255, 255, .65); font-size: 13px; }
.mrSum__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; color: rgba(255, 255, 255, .8); }
.mrSum__row + .mrSum__row { border-top: 1px solid rgba(255, 255, 255, .06); }
.mrSum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); }
.mrSum__totalLabel { font-weight: 700; }
.mrSum__totalAmount { font: 600 30px/1 var(--mr-display); color: var(--mr-gold); white-space: nowrap; }
.mrSum__note { margin: 14px 0 0; color: rgba(255, 255, 255, .55); font-size: 13px; line-height: 1.5; }
.mrSum__promo { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.mrSum__promoRow { display: flex; gap: 8px; }
.mrSum__promoRow input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); color: #fff; font: 500 14px var(--mr-body); outline: 0; text-transform: uppercase;
}
.mrSum__promoRow input::placeholder { color: rgba(255, 255, 255, .4); text-transform: none; }
.mrSum__promoRow button {
  height: 42px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--mr-gold); background: transparent;
  color: var(--mr-gold); font: 700 13px var(--mr-body); cursor: pointer;
}
.mrSum__promoMsg { margin: 8px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.mrSum__promoMsg.is-ok { color: var(--mr-gold-soft); }
.mrSum__promoMsg.is-error { color: #F0A59D; }

/* done */
.mrDone { text-align: center; padding: 12px 0 8px; }
.mrDone__icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: #F6EFE6; color: var(--mr-accent-ink); display: grid; place-items: center; }
.mrDone__title { margin: 0 0 10px; font: 600 40px/1.08 var(--mr-display); color: var(--mr-dark); }
.mrDone__lead { margin: 0 auto; max-width: 52ch; color: #574C40; font-size: 17px; line-height: 1.55; }
.mrDone__number { display: inline-block; margin: 18px 0 6px; padding: 7px 16px; border-radius: 999px; background: var(--mr-dark); color: var(--mr-gold); font-weight: 700; letter-spacing: .05em; }
.mrDone__steps { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 30px auto 0; padding: 0; list-style: none; text-align: left; }
.mrDone__step { display: flex; gap: 14px; align-items: flex-start; }
.mrDone__step i {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #F6EFE6; color: var(--mr-accent-ink); font-style: normal; font-weight: 700;
}
.mrDone__step strong { display: block; color: var(--mr-dark); }
.mrDone__step span { color: var(--mr-faint); font-size: 14px; line-height: 1.5; }
.mrDone__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* loading */
.mrBook__loading { display: flex; align-items: center; gap: 12px; padding: 24px 0; color: var(--mr-faint); font-size: 15px; }
.mrBook__spinner {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(201, 165, 126, .25); border-top-color: var(--mr-gold);
  animation: mrSpin .9s linear infinite;
}
@keyframes mrSpin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .mrBook__grid { grid-template-columns: 1fr; }
  .mrBook__summary { position: static; }
  .mrBook__hero .mr-wrap { padding-top: 130px; }
  .mrBook__title { font-size: 42px; }
}
@media (max-width: 720px) {
  .mrBook__hero .mr-wrap { padding-top: 116px; padding-bottom: 36px; }
  .mrBook__body .mr-wrap { padding-top: 28px; padding-bottom: 72px; }
  .mrBook__title { font-size: 34px; }
  .mrBook__subtitle { font-size: 16px; }
  .mrBook__steps { gap: 6px; }
  .mrBook__step { padding: 6px 12px 6px 6px; font-size: 13px; }
  .mrBook__panel { padding: 24px 18px; border-radius: 16px; }
  .mrBook__panelTitle { font-size: 28px; }
  .mrBook .mrForm__row { flex-direction: column; gap: 14px; }
  .mrBook .mrForm__row.mrForm__row--pax { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mrBook .mrForm__row--pax > :last-child { grid-column: 1 / -1; }
  .mrCar { grid-template-columns: 1fr; gap: 12px; }
  .mrCar__img { width: 100%; height: 120px; }
  .mrCar--any .mrCar__img--any { width: 64px; height: 64px; font-size: 24px; }
  .mrCar__price { text-align: left; }
  .mrBook__actions .mr-btn { width: 100%; justify-content: center; }
  .mrBook__actions { flex-direction: column-reverse; align-items: stretch; }
  /* column-reverse: higher order = higher on screen → button, sentence, back */
  .mrBook__actions .mr-btn--primary { order: 2; }
  .mrBook__legal { order: 1; max-width: none; margin: -6px 0 0; text-align: left; }
  .mrPick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mrPick__img { height: 44px; }
  .mrMore__summary { padding: 14px 44px 14px 16px; }
  .mrMore__body { padding: 0 14px 14px; }
}

/* ── checkout bar (replaces the site header on /book and /book/manage) ── */
.mrCheck {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px; min-height: 72px; padding: 0 32px;
  background: var(--mr-dark); color: #fff; font-family: var(--mr-body);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.mrCheck__logo { display: block; line-height: 0; flex: 0 0 auto; }
.mrCheck__logo img { display: block; height: 26px; width: auto; }
.mrCheck__steps { display: flex; gap: 6px; margin: 0 auto; padding: 0; list-style: none; }
.mrCheck__steps .mrBook__step { padding: 6px 14px 6px 6px; font-size: 13px; }
.mrCheck__steps .mrBook__step i { width: 24px; height: 24px; font-size: 11px; }
.mrCheck__counter { display: none; margin: 0 auto; font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, .85); }
.mrCheck__counter--always { display: block; }
.mrCheck__phone { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--mr-gold-soft); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.mrCheck__phone:hover { color: #fff; }
.mrCheck__foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px;
  padding: 26px 16px; background: var(--mr-dark); color: rgba(255, 255, 255, .55); font: 500 13px/1.4 var(--mr-body);
}
.mrCheck__foot a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.mrCheck__foot a:hover { color: #fff; }
.mrBook__body { min-height: calc(100vh - 72px - 80px); }
.mrBook__body .mr-wrap { padding-top: 40px; padding-bottom: 72px; }
.mrBook__summary { top: 96px; }
@media (max-width: 900px) {
  .mrCheck { min-height: 60px; padding: 0 16px; gap: 12px; }
  .mrCheck__steps { display: none; }
  .mrCheck__counter { display: block; }
  .mrCheck__phone span { display: none; }
  .mrCheck__logo img { height: 22px; }
  .mrBook__body .mr-wrap { padding-top: 24px; padding-bottom: 48px; }
}

/* ── manage / thank-you / payment ─────────────────────────────────────── */
.mrManage__wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.mrManage__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.mrManage__number { margin: 0; font: 600 32px/1.1 var(--mr-display); color: var(--mr-dark); }
.mrManage__sub { margin: 6px 0 0; color: var(--mr-faint); font-size: 14px; line-height: 1.5; }
.mrManage__line { margin: 0 0 4px; color: var(--mr-ink); font-size: 15px; }
.mrManage__card {
  background: var(--mr-panel); border-radius: 16px; padding: 22px 24px;
  box-shadow: var(--mr-lift-2);
}
.mrManage__card--dark { background: var(--mr-dark); color: #fff; }
.mrManage__card--gold { background: #FFF1DD; display: flex; flex-direction: column; gap: 4px; }
.mrManage__card--error { background: #FBE4E2; color: #5A1F1B; }
.mrManage__card--gold strong { color: var(--mr-dark); font-size: 17px; }
.mrManage__card--gold span { color: #574C40; font-size: 14px; }
.mrBadge {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font: 700 12px/1 var(--mr-body); letter-spacing: .05em; text-transform: uppercase; background: #F6EFE6; color: var(--mr-accent-ink);
}
.mrBadge--ok { background: #E6F3EA; color: #1F6B3A; }
.mrBadge--warn { background: #FFF3DD; color: #8A5A0B; }
.mrBadge--muted { background: #EEE9E2; color: #6B5F53; }
.mrLeg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mrLeg__route { font: 700 18px/1.25 var(--mr-body); color: var(--mr-dark); }
.mrLeg__meta { margin-top: 4px; color: var(--mr-faint); font-size: 14px; }
.mrLeg__row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 14px; color: var(--mr-ink); }
.mrLeg__row b { color: var(--mr-faint); font-weight: 600; margin-right: 4px; }
.mrLeg__confirm { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mr-line-soft); font-size: 14px; color: var(--mr-ink); }
.mrLeg__confirmed { margin: 14px 0 0; color: #1F6B3A; font-weight: 600; font-size: 14px; }
.mrDriver { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #FBF3E8; }
.mrDriver__name { font-weight: 700; color: var(--mr-dark); }
.mrDriver__meta { margin-top: 2px; font-size: 13px; color: var(--mr-faint); }
.mrDriver__call { padding: 12px 18px; font-size: 14px; }
.mrPay { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mrPay__amount { font: 600 30px/1 var(--mr-display); color: var(--mr-gold); }
.mrPrice__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mr-line-soft); font-size: 14px; color: var(--mr-ink); }
.mrPrice__row--total { font-weight: 700; font-size: 16px; color: var(--mr-dark); }
@media (max-width: 720px) {
  .mrManage__number { font-size: 26px; }
  .mrManage__card { padding: 18px; }
}

/* ── /book: one question per screen (25. 9. 2026) ─────────────────────────────
 * Matěj: "jak to má Apple — jedna část zabere celou obrazovku". A question is a
 * screen tall: a small count, one big headline, a line under it, the one thing
 * to answer and one way on. Structure comes from type and space, not boxes: the
 * questions stand straight on the cream, only the controls are surfaces (white,
 * lifted). The summary stays in view — sticky beside the column, on a phone a
 * bar at the bottom that opens into the whole list. Markup: booking.js. */
.mrBook { --mr-head: 72px; --mr-bar: 0px; }
.mrBook__body .mr-wrap { padding-top: 0; padding-bottom: 0; }
.mrBook__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
.mrFlow { min-width: 0; }
.mrQ {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--mr-head) - var(--mr-bar));
  min-height: calc(100svh - var(--mr-head) - var(--mr-bar));
  padding: 56px 0; scroll-margin-top: var(--mr-head);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* a new question rises into place as the page glides to it */
.mrQ.is-entering { opacity: 0; transform: translateY(28px); }
.mrQ__inner { width: 100%; max-width: 660px; }
.mrQ__count { margin: 0 0 14px; color: var(--mr-accent-ink); font: 700 13px/1.3 var(--mr-body); letter-spacing: .1em; text-transform: uppercase; }
.mrQ.is-done .mrQ__count::after { content: ' ✓'; }
.mrQ__title { margin: 0; color: var(--mr-dark); font: 600 clamp(36px, 4.6vw, 60px)/1.02 var(--mr-display); letter-spacing: -.025em; text-wrap: balance; }
.mrQ__sub { margin: 16px 0 0; max-width: 46ch; color: var(--mr-muted); font-size: 19px; line-height: 1.5; }
.mrQ__body { margin-top: 36px; }
.mrQ__part { margin-top: 30px; }
.mrQ__partTitle { margin: 0 0 12px; color: var(--mr-dark); font-size: 17px; font-weight: 700; }
.mrQ__aside { margin: 22px 0 0; }
.mrQ__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 34px; }
.mrQ__next { min-height: 56px; padding: 0 34px; font-size: 17px; transition: transform .12s ease-out; }
.mrQ__next:active { transform: scale(.97); }
.mrQ__enter { color: var(--mr-faint); font-size: 14px; }
.mrQ__enter kbd { margin-left: 4px; padding: 3px 8px; border-radius: 6px; background: #EFE7DA; color: var(--mr-ink); font: 600 12px/1 var(--mr-body); }
/* the last question: the send button, and the consent sentence right under it */
.mrQ__actions--send { flex-direction: column; align-items: flex-start; gap: 14px; }
.mrQ__actions--send .mrBook__legal { flex: none; width: 100%; max-width: none; margin: 0; text-align: left; }
.mrQ__send { min-width: 300px; justify-content: center; }
/* the total of the last question: a white surface of its own, not a line under a rule */
.mrQ__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 28px;
  padding: 18px 22px; border-radius: 16px; background: var(--mr-panel); box-shadow: var(--mr-lift-1);
}
.mrQ__total span { color: var(--mr-muted); font-weight: 600; }
.mrQ__total strong { color: var(--mr-dark); font: 600 28px/1.1 var(--mr-display); white-space: nowrap; }
/* both ends of a transfer on one screen, joined by the line the ticket draws:
   a ring for the pickup, a gold dot for the destination (Matěj, 25. 9. 2026) */
.mrRoute { display: flex; flex-direction: column; gap: 14px; }
.mrRoute__stop { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.mrRoute__stop .mrForm__field { flex: 1 1 auto; min-width: 0; margin: 0; }
.mrRoute__dot {
  position: relative; z-index: 1; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: 30px;
  border: 2px solid var(--mr-gold); border-radius: 50%; background: var(--mr-cream);
}
.mrRoute__stop.is-to .mrRoute__dot { background: var(--mr-gold); box-shadow: 0 0 0 5px rgba(201, 165, 126, .2); }
.mrRoute__stop.is-from::before {
  content: ''; position: absolute; left: 7px; top: 46px; height: calc(100% - 16px); width: 2px; border-radius: 2px;
  background: linear-gradient(var(--mr-gold), rgba(201, 165, 126, .45));
}
/* ── every field: the label inside the box (Matěj, 25. 9. 2026: "název do
   rámečku") ───────────────────────────────────────────────────────────────
   A filled white box on the cream, no outline. Empty and without the cursor,
   the label sits in the middle like a placeholder; with the cursor or a value
   it moves small to the top and the value takes the lower half. A field that
   always has a value — a day, a time, a select — keeps its label at the top.
   An error rings the box red, turns the label red and says one line under it.
   Prefixed twice (.mrBook .mrFloat) to win over the flow's and the theme's
   field rules. Markup: booking.js field / area / pickField. */
.mrFloat__box { position: relative; }
.mrBook .mrFloat .mrFloat__box input,
.mrBook .mrFloat .mrFloat__box textarea,
.mrBook .mrFloat .mrFloat__box select {
  box-sizing: border-box; display: block; width: 100%; height: 64px; margin: 0; padding: 25px 18px 7px;
  border: 0; border-radius: 14px; outline: 0; background-color: var(--mr-panel); box-shadow: var(--mr-lift-1);
  color: var(--mr-dark); font: 500 17px/1.3 var(--mr-body); transition: box-shadow .2s, background-color .2s;
}
.mrBook .mrFloat .mrFloat__box textarea { height: auto; min-height: 132px; padding-top: 32px; line-height: 1.45; resize: vertical; }
.mrBook .mrFloat .mrFloat__box select {
  padding-right: 44px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A6B3F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.mrBook .mrFloat .mrFloat__box input:hover,
.mrBook .mrFloat .mrFloat__box textarea:hover,
.mrBook .mrFloat .mrFloat__box select:hover { background-color: var(--mr-panel); box-shadow: var(--mr-lift-2); }
.mrBook .mrFloat .mrFloat__box input:focus,
.mrBook .mrFloat .mrFloat__box textarea:focus,
.mrBook .mrFloat .mrFloat__box select:focus { background-color: var(--mr-panel); box-shadow: 0 0 0 2px var(--mr-gold), var(--mr-lift-1); }
.mrBook .mrFloat .mrFloat__box input::placeholder,
.mrBook .mrFloat .mrFloat__box textarea::placeholder { color: transparent; transition: color .15s; }
.mrBook .mrFloat .mrFloat__box input:focus::placeholder,
.mrBook .mrFloat .mrFloat__box textarea:focus::placeholder { color: var(--mr-faint); }
.mrBook .mrFloat .mrFloat__box label {
  position: absolute; left: 18px; right: 18px; top: 50%; margin: 0; overflow: hidden; transform: translateY(-50%); pointer-events: none;
  color: var(--mr-muted); font: 500 17px/1.2 var(--mr-body); letter-spacing: 0; text-transform: none; white-space: nowrap; text-overflow: ellipsis;
  transition: top .18s cubic-bezier(.22, .61, .36, 1), transform .18s cubic-bezier(.22, .61, .36, 1), font-size .18s, color .18s;
}
.mrBook .mrFloat--area .mrFloat__box label { top: 22px; transform: none; }
.mrBook .mrFloat .mrFloat__box:focus-within label,
.mrBook .mrFloat .mrFloat__box:has(input:not(:placeholder-shown)) label,
.mrBook .mrFloat .mrFloat__box:has(textarea:not(:placeholder-shown)) label,
.mrBook .mrFloat--select .mrFloat__box label {
  top: 12px; transform: none; color: var(--mr-accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.mrBook .mrFloat--area .mrFloat__box:focus-within label,
.mrBook .mrFloat--area .mrFloat__box:has(textarea:not(:placeholder-shown)) label { top: 12px; }
/* the two places of the route question: bigger boxes */
.mrBook .mrFloat--big .mrFloat__box input { height: 76px; padding: 30px 22px 10px; border-radius: 16px; font-size: 19px; }
.mrBook .mrFloat--big .mrFloat__box label { left: 22px; font-size: 19px; }
.mrBook .mrFloat--big .mrFloat__box:focus-within label,
.mrBook .mrFloat--big .mrFloat__box:has(input:not(:placeholder-shown)) label { top: 14px; font-size: 12px; }
.mrBook .mrFloat .mrBook__hint { margin: 6px 0 0 4px; }
.mrBook .mrFloat .mrBook__error { margin: 6px 0 0 4px; }
.mrBook .mrFloat .mrBook__error:empty { display: none; }
.mrBook .mrFloat:has(.mrBook__error:not(:empty)) .mrFloat__box input,
.mrBook .mrFloat:has(.mrBook__error:not(:empty)) .mrFloat__box textarea,
.mrBook .mrFloat:has(.mrBook__error:not(:empty)) .mrPickBtn { box-shadow: 0 0 0 2px var(--mr-danger), var(--mr-lift-1); }
.mrBook .mrFloat:has(.mrBook__error:not(:empty)) .mrFloat__box label,
.mrBook .mrFloat:has(.mrBook__error:not(:empty)) .mrPickBtn__label { color: var(--mr-danger); }
/* inside a white fold (the firm, the exact door) the boxes are cream, without a shadow */
.mrFlow .mrMore .mrFloat .mrFloat__box input,
.mrFlow .mrMore .mrFloat .mrFloat__box textarea,
.mrFlow .mrMore .mrFloat .mrFloat__box select { background-color: var(--mr-cream); box-shadow: none; }
.mrFlow .mrMore .mrFloat .mrFloat__box input:hover,
.mrFlow .mrMore .mrFloat .mrFloat__box textarea:hover { background-color: #F6EFE6; box-shadow: none; }
.mrFlow .mrMore .mrFloat .mrFloat__box input:focus,
.mrFlow .mrMore .mrFloat .mrFloat__box textarea:focus { background-color: var(--mr-panel); box-shadow: 0 0 0 2px var(--mr-gold); }

/* the day and the time (pickers.js): a button in the same box, the label on
   top because there is always a value, the icon at the right edge */
.mrBook .mrPickBtn {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  box-sizing: border-box; width: 100%; height: 64px; margin: 0; padding: 12px 50px 0 18px;
  border: 0; border-radius: 14px; background: var(--mr-panel); box-shadow: var(--mr-lift-1);
  color: var(--mr-dark); text-align: left; font: inherit; cursor: pointer; transition: box-shadow .2s;
}
.mrBook .mrPickBtn:hover { box-shadow: var(--mr-lift-2); }
.mrBook .mrPickBtn:focus-visible,
.mrBook .mrPickBtn[aria-expanded="true"] { outline: 0; box-shadow: 0 0 0 2px var(--mr-gold), var(--mr-lift-1); }
.mrPickBtn__label { color: var(--mr-accent-ink); font: 700 11.5px/1.2 var(--mr-body); letter-spacing: .08em; text-transform: uppercase; }
.mrPickBtn__value { max-width: 100%; overflow: hidden; color: var(--mr-dark); font: 500 17px/1.3 var(--mr-body); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mrPickBtn__value.is-empty { color: var(--mr-faint); }
.mrPickBtn svg { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--mr-accent-ink); }
/* a day and a time side by side: the day the wider half, it carries a weekday and a month */
.mrForm__row--when > .mrFloat--date { flex: 1.5 1 0; }
.mrForm__row--when > .mrFloat--time { flex: 1 1 0; }

/* the popover under the button (above it when there is more room there) */
.mrPop {
  position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; box-sizing: border-box;
  padding: 14px; border-radius: 20px; background: var(--mr-panel);
  box-shadow: 0 30px 60px -24px rgba(36, 26, 19, .45), 0 6px 16px -8px rgba(36, 26, 19, .18);
  transform-origin: top left; animation: mrPopIn .16s cubic-bezier(.22, .61, .36, 1);
}
.mrPop.is-above { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.mrPop.is-right { left: auto; right: 0; transform-origin: top right; }
.mrPop--time { right: 0; min-width: 150px; padding: 6px; }
@keyframes mrPopIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
/* the calendar: a month, Monday first, the past faded, today ringed, the day chosen dark */
.mrCal { width: 294px; }
.mrCal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 2px; }
.mrCal__title { margin: 0; color: var(--mr-dark); font: 600 16px/1.2 var(--mr-display); letter-spacing: -.01em; }
.mrCal__nav {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--mr-dark); cursor: pointer; transition: background-color .15s;
}
.mrCal__nav:hover:not(:disabled) { background: #F6EFE6; }
.mrCal__nav:disabled { opacity: .3; cursor: default; }
.mrCal__nav:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 1px; }
.mrCal__grid { width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: fixed; }
.mrCal__grid th { padding: 8px 0 6px; border: 0; background: none; color: var(--mr-faint); font: 700 11px/1 var(--mr-body); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.mrCal__grid td { padding: 1px 0; border: 0; background: none; text-align: center; }
.mrCal__day {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--mr-dark); font: 500 15px/1 var(--mr-body); font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s;
}
.mrCal__day:hover:not(:disabled):not(.is-selected) { background: #F6EFE6; }
.mrCal__day.is-outside { color: rgba(36, 26, 19, .4); }
.mrCal__day:disabled { color: rgba(36, 26, 19, .22); cursor: default; }
.mrCal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--mr-gold); }
.mrCal__day.is-selected { background: var(--mr-dark); color: #fff; font-weight: 600; box-shadow: none; }
.mrCal__day:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 1px; }
/* the time wheel: quarter hours, spun; what rests in the band is the time */
.mrWheel { position: relative; }
.mrWheel__band { position: absolute; left: 4px; right: 4px; top: 50%; height: 40px; margin-top: -20px; border-radius: 12px; background: #F6EFE6; pointer-events: none; }
.mrWheel:has(.mrWheel__list:focus-visible) .mrWheel__band { box-shadow: 0 0 0 2px var(--mr-gold); }
.mrWheel__list {
  position: relative; box-sizing: border-box; height: 100%; margin: 0; list-style: none; overflow-y: auto; outline: 0;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.mrWheel__list::-webkit-scrollbar { display: none; }
.mrWheel__list li { height: 40px; margin: 0; padding: 0; scroll-snap-align: center; }
.mrWheel__list li::before { display: none; }
.mrWheel__list button {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; color: rgba(36, 26, 19, .45); font: 500 15px/1 var(--mr-body); font-variant-numeric: tabular-nums;
  cursor: pointer; transition: color .15s, font-size .15s;
}
.mrWheel__list button:hover { color: var(--mr-dark); }
.mrWheel__list li.is-centred button { color: var(--mr-dark); font-size: 18px; font-weight: 600; }
/* "Kde přesně?": each end its own block — a dot like the route's, the town,
   the field and the map under it; the two ends 40 px apart */
.mrExact + .mrExact { margin-top: 40px; }
.mrExact__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; color: var(--mr-dark); font-size: 17px; font-weight: 700; }
.mrExact__dot { position: relative; top: 1px; flex: none; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--mr-gold); border-radius: 50%; background: var(--mr-cream); }
.mrExact--dropoff .mrExact__dot { background: var(--mr-gold); box-shadow: 0 0 0 4px rgba(201, 165, 126, .2); }
.mrExact__place { color: var(--mr-faint); font-size: 15px; font-weight: 500; }
.mrExact .mrExact__map { height: 230px; margin-top: 12px; }
.mrExact__note { margin: 0 0 18px; color: var(--mr-faint); font-size: 14px; }
/* the ticket: the exact place under the stop's town, with a small pin */
.mrTk__stopExact { display: flex; align-items: flex-start; gap: 5px; color: rgba(255, 255, 255, .72); font-size: 12.5px; line-height: 1.35; }
.mrTk__stopExact svg { flex: none; margin-top: 2px; color: var(--mr-gold); }
/* a button inside a field's box, at its right edge (the golf map) */
.mrBook .mrFloat--withBtn .mrFloat__box input { padding-right: 62px; }
.mrBook .mrFloat--withBtn .mrFloat__box label { right: 62px; }
.mrFieldBtn {
  position: absolute; top: 50%; right: 12px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px;
  margin-top: -21px; padding: 0; border: 0; border-radius: 12px; background: #F6EFE6; color: var(--mr-accent-ink);
  cursor: pointer; transition: background-color .15s, color .15s;
}
.mrFieldBtn:hover { background: var(--mr-gold); color: var(--mr-dark); }
.mrFieldBtn:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 2px; }
/* the golf map: every course over the page, a card per course with "Jet sem" */
html.mr-golfmap-open, html.mr-golfmap-open body { overflow: hidden; }
.mrGolfMap {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  background: rgba(36, 26, 19, .55); animation: mrFadeIn .18s ease-out;
}
@keyframes mrFadeIn { from { opacity: 0; } }
.mrGolfMap__panel {
  display: flex; flex-direction: column; width: min(1100px, 100%); height: min(760px, 100%);
  overflow: hidden; border-radius: 22px; background: var(--mr-panel); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.mrGolfMap__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; }
.mrGolfMap__title { margin: 0; color: var(--mr-dark); font: 600 24px/1.15 var(--mr-display); letter-spacing: -.015em; }
.mrGolfMap__sub { margin: 6px 0 0; color: var(--mr-muted); font-size: 14.5px; line-height: 1.45; }
.mrGolfMap__close {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: #F6EFE6; color: var(--mr-dark); cursor: pointer;
}
.mrGolfMap__close:hover { background: #EFE3D2; }
.mrGolfMap__close:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 2px; }
.mrGolfMap__map { position: relative; flex: 1 1 auto; min-height: 0; background: #EFE7DA; }
.mrGolfMap__credit { margin: 0; padding: 8px 22px 10px; color: var(--mr-faint); font-size: 12px; }
.mrGolfMap .maplibregl-popup-content { padding: 16px 16px 14px; border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(36, 26, 19, .45); }
.mrGolfMap .maplibregl-popup-close-button { width: 30px; height: 30px; font-size: 20px; color: var(--mr-faint); }
.mrGolfPop { display: flex; flex-direction: column; gap: 5px; min-width: 220px; font-family: var(--mr-body); }
.mrGolfPop__name { padding-right: 22px; color: var(--mr-dark); font-size: 16px; font-weight: 700; line-height: 1.3; }
.mrGolfPop__where { color: var(--mr-muted); font-size: 13.5px; }
.mrGolfPop__desc { color: var(--mr-dark); font-size: 14px; font-weight: 600; }
.mrGolfPop__season { color: var(--mr-faint); font-size: 13px; line-height: 1.45; }
.mrGolfPop__season a { color: var(--mr-accent-ink); font-weight: 600; }
.mrGolfPop .mrGolfPop__go { justify-content: center; margin-top: 8px; min-height: 42px; }
/* ── the manage page (/book/manage, manage.js; Matěj, 28. 9. 2026: "nalepené
   na headeru… ten ticket zobrazit i tady, ve větším, detailně, a kontakty") ─ */
.mrManage .mrBook__body .mr-wrap { padding-top: 56px; padding-bottom: 88px; }
.mrManage .mrManage__wrap { max-width: 1120px; gap: 0; }
.mrManage__hero { margin: 0 0 32px; }
.mrManage__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.mrManage__no { color: var(--mr-faint); font-size: 13.5px; font-weight: 500; }
.mrManage__title { margin: 0; color: var(--mr-dark); font: 600 clamp(32px, 4.2vw, 52px)/1.05 var(--mr-display); letter-spacing: -.025em; text-wrap: balance; }
.mrManage__lead { margin: 10px 0 0; color: var(--mr-muted); font-size: 19px; line-height: 1.45; }
.mrManage .mrManage__wrap > .mrManage__card { margin-bottom: 16px; }
.mrManage__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.mrManage__side { display: flex; flex-direction: column; gap: 16px; }
.mrManage__cardTitle { margin: 0 0 6px; color: var(--mr-dark); font-size: 17px; font-weight: 700; }
.mrManage__contactBtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mrManage__who { margin: 14px 0 0; color: var(--mr-faint); font-size: 13px; }
.mrManage__actions { justify-content: flex-start; margin-top: 36px; }
.mrLeg__confirm { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mrManage .mrNext--card { margin-top: 0; }
/* the big ticket: the form's, with room to breathe */
.mrTicket { overflow: hidden; border-radius: 26px; color: #fff; filter: drop-shadow(0 22px 28px rgba(36, 26, 19, .3)) drop-shadow(0 6px 10px rgba(36, 26, 19, .16)); }
.mrTicket .mrTk { padding: 28px 30px 14px; }
.mrTicket .mrTk__total { padding: 22px 30px 24px; }
.mrTicket .mrTk__service { font-size: 24px; }
.mrTicket .mrTk__stopText strong { font-size: 17px; }
.mrTicket .mrTk__stage { height: 132px; }
.mrTicket .mrTk__stage img { height: 180px; margin-bottom: -32px; }
.mrTk__legTitle { margin: 0 0 12px; color: var(--mr-gold-soft); font: 700 11.5px/1.3 var(--mr-body); letter-spacing: .1em; text-transform: uppercase; }
.mrTk__part--driver .mrTk__who { flex-wrap: wrap; }
.mrTk__call {
  margin-left: auto; padding: 10px 16px; border-radius: 999px; background: var(--mr-gold); color: var(--mr-dark);
  font: 700 14px/1 var(--mr-body); text-decoration: none; white-space: nowrap;
}
.mrTk__call:hover { background: #D8B68C; }
@media (max-width: 900px) {
  .mrManage .mrBook__body .mr-wrap { padding-top: 36px; padding-bottom: 64px; }
  .mrManage__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mrManage__lead { font-size: 17px; }
  .mrTicket .mrTk { padding: 22px 20px 12px; }
  .mrTicket .mrTk__total { padding: 18px 20px 20px; }
  .mrManage__contactBtns .mr-btn { flex: 1 1 100%; justify-content: center; }
}
/* three answers side by side: one trip, there and back, more trips */
.mrTiles.mrTiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mrTiles--3 .mrTile { min-height: 132px; padding: 22px 20px; }
.mrTiles--3 .mrTile__title { font-size: 19px; }
.mrTiles--3 .mrTile__text { font-size: 14px; }
/* the fields: white surfaces floating on the cream, a gold ring on focus */
.mrFlow .mrForm__field input, .mrFlow .mrForm__field select, .mrFlow .mrForm__field textarea {
  background: var(--mr-panel); box-shadow: var(--mr-lift-1); border-radius: 14px;
}
.mrFlow .mrForm__field input:hover, .mrFlow .mrForm__field select:hover, .mrFlow .mrForm__field textarea:hover { background: var(--mr-panel); box-shadow: var(--mr-lift-2); }
.mrFlow .mrForm__field input:focus, .mrFlow .mrForm__field select:focus, .mrFlow .mrForm__field textarea:focus { box-shadow: 0 0 0 2px var(--mr-gold), var(--mr-lift-1); }
.mrFlow .mrBook__leg { padding: 0; background: none; }
/* an extra trip: its name, both ends joined like the first trip, its day and
   time lined up with the boxes (past the dots) */
.mrFlow .mrBook__legWhen { padding-left: 34px; }
.mrFlow .mrBook__fields--legs { gap: 34px; }
/* the one field of a question: big, its headline is the label */
.mrForm__field--solo input { height: 68px; padding: 0 24px; font-size: 20px; border-radius: 16px; }
.mrSr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the switch between the two ways to hire a driver, over the first question */
.mrOrder__modes--flow { margin: 0 0 40px; }
/* two big answers: "Jen tam" / "Tam i zpátky" */
.mrTiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mrTile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 124px;
  padding: 24px; border: 0; border-radius: 18px; background: var(--mr-panel); box-shadow: var(--mr-lift-1);
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease-out, box-shadow .2s;
}
.mrTile:hover { box-shadow: var(--mr-lift-2); transform: translateY(-1px); }
.mrTile:active { transform: scale(.98); }
.mrTile:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 3px; }
.mrTile.is-selected { background: #FFF8EE; box-shadow: 0 0 0 2px var(--mr-gold), var(--mr-lift-1); }
.mrTile__title { color: var(--mr-dark); font-size: 21px; font-weight: 700; line-height: 1.2; }
.mrTile__text { color: var(--mr-muted); font-size: 15px; line-height: 1.45; }
/* how long: bigger chips, the custom count under them */
.mrChips--big { gap: 10px; }
.mrChips--big .mrChip { padding: 15px 22px; font-size: 16px; }
.mrChips--big + .mrChips__custom { margin: 18px 0 0; }
.mrFlow .mrChip { background: var(--mr-panel); border-color: transparent; box-shadow: var(--mr-lift-1); }
.mrFlow .mrChip.is-on { background: var(--mr-dark); color: #fff; }
.mrFlow .mrChips__custom input { background: var(--mr-panel); border-color: transparent; box-shadow: var(--mr-lift-1); }
.mrFlow .mrQty { background: var(--mr-panel); box-shadow: var(--mr-lift-1); border-radius: 14px; }
.mrBook__folds--first { margin-top: 0; }
.mrFlow .mrMore { background: var(--mr-panel); box-shadow: var(--mr-lift-1); }
.mrFlow .mrMore .mrForm__field input, .mrFlow .mrMore .mrForm__field textarea { background: var(--mr-cream); box-shadow: none; }
/* after sending: the trip as the headline, the order number small, "Co bude
   dál" as a timeline drawn like the ticket's route (Matěj, 28. 9. 2026) */
.mrQ--done { text-align: left; }
.mrQ--done .mrQ__inner { max-width: 660px; }
.mrQ--done .mrDone { padding: 0; text-align: left; }
.mrQ--done .mrDone__icon { width: 60px; height: 60px; margin: 0 0 24px; }
.mrDone__eyebrow { margin: 0 0 10px; color: var(--mr-accent-ink); font: 700 13px/1.3 var(--mr-body); letter-spacing: .1em; text-transform: uppercase; }
.mrQ--done .mrDone__title { margin: 0; font: 600 clamp(34px, 4.4vw, 54px)/1.04 var(--mr-display); letter-spacing: -.025em; text-wrap: balance; }
.mrQ--done .mrDone__lead { max-width: none; margin: 12px 0 0; color: var(--mr-muted); font-size: 19px; line-height: 1.45; }
.mrQ--done .mrDone__number { display: block; margin: 10px 0 0; padding: 0; border-radius: 0; background: none; color: var(--mr-faint); font: 500 13.5px/1.4 var(--mr-body); letter-spacing: 0; }
.mrNext { margin-top: 42px; }
.mrNext__title { margin: 0 0 20px; color: var(--mr-dark); font-size: 17px; font-weight: 700; }
.mrNext__list { margin: 0; padding: 0; list-style: none; }
.mrNext__item { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.mrNext__item:last-child { padding-bottom: 0; }
.mrNext__item:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--mr-gold), rgba(201, 165, 126, .35));
}
.mrNext__dot { flex: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--mr-gold); border-radius: 50%; background: var(--mr-cream); }
.mrNext__item:first-child .mrNext__dot { background: var(--mr-gold); box-shadow: 0 0 0 5px rgba(201, 165, 126, .22); }
.mrNext__when { display: block; margin-bottom: 4px; color: var(--mr-accent-ink); font: 700 12px/1.3 var(--mr-body); letter-spacing: .08em; text-transform: uppercase; }
.mrNext__item strong { display: block; color: var(--mr-dark); font-size: 17px; font-weight: 700; line-height: 1.3; }
.mrNext__item p { margin: 4px 0 0; color: var(--mr-muted); font-size: 15px; line-height: 1.5; }
.mrQ--done .mrPayInfo { margin-top: 36px; }
.mrQ--done .mrDone__actions { justify-content: flex-start; margin-top: 36px; }

/* ── the summary as a ticket (25. 9. 2026) ─────────────────────────────────
 * Matěj: "vaše poptávka mnohem lukrativnější — auto ukázat v obrázku, každou
 * sekci graficky, ať to má vlastní styl; na střed výšky". A ticket on the dark
 * of the brand: the route a gold line from dot to dot, the day a leaf of a
 * tear-off calendar, the party as counts, the car a photograph on a pool of
 * light, the price a gold stub below two notches. A part not answered yet is
 * a faint outline of itself; the part that just changed glows once. On a
 * computer the ticket stays in view in the middle of the screen's height;
 * past 1100px it is the bar at the bottom (below). Markup: booking.js (tk*). */
.mrBook__grid { grid-template-columns: minmax(0, 1fr) 380px; }
.mrBook__aside {
  position: sticky; top: var(--mr-head); align-self: start; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  height: calc(100vh - var(--mr-head)); height: calc(100svh - var(--mr-head)); padding: 24px 0;
}
.mrBook__summary {
  position: relative; top: auto; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0; border-radius: 26px; background: none; color: #fff;
  filter: drop-shadow(0 22px 28px rgba(36, 26, 19, .3)) drop-shadow(0 6px 10px rgba(36, 26, 19, .16));
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
/* the notches are real holes, cut half from the ticket and half from the stub */
.mrTk {
  padding: 24px 24px 12px;
  background: radial-gradient(120% 50% at 100% 0%, rgba(201, 165, 126, .17), transparent 62%), var(--mr-dark);
  -webkit-mask: radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) right / 51% 100% no-repeat;
}
.mrTk__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.mrTk__eyebrow { margin: 0; color: var(--mr-gold-soft); font: 700 11.5px/1.3 var(--mr-body); letter-spacing: .14em; text-transform: uppercase; }
.mrTk__service { margin: 4px 0 0; color: #fff; font: 600 21px/1.15 var(--mr-display); letter-spacing: -.015em; text-wrap: balance; }
/* how much is answered: a gold ring filling up */
.mrTk__ring { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; }
.mrTk__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mrTk__ringBg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 2.6; }
.mrTk__ringFg { fill: none; stroke: var(--mr-gold); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.22, .61, .36, 1); }
.mrTk__ring span { position: relative; color: #fff; font: 700 11.5px/1 var(--mr-body); font-variant-numeric: tabular-nums; }

/* the parts: one per row, the day and the party side by side */
.mrTk__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.mrTk__part { position: relative; grid-column: 1 / -1; min-width: 0; padding: 16px 0; border-radius: 4px; outline: 0; transition: background-color .2s, box-shadow .2s; }
.mrTk__part::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .08); }
.mrTk__part--when, .mrTk__part--people { grid-column: auto; }
.mrTk__part--people::after { content: ''; position: absolute; top: 16px; bottom: 16px; left: -10px; width: 1px; background: rgba(255, 255, 255, .08); }
.mrTk__part[data-sum-q] { cursor: pointer; }
.mrTk__part[data-sum-q]:hover { background: rgba(255, 255, 255, .035); box-shadow: 0 0 0 10px rgba(255, 255, 255, .035); }
.mrTk__part:focus-visible { box-shadow: 0 0 0 10px rgba(255, 255, 255, .035), 0 0 0 12px var(--mr-gold); }
.mrTk__edit { position: absolute; top: 14px; right: 0; z-index: 2; width: 16px; height: 16px; color: var(--mr-gold-soft); opacity: 0; transition: opacity .2s; pointer-events: none; }
.mrTk__edit svg { display: block; width: 16px; height: 16px; }
.mrTk__part:hover .mrTk__edit, .mrTk__part:focus-visible .mrTk__edit { opacity: 1; }
@media (hover: none) { .mrTk__edit { opacity: .6; } }
/* the part that just changed glows once */
.mrTk__part.is-new { animation: mrTkGlow 1s cubic-bezier(.22, .61, .36, 1); }
@keyframes mrTkGlow {
  from { background-color: rgba(201, 165, 126, .2); box-shadow: 0 0 0 10px rgba(201, 165, 126, .2); }
  to { background-color: rgba(201, 165, 126, 0); box-shadow: 0 0 0 10px rgba(201, 165, 126, 0); }
}

/* route: a gold line from dot to dot */
.mrTk__trip { margin: 0; padding: 0; list-style: none; }
.mrTk__stop { position: relative; display: flex; gap: 14px; padding: 0 24px 14px 0; }
.mrTk__stop:last-child { padding-bottom: 0; }
.mrTk__stop:not(:last-child)::before {
  content: ''; position: absolute; left: 6px; top: 18px; bottom: -3px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--mr-gold), rgba(201, 165, 126, .45));
}
.mrTk__stop:has(+ .is-empty)::before { background: repeating-linear-gradient(to bottom, rgba(201, 165, 126, .55) 0 4px, transparent 4px 8px); }
.mrTk__dot { position: relative; z-index: 1; flex: none; box-sizing: border-box; width: 14px; height: 14px; margin-top: 4px; border: 2px solid var(--mr-gold); border-radius: 50%; background: var(--mr-dark); }
.mrTk__stop:not(.is-from) .mrTk__dot { background: var(--mr-gold); box-shadow: 0 0 0 4px rgba(201, 165, 126, .18); }
.mrTk__stop.is-empty .mrTk__dot { border-style: dashed; border-color: rgba(201, 165, 126, .55); background: transparent; box-shadow: none; }
.mrTk__stopText { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mrTk__stopLabel { color: rgba(255, 255, 255, .45); font-size: 12px; font-weight: 600; }
.mrTk__stopText strong { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mrTk__stop.is-empty strong { color: rgba(255, 255, 255, .34); font-weight: 500; }
.mrTk__stopMeta { color: var(--mr-gold-soft); font-size: 12.5px; font-weight: 500; }
.mrTk__stop[data-sum-q] { cursor: pointer; }

/* when: a leaf of a tear-off calendar, the time on a gold tag */
.mrTk__when { display: flex; align-items: center; gap: 14px; }
.mrTk__cal { flex: none; display: flex; flex-direction: column; width: 54px; overflow: hidden; border-radius: 12px; background: var(--mr-cream); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .7); text-align: center; }
.mrTk__cal span { padding: 4px 0 3px; background: var(--mr-gold); color: var(--mr-dark); font: 800 10.5px/1.25 var(--mr-body); letter-spacing: .12em; text-transform: uppercase; }
.mrTk__cal strong { padding: 6px 0 8px; color: var(--mr-dark); font: 600 25px/1 var(--mr-display); letter-spacing: -.02em; }
.mrTk__whenText { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.mrTk__whenText > strong { color: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.mrTk__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mrTk__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(201, 165, 126, .18); color: var(--mr-gold); font: 700 13px/1 var(--mr-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrTk__tag--soft { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); font-weight: 600; }

/* the party: counts */
.mrTk__stats { display: flex; flex-direction: column; gap: 9px; }
.mrTk__stat { display: flex; align-items: center; gap: 9px; min-width: 0; color: rgba(255, 255, 255, .66); font-size: 13.5px; }
.mrTk__stat svg { flex: none; width: 17px; height: 17px; color: var(--mr-gold); }
.mrTk__stat strong { min-width: 1.1ch; color: #fff; font: 600 19px/1 var(--mr-display); font-variant-numeric: tabular-nums; }

/* the car: a photograph standing in a pool of light */
.mrTk__ride { display: flex; flex-direction: column; gap: 10px; }
.mrTk__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 104px; }
.mrTk__stage::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 78%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 165, 126, .36), rgba(201, 165, 126, .1) 58%, transparent);
}
.mrTk__stage::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: -4px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.mrTk__stage img {
  position: relative; z-index: 1; display: block; flex: none; width: 96%; height: 150px; margin-bottom: -26px;
  object-fit: contain; object-position: center bottom; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35));
}
.mrTk__part--car.is-new .mrTk__stage img { animation: mrTkArrive .7s cubic-bezier(.22, .61, .36, 1); }
@keyframes mrTkArrive { from { opacity: 0; transform: translateX(-28px); } }
.mrTk__stage .mrTk__silhouette { opacity: .13; filter: brightness(0) invert(1); }
.mrTk__stage--any { align-items: center; height: 88px; }
.mrTk__emblem { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(145deg, #E6CCA8, var(--mr-gold)); color: var(--mr-dark); box-shadow: 0 14px 26px -12px rgba(201, 165, 126, .7); }
.mrTk__emblem svg { width: 28px; height: 28px; }
.mrTk__rideRow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mrTk__rideName { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mrTk__rideName strong { color: #fff; font: 600 20px/1.15 var(--mr-display); letter-spacing: -.01em; }
.mrTk__rideName span { color: rgba(255, 255, 255, .55); font-size: 12.5px; line-height: 1.4; }
.mrTk__rideHint { margin: 0; color: rgba(255, 255, 255, .42); font-size: 13px; text-align: center; }
.mrTk__rideExtra { margin: 0; color: var(--mr-gold-soft); font-size: 12.5px; }

/* extras, the firm, the note */
.mrTk__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mrTk__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: rgba(255, 255, 255, .8); font-size: 13.5px; line-height: 1.4; }
.mrTk__list li span { min-width: 0; overflow-wrap: anywhere; }
.mrTk__list strong { color: #fff; font-weight: 600; }
.mrTk__list em { flex: none; color: var(--mr-gold-soft); font-style: normal; font-weight: 600; white-space: nowrap; }

/* who: initials on a gold coin */
.mrTk__who { display: flex; align-items: center; gap: 14px; }
.mrTk__avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, #E6CCA8, var(--mr-gold)); color: var(--mr-dark); font: 700 15px/1 var(--mr-body); letter-spacing: .04em; }
.mrTk__avatar svg { width: 20px; height: 20px; }
.mrTk__whoText { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mrTk__whoText strong { overflow: hidden; color: #fff; font-size: 15.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mrTk__whoText span { overflow: hidden; color: rgba(255, 255, 255, .55); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
/* a request in the guest's own words */
.mrTk__quote { margin: 0; color: #fff; font: 500 17px/1.5 var(--mr-display); }

/* a part not answered yet: a faint outline of itself */
.mrTk__part.is-ghost .mrTk__cal { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.mrTk__part.is-ghost .mrTk__cal span { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .4); }
.mrTk__part.is-ghost .mrTk__cal strong { color: rgba(255, 255, 255, .3); }
.mrTk__part.is-ghost .mrTk__tag { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .34); }
.mrTk__part.is-ghost .mrTk__whenText > strong,
.mrTk__part.is-ghost .mrTk__whoText strong { color: rgba(255, 255, 255, .4); font-weight: 500; }
.mrTk__part.is-ghost .mrTk__whoText span { color: rgba(255, 255, 255, .3); }
.mrTk__part.is-ghost .mrTk__stat, .mrTk__part.is-ghost .mrTk__stat strong { color: rgba(255, 255, 255, .34); }
.mrTk__part.is-ghost .mrTk__stat svg { color: rgba(201, 165, 126, .45); }
.mrTk__part.is-ghost .mrTk__stage::before { opacity: .4; }
.mrTk__part.is-ghost .mrTk__stage::after { opacity: .5; }
.mrTk__part.is-ghost .mrTk__avatar { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .36); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.mrTk__part.is-ghost .mrTk__quote { color: rgba(255, 255, 255, .4); }

/* the price: a gold stub below two notches */
.mrTk__total {
  position: relative; padding: 20px 24px 22px; background: linear-gradient(135deg, #DEC3A0 0%, var(--mr-gold) 52%, #BD9771 100%); color: var(--mr-dark);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) right / 51% 100% no-repeat;
}
.mrTk__totalRow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.mrTk__totalLabel { color: rgba(36, 26, 19, .72); font: 700 11.5px/1.2 var(--mr-body); letter-spacing: .14em; text-transform: uppercase; }
.mrTk__totalAmount { color: var(--mr-dark); font: 600 32px/1 var(--mr-display); letter-spacing: -.02em; white-space: nowrap; }
.mrTk__totalAmount.is-soft { font-size: 19px; letter-spacing: -.01em; }
.mrTk__discount { display: flex; justify-content: space-between; margin: 8px 0 0; color: rgba(36, 26, 19, .8); font-size: 13px; }
.mrTk__totalFoot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-top: 10px; }
.mrTk__totalNote { flex: 1 1 180px; margin: 0; color: rgba(36, 26, 19, .74); font-size: 12.5px; line-height: 1.45; }
.mrTk__totalNote a { color: var(--mr-dark); font-weight: 700; }
.mrTk__promoToggle { flex: none; margin: 0; padding: 0; border: 0; background: none; color: var(--mr-dark); font: 600 13px/1.4 var(--mr-body); text-decoration: underline; text-decoration-color: rgba(36, 26, 19, .35); text-underline-offset: 3px; cursor: pointer; }
.mrTk__total .mrSum__promo { margin-top: 14px; padding-top: 0; border-top: 0; }
.mrTk__total .mrSum__promoRow input { border-color: rgba(36, 26, 19, .18); background: rgba(255, 255, 255, .4); color: var(--mr-dark); }
.mrTk__total .mrSum__promoRow input::placeholder { color: rgba(36, 26, 19, .5); }
.mrTk__total .mrSum__promoRow button { border-color: var(--mr-dark); background: var(--mr-dark); color: var(--mr-gold); }
.mrTk__total .mrSum__promoMsg { color: rgba(36, 26, 19, .75); }
.mrTk__total .mrSum__promoMsg.is-ok { color: var(--mr-dark); font-weight: 600; }
.mrTk__total .mrSum__promoMsg.is-error { color: #8A2A1E; }

/* back to the question before: a quiet white pill left of the one way on */
.mrQ__back {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 24px 0 20px;
  border: 0; border-radius: 999px; background: var(--mr-panel); box-shadow: var(--mr-lift-1);
  color: var(--mr-dark); font: 600 16px/1 var(--mr-body); cursor: pointer; transition: box-shadow .2s, transform .12s ease-out;
}
.mrQ__back:hover { box-shadow: var(--mr-lift-2); }
.mrQ__back:active { transform: scale(.97); }
.mrQ__back:focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 3px; }
.mrQ__back svg { flex: none; transition: transform .2s; }
.mrQ__back:hover svg { transform: translateX(-2px); }
.mrQ__sendRow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* a short laptop screen (1280×720): the ticket tightens so it still fits whole */
@media (min-width: 1101px) and (max-height: 780px) {
  .mrBook__aside { padding: 16px 0; }
  .mrBook__summary .mrTk { padding-top: 18px; }
  .mrBook__summary .mrTk__head { padding-bottom: 10px; }
  .mrBook__summary .mrTk__service { font-size: 18px; }
  .mrBook__summary .mrTk__ring { width: 40px; height: 40px; }
  .mrBook__summary .mrTk__part { padding: 11px 0; }
  .mrBook__summary .mrTk__edit { top: 10px; }
  .mrBook__summary .mrTk__part--people::after { top: 11px; bottom: 11px; }
  .mrBook__summary .mrTk__stop { padding-bottom: 10px; }
  .mrBook__summary .mrTk__stage { height: 80px; }
  .mrBook__summary .mrTk__stage img { height: 118px; margin-bottom: -22px; }
  .mrBook__summary .mrTk__stage--any { height: 72px; }
  .mrBook__summary .mrTk__total { padding: 16px 24px 18px; }
  .mrBook__summary .mrTk__totalAmount { font-size: 28px; }
}
.mrSum__bar { display: none; }
/* the progress of the whole form, a gold line along the bottom of the bar */
.mrCheck__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); pointer-events: none; }
.mrCheck__progress i { display: block; width: 0; height: 100%; background: var(--mr-gold); transition: width .5s cubic-bezier(.22, .61, .36, 1); }

@media (max-width: 1100px) {
  .mrBook { --mr-bar: 64px; }
  .mrBook__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mrBook__body { padding-bottom: calc(var(--mr-bar) + env(safe-area-inset-bottom, 0px)); }
  /* the summary: a bar at the bottom that opens into the whole list */
  .mrBook__aside { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 45; display: block; height: auto; padding: 0; }
  .mrBook__summary { position: static; max-height: none; overflow: visible; padding: 0; border-radius: 22px 22px 0 0; background: var(--mr-dark); box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, .6); }
  .mrSum__bar {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--mr-bar);
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); border: 0; background: none;
    color: #fff; text-align: left; font: inherit; cursor: pointer;
  }
  .mrSum__barText { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
  .mrSum__barText strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
  .mrSum__barText span { overflow: hidden; color: rgba(255, 255, 255, .6); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
  .mrSum__barTotal { flex: none; color: var(--mr-gold); font: 600 19px/1 var(--mr-display); white-space: nowrap; }
  .mrSum__barChevron { flex: none; width: 10px; height: 10px; margin-top: 5px; border-top: 2px solid var(--mr-gold-soft); border-right: 2px solid var(--mr-gold-soft); transform: rotate(-45deg); transition: transform .2s, margin-top .2s; }
  .mrBook__summary.is-open .mrSum__barChevron { margin-top: -5px; transform: rotate(135deg); }
  .mrSum__full { display: none; max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
  .mrSum__full .mrSum__title { display: none; }
  .mrBook__summary.is-open .mrSum__full { display: block; }
  .mrSum__barThumb { flex: none; display: block; width: 62px; height: 36px; }
  .mrSum__barThumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* in the sheet the bar above is the ticket's head, and the stub is a rounded card: notches at the screen's edge would read as a bite */
  .mrBook__summary { filter: none; }
  .mrBook__summary .mrTk { padding: 0 22px 6px; background: none; -webkit-mask: none; mask: none; }
  .mrBook__summary .mrTk__head { display: none; }
  .mrBook__summary .mrTk__total { margin: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 18px; -webkit-mask: none; mask: none; }
}
@media (max-width: 900px) {
  .mrBook { --mr-head: 60px; }
}
@media (max-width: 720px) {
  /* on a phone the question starts at the top: the keyboard takes the lower
     half, and the field with its suggestions has to stay above it */
  .mrQ { justify-content: flex-start; padding: 40px 0 36px; }
  .mrQ__title { font-size: clamp(30px, 8.6vw, 40px); }
  .mrQ__sub { margin-top: 12px; font-size: 16.5px; }
  .mrQ__body { margin-top: 26px; }
  .mrQ__enter { display: none; }
  .mrQ__actions { margin-top: 26px; }
  .mrQ__actions { flex-wrap: nowrap; gap: 10px; }
  .mrQ__actions .mr-btn { flex: 1 1 auto; width: auto; min-width: 0; justify-content: center; }
  .mrQ__sendRow { width: 100%; flex-wrap: nowrap; gap: 10px; }
  .mrQ__back { flex: none; }
  .mrQ__back:not(:only-child) { width: 56px; padding: 0; }
  .mrQ__back:not(:only-child) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mrQ__send { min-width: 0; }
  .mrOrder__modes--flow { margin-bottom: 28px; }
  .mrTiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mrTile { min-height: 0; padding: 18px 20px; }
  .mrForm__field--solo input { height: 60px; font-size: 18px; }
  .mrRoute { gap: 10px; }
  .mrRoute__stop { gap: 14px; }
  .mrRoute__dot { margin-top: 26px; }
  .mrRoute__stop.is-from::before { top: 42px; height: calc(100% - 22px); }
  .mrBook .mrFloat--big .mrFloat__box input { height: 68px; padding: 27px 18px 9px; font-size: 17px; }
  .mrBook .mrFloat--big .mrFloat__box label { left: 18px; font-size: 17px; }
  .mrBook .mrFloat--big .mrFloat__box:focus-within label,
  .mrBook .mrFloat--big .mrFloat__box:has(input:not(:placeholder-shown)) label { top: 12px; font-size: 11.5px; }
  /* the calendar as wide as the field: bigger days for a thumb */
  .mrPop--date { right: 0; }
  .mrPop--date .mrCal { width: auto; }
  .mrCal__day { width: 42px; height: 42px; }
  .mrTiles.mrTiles--3 { grid-template-columns: minmax(0, 1fr); }
  .mrExact .mrExact__map { height: 190px; }
  .mrGolfMap { padding: 0; }
  .mrGolfMap__panel { width: 100%; height: 100%; border-radius: 0; }
  .mrGolfMap__head { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; }
  .mrGolfMap__title { font-size: 21px; }
  .mrExact + .mrExact { margin-top: 32px; }
  .mrFlow .mrBook__legWhen { padding-left: 30px; }
  .mrTiles--3 .mrTile { min-height: 0; padding: 18px 20px; }
  .mrQ__total strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mrQ { transition: none; }
  .mrQ.is-entering { opacity: 1; transform: none; }
  .mrTk__part.is-new, .mrTk__part--car.is-new .mrTk__stage img { animation: none; }
  .mrTk__ringFg, .mrQ__back svg { transition: none; }
  .mrCheck__progress i { transition: none; }
  .mrBook .mrFloat .mrFloat__box label { transition: none; }
  .mrPop { animation: none; }
  .mrGolfMap { animation: none; }
  .mrWheel__list button { transition: none; }
}