/* Me2You - Vehicle detail page (PDP) styles */

/* PDP layout */
.pdp-wrap {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 0 32px;
  align-items: start;
}
@media (max-width: 767.98px) {
  .pdp-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* Breadcrumb */
.pdp-crumbs { font-size: 13px; color: var(--ink-500); margin-bottom: 16px; }
.pdp-crumbs a { color: var(--ink-500); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--brand-orange-700); text-decoration: underline; }
.pdp-crumbs .sep { margin: 0 6px; color: var(--ink-300); }

/* Gallery */
.pdp-gallery { position: sticky; top: 80px; }
@media (max-width: 767.98px) { .pdp-gallery { position: static; } }
.pdp-main-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-100);
  border: 1px solid var(--ink-300);
}
.pdp-main-img-wrap.has-photos { cursor: zoom-in; }
.pdp-main-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pdp-main-img.is-placeholder {
  object-fit: contain; padding: 20%; opacity: 0.4;
}
.pdp-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pdp-thumb {
  width: 68px; height: 68px;
  border-radius: 10px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0; outline: none;
  transition: border-color 0.15s;
  /* --img arrives via data-style-vars (per-thumb image url). */
  background-image: var(--img, none);
}
.pdp-thumb.is-active { border-color: var(--brand-orange); }

/* Info column */
.pdp-info { padding-top: 4px; }
@media (max-width: 767.98px) { .pdp-info { padding-top: 20px; } }
.pdp-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 24px;
  line-height: 1.25; color: var(--ink-900);
  margin: 0 0 8px;
}
@media (min-width: 768px) { .pdp-title { font-size: 28px; } }
.pdp-price {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 32px;
  line-height: 1.15; color: var(--ink-900);
  margin-bottom: 14px;
}
.pdp-price .currency { font-weight: 500; color: var(--ink-500); font-size: 0.7em; }
@media (min-width: 768px) { .pdp-price { font-size: 36px; } }

/* Vehicle specs grid */
.v-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 16px 0;
}
.v-spec-item {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  border-right: 1px solid var(--ink-100);
}
.v-spec-item:nth-child(even) { border-right: none; }
.v-spec-item:nth-last-child(-n+2) { border-bottom: none; }
.v-spec-label {
  font-size: 11px; font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.v-spec-value {
  font-size: 15px; font-weight: 600;
  color: var(--ink-900);
}

/* Features list */
.v-features-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.v-feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--success-100);
  color: #1E6E3E;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

/* Panel headings (Specifications / Condition & history / Equipment / Registration) */
.v-panel-heading {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-900);
  margin: 22px 0 10px;
}

/* Outstanding-finance warning */
.v-finance-note {
  background: #FFF6E5;
  border-left: 4px solid #E89B2C;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-700);
  margin: 12px 0 16px;
  line-height: 1.5;
}

/* Verified-VIN badge inside Registration panel */
.v-vin-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--success-100);
  color: #1E6E3E;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
}

/* VIN display */
.v-vin-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

/* Seller card */
.pdp-seller-card {
  background: var(--ink-50);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 20px 0;
}
.pdp-seller-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pdp-seller-detail {
  min-width: 0;
}
.pdp-seller-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--brand-orange-100);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--brand-orange-700);
  font-size: 20px; flex-shrink: 0;
}
.pdp-seller-name { font-weight: 700; color: var(--ink-900); font-size: 15px; }
.pdp-seller-meta { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.pdp-seller-stars { color: var(--brand-orange); font-size: 14px; letter-spacing: 1px; }
.pdp-seller-stars .empty { color: var(--ink-300); }
.pdp-seller-joined {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* Escrow banner */
.pdp-escrow {
  background: var(--success-100);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  margin: 16px 0 20px;
}
.pdp-escrow .lbl { font-weight: 700; color: var(--ink-900); font-size: 14px; }
.pdp-escrow .sub { font-size: 13px; color: var(--ink-500); margin-top: 3px; }
.pdp-escrow__icon { flex-shrink: 0; margin-top: 1px; }

/* Contact button */
.v-contact-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%;
  padding: 14px 20px;
  background: var(--brand-orange);
  color: #fff;
  font-weight: 700; font-size: 16px;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.v-contact-btn:hover { background: var(--brand-orange-700); color: #fff; }

/* Section heading */
.pdp-section-heading {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 20px;
  color: var(--ink-900); margin: 0 0 16px;
}

/* Location */
.pdp-location {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-500); margin-top: 6px;
}

/* Sold badge */
.pdp-sold-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-100); border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm); padding: 14px 20px;
  font-weight: 700; font-size: 16px; color: var(--ink-700);
  margin-bottom: 16px; width: 100%; justify-content: center;
}

/* Verified badge */
.pdp-verified { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; }

/* Description */
.pdp-description {
  max-width: 780px;
}
.pdp-desc-text {
  white-space: pre-wrap; line-height: 1.7;
  color: var(--ink-700); font-size: 15px;
}
.pdp-desc-text.is-clamped {
  max-height: 6.8em; overflow: hidden; position: relative;
}
.pdp-desc-text.is-clamped::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2.5em;
  background: linear-gradient(transparent, var(--paper));
  pointer-events: none;
}
.pdp-read-more {
  display: inline-block; margin-top: 6px;
  font-size: 14px; font-weight: 700;
  color: var(--brand-orange-700);
  cursor: pointer; background: none; border: none; padding: 0;
}
.pdp-read-more:hover { text-decoration: underline; }

/* Related-vehicle card year badge */
.v-related-badge {
  background: var(--brand-orange-50);
  color: var(--brand-orange-700);
}

/* Share bar */
.pdp-share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px;
}
.pdp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-200);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity 0.2s, transform 0.15s;
}
.pdp-share-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.pdp-share-btn--whatsapp {
  background: #25D366; color: #fff; border-color: #25D366;
}
.pdp-share-btn--whatsapp:hover { color: #fff; }
.pdp-share-btn--facebook {
  background: #1877F2; color: #fff; border-color: #1877F2;
}
.pdp-share-btn--facebook:hover { color: #fff; }
.pdp-share-btn--twitter {
  background: #000; color: #fff; border-color: #000;
}
.pdp-share-btn--twitter:hover { color: #fff; }
.pdp-share-btn--copy {
  background: var(--ink-100); color: var(--ink-700); border-color: var(--ink-300);
}
.pdp-share-btn--email {
  background: #E86826; color: #fff; border-color: #E86826;
}
.pdp-share-btn--email:hover { color: #fff; }

/* Copied toast */
.pdp-copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-900);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
}
.pdp-copy-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Lightbox */
.m2y-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.m2y-lightbox.is-open { opacity: 1; visibility: visible; }
.m2y-lightbox__img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain; border-radius: 8px;
  user-select: none;
}
.m2y-lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border: none;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 24px; border-radius: 50%;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center; z-index: 10;
}
.m2y-lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: none;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 28px; border-radius: 50%;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center; z-index: 10;
}
.m2y-lightbox__arrow--left { left: 16px; }
.m2y-lightbox__arrow--right { right: 16px; }
.m2y-lightbox__counter {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 14px;
}
.m2y-lightbox__wrap {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}