/*
 * pages/claim.css
 * Mobile-first responsive — semua halaman claim-general-*.php
 * Menggantikan assets/css/claim-general-responsive.css (Batch 4)
 *
 * Dimuat setelah style.css via index2.php $page_head_styles → sama-spesifisitas
 * menang karena source order lebih akhir.
 *
 * !important hanya di 2 kasus yang sah:
 *   1. Gambar avatar: inline style="width:250px" di HTML perlu dioverride di mobile
 *   2. .content-title: style.css menggunakan !important pada margin-top dan padding
 *
 * Breakpoints: base (≤360px) → 361px → 481px → 601px → 769px → 1025px
 */

/* ============================================================
   BASE — 0-360px (ponsel sangat kecil)
   Override nilai desktop style.css yang non-breakpointed
   ============================================================ */

/* responsive.css @media(max-width:480px){ section{padding:30px 0} } akan menambah
   padding ke .section-customer-care-page. Class selector (0,1,0) menang atas
   element selector (0,0,1) tanpa perlu !important. */
.section-customer-care-page {
  padding: 0;
}

/* style.css: padding: 64px 112px (non-breakpointed) → override ke mobile */
.section-customer-care-page-content {
  padding: 12px 10px;
}

/* style.css: margin-top: -24px !important → harus diimbangi dengan !important.
   style.css @media(max-width:360px/428px): padding: 20px !important → sama. */
.section-customer-care-page-content-title.content-title {
  font-size: 16px;
  line-height: 24px;
  margin-top: 0 !important;
  margin-bottom: 10px;
  padding: 0 !important;
}

/* style.css: display:flex; flex-direction:row (default) → ubah ke column di mobile */
.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header {
  flex-direction: column-reverse;
  padding: 12px 12px 20px;
  row-gap: 12px;
  column-gap: 0;
  align-items: flex-start;
}

.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header h3 {
  font-size: 17px;
  line-height: 24px;
}

.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header p {
  font-size: 14px;
  line-height: 22px;
}

.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* inline style="width:250px" di HTML perlu !important untuk dioverride di mobile */
.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar img {
  width: 90px !important;
  height: auto;
}

/* style.css: padding: 40px 24px; border-radius: 16px → ubah ke mobile */
.section-customer-care-page-card {
  padding: 0;
  border-radius: 12px;
}

/* style.css: font-size dari Bootstrap (besar) → seragamkan di mobile */
.section-customer-care-page-card h3 {
  font-size: 22px;
  line-height: 30px;
}

/* style.css: padding: 24px 24px 40px → override ke mobile */
.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker {
  padding: 12px 10px 24px;
}

/* style.css: margin-left:16px; padding-left:32px; padding-bottom:40px */
.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step {
  padding-left: 18px;
  padding-bottom: 20px;
  margin-left: 12px;
}

/* style.css: width:40px; height:40px; font-size:16px; left:-22px */
.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step-status {
  width: 26px;
  height: 26px;
  font-size: 12px;
  left: -15px;
}

.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step-title {
  font-size: 15px;
  font-weight: 700;
}

.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker p,
.section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker ul {
  font-size: 14px;
  line-height: 22px;
}

/* Tidak ada rule di style.css → Bootstrap default override */
.step-desc-button {
  font-size: 14px;
  padding: 10px 18px;
}

/* style.css: padding: .5rem 1rem → override ke mobile */
.section-customer-care-page .side-menu-mobile {
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 8px 12px;
}

.section-customer-care-page .side-menu-mobile .header-tab-mobile {
  margin-bottom: 8px;
}

.section-customer-care-page .side-menu-mobile .header-tab-mobile .nav-item .nav-link {
  font-size: 14px;
  padding: 6px 12px;
  width: auto;
}

.section-customer-care-page .--menu-wrap button {
  font-size: 15px;
}

/* ============================================================
   SMALL PHONE — min-width: 361px  (kisaran 361-480px)
   ============================================================ */
@media (min-width: 361px) {

  .section-customer-care-page-content {
    padding: 16px 12px;
  }

  .section-customer-care-page-content-title.content-title {
    font-size: 18px;
    line-height: 26px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header {
    padding: 16px 14px 24px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar img {
    width: 100px !important;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step {
    padding-left: 20px;
    padding-bottom: 20px;
    margin-left: 14px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step-status {
    width: 30px;
    height: 30px;
    font-size: 13px;
    left: -17px;
  }
}

/* ============================================================
   LARGE PHONE — min-width: 481px  (kisaran 481-600px)
   ============================================================ */
@media (min-width: 481px) {

  .section-customer-care-page-content {
    padding: 24px 16px;
  }

  .section-customer-care-page-content-title.content-title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header {
    padding: 20px 16px 28px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header h3 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar img {
    width: 120px !important;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker {
    padding: 16px 12px 28px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step {
    padding-left: 24px;
    padding-bottom: 24px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step-status {
    width: 34px;
    height: 34px;
    font-size: 14px;
    left: -19px;
  }

  /* Reset step-desc-button ke inherit — Bootstrap default berlaku di atas 481px */
  .step-desc-button {
    font-size: inherit;
    padding: inherit;
  }
}

/* ============================================================
   TABLET PORTRAIT — min-width: 601px  (kisaran 601-768px)
   ============================================================ */
@media (min-width: 601px) {

  .section-customer-care-page-content {
    padding: 32px 20px;
  }

  .section-customer-care-page-content-title.content-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 16px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header {
    padding: 24px 20px 32px;
    row-gap: 16px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar img {
    width: 140px !important;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker {
    padding: 20px 16px 32px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step {
    padding-left: 28px;
    padding-bottom: 28px;
  }
}

/* ============================================================
   TABLET LANDSCAPE — min-width: 769px  (kisaran 769-1024px)
   Restore layout desktop: header horizontal, card/tracker full
   ============================================================ */
@media (min-width: 769px) {

  .section-customer-care-page-content {
    padding: 48px 40px;
  }

  .section-customer-care-page-content-title.content-title {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 24px;
  }

  /* Restore flex-direction:row dari style.css base */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header {
    flex-direction: row;
    align-items: unset;
    row-gap: 0;
    column-gap: 32px;
    padding: 32px 20px 44px;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header h3 {
    margin-bottom: 16px;
  }

  /* Reset avatar container yang di-centering di mobile */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar {
    width: auto;
    display: block;
    justify-content: unset;
  }

  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar img {
    width: 180px !important;
  }

  /* Restore style.css: padding: 40px 24px; border-radius: 16px */
  .section-customer-care-page-card {
    padding: 40px 24px;
    border-radius: 16px;
  }

  /* Restore style.css: padding: 24px 24px 40px */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker {
    padding: 24px 24px 40px;
  }

  /* Restore style.css: margin-left:16px; padding-left:32px; padding-bottom:40px */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step {
    margin-left: 16px;
    padding-left: 32px;
    padding-bottom: 40px;
  }

  /* Restore style.css: width:40px; height:40px; font-size:16px; left:-22px */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-tracker .step-status {
    width: 40px;
    height: 40px;
    font-size: 16px;
    left: -22px;
  }
}

/* ============================================================
   DESKTOP — min-width: 1025px  (1025px ke atas)
   Restore nilai base style.css yang dioverride oleh mobile base
   ============================================================ */
@media (min-width: 1025px) {

  /* style.css base: padding: 64px 112px */
  .section-customer-care-page-content {
    padding: 64px 112px;
  }

  /* style.css base: font-size:30px; line-height:38px */
  .section-customer-care-page-content-title.content-title {
    font-size: 30px;
    line-height: 38px;
  }

  /* style.css base: column-gap:56px; padding: 40px 24px 54px */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header {
    column-gap: 56px;
    padding: 40px 24px 54px;
  }

  /* Restore ke ukuran desktop = sama dengan inline style="width:250px" */
  .section-customer-care-page.--customer-care-how-to-claim .--customer-care-how-to-claim-header-avatar img {
    width: 250px !important;
  }
}