/* VrátímTo.cz — modern marketplace UI (clean surface, prominent
   search header, product cards, bold prices). Self-contained, no framework. */

:root {
  --brand: #059669;
  --brand-dark: #047857;
  --brand-soft: #e9f4ef;
  --price: #ea580c;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f1f4f3;
  --surface: #ffffff;
  --line: #e7e9ee;
  --danger: #b91c1c;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 20px rgba(15,23,42,.07);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.1);
  /* dark "tech" surfaces (hero, footer) */
  --dark-bg: #0b1411;
  --dark-bg-2: #101d17;
  --dark-line: rgba(255,255,255,.08);
  --dark-text: #e7ecea;
  --dark-muted: #93a09a;
  --accent: #10b981;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* stable gutter — the scrollbar appearing/vanishing must not shift the layout */
html {
  -webkit-text-size-adjust: 100%; scrollbar-gutter: stable;
  /* fluent in-page anchor jumps (e.g. hero → #waitlist) */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* cross-page crossfade (Chrome 126+; harmless elsewhere) — tab changes feel
   fluent instead of hard-swapping, e.g. the header search appearing/vanishing */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  /* layered canvas: cool emerald washes (brand echo of the dark hero/footer)
     + one warm "sunlight" wash low on the page, over a white top fade and huge
     faint "radar rings" — concentric distance circles radiating from the top,
     the product's own borrow-from-neighbors-nearby metaphor as texture —
     on a deeper base gray so white cards and panels lift off the page */
  background:
    radial-gradient(64rem 42rem at 88% -8rem, rgba(16, 185, 129, .08), transparent 62%) no-repeat,
    radial-gradient(54rem 38rem at -12% 34rem, rgba(5, 150, 105, .06), transparent 60%) no-repeat,
    radial-gradient(50rem 36rem at 108% 88%, rgba(251, 191, 36, .06), transparent 62%) no-repeat,
    linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0) 380px) no-repeat,
    repeating-radial-gradient(circle at 82% -16rem,
      rgba(15, 23, 42, .05) 0 1px, transparent 1px 120px),
    var(--bg);
  overflow-x: clip;
}

/* branded text selection — small human detail across every page */
::selection { background: rgba(16, 185, 129, .22); }

.container { width: min(1180px, 92vw); margin-inline: auto; }
.page { padding: 2rem 0 4rem; flex: 1 0 auto; }

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6rem; }
/* display face down to h3 so the brand voice carries past the fold */
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 2.4vw, 2.05rem); font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 600; }

/* ---- Header ---------------------------------------------------------------*/
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(20px) saturate(1.9);
  backdrop-filter: blur(20px) saturate(1.9);
  border-bottom: 1px solid rgba(15,23,42,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 4px 16px -8px rgba(15,23,42,.12);
  transition: background .25s ease, box-shadow .25s ease;
}
/* deeper glass once content slides underneath */
.site-header.is-scrolled {
  background: rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 32px -16px rgba(15,23,42,.18);
}
.header-inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 10px;
  object-fit: contain; display: block;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em;
}
.brand-name .bn-1 { color: var(--ink); }
.brand-name .bn-2 { color: var(--brand); }
.brand-name .bn-3 { color: var(--muted); font-weight: 600; }

.header-search { flex: 1; display: flex; max-width: 620px; }
.header-search .searchbar-main {
  flex: 1; padding: .25rem .25rem .25rem .8rem; border-radius: 999px; gap: .45rem;
}
.header-search .searchbar-main input { padding: .4rem 0; font-size: .95rem; }
.header-search .searchbar-main .btn { border-radius: 999px; }

.header-nav { display: flex; align-items: center; gap: 1.1rem; white-space: nowrap; margin-left: auto; }

/* Hamburger + dropdown menu — mobile only (see the ≤640px block below). */
.nav-burger {
  display: none; margin-left: auto; flex: none;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span {
  display: block; width: 18px; height: 2px; border-radius: 1px;
  background: var(--ink); transition: transform .2s ease, opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  display: flex; flex-direction: column;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px -20px rgba(15,23,42,.25);
  padding: .4rem 4vw .8rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: .8rem .4rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { color: var(--brand-dark); text-decoration: none; }
/* mobile quick-add — round green "+" next to the burger (logged-in only) */
.nav-plus {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: 1.55rem; font-weight: 700; line-height: 1;
  padding-bottom: 2px;
}
.nav-plus:hover { color: #fff; text-decoration: none; }
/* pull the burger tight against the "+" (header gap is too wide for the pair) */
.nav-plus + .nav-burger { margin-left: -.5rem; }
.header-nav a { color: var(--ink); font-weight: 500; }
.header-nav a:not(.btn) { position: relative; padding-bottom: 2px; }
.header-nav a.is-active { color: var(--brand-dark); font-weight: 700; }
.header-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; border-radius: 2px; background: var(--brand); }
.notif-wrap { position: relative; display: inline-flex; }
.nav-bell { position: relative; display: inline-flex; align-items: center; color: var(--muted);
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; }
.nav-bell .ico-svg svg { width: 22px; height: 22px; }
.nav-bell:hover { color: var(--ink); }
.nav-bell.is-active { color: var(--brand-dark); }
.nav-bell-badge {
  position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--price); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface); animation: unread-pulse 2.4s ease-in-out infinite;
}
.nav-bell-badge:empty { display: none; }

/* Notification dropdown (bell popover) */
.notif-panel {
  position: fixed; top: 84px; right: 24px; width: 560px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -12px rgba(16, 24, 40, .45), 0 8px 20px -8px rgba(16, 24, 40, .3);
  z-index: 70; overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-pop-head { display: flex; justify-content: space-between; align-items: center;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.notif-pop-head strong { font-family: var(--font-display); }
.notif-pop-all { font-size: .8rem; font-weight: 600; color: var(--brand-dark); }
.notif-pop-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.notif-pop + .notif-pop { border-top: 1px solid var(--line); }
.notif-pop.is-unread { background: var(--brand-soft); }
.notif-pop-link { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem;
  color: var(--ink); }
.notif-pop-link:hover { background: rgba(0, 0, 0, .03); }
.notif-pop-title { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.notif-pop-body { font-size: .84rem; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-pop-time { font-size: .72rem; color: var(--muted); }
.notif-pop-empty { padding: 1.4rem .9rem; margin: 0; font-size: .88rem; text-align: center; }
@media (max-width: 640px) {
  .notif-panel { position: fixed; top: 66px; left: 4vw; right: 4vw; width: auto; max-width: none; }
}

/* ---- Buttons --------------------------------------------------------------*/
.btn, button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .6rem 1.1rem; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover, button[type="submit"]:hover { text-decoration: none; }
.btn:active, button:active { transform: translateY(1px); }
/* Bare submit buttons default to primary; classed ones use their variant. */
.btn-primary, button[type="submit"]:not([class]) { background: var(--brand); color: #fff; }
.btn-primary:hover, button[type="submit"]:not([class]):hover { background: var(--brand-dark); color: #fff; }
.btn-sm { padding: .4rem .8rem; font-size: .85rem; }
.btn-add {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; border-radius: 999px; font-weight: 700; padding: .55rem 1.15rem;
  transition: background .15s, transform .12s ease;
}
.btn-add:hover {
  color: #fff; transform: translateY(-2px);
}
.btn-add:active { transform: translateY(0); }
.btn-cta {
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  font-size: 1.05rem; padding: .8rem 1.4rem;
}
.btn-cta:hover { background: linear-gradient(135deg, #0ca877, #04785f); color: #fff; }
.btn-cta::after { content: "→"; font-weight: 700; transition: transform .18s ease; }
.btn-cta:hover::after { transform: translateX(3px); }
.btn-cta:disabled, .btn-cta[disabled] {
  background: #e8ecea; color: #9aa6a0; box-shadow: none; cursor: default;
}
.btn-cta:disabled:hover { background: #e8ecea; color: #9aa6a0; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #a32a16; color: #fff; }
.btn-block { width: 100%; }

/* Admin moderation bar on listing detail — only rendered for admins. */
.admin-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; padding: .6rem .9rem; border: 1px solid var(--danger);
  border-radius: .5rem; background: #fdf3f1; }
.admin-bar .admin-tag { display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--danger); }
/* Loading state: disabled look + spinner; label hidden while in flight. */
.btn.is-loading, button.is-loading { position: relative; pointer-events: none; opacity: .8; }
.btn.is-loading .btn-label { visibility: hidden; }
.btn-spinner { display: none; }
.btn.is-loading .btn-spinner,
button.is-loading .btn-spinner {
  display: block; position: absolute; top: 50%; left: 50%;
  width: 1em; height: 1em; margin: -.5em 0 0 -.5em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: btn-spin .6s linear infinite;
}
/* Bare loading buttons with no .btn-label still show a trailing spinner. */
.btn.is-loading:not(:has(.btn-label))::after,
button.is-loading:not(:has(.btn-label))::after {
  content: ""; width: 1em; height: 1em; margin-left: .5em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Forms ----------------------------------------------------------------*/
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
input, select, textarea {
  width: 100%; font: inherit; margin-top: .3rem;
  padding: .6rem .75rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
input[type="search"], input[type="date"] { margin-top: 0; }

/* ---- Cards / surfaces -----------------------------------------------------*/
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }

/* ---- Hero (landing) -------------------------------------------------------*/
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(56rem 32rem at 88% -22%, rgba(16,185,129,.4), transparent 62%),
    radial-gradient(40rem 26rem at -12% 118%, rgba(5,150,105,.3), transparent 56%),
    linear-gradient(160deg, #273b31, #1a2b22 70%);
  color: #fff; border: none;
  /* full-bleed band — no card corners; flows from under the glass header,
     content padding re-aligns with the .container width */
  border-radius: 0;
  margin-top: -2rem; margin-inline: calc(50% - 50vw);
  /* mars-explorer style: the bottom edge is a real s-wave, cut with an svg
     mask (top layer keeps the body solid, bottom layer draws the curve) */
  --hero-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path fill='black' d='M0,0 H1200 V64 C1010,118 850,96 660,58 C470,20 290,10 150,40 C95,52 40,68 0,86 Z'/></svg>");
  -webkit-mask-image: linear-gradient(#000 0 0), var(--hero-wave);
  -webkit-mask-size: 100% calc(100% - 118px), 100% 119px;
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000 0 0), var(--hero-wave);
  mask-size: 100% calc(100% - 118px), 100% 119px;
  mask-position: top, bottom;
  mask-repeat: no-repeat;
  padding: clamp(2.5rem, 5vw, 4.5rem) calc(50vw - min(590px, 46vw)) clamp(4.5rem, 9vw, 7rem);
  margin-bottom: 2.5rem;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center;
}
/* slow aurora drift behind everything — barely-there life in the backdrop */
.hero::after {
  content: ""; position: absolute; inset: -30% -15%; pointer-events: none;
  background:
    radial-gradient(30rem 18rem at 70% 30%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(26rem 16rem at 22% 78%, rgba(16,185,129,.12), transparent 60%);
  filter: blur(24px);
  animation: hero-aurora 19s ease-in-out infinite alternate;
}
@keyframes hero-aurora {
  from { transform: translate3d(-2.5%, -1.5%, 0); }
  to   { transform: translate3d(2.5%, 2%, 0); }
}
/* faint engineering grid — quiet tech texture, fades out toward the copy */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 90% at 78% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 90% at 78% 20%, #000 0%, transparent 75%);
}
.hero-copy { position: relative; z-index: 1; }
.hero h1 {
  color: #fff; max-width: 16ch;
  font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.06; text-wrap: balance;
}
/* emerald gradient ink on the promise half of the headline */
.hero-grad {
  background: linear-gradient(92deg, #6ee7b7, #10b981 55%, #5eead4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: rgba(231,236,234,.82); font-size: 1.15rem; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.hero-actions .btn-outline { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.22); }
.hero-actions .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.hero-rating { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.google-logo { flex: none; display: block; }
.rating-stars { display: inline-flex; gap: 2px; }
.rating-star { color: #fbbc04; font-size: 1.1rem; line-height: 1; }
.hero-rating-text { font-size: .92rem; color: rgba(255,255,255,.95); }
.hero-rating-text strong { font-weight: 700; }

.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.7rem 0 0; padding: 0; }
.hero-trust li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.05); border: 1px solid var(--dark-line);
  padding: .42rem .8rem; border-radius: 8px; backdrop-filter: blur(6px);
}
.hero-trust .ico-svg svg { color: var(--accent); }
.hero-trust .ico-svg { color: #fff; }
.bankid-logo--hero { height: 15px; filter: brightness(0) invert(1); }

.hero-media { position: relative; z-index: 1; min-height: 360px; }
.hero-photo {
  position: absolute; margin: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
}
/* loose, hand-placed scatter — slight offsets and tilts, nothing grid-perfect */
.hero-photo--a { width: 56%; aspect-ratio: 4/3; top: 2%; left: 3%; transform: rotate(-2deg); z-index: 2; }
.hero-photo--b { width: 50%; aspect-ratio: 4/3; top: 16%; right: -2%; transform: rotate(2.5deg); z-index: 3; }
.hero-photo--c { width: 42%; aspect-ratio: 4/3; bottom: -2%; left: 18%; transform: rotate(-1.5deg); z-index: 4; }
.hero-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.hero-photo:hover img { transform: scale(1.045); }

/* Floating glass info chips over the photo collage. */
.hero-float {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap;
  background: rgba(13,27,21,.55); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: .48rem .85rem; border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.55);
}
.hero-float .ico-svg svg { width: 15px; height: 15px; color: var(--accent); }
.hero-float--ins { top: 7%; right: 2%; }
.hero-float--id { bottom: 1%; left: 6%; }
.hero-float--partner { top: -2%; left: -5%; rotate: -5deg; }
/* tint the black png to the same emerald as the svg icons next door */
.hero-float--partner img {
  width: 15px; height: 15px; flex: none;
  filter: brightness(0) invert(64%) sepia(43%) saturate(2350%) hue-rotate(123deg) brightness(93%);
}

/* Motion: staggered entrance for the copy, lazy bob for the collage. The
   ``translate`` property is animated separately so it never fights the
   rotate() transforms on the photos. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    opacity: 0; translate: 0 16px;
    animation: hero-in .65s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .hero-copy > *:nth-child(2) { animation-delay: .07s; }
  .hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .hero-copy > *:nth-child(4) { animation-delay: .21s; }
  .hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .hero-copy > *:nth-child(6) { animation-delay: .35s; }
  .hero-photo, .hero-float { opacity: 0; animation: hero-fade .8s .25s ease forwards; }
  .hero-photo--a { animation-delay: .3s; }
  .hero-photo--b { animation-delay: .42s; }
  .hero-photo--c { animation-delay: .54s; }
  .hero-float--ins { animation-delay: .7s; }
  .hero-float--id { animation-delay: .82s; }
  /* after the entrance settles, everything in the collage bobs gently */
  .hero-photo, .hero-float { animation-fill-mode: forwards, both; }
  .hero-photo--a { animation: hero-fade .8s .3s ease forwards, hero-bob 6.5s 1.2s ease-in-out infinite alternate; }
  .hero-photo--b { animation: hero-fade .8s .42s ease forwards, hero-bob 7.4s 1.5s ease-in-out infinite alternate; }
  .hero-photo--c { animation: hero-fade .8s .54s ease forwards, hero-bob 8.2s 1.8s ease-in-out infinite alternate; }
  .hero-float--ins { animation: hero-fade .8s .7s ease forwards, hero-bob 5.6s 1.4s ease-in-out infinite alternate; }
  .hero-float--id { animation: hero-fade .8s .82s ease forwards, hero-bob 6.8s 1.7s ease-in-out infinite alternate; }
  .hero-float--partner { animation: hero-fade .8s .94s ease forwards, hero-bob 6.2s 2s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}
@keyframes hero-in { to { opacity: 1; translate: 0 0; } }
@keyframes hero-fade { to { opacity: 1; } }
@keyframes hero-bob { from { translate: 0 0; } to { translate: 0 -9px; } }

/* ---- "Právě v nabídce" auto-scrolling ticker -------------------------------*/
/* rides up over the hero's wave: a slightly tilted frosted-glass conveyor that
   cuts across the curve — same glass language as the hero chips */
.ticker { position: relative; z-index: 6; margin: -8.5rem 0 3rem; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* desktop: the cards ride the wave itself — each item travels a motion path
   shaped like the hero's bottom curve. mobile + reduced-motion keep the flat
   conveyor below. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .marquee { height: 252px; }
  .marquee-track {
    animation: none; width: auto; height: 100%;
    position: relative; padding: 0;
  }
  /* the looping path makes duplicates pointless — hide them, and thin the
     rest to every other card so they don't crowd the curve */
  .marquee .ticker-item[aria-hidden="true"],
  .marquee .ticker-item:nth-child(even) { display: none; }
  .ticker-item {
    position: absolute; width: 285px;
    /* parallel of the hero wave, amplified — high crest, deep trough */
    offset-path: path('M -340,136 C -220,138 -90,140 0,136 C 60,130 100,92 150,78 C 200,64 240,46 290,42 C 350,38 410,44 470,52 C 540,62 590,80 660,99 C 730,118 780,136 850,148 C 900,156 950,172 1010,176 C 1080,178 1140,130 1200,106 C 1300,88 1440,96 1580,98');
    offset-rotate: 0deg;
    animation: ticker-ride 52s linear infinite;
    animation-delay: calc(52s / var(--n, 6) * var(--i, 0) * -1);
  }
  .marquee:hover .ticker-item { animation-play-state: paused; }
}
@keyframes ticker-ride {
  from { offset-distance: 100%; }
  to { offset-distance: 0%; }
}
.marquee-track {
  display: flex; gap: 1rem; width: max-content; padding: .3rem 0;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* track holds the list twice — sliding half its width loops seamlessly */
@keyframes marquee { to { transform: translateX(calc(-50% - .5rem)); } }
.ticker-item {
  display: flex; align-items: center; gap: .9rem; flex: none;
  padding: .55rem 1.15rem .55rem .55rem;
  /* near-solid frosted glass — keeps the text readable over the dark wave */
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 14px;
  box-shadow: 0 8px 22px -12px rgba(7,20,15,.28); color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ticker-item:hover {
  text-decoration: none; border-color: var(--brand);
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.ticker-item img {
  width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: block;
}
.ticker-title { font-size: 1rem; font-weight: 600; max-width: 26ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-price { font-size: 1rem; font-weight: 700; color: var(--price); white-space: nowrap; }
.ticker-price small { font-weight: 500; color: var(--muted); }
/* path mode (wave-riding cards): title row over price row, full column width.
   must come after the base rules above — same specificity, source order wins */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .ticker-item {
    display: grid; grid-template-columns: 64px 1fr;
    column-gap: .85rem; row-gap: .15rem; align-items: center;
  }
  .ticker-item img { grid-area: 1 / 1 / 3 / 2; }
  .ticker-title {
    grid-area: 1 / 2 / 2 / 3; align-self: end;
    font-size: .95rem; min-width: 0; max-width: none;
  }
  .ticker-price { grid-area: 2 / 2 / 3 / 3; align-self: start; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-track { animation: none; }
  .live-dot { animation: none; }
}

/* numbered editorial section labels */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: .55rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 1px; background: var(--brand); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.section-head--accent h2 { margin-bottom: 0; }
.section-head--accent h2::after {
  content: ""; display: block; width: 56px; height: 5px;
  margin-top: .55rem; border-radius: 3px; background: var(--brand);
}

/* ---- Category tiles -------------------------------------------------------*/
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
/* phones: minmax(170px) would collapse to one huge column — pin two across */
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .tile span { font-size: .88rem; padding: 1rem .7rem .55rem; }
}
.tile {
  position: relative; display: block; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tile { transition: box-shadow .2s; }
.tile:hover { box-shadow: 0 0 0 1px rgba(5,150,105,.4), 0 0 24px -6px rgba(16,185,129,.3), var(--shadow-lg); }
.tile:hover img { transform: scale(1.06); }
.tile span {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.4rem .9rem .7rem;
  color: #fff; font-weight: 700; font-size: 1.02rem;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}

/* ---- Video showcase (landing) ---------------------------------------------
   Dark band like the hero: copy + feature points left, the clip right inside
   a browser-chrome mockup tilted in 3D that straightens on hover. */
.showcase { margin-top: 2.8rem; }
.showcase-band {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
}
.showcase-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.showcase-copy p { color: var(--muted); max-width: 38ch; }
.showcase-points { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; display: grid; gap: .7rem; }
.showcase-points li {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 500; color: var(--ink);
}
.showcase-points .ico-svg { color: var(--brand-dark); flex: none; }
.showcase-stage { position: relative; z-index: 1; perspective: 1400px; }
.showcase-frame {
  border-radius: 14px; overflow: hidden; background: var(--dark-bg);
  border: 1px solid rgba(255,255,255,.16);
  transform: rotateY(16deg) rotateX(2deg);
  box-shadow: 0 32px 56px -24px rgba(0,0,0,.6);
}
/* fake browser chrome — instantly reads as "this is the app" */
.showcase-chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .8rem; background: rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sc-dot--r { background: #f87171; }
.sc-dot--y { background: #fbbf24; }
.sc-dot--g { background: #34d399; }
.showcase-url {
  margin-left: .6rem; padding: .18rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.75);
  letter-spacing: .02em;
}
.showcase-frame video { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .showcase { margin-top: 2.2rem; }
  .showcase-band { grid-template-columns: 1fr; gap: 1.6rem; }
  .showcase-copy p { max-width: none; }
  /* no hover on touch — JS scrubs the tilt with scroll instead (see
     landing.html); this is just the starting pose */
  .showcase-stage { perspective: 900px; }
  .showcase-frame { transform: rotateY(13deg) rotateX(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-frame { transform: none; }
}

/* ---- Trust strip ----------------------------------------------------------*/
.trust-section { margin-top: 2.8rem; }
/* asymmetric: the bank id card anchors the right side, the rest orbit it */
.trust { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 1rem; }
.trust .card { padding: 1.3rem; }
.trust-primary {
  grid-column: 3; grid-row: 1 / 3; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: 2rem 1.8rem !important;
  color: #fff; border: none;
  background:
    radial-gradient(26rem 16rem at 85% -10%, rgba(16,185,129,.4), transparent 62%),
    radial-gradient(20rem 14rem at -10% 110%, rgba(5,150,105,.3), transparent 56%),
    linear-gradient(160deg, #273b31, #1a2b22 70%);
}
.trust-primary-badge {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  margin-bottom: .9rem; padding: .45rem .85rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.95); color: var(--ink);
}
.trust-primary h4 {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.25; color: #fff; margin-bottom: .4rem;
}
.trust .trust-primary p { color: rgba(255,255,255,.78); font-size: .96rem; max-width: 38ch; }
.trust .card { display: flex; flex-direction: column; }
.trust-wide { grid-column: 1 / 3; }
/* mini-stat footer pinned to the card bottom — a number gives each claim weight */
.trust .trust-stat {
  margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--line);
  display: flex; align-items: baseline; gap: .5rem; font-size: .82rem;
}
.trust .trust-stat strong {
  font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.02em;
  color: var(--brand-dark);
}
/* concrete earning examples (seed prices × ~10 days) */
.earn-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: .6rem;
  margin: .9rem 0 0; padding: 0;
}
.earn-chips li {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem 1.05rem .6rem; border: 1px solid #d8eee3; border-radius: 12px;
  background: linear-gradient(180deg, #f3faf6, #fff);
  font-size: .76rem; color: var(--muted);
  box-shadow: 0 8px 18px -12px rgba(5,150,105,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.earn-chips li:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(5,150,105,.45);
}
/* money is orange everywhere on the site — the "+" sells it as income */
.earn-chips strong {
  font-family: var(--font-display); letter-spacing: -.02em;
  /* scales down before it can wrap mid-number on narrow chips */
  font-size: clamp(1rem, 2.6vw, 1.3rem); white-space: nowrap;
  color: var(--price); font-variant-numeric: tabular-nums;
}
.earn-chips strong small { font-size: .72rem; font-weight: 500; color: var(--muted); }
.trust .earn-note { margin-top: .6rem; font-size: .74rem; color: var(--muted); }
/* the asymmetric grid needs width — stack earlier than the global 860 break */
@media (max-width: 1000px) {
  .trust { grid-template-columns: 1fr; }
  .trust-primary { grid-column: auto; grid-row: auto; }
  .trust-wide { grid-column: auto; }
  .earn-chips { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  /* nowrap amounts don't fit two-up on the narrowest phones */
  .earn-chips { grid-template-columns: 1fr; }
  .earn-chips li { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
.trust h4 { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.trust .ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 9px; color: #fff; font-size: 1.05rem;
  background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: 0 4px 12px -4px rgba(5,150,105,.5);
}
.trust p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ---- About / team page ----------------------------------------------------*/
.about-hero { max-width: 760px; margin: 1rem auto 3rem; text-align: center; }
.about-eyebrow {
  display: inline-block; margin-bottom: .9rem; padding: .3rem .8rem;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.about-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1rem; }
.about-hero .lead { color: var(--muted); font-size: 1.12rem; line-height: 1.65; margin: 0; }

.team-section { margin-bottom: 3.5rem; }
.team-section .section-head { justify-content: center; }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem; max-width: 820px; margin: 0 auto;
}
.team-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s;
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.team-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--brand-soft); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-body { padding: 1.3rem 1.4rem 1.5rem; }
.team-name { margin: 0; font-size: 1.25rem; }
.team-role {
  display: inline-block; margin: .25rem 0 .8rem; color: var(--brand-dark);
  font-weight: 600; font-size: .92rem;
}
.team-bio { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.team-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.team-social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s;
}
.team-social a:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
.team-social svg { width: 18px; height: 18px; }

/* ---- Inline line-icons ----------------------------------------------------*/
.ico-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ico-svg svg { width: 1.2em; height: 1.2em; display: block; }
.btn .ico-svg { vertical-align: -.15em; }

/* ---- Search bar + filters -------------------------------------------------*/
.searchbar {
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 1.1rem; margin-bottom: 1.4rem;
}
.searchbar-main {
  display: flex; align-items: center; gap: .55rem;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .3rem .3rem .3rem .9rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.searchbar-main:focus-within {
  border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft);
}
.searchbar-icon { color: var(--muted); flex: none; }
.searchbar-icon svg { width: 1.3em; height: 1.3em; }
.searchbar-main input {
  flex: 1; min-width: 0; margin: 0; padding: .55rem 0;
  border: none; background: transparent; font-size: 1rem;
}
.searchbar-main input:focus { outline: none; }
.searchbar-main .btn { flex: none; }

.searchbar-filters { display: flex; flex-wrap: wrap; gap: .7rem; }
.field { flex: 1 1 180px; margin: 0; }
.field-label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; padding-left: .15rem;
}
.select-wrap { position: relative; display: block; }
.select-wrap::after {
  content: ""; position: absolute; right: .9rem; top: 50%; width: .5rem; height: .5rem;
  margin-top: -.38rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.select-wrap select {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; font-weight: 600;
  padding: .62rem 2.1rem .62rem .85rem; background: #fff;
}
.nearby-toggle {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-weight: 600;
  padding: .62rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); white-space: nowrap; transition: all .15s ease;
}
.nearby-toggle .ico-svg svg { width: 16px; height: 16px; }
.nearby-toggle:hover { border-color: var(--brand); color: var(--brand-dark); }
.nearby-toggle.is-active {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark);
}
.geo-box {
  margin: .2rem 0 1rem; padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg);
}
.geo-box-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; }
.geo-box-title { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600;
  color: var(--ink); }
.geo-box-title .ico-svg svg { width: 16px; height: 16px; }
.geo-box-hint { margin: .45rem 0 .7rem; color: var(--muted); font-size: .85rem; }
.geo-status { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem;
  font-weight: 600; color: var(--muted); }
.geo-status .ico-svg svg { width: 14px; height: 14px; }
.geo-status.is-ok { color: var(--brand-dark); }
.geo-status.is-error { color: #c0392b; }
.distance-badge {
  display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start;
  font-size: .78rem; font-weight: 600; color: var(--brand-dark);
  background: var(--brand-soft); padding: .12rem .5rem; border-radius: 6px;
}
.distance-badge .ico-svg svg { width: 13px; height: 13px; }

/* Booking-row action cell — every row's buttons share one height & left edge */
.row-actions { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; }
.row-actions form { margin: 0; }
.row-actions .btn-sm { height: 38px; min-width: 106px; }
/* GoPay pay button (clickable logo) on reserved booking rows */
.gopay-pay-btn { padding: 0 .8rem; background: #fff; border-color: var(--line); }
.gopay-pay-btn:hover { border-color: #2db04e; box-shadow: 0 3px 10px -4px rgba(0,0,0,.3); }
.gopay-pay-btn img { height: 34px; width: auto; display: block; }

/* Wallet checkout — Google Pay + Apple Pay buttons on the pay page. Styled
   facsimiles (no live wallet SDK) so both always render identically. */
.wallet-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 .5rem;
}
.wallet-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; height: 48px; border: 0; border-radius: 8px;
  background: #000; color: #fff; cursor: pointer;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.15rem; font-weight: 500; transition: background .15s;
}
.wallet-btn:hover { background: #1a1a1a; color: #fff; }
.wallet-btn__label { line-height: 1; }
.apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: buy;
  -apple-pay-button-style: black;
}
.apple-pay-button__logo { display: inline-flex; }
.apple-pay-button__logo svg { width: 17px; height: 21px; fill: #fff; display: block; }
.gpay-button__logo { display: inline-flex; }
.gpay-button__logo svg { width: 22px; height: 22px; display: block; }
button.pay-card-link {
  display: block; width: 100%; margin: .15rem 0 0; padding: .5rem;
  background: none; border: 0; color: var(--muted); font-weight: 500;
  font-size: .85rem; text-decoration: underline; cursor: pointer;
}
button.pay-card-link:hover { color: var(--ink); background: none; }
.gpay-container { margin: .85rem 0 .35rem; min-height: 44px; }
.gpay-note {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; margin: 0 0 .35rem;
}
.gpay-note .ico-svg svg { width: 14px; height: 14px; }
.pay-or {
  display: flex; align-items: center; text-align: center;
  color: var(--muted); font-size: .8rem; margin: .5rem 0;
}
.pay-or::before, .pay-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.pay-or span { padding: 0 .7rem; }

/* ---- Product cards --------------------------------------------------------*/
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.product {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.product:hover {
  transform: translateY(-3px); border-color: rgba(5,150,105,.45);
  box-shadow: 0 0 0 1px rgba(5,150,105,.35), 0 0 24px -6px rgba(16,185,129,.25), var(--shadow-lg);
}
.product-media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
/* always reserve two lines (and clamp to two) so cards align whether the
   title wraps or not */
.product-title {
  font-weight: 700; font-size: 1.02rem; color: var(--ink);
  line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-title:hover { text-decoration: none; color: var(--brand-dark); }
.product-meta { color: var(--muted); font-size: .85rem; }
.product-price { margin-top: auto; padding-top: .4rem; }
.product-price .amount { color: var(--price); font-weight: 800; font-size: 1.4rem; }
.product-price .unit { color: var(--muted); font-size: .9rem; }
.product .btn { margin-top: .6rem; }
/* Card CTA rests in soft emerald and fills solid when the card is engaged. */
.product .btn-primary {
  background: var(--brand-soft); border-color: transparent; color: var(--brand-dark);
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.product:hover .btn-primary, .product:focus-within .btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* Founding-member ("Zakládající člen") listings — subtle green-tinted lift
   plus a one-shot light sweep across the photo on hover. */
.product--founding {
  background: var(--brand-soft);
}
.product--founding .product-body { background: transparent; }
.product--founding .tier-chips li { background: #fff; color: #334155; }
/* soft-emerald CTA would vanish on the tinted card — rest on white instead */
.product--founding .btn-primary { background: #fff; }

/* "Topped" bubble (top-right) — marks a permanently pinned founding listing.
   Hover/focus reveals a tooltip explaining the perk. */
.topped-badge {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #12b277, #0b7d57);
  box-shadow: 0 2px 8px rgba(11,125,87,.35); cursor: default;
  outline: none;
}
.topped-badge img { width: 16px; height: 16px; display: block; }
.topped-tip {
  position: absolute; top: calc(100% + .4rem); right: 0; width: 180px;
  background: #0f172a; color: #fff; font-size: .72rem; line-height: 1.3;
  font-weight: 500; padding: .45rem .6rem; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,.25);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.topped-badge:hover .topped-tip,
.topped-badge:focus-visible .topped-tip {
  opacity: 1; transform: translateY(0);
}

/* "Ukázka" pill (top-left) — flags seeded demo listings that aren't really for
   rent. Hover/focus reveals a tooltip explaining they're just a preview. */
.demo-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 3;
  display: inline-flex; align-items: center;
  padding: .2rem .55rem; border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(185,28,28,.35); cursor: default;
  outline: none;
}
.demo-tip {
  position: absolute; top: calc(100% + .4rem); left: 0; width: 200px;
  background: #0f172a; color: #fff; font-size: .72rem; line-height: 1.3;
  font-weight: 500; padding: .45rem .6rem; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,.25);
  text-transform: none; letter-spacing: normal;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.demo-badge:hover .demo-tip,
.demo-badge:focus-visible .demo-tip {
  opacity: 1; transform: translateY(0);
}
/* In-flow variant — sits next to the name in the profile header instead of
   overlaying a card; the tooltip stays anchored to the pill itself. */
.demo-badge--inline {
  position: relative; top: auto; left: auto;
  vertical-align: middle; margin-left: .35rem;
}
.demo-badge--inline .demo-tip { width: 220px; }
.product--founding .product-media { position: relative; }
.product--founding .product-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%); transition: none;
}
.product--founding:hover .product-media::after {
  animation: founding-shine .85s ease-out;
}
@keyframes founding-shine {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .product--founding .product-media::after { display: none; }
}

/* ---- Badges ---------------------------------------------------------------*/
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
}
.badge::before { content: "✓"; }

/* ---- Bank iD logo & verify CTA --------------------------------------------*/
/* Renders /static/bankid-logo.svg (official asset). Until it's added, the
   alt text "Bank iD" shows, so nothing looks broken. */
.bankid-logo { height: 16px; width: auto; vertical-align: middle; display: inline-block; }
.bankid-logo--card { height: 26px; }
.bankid-logo--btn { height: 18px; }

.badge-bankid { background: #fff; border: 1px solid var(--line); color: var(--ink); gap: .3rem; }
.badge-bankid::before { content: none; }

/* Generic verified badge (verify.png) next to user names. */
.verified-badge { height: 16px; width: 16px; vertical-align: middle; display: inline-block; flex: none; }
.verified-badge--lg { height: 20px; width: 20px; }

/* "Zakládající člen" founding-member badge — warm amber pill, status signal. */
.founding-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  align-self: flex-start; width: auto; max-width: 100%; flex: none;
  font-size: .74rem; font-weight: 600; line-height: 1;
  padding: .22rem .55rem; border-radius: 6px;
  color: #92600a; background: #fdf6e7;
  border: 1px solid #ecd9a8; white-space: nowrap;
}
.founding-badge svg { width: 14px; height: 14px; flex: none; }
.founding-badge--sm { font-size: .68rem; padding: .16rem .45rem; }
.founding-badge--sm svg { width: 12px; height: 12px; }
.profile-founding { margin: .15rem 0 0; }

/* "Půjčovna" badge for business accounts — orange, matching their cards */
.pujcovna-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  align-self: flex-start; width: auto; max-width: 100%; flex: none;
  font-size: .74rem; font-weight: 600; line-height: 1;
  padding: .22rem .55rem; border-radius: 6px;
  color: #c2410c; background: #fff7ed;
  border: 1px solid #fed7aa; white-space: nowrap;
}
.pujcovna-badge img { width: 14px; height: 14px; flex: none; object-fit: contain; }

/* partner shop cards get an orange accent so they read as "pro", not p2p */
.product--business {
  border: 1px solid #fed7aa;
  background: linear-gradient(180deg, #fffbf7 0%, var(--surface) 45%);
}
.product--business .product-owner span { color: #c2410c; }

/* partner "stories" row under the category chips */
.partner-stories {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: .9rem 0 .3rem; padding: .2rem .1rem .4rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.story {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  flex: none; width: 76px; text-decoration: none;
}
.story-ring {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  padding: 3px; transition: transform .15s ease;
}
.story:hover .story-ring { transform: scale(1.05); }
.story-ring .story-avatar {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--surface); object-fit: cover;
}
.story-name {
  font-size: .68rem; font-weight: 600; color: var(--ink);
  max-width: 76px; text-align: center; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story.is-active .story-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #ea580c; }
.story.is-active .story-name { color: #c2410c; }

/* browse page header — two-tone title + count pill */
.browse-head { align-items: center; gap: 1rem; }
.browse-title {
  margin: 0; line-height: 1.35; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .1rem;
}
/* two staggered lines: neighbors left, partner shops right */
.browse-line { display: block; }
.browse-line--right { align-self: flex-end; text-align: right; }
.grad-brand {
  background: linear-gradient(92deg, var(--brand-dark), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-partner {
  background: linear-gradient(92deg, #c2410c, #fb923c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* listing count as a small stat — big counting numeral, quiet label */
.count-stat {
  flex: none; align-self: center;
  display: flex; flex-direction: column; align-items: center;
  padding-left: 1.2rem; border-left: 2px solid var(--brand-soft);
  line-height: 1;
}
.count-num {
  font-family: var(--font-display); font-weight: 700; font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(92deg, var(--brand-dark), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.count-label {
  margin-top: .3rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
/* small screens: stagger needs width — plain stacked title, ellipses off,
   count becomes one compact "6 nabídek" row under the title */
@media (max-width: 700px) {
  .browse-head { flex-wrap: wrap; row-gap: .5rem; }
  .browse-title { flex: 1 1 100%; font-size: 1.2rem; }
  .browse-line--right { align-self: flex-start; text-align: left; }
  .browse-ellip { display: none; }
  .count-stat {
    flex-direction: row; align-items: baseline; gap: .45rem;
    padding-left: 0; border-left: 0;
  }
  .count-num { font-size: 1.35rem; }
  .count-label { margin-top: 0; }
}

/* partners toggle — same pill as "V mém okolí", orange when on */
.partners-toggle {
  position: relative; /* anchors the hidden checkbox — without it the input
                         spans the page and forces horizontal overflow */
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 600;
  padding: .62rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); white-space: nowrap; transition: all .15s ease;
}
.partners-toggle input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.partners-toggle img { width: 16px; height: 16px; object-fit: contain; }
.partners-toggle:hover { border-color: #ea580c; color: #c2410c; }
.partners-toggle.is-active { background: #fff7ed; border-color: #ea580c; color: #c2410c; }

/* orange banner under the photo on partner cards — replaces the inline badge,
   which was too long next to the owner name */
.product-partner-strip {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .32rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: linear-gradient(90deg, #fb923c, #ea580c);
}
/* the png is black line-art — flip it white for the orange strip */
.product-partner-strip img {
  width: 14px; height: 14px; object-fit: contain;
  filter: brightness(0) invert(1);
}

/* partner bubbles on the free side of timeline step 1 */
.tl-side {
  grid-column: 3; grid-row: 1;
  align-self: end; margin-bottom: -10rem; /* sit lower, level with the step node */
  opacity: 0; transform: translateX(-22px);
  transition: opacity .5s ease .15s, transform .5s ease .15s;
}
.tl-item:nth-child(even) .tl-side { grid-column: 1; transform: translateX(22px); }
.tl-item.is-on .tl-side { opacity: 1; transform: none; }
.tl-side-title {
  display: block; font-size: .85rem; font-weight: 700; color: #c2410c;
  margin-bottom: .5rem;
}
/* wrap instead of horizontal scroll — the timeline column is narrow */
.partner-stories--tl { margin: 0; gap: .8rem; flex-wrap: wrap; overflow: visible; }
.partner-stories--tl .story { width: 64px; }
.partner-stories--tl .story-ring { width: 52px; height: 52px; }
.partner-stories--tl .story-name { font-size: .62rem; max-width: 64px; }

/* the lower the viewport width, the taller the step card — ease the hang off */
@media (max-width: 1100px) {
  .tl-side { margin-bottom: -6rem; }
}
@media (max-width: 980px) {
  .tl-side { margin-bottom: -2.5rem; }
  .partner-stories--tl .story { width: 56px; }
  .partner-stories--tl .story-ring { width: 46px; height: 46px; }
}

/* "jsem půjčovna" box on the account form */
.business-box {
  margin: .9rem 0; padding: .85rem 1rem;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: #fafdfb;
}
.business-box .checkbox { font-weight: 600; }
#business-fields { margin-top: .6rem; }

/* Founding-program promo — classic modal, centered near the top of the page. */
.founding-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem; background: rgba(16, 24, 40, .45);
  opacity: 0; transition: opacity .25s ease;
}
/* Keep the HTML `hidden` attribute authoritative — an author `display` rule
   otherwise beats the UA [hidden] rule and leaves an invisible click-trap. */
.founding-modal-overlay[hidden] { display: none; }
.founding-modal-overlay.is-in { opacity: 1; }
.founding-modal {
  position: relative; width: min(440px, 100%);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.6rem 1.4rem;
  transform: translateY(-14px); transition: transform .25s ease;
}
.founding-modal-overlay.is-in .founding-modal { transform: translateY(0); }
.founding-modal h3 { margin: .7rem 0 .4rem; font-size: 1.2rem; }
.founding-modal p { margin: 0 0 1.1rem; color: var(--muted); line-height: 1.5; }
.founding-modal-close {
  position: absolute; top: .5rem; right: .7rem; border: 0; background: none;
  font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.founding-modal-link {
  display: block; text-align: center; margin-top: .6rem;
  font-size: .85rem; font-weight: 600; color: var(--brand-dark);
}

/* Light button so the official (preferred, dark-on-light) logo renders unaltered. */
.btn-bankid {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-sm);
  padding: .7rem 1.2rem; font-weight: 600; cursor: pointer;
}
.btn-bankid:hover { background: #f2f2f2; color: var(--ink); }
a.btn-bankid { text-decoration: none; }

/* ---- Listing detail -------------------------------------------------------*/
.detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
.detail-titlebar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-top: 1.4rem;
}
.detail-titlebar h2 { margin-bottom: .3rem; }
.share-row { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding-top: .3rem; }
.share-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--muted); cursor: pointer; font: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
.share-btn:hover { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-soft); }
.share-btn .ico-svg svg { width: 18px; height: 18px; }
.share-copied { font-size: .78rem; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }

/* ---- Demand capture ("poptávka") on empty browse results ------------------*/
.demand-panel { max-width: 720px; margin-inline: auto; text-align: center; }
.demand-title { margin-bottom: .25rem; }
.demand-sub { max-width: 46ch; margin: 0 auto 1.2rem; }
.demand-form {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: .7rem;
  align-items: end; text-align: left;
}
.demand-form .field { margin: 0; }
.demand-form input { margin-top: .3rem; }
.demand-form .btn { height: 42px; white-space: nowrap; }
.demand-alt { margin: 1.1rem 0 0; font-size: .9rem; }
.demand-done { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem 0; }
.demand-check {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .4rem;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark);
}
.demand-check .ico-svg svg { width: 26px; height: 26px; }
.demand-done .btn { margin-top: .8rem; }
@media (max-width: 760px) {
  .demand-form { grid-template-columns: 1fr; }
  .detail-titlebar { flex-direction: column; gap: .4rem; }
}

/* ---- Pre-launch waitlist band (landing, 06) -------------------------------*/
.waitlist-section {
  position: relative; overflow: hidden; text-align: center;
  margin-top: 4.5rem;
  /* anchor jumps stop short of the section so it lands with air below the
     sticky header instead of being clipped by it */
  scroll-margin-top: 110px;
  background:
    radial-gradient(44rem 28rem at 22% -20%, rgba(16,185,129,.35), transparent 60%),
    radial-gradient(36rem 22rem at -10% 120%, rgba(5,150,105,.28), transparent 56%),
    radial-gradient(42rem 30rem at 108% 60%, rgba(234,88,12,.30), transparent 62%),
    radial-gradient(30rem 20rem at 80% -15%, rgba(251,146,60,.16), transparent 60%),
    linear-gradient(160deg, #273b31, #1a2b22 70%);
  color: #fff; border: 1px solid var(--dark-line); border-radius: 20px;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  box-shadow: 0 32px 64px -32px rgba(7, 20, 15, .55);
}
.waitlist-inner { max-width: 560px; margin-inline: auto; }

/* two halves: people (green) | rental shops (orange), split by a slightly
   slanted hairline */
.waitlist-split {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
}
.waitlist-split::before {
  content: ""; position: absolute; left: 50%; top: -12%; bottom: -12%;
  width: 1px; transform: rotate(5deg);
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
}
.waitlist-half { max-width: 520px; margin-inline: auto; }
.eyebrow--orange { color: #fb923c; }
.btn-partner {
  display: inline-flex; align-items: center; margin-top: 1.4rem; height: 46px;
  padding: 0 1.4rem; font-weight: 700; color: #fff; border: none;
  background: linear-gradient(92deg, #ea580c, #fb923c);
  box-shadow: 0 10px 24px -12px rgba(234,88,12,.65);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-partner:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 16px 30px -12px rgba(234,88,12,.75);
}
@media (max-width: 760px) {
  /* halves stack — the slant becomes a plain hairline above the partner half */
  .waitlist-split { grid-template-columns: 1fr; gap: 2rem; }
  .waitlist-split::before { display: none; }
  .waitlist-half--partner { padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.16); }
}

/* partner lead form — card with an orange top accent, two fields per row */
.partner-form {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem;
  margin-top: 1.1rem; padding: 1.6rem 1.7rem 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
}
.partner-form::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #ea580c, #fb923c 55%, #fdba74);
}
.partner-form .field { margin: 0; }
.partner-form .field--full { grid-column: 1 / -1; }
.partner-form input, .partner-form textarea { margin: 0; }
.partner-form input:focus, .partner-form textarea:focus {
  border-color: #ea580c; box-shadow: 0 0 0 3px #ffedd5; outline: none;
}
.partner-form-foot {
  grid-column: 1 / -1; display: flex; justify-content: flex-end;
  margin-top: .2rem;
}
@media (max-width: 640px) {
  .partner-form { grid-template-columns: 1fr; padding: 1.2rem 1.1rem; }
}
.eyebrow--dark { color: var(--brand); }
.waitlist-section h2 { color: #fff; }
.waitlist-section p { color: rgba(255,255,255,.82); }
.waitlist-form {
  display: flex; gap: .6rem; justify-content: center;
  margin-top: 1.4rem; flex-wrap: wrap;
}
.waitlist-form input[type="email"] {
  width: min(320px, 100%); margin: 0; height: 46px;
  background: rgba(255,255,255,.96); border-color: transparent;
}
.waitlist-form .btn-cta { height: 46px; }
.waitlist-err { margin-top: .8rem; color: #fca5a5; font-size: .9rem; }
/* phones: tighter band, stacked full-width form instead of a wrapped row */
@media (max-width: 640px) {
  .waitlist-section { margin-top: 3rem; padding: 1.7rem 1.1rem 2rem; border-radius: 16px; }
  .waitlist-section h2 { font-size: 1.4rem; }
  .waitlist-section p { font-size: .95rem; }
  .waitlist-form { flex-direction: column; align-items: stretch; gap: .55rem; margin-top: 1.1rem; }
  .waitlist-form input[type="email"] { width: 100%; text-align: center; }
  .waitlist-form .btn-cta { width: 100%; }
  .waitlist-note { font-size: .78rem; margin-top: .8rem; }
}
.waitlist-note { margin-top: 1rem; font-size: .82rem; color: rgba(255,255,255,.55); }
.waitlist-done { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.waitlist-done .demand-check { background: rgba(16,185,129,.2); color: #6ee7b7; }
.detail-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.detail-media img { width: 100%; max-height: 440px; object-fit: cover; display: block; }
.detail-media .ph { aspect-ratio: 4/3; display: grid; place-items: center; color: var(--muted); }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.gallery-thumb {
  padding: 0; border: 2px solid transparent; border-radius: calc(var(--radius) - 4px);
  overflow: hidden; cursor: pointer; background: #fff; width: 76px; height: 76px;
  transition: border-color .15s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.is-active { border-color: var(--brand); }
.photo-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.photo-preview-thumb {
  width: 84px; height: 84px; object-fit: cover; border-radius: .5rem;
  border: 2px solid transparent;
}
.photo-preview-thumb.is-cover { border-color: var(--brand); }
.listing-dates {
  display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center;
  color: var(--muted); font-size: .82rem; margin: -.4rem 0 1rem;
}
.listing-dates .ico-svg { width: 14px; height: 14px; vertical-align: -.15em; }
.spec { list-style: none; padding: 0; margin: 1rem 0; }
.spec li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.spec li:last-child { border-bottom: none; }
.spec .k { color: var(--muted); }
.spec .v { font-weight: 600; }
.book-panel { position: sticky; top: 88px; }
/* premium frame — gradient hairline border + deep layered shadow */
.book-panel > .panel:first-child {
  padding: 1.5rem; border: 1px solid transparent; border-radius: 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(168deg, rgba(16,185,129,.55), rgba(16,185,129,.12) 38%, rgba(15,23,42,.12)) border-box;
  box-shadow: 0 24px 48px -24px rgba(15,23,42,.2), 0 2px 8px rgba(15,23,42,.05);
}
.book-head {
  display: flex; flex-direction: column; gap: .15rem;
  padding-bottom: .95rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.book-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted);
}
.book-price {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--price); line-height: 1.1;
}
.book-price small { font-size: .95rem; font-weight: 500; color: var(--muted); }
.book-trust {
  list-style: none; display: flex; justify-content: space-between; gap: .4rem;
  margin: 1rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--line);
}
.book-trust li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.book-trust .ico-svg { color: var(--brand); }
.book-trust .ico-svg svg { width: 15px; height: 15px; }
.contact-panel { margin-top: 1.25rem; padding: 1.25rem; }
.contact-panel h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.contact-panel p { margin: 0 0 .8rem; font-size: .9rem; }
.contact-panel textarea { margin: 0 0 .7rem; }

/* ---- Quote table ----------------------------------------------------------*/
table.quote { width: 100%; border-collapse: collapse; margin: 1rem 0; }
table.quote td { padding: .4rem 0; }
table.quote td:last-child { text-align: right; font-weight: 600; }
table.quote .total td { border-top: 2px solid var(--line); padding-top: .6rem; font-size: 1.1rem; }
table.quote .total td:last-child { color: var(--price); font-weight: 800; }

/* ---- Dashboard ------------------------------------------------------------*/
.dash-grid { display: grid; gap: 1.5rem; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: none; }
.review-form { display: inline-flex; gap: .6rem; align-items: center; }
.review-form button { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Interactive star rating — clickable, no JS. Radios are in 5→1 DOM order and
   visually reversed so :hover/:checked can light the chosen star and all to its
   left via the sibling combinator. */
.star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: 2px; border: 0; padding: 0; margin: 0; }
.star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-rating label { font-size: 1.45rem; line-height: 1; color: var(--line); cursor: pointer;
  transition: color .12s ease, transform .12s ease; }
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #ffb400; }
.star-rating label:hover { transform: scale(1.12); }
.star-rating input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px;
  border-radius: 4px; }
.status { display: inline-block; min-width: 92px; text-align: center; font-size: .75rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .15rem .5rem; border-radius: 6px; background: var(--bg); color: var(--muted); }
.status--confirmed, .status--active {
  background: var(--brand-soft); color: var(--brand-dark); }
.status--pending { background: #fdf6e7; color: #92600a; }
.status--reserved { background: #e8eefc; color: #2c5cc5; }
.status--completed { background: #eef1f4; color: #475569; }
.status--cancelled, .status--canceled { background: #fdeceb; color: #b91c1c; }
.review-done { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem;
  font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.review-done .ico-svg svg { width: 16px; height: 16px; }
.chat-chip { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem;
  font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; white-space: nowrap; }
.chat-chip:hover { background: var(--brand); color: #fff; }
.chat-chip .ico-svg { width: 14px; height: 14px; }
.chat-chip-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 .25rem; border-radius: 9px;
  background: var(--price); color: #fff; font-size: .68rem; font-weight: 700; }

table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
table.data td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: none; }
.stack { display: grid; gap: 1.5rem; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ---- Account / profile edit -----------------------------------------------*/
.account-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
.account-avatar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.account-avatar label { margin: 0; }
.account-avatar-fields { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.account-avatar-fields label.checkbox { display: flex; flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; }
.account-avatar-fields label.checkbox input { width: auto; }
.profile-bio { margin-top: .7rem; max-width: 52ch; white-space: pre-line; }
@media (max-width: 760px) { .account-grid { grid-template-columns: 1fr; } }

/* ---- Referral / "Pozvi souseda" -------------------------------------------*/
.referral-panel {
  margin-top: 2rem;
  padding: 2.2rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem 2.5rem;
  align-items: center;
  background:
    radial-gradient(110% 160% at 100% 0%, var(--brand-soft) 0%, transparent 55%),
    var(--surface);
}
.referral-head { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.referral-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.referral-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-dark);
}
.referral-ico .ico-svg svg { width: 20px; height: 20px; }
.referral-lead { margin: .7rem 0 0; color: var(--muted); max-width: 50ch; }
.referral-lead strong { color: var(--brand-dark); }
.referral-stat {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 1rem 0 0; padding: .4rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; color: var(--ink); box-shadow: var(--shadow);
}
.referral-stat .ico-svg { color: var(--brand); }
.referral-stat .ico-svg svg { width: 16px; height: 16px; }
.referral-stat strong { font-size: 1.05rem; }
.referral-tip {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1rem 0 0; font-size: .84rem; color: var(--muted); max-width: 52ch;
}
.referral-tip .ico-svg { color: var(--brand); flex: none; margin-top: .1rem; }
.referral-tip .ico-svg svg { width: 15px; height: 15px; }
.referral-tip strong { color: var(--brand-dark); }
.referral-card {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 1.5rem 1.4rem 1.3rem; text-align: center;
  background: var(--surface);
  border: 2px dashed var(--brand);
  border-radius: var(--radius);
  transition: box-shadow .2s ease, transform .2s ease;
}
.referral-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.referral-card-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--brand-dark);
}
.referral-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.8rem; font-weight: 700; color: var(--ink);
  letter-spacing: .22em; margin-right: -.22em; /* re-center: tracking pads the right edge */
}
.referral-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) {
  .referral-panel { grid-template-columns: 1fr; padding: 1.7rem 1.3rem 1.5rem; }
}

/* ---- Pricing tiers --------------------------------------------------------*/
.tier-presets { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.tier-presets legend { font-weight: 600; padding: 0 .4rem; }
.tier-preset-options { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-bottom: .6rem; }
.tier-preset-options .radio { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.tier-preset-options .radio input { width: auto; }
.tier-rows { display: flex; flex-direction: column; gap: .6rem; }
.tier-row { display: grid; grid-template-columns: 6rem 1fr auto; gap: .6rem; align-items: end; }
.tier-row label { margin: 0; }
.tier-row .tier-del { padding: .35rem .7rem; }
.tier-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; padding: 0; }
.tier-chips li { font-size: .8rem; background: var(--chip-bg, #f1f5f9); border-radius: 999px; padding: .15rem .6rem; color: #334155; }
.tier-chips .tier-chip-days { font-weight: 600; }

/* Listing-detail price list */
.pricing { margin: 1.2rem 0; }
.pricing-title { margin: 0 0 .5rem; font-size: 1.05rem; }
.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table th, .pricing-table td { text-align: left; padding: .55rem .25rem; border-bottom: 1px solid var(--line); }
.pricing-table th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.pricing-table td:nth-child(2), .pricing-table th:nth-child(2),
.pricing-table td:nth-child(3), .pricing-table th:nth-child(3) { text-align: right; white-space: nowrap; }
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-total { font-weight: 700; }
.pricing-perday { color: var(--muted); font-size: .9rem; }
.pricing-save { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 600; color: #0e9f6e; background: rgba(14,159,110,.1); border-radius: 999px; padding: .05rem .4rem; }
.pricing-notes { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.pricing-notes li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }

/* ---- Handover / delivery --------------------------------------------------*/
.handover { margin: 1.6rem 0 2.5rem; }
.handover-title { margin-bottom: .9rem; }
.handover-opt {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.handover-opt + .handover-opt { margin-top: .7rem; }
.handover-opt.is-soon { background: var(--bg); border-style: dashed; }
.handover-ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-dark);
}
.handover-opt.is-soon .handover-ico { background: #eceef1; color: var(--muted); }
.handover-text strong { display: block; }
.handover-text p { margin: .25rem 0 0; color: var(--muted); font-size: .92rem; }
.handover-map {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .55rem; font-size: .9rem; font-weight: 600;
}
.handover-map .ico-svg svg { width: 16px; height: 16px; }
.soon-badge {
  display: inline-block; margin-left: .4rem; padding: .1rem .5rem;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  vertical-align: middle;
}

/* ---- Messaging ------------------------------------------------------------*/
.inbox { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; max-width: 720px; }
.inbox-item {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.inbox-item:hover { border-color: var(--brand); box-shadow: var(--shadow); text-decoration: none; }
.inbox-item.is-unread { border-color: var(--brand); background: var(--brand-soft); }
.inbox-avatar { width: 46px; height: 46px; flex: none; }
.inbox-main { flex: 1; min-width: 0; }
.inbox-top { display: flex; justify-content: space-between; gap: .5rem; }
.inbox-name { font-weight: 700; }
.inbox-time { color: var(--muted); font-size: .82rem; flex: none; }
.inbox-listing { color: var(--brand-dark); font-size: .85rem; font-weight: 600; }
.inbox-snippet {
  color: var(--muted); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-badge {
  flex: none; min-width: 22px; height: 22px; padding: 0 .4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--price); color: #fff; font-size: .78rem; font-weight: 700;
}
/* Subtle pulse so a fresh unread count catches the eye without nagging. */
.inbox-badge, .chat-chip-badge { animation: unread-pulse 2.4s ease-in-out infinite; }
@keyframes unread-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(234, 88, 12, .18); }
}
@media (prefers-reduced-motion: reduce) {
  .inbox-badge, .chat-chip-badge, .nav-bell-badge, .btn-spinner { animation: none; }
}

/* ---- Notifications page ----------------------------------------------------*/
.notif-list { list-style: none; display: grid; gap: .8rem; margin: 1.2rem 0 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.notif-item { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--line); }
.notif-item.is-unread { border-color: var(--brand); border-left-color: var(--brand);
  background: var(--brand-soft); }
.notif-top { display: flex; flex-direction: column; gap: .1rem; }
.notif-title { font-weight: 700; line-height: 1.3; }
.notif-time { font-size: .76rem; color: var(--muted); }
.notif-body { margin: 0; color: var(--ink); white-space: pre-line; }
.notif-link { display: inline-block; margin-top: .5rem; font-weight: 600; color: var(--brand-dark); }

.chat { max-width: 960px; margin: 0 auto; }
.chat-back { display: inline-block; margin-bottom: .8rem; }
.chat-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; align-items: start; }
.chat-aside { display: grid; gap: 1rem; position: sticky; top: 88px; }
.clc { padding: 0; overflow: hidden; }
.clc-media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg); }
.clc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clc-body { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.clc-title { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
.clc-title:hover { color: var(--brand-dark); }
.clc-meta { font-size: .82rem; color: var(--muted); }
.clc-price { font-size: 1.2rem; font-weight: 800; color: var(--price); margin: .15rem 0 .6rem; }
.clc-price small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.clc-person { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem;
  color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.clc-person:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.clc-person-avatar { width: 42px; height: 42px; flex: none; }
.clc-person-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.clc-person-name { font-weight: 600; }
.clc-person .muted { font-size: .8rem; }
@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-aside { position: static; order: -1; }
}
.chat-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line); background: var(--brand-soft); }
.chat-avatar { width: 46px; height: 46px; flex: none; }
.chat-head-info { display: flex; flex-direction: column; min-width: 0; gap: .15rem; }
.chat-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.chat-listing { font-size: .85rem; color: var(--brand-dark); font-weight: 600; }
.chat-body {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.3rem 1.2rem; background: var(--bg);
  min-height: 220px; max-height: 56vh; overflow-y: auto;
}
.bubble-row { display: flex; margin-top: .35rem; }
.bubble-row:first-child { margin-top: 0; }
.bubble-row.is-me { justify-content: flex-end; }
.bubble {
  max-width: 76%; padding: .6rem .85rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,24,31,.05);
}
.bubble-row.is-them .bubble { border-bottom-left-radius: 5px; }
.bubble-row.is-me .bubble { background: var(--brand); border-color: var(--brand);
  color: #fff; border-bottom-right-radius: 5px; }
.bubble p { margin: 0; white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
.bubble-time { display: block; margin-top: .3rem; font-size: .7rem; color: var(--muted); }
.bubble-row.is-me .bubble-time { color: rgba(255,255,255,.8); text-align: right; }
.chat-reply { display: flex; gap: .6rem; align-items: flex-end; padding: .9rem 1.2rem;
  border-top: 1px solid var(--line); background: var(--surface); }
.chat-reply textarea { flex: 1; resize: none; margin: 0; min-height: 44px; }
.chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: .92rem; }

/* ---- Auth -----------------------------------------------------------------*/
.auth { max-width: 420px; margin: 1rem auto; }
.auth .panel { padding: 2rem; }
.auth-hint { margin: .55rem 0 0; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0; color: var(--muted); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { font-size: .82rem; }

/* ---- Footer (dark tech surface, mirrors the hero) -------------------------*/
.site-footer {
  border-top: 1px solid var(--dark-line);
  background:
    radial-gradient(48rem 26rem at 92% 0%, rgba(16,185,129,.12), transparent 60%),
    #1d2925;
  color: #a3b2ac; padding: 2.8rem 0 1.4rem; margin-top: 3.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand .brand { display: inline-flex; }
.site-footer .brand-name .bn-1 { color: var(--dark-text); }
.site-footer .brand-name .bn-2 { color: var(--accent); }
.site-footer .brand-name .bn-3 { color: var(--dark-muted); }
.footer-tagline { color: #a3b2ac; font-size: .9rem; margin: .85rem 0 1.1rem; max-width: 34ch; }
.footer-social { display: flex; gap: .55rem; }
.footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.04); color: var(--dark-muted);
  border: 1px solid var(--dark-line); transition: color .15s, border-color .15s;
}
.footer-social a:hover { color: var(--accent); border-color: rgba(16,185,129,.5); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col { display: flex; flex-direction: column; gap: .58rem; }
.footer-col h5 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dark-text); margin: 0 0 .7rem;
}
.footer-col a { color: #a3b2ac; font-size: .92rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.2rem; margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--dark-line); color: #93a39c; font-size: .85rem;
}
.footer-badges { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.footer-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: #a3b2ac; }
.site-footer .bankid-logo { filter: brightness(0) invert(1); opacity: .85; }
.pay {
  display: inline-grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: #555;
}
a.pay { transition: opacity .15s; }
a.pay:hover { opacity: .7; }
/* dark footer: monochrome white payment logos (color marks vanish on dark) */
.site-footer .pay img { filter: brightness(0) invert(1); opacity: .8; }
.pay img { height: 29px; width: auto; display: block; }
.pay img[alt="GoPay"] { height: 63px; }
.pay img[alt="Google Pay"] { height: 69px; }
.footer-badges .pay:has(img[alt="Apple Pay"]) { margin-left: 1rem; }
.footer-badge .bankid-logo { height: 21px; }
.footer-badge .ico-svg svg { width: 21px; height: 21px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
@media (max-width: 640px) {
  /* the mixed-height logo row never aligns nicely on narrow screens */
  .footer-badges { display: none; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Cookie consent bar ---------------------------------------------------*/
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1rem 0;
}
.cookie-bar-text { margin: 0; color: var(--muted); font-size: .9rem; max-width: 60ch; }
.cookie-bar-text a { color: var(--brand-dark); font-weight: 600; }
.cookie-bar-actions { display: flex; gap: .6rem; flex-shrink: 0; }
@media (max-width: 560px) {
  .cookie-bar-actions { width: 100%; }
  .cookie-bar-actions .btn { flex: 1; }
}

/* ---- Legal / policy pages -------------------------------------------------*/
.legal { max-width: 760px; margin: 0 auto; }
/* Markdown-rendered legal docs (legal_doc.html) — bare h1/h2/p/ul/table output */
.legal-md h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: .3rem 0 1.6rem; }
.legal-md h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.legal-md p, .legal-md li { color: var(--ink); line-height: 1.65; }
.legal-md ul, .legal-md ol { padding-left: 1.3rem; }
.legal-md table {
  width: 100%; border-collapse: collapse; margin: .6rem 0 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; font-size: .9rem;
}
.legal-md th, .legal-md td {
  text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-md thead th { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.legal-md tbody tr:last-child td { border-bottom: 0; }
.legal-head { margin-bottom: 2rem; }
.legal-head h1 { margin: .5rem 0 .8rem; }
.legal-block { margin-bottom: 2rem; }
.legal-block h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
.legal-block p { color: var(--ink); line-height: 1.65; }
.legal-table {
  width: 100%; border-collapse: collapse; margin-top: .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; font-size: .9rem;
}
.legal-table th, .legal-table td {
  text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table thead th { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table code {
  background: var(--bg); padding: .1rem .35rem; border-radius: 5px;
  font-size: .85em; color: var(--ink);
}
.legal-meta { color: var(--muted); font-size: .82rem; margin-top: 2.5rem; }

/* ---- How it works (steps) -------------------------------------------------*/
/* clip: the pre-reveal translateX on .tl-body must not widen the page */
.steps-section {
  margin-top: 2.8rem; margin-bottom: 3rem; overflow-x: clip;
  scroll-margin-top: 90px; /* anchor jumps land below the sticky header */
}
.timeline {
  list-style: none; margin: 1.6rem auto 0; padding: 0;
  max-width: 760px; position: relative;
}
/* central connector line — height follows scroll position (--draw: 0..1) */
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px;
  width: 2px; transform: translateX(-50%) scaleY(var(--draw, 0)); transform-origin: top;
  background: linear-gradient(var(--brand-soft), var(--brand) 12%, var(--brand) 88%, var(--brand-soft));
  transition: transform .12s linear;
}
.tl-item {
  position: relative; display: grid; grid-template-columns: 1fr 52px 1fr;
  align-items: center; column-gap: 1.4rem; margin-bottom: 1.8rem;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-node {
  grid-column: 2; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark); font-size: 1.4rem;
  box-shadow: 0 0 0 4px var(--bg), var(--shadow);
}
.tl-body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow);
}
.tl-item:nth-child(odd) .tl-body { grid-column: 1; text-align: right; }
.tl-item:nth-child(even) .tl-body { grid-column: 3; text-align: left; }
.tl-step {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-dark); margin-bottom: .15rem;
}
.tl-body h4 { margin-bottom: .3rem; }
.tl-body p { color: var(--muted); margin: 0; }
.tl-body .hl { color: var(--brand-dark); font-weight: 600; }

/* timeline node + card light up as the scroll-linked line passes them */
.tl-node {
  transform: scale(.3); opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.tl-node::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; pointer-events: none;
}
.tl-body { opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.tl-item:nth-child(odd) .tl-body { transform: translateX(22px); }
.tl-item:nth-child(even) .tl-body { transform: translateX(-22px); }
.tl-item.is-on .tl-node {
  opacity: 1;
  animation: tl-pop .45s cubic-bezier(.22, .8, .36, 1) forwards;
}
.tl-item.is-on .tl-node::after { animation: tl-ring .7s ease-out forwards; }
.tl-item.is-on .tl-body { opacity: 1; transform: none; }
@keyframes tl-pop {
  0% { transform: scale(.55); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes tl-ring {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ---- Problem stats --------------------------------------------------------*/
.problem { margin-top: 2.8rem; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 60ch; margin-top: -.4rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.8rem; }
.stat {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.9rem 1.6rem;
  box-shadow: 0 10px 24px -16px rgba(16,24,40,.28);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stat:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 28px 50px -22px rgba(16,24,40,.4);
}
.stat-tag {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dark);
  background: var(--brand-soft); padding: .32rem .6rem; border-radius: 999px;
}
/* recessed "carved" well around the headline figure */
.stat-num {
  display: flex; width: fit-content; margin: 1rem 0 .45rem;
  padding: .7rem 1.15rem;
  background: linear-gradient(180deg, #ecf0ee, #f9fbfa);
  border: 1px solid #e1e7e3; border-radius: 12px;
  box-shadow:
    inset 0 2px 7px rgba(15,23,42,.1),
    inset 0 -1px 0 rgba(255,255,255,.95),
    0 1px 0 rgba(255,255,255,.7);
}
.stat-figure {
  font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--brand-dark), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
.stat-sub {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--muted); margin-bottom: .9rem;
}
.stat h4 { margin-bottom: .35rem; font-size: 1.08rem; }
.stat p { color: var(--muted); margin: 0; font-size: .92rem; line-height: 1.6; }

/* ---- Scroll-reveal --------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: .04s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: .2s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: .28s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: .36s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; }
  .timeline::before { transform: translateX(-50%) scaleY(1); transition: none; }
  .tl-node, .tl-body { opacity: 1; transform: none; transition: none; }
  .tl-item.is-on .tl-node, .tl-item.is-on .tl-node::after { animation: none; }
}

/* ---- FAQ accordion (two-column, clean rows) -------------------------------*/
.faq { margin-top: 3rem; position: relative; }
/* soft veil that mutes the page pattern (radar rings) behind the FAQ only,
   fading out at the edges so there is no visible rectangle. Horizontal bleed
   must stay within the .container gutter (4vw) or the page scrolls sideways. */
.faq::before {
  content: ""; position: absolute; inset: -2.5rem -4vw; z-index: -1;
  pointer-events: none;
  background: radial-gradient(80% 90% at 50% 50%,
    rgba(241, 244, 243, .96) 55%, rgba(241, 244, 243, 0) 100%);
}
.faq-head { margin-bottom: 1.6rem; }
.faq-head h2 { margin-bottom: .55rem; }
.faq-accent { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--brand); }
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem; }
.faq-col { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1.2rem; padding: 1.15rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.faq-item summary:hover .faq-q { color: var(--brand-dark); }
.faq-chevron { color: var(--muted); flex: none; transition: transform .2s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--brand-dark); }
.faq-item > p { margin: 0; padding: 0 2.4rem 1.2rem 0; color: var(--muted); font-size: .95rem; }

/* ---- Category chips -------------------------------------------------------*/
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.chip {
  display: inline-block; padding: .4rem .85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: .88rem; font-weight: 500;
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

/* ---- Flash banner ---------------------------------------------------------*/
.flash {
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid #bfe6d4; border-radius: var(--radius-sm);
  padding: .8rem 1.1rem; margin-bottom: 1.4rem; font-weight: 600;
}
.flash--warn { background: #fdf6e7; color: #92600a; border-color: #ecd9a8; }
.flash .ico-svg { vertical-align: -.18em; margin-right: .25rem; }

/* ALTCHA proof-of-work widget on the register form */
altcha-widget {
  display: block; margin: 0 0 1.1rem;
  --altcha-border-radius: 8px;
  --altcha-color-border: var(--line);
  --altcha-max-width: 100%;
}

/* Honeypot field — visually gone, still in the DOM for bots to fill. */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

/* ---- Admin moderation queue ------------------------------------------------*/
.mod-list { display: grid; gap: 1rem; }
.mod-item { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem; }
.mod-media { flex: none; width: 132px; aspect-ratio: 4/3; border-radius: 10px;
  overflow: hidden; background: var(--bg); }
.mod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.mod-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.mod-title:hover { color: var(--brand-dark); text-decoration: none; }
.mod-owner { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; }
.mod-desc { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; }
.mod-actions { flex: none; display: flex; flex-direction: column; gap: .5rem; }
.mod-actions form { margin: 0; }
.mod-actions .btn { width: 100%; }
@media (max-width: 700px) {
  .mod-item { flex-direction: column; }
  .mod-media { width: 100%; }
  .mod-actions { flex-direction: row; width: 100%; }
}
.admin-actions { display: flex; gap: .5rem; }
.admin-actions form { margin: 0; }

/* ---- Booking confirmation -------------------------------------------------*/
.confirm { max-width: 720px; margin-inline: auto; }
.confirm-hero { text-align: center; margin-bottom: 2rem; }
.confirm-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 2rem; margin-bottom: .8rem;
}
.confirm-check--wait { background: #2c5cc5; }
.confirm-check--wait .ico-svg svg { width: 32px; height: 32px; }
.pay-deadline { display: flex; align-items: center; gap: .4rem; margin: 0 0 1rem;
  font-size: .9rem; font-weight: 600; color: #2c5cc5; }
.pay-deadline.is-error { color: #c0392b; }
.pay-deadline .ico-svg svg { width: 16px; height: 16px; }
.confirm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.confirm-step { text-align: center; }
.confirm-step .ico {
  display: inline-flex; width: 52px; height: 52px; margin-bottom: .6rem;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 1.5rem;
}
.confirm-step h4 { margin-bottom: .3rem; }
.confirm-step p { color: var(--muted); font-size: .92rem; margin: 0; }
.confirm-actions { display: flex; gap: .8rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }

/* ---- Avatars & stars ------------------------------------------------------*/
.avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--avatar-bg, var(--brand)); color: #fff;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; user-select: none;
}
.avatar--img { object-fit: cover; background: var(--line); }
.avatar--sm { width: 1.6rem; height: 1.6rem; font-size: .68rem; }
.avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }

.product-owner {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muted); font-size: .85rem; font-weight: 500;
}
.product-owner:hover span { color: var(--brand-dark); }

.stars { display: inline-flex; gap: 1px; color: var(--line); font-size: 1rem; line-height: 1; }
.stars .star--on { color: #ffb400; }
.stars--sm { font-size: .85rem; }

/* ---- Owner card (listing detail) ------------------------------------------*/
.owner-card {
  display: flex; align-items: center; gap: .85rem; margin-top: 1.25rem;
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.owner-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.owner-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.owner-name { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.owner-rating { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }
.owner-rating-text strong { color: var(--ink); }
.owner-cta { flex: none; color: var(--brand-dark); font-weight: 600; font-size: .9rem; }

/* ---- Profile page ---------------------------------------------------------*/
.profile-head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2rem; }
.profile-head-info { min-width: 0; }
.profile-head-info h2 { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.profile-rating { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.profile-rating strong { color: var(--ink); }
.profile-trust { display: inline-flex; align-items: center; gap: .45rem; margin: .6rem 0 0; font-size: .9rem; }
.profile-trust .verified-badge { height: 15px; width: 15px; }

.reviews { display: flex; flex-direction: column; gap: 1rem; }
.review-item {
  display: flex; gap: .85rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.review-body { flex: 1; min-width: 0; }
.review-head { display: flex; align-items: center; gap: .6rem; }
.review-author { font-weight: 600; }
.review-body p { margin: .4rem 0 0; color: var(--muted); }

.detail-reviews { margin-top: 1.75rem; }
.detail-reviews h3 { margin-bottom: .9rem; }

/* ---- Availability (booking form) ------------------------------------------*/
/* ---- Availability calendar picker ----------------------------------------*/
.cal {
  margin-bottom: .6rem; padding: .85rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #fbfcfc, #fff);
  box-shadow: inset 0 1px 3px rgba(15,23,42,.04);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal-title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.cal-nav {
  width: 30px; height: 30px; padding: 0; flex: none; line-height: 1;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink); font-size: 1.1rem; cursor: pointer;
}
.cal-nav:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays {
  gap: 2px; margin-bottom: 4px;
  font-size: .72rem; font-weight: 600; color: var(--muted); text-align: center;
}
.cal-grid { gap: 2px; }
.cal-cell {
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink);
  font: inherit; font-size: .9rem; border-radius: 8px; cursor: pointer;
}
.cal-cell--empty { visibility: hidden; }
.cal-cell:hover:not(:disabled) { background: var(--brand-soft); }
.cal-cell:disabled { cursor: default; }
.cal-cell.is-past { color: #c2c6cd; }
.cal-cell.is-booked { color: #c0392b; text-decoration: line-through; background: #fbeae8; }
.cal-cell.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--line); }
.cal-cell.is-range { background: var(--brand-soft); border-radius: 0; }
.cal-cell.is-start, .cal-cell.is-end {
  background: var(--brand); color: #fff; font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(5,150,105,.6);
}
.cal-cell.is-start { border-radius: 8px 0 0 8px; }
.cal-cell.is-end { border-radius: 0 8px 8px 0; }
.cal-cell.is-start.is-end { border-radius: 8px; }
.cal-legend {
  display: flex; gap: 1rem; margin-top: .6rem; padding-top: .55rem;
  border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-dot--sel { background: var(--brand); }
.cal-dot--booked { background: #e08a80; }
.cal-summary { font-size: .88rem; margin: 0 0 .9rem; }

/* ---- Responsive -----------------------------------------------------------*/
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  /* shallower wave on phones so the trust row clears the curve */
  .hero {
    -webkit-mask-size: 100% calc(100% - 54px), 100% 55px;
    mask-size: 100% calc(100% - 54px), 100% 55px;
    padding-bottom: 5.5rem;
  }
  /* phones: plain flat conveyor under the hero, no wave overlap */
  .ticker { margin-top: -.6rem; }
  .hero-media { display: none; }
  .stats { grid-template-columns: 1fr; }
  .faq-cols { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { left: 26px; }
  .tl-item { grid-template-columns: 52px 1fr; column-gap: 1.2rem; }
  .tl-node { grid-column: 1; }
  .tl-item:nth-child(odd) .tl-body,
  .tl-item:nth-child(even) .tl-body { grid-column: 2; text-align: left; }
  /* partner bubbles drop below the step card on mobile */
  .tl-item:nth-child(odd) .tl-side,
  .tl-item:nth-child(even) .tl-side {
    grid-column: 2; grid-row: 2; align-self: start; margin: .7rem 0 0;
    transform: translateY(10px);
  }
  .tl-item.is-on .tl-side { transform: none; }
  .confirm-grid { grid-template-columns: 1fr; }
  .header-search { display: none; }
  .detail { grid-template-columns: 1fr; }
  .book-panel { position: static; }
  .field { flex-basis: 140px; }
}
@media (max-width: 640px) {
  /* inline nav links collapse into the hamburger menu; the bell stays */
  .header-nav a { display: none; }
  .header-nav { gap: .6rem; }
  .nav-burger { display: flex; }
  .nav-plus { display: inline-flex; }
  .header-inner { gap: .8rem; }
}
@media (max-width: 700px) {
  /* dashboard booking tables scroll sideways instead of breaking the page */
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data th, table.data td { white-space: nowrap; }
}

/* Browse layout switch — mobile only; desktop always uses the auto-fill grid. */
.layout-toggle { display: none; }
@media (max-width: 640px) {
  .layout-toggle { display: inline-flex; gap: .4rem; margin-bottom: .9rem; }
  .layout-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; cursor: pointer;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--muted);
  }
  .layout-btn.is-active {
    border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft);
  }
  /* compact: two tight columns; secondary info hides so cards stay readable */
  .cards--compact { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .cards--compact .product-body { padding: .6rem .65rem .8rem; gap: .25rem; }
  .cards--compact .product-title { font-size: .9rem; }
  .cards--compact .product-meta { font-size: .74rem; }
  .cards--compact .product-owner,
  .cards--compact .tier-chips,
  .cards--compact .founding-badge { display: none; }
  .cards--compact .product-price .amount { font-size: 1.15rem; }
  .cards--compact .product-price .unit { font-size: .8rem; }
  .cards--compact .btn { font-size: .82rem; padding: .45rem .5rem; margin-top: .4rem; }
  .cards--compact .demo-badge { font-size: .6rem; padding: .14rem .4rem; }
  .cards--compact .topped-badge { width: 24px; height: 24px; }
  .cards--compact .topped-badge img { width: 13px; height: 13px; }
}
@media (max-width: 560px) {
  /* public profile header stacks and centers */
  .profile-head { flex-direction: column; text-align: center; }
  .profile-head-info h2 { justify-content: center; flex-wrap: wrap; }
  .profile-rating { justify-content: center; }
  /* dashboard listing rows wrap instead of squeezing */
  .list-row { flex-wrap: wrap; }
  /* messages inbox: keep snippet readable */
  .inbox-item { padding: .8rem .8rem; }
}
@media (max-width: 520px) {
  .field { flex-basis: 100%; }
  .brand-name { font-size: 1.15rem; }
}

/* ---- Handover protocol (predavaci protokol) -------------------------------*/
/* new booking states: returned = waiting for the owner's check, disputed =
   damage claim filed (payout held) */
.status--returned { background: #e7f4fd; color: #0b6aa2; }
.status--disputed { background: #fdf0e7; color: #b45309; }

/* check-in / check-out form — mobile-first, used standing in a doorway.
   (bare .handover belongs to the listing page's delivery section — keep off it) */
.handover-page { max-width: 560px; margin: 0 auto; }
.handover-head { margin-bottom: 1rem; }
.handover-head h2 { margin-bottom: .25rem; }
.handover-why {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--brand-soft); border: 1px solid #bfe6d4;
  border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: 1.2rem;
}
.handover-why p { margin: 0; font-size: .92rem; }
.handover-why .ico-svg { flex: 0 0 auto; margin-top: .15rem; }
.handover-why .ico-svg svg { width: 22px; height: 22px; color: var(--brand-dark); }
.handover-form { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
/* dashed "drop zone" framing the camera/gallery buttons + previews */
.handover-photo-box {
  border: 1.5px dashed #cbd5e1; border-radius: var(--radius-sm);
  background: var(--bg); padding: 1rem; text-align: center; margin-bottom: 1.1rem;
}
.handover-photo-label { font-weight: 600; display: block; margin-bottom: .7rem; }
.handover-photo-label .muted { font-weight: 400; }
/* "take a photo" / "upload" buttons drive hidden file inputs (nicer than the
   browser's bare "Soubor nevybrán" control, and camera-first on phones) */
.handover-photo-btns { display: flex; gap: .6rem; justify-content: center; }
.handover-photo-btns .btn { flex: 1; max-width: 230px; display: inline-flex;
  align-items: center; justify-content: center; gap: .4rem; padding: .7rem .6rem; }
.handover-photo-btns .ico-svg svg { width: 18px; height: 18px; }
.handover-hint { margin: .6rem 0 0; font-size: .85rem; }
.handover-photo-box .photo-preview { justify-content: center; margin: .6rem 0 0; }
/* tap a thumbnail to remove it again */
.photo-thumb-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.photo-thumb-btn::after {
  content: "×"; position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; line-height: 18px; text-align: center;
  background: var(--ink); color: #fff; border-radius: 50%;
  font-size: .85rem; font-weight: 700;
}
.handover-submit { width: 100%; margin-top: 1rem; padding: .85rem 1rem; font-size: 1rem; }
.handover-legal { margin: .7rem 0 0; font-size: .8rem; text-align: center; }

/* protocol view — photo evidence for both directions */
.protocol { max-width: 760px; margin: 0 auto; }
.protocol-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem; }
.protocol-head h2 { margin-bottom: .25rem; }
.protocol-section { margin-bottom: 1.2rem; }
.protocol-section-head { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.protocol-section-head h3 { margin: 0; }
.protocol-section-head .ico-svg { vertical-align: -.2em; margin-right: .3rem; }
.protocol-stamp { display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  background: var(--bg); border-radius: 6px; padding: .2rem .55rem; }
.protocol-stamp .ico-svg svg { width: 14px; height: 14px; }
.protocol-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .6rem; }
.protocol-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.protocol-note { margin: .8rem 0 0; font-size: .92rem; }
.protocol-by { margin: .5rem 0 0; font-size: .8rem; }
.protocol-waiting { display: flex; align-items: center; gap: .4rem; }

/* owner's post-return check: confirm or file a damage claim */
.protocol-actions form { margin-bottom: .8rem; }
.protocol-claim-toggle summary { cursor: pointer; font-weight: 600; color: #b45309; }
.protocol-claim-form { margin-top: .8rem; }
.protocol-claim-form textarea { width: 100%; }
.protocol-claim {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #fdf0e7; border: 1px solid #ecd9a8; border-radius: var(--radius-sm);
  padding: .9rem 1rem; margin-bottom: 1.2rem;
}
.protocol-claim p { margin: .3rem 0 0; }
.protocol-claim .ico-svg { flex: 0 0 auto; margin-top: .15rem; }
.protocol-claim .ico-svg svg { width: 22px; height: 22px; color: #b45309; }

/* site-wide nudge when a handover step is due (rental started/ended without
   the renter documenting it) — a floating toast, so it never shifts the page
   layout (the landing hero is full-bleed and would show a white stripe) */
.handover-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 150; width: min(600px, calc(100vw - 1.6rem));
  display: flex; align-items: center; gap: .8rem;
  background: var(--ink); color: #fff;
  border-radius: 14px; padding: .7rem .8rem .7rem 1rem;
  box-shadow: 0 14px 38px rgba(2, 6, 23, .38);
}
.handover-toast-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; background: var(--brand); color: #fff;
}
.handover-toast-ico svg { width: 20px; height: 20px; }
.handover-toast-text { flex: 1; font-size: .88rem; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.handover-toast-text strong { color: #fff; }
.handover-toast-more {
  display: inline-block; margin-left: .3rem; font-size: .74rem; font-weight: 700;
  background: rgba(255, 255, 255, .14); border-radius: 999px; padding: .05rem .5rem;
}
.handover-toast-cta { flex: 0 0 auto; white-space: nowrap; }
.handover-toast-close {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .55); font-size: 1.25rem; line-height: 1; padding: .25rem .35rem;
}
.handover-toast-close:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .handover-toast { animation: handover-toast-in .5s cubic-bezier(.22, .8, .36, 1) both; }
  @keyframes handover-toast-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}
@media (max-width: 560px) {
  .handover-toast { bottom: 12px; flex-wrap: wrap; padding: .8rem .9rem; }
  .handover-toast-text { flex-basis: calc(100% - 110px); }
  .handover-toast-cta { flex: 1; margin-left: 48px; }
}

/* landing timeline, step 3 side note — the protocol explainer, hung well below
   the step card. step 3 is the last item, so the section gets padding to keep
   the hang from running into the "03 · Kategorie" head below */
.tl-side--note { align-self: end; margin-bottom: -7rem; max-width: 320px; }
@media (min-width: 861px) {
  .steps-section { padding-bottom: 5rem; }
}
.tl-side-title--trust { color: var(--brand-dark); }
.tl-side-title--trust .ico-svg { vertical-align: -.2em; margin-right: .25rem; }
.tl-side-title--trust .ico-svg svg { width: 16px; height: 16px; }
.tl-side-text { margin: 0; font-size: .85rem; color: var(--muted); }

/* the confirmation page grew a 4th step card — let the grid flow instead of a
   hard 3-up (this also keeps it responsive without a media override) */
.confirm-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 640px) {
  .protocol-head { flex-direction: column; }
  .protocol-photos { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
  .handover-form { padding: 1.1rem; }
  /* camera-first on phones: stacked full-width buttons, camera on top */
  .handover-photo-btns { flex-direction: column; align-items: stretch; }
  .handover-photo-btns .btn { max-width: none; }
}

/* ---- Dashboard tables -> stacked cards on phones --------------------------*/
/* the generic table.data rule above scrolls sideways; the dashboard tables
   carry data-labels so they can reflow into per-booking cards instead.
   selectors keep the `table.` prefix so they outweigh `table.data td`
   (specificity) — without it the nowrap rule wins and the cards overflow */
@media (max-width: 700px) {
  table.data--cards { display: block; overflow: visible; }
  table.data--cards thead { display: none; }
  table.data--cards tbody { display: block; }
  table.data--cards tr {
    display: block; background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .3rem .9rem .7rem; margin-bottom: .8rem;
  }
  table.data--cards tr:last-child { margin-bottom: 0; }
  table.data--cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; border-bottom: 1px solid var(--line);
    white-space: normal; text-align: right;
  }
  table.data--cards td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); text-align: left;
  }
  table.data--cards td:last-child { border-bottom: none; }
  /* actions row: no label, buttons stretch to full width */
  table.data--cards td.cell-actions { display: block; padding-top: .6rem; text-align: left; }
  table.data--cards td.cell-actions::before { content: none; }
  table.data--cards .row-actions { flex-wrap: wrap; }
  table.data--cards .row-actions form { flex: 1; }
  table.data--cards .row-actions .btn { width: 100%; min-width: 0; }
  table.data--cards .row-actions > a.btn { flex: 1; }
}

/* ---- Header nav: collapse into the burger below 1100px --------------------*/
/* the inline nav (links + bell + logout, plus "Moderace" for admins) needs
   ~1100px next to the brand and the search bar — between the old 640px burger
   breakpoint and that, the header overflowed the viewport on every page */
@media (max-width: 1100px) {
  .header-nav a { display: none; }
  .header-nav { gap: .6rem; }
  .nav-burger { display: flex; }
  .nav-plus { display: inline-flex; }
}

/* ---- "Můj profil" overflow fixes ------------------------------------------*/
/* grid/flex items default to min-width:auto, so the native file input's
   intrinsic width (and a long e-mail) forced the page to scroll sideways on
   phones — let the whole chain shrink instead */
.account-grid > * { min-width: 0; }
.account-avatar-fields { min-width: 0; }
.account-avatar-fields input[type="file"] { min-width: 0; max-width: 100%; }
.spec li { gap: 1rem; }
.spec .v { overflow-wrap: anywhere; text-align: right; }
.geo-box-head { flex-wrap: wrap; }
@media (max-width: 420px) {
  /* tiny screens: avatar above its fields instead of squeezing beside them */
  .account-avatar { flex-wrap: wrap; }
}

/* notifications list: let items shrink + break long tokens (URLs, codes) so
   tiny screens don't scroll sideways */
.notif-item { min-width: 0; }
.notif-title, .notif-body { overflow-wrap: anywhere; }
/* the 320px column floor itself overflowed 320px viewports */
.notif-list { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }