/*
 * UdonCarRent.com — Ecalypse 3.0.31 Modern Skin
 * Site Core v1.8.0
 *
 * SAFETY RULE:
 * Presentation only. No DOM restructuring and no JavaScript.
 * The legacy Ecalypse HTML, form field names, IDs, URLs and booking logic
 * remain untouched.
 */

html body .carrental-custom-theme {
  --udcr-e-navy: #08294a;
  --udcr-e-navy-deep: #041b31;
  --udcr-e-blue: #0873dc;
  --udcr-e-blue-dark: #075fb9;
  --udcr-e-blue-soft: #eaf5ff;
  --udcr-e-orange: #ff6900;
  --udcr-e-orange-dark: #e95e00;
  --udcr-e-green: #0a8f66;
  --udcr-e-ink: #102a43;
  --udcr-e-muted: #62788c;
  --udcr-e-line: #dce7f0;
  --udcr-e-soft: #f5f8fb;
  --udcr-e-paper: #ffffff;
  --udcr-e-shadow: 0 14px 38px rgba(6, 38, 64, .08);
  color: var(--udcr-e-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai",
               "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* --------------------------------------------------------------------------
   Booking progress
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme ul.steps {
  overflow: hidden !important;
  border: 1px solid var(--udcr-e-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(6, 38, 64, .045) !important;
}

html body .carrental-custom-theme .steps li {
  background: #fff !important;
}

html body .carrental-custom-theme .steps li + li {
  border-left: 1px solid var(--udcr-e-line) !important;
}

html body .carrental-custom-theme .steps li:before,
html body .carrental-custom-theme .steps li + li:before {
  display: none !important;
}

html body .carrental-custom-theme .steps li a {
  min-height: 60px !important;
  padding: 13px 18px !important;
  color: #6d8194 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 32px !important;
  text-decoration: none !important;
}

html body .carrental-custom-theme .steps li.active a {
  color: var(--udcr-e-blue) !important;
  background: var(--udcr-e-blue-soft) !important;
}

html body .carrental-custom-theme .steps-number {
  width: 30px !important;
  height: 30px !important;
  margin-right: 9px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #edf2f6 !important;
  color: #8293a3 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  text-align: center !important;
}

html body .carrental-custom-theme .steps li.active .steps-number {
  background: var(--udcr-e-blue) !important;
  color: #fff !important;
}

html body .carrental-custom-theme .steps .sprite-arrow-right {
  opacity: .25 !important;
}

/* --------------------------------------------------------------------------
   Main Step-2 workspace — keep Ecalypse column mechanics intact
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme .columns-2.aside-on-left {
  overflow: visible !important;
}

html body .carrental-custom-theme .columns-2.aside-on-left > .column-fixed {
  padding-right: 2px !important;
}

html body .carrental-custom-theme .columns-2.aside-on-left > .column-fluid {
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Sidebar search + filters
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed > .box.box-clean {
  overflow: hidden !important;
  border: 1px solid var(--udcr-e-line) !important;
  border-radius: 17px !important;
  background: var(--udcr-e-paper) !important;
  box-shadow: 0 10px 28px rgba(6, 38, 64, .055) !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed > .box .box-title {
  margin: 0 !important;
  padding: 17px 18px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--udcr-e-line) !important;
  color: var(--udcr-e-navy) !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed > .box .box-inner-small {
  padding: 15px 17px 18px !important;
  border-color: var(--udcr-e-line) !important;
  background: #fff !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .control-group {
  margin-bottom: 12px !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .control-label {
  margin-bottom: 6px !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed label {
  color: #536b80 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed select,
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed input[type="text"],
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed input[type="number"] {
  min-height: 43px !important;
  border: 1px solid #cfdee9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #18374f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed select:focus,
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed input[type="text"]:focus,
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed input[type="number"]:focus {
  border-color: var(--udcr-e-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(8, 115, 220, .10) !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin-right: 5px !important;
  vertical-align: -3px !important;
  accent-color: var(--udcr-e-blue);
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed #carrental_book_now,
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .modify_search {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--udcr-e-blue) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px rgba(8, 115, 220, .17) !important;
  text-shadow: none !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed #carrental_book_now:hover,
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .modify_search:hover {
  background: var(--udcr-e-blue-dark) !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .custom-block {
  display: block !important;
  padding: 4px 0 !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .slider {
  margin-top: 8px !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .slider .ui-slider {
  border-radius: 999px !important;
  background: #dfe8ef !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .slider .ui-slider-range {
  background: var(--udcr-e-blue) !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .slider .ui-slider-handle {
  border-color: #c6d5e0 !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(6, 38, 64, .15) !important;
}

/* Phone card at the bottom of filters */
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .box-contact {
  border: 1px solid #d5e6f3 !important;
  border-radius: 12px !important;
  background: #f5fbff !important;
  box-shadow: none !important;
}

html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .box-contact .h2,
html body .carrental-custom-theme
.columns-2.aside-on-left > .column-fixed .box-contact .h2 strong {
  color: var(--udcr-e-navy) !important;
  font-family: inherit !important;
}

/* --------------------------------------------------------------------------
   Results header
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme .bordered-content {
  padding: 0 !important;
  background: transparent !important;
}

html body .carrental-custom-theme .bordered-content-title {
  min-height: 58px !important;
  margin-bottom: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--udcr-e-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 7px 22px rgba(6, 38, 64, .045) !important;
}

html body .carrental-custom-theme .bordered-content-title .results {
  color: var(--udcr-e-navy) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

html body .carrental-custom-theme .bordered-content-title .sort {
  color: var(--udcr-e-muted) !important;
  font-family: inherit !important;
  font-size: 13px !important;
}

html body .carrental-custom-theme .bordered-content-title .sort a {
  color: var(--udcr-e-blue) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Vehicle cards
   IMPORTANT: keep the original float/content mechanics. Only appearance.
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme .list-item.list-item-car {
  position: relative !important;
  min-height: 230px !important;
  margin: 0 0 16px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid var(--udcr-e-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: var(--udcr-e-shadow) !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

html body .carrental-custom-theme .list-item.list-item-car:hover {
  transform: translateY(-2px) !important;
  border-color: #bdd3e5 !important;
  box-shadow: 0 19px 44px rgba(6, 38, 64, .115) !important;
}

html body .carrental-custom-theme .list-item-car .list-item-media {
  width: 225px !important;
  padding: 4px 8px 2px !important;
  text-align: center !important;
}

html body .carrental-custom-theme .list-item-car .list-item-media .pic-area {
  min-height: 148px !important;
}

html body .carrental-custom-theme .list-item-car .list-item-media img {
  display: block !important;
  width: 100% !important;
  max-width: 220px !important;
  height: 145px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

html body .carrental-custom-theme .list-item-car .car-name {
  margin: 10px 0 0 !important;
  color: var(--udcr-e-navy) !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

html body .carrental-custom-theme .list-item-car .car-name a {
  color: inherit !important;
  text-decoration: none !important;
}

html body .carrental-custom-theme .list-item-car .list-item-content {
  min-height: 182px !important;
  margin-left: 255px !important;
  padding: 8px 4px 4px 0 !important;
}

html body .carrental-custom-theme .list-item-car .list-item-content:before {
  display: none !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content > .columns-2 > .column:first-child {
  padding: 4px 20px 4px 8px !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content > .columns-2 > .column.align-right {
  padding: 8px 0 8px 22px !important;
  border-left: 1px solid var(--udcr-e-line) !important;
}

/* Vehicle feature rows */
html body .carrental-custom-theme .list-item-car .icon-text {
  min-height: 31px !important;
  margin: 0 0 7px !important;
  padding: 6px 10px 6px 31px !important;
  border-radius: 9px !important;
  background: var(--udcr-e-soft) !important;
  color: #405b72 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 19px !important;
}

html body .carrental-custom-theme .list-item-car .icon-text + .icon-text {
  margin-top: 0 !important;
}

html body .carrental-custom-theme .list-item-car .icon-text > span {
  left: 9px !important;
  opacity: .67 !important;
}

/* Expandable detail copy */
html body .carrental-custom-theme .list-item-car .carrental_car_details {
  margin: 10px 0 0 !important;
  padding: 11px 12px !important;
  border: 1px solid #e1e9ef !important;
  border-radius: 10px !important;
  background: #fafcfe !important;
  color: var(--udcr-e-muted) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* Price block */
html body .carrental-custom-theme
.list-item-car .list-item-content .column.align-right > p {
  margin: 0 0 15px !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content .price-from {
  margin-bottom: 3px !important;
  color: var(--udcr-e-muted) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content .price {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 0 5px !important;
  background: transparent !important;
  color: var(--udcr-e-navy) !important;
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content .additional {
  display: block !important;
  margin-top: 4px !important;
  color: var(--udcr-e-green) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* Buttons: secondary details + primary booking */
html body .carrental-custom-theme
.list-item-car .list-item-content .btn-book {
  min-height: 39px !important;
  padding: 9px 13px !important;
  border-radius: 9px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 19px !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content a.btn-book[style*="silver"],
html body .carrental-custom-theme
.list-item-car .list-item-content .carrental_car_details_link {
  border: 1px solid #cddbe6 !important;
  background: #fff !important;
  color: #456177 !important;
  box-shadow: none !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content a.btn-book[style*="silver"]:hover,
html body .carrental-custom-theme
.list-item-car .list-item-content .carrental_car_details_link:hover {
  border-color: #aac4d9 !important;
  background: #f7fafc !important;
  color: var(--udcr-e-navy) !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content .btn-primary.btn-book,
html body .carrental-custom-theme
.list-item-car .list-item-content .carrental-book-this-car-btn {
  min-width: 128px !important;
  border: 0 !important;
  background: var(--udcr-e-orange) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(255, 105, 0, .18) !important;
}

html body .carrental-custom-theme
.list-item-car .list-item-content .btn-primary.btn-book:hover,
html body .carrental-custom-theme
.list-item-car .list-item-content .carrental-book-this-car-btn:hover {
  background: var(--udcr-e-orange-dark) !important;
}

/* The template uses <br><br> between action buttons. Keep the functional DOM
   untouched, but reduce the old-fashioned excessive vertical gap. */
html body .carrental-custom-theme
.list-item-car .list-item-content .column.align-right br {
  line-height: 5px !important;
}

/* Additional photos pill */
html body .carrental-custom-theme
.list-item-car .list-item-media .btn-absolute {
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: rgba(8, 41, 74, .88) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 11px !important;
  box-shadow: 0 5px 15px rgba(4, 27, 49, .16) !important;
}

/* --------------------------------------------------------------------------
   Generic Ecalypse buttons/typography used later in the journey.
   Conservative styling only — no layout changes.
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme .btn {
  font-family: inherit !important;
  text-shadow: none !important;
}

html body .carrental-custom-theme h1,
html body .carrental-custom-theme h2,
html body .carrental-custom-theme h3,
html body .carrental-custom-theme .h1,
html body .carrental-custom-theme .h2,
html body .carrental-custom-theme .h3 {
  font-family: inherit !important;
}

html body .carrental-custom-theme a {
  transition: color .14s ease, background-color .14s ease,
              border-color .14s ease, box-shadow .14s ease !important;
}

/* --------------------------------------------------------------------------
   Responsive — respect Ecalypse's existing breakpoints
   -------------------------------------------------------------------------- */

@media screen and (max-width: 942px) {
  html body .carrental-custom-theme .list-item.list-item-car {
    padding: 18px !important;
  }

  html body .carrental-custom-theme .list-item-car .list-item-media {
    width: 205px !important;
  }

  html body .carrental-custom-theme .list-item-car .list-item-content {
    margin-left: 230px !important;
  }
}

@media screen and (max-width: 768px) {
  html body .carrental-custom-theme ul.steps {
    border-radius: 12px !important;
  }

  html body .carrental-custom-theme .steps li a {
    min-height: 52px !important;
    padding: 10px 11px !important;
    font-size: 11px !important;
  }

  html body .carrental-custom-theme .steps-number {
    width: 26px !important;
    height: 26px !important;
    margin-right: 5px !important;
    font-size: 10px !important;
    line-height: 26px !important;
  }

  html body .carrental-custom-theme
  .columns-2.aside-on-left > .column-fixed > .box.box-clean {
    margin-bottom: 18px !important;
  }
}

@media screen and (max-width: 560px) {
  html body .carrental-custom-theme .list-item.list-item-car {
    min-height: 0 !important;
    padding: 17px !important;
    border-radius: 14px !important;
  }

  html body .carrental-custom-theme .list-item-car .list-item-media {
    float: none !important;
    width: 100% !important;
    padding: 0 0 13px !important;
  }

  html body .carrental-custom-theme .list-item-car .list-item-content {
    margin-left: 0 !important;
    padding-top: 13px !important;
    border-top: 1px solid var(--udcr-e-line) !important;
  }

  html body .carrental-custom-theme
  .list-item-car .list-item-content > .columns-2 > .column:first-child,
  html body .carrental-custom-theme
  .list-item-car .list-item-content > .columns-2 > .column.align-right {
    padding: 8px 0 !important;
    border-left: 0 !important;
  }

  html body .carrental-custom-theme
  .list-item-car .list-item-content > .columns-2 > .column.align-right {
    padding-top: 15px !important;
    border-top: 1px solid var(--udcr-e-line) !important;
    text-align: left !important;
  }

  html body .carrental-custom-theme
  .list-item-car .list-item-content .btn-primary.btn-book,
  html body .carrental-custom-theme
  .list-item-car .list-item-content .carrental-book-this-car-btn {
    width: 100% !important;
  }
}


/* --------------------------------------------------------------------------
   v1.8.1 — Booking step number alignment hotfix
   Ecalypse originally absolutely positions .steps-number at left:20px.
   v1.8.0 reduced the link's old 60px left padding, so that absolute circle
   overlapped the first letters of each step. Reset the legacy positioning and
   use an inline flex layout instead. Presentation only.
   -------------------------------------------------------------------------- */

html body .carrental-custom-theme .steps li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.25 !important;
}

html body .carrental-custom-theme .steps-number {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-flex !important;
  flex: 0 0 30px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* The old sprite arrow consumes useful room and is not needed with the modern
   four-step styling. Hiding it also prevents right-edge collisions. */
html body .carrental-custom-theme .steps li a .sprite-arrow-right {
  display: none !important;
}

@media screen and (max-width: 768px) {
  html body .carrental-custom-theme .steps-number {
    flex-basis: 26px !important;
  }
}