/* ============================================================================
   PRODUCT DETAIL — REDESIGN STYLES
   ----------------------------------------------------------------------------
   Drop-in stylesheet for the product detail page redesign. Loaded AFTER
   products/css/product-details.css so every rule here overrides the existing
   styles via the cascade — meaning product-details.css itself is NEVER edited.

   Install: copy to  public/products/css/product-detail-redesign.css
   Link it in  resources/views/layouts/products/product-detail-layout.blade.php
   immediately AFTER the product-details.css <link> (see README, step 2).

   Structure:
     1) ALL WIDTHS   — desktop + mobile design refinements
     2) PHONE ONLY   — @media (max-width: 767px)
     3) PHOTO VIEWER — the new full-screen lightbox + "+N" thumbnail scrim
   Every block is commented with WHAT it does and WHY.
   ========================================================================= */


/* ====================================================================
   1) ALL WIDTHS
   ==================================================================== */

/* Expand (lightbox) icon uses stroke="currentColor"; this sets its desktop
   color (dark on the white circle). The phone chip overrides it to white. */
#productDetail .productDetailsBlock .detailsLeft .lightbox-icon {
  color: #111928;
}

/* --- Breadcrumb separators ---------------------------------------------
   The chevron SVGs ship at 12×13px — as large as the breadcrumb text and
   optically too high. Shrink to a subordinate size and vertically center. */
#productDetail .productDetailBreadcrumbs ul span {
  display: flex;
  align-items: center;
}
#productDetail .productDetailBreadcrumbs ul span svg {
  width: 9px;
  height: 10px;
  display: block;
  margin-top: 1px;
}

/* --- Gallery prev/next arrows as dark chips -----------------------------
   Join the photo-control family (counter, expand, "+N"): dark translucent
   circles with white chevrons. Replaces the old white-circle image files. */
#productDetail .productDetailsBlock .detailsLeft .main-image-wrapper .arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(17, 25, 40, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
#productDetail .productDetailsBlock .detailsLeft .main-image-wrapper .arrow:hover {
  background: rgba(17, 25, 40, 0.85);
}

/* --- Section heading letter-spacing -------------------------------------
   "General Information" / "Category Specific" read airy at natural spacing;
   tighten to -0.4px so the words read as solid units (matches the title). */
#productDetail .productDetailsBlock .headingBlock h2 {
  letter-spacing: -0.4px;
}

/* --- Spec value weight --------------------------------------------------
   Bump the VALUES in the spec tables to Gotham-Bold so the data pops; the
   gray labels (.para) stay light. Do NOT bold the labels. */
#productDetail .product-detail-table-wrapper .product-table-row .para-bold {
  font-family: 'Gotham-Bold', system-ui, sans-serif;
}

/* --- Listing title letter-spacing --------------------------------------
   product-details.css sets 0.8px on the title; with all-caps Gotham-Black
   that reads stretched. Natural spacing. */
#productDetail .productDetailsBlock .detailsRightTopNew h1 {
  letter-spacing: normal;
}

/* --- Main photo position counter ("1 / 10") ----------------------------
   Was bare white text (invisible on bright photos). Give it the dark-chip
   treatment, bottom-left. */
#productDetail .productDetailsBlock .detailsLeft .main-image-wrapper .counter {
  left: 10px;
  right: auto;
  bottom: 10px;
  top: auto;
  transform: none;
  width: auto;
  background: rgba(17, 25, 40, 0.72);
  color: #ffffff;
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
}

/* --- Latest Listings cards: photo is a click-through -------------------
   Hide the in-card prev/next arrows; the photo links to the listing. The
   counter becomes a camera + total-count badge (markup change in blade). */
#latestListingSale .container .latestListingSaleList .latestListingSaleListItem .imageBlock .buttons {
  display: none;
}
#latestListingSale .container .latestListingSaleList .latestListingSaleListItem .imageBlock .sliderDetail {
  position: absolute;
  left: 10px;
  bottom: 10px;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  min-width: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(17, 25, 40, 0.72);
  color: #ffffff;
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 6px;
  z-index: 2;
}

/* --- Title-card actions: Share chip (neutral) + Save heart (tinted) -----
   COLOR RULE: orange tint = lead-generating actions only; neutral = utility.
   Share is white + gray border; Save keeps the brand tint. Both 32px. */
#productDetail .productDetailsBlock .detailsRightTopNew .headingsBlock .titleActions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#productDetail .shareListingBtn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  background: #ffffff;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#productDetail .shareListingBtn svg { width: 14px; height: 14px; }
#productDetail .shareListingBtn svg path { stroke: #6B7280; }
#productDetail .shareListingBtn:hover { background: #F9FAFB; }

#productDetail .productDetailsBlock .detailsRightTopNew .headingsBlock .saveListing .icon {
  width: 32px;
  min-width: 32px;
  height: 32px;
}
#productDetail .productDetailsBlock .detailsRightTopNew .headingsBlock .saveListing .icon svg {
  width: 16px;
  height: 16px;
}
/* The heart chip becomes a label-less status light (text hidden); it fills
   solid orange when the listing is saved. */
#productDetail .productDetailsBlock .detailsRightTopNew .headingsBlock .saveListing h6 {
  display: none;
}
#productDetail .productDetailsBlock .detailsRightTopNew .headingsBlock .saveListing.active .icon {
  background: #FF8922;
}
#productDetail .productDetailsBlock .detailsRightTopNew .headingsBlock .saveListing.active .icon .fill svg path {
  fill: #ffffff;
}

/* "Link copied" pill shown after tapping share (optional copy-link mode). */
#productDetail .shareCopiedPill {
  position: absolute;
  top: -30px;
  right: 0;
  background: #111928;
  color: #ffffff;
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
}

/* --- "Save & Get Price Drop Alerts" button (under the price) -----------
   Email-Seller-style tinted bar. Saved state: cream bg, check icon, label
   swap (handled in JS). */
#productDetail .savePriceAlertBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  background: #FF892214;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #FF8922;
}
#productDetail .savePriceAlertBtn:hover { background: #FF89221F; }
#productDetail .savePriceAlertBtn .sa-check { display: none; }
#productDetail .savePriceAlertBtn.saved {
  border: 1px solid #FFD9B3;
  background: #FFF8F1;
  color: #9A5B07;
}
#productDetail .savePriceAlertBtn.saved .sa-heart { display: none; }
#productDetail .savePriceAlertBtn.saved .sa-check { display: block; }

/* --- Verified dealer seal ----------------------------------------------
   Small trust badge next to the dealer name. The h3 becomes flex only to
   center the badge — box dimensions unchanged. 22px desktop / 18px phone. */
#productDetail .productDetailsBlock .detailsRightCenterNew .fullName h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}
#productDetail .verifiedDealerSeal {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* --- Latest Listings: brand alignment ----------------------------------
   View More → neutral pill (utility, per color rule). Heading 24→20px to
   match the other section headings. Card type ramp: title 16px, location
   14px, price Gotham-Black 22px. */
#latestListingSale .container h2 {
  font-size: 20px;
}
#latestListingSale .container .headingBlock .viewAllButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  color: #111928;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
}
#latestListingSale .container .headingBlock .viewAllButton:hover { background: #F9FAFB; }
#latestListingSale .container .latestListingSaleList .latestListingSaleListItem .detailBlock h4 {
  font-size: 16px;
  line-height: 1.3;
  min-height: 0;
  margin: 0 0 10px;
}
#latestListingSale .container .latestListingSaleList .latestListingSaleListItem .detailBlock h6 span {
  font-size: 14px;
}
#latestListingSale .container .latestListingSaleList .latestListingSaleListItem .detailBlock h3 {
  font-family: Gotham-Black;
  font-size: 22px;
  margin: 10px 0 4px;
}


/* ====================================================================
   2) PHONE ONLY  (≤767px)
   ==================================================================== */
@media screen and (max-width: 767px) {

  /* Breadcrumbs: slimmer bar on the 12px rail; smaller separators;
     one line that swipes sideways when the trail is long. */
  #productDetail .productDetailBreadcrumbs {
    min-height: 0;
    padding: 12px;
  }
  #productDetail .productDetailBreadcrumbs ul span svg { width: 8px; height: 9px; }
  #productDetail .productDetailBreadcrumbs ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #productDetail .productDetailBreadcrumbs ul::-webkit-scrollbar { display: none; }

  /* Gallery + the three right-panel cards share one 12px rail (the photo
     and cards become the same width). Negative margins pull them out of the
     card's 15px/32px phone padding to a uniform 12px inset. */
  #productDetail .productDetailsBlock .detailsLeft .image-slider-container {
    margin: -3px -20px 0;
    width: auto;
    max-width: none;
  }
  #productDetail .productDetailsBlock .detailsLeft .main-image-wrapper {
    height: 270px;
    border-radius: 12px;
  }
  #productDetail .productDetailsBlock .detailsLeft .thumbnails-container {
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 0;
  }
  #productDetail .productDetailsBlock .detailsRightNew {
    margin: 0 -20px;
    width: auto;
  }
  #productDetail .productDetailsBlock .detailsLeft .thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
  }

  /* Gallery controls: smaller on a small photo. The expand button becomes a
     28px dark chip; transform:none cancels a leftover translateY(-16px) in
     product-details.css that pushed it off the photo. */
  #productDetail .productDetailsBlock .detailsLeft .main-image-wrapper .arrow { width: 28px; height: 28px; }
  #productDetail .productDetailsBlock .detailsLeft .main-image-wrapper .arrow svg { width: 13px; height: 13px; }
  #productDetail .productDetailsBlock .detailsLeft .lightbox-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    top: 10px;
    right: 10px;
    transform: none;
    background: rgba(17, 25, 40, 0.72);
    border: 0;
    border-radius: 8px;
    color: #ffffff;
  }
  #productDetail .productDetailsBlock .detailsLeft .lightbox-icon svg { width: 13px; height: 13px; }

  /* Save heart: text hidden so the title runs nearly full width. */
  #productDetail .productDetailsBlock .detailsRightTopNew .saveListing h6 { display: none; }

  /* Title drops to 20px so it flows instead of stacking 3 lines. */
  #productDetail .productDetailsBlock .detailsRightTopNew h1 {
    font-size: 20px;
    line-height: 1.25;
  }

  /* Dealer card: tappable Email/Call (44px); smaller seller identity. */
  #productDetail .productDetailsBlock .detailsRightCenterNew .delarDetailsRight a { min-height: 44px; }
  #productDetail .productDetailsBlock .detailsRightCenterNew .fullName h3 { font-size: 15px; }
  #productDetail .productDetailsBlock .detailsRightCenterNew .fullName h5 { font-size: 13px; }
  #productDetail .productDetailsBlock .detailsRightCenterNew .initials {
    width: 44px;
    min-width: 44px;
    height: 44px;
    font-size: 15px;
  }
  #productDetail .verifiedDealerSeal { width: 18px; height: 18px; }

  /* ---- Sticky contact bar ----
     16px symmetric padding (marketplace-standard). iPhone home-indicator
     clearance: see README "safe-area" note. */
  .stickyBar { padding: 16px 24px; }
  .stickyBar .stickyBarTop h2 { font-size: 23px; margin: 0; }
  .stickyBar .stickyBarTop { align-items: flex-start; }

  /* Monthly estimate line under the price (6px gap). */
  .stickyBar .stickyBarTop .stickyEstimate {
    display: block;
    margin-top: 6px;
    font-family: 'Gotham-Medium', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #6B7280;
  }
  .stickyBar .stickyBarTop .stickyEstimate .stickyCalcLink { color: #FF8922; text-decoration: none; }

  /* Share + save chips, matching the title-card pair. */
  .stickyBar .stickyBarTop .stickyTopActions { display: flex; align-items: center; gap: 8px; }
  .stickyBar .stickyBarTop .stickySaveBtn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #FFF4EA;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stickyBar .stickyBarTop .stickySaveBtn svg { width: 15px; height: 15px; }
  .stickyBar .stickyBarTop .stickySaveBtn.saved { background: #FF8922; }
  .stickyBar .stickyBarTop .stickySaveBtn.saved svg path { fill: #ffffff; }

  /* Sticky share is a neutral 32px chip (circle drawn inside the SVG). */
  .stickyBar .stickyBarTop .shareButton svg { width: 32px; height: 32px; display: block; }
  .stickyBar .stickyBarTop .shareButton svg rect { fill: #ffffff; stroke: #E5E7EB; }
  .stickyBar .stickyBarTop .shareButton svg path { stroke: #6B7280; }

  /* Email/Call become the tinted pair (matches the dealer card). */
  .stickyBar .stickyBarBottom { gap: 8px; }
  .stickyBar .stickyBarBottom .emailSeller,
  .stickyBar .stickyBarBottom .itemCall {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    background: #FF892214;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
  }
  .stickyBar .stickyBarBottom .emailSeller span,
  .stickyBar .stickyBarBottom .itemCall span {
    font-family: 'Gotham-Medium', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #FF8922;
  }
  .stickyBar .stickyBarBottom .emailSeller svg path,
  .stickyBar .stickyBarBottom .itemCall svg path { fill: #FF8922; }

  /* Latest Listings aligns to the 12px rail. */
  #latestListingSale .container { padding: 32px 12px; }

  /* ---- Spec tables: TWO-COLUMN grid on phones ----
     Each field is a cell (gray label over bold value), two per row. */
  #productDetail .product-detail-table-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
  }
  /* Match the accordion's open-state selector so the grid wins when open. */
  #productDetail .productDetailsBlock.productAccordianBlock.productDetailsBlockActive .product-detail-table-wrapper {
    display: grid;
  }
  #productDetail .product-detail-table-wrapper .product-table-row,
  #productDetail .product-detail-table-wrapper .product-table-row:first-child,
  #productDetail .product-detail-table-wrapper .product-table-row:last-child {
    border-bottom: none;
    padding: 0;
    gap: 4px;
  }
  #productDetail .product-detail-table-wrapper .product-table-row .product-table-col .para { font-size: 13px; }
  #productDetail .product-detail-table-wrapper .product-table-row .product-table-col .para-bold {
    font-size: 15px;
    line-height: 150%;
  }
  /* Long free-text fields (Description) span both columns under a divider.
     Targets ONLY the explicit "product-table-row--full" class — NOT
     :last-child, because a section's last field isn't always full-width
     (Category Specific ends on "Hitch Type", which must stay beside
     "Engine"). The extra .productDetailsBlock raises specificity so the
     16px top gap isn't overridden by the cell-reset above. */
  #productDetail .productDetailsBlock .product-detail-table-wrapper .product-table-row--full {
    grid-column: 1 / -1;
    border-top: solid 1px #E5E7EB;
    padding-top: 16px;
  }

  /* ---- Loan calculator popup: mobile overlap fix (real production bug) ----
     The dialog had a fixed height with flex children, so on a phone the
     form + result + fine print overflowed and the fine print collided with
     the stats and the Request Financing button. Let the dialog be
     content-height (capped, scrollable) and stop the sections compressing. */
  .loanCalculatorDialog {
    height: auto;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .loanCalculatorHeading,
  .loanCalculatorGrid,
  .loanCalculatorFinePrint { flex-shrink: 0; }
  .loanCalculatorResult { min-height: 0; }
}


/* ====================================================================
   3) PHOTO VIEWER — full-screen lightbox + "+N" thumbnail scrim
   Pairs with product-detail-redesign.js (which builds the .mlLightbox DOM).
   ==================================================================== */
.mlLightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0D1219;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mlLightbox.open { opacity: 1; pointer-events: auto; }
.mlLightbox .mlLightboxImage {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mlLightbox .mlLightboxCounter {
  position: absolute;
  top: 18px;
  left: 18px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1;
}
.mlLightbox .mlLightboxClose {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mlLightbox .mlLightboxClose:hover { background: rgba(255, 255, 255, 0.24); }
.mlLightbox .mlLightboxArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mlLightbox .mlLightboxArrow:hover { background: rgba(255, 255, 255, 0.24); }
.mlLightbox .mlLightboxArrow.prev { left: 16px; }
.mlLightbox .mlLightboxArrow.next { right: 16px; }
.mlLightbox .mlLightboxDots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.mlLightbox .mlLightboxDots span {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.2s ease, background 0.2s ease;
}
.mlLightbox .mlLightboxDots span.active { width: 18px; background: #FF8922; }

/* One-time "Swipe to browse photos" hint (phones, first open per session). */
.mlLightbox .mlLightboxHint {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1;
  padding: 9px 16px;
  border-radius: 16px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.mlLightbox .mlLightboxHint.show { opacity: 1; }

/* "+N" scrim on the last visible thumbnail when more photos exist. */
.thumbMoreScrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(17, 25, 40, 0.62);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Gotham-Medium', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .mlLightbox .mlLightboxArrow { display: none; } /* phones swipe instead */
  .mlLightbox .mlLightboxImage { max-height: 76vh; }
  .thumbMoreScrim { font-size: 14px; }
}