/*
 * product-page.css
 * Dedicated responsive styles for all asuransi product pages.
 * Applies on top of style.css – desktop layout is unchanged.
 */

/* ================================================
   MOBILE  ≤ 768px
   ================================================ */
@media (max-width: 768px) {

  /* ---- Jumbroton ---- */
  /* overflow:hidden critical — prevents absolutely-positioned image from
     expanding the page width and shifting all content below to the right */
  .section-product-page__jumbroton {
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* Take image out of absolute positioning, put in normal flow */
  .section-product-page__jumbroton .--product-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    z-index: 1;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* !important needed: style.css base sets height:365px width:384px without
     media query — same specificity means load order wins, but !important
     guarantees override regardless of any future rule changes */
  .section-product-page__jumbroton .--product-icon img {
    width: 240px !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 260px !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Hide the desktop (top) nav */
  .section-product-page__jumbroton .--product-controll {
    display: none !important;
  }

  /* Product name area */
  .section-product-page__jumbroton .--product-name-sm {
    min-height: unset;
    padding-top: 12px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }

  .section-product-page__jumbroton .--product-name-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    color: #fff;
  }

  .section-product-page__jumbroton .--product-name-content h4,
  .section-product-page__jumbroton .--product-name-content .product-category {
    font-size: 16px !important;
    line-height: 24px !important;
    margin-bottom: 4px;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 30px !important;
    line-height: 38px !important;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 6px;
  }

  .section-product-page__jumbroton .--product-name-content p {
    font-size: 14px !important;
    line-height: 22px !important;
    text-align: center;
    padding: 0 8px;
    margin-bottom: 0;
  }

  /* Show mobile nav buttons — placed BELOW the product text */
  .section-product-page__jumbroton .--product-controll-mobile {
    display: flex !important;
    justify-content: space-between;
    column-gap: 10px;
    margin-top: 20px;
    width: 100%;
    padding: 0 20px;
  }

  .section-product-page__jumbroton .--product-controll-mobile a {
    flex: 1;
    justify-content: center;
    font-size: 14px !important;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 30px;
    background: #ffffff;
    color: #5eabda;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
  }

  .section-product-page__jumbroton .--product-controll-mobile a img {
    width: 10px;
    height: auto;
  }

  /* ---- "Mulai dari" card ---- */
  .section-product-page__why-choose-me .get-product {
    width: calc(100% - 32px) !important;
    max-width: 500px;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin-top: -24px;        /* small overlap with jumbroton bottom */
  }

  .section-product-page__why-choose-me .get-product-sm {
    border-radius: 16px !important;
    padding: 18px 20px !important;
  }

  .section-product-page__why-choose-me .get-product .start-from {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 14px;
  }

  .section-product-page__why-choose-me .get-product p {
    width: auto !important;
    font-size: 14px !important;
    margin-bottom: 2px;
  }

  .section-product-page__why-choose-me .get-product h4 {
    width: auto !important;
    font-size: 26px !important;
    line-height: 32px !important;
    margin-bottom: 0;
  }

  .section-product-page__why-choose-me .get-product .start-from-right {
    width: 100%;
    margin: 0 !important;
  }

  .section-product-page__why-choose-me .get-product .start-from-right .btn-primary {
    width: 100%;
    justify-content: center;
    font-size: 15px !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    border-radius: 30px !important;
  }

  /* ---- Insurance navigation (Cara Klaim button) ---- */
  .section-product-page__why-choose-me-product .insurance-navigation {
    width: calc(100% - 32px) !important;
    max-width: 500px;
    flex-direction: column;
    row-gap: 12px;
  }

  .section-product-page__why-choose-me-product .insurance-navigation .btn-warning {
    width: 100%;
    font-size: 15px !important;
    padding: 12px 18px !important;
    justify-content: space-between;
  }

  /* ---- Why choose me content ---- */
  .section-product-page__why-choose-me-content {
    margin-top: 32px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 48px;
  }

  .section-product-page__why-choose-me-content .title {
    font-size: 26px !important;
    line-height: 34px !important;
    margin-bottom: 16px;
  }

  /* ---- Strength cards — 1 column ---- */
  .section-product-page__why-choose-me-content .product-strength-box {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .section-product-page__why-choose-me-content .product-strength-box .card-product-strength {
    flex-direction: column;
    min-height: unset;
    row-gap: 10px;
    padding: 14px;
  }

  .section-product-page__why-choose-me-content .product-strength-box .card-product-strength-title {
    font-size: 17px !important;
    line-height: 26px !important;
  }

  /* ---- Accordion ---- */
  .accordion-button2 {
    font-size: 18px !important;
    padding: 14px 16px !important;
  }

  .product-information-box .accordion-body,
  .detail-product-information-box .accordion-body {
    font-size: 14px;
    line-height: 22px;
    padding: 12px 16px 20px 16px;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
    max-width: 100%;
  }

  .product-information-box .accordion-body ul,
  .detail-product-information-box .accordion-body ul {
    padding-left: 20px;
    padding-right: 0;
    margin: 0 0 8px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .product-information-box .accordion-body li,
  .detail-product-information-box .accordion-body li {
    font-size: 14px !important;
    margin-left: 0 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ---- Term & condition ---- */
  .section-product-page__why-choose-me-content .product-term-and-condition {
    margin-top: 24px;
  }

  .section-product-page__why-choose-me-content .product-term-and-condition-box-right {
    width: 100% !important;
  }

  .product-term-and-condition-title {
    font-size: 22px !important;
  }

  .product-term-and-condition-desc {
    font-size: 14px !important;
  }

  /* ---- Container ---- */
  .section-product-page__why-choose-me-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ================================================
   SMALL MOBILE  ≤ 480px
   iPhone SE (375px), Galaxy A series (412px), etc.
   ================================================ */
@media (max-width: 480px) {

  .section-product-page__jumbroton .--product-icon img {
    width: 210px !important;
    max-height: 220px !important;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 26px !important;
    line-height: 34px !important;
  }

  .section-product-page__jumbroton .--product-name-content h4,
  .section-product-page__jumbroton .--product-name-content .product-category {
    font-size: 13px !important;
  }

  .section-product-page__why-choose-me .get-product h4 {
    font-size: 22px !important;
  }

  .section-product-page__why-choose-me-content .title {
    font-size: 22px !important;
  }

  .accordion-button2 {
    font-size: 16px !important;
  }
}

/* ================================================
   EXTRA SMALL  ≤ 360px
   ================================================ */
@media (max-width: 360px) {

  .section-product-page__jumbroton {
    padding-top: 60px;
  }

  .section-product-page__jumbroton .--product-icon img {
    width: 190px !important;
    max-height: 190px !important;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  .section-product-page__jumbroton .--product-name-content h4,
  .section-product-page__jumbroton .--product-name-content .product-category {
    font-size: 12px !important;
  }

  .section-product-page__jumbroton .--product-controll-mobile {
    padding: 0 12px;
  }

  .section-product-page__jumbroton .--product-controll-mobile a {
    font-size: 12px !important;
    padding: 8px 10px;
  }

  .section-product-page__why-choose-me .get-product {
    width: calc(100% - 24px) !important;
    padding: 14px 14px !important;
  }

  .section-product-page__why-choose-me .get-product h4 {
    font-size: 20px !important;
  }

  .section-product-page__why-choose-me-product .insurance-navigation {
    width: calc(100% - 24px) !important;
  }

  .accordion-button2 {
    font-size: 14px !important;
  }
}

/* ================================================
   TABLET  769px – 1024px
   (desktop nav stays, just constrain widths)
   ================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  .section-product-page__jumbroton .--product-icon img {
    width: 320px;
    height: auto;
  }

  .section-product-page__jumbroton {
    padding-top: 200px;
  }

  .section-product-page__jumbroton .--product-controll {
    padding: 0 40px;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 42px !important;
  }

  .section-product-page__why-choose-me .get-product {
    width: 90% !important;
    max-width: 700px;
  }

  .section-product-page__why-choose-me-product .insurance-navigation {
    width: 90% !important;
    max-width: 700px;
  }

  .section-product-page__why-choose-me-content {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section-product-page__why-choose-me-content .product-strength-box {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .section-product-page__why-choose-me-content .product-term-and-condition-box-right {
    width: 80% !important;
  }
}

/* ================================================
   SEO SEMANTIC ELEMENTS
   .product-category (replaces h4) and h1 (replaces h2)
   in the product banner — base desktop styles
   ================================================ */

.section-product-page__jumbroton .--product-name-content .product-category {
  display: block;
  font-family: Tahoma;
  font-size: 36px;
  font-weight: 800;
  line-height: 44px;
  margin-bottom: 8px;
  text-align: center;
  color: #ffffff;
}

.section-product-page__jumbroton .--product-name-content h1 {
  font-family: Tahoma;
  font-size: 56px;
  font-weight: 800;
  line-height: 44px;
  margin-bottom: 8px;
  padding-bottom: 20px;
  text-align: center;
  margin-top: 2px;
  color: #ffffff;
  border: 0px solid;
}

/* ---- Breadcrumb ---- */
.product-breadcrumb {
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
}

.product-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-breadcrumb li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-family: Tahoma;
}

.product-breadcrumb li::after {
  content: ' / ';
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.5);
}

.product-breadcrumb li:last-child::after {
  content: '';
}

.product-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.product-breadcrumb a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ================================================
   ACCORDION BODY CONTAINMENT — all screen sizes
   !important used where responsive.css or main.css have
   conflicting global rules that load before this file.
   ================================================ */

/* Containment: prevent any accordion body content from overflowing right */
.product-information-box .accordion-body,
.detail-product-information-box .accordion-body {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ul/ol inside accordion — responsive.css sets margin-left:16px on li globally */
.product-information-box .accordion-body ul,
.product-information-box .accordion-body ol,
.detail-product-information-box .accordion-body ul,
.detail-product-information-box .accordion-body ol {
  padding-left: 20px !important;
  margin: 0 0 8px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* li — override responsive.css:603 .accordion-body li { margin-left:16px !important } */
.product-information-box .accordion-body li,
.detail-product-information-box .accordion-body li {
  margin-left: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.product-information-box .accordion-body p,
.detail-product-information-box .accordion-body p {
  max-width: 100% !important;
  width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.product-information-content-box {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

/* ================================================
   ACCORDION ITEM — ensure fluid layout on all screens
   Root cause (main.css width:700px) already fixed at source.
   These rules remain as defense-in-depth.
   ================================================ */

.product-information-box .accordion-flush .accordion-item,
.product-information-box .accordion-flush .accordion-item:first-child {
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
}

.detail-product-information-box .accordion-item {
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* ================================================
   MOBILE ≤768px — accordion-button2 and term box
   ================================================ */

@media (max-width: 768px) {
  .section-product-page__why-choose-me-content .product-term-and-condition-box-right {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .accordion-button2 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .accordion-body p,
  .accordion-body ul,
  .accordion-body ol {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
}

/* ================================================
   GLOBAL OVERFLOW GUARD — mobile product pages
   Prevents horizontal scroll caused by jumbroton
   image overflow bleeding past section boundary.
   ================================================ */
@media (max-width: 768px) {
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}