/* Top-page reservation CTA typography and alignment. */
#top.buddica-top .bt-reservation .search_btn .btn,
#top.buddica-top .bt-footer-reservation .search_btn .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 36px !important;
}

#top.buddica-top .bt-reservation .search_btn .btn p,
#top.buddica-top .bt-footer-reservation .search_btn .btn p {
  margin: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

@media screen and (max-width: 640px) {
  #top.buddica-top .bt-reservation .search_btn .btn,
  #top.buddica-top .bt-footer-reservation .search_btn .btn {
    min-height: 48px !important;
    padding: 0 24px !important;
  }
}

/* Keep the insurance details readable at every viewport size. The legacy
 * desktop rule clipped long content, while the mobile rule only handled
 * narrow screens. Constrain the dialog itself and scroll its contents. */
#vehicle_option .vehicle_option .option_wrapper .option_container .title_wrapper .md-contents {
  width: min(800px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(90vh, 760px);
  overflow-y: auto;
  box-sizing: border-box;
}

#vehicle_option .vehicle_option .option_wrapper .option_container .title_wrapper .md-contents .md-inner {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* The option details are actions, not navigation links. Keep the visual
 * treatment while removing the browser's default button chrome. */
#vehicle_option .quest.md-btn {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Keep the mobile CTA above decorative layers and tappable on touch screens. */
#top.buddica-top .bt-reservation .search_btn,
#top.buddica-top .bt-footer-reservation .search_btn,
#top.buddica-top .bt-reservation .search_btn .btn,
#top.buddica-top .bt-footer-reservation .search_btn .btn {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

/* Vite serves the legacy reservation step images from /img, not /build/img. */
.reserve_step .step_wrapper ul .past::before {
  background-image: url("/img/common/img_arrow_past.png") !important;
}

.reserve_step .step_wrapper ul .current::before {
  background-image: url("/img/common/img_arrow_current.png") !important;
}

.reserve_step .step_wrapper ul .future::before {
  background-image: url("/img/common/img_arrow_future.png") !important;
}

@media screen and (max-width: 959px) {
  .reserve_step .step_wrapper ul .past::before {
    background-image: url("/img/common/img_arrow_past_sp.png") !important;
  }

  .reserve_step .step_wrapper ul .current::before {
    background-image: url("/img/common/img_arrow_current_sp.png") !important;
  }

  .reserve_step .step_wrapper ul .future::before {
    background-image: url("/img/common/img_arrow_future_sp.png") !important;
  }
}

/* Top-page usability refinements. Kept under #top so shared UI is unchanged. */
#top.buddica-top .bt-inner {
  width: min(1200px, calc(100% - 48px));
}

#top.buddica-top .bt-section-head > p {
  max-width: 720px;
  line-height: 1.9;
}

#top.buddica-top .bt-about__body {
  max-width: 780px;
  text-align: center;
}
#top.buddica-top .bt-reservation .selector,
#top.buddica-top .bt-footer-reservation .selector {
  gap: 12px !important;
  height: 96px !important;
  margin-top: 0 !important;
  grid-template-rows: repeat(2, 42px) !important;
  grid-auto-rows: 42px;
}

/* Each reservation control must read as its own control, including the
 * vertically adjacent date and time fields. */
#top.buddica-top .bt-reservation .selector > .select_box,
#top.buddica-top .bt-reservation .selector > .datepicker_box,
#top.buddica-top .bt-footer-reservation .selector > .select_box,
#top.buddica-top .bt-footer-reservation .selector > .datepicker_box {
  margin: 0 !important;
  overflow: hidden;
  border-radius: 5px;
}
#top.buddica-top .bt-about {
  background-image: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.72)), url('/img/buddica/bg/about-purchased.jpeg');
  background-position: center;
  background-size: cover;
}
#top.buddica-top .bt-about {
  min-height: 1120px;
}
#top.buddica-top .bt-about__body .bt-about__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.58em;
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}
#top.buddica-top .bt-about__body .bt-about__copy span,
#top.buddica-top .bt-about__body .bt-about__copy strong {
  display: block;
}
#top.buddica-top .bt-about__body .bt-about__copy strong {
  margin-top: 0.7em;
  font-size: clamp(22px, 2.25vw, 34px);
  font-weight: 900;
  line-height: 1.35;
}
#top.buddica-top .bt-feature-car h3,
#top.buddica-top .bt-hero__slide .bt-hero__copy {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* First view: one vehicle only, aligned to the Figma composition. */
#top.buddica-top .bt-hero__slide.is-exiting {
  visibility: hidden !important;
  opacity: 0 !important;
}

#top.buddica-top .bt-hero__visual {
  background: #303030 !important;
}

#top.buddica-top .bt-hero__slide .bt-hero__bg {
  inset: 0 !important;
  background:
    linear-gradient(90deg, #303030 0 49%, rgba(48, 48, 48, 0) 49%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08)),
    var(--bt-hero-bg) center center / cover no-repeat;
  /* Keep the photo edge on the orange slash, rather than exposing a
   * separate photo wedge to its left. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 52% 100%, 63% 0, 0 0) !important;
}

#top.buddica-top .bt-hero__slide .bt-hero__band {
  display: none !important;
}

/* The orange slash is an edge treatment of the photo, so its right edge is
 * deliberately identical to the background clip boundary above. */
#top.buddica-top .bt-hero__slide::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background: #f17623;
  clip-path: polygon(61.5% 0, 63% 0, 52% 100%, 50.5% 100%);
}

#top.buddica-top .bt-hero__visual .bt-hero__slide .bt-hero__car {
  top: clamp(110px, 8.6vw, 122px) !important;
  left: 52% !important;
  width: min(900px, 64vw) !important;
  height: auto !important;
}

#top.buddica-top .bt-hero__slide .bt-hero__copy {
  top: 96px !important;
  bottom: auto !important;
}

#top.buddica-top .bt-hero__slide .bt-hero__bc {
  top: 44px !important;
  right: auto !important;
  bottom: auto !important;
  left: clamp(40px, 3.5vw, 64px) !important;
  z-index: 2 !important;
  width: clamp(260px, 27vw, 390px) !important;
}

#top.buddica-top .bt-hero__slide .bt-hero__bc img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  transform: none !important;
  width: 100% !important;
  opacity: 1 !important;
  /* The supplied BC artwork is a wide source image. The Figma first view
   * uses it as a tall, background-size emblem. */
  transform: scaleY(1.72) !important;
  transform-origin: left top !important;
}

@media screen and (max-width: 768px) {
  #top.buddica-top .bt-reservation .selector,
  #top.buddica-top .bt-footer-reservation .selector {
    height: auto !important;
    grid-template-rows: none !important;
    grid-auto-rows: 48px;
  }

  #top.buddica-top .bt-hero__visual .bt-hero__slide .bt-hero__car {
    top: 96px !important;
    left: 53% !important;
    width: 112vw !important;
  }

  #top.buddica-top .bt-hero__slide .bt-hero__bc {
    top: 28px !important;
    right: auto !important;
    bottom: auto !important;
    left: 20px !important;
    width: 220px !important;
  }

  #top.buddica-top .bt-hero__slide .bt-hero__copy {
    top: 64px !important;
  }
}
#vehicle_confirm .list .btn { cursor: default; text-decoration: none; }
.vehicle-image-placeholder {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 24px;
  color: #555;
  font-weight: 700;
  text-align: center;
  background: #eee;
}

#top.buddica-top .bt-about__body img {
  margin-right: auto;
  margin-left: auto;
}

#top.buddica-top .bt-car-row {
  grid-template-columns: minmax(330px, 0.42fr) minmax(0, 0.58fr);
  min-height: 230px;
}

#top.buddica-top .bt-car-row__text {
  padding: 30px 38px;
}

#top.buddica-top .bt-car-row__text span {
  display: block;
  max-width: 500px;
  line-height: 1.8;
}

/* Car-list copy sits on a dark gradient in the Figma layout. Keep every
 * informational line white so the vehicle name never disappears into it. */
#top.buddica-top .bt-car-row__text p,
#top.buddica-top .bt-car-row__text h3,
#top.buddica-top .bt-car-row__text span {
  color: #fff !important;
}

#top.buddica-top .bt-car-row img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  transform: none;
}

/* Standard vehicle categories follow the Figma's six-card catalogue rather
 * than repeating the luxury-vehicle cards above. */
#top.buddica-top .bt-car-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  max-width: 1080px;
  margin: 0 auto;
}

#top.buddica-top .bt-normal-car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 366px;
  padding: 36px 40px 26px;
  overflow: hidden;
  color: #111;
  text-decoration: none;
  background: linear-gradient(135deg, #fff, #e9e9e9);
}

#top.buddica-top .bt-normal-car-card h3 {
  margin: 0;
  color: #111;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 900;
}

#top.buddica-top .bt-normal-car-card p {
  margin: 14px 0 0;
  color: #111;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 900;
}

#top.buddica-top .bt-normal-car-card img {
  width: 100%;
  height: 185px;
  margin: auto 0 0;
  object-fit: contain;
}

#top.buddica-top .bt-normal-car-card span {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  font-size: 20px;
  background: #000;
  border-radius: 50%;
  transition: transform .2s, background-color .2s;
}

#top.buddica-top .bt-normal-car-card:hover span,
#top.buddica-top .bt-normal-car-card:focus-visible span {
  background: #f17623;
  transform: translateX(4px);
}

#top.buddica-top .bt-normal-car-card:focus-visible {
  outline: 3px solid #f17623;
  outline-offset: 4px;
}

#top.buddica-top .bt-vehicle-type__options .radio-label .btn {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

#top.buddica-top .bt-vehicle-type__options input:checked + .radio-label .btn {
  color: #fff !important;
  background: #f17623 !important;
  border-color: #f17623 !important;
}

#top.buddica-top .bt-vehicle-type__options .radio-label .btn:hover {
  border-color: #f17623 !important;
}

#top.buddica-top .bt-vehicle-type__options input:focus-visible + .radio-label .btn,
#top.buddica-top .bt-access__map:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

#top.buddica-top .bt-access__map {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

#top.buddica-top .bt-access__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
}

#top.buddica-top .bt-access__map:hover::after {
  background: rgba(0, 0, 0, 0.18);
}

#top.buddica-top .bt-access__map-link {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: #111;
  border-radius: 999px;
}

/* Store/access section: use the supplied Figma assets and copy. */
#top.buddica-top .bt-store-banner {
  height: min(34vw, 510px);
  min-height: 300px;
  background: url("/img/buddica/bg/access-store-figma.png") center / cover no-repeat !important;
}

#top.buddica-top .bt-store-banner::before,
#top.buddica-top .bt-store-banner__sign,
#top.buddica-top .bt-store-banner > p {
  display: none !important;
}

#top.buddica-top .bt-access__map {
  background: #f17623 url("/img/buddica/bg/access-map-figma.png") center / cover no-repeat !important;
  border: 0 !important;
}

/* The supplied map artwork already contains the BC location marker. */
#top.buddica-top .bt-access__pin,
#top.buddica-top .bt-access__map-link {
  display: none;
}

@media screen and (max-width: 900px) {
  #top.buddica-top .bt-inner {
    width: min(calc(100% - 40px), 720px);
  }

  #top.buddica-top .bt-car-row {
    grid-template-columns: 1fr;
  }

  #top.buddica-top .bt-car-row__text {
    padding: 28px 24px;
  }

  #top.buddica-top .bt-car-row img {
    max-height: 220px;
    padding: 0 18px 20px;
  }

  #top.buddica-top .bt-car-grid {
    gap: 20px;
  }

  #top.buddica-top .bt-normal-car-card {
    min-height: 300px;
    padding: 26px 24px 20px;
  }

  #top.buddica-top .bt-normal-car-card img { height: 142px; }

  #top.buddica-top .bt-about__body {
    max-width: 680px;
    padding: 52px 24px;
  }
  #top.buddica-top .bt-about { min-height: 1000px; }
  #top.buddica-top .bt-about__body .bt-about__copy { font-size: 14px; }

  #top.buddica-top .bt-service-card {
    min-height: 260px;
  }
}

@media screen and (max-width: 640px) {
  #top.buddica-top .bt-store-banner {
    min-height: 0;
    height: 210px;
  }

  #top.buddica-top .bt-car-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #top.buddica-top .bt-normal-car-card { min-height: 220px; padding: 18px 16px; }
  #top.buddica-top .bt-normal-car-card h3 { font-size: 15px; }
  #top.buddica-top .bt-normal-car-card p { margin-top: 8px; font-size: 11px; }
  #top.buddica-top .bt-normal-car-card img { height: 98px; }
  #top.buddica-top .bt-normal-car-card span { right: 12px; bottom: 12px; width: 30px; height: 30px; font-size: 15px; }

  #top.buddica-top .bt-about { min-height: 980px; }
  #top.buddica-top .bt-about__body .bt-about__copy {
    gap: 0.48em;
    font-size: 13px;
    line-height: 1.45;
  }
  #top.buddica-top .bt-about__body .bt-about__copy strong { font-size: 21px; }

  #top.buddica-top .bt-inner {
    width: calc(100% - 32px);
  }

  #top.buddica-top .bt-section-head > p {
    font-size: 14px;
    line-height: 1.85;
  }

  #top.buddica-top .bt-car-row__text {
    padding: 24px 20px;
  }

  #top.buddica-top .bt-car-row__text span {
    font-size: 14px;
    line-height: 1.8;
  }

  #top.buddica-top .bt-access__map {
    min-height: 250px;
  }

  #top.buddica-top .bt-access__map-link {
    right: 12px;
    bottom: 12px;
    font-size: 13px;
  }

  #top.buddica-top .bt-service__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  #top.buddica-top .bt-service-card { min-height: 0; height: 220px; }
  #top.buddica-top .bt-service-card div { padding: 12px 8px; }
  #top.buddica-top .bt-service-card span { font-size: 20px; }
  #top.buddica-top .bt-service-card p { font-size: 11px; line-height: 1.4; }
}