@charset "utf-8";

/* V2 system color contract. Component aliases consume these roles;
 * preview edits only this namespace. V1 must not load this stylesheet. */
:root {
  --sys-color-brand: #0095de;
  --sys-color-brand-text: #0077b8;
  --sys-color-action: #0077b8;
  --sys-color-pressed: #043b8b;
  --sys-color-on-action: #ffffff;
  --sys-color-soft: #e7f5fe;
  --sys-color-ink: #212529;
  --sys-color-text: #343a40;
  --sys-color-muted: #495057;
  --sys-color-subtle: #868e96;
  --sys-color-line: #dee2e6;
  --sys-color-line-soft: #e9ecef;
  --sys-color-canvas: #f8f9fa;
  --sys-color-surface: #ffffff;
  --sys-color-danger: #e03131;
  --sys-color-saturday: #1772c1;
}

:root {
  --pc-ui-brand: var(--sys-color-brand);
  --pc-ui-brand-text: var(--sys-color-brand-text);
  --pc-ui-brand-dark: var(--sys-color-pressed);
  --pc-ui-brand-soft: var(--sys-color-soft);
  --pc-ui-action-primary: var(--sys-color-action);
  --pc-ui-action-pressed: var(--sys-color-pressed);
  --pc-ui-on-action: var(--sys-color-on-action);
  --pc-ui-ink: var(--sys-color-ink);
  --pc-ui-text: var(--sys-color-text);
  --pc-ui-muted: var(--sys-color-muted);
  --pc-ui-subtle: var(--sys-color-subtle);
  --pc-ui-line: var(--sys-color-line);
  --pc-ui-line-soft: var(--sys-color-line-soft);
  --pc-ui-canvas: var(--sys-color-canvas);
  --pc-ui-surface: var(--sys-color-surface);
  --pc-ui-danger: var(--sys-color-danger);
  --pc-ui-saturday: var(--sys-color-saturday);
  --mobile-ui-brand: var(--sys-color-brand);
  --mobile-ui-brand-text: var(--sys-color-brand-text);
  --mobile-ui-brand-dark: var(--sys-color-pressed);
  --mobile-ui-brand-soft: var(--sys-color-soft);
  --mobile-ui-action-primary: var(--sys-color-action);
  --mobile-ui-action-pressed: var(--sys-color-pressed);
  --mobile-ui-on-action: var(--sys-color-on-action);
  --mobile-ui-ink: var(--sys-color-ink);
  --mobile-ui-text: var(--sys-color-text);
  --mobile-ui-muted: var(--sys-color-muted);
  --mobile-ui-subtle: var(--sys-color-subtle);
  --mobile-ui-line: var(--sys-color-line);
  --mobile-ui-line-soft: var(--sys-color-line-soft);
  --mobile-ui-canvas: var(--sys-color-canvas);
  --mobile-ui-surface: var(--sys-color-surface);
  --mobile-ui-danger: var(--sys-color-danger);
  --mobile-ui-saturday: var(--sys-color-saturday);
  --en-v2-brand: var(--sys-color-brand);
  --en-v2-brand-text: var(--sys-color-brand-text);
  --en-v2-action: var(--sys-color-action);
  --en-v2-focus: var(--sys-color-pressed);
  --en-v2-ink: var(--sys-color-ink);
  --en-v2-muted: var(--sys-color-muted);
  --en-v2-line: var(--sys-color-line);
  --en-v2-soft: var(--sys-color-soft);
  --en-v2-canvas: var(--sys-color-canvas);
  --en-v2-white: var(--sys-color-surface);
  --en-v2-danger: var(--sys-color-danger);
  --tw-v2-brand: var(--sys-color-brand);
  --tw-v2-brand-text: var(--sys-color-brand-text);
  --tw-v2-action: var(--sys-color-action);
  --tw-v2-focus: var(--sys-color-pressed);
  --tw-v2-ink: var(--sys-color-ink);
  --tw-v2-muted: var(--sys-color-muted);
  --tw-v2-line: var(--sys-color-line);
  --tw-v2-soft: var(--sys-color-soft);
  --tw-v2-canvas: var(--sys-color-canvas);
  --tw-v2-white: var(--sys-color-surface);
  --tw-v2-danger: var(--sys-color-danger);
}

/* KO V2 homepage surfaces and search controls. */
#ko-home-main,
body:has(#mobile-main-content.mobile-main) {
  background-color: var(--sys-color-canvas);
}

#ko-home-main .pc-rental-search-section--hero {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sys-color-canvas) 84%, var(--sys-color-soft)),
    var(--sys-color-canvas)
  );
}

#ko-home-main .pc-rental-search--hero,
#mobile-main-content .mobile-main-search-panel {
  background-color: var(--sys-color-surface);
}

#ko-home-main .pc-rental-search--hero button.searchButton {
  color: var(--sys-color-on-action);
}

/* The vehicle document has its own stylesheet and inherits the published roles. */
body.pvl-page:has([data-cars-reading-rhythm]) {
  --pvl-action: var(--sys-color-action);
  --pvl-pressed: var(--sys-color-pressed);
  --pvl-soft: var(--sys-color-soft);
  --pvl-canvas: var(--sys-color-canvas);
  --pvl-line: var(--sys-color-line);
  background-color: var(--pvl-canvas);
}

body.pvl-page .pvl[data-cars-reading-rhythm] {
  --cars-ink: var(--sys-color-ink);
  --cars-text: var(--sys-color-text);
  --cars-muted: var(--sys-color-muted);
  --cars-line: var(--sys-color-line);
}

body.pvl-page .pvl[data-cars-reading-rhythm] :is(.pvl-quote, .pvl-baggage, .pvl-details, .pvd-waiver-product),
body.pvl-page .pvl[data-cars-reading-rhythm][data-cars-booking-flow] .pvl-hero.pvd-flat-detail {
  background-color: var(--sys-color-surface);
}

body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-cta {
  color: var(--sys-color-on-action);
}

body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-cta:active:not(:disabled) {
  background-color: var(--pvl-pressed);
}

@media (max-width: 760px) {
  body.pvl-page:has([data-cars-reading-rhythm]) {
    background-color: var(--sys-color-surface);
  }

  body.pvl-page .pvl[data-cars-reading-rhythm][data-cars-booking-flow] {
    row-gap: 8px;
    padding-top: 0;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm][data-cars-booking-flow] .pvl-return-bar {
    min-height: 44px;
    margin: 0;
    padding-block: 0;
    background-color: var(--sys-color-surface);
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-return-bar a {
    min-height: 44px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm][data-cars-booking-flow] .pvl-hero--with-resources {
    padding-top: 8px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm][data-cars-booking-flow] .pvl-detail-mobile-bar {
    row-gap: 8px;
    padding: 12px 32px calc(12px + env(safe-area-inset-bottom));
    background: var(--sys-color-surface);
    border-top-color: var(--sys-color-line);
    box-shadow: none;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-footer-heading {
    display: flex;
    grid-area: 1 / 1 / auto / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: auto;
    padding: 0;
    border: 0;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-footer-heading .pvl-mobile-vehicle {
    --pvp-name-max-size: 15px;
    width: auto;
    margin: 0;
    color: var(--sys-color-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-summary-schedule-edit,
  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-footer-dates {
    padding-bottom: 0;
    border-bottom: 0;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-summary-schedule-edit {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 44px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-summary-schedule-lines {
    gap: 2px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-summary-date-line {
    min-height: 20px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-summary-date-line > span {
    color: var(--sys-color-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-summary-date-line > strong {
    color: var(--sys-color-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-summary-schedule-change {
    flex-direction: row;
    gap: .25em;
    width: auto;
    height: 44px;
    padding: 0 2px 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--sys-color-brand-text);
    white-space: nowrap;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-summary-schedule-edit:active .pvl-summary-schedule-change {
    background-color: var(--pvl-soft);
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-summary-schedule-edit:focus-visible {
    outline-color: var(--sys-color-brand);
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-footer-heading .pvl-preview-price {
    align-self: baseline;
    width: auto;
    max-width: 48%;
    margin: 0;
    text-align: right;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-footer-heading .pvl-preview-price > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-footer-heading .pvl-preview-price > strong {
    color: var(--sys-color-brand-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    word-break: keep-all;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-preview-booking-row {
    grid-area: 3 / 1 / auto / -1;
    margin: 0;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-preview-booking-row > [data-vehicle-option-return],
  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar .pvl-preview-booking-row > .pvl-cta {
    border-radius: 8px;
  }

  body.pvl-page .pvl[data-cars-reading-rhythm] .pvl-detail-mobile-bar [data-vehicle-option-return] {
    border: 0;
    background: transparent;
    color: var(--sys-color-muted);
  }
}