html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #f4f4f7;
}

/* Opt-in only (ViewData["FillHeight"], currently just Home/Index) - a fixed (not just minimum)
   viewport height, with its own scrollbar, is what lets the flex-grow chain below shrink oversized
   content (e.g. a tall photo) to fit instead of growing the whole page past the viewport. Applying
   this to every page would make ordinary block content a flex item with the default flex-shrink: 1
   and silently squash it instead of letting it scroll (long forms, grids) - hence the opt-in class. */
.vh-fill {
  height: 100vh;
  overflow-y: auto;
}

.footer {
  width: 100%;
  background-color: white;
}

/* One 60px-tall row from sm up, where the copyright line and the buttons fit side by side. Below
   that they wrap onto two lines (see _Layout.cshtml), which 60px of line-height each would stretch
   to a 120px footer - so the small-screen row height comes from the container's padding instead. */
@media (min-width: 576px) {
  .footer {
    white-space: nowrap;
    line-height: 60px;
  }
}

/* Flex items default to min-height: auto, which lets their content's intrinsic size (e.g. a tall
   photo) force the whole vertical flex chain (body > .container > main > .jumbotron > carousel)
   to grow past the viewport instead of shrinking to fit - this pins it back down so the page
   never scrolls and the footer stays put. */
.flex-grow-1 {
  min-height: 0;
}

#myCarsCarousel .carousel-item {
  min-height: 0;
  overflow: hidden;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Flags come in different aspect ratios (the standard assets are 4:3, uploads are anything), so
   fit them inside a fixed box instead of stretching them to it. The border keeps mostly-white
   flags (Japan, Poland) from bleeding into the page background. */
.flag {
  object-fit: contain;
  border: 1px solid var(--bs-border-color);
}

/* Uploaded emblems are any aspect ratio, so fit them inside the box rather than stretching them.
   No border, unlike flags - brand logos are usually transparent and read fine on the page. */
.emblem {
  object-fit: contain;
}

/* The GlobalCars emblem (_GlobalCarsEmblem.cshtml): the globe mark with the two-tone wordmark
   beside it. Sized in em, so it follows the font size of whatever holds it - the navbar brand
   by default, the home page heading through .brand-emblem-lg. */
.brand-emblem {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  line-height: 1;
  vertical-align: middle;
}

.brand-emblem-mark {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(10, 47, 122, 0.25));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a:hover .brand-emblem-mark,
a:focus-visible .brand-emblem-mark {
  transform: rotate(-12deg) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .brand-emblem-mark {
    transition: none;
  }
}

.brand-emblem-wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-emblem-global {
  color: #0a2f7a;
}

/* Where background-clip: text is not supported, the plain color underneath still shows. */
.brand-emblem-cars {
  color: #ff6a00;
  background: linear-gradient(90deg, #ffa31a, #ff6a00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-emblem-lg {
  font-size: calc(1.6rem + 1.5vw);
}

@media (min-width: 1200px) {
  .brand-emblem-lg {
    font-size: 2.75rem;
  }
}

/* Password field with an eye button overlaid inside it (see _PasswordToggleButton.cshtml), rather
   than an input-group's separate bordered button, so the field reads as a single control. */
.password-field {
  position: relative;
}

.password-field > .form-control {
  padding-right: 2.75rem;
}

.password-field > .password-toggle {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0.375rem;
  line-height: 1;
  color: var(--bs-secondary-color);
}

.password-field > .password-toggle:hover {
  color: var(--bs-body-color);
}

/* One message in a feedback thread. The owner's posts and the answers are pushed to opposite
   margins by the flex row around them (see Views/Feedbacks/Details.cshtml); this only caps how
   wide a message gets, so the two sides stay visibly apart. Full width on a phone, where there
   is no room to split the line in two. */
.feedback-post {
  width: 100%;
}

@media (min-width: 768px) {
  .feedback-post {
    width: 50%;
  }
}

/* Yandex Maps widget on the service station search page. An iframe carries no size of its own, and
   as a replaced inline element it would sit on the text baseline with a gap under it. */
.service-stations-map {
  display: block;
  width: 100%;
  height: 480px;
}

/* The Smart Selection chat inside its popup, and the spare parts chat, which is the same chat sat
   on the page rather than in one. The log is the only part that scrolls, so the input row stays put
   while an answer arrives, and a bubble is capped short of the full width so the two sides of the
   conversation stay told apart without any colour of their own. */
.smart-selection-log {
  height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #f8f9fa;
}

/* The spare parts chat lets the page itself scroll instead, as the car details and privacy pages
   do: ten offer cards make for a long answer, and reading it through a 320px slot hides most of it. */
.smart-selection-log-page {
  height: auto;
  min-height: 8rem;
  overflow-y: visible;
}

.smart-selection-message {
  max-width: 85%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  /* The model answers in paragraphs; without this they arrive as one run-on line. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.smart-selection-message-user {
  margin-left: auto;
  background-color: #cfe2ff;
}

.smart-selection-message-assistant {
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.smart-selection-station {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-left: 3px solid #0d6efd;
  border-radius: 0.375rem;
  background-color: #fff;
  overflow-wrap: anywhere;
}

/* The registration application on the car documents page. The form it reproduces is a fixed-width
   printed layout - its blanks are runs of underscores that only line up in a monospaced face - so
   the editor sets it the way both downloads do, and keeps the spacing the document carries rather
   than collapsing it the way HTML normally would. `pre` rather than `pre-wrap`: its lines are cut
   to the width of the printed page, and re-wrapping them to a phone would show an alignment the
   downloads don't have. The box scrolls in both directions instead. */
.car-document-editor {
  font-family: "Courier New", Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: pre;
  overflow: auto;
  max-height: 65vh;
}

.car-document-editor:focus {
  outline: none;
}

/* The News form's rich text box (rich-text-editor.js): grows with what is typed up to most of the
   screen, then scrolls. */
.rich-text-editor {
  min-height: 12rem;
  max-height: 60vh;
  overflow: auto;
}

.rich-text-editor:focus {
  outline: none;
}

/* ...and the same markup where it is read, on the News page - styled alike, so what the admin
   types is what readers get. */
.rich-text-editor > :last-child,
.news-text > :last-child {
  margin-bottom: 0;
}

.rich-text-editor blockquote,
.news-text blockquote {
  padding-left: 1rem;
  border-left: 0.25rem solid #dee2e6;
  color: #6c757d;
}

/* The service intervals page: a card per service type, each a button that opens the last service
   behind it. The two bars count down what is left of the interval - by mileage and by time. */
.service-interval-card {
  padding: 0;
  border: 2px solid #212529;
  border-radius: 1.25rem;
  background-color: #fff;
  transition: box-shadow 0.15s ease-in-out;
}

.service-interval-card:hover,
.service-interval-card:focus-visible {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* The icon that opens the card's own diagram sits in its top-right corner, over the card button (a
   button can't hold another); the card's name keeps clear of it. The col's side padding (half the
   gutter) is where the card's right edge is; its top gutter is a margin, outside the box. */
.service-interval-diagram-button {
  position: absolute;
  top: 0.5rem;
  right: calc(var(--bs-gutter-x) * 0.5 + 0.5rem);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
}

.service-interval-card.has-diagram .card-body > .fw-semibold {
  padding-right: 2.25rem;
}

.service-interval-bar {
  position: relative;
  display: block;
  height: 1.75rem;
  border: 2px solid #212529;
  /* overflow: hidden clips the fill to the same rounded corners. */
  border-radius: 0.5rem;
  background-color: #fff;
  overflow: hidden;
}

/* A bar with nothing left still shows a sliver of its colour, so a service due right now doesn't read
   as an empty, neutral track. It stays inside the label's left padding, clear of the text. */
.service-interval-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 0.375rem;
}

/* Drawn twice over the bar (see Views/ServiceIntervals/Index.cshtml): the second copy is clipped to
   the fill, so the text changes colour exactly where the fill ends. */
.service-interval-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The diagram under the service interval cards (drawn by service-intervals.js): time across, mileage
   up. Each window takes its colour from a level class, and draws its fill, limit edges and label in
   currentColor. */
.service-intervals-chart {
  width: 100%;
  border: 2px solid #212529;
  border-radius: 1.25rem;
  background-color: #fff;
  overflow: hidden;
}

.service-intervals-chart-svg {
  display: block;
  font-size: 12px;
}

.sic-grid line {
  stroke: #dee2e6;
  stroke-width: 1;
}

.sic-frame {
  fill: none;
  stroke: #adb5bd;
  stroke-width: 1;
}

.sic-tick {
  fill: #6c757d;
}

.sic-tick-year,
.sic-axis-title {
  fill: #212529;
  font-weight: 600;
}

.sic-level-ok {
  color: var(--bs-success);
}

.sic-level-soon {
  color: #e0a800;
}

.sic-level-due {
  color: var(--bs-danger);
}

/* A service whose interval has already been renewed by a later one, on a service type's own diagram. */
.sic-level-past {
  color: #6c757d;
}

.sic-window {
  cursor: pointer;
  outline: none;
}

/* On a service type's own diagram the windows open nothing. */
.sic-window.sic-static,
.sic-window-label.sic-static {
  cursor: default;
}

.sic-window-area {
  fill: currentColor;
  fill-opacity: 0.07;
  stroke: currentColor;
  stroke-opacity: 0.35;
  stroke-dasharray: 3 3;
}

.sic-window-limit {
  stroke: currentColor;
  stroke-width: 2.5;
}

.sic-window:hover .sic-window-area,
.sic-window:focus-visible .sic-window-area,
.sic-window.is-active .sic-window-area {
  fill-opacity: 0.22;
  stroke-opacity: 1;
}

.sic-window:hover .sic-window-limit,
.sic-window:focus-visible .sic-window-limit,
.sic-window.is-active .sic-window-limit {
  stroke-width: 4;
}

/* The warning yellow is too light for text on white; its labels use Bootstrap's darker shade. */
.sic-window-label {
  fill: currentColor;
  font-weight: 600;
  cursor: pointer;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.sic-window-label.sic-level-soon {
  color: var(--bs-warning-text-emphasis);
}

.sic-today {
  stroke: #212529;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.sic-today-label {
  fill: #212529;
  font-weight: 600;
}

.sic-mileage-line {
  fill: none;
  stroke: #212529;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.sic-mileage-point {
  fill: #fff;
  stroke: #212529;
  stroke-width: 2;
}

.sic-service-point {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 2;
}

/* Car form colour dropdown: the colour's name on the left, a swatch of it on the right. The border
   keeps White and Silver visible against the menu. */
.color-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  margin-left: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
}

.color-palette-menu {
  max-height: 20rem;
  overflow-y: auto;
}

/* The car's photo beside the title and details on the car sale report. The photo is laid over its
   column rather than sitting in it, so the column has no height of its own and the row stretches it to
   them: the photo's box then starts level with the title and ends level with the last detail, and the
   photo is scaled to fit it without cropping, centred. Stacked under the details on a phone there is nothing to stretch to, so the
   column keeps a height of its own there. */
.car-sale-photo {
  position: relative;
  min-height: 12rem;
}

@media (min-width: 768px) {
  .car-sale-photo {
    min-height: 0;
  }
}

.car-sale-photo img {
  position: absolute;
  inset: 0 calc(var(--bs-gutter-x) * 0.5);
  width: calc(100% - var(--bs-gutter-x));
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* The car purchase filters, laid out like the marketplaces' own: a pale panel holding white rows, the
   first ones made of borderless dropdowns split by thin rules. */
.car-purchase-filters {
  background: #e9edf4;
  border-radius: 0.75rem;
  padding: 1rem;
}

.car-purchase-panel {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(33, 37, 41, 0.08);
}

.car-purchase-cell {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

@media (min-width: 768px) {
  .car-purchase-cell {
    border-bottom: 0;
  }

  .car-purchase-cell + .car-purchase-cell {
    border-left: 1px solid var(--bs-border-color-translucent);
  }
}

.car-purchase-plain.form-select,
.car-purchase-plain.form-control {
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

.car-purchase-plain:disabled {
  background-color: transparent;
  color: var(--bs-secondary-color);
}

/* A "from - to" pair the wrong way round: no border to turn red, so the values do. */
.car-purchase-plain.form-control.is-invalid {
  color: var(--bs-form-invalid-color);
  background-image: none;
  padding-right: 0.75rem;
}

.car-purchase-cell .form-control {
  min-width: 0;
}

/* The currency keeps its width beside the two price boxes, which give way instead. */
.car-purchase-currency {
  flex: 0 0 6rem;
}

.car-purchase-currency .form-select {
  padding-top: 0;
  padding-bottom: 0;
}

/* A listing's photo on its card, cropped to the marketplaces' own 380x240 frame. */
.car-purchase-photo {
  position: relative;
  aspect-ratio: 380 / 240;
  overflow: hidden;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.car-purchase-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-purchase-site {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}

.car-purchase-card {
  transition: box-shadow 0.15s ease-in-out;
}

.car-purchase-card:hover,
.car-purchase-card:focus-visible {
  box-shadow: 0 0.25rem 0.75rem rgba(33, 37, 41, 0.15);
}

/* "Back to top" button (js/scroll-to-top.js): a round arrow in the bottom right corner, over the
   page and the footer, below Bootstrap's modals and the toast container. */
.scroll-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1030;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.75rem rgba(33, 37, 41, 0.25);
}

.scroll-to-top[hidden] {
  display: none;
}