/* Shared styles for product content fragments (POP accordions) */
.product-content .accordion-button { font-weight: 700; color: #2c3e50; }
.product-content .accordion-button:not(.collapsed) { color: #155724; background-color: #d4edda; box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); }
.product-content .accordion-body { background-color: #fcfcfc; }
.product-content .accordion-body ul { padding-left: 20px; margin-bottom: 10px; }
.product-content .accordion-body li { margin-bottom: 5px; }
.product-content .section-title { color: #198754; font-weight: bold; display: block; margin-top: 10px; margin-bottom: 5px; }
.product-content .text-center.mb-4 h2 { font-weight: 700; color: #198754; }
.product-content .product-container { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Ensure images if any are responsive */
.product-content img { max-width: 100%; height: auto; }

/* POP fragment base styles (used by content HTML fragments) */
.pop-fragment .header-section { padding: 12px 0; }
.pop-fragment .header-section h2 { font-size: 1.5rem; margin: 0.25rem 0; }
.pop-fragment .timeline { margin-top: 1rem; }
.pop-fragment .timeline-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #eee; }
.pop-fragment .timeline-marker { width: 48px; height: 48px; border-radius: 50%; background: #198754; color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.pop-fragment .timeline-content { flex: 1; }
.pop-fragment .step-title { font-weight:700; font-size:1.125rem; margin-bottom: 6px; }
.pop-fragment .sub-heading { font-weight:600; display:block; margin-top:6px; }
.pop-fragment .custom-ul { padding-left: 20px; margin-bottom:8px; }

/* Mobile-specific adjustments */
@media (max-width: 767.98px) {
  .pop-fragment .header-section h2 { font-size: 1.15rem; }
  .pop-fragment .header-section h5 { font-size: 0.95rem; margin-top: 4px; }

  /* Make timeline items stack nicely and be full width */
  .pop-fragment .timeline-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Slightly smaller marker for touch layout */
  .pop-fragment .timeline-marker {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    line-height: 32px;
    flex: 0 0 32px;
  }

  .pop-fragment .timeline-content {
    flex: 1 1 auto;
    min-width: 0; /* allow text truncation/wrapping */
    overflow-x: auto; /* allow internal horizontal scroll for long inline elements */
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere; /* break long words/lines (helps with non-latin scripts) */
    word-break: break-word;
    line-height: 1.45; /* improve readability on small screens */
    padding-right: 8px; /* give space for scrollbar */
  }

  .pop-fragment .step-title { font-size: 1.05rem; }
  .pop-fragment .custom-ul { padding-left: 18px; font-size: 0.96rem; }
  .pop-fragment .sub-heading { font-size: 0.95rem; }

  /* Reduce side paddings for small screens */
  .pop-fragment .container { padding-left: 0.6rem; padding-right: 0.6rem; }
  .pop-fragment .row { margin-left: 0; margin-right: 0; }
  .pop-fragment .col-lg-8 { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }

  /* Ensure long lists don't overflow the viewport */
  .pop-fragment .timeline-content ul { margin-bottom: 8px; }

  /* Provide a subtle horizontal scroll bar appearance when needed */
  .pop-fragment .timeline-content::-webkit-scrollbar { height: 8px; }
  .pop-fragment .timeline-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
}

/* Small adjustments for very small phones */
@media (max-width: 359.98px) {
  .pop-fragment .timeline-marker { width: 28px; height: 28px; font-size:0.75rem; line-height:28px; }
  .pop-fragment .header-section h2 { font-size: 1.0rem; }
  .pop-fragment .step-title { font-size: 0.95rem; }
}