/*
 * UdonCarRent.com — Ecalypse 3.0.31 responsive width override.
 *
 * IMPORTANT:
 * The legacy booking templates call get_header()/get_footer() directly and
 * may not retain the WordPress Booking page body class. Therefore this file
 * intentionally scopes to .carrental-custom-theme itself rather than to
 * body.udcr-booking-page.
 *
 * Ecalypse's original CSS hard-codes:
 *   .carrental-custom-theme .container { max-width: 942px; }
 *   .carrental-custom-theme .container-wider { max-width: 1100px; }
 *
 * The rules below override those legacy widths without modifying Ecalypse.
 */

html body .carrental-custom-theme {
  width: 100% !important;
  max-width: none !important;
}

html body .carrental-custom-theme > section.content,
html body .carrental-custom-theme .content {
  width: 100% !important;
  max-width: none !important;
}

/* Main booking canvas: modern desktop width, still comfortably centered. */
html body .carrental-custom-theme .container,
html body .carrental-custom-theme .container-wider {
  width: calc(100% - 48px) !important;
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The legacy two-column booking layout should consume the entire new canvas. */
html body .carrental-custom-theme .columns-2.aside-on-left,
html body .carrental-custom-theme .columns-2.aside-on-right {
  width: 100% !important;
  max-width: none !important;
}

/*
 * Keep filters compact and give the valuable car-results area the width.
 * These rules mirror Ecalypse's own float math, only with a modern sidebar.
 */
@media screen and (min-width: 769px) {
  html body .carrental-custom-theme
  .columns-2.aside-on-left > div.column-fixed,
  html body .carrental-custom-theme
  .columns-2.aside-on-left > li.column-fixed {
    width: 270px !important;
  }

  html body .carrental-custom-theme
  .columns-2.aside-on-left > div.column-fixed + div.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-left > li.column-fixed + div.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-left > div.column-fixed + li.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-left > li.column-fixed + li.column-fluid {
    width: 100% !important;
    padding-left: 290px !important;
    margin-left: -270px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  html body .carrental-custom-theme
  .columns-2.aside-on-left > div.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-left > li.column-fluid {
    width: 100% !important;
    padding-right: 280px !important;
    margin-right: -270px !important;
  }

  html body .carrental-custom-theme
  .columns-2.aside-on-right > div.column-fixed,
  html body .carrental-custom-theme
  .columns-2.aside-on-right > li.column-fixed {
    width: 300px !important;
  }

  html body .carrental-custom-theme
  .columns-2.aside-on-right > div.column-fixed + div.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-right > li.column-fixed + div.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-right > div.column-fixed + li.column-fluid,
  html body .carrental-custom-theme
  .columns-2.aside-on-right > li.column-fixed + li.column-fluid {
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-right: 320px !important;
    margin-right: -300px !important;
  }
}

/* Make top booking steps span the same canvas. */
html body .carrental-custom-theme ul.steps {
  width: 100% !important;
  max-width: none !important;
}

/* Very large monitors: do not let the booking flow feel undersized. */
@media screen and (min-width: 1500px) {
  html body .carrental-custom-theme .container,
  html body .carrental-custom-theme .container-wider {
    max-width: 1440px !important;
  }
}

/* Tablet/mobile: edge-to-edge layout with sensible breathing room. */
@media screen and (max-width: 768px) {
  html body .carrental-custom-theme .container,
  html body .carrental-custom-theme .container-wider {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
}


/* ---------------------------------------------------------
   v1.5.6 — Booking canvas spacing / visual polish
   Gives the legacy Ecalypse steps room to breathe between the
   global header and footer without altering booking logic.
   --------------------------------------------------------- */

html body .carrental-custom-theme {
  background: #f5f8fb !important;
}

/* Main Ecalypse booking canvas */
html body .carrental-custom-theme > section.content,
html body .carrental-custom-theme > .content {
  box-sizing: border-box !important;
  padding-top: 34px !important;
  padding-bottom: 76px !important;
  background:
    linear-gradient(180deg, #f7fafc 0%, #f5f8fb 100%) !important;
}

/* Give the progress bar breathing room from both the header and search/results. */
html body .carrental-custom-theme ul.steps {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}

/* Keep the actual booking workspace visually separated from the footer. */
html body .carrental-custom-theme .columns-2 {
  margin-bottom: 18px !important;
}

/* Subtle modern panel treatment without changing Ecalypse markup or logic. */
html body .carrental-custom-theme .column-fixed,
html body .carrental-custom-theme .column-fluid {
  box-sizing: border-box !important;
}

/* On wide screens, avoid the booking area feeling vertically compressed. */
@media screen and (min-width: 769px) {
  html body .carrental-custom-theme > section.content,
  html body .carrental-custom-theme > .content {
    min-height: 680px !important;
  }
}

/* Mobile: slightly tighter, but still clearly separated from header/footer. */
@media screen and (max-width: 768px) {
  html body .carrental-custom-theme > section.content,
  html body .carrental-custom-theme > .content {
    padding-top: 22px !important;
    padding-bottom: 48px !important;
  }

  html body .carrental-custom-theme ul.steps {
    margin-bottom: 20px !important;
  }
}