/* ==================================================
   BML COMPLETE CUSTOM CSS
   Light surfaces, gold gradients, booking highlights
   and gold car preloader.
   ================================================== */

html:root {
  /* Gold gradient: darker left, lighter right. */
  --bml-button: linear-gradient(
    90deg,
    #D8BE41 0%,
    #F3E16A 100%
  );

  /* Slightly darker gold on hover. */
  --bml-button-hover: linear-gradient(
    90deg,
    #C2A52E 0%,
    #D3BC43 50%,
    #E5D35E 100%
  );

  /* Light header gradient. */
  --bml-header: linear-gradient(
    90deg,
    #E6DED0 0%,
    #F0EAE0 55%,
    #F6F3ED 100%
  );

  /* Footer and newsletter gradient. */
  --bml-footer: linear-gradient(
    90deg,
    #DBCFBB 0%,
    #E6DDCF 55%,
    #EFEAE1 100%
  );

  --primary-color: #E1CA4F !important;
  --primary-color-hover: #C2A52E !important;
  --primary-color-rgb: 225, 202, 79 !important;

  --primary-badge-background-color: #EFEAE1 !important;
  --secondary-color: #F6F3ED !important;

  --heading-color: #202020 !important;
  --text-color: #5E5B55 !important;
  --primary-button-text-color: #202020 !important;
}

/* ==================================================
   1. PAGE BACKGROUND
   ================================================== */

html[data-bs-theme="light"] {
  --bs-background-body: #F6F3ED;
  --bs-background-card: #FFFFFF;
  --bs-border-color: #DDD6C9;
}

body {
  background-color: #F6F3ED !important;
  color: #5E5B55;
}

/* ==================================================
   2. HEADER AND NAVIGATION
   ================================================== */

header.header,
header.header > .container-fluid,
header.header .top-bar {
  background: var(--bml-header) !important;
  border-color: #DDD6C9 !important;
}

header.header .top-bar {
  --header-top-text-color: #202020 !important;
}

header.header .main-menu > li > a,
header.header .header-login-btn,
header.header .top-bar .arrow-down,
header.header .top-bar .head-lang,
header.header .top-bar .head-currency,
header.header .top-bar :is(
  .head-lang,
  .head-currency
) :is(a, span) {
  color: #202020 !important;
}

header.header .ae-anno-announcement-wrapper {
  --text-color: #202020 !important;
}

/* ==================================================
   3. VEHICLE SEARCH
   ================================================== */

#js-box-search-advance {
  --block-car-advance-search-background-color: #F6F3ED !important;
}

#js-box-search-advance .box-search-advance {
  background-color: #FFFFFF !important;
  border-color: #DDD6C9 !important;
}

/* ==================================================
   4. GOLD BUTTONS
   ================================================== */

body :is(
  .btn.btn-primary,
  .btn.btn-brand-2,
  .btn.btn-book,
  .card-button .btn.btn-gray,
  header.header .btn.btn-signin.text-dark,
  header.header .burger-icon-2,
  .mobile-signin-wrapper .mobile-signin-btn,
  .mobile-add-listing-wrapper .mobile-add-listing-btn
) {
  background: var(--bml-button) !important;
  border-color: transparent !important;
  color: var(--bml-button-label, #202020) !important;
  box-shadow: none !important;
}

/* Button hover colors. */
body :is(
  .btn.btn-primary,
  .btn.btn-brand-2,
  .btn.btn-book,
  .card-button .btn.btn-gray,
  header.header .btn.btn-signin.text-dark,
  header.header .burger-icon-2,
  .mobile-signin-wrapper .mobile-signin-btn,
  .mobile-add-listing-wrapper .mobile-add-listing-btn
):not(:disabled):not(.disabled):not(.btn-loading):not(
  [aria-disabled="true"]
):hover {
  background: var(--bml-button-hover) !important;
  color: #202020 !important;
}

body .card-button .btn.btn-gray svg {
  stroke: #202020 !important;
}

/* Preserve the existing button loading indicator. */
body .btn.btn-loading {
  --bml-button-label: transparent;
}

body .btn.btn-loading::after {
  color: #202020 !important;
}

/* ==================================================
   5. MOBILE NAVIGATION
   ================================================== */

body .mobile-header-wrapper-style,
body .sidebar-canvas-wrapper {
  background-color: #F6F3ED !important;
}

body :is(
  .mobile-signin-wrapper .mobile-signin-btn,
  .mobile-add-listing-wrapper .mobile-add-listing-btn
) :is(span, svg) {
  color: #202020 !important;
}

/* Disable shine on mobile sign-in and listing buttons. */
body .mobile-signin-wrapper .mobile-signin-btn::before,
body .mobile-add-listing-wrapper .mobile-add-listing-btn::before {
  content: none !important;
}

/* ==================================================
   6. FOOTER AND NEWSLETTER
   ================================================== */

footer.footer {
  --footer-background-color: #EFEAE1 !important;
  --footer-heading-color: #202020 !important;
  --footer-text-color: #5E5B55 !important;
  --footer-border-color: #DDD6C9 !important;

  background: var(--bml-footer) !important;
  color: #5E5B55 !important;
}

footer.footer .widget-title,
footer.footer .widget-newsletter h5 {
  color: #202020 !important;
}

footer.footer .footer-bottom :is(p, span, a, strong),
footer.footer .menu-footer a {
  color: #5E5B55 !important;
}

footer.footer a:hover {
  color: #202020 !important;
}

footer.footer .form-newsletter .form-control {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #DDD6C9 !important;
  color: #202020 !important;
  padding-inline-start: 18px;
}

footer.footer .form-newsletter .form-control::placeholder {
  color: #5E5B55 !important;
  opacity: 1;
}

/* ==================================================
   7. BOOKING BUTTON SHINE: BASE STYLES
   ================================================== */

body :is(
  .card-button .btn.btn-gray[href*="/cars/"],
  .car-detail-page .booking-form .btn.btn-book
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/*
   Use ::before for the shine effect.
   Keep ::after available for the button loading indicator.
*/
body :is(
  .card-button .btn.btn-gray[href*="/cars/"],
  .car-detail-page .booking-form .btn.btn-book
)::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: -35%;
  left: 0;
  width: 55%;
  height: 170%;

  pointer-events: none;
  opacity: 0;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    transparent 100%
  );

  transform: translateX(-180%) skewX(-18deg);
}

@keyframes bml-booking-shine {
  0% {
    transform: translateX(-180%) skewX(-18deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translateX(340%) skewX(-18deg);
    opacity: 0;
  }
}

/* ==================================================
   8. CAR DETAILS: CONTINUOUS BOOK NOW HIGHLIGHT
   Includes mobile devices; no hover is required.
   ================================================== */

@media (prefers-reduced-motion: no-preference) {
  body .car-detail-page .booking-form
  .btn.btn-book:not(:disabled):not(.disabled):not(
    .btn-loading
  ):not([aria-disabled="true"])::before {
    animation: bml-booking-shine 2.8s ease-in-out infinite;
  }
}

/* ==================================================
   9. VEHICLE CARDS: HIGHLIGHT ON HOVER ONLY
   ================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body .card-button
  .btn.btn-gray[href*="/cars/"]:not(:disabled):not(
    .disabled
  ):not(.btn-loading):not(
    [aria-disabled="true"]
  ):hover::before {
    animation: bml-booking-shine 1.1s ease-in-out 1;
  }
}

/* ==================================================
   10. KEYBOARD FOCUS
   ================================================== */

body :is(
  .card-button .btn.btn-gray[href*="/cars/"],
  .car-detail-page .booking-form .btn.btn-book
):focus-visible {
  outline: 2px solid #77613D;
  outline-offset: 3px;
}

/* ==================================================
   11. REDUCED MOTION: BOOKING BUTTONS
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  body :is(
    .card-button .btn.btn-gray[href*="/cars/"],
    .car-detail-page .booking-form .btn.btn-book
  )::before {
    content: none;
    animation: none;
  }
}

/* ==================================================
   12. HIDE THE EXISTING POWERED BY CREDIT
   ================================================== */

span:has(> a[href="https://www.futuregenapps.com"]) {
  display: none !important;
}

/* ==================================================
   13. GOLD CAR PRELOADER

   The optimized WebP is already uploaded to BML.
   To change the icon later, replace only the URL below.

   Required theme settings:
   Enable Preloader = Yes
   Preloader Version = Default

   The theme controls when the preloader disappears.
   This CSS does not add an extra loading delay.
   ================================================== */

#preloader-active {
  --bml-loader-car: url("https://bookmyluxury.com/storage/bml-auto-loader-transparent.webp");

  background-color: #F6F3ED !important;
}

/* Full-screen background and centered layout. */
#preloader-active .preloader {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F6F3ED !important;
  transform: none !important;
}

/* Space for the car, brand name, loading line and status. */
#preloader-active .preloader-inner {
  position: relative !important;
  display: block !important;
  width: 280px !important;
  max-width: calc(100vw - 24px);
  height: 248px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

#preloader-active .preloader-inner > .text-center {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Replace the colored spinner with the transparent car. */
#preloader-active .page-loader {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 50% !important;
  display: block !important;
  width: 210px !important;
  height: 152px !important;
  margin: 0 0 0 -105px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bml-loader-car) center / contain no-repeat !important;
  animation: bml-car-glide 2.8s ease-in-out infinite !important;
}

/* Remove the original spinner rings. */
#preloader-active .page-loader::before,
#preloader-active .page-loader::after,
#preloader-active .preloader-inner::before {
  content: none !important;
  display: none !important;
}

/* Shared text positioning. */
#preloader-active .preloader-inner > .text-center::before,
#preloader-active .preloader-inner > .text-center::after {
  position: absolute !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: center !important;
  transform: none !important;
  animation: none !important;
}

/* Brand name. */
#preloader-active .preloader-inner > .text-center::before {
  content: "BOOK MY LUXURY" !important;
  top: 159px !important;
  color: #484239 !important;
  font: 500 11px/18px Arial, sans-serif !important;
  letter-spacing: 2.4px !important;
}

/* English loading status. */
#preloader-active .preloader-inner > .text-center::after {
  content: "Loading..." !important;
  top: 220px !important;
  color: #71695D !important;
  font: 400 12px/18px Arial, sans-serif !important;
  letter-spacing: 0.3px !important;
}

/* Animated gold loading line. */
#preloader-active .preloader-inner::after {
  content: "" !important;
  position: absolute !important;
  top: 198px !important;
  left: 50% !important;
  display: block !important;
  width: 132px !important;
  height: 3px !important;
  margin-left: -66px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background-color: #E6DDCA !important;
  background-image: linear-gradient(
    90deg,
    #B38C00,
    #F5DC74
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 65px 100% !important;
  background-position: -65px 0;
  animation: bml-loading-line 1.8s linear infinite !important;
}

/* Gentle horizontal movement of the car. */
@keyframes bml-car-glide {
  0%, 100% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }
}

/* Gold segment moves across the loading track. */
@keyframes bml-loading-line {
  from {
    background-position: -65px 0;
  }

  to {
    background-position: 132px 0;
  }
}

/* ==================================================
   14. REDUCED MOTION: PRELOADER
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  #preloader-active .page-loader {
    animation: none !important;
    transform: none !important;
  }

  #preloader-active .preloader-inner::after {
    animation: none !important;
    background-position: center !important;
  }
}



/* ==================================================
   15. COMPACT HEADER AND FOOTER
   Reduce vertical spacing while keeping readable text
   and comfortable controls. Preserve the theme's menus,
   sticky-header behavior, colors and loading logic.
   ================================================== */

/* Header: 64px logo + 6px padding on each side. */
header.header .main-header {
  min-height: 76px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

header.header .header-logo img {
  width: auto !important;
  height: 64px !important;
  max-height: 64px !important;
  max-width: 100%;
  object-fit: contain;
}

header.header .main-menu > li > a {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Reduce gaps between contact links in the top bar. */
header.header .top-bar .widget-contact-information .phone-head {
  margin-inline-end: 12px !important;
  color: #202020 !important;
}

/* Footer: smaller outer spacing and newsletter gap. */
footer.footer {
  padding-top: 28px !important;
}

footer.footer .footer-top {
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

footer.footer .widget-newsletter h5 {
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
}

footer.footer .form-newsletter .form-control,
footer.footer .form-newsletter button[type="submit"] {
  box-sizing: border-box;
  height: 48px !important;
  min-height: 48px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Use the available footer width without oversized gaps. */
footer.footer > .container > .row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 24px;
  align-items: start;
  margin-inline: 0 !important;
}

footer.footer > .container > .row > * {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding-inline: 0 !important;
  margin-bottom: 0 !important;
}

footer.footer .widget-site-information {
  grid-column: 1 / -1;
}

footer.footer .widget-site-information > .mb-20 {
  margin-bottom: 0 !important;
}

/* Keep the footer logo proportional. */
footer.footer .widget-site-information > .mb-20 > a.d-flex {
  margin-bottom: 12px !important;
}

footer.footer .widget-site-information > .mb-20 > a.d-flex > img {
  display: block;
  width: 200px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

footer.footer .widget-site-information .box-info-contact {
  margin-bottom: 16px !important;
}

footer.footer .widget-site-information .contact-list {
  margin-bottom: 0 !important;
}

footer.footer .widget-site-information .contact-item-wrapper {
  margin-bottom: 8px !important;
}

footer.footer .widget-site-information .contact-item-wrapper:last-child {
  margin-bottom: 0 !important;
}

footer.footer .widget-site-information .contact-item-wrapper span {
  min-width: 0;
  overflow-wrap: anywhere;
}

footer.footer .box-need-help .phone-support {
  font-size: 18px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}

footer.footer .box-need-help .phone-support a {
  font-size: inherit !important;
  line-height: inherit !important;
  color: #202020 !important;
}

/* Compact link spacing; preserve the existing font size. */
footer.footer .widget-title {
  margin-bottom: 10px !important;
}

footer.footer .menu-footer li {
  margin-bottom: 4px !important;
}

footer.footer .menu-footer li:last-child {
  margin-bottom: 0 !important;
}

footer.footer .menu-footer li > a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding-block: 3px;
  overflow-wrap: anywhere;
}

/* Smaller gap above the copyright and social links. */
footer.footer .footer-bottom {
  margin-top: 24px !important;
  padding-top: 16px !important;
  padding-bottom: 14px !important;
}

footer.footer .footer-bottom .row {
  row-gap: 12px;
}

footer.footer .footer-bottom .mb-20 {
  margin-bottom: 0 !important;
}

/* Four balanced columns on desktop. */
@media (min-width: 992px) {
  footer.footer > .container > .row {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }

  footer.footer .widget-site-information {
    grid-column: auto;
  }
}

/* Compact mobile header and comfortable footer tap targets. */
@media (max-width: 767.98px) {
  header.header .main-header {
    min-height: 68px;
  }

  header.header .header-logo img {
    height: 56px !important;
    max-height: 56px !important;
  }

  footer.footer {
    padding-top: 24px !important;
  }

  footer.footer .widget-newsletter h5 {
    font-size: 22px !important;
  }

  footer.footer .widget-newsletter > .mt-4 {
    margin-top: 16px !important;
  }

  footer.footer .menu-footer li {
    margin-bottom: 0 !important;
  }

  footer.footer .menu-footer li > a {
    min-height: 44px;
  }
}

/* Preserve larger tap targets on tablets and touch devices. */
@media (pointer: coarse) {
  footer.footer .menu-footer li > a {
    min-height: 44px;
  }
}


/* ==========================================================
   16. BALANCED HOMEPAGE SPACING
   Homepage-only layout test. Existing colors and effects stay.
   Section 17 adds shared spacing across the public website.
   ========================================================== */

/* Leave room for the overlay header and the search panel. */
#page-home .shortcode-hero-banner.block-banner-home1 {
  min-height: 660px !important;
  padding: 200px 0 190px !important;
}

#page-home .shortcode-hero-banner h1.shortcode-title {
  font-size: clamp(40px, 4vw, 56px) !important;
  line-height: 1.15 !important;
  margin-bottom: 24px !important;
}

/* Keep the panel in the document flow so it leaves no empty band. */
#page-home #js-box-search-advance {
  margin-top: -196px !important;
  padding-bottom: 24px !important;
  position: relative;
  z-index: 2;
}

#page-home #js-box-search-advance .box-search-advance {
  top: auto !important;
  margin: 0 !important;
  padding: 18px 22px !important;
}

#page-home #js-box-search-advance .box-bottom-search {
  margin-top: 10px !important;
  padding: 12px 0 !important;
}

#page-home #js-box-search-advance .item-search {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

#page-home #js-box-search-advance .search-input {
  min-height: 44px;
  height: 44px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

#page-home #js-box-search-advance button.btn {
  min-height: 52px;
  padding: 14px 24px !important;
}

/* Brands retain a clear heading, subtitle, and comfortable cards. */
#page-home .shortcode-brands.brand-style-1 {
  padding: 40px 0 !important;
}

#page-home .shortcode-brands .box-search-category {
  margin-top: 0 !important;
}

#page-home .shortcode-brands .shortcode-title {
  margin-bottom: 12px !important;
}

#page-home .shortcode-brands .brand-slider {
  margin-top: 26px !important;
}

#page-home .shortcode-brands .item-brand {
  min-height: 76px;
  padding: 18px 22px !important;
  margin-bottom: 0 !important;
}

/* Reduce the gaps before the two vehicle listing sections. */
#page-home .shortcode-cars.car-style-lasted,
#page-home .shortcode-cars.car-style-feature {
  padding-top: 52px !important;
  padding-bottom: 56px !important;
}

/* Use a landscape video image while keeping the play control. */
#page-home .shortcode-intro-video.shortcode-intro-video-style-1 {
  padding: 56px 0 !important;
}

#page-home .shortcode-intro-video .card-video {
  margin-bottom: 0 !important;
}

#page-home .shortcode-intro-video .card-image > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* Keep the owner steps readable without the large trailing gap. */
#page-home .shortcode-why-us.box-why-book-22 {
  padding: 48px 0 !important;
}

#page-home .shortcode-why-us .row.mt-40 {
  margin-top: 36px !important;
  row-gap: 20px;
}

#page-home .shortcode-why-us .card-why {
  margin-bottom: 12px !important;
}

#page-home .shortcode-why-us .card-why .card-image {
  height: 64px !important;
  margin-bottom: 16px !important;
}

#page-home .shortcode-why-us .card-why .card-image img {
  width: auto !important;
  height: 64px !important;
  object-fit: contain;
}

/* Allow the existing stacked search layout on smaller screens. */
@media (min-width: 992px) {
  #page-home #js-box-search-advance {
    --block-car-advance-search-background-color: transparent !important;
  }
}

/* Give the date range enough width in the desktop search row. */
@media (min-width: 1200px) {
  #page-home #js-box-search-advance .box-bottom-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.25fr) auto;
    align-items: center;
  }

  #page-home #js-box-search-advance .item-search {
    width: auto !important;
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  #page-home .shortcode-hero-banner.block-banner-home1 {
    min-height: 0 !important;
    padding: 180px 0 56px !important;
  }

  #page-home .shortcode-hero-banner h1.shortcode-title {
    font-size: clamp(34px, 5.5vw, 48px) !important;
  }

  #page-home #js-box-search-advance {
    margin-top: 0 !important;
    padding: 24px 0 32px !important;
  }

  #page-home #js-box-search-advance .box-search-advance {
    padding: 18px !important;
  }

  #page-home .shortcode-intro-video.shortcode-intro-video-style-1 {
    padding: 44px 0 !important;
  }

  #page-home .shortcode-intro-video .col-lg-6.mt-lg-0.mt-4 {
    margin-top: 32px !important;
  }
}

@media (max-width: 575.98px) {
  #page-home .shortcode-hero-banner.block-banner-home1 {
    padding: 160px 0 40px !important;
  }

  #page-home .shortcode-brands.brand-style-1,
  #page-home .shortcode-why-us.box-why-book-22 {
    padding: 36px 0 !important;
  }

  #page-home .shortcode-cars.car-style-lasted,
  #page-home .shortcode-cars.car-style-feature {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  #page-home #js-box-search-advance .item-search {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}



/* ==========================================================
   17. SHARED RESPONSIVE SPACING FOR THE PUBLIC WEBSITE
   Central values for existing pages and reusable components.
   Desktop: 56px sections. Tablet: 44px. Phone: 36px.
   Keep content height automatic; never crop text or form controls.
   ========================================================== */

:root {
  --bml-section-space: 56px;
  --bml-page-space: 48px;
  --bml-content-gap: 28px;
  --bml-grid-gap: 24px;
}

/* Standard content pages, brand archives, news archives and sign-in. */
body main .page-default-content {
  padding-top: var(--bml-page-space) !important;
  padding-bottom: var(--bml-page-space) !important;
}

/* Reusable marketing sections use the same spacing on every page. */
body main :is(
  .shortcode-car-types,
  .shortcode-cars-by-locations,
  .shortcode-blog-posts,
  .shortcode-intro-video,
  .shortcode-faqs,
  .shortcode-contact-form
) {
  padding-top: var(--bml-section-space) !important;
  padding-bottom: var(--bml-section-space) !important;
}

body main .shortcode-cars,
body main .shortcode-why-us {
  padding-top: var(--bml-page-space) !important;
  padding-bottom: var(--bml-section-space) !important;
}

/* Avoid adding a second large outer gap inside a padded CMS page. */
body main .page-default-content > .ck-content > :is(
  .shortcode-contact-form,
  .shortcode-brands
) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Brand carousel spacing also applies outside the homepage. */
body main .shortcode-brands.brand-style-1 {
  padding: 40px 0 !important;
}

body main .shortcode-brands .box-search-category {
  margin-top: 0 !important;
}

body main .shortcode-brands .shortcode-title {
  margin-bottom: 12px !important;
}

body main .shortcode-brands .brand-slider {
  margin-top: 26px !important;
}

body main .shortcode-brands.brand-style-1 .item-brand {
  min-height: 76px;
  padding: 18px 22px !important;
  margin-bottom: 0 !important;
}

/* Consistent heading-to-grid gaps without stacked margins. */
body main :is(.shortcode-car-types, .shortcode-cars-by-locations)
  .row.align-items-end.mb-40 {
  margin-bottom: var(--bml-content-gap) !important;
}

body main .shortcode-car-types .box-list-populars,
body main .shortcode-cars-by-locations .box-list-featured {
  margin-top: 0 !important;
}

body main .shortcode-blog-posts .shortcode-title {
  margin-bottom: 12px !important;
}

body main .shortcode-blog-posts .box-list-news {
  margin-top: var(--bml-content-gap) !important;
}

/* Landscape category and blog previews preserve image proportions. */
body main .shortcode-car-types .card-popular .card-image,
body main .shortcode-blog-posts .card-news .card-image {
  height: auto !important;
}

body main .shortcode-car-types .card-popular .card-image > a,
body main .shortcode-blog-posts .card-news .card-image > a {
  display: block;
}

body main .shortcode-car-types .card-popular .card-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 60%;
}

body main .shortcode-blog-posts .card-news .card-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body main .shortcode-blog-posts .card-news .card-info {
  padding: 24px !important;
}

body main .shortcode-blog-posts .card-news .card-title {
  margin-bottom: 22px !important;
}

/* Start earning: reduce outer space and unnecessary title indentation. */
body main .shortcode-featured-block .box-cta-3 {
  padding-top: var(--bml-section-space) !important;
  padding-bottom: var(--bml-section-space) !important;
}

body main .shortcode-featured-block .shortcode-title {
  padding-inline-end: 0 !important;
  font-size: clamp(30px, 2.7vw, 40px);
  line-height: 1.25;
}

@media (min-width: 992px) {
  body main .shortcode-featured-block .box-cta-3 .col-lg-5 {
    width: 50%;
    padding-inline-end: 36px !important;
  }

  body main .shortcode-featured-block .box-cta-3 .col-lg-6.offset-lg-1 {
    width: 50%;
    margin-inline-start: 0 !important;
  }
}

/* Shared video and owner-step components on additional pages. */
body main .shortcode-intro-video .card-video {
  margin-bottom: 0 !important;
}

body main .shortcode-intro-video .card-image > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body main .shortcode-why-us .row.mt-40 {
  margin-top: 36px !important;
  row-gap: 20px;
}

body main .shortcode-why-us .card-why {
  margin-bottom: 12px !important;
}

body main .shortcode-why-us .card-why .card-image {
  height: 64px !important;
  margin-bottom: 16px !important;
}

body main .shortcode-why-us .card-why .card-image img {
  width: auto !important;
  height: 64px !important;
  object-fit: contain;
}

/* Reading pages and vehicle details keep normal, comfortable content flow. */
body main .post-detail-page .section-box.pt-96 {
  padding-top: var(--bml-section-space) !important;
}

body main .car-detail-page .box-breadcrumb .breadcrumbs {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

body main .car-detail-page .box-content-tour-detail {
  padding-top: 32px !important;
}

/* The app teaser and shared footer form a compact page ending. */
body .widget-install-app .row.py-5 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

footer.footer .widget-site-information > .mb-20 > a.d-flex > img {
  width: 168px !important;
}

footer.footer .footer-bottom {
  margin-top: 20px !important;
}

footer.footer .box-need-help .phone-support {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Prevent long translated headings and contact details from overflowing. */
body main .shortcode-title,
footer.footer .widget-title {
  overflow-wrap: break-word;
}

@media (max-width: 1199.98px) {
  :root {
    --bml-section-space: 44px;
    --bml-page-space: 40px;
    --bml-content-gap: 24px;
  }
}

/* A two-column search fits small laptops and landscape tablets. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #page-home #js-box-search-advance .box-bottom-search {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }

  #page-home #js-box-search-advance .item-search {
    width: auto !important;
    min-width: 0;
  }

  #page-home #js-box-search-advance .item-search:nth-child(2) {
    border-inline-end: 0 !important;
  }

  #page-home #js-box-search-advance button.btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  body main .shortcode-featured-block .col-lg-6.mt-4,
  body main .shortcode-intro-video .col-lg-6.mt-4 {
    margin-top: 28px !important;
  }
}

@media (max-width: 767.98px) {
  :root {
    --bml-section-space: 36px;
    --bml-page-space: 32px;
    --bml-content-gap: 22px;
    --bml-grid-gap: 20px;
  }

  body main .shortcode-brands.brand-style-1 {
    padding: 36px 0 !important;
  }

  body main .shortcode-why-us .row.mt-40 {
    margin-top: 28px !important;
  }

  body main .shortcode-blog-posts .card-news .card-info {
    padding: 20px !important;
  }

  body main .shortcode-featured-block .shortcode-title {
    font-size: 30px;
  }

  body main :is(
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], select, textarea
  ),
  #page-home #js-box-search-advance .search-input {
    font-size: 16px !important;
  }

  body .widget-install-app .row.py-5 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  footer.footer .form-newsletter {
    width: 100%;
  }
}

/* Comfortable touch targets without shrinking checkout or booking controls. */
@media (pointer: coarse) {
  body main .btn,
  body main .letter-btn,
  footer.footer .btn {
    min-height: 44px;
  }

  body main a.card-button,
  body main .card-button > a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* END OF BML COMPLETE CUSTOM CSS */