/*
 * product-mobile.css
 * ============================================================
 * Mobile layout for ALL 12 asuransi product pages.
 * Loaded LAST (before </body> in each product PHP) so it wins
 * the cascade over main.css, style.css, responsive.css and
 * product-page.css without needing !important everywhere.
 *
 * SCOPE: every selector is anchored to .section-product-page__*
 *        so nothing leaks to non-product pages.
 *
 * BREAKPOINT STRATEGY (desktop-first guard):
 *   Everything lives inside max-width media queries. Desktop
 *   (>768px) is never touched — required by spec.
 *   Cascading max-width covers ALL requested widths:
 *     ≤768  → base mobile (also 428, 412, 390, 375 inherit)
 *     ≤480  → small phones (428/412/390/375 land here)
 *     ≤390  → mid-small fine-tune (375 inherits)
 *     ≤360  → tiny Android
 *
 * !important is used ONLY for confirmed conflicts:
 *   - inline style="margin-left:290px" on Type A WA button
 *   - style.css base .get-product { width:800px } (no media query)
 *   - main.css global svg/width rules at ≤428px
 * ============================================================ */


/* ============================================================
   ░░ MOBILE BASE — ≤ 768px ░░
   Applies to all 12 pages, all phones and small tablets.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- 0. Overflow guard ----------------------------------
     Stop any child (hero image, tier row, long text) from
     widening the page and pushing content sideways. */
  .section-product-page,
  .section-product-page__jumbroton,
  .section-product-page__why-choose-me,
  .section-product-page__why-choose-me-product,
  .section-product-page__why-choose-me-content {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ============================================================
     A. JUMBOTON — all 12 pages
     ============================================================ */
  .section-product-page__jumbroton {
    padding-top: 70px;            /* clear the fixed navbar */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  /* Icon comes first in the HTML — pull it out of the desktop
     absolute positioning and into normal centered flow. */
  .section-product-page__jumbroton .--product-icon {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
  }

  /* style.css base sets img { height:365px; width:384px } with NO
     media query → same specificity, so guarantee override here. */
  .section-product-page__jumbroton .--product-icon img {
    width: 240px !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 260px !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }

  /* Desktop side-nav off, mobile nav on */
  .section-product-page__jumbroton .--product-controll {
    display: none !important;
  }
  .section-product-page__jumbroton .--product-controll-mobile {
    display: flex !important;
    justify-content: space-between;
    column-gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;
  }
  .section-product-page__jumbroton .--product-controll-mobile a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 30px;
    background: #fff;
    color: #5eabda;
    text-decoration: none;
    white-space: nowrap;
  }
  .section-product-page__jumbroton .--product-controll-mobile a img {
    width: 10px;
    height: auto;
  }

  /* Product name block */
  .section-product-page__jumbroton .--product-name-sm {
    min-height: unset;
    width: 100%;
    padding: 12px 20px 40px;
    box-sizing: border-box;
  }
  .section-product-page__jumbroton .--product-name-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    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;
    margin: 0 0 6px;
    padding-bottom: 10px;
  }
  .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;
  }

  /* Breadcrumb — keep readable, centered, wrappable */
  .section-product-page__jumbroton .product-breadcrumb {
    width: 100%;
    margin-bottom: 8px;
  }
  .section-product-page__jumbroton .product-breadcrumb ol {
    flex-wrap: wrap;
    justify-content: center;
  }
  .section-product-page__jumbroton .product-breadcrumb li {
    font-size: 12px;
  }

  /* ============================================================
     D. HARGA TYPE B — 9 pages: .get-product-sm .start-from
     (single price + "Hubungi Kami")
     ============================================================ */
  .section-product-page__why-choose-me .get-product {
    width: calc(100% - 32px) !important;   /* beats base width:800px */
    max-width: 500px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;              /* style.css sets negative margin-top on sm/lg variants */
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
  .section-product-page__why-choose-me .get-product-sm {
    border-radius: 16px;
    padding: 18px 20px;
    margin-top: 0 !important;              /* style.css:422 sets -50px, style.css:1292 sets -67px at ≤360px */
    height: auto !important;              /* style.css:1295 sets height:200px at ≤360px */
  }
  .section-product-page__why-choose-me .get-product-sm .start-from {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 14px;
  }
  .section-product-page__why-choose-me .get-product-sm .start-from-left,
  .section-product-page__why-choose-me .get-product-sm .start-from-right {
    width: 100%;
    margin: 0 !important;
  }
  .section-product-page__why-choose-me .get-product-sm .start-from p {
    width: auto !important;
    font-size: 14px !important;
    margin-bottom: 2px;
  }
  .section-product-page__why-choose-me .get-product-sm .start-from h4 {
    width: auto !important;
    font-size: 26px !important;
    line-height: 32px !important;
    margin-bottom: 0;
  }
  /* "Hubungi Kami" button — full width, no overflow */
  .section-product-page__why-choose-me .get-product-sm .start-from-right .btn-primary {
    width: 100% !important;
    justify-content: center;
    box-sizing: border-box;
    font-size: 15px !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    border-radius: 30px !important;
  }

  /* ============================================================
     E. HARGA TYPE A — 3 pages (travel/pet/kecelakaan-diri)
     .get-product-lg .insurance-level (Bronze/Silver/Gold tiers)
     Strategy: wrap tiers 2-per-row (all visible, no h-scroll).
     ============================================================ */
  .section-product-page__why-choose-me .get-product-lg {
    padding: 18px 16px;
    margin-top: 0 !important;             /* style.css sets -70px, must be 0 on mobile */
  }
  .section-product-page__why-choose-me .get-product .insurance-level,
  .section-product-page__why-choose-me .get-product .insurance-level-many {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
  }
  /* 2 cards per row: 50% minus half the gap */
  .section-product-page__why-choose-me .get-product .insurance-level .card-level {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;               /* allow shrink, prevent overflow */
    box-sizing: border-box;
    padding: 10px;
  }
  .section-product-page__why-choose-me .get-product .insurance-level .card-level img {
    width: 32px;
    height: auto;
  }
  .section-product-page__why-choose-me .get-product .insurance-level .card-level-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .section-product-page__why-choose-me .get-product .insurance-level .card-level-value {
    font-size: 13px !important;
    line-height: 18px !important;
  }
  /* start-from row inside the tier card — stack it */
  .section-product-page__why-choose-me .get-product-lg .start-from {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 12px;
    width: 100%;
  }
  .section-product-page__why-choose-me .get-product-lg .start-from-left,
  .section-product-page__why-choose-me .get-product-lg .start-from-right {
    width: 100%;
    margin: 0 !important;
  }
  /* CONFIRMED CONFLICT: inline style="margin-left:290px" on the
     WA button in travel.php & pet.php — only !important beats inline. */
  .section-product-page__why-choose-me .get-product-lg .start-from-right .btn-primary {
    width: 100% !important;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 20px !important;
    border-radius: 30px !important;
  }

  /* ---- Insurance navigation (Cara Klaim / Simulasi buttons) ---- */
  .section-product-page__why-choose-me-product .insurance-navigation {
    width: calc(100% - 32px) !important;
    max-width: 500px;
    flex-direction: column;
    row-gap: 12px;
    box-sizing: border-box;
  }
  .section-product-page__why-choose-me-product .insurance-navigation .btn-warning {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    font-size: 15px !important;
    padding: 12px 18px !important;
  }

  /* ---- "Mengapa Memilih Kami" content + strength cards ---- */
  .section-product-page__why-choose-me-content {
    margin-top: 32px;
    padding: 0 16px 48px;
    box-sizing: border-box;
  }
  .section-product-page__why-choose-me-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }
  .section-product-page__why-choose-me-content .title {
    font-size: 26px !important;
    line-height: 34px !important;
    margin-bottom: 16px;
  }
  .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;
  }

  /* ============================================================
     B. ACCORDION "TENTANG ASURANSI" — all 12 pages
     #accordionProductInformation
     ============================================================ */
  .section-product-page__why-choose-me-content #accordionProductInformation,
  .section-product-page__why-choose-me-content .product-information-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-item {
    width: 100% !important;       /* main.css global sets width:700px */
    margin-left: 0 !important;    /* main.css ≤428px sets margin-left:35px */
    box-sizing: border-box;
    padding: 16px;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2 {
    width: 100%;
    box-sizing: border-box;
    font-size: 18px !important;
    padding: 12px 16px !important;
    display: flex;
    white-space: normal !important;
    word-break: break-word;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 16px 16px;
    margin-left: 0 !important;            /* main.css ≤428px sets margin-left:30px globally */
    font-size: 14px;
    line-height: 22px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .product-information-content-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body p,
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ul,
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ol,
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body li {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ul,
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ol {
    padding-left: 20px;
    margin: 0 0 8px;
  }
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body li {
    margin-left: 0 !important;   /* responsive.css sets li margin-left:16px */
    font-size: 14px !important;
  }

  /* ============================================================
     C. ACCORDION "INFORMASI LAINNYA" — 10 pages
     #accordion-detail-product-information
     (selector simply no-ops on agri & alat-berat)
     ============================================================ */
  .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,
  .section-product-page__why-choose-me-content .product-term-and-condition-box-right {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
  }
  .section-product-page__why-choose-me-content .product-term-and-condition-title {
    font-size: 22px !important;
    width: 100%;
  }
  .section-product-page__why-choose-me-content .product-term-and-condition-desc {
    font-size: 14px !important;
    width: 100%;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-item {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2 {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 0 !important;
    display: flex;
    white-space: normal !important;
    word-break: break-word;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 16px 16px;
    margin-left: 0 !important;            /* main.css ≤428px sets margin-left:30px globally */
    font-size: 14px;
    line-height: 22px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body p,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ul,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ol,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body li {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ul,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ol {
    padding-left: 20px;
    margin: 0 0 8px;
  }
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body li {
    margin-left: 0 !important;
    font-size: 14px !important;
  }
}


/* ============================================================
   ░░ SMALL PHONES — ≤ 480px ░░
   Catches 428 (iPhone Pro Max), 412 (Galaxy), 390 (iPhone 14),
   375 (iPhone SE). Fine-tune sizes only.
   ============================================================ */
@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-content .title {
    font-size: 22px !important;
  }
  .section-product-page__why-choose-me .get-product-sm .start-from h4 {
    font-size: 22px !important;
  }

  /* Tier title/value slightly smaller so 2-per-row never clips */
  .section-product-page__why-choose-me .get-product .insurance-level .card-level-title {
    font-size: 13px !important;
  }
  .section-product-page__why-choose-me .get-product .insurance-level .card-level-value {
    font-size: 12px !important;
  }

  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2 {
    font-size: 16px !important;
  }
}


/* ============================================================
   ░░ MID-SMALL — ≤ 390px ░░  (iPhone 14 / 13 / 12, 375 inherits)
   ============================================================ */
@media (max-width: 390px) {

  .section-product-page__jumbroton .--product-icon img {
    width: 195px !important;
    max-height: 200px !important;
  }
  .section-product-page__why-choose-me .get-product-sm,
  .section-product-page__why-choose-me .get-product-lg {
    padding: 14px 16px;
  }
  /* Tier value can be long ("Up To Rp 50.000.000") — keep it on one
     line by allowing it to shrink a touch more */
  .section-product-page__why-choose-me .get-product .insurance-level .card-level {
    padding: 8px;
  }
}


/* ============================================================
   ░░ TINY ANDROID — ≤ 360px ░░
   ============================================================ */
@media (max-width: 360px) {

  .section-product-page__jumbroton {
    padding-top: 60px;
  }
  .section-product-page__jumbroton .--product-icon img {
    width: 180px !important;
    max-height: 180px !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 !important;
  }
  .section-product-page__why-choose-me .get-product-sm .start-from h4 {
    font-size: 20px !important;
  }
  .section-product-page__why-choose-me-product .insurance-navigation {
    width: calc(100% - 24px) !important;
  }

  /* On the tiniest screens, tier cards go single column to stay legible */
  .section-product-page__why-choose-me .get-product .insurance-level .card-level {
    flex: 1 1 100%;
  }

  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2 {
    font-size: 14px !important;
  }
}