/* ===========================================================
   8. BLOG DETAIL PAGE — Clean Health Formula (v2.0 Responsive)
   Optimized • Fully Scoped • No Cross-Page Conflicts
=========================================================== */


/* ===========================================================
   📖 BLOG DETAIL — MAIN WRAPPER
=========================================================== */
.blog-detail {
  margin-top: 80px;
  background: var(--beige);
  padding-bottom: 80px;
  color: #333;
  animation: fadeIn 0.4s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===========================================================
   🖼️ BLOG HERO IMAGE (Responsive)
=========================================================== */
.blog-hero {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.blog-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.blog-hero:hover img { transform: scale(1.05); }

/* Mobile */
@media(max-width: 768px) {
  .blog-hero { height: 280px; border-radius: 14px; }
}
@media(max-width: 480px) {
  .blog-hero { height: 220px; }
}


/* ===========================================================
   📝 BLOG CONTENT BLOCK
=========================================================== */
.blog-content {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  line-height: 1.75;
}

.blog-content h1 {
  font-size: 2rem;
  color: var(--green-dark);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}

.blog-content .meta {
  color: #777;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.blog-content .subtitle {
  color: #444;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 22px;
}

.blog-content .content-body {
  color: #333;
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: 30px;
}

.blog-detail .back-btn {
  display: inline-block;
  margin-top: 10px;
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
  transition: 0.25s ease;
}
.blog-detail .back-btn:hover { color: var(--orange); }

/* Mobile adjustments */
@media(max-width: 768px) {
  .blog-content {
    padding: 26px 22px;
  }
  .blog-content h1 { font-size: 1.55rem; }
  .blog-content .subtitle { font-size: 1.05rem; }
  .blog-content .content-body { font-size: 0.97rem; }
}


/* ===========================================================
   🔗 SOCIAL SHARE BAR
=========================================================== */
.blog-detail .share-bar {
  margin: 18px 0 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-detail .share-bar span {
  color: var(--green-dark);
  font-weight: 600;
}

.blog-detail .share-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  color: var(--green-dark);
  font-size: 1rem;
  transition: 0.25s ease;
}

.blog-detail .share-icon:hover {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}

/* Mobile: center alignment */
@media(max-width: 600px) {
  .blog-detail .share-bar {
    justify-content: center;
    gap: 10px;
  }
}


/* ===========================================================
   📰 RELATED POSTS SECTION
=========================================================== */
.related-posts-section {
  margin-top: 80px;
  text-align: center;
}

.related-posts-section h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 38px;
}

/* Carousel */
.related-posts-carousel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 10px 25px;
  scroll-behavior: smooth;
}
.related-posts-carousel::-webkit-scrollbar { display: none; }

/* Cards */
.related-post-card {
  flex: 0 0 280px;
  background: #f9fafb;
  border-radius: 16px;
  scroll-snap-align: start;
  box-shadow: 0 3px 14px rgba(0,0,0,0.06);
  transition: 0.25s ease;
  overflow: hidden;
}

.related-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,128,0,0.15);
}

.related-post-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.related-post-info {
  padding: 18px;
  text-align: left;
}

.related-post-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 6px;
}

.related-post-info .date {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 8px;
  display: inline-block;
  font-weight: 500;
}

.read-more-btn {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  transition: 0.25s;
}
.read-more-btn:hover { color: var(--green-dark); }

/* Mobile improvements */
@media(max-width: 768px) {
  .related-post-card { flex: 0 0 240px; }
  .related-post-card img { height: 160px; }
}
@media(max-width: 480px) {
  .related-post-card { flex: 0 0 86%; }
  .related-post-card img { height: 150px; }
}


/* --- FIX: Enable mobile scroll for related posts --- */
.related-posts-carousel {
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  display: flex;
  flex-wrap: nowrap; /* Prevents cards from breaking into next line */
}

.related-posts-card {
  flex-shrink: 0; /* Ensures the card does NOT shrink and break scrolling */
}

/* FIX: Prevent container clipping */
.related-posts-section {
  overflow: visible !important;
}

/* FIX for some Bootstrap-like .container wrappers */
.container {
  overflow: visible;
}




/* ===========================================================
   PRODUCT DETAIL — REVIEWS SECTION (Clean Health v5.2 FINAL)
   PAGE-SPECIFIC — DOES NOT AFFECT HOME PAGE
   =========================================================== */

.product-detail-reviews {
  max-width: 1050px;
  margin: 60px auto;
  padding: 0 15px;
}

.product-detail-reviews .reviews-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-dark);
  text-align: center;
  margin-bottom: 25px;
}

/* ===========================================================
   REVIEWS CAROUSEL
   =========================================================== */

.product-detail-reviews .reviews-carousel {
  overflow-x: auto;
  overflow-y: hidden;

  display: flex;
  gap: 20px;

  padding: 10px 0 30px;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.product-detail-reviews .reviews-carousel::-webkit-scrollbar {
  height: 6px;
}

.product-detail-reviews .reviews-carousel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
}

/* ===========================================================
   REVIEW CARD — MATCH HOMEPAGE ALIGNMENT
   =========================================================== */

.product-detail-reviews .review-card {
  min-width: 320px;
  max-width: 330px;

  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e5e5;

  padding: 24px 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);

  scroll-snap-align: center;
  text-align: center;
  transition: 0.25s ease;
}

.product-detail-reviews .review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
}

/* Header */
.product-detail-reviews .review-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.product-detail-reviews .review-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: #222;
}

/* Stars */
.product-detail-reviews .review-rating {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.product-detail-reviews .review-rating i {
  font-size: 18px;
}

.product-detail-reviews .star-gold { color: #F6C600; }
.product-detail-reviews .star-muted { color: #d9d9d9; }

/* Body */
.product-detail-reviews .review-body {
  margin-top: 6px;
}

.product-detail-reviews .review-comment {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #444;
  text-align: center;
}

.product-detail-reviews .read-more {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--green-dark);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}
.product-detail-reviews .read-more:hover {
  text-decoration: underline;
}

/* No reviews */

.product-detail-reviews .no-reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #fffdf6;
  border: 1px dashed rgba(27, 122, 54, 0.25);
  color: #555;

  font-size: 0.95rem;
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 12px;

  margin: 25px auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: 0.25s ease;
}

.product-detail-reviews .no-reviews::before {
  content: "💭";
  font-size: 1.2rem;
  opacity: 0.8;
}

.product-detail-reviews .no-reviews:hover {
  background: #f9fff6;
  border-color: rgba(27, 122, 54, 0.35);
  transform: translateY(-2px);
}

/* ===========================================================
   BOTTOM NAVIGATION BUTTONS (PRODUCT DETAIL ONLY)
   =========================================================== */

.product-detail-reviews .reviews-bottom-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 25px;
}

.product-detail-reviews .rev-btn-pd {
  width: 40px;
  height: 40px;
  font-size: 22px;

  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  transition: 0.25s ease;
}

.product-detail-reviews .rev-btn-pd:hover {
  background: var(--green);
  transform: scale(1.08);
}

@media (max-width: 550px) {
  .product-detail-reviews .rev-btn-pd {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}


/* Arrow icon color change on hover */
.product-detail-reviews .rev-btn-pd:hover i {
  color: var(--green-dark);
}

/* ===========================================================
   REVIEW SUBMIT FORM — PRODUCT DETAIL
   =========================================================== */

.product-detail-reviews .review-form {
  max-width: 600px;
  width: 100%;
  margin: 40px auto 0;

  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;

  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.product-detail-reviews .review-form h3 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--green-dark);
  font-size: 1.45rem;
  font-weight: 700;
}

/* Inputs */
.product-detail-reviews .review-form input,
.product-detail-reviews .review-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 1rem;

  border: 1px solid #ddd;
  border-radius: 10px;

  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.product-detail-reviews .review-form input:focus,
.product-detail-reviews .review-form textarea:focus {
  border-color: var(--green-dark);
}

.product-detail-reviews .review-form textarea {
  min-height: 110px;
  resize: vertical;
}

/* Star Rating */
.product-detail-reviews .rating-stars {
  display: flex;
  direction: rtl;
  justify-content: center;
  gap: 4px;
  margin-bottom: 1.2rem;
}

.product-detail-reviews .rating-stars input {
  display: none;
}

.product-detail-reviews .rating-stars label {
  font-size: 1.7rem;
  cursor: pointer;
  color: #ccc;
  transition: 0.2s ease;
}

.product-detail-reviews .rating-stars input:checked ~ label,
.product-detail-reviews .rating-stars label:hover,
.product-detail-reviews .rating-stars label:hover ~ label {
  color: #F6C600;
}

/* Submit */
.product-detail-reviews .btn-submit {
  width: 100%;
  padding: 12px;

  background: var(--green-dark);
  color: #fff;

  border: none;
  border-radius: 10px;

  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;

  transition: background 0.2s ease, transform 0.2s ease;
}


.product-detail-reviews .review-note {
  text-align: center;
  margin-top: 10px;
  font-size: 0.85rem;
  color: #777;
}