/*
Theme Name: Domino Team Car
Theme URI: https://dominoteamcar.mk/
Author: Webko
Author URI: https://webko.mk/
Description: Block theme for Domino Team Car — sale and rental of imported used vehicles in Skopje. Ported from the approved Phase 1 prototype; every rule below the header is copied from the prototype's build output, not regenerated.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domino-team-car
*/

/* === Copied verbatim from components-BCI7mQ3o.css === */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --text-xs: .8125rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.9375rem;
    --text-3xl: 2.4375rem;
    --text-4xl: 3.0625rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-paper: #fff;
    --color-surface: #f3f4f6;
    --color-ink: #16191d;
    --color-muted: #5c636b;
    --color-line: #dde1e6;
    --color-accent: #c1121f;
    --color-accent-dark: #a50e1a;
    --color-accent-ink: #fff;
    --color-ok: #1b7f3b;
    --color-night: #0e1013;
    --color-night-surface: #1a1e24;
    --color-night-line: #2b3138;
    --color-night-text: #c3cad2;
    --font-display: "Source Sans 3", system-ui, sans-serif;
    --font-body: "Source Sans 3", system-ui, sans-serif;
    --spacing-1: .25rem;
    --spacing-2: .5rem;
    --spacing-3: .75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-24: 6rem;
    --radius-full: 999px;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .fixed {
    position: fixed;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .block {
    display: block;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .table {
    display: table;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .accent-ink {
    accent-color: var(--color-ink);
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
}

:root {
  --content: 1200px;
  --gutter: 1.25rem;
  --ease: cubic-bezier(.2, 0, .2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -.015em;
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.prose > :last-child, .car-card__body > :last-child, .section__inner > :last-child {
  margin-block-end: 0;
}

.shell {
  width: 100%;
  max-width: var(--content);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.section {
  padding-block: var(--spacing-16);
}

.section--tight {
  padding-block: var(--spacing-12);
}

.section--surface {
  background: var(--color-surface);
}

.section__head {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
  flex-wrap: wrap;
  display: flex;
}

.section__title {
  font-size: var(--text-2xl);
}

.section__link {
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-sm);
  transition: border-color .2s var(--ease);
  border-bottom: 2px solid #0000;
}

.section__link:hover {
  border-bottom-color: var(--color-accent);
}

.section__lede {
  color: var(--color-muted);
  max-width: 52ch;
}

.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--spacing-3);
  font-weight: 700;
}

.btn {
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  border: 2px solid #0000;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  line-height: 1;
  display: inline-flex;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
}

.btn--ghost {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: none;
}

.btn--ghost:hover {
  border-color: var(--color-ink);
}

.btn--on-night {
  border-color: var(--color-night-line);
  color: var(--color-paper);
  background: none;
}

.btn--on-night:hover {
  border-color: var(--color-paper);
}

.topbar {
  background: var(--color-night);
  color: var(--color-night-text);
  font-size: var(--text-xs);
}

.topbar__inner {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  min-height: 38px;
  display: flex;
}

.topbar__facts {
  gap: var(--spacing-6);
  display: flex;
}

.topbar__hours {
  display: none;
}

@media (min-width: 700px) {
  .topbar__hours {
    display: inline;
  }
}

.topbar__phone {
  color: var(--color-paper);
  font-weight: 700;
}

.langs {
  gap: var(--spacing-1);
  display: flex;
}

.langs__item {
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
  transition: background-color .2s var(--ease), color .2s var(--ease);
  padding: .25rem .5rem;
  font-weight: 700;
}

.langs__item:hover {
  background: var(--color-night-surface);
  color: var(--color-paper);
}

.langs__item[aria-current="true"] {
  background: var(--color-paper);
  color: var(--color-night);
}

.header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  z-index: 40;
  position: sticky;
  top: 0;
}

.header__inner {
  align-items: center;
  gap: var(--spacing-8);
  min-height: 76px;
  display: flex;
}

.header__logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  letter-spacing: -.02em;
  white-space: nowrap;
  align-items: center;
  gap: .625rem;
  display: flex;
}

.header__logo-text {
  gap: .3em;
  display: inline-flex;
}

.header__logo-word--green {
  color: var(--color-ok);
}

.header__logo-word--red {
  color: var(--color-accent);
}

.header__logo-word--ink {
  color: var(--color-ink);
}

.header__logo-img {
  object-fit: contain;
  background: var(--color-night);
  border-radius: var(--radius-md);
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: .375rem;
}

.nav {
  gap: var(--spacing-6);
  margin-inline-start: auto;
  display: none;
}

.nav__item {
  font-weight: 600;
  font-size: var(--text-sm);
  transition: border-color .2s var(--ease);
  border-bottom: 2px solid #0000;
  padding-block: .5rem;
}

.nav__item:hover, .nav__item[aria-current="page"] {
  border-bottom-color: var(--color-accent);
}

.header__cta {
  display: none;
}

.header__burger {
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  background: none;
  align-items: center;
  gap: .5rem;
  margin-inline-start: auto;
  padding: .625rem .875rem;
  display: inline-flex;
}

@media (min-width: 1000px) {
  .nav {
    display: flex;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__burger {
    display: none;
  }
}

.hero {
  background: var(--color-night);
  color: var(--color-paper);
  padding-block: var(--spacing-16) var(--spacing-24);
}

.hero__grid {
  gap: var(--spacing-12);
  align-items: center;
  display: grid;
}

@media (min-width: 960px) {
  .hero__grid {
    gap: var(--spacing-16);
    grid-template-columns: 1.05fr .95fr;
  }
}

.hero__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--spacing-4);
  font-weight: 900;
}

@media (min-width: 960px) {
  .hero__title {
    font-size: var(--text-4xl);
  }
}

.hero__title em {
  color: var(--color-accent);
  font-style: normal;
}

.hero__lede {
  color: var(--color-night-text);
  font-size: var(--text-lg);
  max-width: 46ch;
  margin-bottom: var(--spacing-8);
}

.hero__actions {
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-8);
  flex-wrap: wrap;
  display: flex;
}

.hero__proof {
  gap: var(--spacing-4) var(--spacing-8);
  border-top: 1px solid var(--color-night-line);
  padding-top: var(--spacing-6);
  flex-wrap: wrap;
  display: flex;
}

.proof {
  font-size: var(--text-sm);
  color: var(--color-night-text);
  align-items: baseline;
  gap: .5rem;
  display: flex;
}

.proof__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--color-paper);
}

.hero__featured {
  gap: var(--spacing-3);
  display: grid;
}

.hero__featured-label {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-night-text);
  font-weight: 700;
}

.car-card {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.car-card:hover {
  border-color: #0000;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #0e10131f;
}

.car-card__frame {
  position: relative;
}

.car-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  color: var(--color-line);
  place-items: center;
  display: grid;
  position: relative;
}

.car-card__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .4s var(--ease);
}

.car-card:hover .car-card__media img {
  transform: scale(1.03);
}

.car-card__year {
  color: var(--color-muted);
  font-weight: 400;
}

.car-card__flag {
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
  padding: .25rem .625rem;
  font-weight: 700;
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
}

.car-card__flag--new {
  background: var(--color-ok);
}

.car-card__body {
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-6);
  gap: var(--spacing-3);
  flex-direction: column;
  flex: auto;
  display: flex;
}

.car-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.car-card__trim {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-top: -.625rem;
}

.spec-chips {
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.spec-chips li {
  background: var(--color-surface);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  padding: .25rem .75rem;
}

.car-card__foot {
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-line);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: auto;
  display: flex;
}

.price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  letter-spacing: -.02em;
  color: var(--color-ink);
}

.price--hero {
  font-size: var(--text-2xl);
  color: var(--color-accent);
}

.price__note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0;
  font-weight: 400;
  display: block;
}

.car-card__cta {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent);
  transition: border-color .2s var(--ease);
  border-bottom: 2px solid #0000;
}

.car-card:hover .car-card__cta {
  border-bottom-color: var(--color-accent);
}

.car-card--featured {
  border: none;
  box-shadow: 0 24px 60px #00000073;
}

.searchbar {
  margin-top: calc(var(--spacing-16) * -1);
  z-index: 10;
  position: relative;
}

.searchbar__card {
  --control-h: 3.375rem;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  gap: var(--spacing-4);
  display: grid;
  box-shadow: 0 16px 40px #0e101324;
}

.searchbar__card .field select, .searchbar__card .btn {
  min-height: var(--control-h);
}

.searchbar__card .btn {
  padding-block: 0;
}

@media (min-width: 900px) {
  .searchbar__card {
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end;
  }
}

.field {
  flex-direction: column;
  gap: .375rem;
  margin: 0;
  display: flex;
}

.field__label {
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 700;
}

.field select {
  appearance: none;
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  background-color: var(--color-paper);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .2s var(--ease);
  background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding: .75rem 2.25rem .75rem .875rem;
}

.field select:hover {
  border-color: var(--color-muted);
}

.bodytypes {
  gap: var(--spacing-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 620px) {
  .bodytypes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .bodytypes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.bodytypes li {
  display: flex;
}

.bodytypes li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 620px) {
  .bodytypes li:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.bodytype {
  padding: 0 0 var(--spacing-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font-weight: 600;
  font-size: var(--text-sm);
  text-align: center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  flex-direction: column;
  flex: auto;
  align-items: center;
  gap: .125rem;
  display: flex;
  overflow: hidden;
}

.bodytype:hover {
  border-color: #0000;
  box-shadow: 0 10px 24px #0e10131f;
}

.bodytype__media {
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
  width: 100%;
  margin-bottom: var(--spacing-3);
  display: block;
  overflow: hidden;
}

.bodytype__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .4s var(--ease);
}

.bodytype:hover .bodytype__media img {
  transform: scale(1.04);
}

.bodytype__label {
  font-size: var(--text-base);
}

.bodytype__count {
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-weight: 400;
}

.cards {
  gap: var(--spacing-6);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  display: grid;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pagehead {
  background: var(--color-night);
  color: var(--color-paper);
  padding-block: var(--spacing-12);
}

.pagehead__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--spacing-3);
  font-weight: 900;
}

.pagehead__lede {
  color: var(--color-night-text);
  max-width: 62ch;
  margin: 0;
}

.listing {
  gap: var(--spacing-8);
  padding-block: var(--spacing-12);
  align-items: start;
  display: grid;
}

@media (min-width: 1000px) {
  .listing {
    gap: var(--spacing-12);
    grid-template-columns: 272px minmax(0, 1fr);
  }
}

.filters {
  display: none;
}

@media (min-width: 1000px) {
  .filters {
    max-height: calc(100vh - 120px);
    padding-inline-end: var(--spacing-2);
    display: block;
    position: sticky;
    top: 96px;
    overflow-y: auto;
  }
}

.filters__title {
  font-size: var(--text-lg);
  margin-bottom: var(--spacing-4);
}

.filters__body {
  gap: var(--spacing-2);
  display: grid;
}

.filter {
  border-top: 1px solid var(--color-line);
  padding-block: var(--spacing-3);
}

.filter__summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  align-items: center;
  gap: .5rem;
  padding-block: .25rem;
  list-style: none;
  display: flex;
}

.filter__summary::-webkit-details-marker {
  display: none;
}

.filter__summary:after {
  content: "";
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  width: 8px;
  height: 8px;
  transition: transform .2s var(--ease);
  margin-inline-start: auto;
  transform: rotate(45deg) translate(-2px, -2px);
}

.filter[open] > .filter__summary:after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.filter__badge {
  border-radius: var(--radius-full);
  background: var(--color-accent);
  min-width: 1.35rem;
  height: 1.35rem;
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  place-items: center;
  padding-inline: .35rem;
  font-weight: 700;
  display: inline-grid;
}

.filter__list {
  margin: var(--spacing-2) 0 0;
  gap: .125rem;
  max-height: 15rem;
  padding: 0;
  list-style: none;
  display: grid;
  overflow-y: auto;
}

.check {
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color .2s var(--ease);
  align-items: center;
  gap: .625rem;
  padding: .375rem .5rem;
  display: flex;
}

.check:hover {
  background: var(--color-surface);
}

.check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.check__label {
  flex: auto;
}

.check__count {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.check--empty {
  opacity: .45;
  cursor: not-allowed;
}

.check--empty input {
  cursor: not-allowed;
}

.toolbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--spacing-6);
  flex-wrap: wrap;
  display: flex;
}

.toolbar__count {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.toolbar__count strong {
  color: var(--color-ink);
  font-size: var(--text-base);
}

.toolbar__actions {
  align-items: center;
  gap: var(--spacing-3);
  display: flex;
}

.toolbar__filters {
  padding: .625rem 1rem;
}

@media (min-width: 1000px) {
  .toolbar__filters {
    display: none;
  }
}

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  margin: 0;
}

.field--inline .field__label {
  white-space: nowrap;
}

.field--inline select {
  padding-block: .5rem;
}

.cards--listing {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 560px) {
  .cards--listing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1240px) {
  .cards--listing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.empty {
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--spacing-16) var(--spacing-8);
  text-align: center;
}

.empty__title {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-3);
}

.empty p {
  color: var(--color-muted);
  max-width: 46ch;
  margin-inline: auto;
}

.filterpanel {
  z-index: 60;
  background: var(--color-paper);
  grid-template-rows: auto 1fr auto;
  display: grid;
  position: fixed;
  inset: 0;
}

@media (min-width: 1000px) {
  .filterpanel {
    display: none;
  }
}

.filterpanel__head {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--gutter);
  border-bottom: 1px solid var(--color-line);
  display: flex;
}

.filterpanel__head .filters__title {
  margin: 0;
}

.filterpanel__close {
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: .5rem;
  font-weight: 700;
}

.filterpanel__body {
  padding: 0 var(--gutter) var(--spacing-6);
  overflow-y: auto;
}

.filterpanel__foot {
  padding: var(--spacing-4) var(--gutter);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -6px 24px #0e10131a;
}

.btn--block {
  width: 100%;
}

.breadcrumb {
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.breadcrumb .shell {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.breadcrumb a {
  color: var(--color-accent);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

.detail {
  gap: var(--spacing-8);
  padding-block: var(--spacing-8) var(--spacing-12);
  align-items: start;
  display: grid;
}

@media (min-width: 1000px) {
  .detail {
    gap: var(--spacing-12);
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.gallery__stage {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

.gallery__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gallery__arrow {
  border-radius: var(--radius-full);
  width: 3rem;
  height: 3rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
  background: #ffffffeb;
  border: none;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
  display: grid;
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px #0e10132e;
}

.gallery__arrow:hover {
  background: var(--color-paper);
}

.gallery__arrow--prev {
  inset-inline-start: var(--spacing-3);
}

.gallery__arrow--next {
  inset-inline-end: var(--spacing-3);
}

.gallery__counter {
  border-radius: var(--radius-full);
  color: var(--color-paper);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  background: #0e1013c7;
  margin: 0;
  padding: .25rem .75rem;
  font-weight: 700;
  position: absolute;
  inset-block-end: var(--spacing-3);
  inset-inline-start: var(--spacing-3);
}

.gallery__thumbs {
  gap: var(--spacing-2);
  margin: var(--spacing-2) 0 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  display: grid;
}

.gallery__thumb {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  width: 100%;
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
  opacity: .75;
  border: 2px solid #0000;
  padding: 0;
  display: block;
  overflow: hidden;
}

.gallery__thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb--on {
  border-color: var(--color-accent);
  opacity: 1;
}

.detail__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--spacing-3);
}

.detail__year {
  color: var(--color-muted);
  font-weight: 400;
}

.price--detail {
  font-size: var(--text-3xl);
  color: var(--color-accent);
  margin: var(--spacing-4) 0 var(--spacing-6);
}

.detail__actions {
  gap: var(--spacing-3);
  display: grid;
}

.detail__note {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-top: var(--spacing-3);
}

.trustlist {
  margin: var(--spacing-6) 0 0;
  padding: var(--spacing-4) 0 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  gap: .625rem;
  list-style: none;
  display: grid;
}

.trustlist li {
  align-items: flex-start;
  gap: .625rem;
  display: flex;
}

.trustlist li:before {
  content: "";
  background: var(--color-ok);
  border-radius: 50%;
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-top: .45rem;
}

.detail__panels {
  gap: var(--spacing-12);
  display: grid;
}

@media (min-width: 900px) {
  .detail__panels {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.spectable {
  margin: var(--spacing-6) 0 0;
}

.spectable__row {
  justify-content: space-between;
  gap: var(--spacing-4);
  border-bottom: 1px solid var(--color-line);
  padding-block: .75rem;
  display: flex;
}

.spectable dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.spectable dd {
  text-align: right;
  margin: 0;
  font-weight: 700;
}

.equipment {
  margin: var(--spacing-6) 0 0;
  font-size: var(--text-sm);
  gap: .625rem;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 620px) {
  .equipment {
    gap: .625rem var(--spacing-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.equipment li {
  align-items: flex-start;
  gap: .625rem;
  display: flex;
}

.equipment li:before {
  content: "";
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  flex: none;
  width: 1rem;
  height: .5rem;
  margin-top: .35rem;
  transform: rotate(-45deg);
}

.gallery__zoom {
  cursor: zoom-in;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  position: relative;
}

.gallery__zoomhint {
  border-radius: var(--radius-full);
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-paper);
  transition: background-color .2s var(--ease);
  background: #0e1013a8;
  place-items: center;
  font-size: 1.1rem;
  display: grid;
  position: absolute;
  inset-block-start: var(--spacing-3);
  inset-inline-end: var(--spacing-3);
}

.gallery__zoom:hover .gallery__zoomhint {
  background: var(--color-accent);
}

.lightbox {
  z-index: 90;
  padding: var(--spacing-8) var(--spacing-4);
  cursor: zoom-out;
  background: #08090bf0;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.lightbox__figure {
  cursor: default;
  max-width: min(1200px, 92vw);
  margin: 0;
}

.lightbox__image {
  border-radius: var(--radius-md);
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 78vh;
  margin-inline: auto;
}

.lightbox__caption {
  margin-top: var(--spacing-4);
  text-align: center;
  color: #cfd5dc;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.lightbox__close, .lightbox__arrow {
  color: var(--color-paper);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background-color .2s var(--ease);
  background: #ffffff1f;
  border: none;
  place-items: center;
  display: grid;
  position: absolute;
}

.lightbox__close:hover, .lightbox__arrow:hover {
  background: #ffffff42;
}

.lightbox__close {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
  inset-block-start: var(--spacing-4);
  inset-inline-end: var(--spacing-4);
}

.lightbox__arrow {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 2rem;
  line-height: 1;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.lightbox__arrow--prev {
  inset-inline-start: var(--spacing-4);
}

.lightbox__arrow--next {
  inset-inline-end: var(--spacing-4);
}

@media (max-width: 620px) {
  .lightbox__arrow {
    inset-block-start: auto;
    inset-block-end: var(--spacing-4);
    transform: none;
  }
}

.msgform, .msgform__row {
  gap: var(--spacing-4);
  display: grid;
}

@media (min-width: 560px) {
  .msgform__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.msgform__about {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.msgform__about strong {
  color: var(--color-ink);
}

.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  padding: .75rem .875rem;
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.5;
}

.field input:hover, .field textarea:hover {
  border-color: var(--color-muted);
}

.field input:focus, .field textarea:focus {
  border-color: var(--color-ink);
  outline: none;
  box-shadow: 0 0 0 3px #16191d14;
}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--color-accent);
}

.field__error {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

.msgform__foot {
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  display: flex;
}

.msgform__or {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.msgform__or a {
  color: var(--color-accent);
}

.msgform__note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0;
}

.formsuccess {
  text-align: center;
  padding: var(--spacing-8) var(--spacing-4);
}

.formsuccess__tick {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--spacing-4);
  border-radius: var(--radius-full);
  background: var(--color-ok);
  place-items: center;
  display: grid;
  position: relative;
}

.formsuccess__tick:after {
  content: "";
  border-left: 3px solid var(--color-paper);
  border-bottom: 3px solid var(--color-paper);
  width: 1.25rem;
  height: .7rem;
  transform: rotate(-45deg) translate(2px, -2px);
}

.formsuccess__title {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-3);
}

.formsuccess p {
  color: var(--color-muted);
  max-width: 42ch;
  margin-inline: auto;
}

.formsuccess__note {
  font-size: var(--text-sm);
}

.formsuccess__actions {
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.modal {
  z-index: 80;
  padding: var(--spacing-4);
  background: #08090b99;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.modal__panel {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  width: min(600px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 70px #0006;
}

.modal__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-6) var(--spacing-6) 0;
  display: flex;
}

.modal__title {
  font-size: var(--text-xl);
  margin-bottom: .25rem;
}

.modal__lede {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.modal__close {
  background: var(--color-surface);
  border-radius: var(--radius-full);
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-ink);
  transition: background-color .2s var(--ease);
  border: none;
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
}

.modal__close:hover {
  background: var(--color-line);
}

.modal__body {
  padding: var(--spacing-6);
}

.contact {
  gap: var(--spacing-12);
  padding-block: var(--spacing-12);
  align-items: start;
  display: grid;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
}

.contact__map {
  margin-top: var(--spacing-6);
}

.contact__social-title {
  font-size: var(--text-lg);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
}

.contact__social {
  gap: var(--spacing-3);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.contact__social a {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
  padding: .5rem 1rem;
  font-weight: 600;
  display: inline-block;
}

.contact__social a:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

.contact__form .section__title {
  margin-bottom: var(--spacing-6);
}

.rentform {
  gap: var(--spacing-16);
  padding-block: var(--spacing-12);
  display: grid;
}

.rentform__block .section__lede {
  margin-bottom: var(--spacing-6);
}

.rent-types {
  margin: var(--spacing-6) 0 0;
  gap: var(--spacing-4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 620px) {
  .rent-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .rent-types {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rent-types li {
  display: flex;
}

.rent-type {
  border: 2px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  flex-direction: column;
  flex: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.rent-type:hover {
  border-color: var(--color-muted);
}

.rent-type--on {
  border-color: var(--color-accent);
  box-shadow: 0 10px 26px #c1121f24;
}

.rent-type input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-accent);
  cursor: pointer;
  z-index: 1;
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
}

.rent-type__media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  display: block;
  overflow: hidden;
}

.rent-type__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.rent-type__body {
  padding: var(--spacing-4);
  flex-direction: column;
  flex: auto;
  gap: .375rem;
  display: flex;
}

.rent-type__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}

.rent-type__seats {
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
}

.rent-type__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.rent-type__examples {
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: auto;
}

.rentform__grid {
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  display: grid;
}

@media (min-width: 700px) {
  .rentform__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .rentform__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rentbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-line);
  flex-wrap: wrap;
  display: flex;
}

.rentbar__facts {
  gap: var(--spacing-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

.rentbar__facts strong {
  color: var(--color-ink);
  font-size: var(--text-base);
}

.rentdone {
  gap: var(--spacing-8);
  align-items: start;
  display: grid;
}

@media (min-width: 900px) {
  .rentdone {
    gap: var(--spacing-12);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }
}

.rentdone__summary {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
}

.rentdone__title {
  font-size: var(--text-lg);
  margin-bottom: var(--spacing-3);
}

.rentdone__line {
  font-size: var(--text-sm);
}

.steps {
  margin: var(--spacing-8) 0;
  gap: var(--spacing-6);
  counter-reset: step;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  border-top: 3px solid var(--color-accent);
  padding-top: var(--spacing-4);
}

.step__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  color: var(--color-line);
  margin-bottom: var(--spacing-2);
  line-height: 1;
  display: block;
}

.step__title {
  font-size: var(--text-lg);
  margin-bottom: .5rem;
}

.step__body {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.about {
  gap: var(--spacing-12);
  align-items: start;
  display: grid;
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  }
}

.about__para {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 60ch;
}

.about__stats {
  background: var(--color-night);
  color: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--spacing-8);
}

.about__stats-title {
  font-size: var(--text-lg);
  margin-bottom: var(--spacing-6);
}

.about__statlist {
  gap: var(--spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.about__statlist li {
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-night-line);
  gap: .25rem;
  display: grid;
}

.about__statlist li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about__statvalue {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  color: var(--color-paper);
  line-height: 1;
}

.about__statlabel {
  color: var(--color-night-text);
  font-size: var(--text-sm);
}

.about__visit {
  padding-block: var(--spacing-16);
}

.promises {
  gap: var(--spacing-6) var(--spacing-8);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 700px) {
  .promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .promises {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.promise {
  border-top: 3px solid var(--color-accent);
  padding-top: var(--spacing-4);
}

.promise__title {
  font-size: var(--text-lg);
  margin-bottom: .5rem;
}

.promise__body {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.split {
  gap: var(--spacing-6);
  display: grid;
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rent-tile {
  background: var(--color-night);
  color: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--spacing-12) var(--spacing-8);
  gap: var(--spacing-3);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: hidden;
}

.rent-tile:after {
  content: "";
  aspect-ratio: 1;
  background: radial-gradient(circle, #c1121f8c 0%, #0000 68%);
  width: 70%;
  position: absolute;
  inset-block-end: -30%;
  inset-inline-end: -10%;
}

@supports (color: color-mix(in lab, red, red)) {
  .rent-tile:after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--color-accent) 55%, transparent) 0%, transparent 68%);
  }
}

.rent-tile:after {
  opacity: .5;
  transition: opacity .3s var(--ease);
}

.rent-tile:hover:after {
  opacity: .85;
}

.rent-tile > * {
  z-index: 1;
  position: relative;
}

.rent-tile__title {
  font-size: var(--text-2xl);
  font-weight: 900;
}

.rent-tile__body {
  color: var(--color-night-text);
  max-width: 34ch;
}

.footer {
  background: var(--color-night);
  color: var(--color-night-text);
  padding-block: var(--spacing-16) var(--spacing-8);
  font-size: var(--text-sm);
}

.footer__grid {
  gap: var(--spacing-8);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  display: grid;
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer__title {
  color: var(--color-paper);
  font-size: var(--text-base);
  margin-bottom: var(--spacing-4);
}

.footer__list {
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.footer__list a {
  transition: border-color .2s var(--ease);
  border-bottom: 1px solid #0000;
}

.footer__list a:hover {
  border-bottom-color: currentColor;
}

.footer__bottom {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-night-line);
  gap: var(--spacing-4);
  font-size: var(--text-xs);
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
}

.callbar {
  z-index: 50;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  padding: .75rem var(--gutter);
  gap: var(--spacing-3);
  display: flex;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  box-shadow: 0 -6px 24px #0e10131a;
}

.callbar .btn {
  flex: 1 1 0;
}

.page {
  padding-bottom: 5.5rem;
}

@media (min-width: 1000px) {
  .callbar {
    display: none;
  }

  .page {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

/* ===========================================================================
   WordPress bridge.

   Everything above this line is copied verbatim from the prototype's
   `vite build` output. Nothing below it changes an approved value: these are
   the rules that exist only because WordPress puts different elements around
   the same markup than React did.

   Each rule names the element it replaces.
   =========================================================================== */

/* .page was the prototype's outermost wrapper and reserved room for the fixed
   .callbar. WordPress has no such element; .wp-site-blocks is its counterpart.
   WordPress does, however, put a `page` class on <body> for every page — a
   straight collision with the mockup's class, which would apply the same
   allowance a second time on pages and not at all on the vehicle archive. */
.wp-site-blocks {
  padding-bottom: 5.5rem;
}

body.page {
  padding-bottom: 0;
}

@media (min-width: 1000px) {
  .wp-site-blocks {
    padding-bottom: 0;
  }
}

/* Core gives the site footer a top margin that the prototype's footer never had. */
.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* The sticky header has to clear the admin bar for logged-in editors. */
.admin-bar .header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}

/* The vehicle listing is one grid of server-rendered cards that a small script
   filters in place. .car-card sets display:flex, which outranks the browser's
   own [hidden] rule, so a filtered-out card needs saying twice. */
.car-card[hidden],
.bodytypes li[hidden] {
  display: none;
}

/* No core block renders a bare <span>, so the mockup's inline chrome is a
   paragraph here. It must not carry the base paragraph margin. */
.topbar__hours,
.topbar__phone,
.langs__item,
.section__link,
.header__logo p,
.footer__bottom p,
.about__statlist p,
.proof p {
  margin: 0;
}

/* Core wraps every image in a <figure> and gives it a bottom margin. The
   mockup's rules for these classes were written for the <img>, so the box
   stays on the figure and the image is told to fill it. No design value is
   restated — only the fill. */
.wp-block-image.header__logo-img {
  margin: 0;
}

.header__logo-img img,
.bodytype__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bodytype__media img {
  object-fit: cover;
}

/* Core's button is a <div> wrapping an <a>; the mockup's .btn was the anchor
   itself. Keeping .btn on the wrapper means the wrapper is the button, so the
   inner anchor is stripped back to being nothing but the click target. */
.wp-block-button.btn > .wp-block-button__link {
  all: unset;
  cursor: pointer;
  flex: 1 1 auto;
  text-align: center;
}

/* Core also requires every Button to sit inside a Buttons wrapper. In the
   mockup the anchors were direct children of their flex containers, so the
   wrapper is removed from layout rather than given a size of its own. */
.header__inner > .wp-block-buttons,
.hero__actions > .wp-block-buttons,
.callbar > .wp-block-buttons,
.rent-tile > .wp-block-buttons,
.detail__actions > .wp-block-buttons,
.formsuccess__actions > .wp-block-buttons,
.contact__details > .wp-block-buttons,
.empty > .wp-block-buttons,
.about__visit > .wp-block-buttons {
  display: contents;
}

/* Core then asserts `.wp-block-buttons > .wp-block-button { display: inline-block;
   margin: 0 }` at two-class specificity, which outranks every single-class rule
   the mockup wrote for these same elements — including the one that hides the
   header's phone button below 1000px. The mockup's own declarations are
   re-asserted here at matching specificity. Values are re-addressed, not
   re-derived. */
.wp-block-buttons > .wp-block-button.btn {
  display: inline-flex;
}

.wp-block-buttons > .wp-block-button.header__cta {
  display: none;
}

@media (min-width: 1000px) {
  .wp-block-buttons > .wp-block-button.header__cta {
    display: inline-flex;
  }
}

.wp-block-buttons > .wp-block-button.contact__map {
  margin-top: var(--spacing-6);
}

/* `all: unset` above also unsets the outline, at a specificity the mockup's
   global :focus-visible rule cannot reach — which would ship buttons with no
   visible focus ring at all. The ring goes on the wrapper, so it hugs the
   button the way it does in the mockup rather than the label inside it.
   Declarations are the mockup's :focus-visible rule, re-addressed. */
.wp-block-button.btn:has(> .wp-block-button__link:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The paragraph block's save() does not emit aria-current, and an attribute it
   does not emit latently invalidates the block. The active language is marked
   structurally instead — the same two declarations as [aria-current='true'] in
   the verbatim section. Temporary either way: this switcher is rebuilt when the
   multilingual decision lands. */
.langs__item:first-child {
  background: var(--color-paper);
  color: var(--color-night);
}

/* The mockup's .proof was a <p> and carried the base paragraph margin, which
   shows when .hero__proof wraps to a second row. No core block renders a <p>
   wrapper, so the same margin is given back to the group that replaced it. */
.proof {
  margin-block-end: 1rem;
}

/* Same shape as the spec table below: the mockup's .about__statlist rows were
   <li>, and no core block renders a list item that can hold a heading and a
   label. These are the .about__statlist li declarations from the verbatim
   section, re-pointed at the groups that replaced them. */
.about__statlist > .wp-block-group {
  display: grid;
  gap: 0.25rem;
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-night-line);
}

.about__statlist > .wp-block-group:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Core has no definition-list block, so the "Каде сме" table is a group of
   two-paragraph rows. These are the .spectable dt and dd declarations from the
   verbatim section above, re-pointed at the elements that replaced them — the
   values are not re-derived, only re-addressed. */
.wp-block-group.spectable__row > p:first-child {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.wp-block-group.spectable__row > p:last-child {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Navigation.

   The mockup drew a nav and a burger, but the burger was inert — a static
   prototype has no state, so below 1000px there was no menu at all. Rather
   than invent one, the theme uses core's Navigation block: the client manages
   the menu, the current page marks itself, and the mobile overlay is core's.
   The rules below dress core's markup in the approved nav's own declared
   values — no new values are introduced.
--------------------------------------------------------------------------- */
.header .wp-block-navigation {
  margin-inline-start: auto;
  font-size: var(--text-sm);
}

.header .wp-block-navigation .wp-block-navigation__container {
  gap: var(--spacing-6);
}

.header .wp-block-navigation .wp-block-navigation-item__content {
  font-weight: 600;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
}

.header .wp-block-navigation .wp-block-navigation-item__content:hover,
.header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

/* Core's overlay toggle takes the burger's appearance from the mockup. */
.header .wp-block-navigation__responsive-container-open,
.header .wp-block-navigation__responsive-container-close {
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font-family: var(--font-display);
  font-weight: 700;
}

.header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-top: var(--spacing-16);
}

.header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: var(--spacing-3);
}

/* ---------------------------------------------------------------------------
   Editor visibility.

   The design has no entrance animation, no keyframes and no scroll reveal, so
   there is no opacity:0 class needing an .editor-styles-wrapper override. What
   does need one is the fixed furniture, which would otherwise float over the
   editing canvas instead of sitting in the flow.
--------------------------------------------------------------------------- */
.editor-styles-wrapper .callbar {
  position: static;
  box-shadow: none;
}

.editor-styles-wrapper .header {
  position: static;
}

.editor-styles-wrapper .filters {
  position: static;
  max-height: none;
}

/* ---------------------------------------------------------------------------
   Rental surfaces.

   The mockups never covered these screens, so they are built entirely from
   approved components rather than from new design. Two of those components
   need re-pointing, and nothing here introduces a value the prototype has not
   already declared.

   `.searchbar` carries a negative top margin so the home page's card lifts
   over the hero photograph. The rentals page puts it under a `.pagehead`,
   which is shorter, so the same pull drags the card over the lede. The
   modifier removes the offset; it does not invent a new one.

   The home card holds three controls and a button; the rental card holds four
   and a button, because pickup and drop-off are separate locations upstream.
   Same track sizing, one more track.
--------------------------------------------------------------------------- */
.searchbar--rental {
  margin-top: 0;
}

@media (min-width: 900px) {
  .searchbar--rental .searchbar__card {
    grid-template-columns: repeat(4, 1fr) auto;
  }
}

/* The signature pad is the one element with no counterpart in the mockups: a
   canvas the visitor draws in. It borrows the form field's own border, radius
   and paper colour so it reads as a field rather than as an image. */
.dtc-sigpad {
  width: 100%;
  height: 11.25rem;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  touch-action: none;
  display: block;
}

/* ---------------------------------------------------------------------------
   Rental interface: the auth dialog, the document grid, the status line.

   Three components the mockups never drew, because Phase 1 had no backend and
   so no account, no uploads and no status. Each is assembled from values the
   prototype already declares — the card shadow from `.searchbar__card`, the
   field border and radius from `.field`, the accent from the button — so they
   sit inside the approved language rather than beside it.
--------------------------------------------------------------------------- */

.authdialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 32rem;
  width: calc(100% - 2rem);
  /* The reset zeroes margins site-wide, which also removes the automatic
     centring a modal <dialog> relies on. Put it back explicitly. */
  margin: auto;
  max-height: calc(100vh - 2rem);
}

.authdialog::backdrop {
  background: #0e1013b8;
}

.authdialog__inner {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: 0 16px 40px #0e101324;
  position: relative;
}

.authdialog__close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
}

.authdialog__tabs {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.authdialog__tab {
  border: 1px solid var(--color-line);
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.authdialog__tab[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.authdialog__title {
  margin: 0 0 var(--spacing-2);
  font-size: 1.375rem;
}

/* ── Documents ──────────────────────────────────────────────────────────────

   The document step, grouped by the document each photograph comes from, with
   a slot per side. The mockups never drew it — Phase 1 had no backend and so
   no uploads — so like the auth dialog it is assembled from values the
   prototype already declares: the field's border and radius, the card gap, the
   accent from the button, `--color-ok` for the state that means "accepted".

   Every colour, radius and spacing below is a token. Nothing new is minted
   here; a value that wants to be new belongs in the prototype.
--------------------------------------------------------------------------- */

.docs {
  display: grid;
  gap: var(--spacing-6);
  /* Inside a step the fieldset's own gap separates this from its neighbours;
     its own margin would double that. */
  margin-block: 0;
}

.docs__lede {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}

.docs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

/* ── The counter ─────────────────────────────────────────────────────────── */

.docs__meter {
  flex: none;
  min-width: 11rem;
  margin: 0;
}

.docs__meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.docs__meter-top span {
  color: var(--color-muted);
}

.docs__meter-track {
  display: block;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  overflow: hidden;
}

.docs__meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: width 0.3s var(--ease-in-out), background-color 0.3s var(--ease-in-out);
}

.docs__meter.is-complete .docs__meter-fill {
  background: var(--color-ok);
}

/* ── The photography advice ──────────────────────────────────────────────── */

.docs__tips {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.docs__tips summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}

.docs__tips summary svg {
  flex: none;
  color: var(--color-muted);
}

/* Without a marker the row reads as a static notice, and the four things worth
   knowing before photographing a document stay shut. */
.docs__tips summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-start: auto;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: translateY(-2px) rotate(45deg);
}

.docs__tips[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.docs__tiplist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--spacing-2);
  margin: 0;
  padding: 0 var(--spacing-4) var(--spacing-4);
  list-style: none;
}

.docs__tip {
  position: relative;
  padding-left: var(--spacing-6);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* The marks are content, not decoration: "do this" and "not this" is the whole
   point of the list, and an icon font or an SVG per line would say it no more
   clearly than the two characters do. */
.docs__tip::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.docs__tip--yes::before {
  content: "✓";
  color: var(--color-ok);
}

.docs__tip--no::before {
  content: "✕";
  color: var(--color-accent);
}

/* ── A document, and its sides ───────────────────────────────────────────── */

.docs__group {
  display: grid;
  gap: var(--spacing-4);
}

.docs__group + .docs__group {
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-line);
}

.docs__group-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.docs__group-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted);
}

.docs__group-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
}

.docs__chip {
  margin-left: auto;
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.docs__chip.is-complete {
  border-color: var(--color-ok);
  color: var(--color-ok);
}

.docs__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--spacing-4);
}

/* One slot alone would stretch to the full row and dwarf the pairs above it. */
.docs__slots--one {
  grid-template-columns: minmax(0, 16rem);
}

/* ── A single slot ───────────────────────────────────────────────────────── */

.docslot {
  display: grid;
  gap: var(--spacing-2);
  align-content: start;
}

.docslot__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.docslot__n {
  flex: none;
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.docslot__frame {
  position: relative;
}

.docslot__drop {
  display: grid;
  place-items: center;
  position: relative;
  aspect-ratio: 1.586 / 1;
  overflow: hidden;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-in-out), background-color 0.15s var(--ease-in-out);
}

/* A face is not a card, and a slot shaped like one invites a photograph
   cropped at the chin. */
.docslot--portrait .docslot__drop {
  aspect-ratio: 3 / 4;
}

.docslot__drop:hover,
.docslot.is-dragover .docslot__drop {
  border-color: var(--color-accent);
  background: var(--color-paper);
}

.docslot__drop:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.docslot.is-filled .docslot__drop {
  border-style: solid;
  border-color: var(--color-ok);
  background: var(--color-night);
  cursor: zoom-in;
}

.docslot.is-invalid .docslot__drop {
  border-color: var(--color-accent);
}

.docslot.is-busy .docslot__drop {
  opacity: 0.6;
}

.docslot__empty {
  display: grid;
  justify-items: center;
  gap: var(--spacing-1);
  /* The lower padding is the room the two buttons below sit in. */
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-8);
  text-align: center;
  /* The label is the click target; nothing inside it should intercept. */
  pointer-events: none;
}

.docslot.is-filled .docslot__empty {
  display: none;
}

.docslot__art {
  color: var(--color-line);
  transition: color 0.15s var(--ease-in-out);
}

.docslot__drop:hover .docslot__art,
.docslot.is-dragover .docslot__art {
  color: var(--color-accent);
}

.docslot__cta {
  font-size: var(--text-sm);
  font-weight: 600;
}

.docslot__formats {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.docslot__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The file name over the thumbnail, so "which of these two is the back" is
   answerable without opening anything. */
.docslot__veil {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: 0;
  padding: var(--spacing-4) var(--spacing-2) var(--spacing-2);
  background: linear-gradient(to top, #000000c7, #0000);
  color: var(--color-paper);
  pointer-events: none;
}

.docslot__filename {
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docslot__filesize {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.docslot__badge {
  position: absolute;
  inset-block-start: var(--spacing-2);
  inset-inline-end: var(--spacing-2);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-ok);
  color: var(--color-paper);
  /* A green tick on a green photograph is no tick at all. */
  box-shadow: 0 0 0 2px #ffffffd9;
  pointer-events: none;
}

/* ── The two things you can do to an empty slot, and the four to a full one ─ */

.docslot__acts {
  position: absolute;
  inset-block-end: var(--spacing-3);
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
}

.docslot__mini {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.docslot__mini:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* On a machine with a mouse the pair says nothing the card does not: "Сликај"
   opens the same file dialog as "Избери", and the card itself already reads
   "Прикачи слика". The buttons exist for the phone, where the choice between
   the camera and the gallery is real and worth making visible. */
@media (hover: hover) and (pointer: fine) {
  .docslot__acts {
    display: none;
  }

  .docslot__empty {
    padding-block-end: var(--spacing-4);
  }
}

.docslot__tools {
  position: absolute;
  inset-block-start: var(--spacing-2);
  inset-inline-start: var(--spacing-2);
  display: flex;
  gap: var(--spacing-1);
}

.docslot__tool {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: #14141899;
  color: var(--color-paper);
  cursor: pointer;
}

.docslot__tool:hover {
  background: var(--color-night);
}

.docslot__tool--danger:hover {
  background: var(--color-accent);
}

.docslot__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.docslot__error {
  margin: 0;
}

/* The input stays in the accessibility tree — it is the label's control and
   the form's required field — but the slot is what the visitor sees. */
.docslot__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Turning the picture is a file operation here, not a CSS one, so the only
   transition is the swap. */
@media (prefers-reduced-motion: reduce) {
  .docs__meter-fill,
  .docslot__drop,
  .docslot__art {
    transition: none;
  }
}

/* ── Status line ────────────────────────────────────────────────────────── */

.statusline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  list-style: none;
  margin: var(--spacing-4) 0;
  padding: 0;
  counter-reset: step;
}

.statusline__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.45;
}

.statusline__step--done,
.statusline__step--now {
  opacity: 1;
}

.statusline__dot {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}

.statusline__step--done .statusline__dot {
  background: var(--color-ok);
  border-color: var(--color-ok);
  color: var(--color-paper);
}

.statusline__step--now .statusline__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.statusline__step--now .statusline__label {
  font-weight: 700;
}

.reqcard {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* The booking sidebar's vehicle photo. Sized by the box rather than by the
   file, because the photograph comes from the rental system's media library at
   whatever dimensions were uploaded. The ratio matches `.car-card__media`, so
   the same car reads the same on the card and in the summary. */
.rentdone__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--spacing-4);
}

/* ---------------------------------------------------------------------------
   The application page.

   A two-column layout: the form, and a summary that stays in view so the car,
   the dates and the price are never more than a glance away while twenty
   fields are being filled in. Both columns are built from approved parts —
   .spectable, .spec-chips, .field, .btn — and the only new value is the column
   split itself.
--------------------------------------------------------------------------- */
.apply {
  display: grid;
  gap: var(--spacing-8);
  align-items: start;
  padding-block: var(--spacing-8);
}

@media (min-width: 900px) {
  .apply {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.apply__back {
  margin-bottom: var(--spacing-2);
}

.apply__title {
  margin-bottom: var(--spacing-2);
}

.apply__lede {
  margin-bottom: var(--spacing-6);
}

.apply__gate {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--spacing-8);
  display: grid;
  gap: var(--spacing-4);
}

.apply__gate > * {
  margin: 0;
}

/* A fieldset carries a browser default border and inline-size that would break
   the field grid inside it.

   It also breaks the rhythm: `.msgform` is a grid whose gap spaces its
   children, and a block-level fieldset between them swallows that — every
   block inside a step ended up with no vertical separation at all. The step
   re-declares the same grid so the spacing inside a step is identical to the
   spacing in the approved enquiry form, rather than a second value invented
   here. */
.apply__step {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
  display: grid;
  gap: var(--spacing-4);
  align-content: start;
}

.apply__step > legend {
  padding: 0;
  /* A legend is taken out of the grid flow by the browser, so its spacing has
     to come from its own margin rather than the gap. */
  margin-bottom: var(--spacing-2);
}

.apply__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  align-items: center;
  padding-top: var(--spacing-6);
  margin-top: var(--spacing-2);
  border-top: 1px solid var(--color-line);
}

.applysteps {
  margin-block: var(--spacing-2) var(--spacing-8);
}

.field__optional {
  font-weight: 400;
  opacity: 0.6;
  text-transform: none;
}

/* ── Summary ────────────────────────────────────────────────────────────── */

.applysummary {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  background: var(--color-surface);
}

@media (min-width: 900px) {
  .applysummary {
    position: sticky;
    top: var(--spacing-6);
  }
}

.applysummary__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--spacing-4);
}

.applysummary__title {
  margin: 0 0 var(--spacing-2);
  font-size: 1.25rem;
}

.applysummary__price {
  margin-top: var(--spacing-4);
  border-top: 1px solid var(--color-line);
}

.applysummary__total p {
  font-size: 1.0625rem;
}

/* The portal screens sit inside the page body, so their heading is a plain
   block rather than `.pagehead` — that class is the full-bleed dark band and
   takes its inset from a `.shell` child, which it does not have here. Type
   sizes are the page head's own, so the two read as the same level. */
.portalhead {
  display: grid;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-8);
}

.portalhead__title {
  margin: 0;
  /* The page head's own size and weight, so the two read as one level. */
  font-size: var(--text-3xl);
  font-weight: 900;
}

.portalhead__lede {
  margin: 0;
  color: var(--color-muted);
}

.portalhead__state {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* The fleet listing sits between the search card and whatever the client has
   put below it on the page. Without its own block spacing the count line
   touches the card above and the last row of cars touches the section below —
   both were flush at zero. The values are the section rhythm the ported pages
   already use. */
.fleetlist {
  padding-block: var(--spacing-8) var(--spacing-16);
}

/* A legend made programmatically focusable must not keep the focus ring once
   the pointer moves on — the ring is for keyboard navigation, and this element
   is only focusable so that advancing a step lands somewhere sensible. */
.apply__step > legend:focus:not(:focus-visible) {
  outline: none;
}

/* ── My rentals ─────────────────────────────────────────────────────────────

   Everything the renter has with us, as one grid of status cards. The screen
   the mockups never drew, so — like the auth dialog and the document slots —
   it is assembled from values the prototype already declares: the car card's
   media frame and radius, the field's border, the section rhythm, and the four
   status colours the site already owns.

   The tone is set once per card by `--tone`, and the pill, the ring, the
   progress track and the note all read it. A new status is then a class and a
   colour, not six rules.
--------------------------------------------------------------------------- */

.rentals {
  display: grid;
  gap: var(--spacing-6);
}

.rentals__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.rentals__title {
  margin: 0 0 var(--spacing-1);
}

.rentals__lede {
  margin: 0;
  color: var(--color-muted);
}

.rentals__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

.rentals__search {
  margin: 0;
}

.rentals__search input {
  min-width: 13rem;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font: inherit;
  font-size: var(--text-sm);
}

/* ── The filter ──────────────────────────────────────────────────────────── */

.rentals__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.rentals__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.rentals__tab:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.rentals__tab[aria-selected="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.rentals__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--tone, var(--color-muted));
  flex: none;
}

.rentals__tab--ok { --tone: var(--color-ok); }
.rentals__tab--warn { --tone: #b26a00; }
.rentals__tab--danger { --tone: var(--color-accent); }
.rentals__tab--muted { --tone: var(--color-muted); }

.rentals__count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.rentals__none {
  margin: 0;
  padding: var(--spacing-8);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-align: center;
}

/* ── The card ────────────────────────────────────────────────────────────── */

.rentals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--spacing-4);
}

.rentalcard {
  --tone: var(--color-muted);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}

.rentalcard--ok { --tone: var(--color-ok); }
/* Amber at the site's own weight: the prototype has no warning colour, and a
   lighter one on white paper fails against the muted text beside it. */
.rentalcard--warn { --tone: #b26a00; }
.rentalcard--danger { --tone: var(--color-accent); }
.rentalcard--muted { --tone: var(--color-muted); }

/* Only the bucket where the renter is the one holding things up gets the ring.
   If two shout, neither does. */
.rentalcard.is-urgent {
  border-color: var(--tone);
  box-shadow: 0 0 0 1px var(--tone);
}

.rentalcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface);
}

.rentalcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A finished or refused rental is history, and history is not full colour. */
.rentalcard--muted .rentalcard__media img {
  filter: saturate(0.35);
}

.rentalcard__pill {
  position: absolute;
  inset-block-start: var(--spacing-2);
  inset-inline-start: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  border: 1px solid var(--tone);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  color: var(--tone);
  font-size: var(--text-xs);
  font-weight: 700;
}

.rentalcard__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  background: var(--tone);
  flex: none;
}

/* The pulse means something is moving right now — not that the row is recent. */
.rentalcard__dot.is-live {
  animation: dtc-blip 1.6s var(--ease-in-out) infinite;
}

@keyframes dtc-blip {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.rentalcard__ref {
  position: absolute;
  inset-block-start: var(--spacing-2);
  inset-inline-end: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: #14141899;
  color: var(--color-paper);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Same dark chip as the reference above it. A text shadow over the photograph
   was unreadable the moment the vehicle was a light one — which, on this
   fleet's white saloons, is most of them. */
.rentalcard__price {
  position: absolute;
  inset-block-end: var(--spacing-2);
  inset-inline-end: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: #14141899;
  color: var(--color-paper);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rentalcard__price small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  opacity: 0.85;
}

.rentalcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
}

.rentalcard__title {
  margin: 0;
  font-size: var(--text-lg);
}

.rentalcard__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.rentalcard__days {
  padding: 0 var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The sentence that says what a progress bar cannot: whose turn it is. */
.rentalcard__note {
  margin: 0;
  padding: var(--spacing-3);
  border: 1px solid var(--tone);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-sm);
  background: var(--color-surface);
}

.rentalcard__progress {
  margin: auto 0 0;
}

.rentalcard__track {
  display: flex;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.rentalcard__seg {
  flex: 1;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.rentalcard__seg.is-done,
.rentalcard__seg.is-now {
  background: var(--tone);
}

.rentalcard__seg.is-now {
  animation: dtc-blip 1.6s var(--ease-in-out) infinite;
}

.rentalcard__step {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.rentalcard__step strong {
  color: var(--color-ink);
  font-weight: 600;
}

.rentalcard__stepn {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.rentalcard__foot {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-line);
}

.rentalcard__meta {
  margin-right: auto;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .rentalcard__dot.is-live,
  .rentalcard__seg.is-now {
    animation: none;
  }
}

/* The prototype's `[hidden]` reset sits inside `@layer base`, so every
   unlayered `display` below outranks it whatever its specificity — the same
   trap `.car-card[hidden]` above already fell into. Both of these are rendered
   hidden and revealed by rental.js, so saying it twice is what keeps the filter
   from appearing for a visitor who cannot use it. */
.rentals__tabs[hidden],
.rentalcard[hidden] {
  display: none;
}