/* 07-product-page.css — Product detail page: buy/save/call/offer buttons, report, similar listings, owner buttons.
   Part of the old css/styles.css (lines 1476–1663); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ── Product Detail Page ── */
#productPage { padding: 0 !important; top: 0 !important; height: 100% !important; overflow-y: auto; }
.product-back-btn {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  /* pad top by safe-area so the back button clears the notch/Dynamic Island */
  padding: env(safe-area-inset-top, 0px) 16px 10px;
  /* ensure the button is always at least 44px tall below the safe area */
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  font-size: 24px; color: #333; cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  box-sizing: border-box;
}
.product-back-btn:active { opacity: 0.6; }
.product-page-content { padding: 0 0 calc(100px + env(safe-area-inset-bottom, 0px)); }
.product-details { padding: 16px 16px 0; }
.product-details h2 { font-size: 1.15rem; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; line-height: 1.3; }
.product-details .price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.product-details #productPrice { font-size: 1.3rem; font-weight: 700; color: #19378C; }
.product-details #productDescription { font-size: 0.9rem; color: #555; line-height: 1.6; margin-bottom: 8px; }
.product-detail-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.chip-condition { background: #f0f9ee; color: #2d7a2d; border: 1px solid #c8e6c9; }
.chip-category  { background: #eef1f9; color: #19378C; border: 1px solid #b8c4e0; text-transform: capitalize; }
.chip-brand     { background: #dde4f0; color: #19378C; border: 1px solid #b8c4e0; }

.purchase-section {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Primary row: Buy Now (grows) + Save icon-only button ── */
.product-action-row-primary {
  display: flex;
  gap: 8px;
}

.purchase-btn {
  flex: 1;
  background: #19378C;
  color: #fff;
  border: none;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s, transform 0.1s;
}
.purchase-btn:hover  { background: #0f2460; }
.purchase-btn:active { transform: scale(0.97); }

/* Plastay button */
.add-to-plastay-btn {
  flex-shrink: 0;
  background: #f0f2f8;
  color: #19378C;
  border: 1.5px solid #e0e6f5;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
  min-width: 108px;
}
.add-to-plastay-btn:hover  { background: #dde3f5; border-color: #c5d2f0; }
.add-to-plastay-btn:active { transform: scale(0.97); }
/* Saved state */
.add-to-plastay-btn.saved {
  background: #19378C;
  color: #fff;
  border-color: #19378C;
}

/* ── Secondary row: Call + Make Offer ── */
.product-action-row-secondary {
  display: flex;
  gap: 8px;
}

.product-action-secondary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.6rem 0.5rem;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #e8e8e8;
  background: #fafafa;
  color: #555;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.product-action-secondary-btn:hover  { background: #eef1f9; border-color: #c5d2f0; color: #19378C; }
.product-action-secondary-btn:active { transform: scale(0.97); }

.product-action-offer-btn {
  border-color: #d4e6ff;
  background: #eef5ff;
  color: #19378C;
}
.product-action-offer-btn:hover { background: #dce9ff; border-color: #a8c8f0; }

/* ── Report Listing ── */
.product-action-row-report {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}
.product-report-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.product-report-btn:hover  { color: #e74c3c; background: #fff0f0; }
.product-report-btn:active { transform: scale(0.97); }
.product-report-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Similar Listings Section ── */
#similarListingsSection {
  padding: 18px 0 8px;
  border-top: 1.5px solid #f0f0f0;
  margin-top: 8px;
}
.similar-listings-header {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1a2e;
  padding: 0 16px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Vertical 2-column grid, sitting at the bottom of the page where the
   user's natural scroll direction already continues downward — reuses the
   home screen's .product-card markup/styling exactly (see #productGrid). */
.similar-listings-scroll {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  padding: 0 16px 12px;
}

/* ── Owner product page button variants ── */
.owner-product-sold-btn {
  background: linear-gradient(135deg, #27ae60, #229954) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.owner-product-delete-btn {
  background: #fff0f0 !important;
  color: #e74c3c !important;
  border-color: #ffd0d0 !important;
}
.owner-product-delete-btn:hover {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #e74c3c !important;
}

/* ── Item details — collapsible (product-page.js) ──
   Closed by default; tap the header to show the list. The chevron is
   drawn in CSS so it never depends on the icon font. */
.pp-details {
  margin: 12px 0 4px;
  border: 1px solid #eef0f5; border-radius: 14px;
  background: #fff; overflow: hidden;
}
.pp-details summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px; font-weight: 700; color: #14213d;
  -webkit-tap-highlight-color: transparent;
}
.pp-details summary::-webkit-details-marker { display: none; }
.pp-details summary:active { background: #f8f9fc; }
.pp-details-count { color: #9aa0ad; font-weight: 600; }
.pp-details-chevron {
  width: 8px; height: 8px; flex-shrink: 0; margin: -4px 4px 0 0;
  border-right: 2px solid #9aa0ad; border-bottom: 2px solid #9aa0ad;
  transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease;
}
.pp-details[open] .pp-details-chevron { transform: rotate(-135deg); margin-top: 4px; }
.pp-details[open] summary { border-bottom: 1px solid #eef0f5; }
.pp-details-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 14px; font-size: 13px;
}
.pp-details-row:nth-child(even) { background: #fafbfd; }
.pp-details-label { color: #7a7d8a; flex-shrink: 0; }
.pp-details-value { color: #1a1a2e; font-weight: 600; text-align: right; }