/* =====================================================
   Saste Tools — Product Detail Page (Luxury polish)
   Load after variables.css + animations.css + style.css.
   ===================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.breadcrumb a { transition: var(--transition-fast); }
.breadcrumb a:hover { color: var(--gold-light); }

/* ---------- Image card ---------- */
.product-detail-img {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.product-detail-img::before {
  content: '';
  position: absolute;
  inset: -40% -40% auto -40%;
  height: 160%;
  background: radial-gradient(circle, var(--gold-glow-soft), transparent 65%);
  pointer-events: none;
}
/* The frame — not the <img> — owns the rounding and the clip, for the
   same reason as the product grid cards: border-radius on an <img> paired
   with object-fit does not reliably clip in every browser, so a plain
   rectangular screenshot upload would keep square corners while an image
   with its own baked-in rounded shape would look fine by accident. */
.product-detail-img-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.product-detail-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.product-detail-img:hover .product-detail-img-frame img { transform: scale(1.04); }

/* ---------- Info column ---------- */
.stock-pill.stock-in {
  background: rgba(46,204,113,0.12);
  border: 1px solid var(--success);
  color: var(--success);
}
.stock-pill.stock-out {
  background: rgba(255,107,107,0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* Scarcity line shown under the price when only a few accounts remain */
.stock-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f5a623;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 2px 0 16px;
}
.stock-scarcity i { font-size: 0.8rem; }

/* Product name + stock status shown together on one row. */
.detail-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 16px;
}
.detail-name-row h1 { margin: 0; }
.detail-name-row .stock-pill {
  margin-bottom: 0;
  font-size: 0.6rem;
  padding: 3px 9px;
  gap: 4px;
  font-weight: 600;
}
.detail-name-row .stock-pill i { font-size: 0.62rem; }

.product-detail-price {
  display: flex;
  width: fit-content;
  align-items: baseline;
  gap: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 10px 20px;
  border-radius: var(--radius);
  background-image: none;
  color: var(--gold) !important;
}

.plan-chip {
  display: flex;
  width: fit-content;
  align-items: flex-start;
  gap: 8px;
  background: rgba(252,192,10,0.08);
  border: 1px solid var(--glass-border);
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  max-width: 100%;
}
.plan-chip i { margin-top: 2px; flex-shrink: 0; }
/* Clamp the description to a fixed number of lines with an ellipsis,
   instead of letting it run on indefinitely. */
.plan-chip-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 600px) {
  .plan-chip-text { -webkit-line-clamp: 1; }
}

/* ---------- Buy button (premium glow) ---------- */
.product-detail-info .btn-primary {
  position: relative;
  background: linear-gradient(135deg, var(--whatsapp), #1aa64f) !important;
  box-shadow: 0 8px 26px rgba(37,211,102,0.32);
  border: none;
  transition: var(--transition);
}
.product-detail-info .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(37,211,102,0.42);
}

.product-detail-desc {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.product-detail-desc p { color: var(--text-muted); line-height: 1.7; }

@media (max-width: 1024px) {
  .product-detail-img { padding: 16px; max-width: 260px; }
}

@media (max-width: 600px) {
  .product-detail-info h1 { font-size: 1.4rem; }
  .product-detail-price { font-size: 1.4rem; padding: 8px 16px; }
  .product-detail-info .btn-primary,
  .product-detail-info .btn-outline {
    width: 100%;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .product-detail-img { max-width: 220px; padding: 12px; }
}

/* ---------- Customer Reviews (per-product) ---------- */
.rating-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--yellow);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.95rem;
}
.rating-summary-pill small {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.75rem;
  margin-left: 4px;
}

.review-form-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 26px 28px;
  max-width: 640px;
}
.review-form-box h3 { margin-bottom: 4px; }

/* Honeypot: invisible to real visitors, present for bots to fill in */
.review-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.star-picker {
  display: flex;
  gap: 8px;
  font-size: 1.6rem;
  color: #444;
  cursor: pointer;
  margin-bottom: 4px;
}
.star-picker i { transition: color 0.15s ease, transform 0.15s ease; }
.star-picker i:hover,
.star-picker i.active { color: var(--yellow); }
.star-picker i:hover ~ i { color: #444; }
.star-picker:hover i:hover { transform: scale(1.1); }

@media (max-width: 600px) {
  .review-form-box { padding: 20px; }
}

/* ---------- All Reviews page (reviews.php) ---------- */
.review-product-tag {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.78rem;
  color: var(--yellow);
  font-weight: 600;
}
.reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.reviews-pagination-info {
  color: var(--text-muted);
  font-size: 0.85rem;
}