/* Single Listing Layout - Matching Live Site */

/* Container */
.et_pb_section {
  padding-top: 20px;
}

#inventory-wrapper {
  width: var(--mg-container-width);
  max-width: 1280px;
  margin: 0 auto;
  padding-top: var(--mg-spacing-3); /* 12px top padding */
}

/* Breadcrumbs */
.breadcrumb-wrapper {
  background-color: var(--mg-bg-color-box);
  border-radius: var(--mg-radius-box);
  padding: var(--mg-spacing-2) var(--mg-spacing-5);
  margin-bottom: var(--mg-spacing-5);
  color: var(--mg-color-secondary);
}

/* Two Column Layout: Gallery Left, Info Right */
.detail-top-container {
  display: flex;
  gap: var(--mg-spacing-9);
  margin-bottom: var(--mg-spacing-9);
}

#vehicle-image-display {
  flex: 0 1 590px;
  min-width: 400px;
}

.listing-gallery .lSSlideWrapper {
  align-items: center;
  aspect-ratio: 4 / 3;
  background-color: var(--mg-bg-color-box);
  border-radius: 4px;
  max-width: 800px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.listing-gallery .lightSlider {
  height: 100% !important;
}

.listing-gallery .lightSlider > * {
  height: 100%;
}

.listing-gallery .lSPager.lSGallery li.active,
.listing-gallery .lSPager.lSGallery li:hover {
  border-radius: 0;
}

.listing-gallery .lSGallery a {
  position: relative;
}

.listing-gallery .lSGallery a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -8px 0px -5px #ffcc00 inset;
  transition: opacity 0.4s;
  opacity: 0;
}

.listing-gallery .lSGallery li.active a:before,
.listing-gallery .lSGallery li:hover a:before {
  opacity: 1;
}

.lSSlideWrapper img {
  display: block;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  width: 100%;
}

.detail-top {
  flex: 1 0 544px;
  min-width: 544px;
}

/* Title */
.detail-vehicle-header {
  color: var(--mg-color-primary);
  font-size: var(--mg-font-size-title);
  font-weight: 700;
  line-height: var(--mg-line-height-title);
  border-bottom: 1px solid var(--mg-color-border);
  margin-bottom: var(--mg-spacing-4);
  padding-bottom: var(--mg-spacing-2);
}

/* Price */
.detail-vehicle-pricing .inventory-asking-price {
  font-family: "Plus Jakarta Sans", Helvetica, Arial, Lucida, sans-serif;
  font-size: var(--mg-font-size-price);
  font-weight: bold;
  line-height: var(--mg-line-height-default);
}

/* Trim | Mileage | Contact */
.detail-vehicle-trim-odometer-contact {
  display: flex;
  font-size: var(--mg-font-size-md);
  line-height: var(--mg-line-height-default);
  gap: 1ex;
  margin-bottom: var(--mg-spacing-5);
}

.detail-vehicle-trim-odometer-contact > :not(:last-child)::after {
  content: "|";
  margin-left: 1ex;
}

/* Form Titles */
#gform_1 h3 {
  color: var(--mg-color-primary);
  font-size: var(--mg-font-size-subtitle);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

#gform_1 h3:first-child {
  margin-top: 0;
}

#gform_1 i {
  color: var(--mg-color-tertiary);
  font-size: 24px;
}

#gform_1 .form-subtitle {
  color: var(--mg-color-text);
  font-size: var(--mg-font-size-md);
  margin-bottom: var(--mg-spacing-4);
  margin-top: 0;
}

#gform_1 .gfield-choice-input + label {
  vertical-align: top;
}

/* Form Container */
.tab-content-container {
  background-color: var(--mg-bg-color-box);
  border-radius: var(--mg-radius-box);
  padding: var(--mg-spacing-5);
  margin-top: var(--mg-spacing-5);
}

/* Gravity Forms Styling */
.tab-content-container
  .gform_wrapper
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
    [type="button"]
  ):not([type="image"]):not([type="file"]) {
  border-radius: var(--mg-radius-input);
  border: 1px solid var(--mg-color-border);
}

.tab-content-container .gform_button {
  background-color: var(--mg-color-tertiary);
  color: var(--mg-color-text-inverted);
  border: none;
  border-radius: var(--mg-radius-button);
  padding: var(--mg-spacing-1) var(--mg-spacing-5);
  font-weight: bold;
  font-size: var(--mg-font-size-button);
  cursor: pointer;
}

/* Get Pre-approved Button */
.tab-content-container .pre-approval-button,
.tab-content-container a.button {
  background-color: var(--mg-color-secondary);
  color: var(--mg-color-text-inverted);
  border: none;
  border-radius: var(--mg-radius-button);
  padding: var(--mg-spacing-1) var(--mg-spacing-5);
  font-weight: bold;
  font-size: var(--mg-font-size-button);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin-top: var(--mg-spacing-5);
}

/* Check Availability Button - Outlined Style */
.tab-content-container .gform_button[type="submit"] {
  background-color: transparent;
  color: var(--mg-color-primary);
  border: 2px solid var(--mg-color-primary);
  border-radius: var(--mg-radius-button);
}

/* Checkbox and Agreement Text */
.tab-content-container .gfield-choice-input {
  vertical-align: middle;
  margin-right: 8px;
}

.tab-content-container .gfield-choice-input + label {
  vertical-align: middle;
  font-size: var(--mg-font-size-sm);
  font-weight: normal;
  line-height: var(--mg-line-height-default);
}

/* Vehicle Details */
#detail-vehicle-details,
#detail-dealer-options {
  border: 1px solid var(--mg-color-border);
  border-radius: var(--mg-radius-box);
  padding: var(--mg-spacing-5);
  margin-bottom: var(--mg-spacing-9);
  max-width: 860px;
}

#detail-vehicle-details h3,
#detail-dealer-options h3 {
  color: var(--mg-color-primary);
  font-size: var(--mg-font-size-subtitle);
  line-height: var(--mg-line-height-title);
  padding-bottom: 0;
  margin-bottom: var(--mg-spacing-4);
}

#detail-vehicle-details dl {
  margin-bottom: 0;
}

#detail-vehicle-details dt {
  font-weight: normal;
  padding-top: var(--mg-spacing-2);
}

#detail-vehicle-details dd {
  border-bottom: 1px solid var(--mg-color-border);
  font-weight: bold;
  margin-left: 0;
  padding-bottom: var(--mg-spacing-2);
}

#detail-vehicle-details dd.empty {
  border-bottom: 1px solid transparent;
}

#detail-vehicle-details dt.empty,
#detail-vehicle-details dd.empty {
  display: none;
}

/* Vehicle Features */
#detail-dealer-options ul {
  list-style-type: none;
  padding: 0;
}

#detail-dealer-options ul li {
  border-bottom: 1px solid var(--mg-color-border);
  margin-left: 0;
  padding-bottom: var(--mg-spacing-2);
  padding-top: var(--mg-spacing-2);
}

/* Dealer Location */
#detail-dealer-location {
  background-color: var(--mg-bg-color-box);
  border-radius: var(--mg-radius-box);
  padding: 0;
  margin-bottom: var(--mg-spacing-9);
  max-width: 860px;
}

#detail-dealer-location .dealer-info {
  min-width: max-content;
  padding: var(--mg-spacing-9) var(--mg-spacing-9) var(--mg-spacing-5)
    var(--mg-spacing-9);
}

#detail-dealer-location .dealer-info h3 {
  color: var(--mg-color-primary);
  font-family: "Figtree", Helvetica, Arial, Lucida, sans-serif;
  font-size: var(--mg-font-size-title-md);
  font-weight: 700;
  line-height: var(--mg-line-height-title);
  margin-bottom: var(--mg-spacing-3);
  padding-bottom: 0;
}

#detail-dealer-location .dealer-name {
  font-size: var(--mg-font-size-md);
}

#detail-dealer-location .dealer-phone,
#detail-dealer-location .dealer-phone a {
  color: var(--mg-color-primary);
  font-size: var(--mg-font-size-md);
  font-weight: bold;
}

#detail-dealer-location .dealer-address {
  font-size: var(--mg-font-size-md);
  margin-top: var(--mg-spacing-3);
}

#map-container {
  height: 340px;
  width: 100%;
}

/* Responsive */
@media all and (max-width: 767px) {
  .detail-vehicle-header {
    border-bottom: none;
    font-size: var(--mg-font-size-title-sm);
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #detail-vehicle-summary {
    display: flex;
    flex-direction: column;
  }

  .detail-vehicle-trim-odometer-contact {
    order: -1;
    flex-direction: column;
    gap: var(--mg-spacing-2);
    margin-bottom: var(--mg-spacing-3);
  }

  .detail-vehicle-trim-odometer-contact > :not(:last-child)::after {
    content: "";
    margin-left: 0;
  }

  #detail-vehicle-details dd.empty,
  #detail-vehicle-details dt.empty {
    display: none;
  }
}

@media all and (min-width: 768px) {
  #detail-vehicle-details dl {
    column-count: 2;
  }

  #detail-dealer-options ul {
    column-count: 2;
  }

  #detail-dealer-location {
    display: flex;
    flex-direction: row;
    gap: var(--mg-spacing-5);
  }

  #detail-dealer-location .dealer-info {
    padding: var(--mg-spacing-9);
  }

  #map-container {
    border-top: none;
    border-left: 1px solid var(--mg-color-border);
  }
}

@media all and (max-width: 980px) {
  .detail-top-container {
    flex-direction: column;
  }

  #vehicle-image-display {
    flex: 1;
    min-width: 100%;
  }

  .detail-top {
    flex: 1;
    min-width: 100%;
  }

  .detail-vehicle-header {
    font-size: var(--mg-font-size-title-md);
  }
}

@media all and (min-width: 981px) {
  .detail-vehicle-header {
    font-size: var(--mg-font-size-title);
  }
}