/* Frontend styles for AutoTrader plugin */

:root {
  --at-color-primary: #004080;
  --at-color-secondary: #e6f0ff;
  --at-color-white: #ffffff;
  --at-color-border: #d0d5dd;
  --at-color-muted: #f9fafb;
  --at-color-focus: #101828;
  --at-color-focus-contrast: #ffffff;
  --at-hero-bg: var(--at-color-primary);
  --at-hero-color: var(--at-color-white);
  --at-tab-bg: var(--at-color-muted);
  --at-tab-active-bg: var(--at-color-white);
  --at-spec-bg: var(--at-color-muted);
  --at-spacing-xs: 0.25rem;
  --at-spacing-sm: 0.5rem;
  --at-spacing-md: 1rem;
  --at-spacing-lg: 2rem;
  --at-spacing-xl: 4rem;
  --at-radius-sm: 0.25rem;
  --at-radius-md: 0.5rem;
  --at-radius-pill: 9999px;
}

/* Filter toolbar */
.at-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--at-spacing-sm);
  align-items: center;
  margin-bottom: var(--at-spacing-md);
}

.at-filter-pill,
.at-filter-dropdown {
  appearance: none;
  background: var(--at-color-secondary);
  border: 1px solid var(--at-color-border);
  border-radius: var(--at-radius-pill);
  color: var(--at-color-primary);
  padding: var(--at-spacing-sm) var(--at-spacing-md);
  cursor: pointer;
}

.at-filter-pill:focus,
.at-filter-dropdown:focus {
  outline: 2px solid var(--at-color-focus);
  outline-offset: 2px;
}

.at-filter-pill.active {
  background: var(--at-color-primary);
  color: var(--at-color-white);
}

.at-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--at-spacing-xs);
}

.at-active-filters .at-badge {
  background: var(--at-color-primary);
  color: var(--at-color-white);
  border-radius: var(--at-radius-pill);
  padding: 0 var(--at-spacing-sm);
  display: flex;
  align-items: center;
  font-size: 0.75rem;
}

.at-active-filters .at-badge button {
  background: none;
  border: none;
  color: inherit;
  margin-left: var(--at-spacing-xs);
  cursor: pointer;
}

.at-active-filters .at-badge button:focus {
  outline: 2px solid var(--at-color-focus-contrast);
  outline-offset: 2px;
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
  background-color: #31343b;
  color: #fff !important;
  text-decoration: none;
}

/* Vehicle grid */
.at-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--at-spacing-md);
}

@media (min-width: 600px) {
  .at-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .at-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Vehicle card */
.at-card {
  display: flex;
  flex-direction: column;
  background: var(--at-color-white);
  border: 1px solid var(--at-color-border);
  border-radius: var(--at-radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.at-card__image {
  position: relative;
  background: var(--at-color-muted);
  aspect-ratio: 4 / 3;
}

.at-card__heart {
  position: absolute;
  top: var(--at-spacing-sm);
  right: var(--at-spacing-sm);
  width: 2rem;
  height: 2rem;
  background: var(--at-color-white);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.at-card__info {
  padding: var(--at-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--at-spacing-xs);
  flex: 1;
}

.at-card__row {
  display: flex;
  justify-content: space-between;
}

.at-card__button {
  margin: var(--at-spacing-md);
  margin-top: auto;
  padding: var(--at-spacing-sm) var(--at-spacing-md);
  text-align: center;
  background: var(--at-color-primary);
  color: var(--at-color-white);
  border-radius: var(--at-radius-sm);
  text-decoration: none;
  display: inline-block;
}

.at-card__button:focus {
  outline: 2px solid var(--at-color-focus);
  outline-offset: 2px;
}

/* Pagination */
.at-pagination {
  margin-top: var(--at-spacing-lg);
  display: flex;
  justify-content: center;
  gap: var(--at-spacing-xs);
}

.at-pagination a,
.at-pagination span {
  padding: var(--at-spacing-sm) var(--at-spacing-md);
  border: 1px solid var(--at-color-border);
  border-radius: var(--at-radius-sm);
  text-decoration: none;
  color: var(--at-color-primary);
}

.at-pagination a:focus {
  outline: 2px solid var(--at-color-focus);
  outline-offset: 2px;
}

.at-pagination .current {
  background: var(--at-color-primary);
  color: var(--at-color-white);
}

/* Marketing Clinic: Filter Bar */
.mc-filter-wrap {
  margin-bottom: 0;
}

.mc-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--at-spacing-sm);
}

@media (min-width: 600px) {
  .mc-filter-bar {
    flex-direction: row;
    align-items: center;
  }
}

.mc-select {
  flex: 1;
}

.mc-select select {
  width: 100%;
  padding: var(--at-spacing-sm) var(--at-spacing-md);
  border: 1px solid var(--at-color-border);
  border-radius: var(--at-radius-sm);
  background: var(--at-color-white);
  appearance: none;
}

.mc-select select:focus {
  outline: 2px solid var(--at-color-focus);
  outline-offset: 2px;
}

/* Vehicle profile: Theme tokens */
:root {
  --mc-vp-space-sm: 0.5rem;
  --mc-vp-space-md: 1rem;
  --mc-vp-space-lg: 2rem;
  --mc-vp-color-bg: var(--at-color-muted);
  --mc-vp-color-primary: var(--at-color-primary);
}

/* HERO */
.mc-vehicle-hero {
  background: var(--mc-vp-color-primary);
  color: var(--at-color-white);
  padding: var(--mc-vp-space-lg) var(--mc-vp-space-md);
  background-size: cover;
  background-position: center;
  border-radius:unset !important;
}

.mc-gallery-item {
  margin: -22px 0 0 0 !important;
  border-radius: 0 !important;
}

/* BODY LAYOUT */
.mc-vehicle-body {
  display: flex;
  flex-direction: column;
  gap: var(--mc-vp-space-lg);
  margin-top:0px;
}
@media (min-width: 992px) {
  .mc-vehicle-body {
    flex-direction: row;
    align-items: flex-start;
  }
  .mc-gallery {
    flex: 2;
  }
  .mc-sticky-card {
    flex: 1;
  }
}

/* GALLERY */
.mc-gallery img {
  width: 100%;
  height: auto;
}

.mc-gallery-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
  gap: var(--mc-vp-space-sm);
  margin-top: var(--mc-vp-space-sm);
  padding: 0;
  list-style: none;
}
.mc-gallery-item img {
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--at-radius-sm);
  cursor: pointer;
}

/* STICKY CARD */
.mc-sticky-column{
	height:100%;
	right: 20px;
}
.mc-sticky-card {
  background: var(--mc-vp-color-bg);
  padding: 32px;
  border-radius: var(--at-radius-md);
  position: sticky;
  top: 24px;
  border-radius: 5px !important;
  margin-top: -95px !important;
  width: 524px;
  max-width: 100%;
}

/* JS fallback for browsers without sticky support */
.mc-sticky-card.fixed {
  position: fixed;
  top: 24px;
}
.mc-sticky-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-sticky-card-item {
  margin-bottom: var(--mc-vp-space-sm);
}

.mc-results-btn {
  padding: var(--at-spacing-sm) var(--at-spacing-md);
  background: var(--at-color-primary);
  color: var(--at-color-white);
  border: none;
  border-radius: var(--at-radius-sm);
  cursor: pointer;
}

.mc-results-btn:focus {
  outline: 2px solid var(--at-color-focus);
  outline-offset: 2px;
}

/* Catalog styles */
:root {
  --mc-red: #e00000;
  --mc-gray-100: #f5f5f5;
  --mc-gray-300: #e0e0e0;
  --mc-gray-600: #6e6e6e;
  --mc-radius: 0.5rem;
}

.mc-catalog {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mc-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 0.5rem 0;
}

.mc-toolbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.mc-toolbar__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mc-count {
  flex: 0 0 auto;
  font-size: 1.4285714285714286rem;
  line-height: 26px;
  font-weight: 500;
  margin: 0 40px 0 0;
}

.mc-count strong {
  font-size: 1.25rem;
}

.mc-chip {
  background: var(--mc-red);
  color: #fff;
  padding: 0 0.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mc-active-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -2.5px -2.5px;
}

.mc-active-filters button {
  padding: 4px 10px;
  font-size: .8571428571428571rem;
  border: 0;
  background: #eeeeef;
  transition: all .3s ease;
  color: #31343b;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 2.5px 2.5px;
  border-radius: 12px;
}

.mc-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mc-filter {
  position: relative;
}

.mc-filter button {
  height: 37px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 11px 40px 11px 16px;
  transition: background .3s ease,color .3s ease;
  font-size: .7571428571428571rem;
  line-height: 15px;
  color: #31343b;
}

.mc-filter button::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--mc-gray-600);
  background-image: url('../img/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.mc-filter.is-open button::after {
  transform: translateY(-50%) rotate(180deg);
}

.mc-filter__inputs {
  display: none;
  left:0px;
  position: absolute;
    top: calc(100% + 8px);
    padding: 28px;
    box-shadow: 0 2px 8px rgba(38,53,62,.08);
    border-radius: 6px;
    min-width: 260px;
    z-index: 1;
	background:#fff;
}

.mc-filter__inputs select {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border: 1px solid var(--mc-gray-300);
  border-radius: var(--mc-radius);
  background: #fff;
  appearance: none;
  background-image: url('../img/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
  font-size: .7571428571428571rem;
}

.mc-filter__inputs select:last-child {
  margin-bottom: 0;
}

.mc-filter.is-open .mc-filter__inputs {
  display: block;
}

.mc-filter .optionBlock__body {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  width: 240px;
  box-sizing: border-box;
  padding: 1.5rem;
  background: var(--at-color-white);
  border-radius: var(--mc-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  border: 1px solid rgba(16, 24, 40, 0.05);
  z-index: 2;
  max-height: min(70vh, 32rem);
  overflow: auto;
}

.mc-filter.is-open button::after {display:none;}

.mc-filter.is-open .optionBlock__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mc-filter.is-open .optionBlock__body.optionBlock__body--age-mileage {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mc-filter .optionBlock__closeContainer,
.mc-filter .optionBlock__close-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mc-filter .optionBlock__close {
  border: none;
  background: none;
  color: #31343b;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.25rem 0.5rem;
  border-radius: var(--mc-radius);
  cursor: pointer;
}

.mc-filter .optionBlock__close:hover,
.mc-filter .optionBlock__close:focus {
  background: rgba(49, 52, 59, 0.08);
  color: #31343b !important;
}

.mc-filter .optionBlock__close:focus-visible {
  outline: 2px solid #31343b;
  outline-offset: 2px;
}

.mc-filter .optionBlock__body--age-mileage .optionBlock__closeContainer {
  grid-column: 1 / -1;
}

.mc-filter .optionBlock__group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mc-filter .optionBlock__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 18rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.mc-filter .optionBlock__heading,
.mc-filter .optionBlock__groupTitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--at-color-focus);
}

.mc-filter .optionBlock__row,
.mc-filter .optionBlock__group .row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mc-filter .optionBlock__label,
.mc-filter .optionBlock__row .inputWrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--mc-gray-600);
}

.mc-filter .optionBlock__labelText {
  font-weight: 500;
  color: var(--at-color-focus);
}

.mc-filter .optionBlock__body select {
  width: 100%;
  padding: 0.2rem;
  border: 1px solid var(--mc-gray-300);
  border-radius: var(--mc-radius);
  background: var(--at-color-white);
  appearance: none;
  font-size: .7571428571428571rem;
  line-height: 1.4;
  background-image: url('../img/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}

.mc-filter .optionBlock__body select:focus {
  outline: none;
  border-color: var(--mc-red);
  box-shadow: 0 0 0 1px var(--mc-red);
  background-image: url('../img/chevron-down.svg');
}

.mc-filter .optionBlock__body select:hover {
  border-color: var(--mc-gray-600);
}

.mc-filter .row--checkbox {
  display: flex;
  flex-direction: column;
}

.mc-filter .row--checkbox .inputWrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem;
  border-radius: var(--mc-radius);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  font-size: .7571428571428571rem;
}

.mc-filter .row--checkbox .inputWrap:hover {
  background: var(--mc-gray-100);
}

.mc-filter .row--checkbox .inputWrap:focus-within {
  box-shadow: 0 0 0 2px rgba(224, 0, 0, 0.25);
  background: rgba(224, 0, 0, 0.06);
}

.mc-filter .row--checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--mc-red);
  border-radius: 0.25rem;
}

.mc-filter .row--checkbox label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--at-color-focus);
  line-height: 1.4;
  cursor: pointer;
}

.mc-filter .row--select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mc-filter .row--select label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--at-color-focus);
}

.mc-filter .selectWrap {
  display: flex;
}



.mc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 600px) {
  .mc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .mc-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mc-gray-300);
  border-radius: var(--mc-radius);
  overflow: hidden;
}

.mc-card__media {
  position: relative;
}

.mc-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

.mc-card__heart {
  position: absolute;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 33px !important;
  height: 33px;
  background: #fff !important;
  border-radius: 50% !important;
  border: 1px solid #d8d8d8 !important;
  transition: background .3s ease,opacity .3s ease !important;
  cursor: pointer !important;
  top: 10px;
  right: 10px;
  opacity: .9;
}

.mc-heart-icon {
  position:absolute;
  display: block;
  width: 16px;
  height: 16px;
  -webkit-mask-image: url('../img/heart.svg');
  mask-image: url('../img/heart.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  pointer-events: none;
  transition: filter .3s ease;
  background-color: #cb0004;
}

.mc-card__heart:hover .mc-heart-icon{
	background: #fff;
}
.mc-card__heart.is-liked,
.mc-card__heart.is-liked:focus,
.mc-card__heart.is-liked:focus-visible,
.mc-card__heart.is-liked:hover,
.mc-card__heart.is-liked:active,
.mc-card__heart--liked,
.mc-card__heart--liked:focus,
.mc-card__heart--liked:focus-visible,
.mc-card__heart--liked:hover,
.mc-card__heart--liked:active,
.mc-like.is-liked,
.mc-like.is-liked:focus,
.mc-like.is-liked:focus-visible,
.mc-like.is-liked:hover,
.mc-like.is-liked:active,
.mc-like--liked,
.mc-like--liked:focus,
.mc-like--liked:focus-visible,
.mc-like--liked:hover,
.mc-like--liked:active {
  background-color: #cb0004 !important;
  border-color: #cb0004 !important;
  color: #fff !important;
}

.mc-card__heart.is-liked .mc-heart-icon,
.mc-card__heart--liked .mc-heart-icon,
.mc-like.is-liked .mc-heart-icon,
.mc-like--liked .mc-heart-icon {
  filter: brightness(0) invert(1);
}

.mc-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.mc-title {
  font-size: 1rem;
}

.mc-title a {
  text-decoration: none;
  color: inherit;
}

.mc-sub {
  color: var(--mc-gray-600);
}

.mc-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--mc-gray-600);
}

.mc-price {
  margin-top: auto;
  font-weight: bold;
}

.mc-btn {
  margin-top: 1rem;
  display: inline-block;
  text-align: center;
  border: 1px solid #31343b;
  background: 0 0;
  color: #31343b;
  padding: 0.5rem 1rem;
  border-radius: var(--mc-radius);
  text-decoration: none;
}
.mc-btn:hover{
	background: #cb0004;
  border-color: #cb0004;
  color: #fff;
}

.mc-feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.mc-feature {
  text-align: center;
  background: var(--mc-gray-100);
  padding: 1rem;
  border-radius: var(--mc-radius);
}

.mc-loading {
  display: none;
  text-align: center;
  padding: 1rem;
}

.mc-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--at-color-border);
  border-top-color: var(--at-color-primary);
  border-radius: 50%;
  animation: mc-spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes mc-spin {
  to { transform: rotate(360deg); }
}

/* Overlay */
.mc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;}
.mc-overlay.is-open{display:block;}
.mc-overlay__panel{position:absolute;right:0;top:0;width:90%;max-width:420px;height:100%;background:#fff;transform:translateX(100%);transition:transform .3s;overflow-y:auto;padding:20px;}
.mc-overlay.is-open .mc-overlay__panel{transform:translateX(0);}
.mc-overlay__close{background:none;border:0;font-size:24px;cursor:pointer;margin-bottom:12px;}
.mc-overlay__tabs{display:flex;gap:8px;margin-bottom:16px;}
.mc-overlay__tabs button{flex:1;padding:10px;background:#f6f7f8;border:1px solid var(--mc-gray-300);border-radius:8px;font-weight:600;cursor:pointer;}
.mc-overlay__tabs button.is-active{background:var(--mc-red);color:#fff;border-color:var(--mc-red);}
.mc-overlay__pane{display:none;}
.mc-overlay__pane.is-active{display:block;}
.mc-overlay__content [data-tab]{display:none;}
.mc-overlay__content [data-tab].is-active{display:block;}

/* Filter makes grid */
.mc-filter-makes {
  display: block;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--at-spacing-md);
  justify-items: center;
  text-align:center;
}

.mc-filter-make {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: var(--at-spacing-xs);
  text-align: center;
  color: inherit;
}

.mc-filter-make__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 120px;
}

.mc-filter-make__logo img {
  filter: grayscale(1);
  transition: filter 0.2s ease;
}

.mc-filter-make:hover .mc-filter-make__logo img {
  filter: none;
}

.mc-filter-makes img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mc-filter-make__count {
  font-weight: 600;
  color: var(--at-color-primary);
}

.mc-liked {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.mc-liked .mc-heart-icon {
  width: 29px;
  height: 29px;
}

.mc-liked__count {
  position: absolute;
  top: -1.25rem;
  right: -0.5rem;
  background: var(--mc-red);
  color: #fff;
  border-radius: 9999px;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.75rem;
  display: none;
}

[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover {
  background-color: #31343b !important;
  color:#fff !important;
}
.optionBlock__body p{display:none;}

.mc-card__heart:hover{
	background-color: #cb0004 !important;
}
@media (max-width: 992px) {
.mc-sticky-column{
	height:100%;
	right: 20px;
}
}