/* ==========================================================================
   VitalKlik Product Review v2 — Tailwind Design System
   ========================================================================== 
   
   The styles for the single product review template are now managed via Tailwind CSS. 
*/

/* ── Utility patches (classes not in static Tailwind build) ── */
.min-w-\[560px\] { min-width: 560px; }
.pt-\[124px\]    { padding-top: 124px; }

/* ==========================================================================
   GP THEME OVERRIDES — Fix GeneratePress defaults that clash with Tailwind
   GeneratePress sets font on `body` which beats Tailwind's `html` selector.
   LiteSpeed Cache bundles everything, so these overrides are needed.
   ========================================================================== */

/* ── Font Family Override ── */
body,
body p,
body li,
body a,
body div,
body td,
body th,
body label,
body button,
body input,
body select,
body textarea,
.site,
.site-content {
  font-family: var(--hp-font) !important;
}

/* Prose headings font override */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--hp-font) !important;
}

/* ── Reset GeneratePress Links ── */
a, a:visited, a:hover, a:focus, a:active {
  text-decoration: none !important;
}
.prose a {
  text-decoration: underline !important;
}

/* ── List Style Override ── */
ul, ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Restore list styles inside WordPress entry-content blocks only */
.entry-content > ul,
.entry-content > ol {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
  margin-bottom: 1.5rem;
}
.entry-content > ol {
  list-style: decimal !important;
}
.entry-content li {
  margin-bottom: 0.5em;
  padding-left: 0.25em;
}

/* Typography prose resets for AI Emojis logic to remove bullet dots but keep margins */
.prose ul > li::marker,
.prose ol > li::marker {
  content: none !important;
}
.prose ul, .prose ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.prose li {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ── Sidebar (Ulasan Mendalam) Polish ── */
.toc-sidebar {
  border-radius: 1.5rem;
  background: #f8f9ff;
  box-shadow: 0 4px 24px rgba(19, 27, 46, 0.06);
}

.toc-sidebar nav a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.toc-sidebar nav a:hover {
  background: rgba(13, 107, 75, 0.06);
}

.toc-sidebar nav a .hp-icon {
  font-size: 20px;
}

/* Layout 3 cột Desktop */
@media (min-width: 1280px) {
  .pr-layout-container {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }
  .toc-sidebar {
    width: 18%;
    min-width: 200px;
    max-width: 260px;
    position: sticky;
    top: 120px;
  }
  .order-form-grid {
    display: flex;
    flex-grow: 1;
    gap: 32px;
    align-items: flex-start;
  }
  .product-info-column {
    width: 36.5%; /* 30% of total */
    min-width: 300px;
  }
  .form-column {
    width: 63.5%; /* 52% of total */
    min-width: 480px;
  }
}

/* Laptop 1024-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pr-layout-container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .toc-sidebar {
    width: 20%;
    min-width: 180px;
    position: sticky;
    top: 120px;
  }
  .order-form-grid {
    display: flex;
    flex-grow: 1;
    gap: 24px;
    align-items: flex-start;
  }
  .product-info-column {
    width: 40%; /* 32% of total */
    min-width: 280px;
  }
  .form-column {
    width: 60%; /* 48% of total */
    min-width: 400px;
  }
}

/* Tablet 768-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .pr-layout-container {
    display: block;
  }
  .toc-sidebar {
    display: none !important;
  }
  .order-form-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .product-info-column {
    width: 40%;
  }
  .form-column {
    width: 60%;
  }
}

/* Mobile < 768px */
@media (max-width: 767px) {
  body.single-product_review {
    color: #0f172a;
    font-size: 17px;
    line-height: 1.55;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  body.single-product_review main {
    overflow-x: hidden;
  }

  body.single-product_review .max-w-\[1200px\] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .pr-layout-container {
    display: block;
  }
  .order-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .toc-sidebar {
    display: none !important;
  }
  
  .product-info-column, .form-column {
    width: 100%;
  }

  .hp-hero-offer-title {
    font-family: var(--hp-font) !important;
    font-size: 29px !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  .hp-hero-simple-benefit {
    display: -webkit-box;
    overflow: hidden;
    font-size: 18px !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hp-hero-price-block {
    padding-bottom: 2px;
  }

  .hp-hero-price-sale {
    font-size: 46px !important;
    line-height: 1 !important;
  }

  .review-score-radial {
    display: none !important;
  }

  #hp-main-img {
    max-height: 330px;
    border-radius: 20px !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
    transform: none !important;
  }

  .hp-gallery {
    gap: 7px !important;
    margin-top: 10px !important;
  }

  .hp-thumb:nth-child(n+5) {
    display: none !important;
  }

  .cta-primary {
    min-height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 18px 16px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .cta-secondary {
    display: none !important;
  }

  .hp-hero-trust-strip {
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(13, 107, 75, 0.14);
    border-radius: 16px;
    background: #ffffff;
    padding-top: 0 !important;
  }

  .hp-hero-trust-strip > div {
    min-height: 48px;
    padding: 12px 14px;
    color: #0f172a;
    font-size: 16px !important;
    line-height: 1.35;
  }

  .hp-hero-trust-strip > div + div {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }

  .hp-hero-trust-strip .hp-icon {
    font-size: 22px !important;
  }

  .hp-hero-price-original {
    font-size: 19px !important;
  }

  .hp-hero-discount {
    font-size: 13px !important;
  }

  #order-form {
    margin-bottom: 120px !important;
    padding: 32px 14px 36px !important;
    border-radius: 22px !important;
  }

  #order-form,
  #hp-order-form {
    scroll-margin-top: 170px;
    scroll-margin-bottom: 140px;
  }

  .form-column {
    padding: 22px 16px !important;
    border-radius: 22px !important;
  }

  #order-form .product-info-column {
    display: none !important;
  }

  #hp-order-form label {
    display: block;
    margin-bottom: 8px;
    color: #334155 !important;
    font-size: 16px !important;
    line-height: 1.35;
    font-weight: 850 !important;
    letter-spacing: 0.02em;
  }

  #hp-order-form input[type="text"],
  #hp-order-form input[type="tel"],
  #hp-order-form select,
  #hp-order-form textarea {
    min-height: 56px !important;
    padding: 16px !important;
    border-color: #cbd5e1 !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  #hp-order-form textarea {
    min-height: 106px !important;
  }

  #hp-order-form input::placeholder,
  #hp-order-form textarea::placeholder {
    color: #64748b !important;
    opacity: 1;
  }

  #hp-order-form .relative.flex.items-stretch {
    min-height: 56px;
    border-color: #cbd5e1 !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
  }

  #hp-order-form .relative.flex.items-stretch > span {
    min-height: 56px;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    color: #334155 !important;
    font-size: 17px;
  }

  #hp-order-form .helper,
  #hp-order-form small {
    margin-top: 8px;
    color: #64748b !important;
    font-size: 15px !important;
    line-height: 1.45;
  }

  .order-summary {
    padding: 18px 16px;
    margin: 22px 0;
    border-radius: 16px;
  }

  .summary-line {
    gap: 12px;
    font-size: 16px;
    line-height: 1.45;
  }

  .summary-line.total {
    font-size: 18px;
  }

  .summary-line .total-amount {
    font-size: 28px;
  }

  .cod-reminder {
    padding: 12px;
    font-size: 16px;
    line-height: 1.45;
  }

  #hp-submit-order {
    display: flex !important;
    min-height: 70px !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
    scroll-margin-bottom: 120px;
  }

  #hp-submit-order span:first-child {
    font-size: 21px !important;
    line-height: 1.2;
  }

  #hp-submit-order span:last-child {
    font-size: 14px !important;
    line-height: 1.35;
  }

  #hp-order-form > .flex.items-center.justify-center:not(#hp-submit-order),
  #hp-order-form > .mt-8.pt-6 {
    display: none !important;
  }

  .hp-mobile-review-flow {
    display: flex !important;
    flex-direction: column;
    gap: 34px;
  }

  .hp-mobile-review-flow > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hp-mobile-reviews { order: 10; }
  .hp-mobile-ingredients { order: 20; }
  .hp-mobile-expert { order: 30; }
  .hp-mobile-faq { order: 40; }
  .hp-mobile-final-cta { order: 50; }
  .hp-mobile-after-faq-hide { display: none !important; }

  #timeline {
    display: none !important;
  }

  #ulasan h2,
  #ingredients h2,
  #faq h2 {
    font-family: var(--hp-font) !important;
    font-size: 28px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  #ulasan > div.grid,
  #ingredients > div.grid {
    gap: 14px !important;
  }

  #ulasan > div.mt-8 {
    display: none !important;
  }

  #ingredients > div.grid > div {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  #ingredients > div.grid > div:nth-child(n+4) {
    display: none !important;
  }

  #ingredients .w-14,
  #ingredients .w-12 {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 14px !important;
  }

  .hp-mobile-expert .absolute.top-0 {
    display: none !important;
  }

  .hp-mobile-expert > div {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  #faq summary {
    min-height: 60px;
    padding: 18px !important;
  }

  #faq summary span:first-child,
  #faq details div {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  
  .checkout-cta-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background: white;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  }
}

.product-info-column .brand-name {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.15;
  font-weight: 800;
}

@media (max-width: 480px) {
  .product-info-column .brand-name {
    white-space: normal;
    word-break: keep-all;
    hyphens: none;
  }
}

.product-info-column .testimonial-block {
  font-size: 14px;
  line-height: 1.5;
  padding: 16px;
  background: #f7f7f7;
  border-left: 3px solid #005137;
  border-radius: 8px;
  margin-top: 20px;
  width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.testimonial-block blockquote {
  margin: 0;
  font-style: italic;
  color: #333;
}
.testimonial-block .author {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
  font-style: normal;
}
.product-info-column .tagline {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin-top: 8px;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Promo Marquee */
.promo-bar {
  background: #0d1530;
  color: white;
  overflow: hidden;
  padding: 10px 0;
  width: 100%;
  height: 40px;
  min-height: 40px;
}
.promo-track {
  display: flex;
  gap: 48px;
  animation: scroll-promo 25s linear infinite;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  width: max-content;
}
.promo-track span {
  display: flex;
  align-items: center;
  gap: 8px;
}
@keyframes scroll-promo {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Order Summary */
.order-summary {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 15px;
  color: #374151;
}
.summary-line.total {
  font-size: 18px;
  padding-top: 12px;
}
.summary-line .total-amount {
  color: #dc2626;
  font-size: 22px;
}
.summary-line .free {
  color: #16a34a;
  font-weight: 700;
}
.summary-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}
.cod-reminder {
  margin-top: 12px;
  padding: 10px;
  background: #fef3c7;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  color: #78350f;
  margin-bottom: 0;
}

/* Performance: Skip rendering off-screen sections */
.hp-section-lazy {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/* Hide old duplicate sections on mobile after COD money-flow blocks. */
@media (max-width: 767px) {
  .hp-cod-mobile-duplicate {
    display: none !important;
  }

  /* Hide review TOC on mobile so COD buyers stay focused on order flow. */
  .hp-review-toc-mobile-hide {
    display: none !important;
  }

  /* Hide dense review details on mobile while preserving desktop SEO/review content. */
  .hp-mobile-verdict-body-hide,
  .hp-mobile-dense-section-hide {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #order-form,
  #hp-order-form {
    scroll-margin-top: 140px;
  }
}