/* Pemilih Coway. Dimuat oleh src/_includes/coway-selector.njk sahaja, jadi
   halaman lain tidak membayar untuknya dan hash style.css tidak berubah.

   Mobile dahulu. Butang jawapan selebar skrin dan sekurang-kurangnya 56px
   tinggi supaya boleh diketik dengan ibu jari. CTA WhatsApp ialah bar tetap di
   bawah skrin pada telefon dan blok biasa dalam aliran pada desktop. Ia muncul
   hanya selepas ada model, supaya bar itu tidak menutup butang jawapan yang
   duduk di zon ibu jari yang sama. */

.cs [hidden] { display: none !important; }

.cs-page-head {
  padding-block: 1rem 0.25rem;
}

.cs-crumb {
  font-size: 0.85rem;
  color: var(--text-light);
}

.cs-crumb a { color: var(--coway-blue); font-weight: 600; }

.cs-page-head h1 {
  font-size: 1.65rem;
  margin: 0.6rem 0 0.5rem;
}

.cs-page-head p {
  max-width: 680px;
  font-size: 0.98rem;
}

.cs {
  background: var(--white);
  border: 1px solid #e3ebf3;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1rem;
  margin: 1.25rem 0 2rem;
}

/* Margin dan display ditetapkan penuh kerana h2 global dalam style.css membawa
   margin atas 3rem dan display:flex, yang meninggalkan ruang kosong besar di
   atas tajuk kad ini. */
.cs-title {
  display: block;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

/* Kawalan bersegmen */
.cs-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: #eef3f8;
  border-radius: 999px;
  padding: 4px;
}

.cs-seg button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-medium);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cs-seg button[aria-selected="true"] {
  background: var(--white);
  color: var(--coway-blue);
  box-shadow: 0 1px 3px rgba(0, 40, 94, 0.12);
}

.cs button:focus-visible,
.cs a:focus-visible,
.cs select:focus-visible,
.cs [data-cs-focus]:focus-visible {
  outline: 3px solid var(--coway-light-blue);
  outline-offset: 2px;
}

.cs [data-cs-focus]:focus:not(:focus-visible) { outline: none; }

.cs-lead {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--text-light);
}

.cs-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--coway-blue);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Kemajuan */
.cs-progress { margin: 1.1rem 0 0.25rem; }

.cs-progress-text {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
}

.cs-bar {
  height: 6px;
  margin-top: 0.4rem;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
}

.cs-bar-fill {
  height: 100%;
  background: var(--coway-blue);
  border-radius: 999px;
  transition: width 0.25s ease;
}

/* Langkah */
.cs-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.cs-q {
  display: block;
  padding: 0;
  margin: 1rem 0 0.8rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-dark);
  scroll-margin-top: 96px;
}

.cs-opts {
  display: grid;
  gap: 0.6rem;
}

.cs-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 56px;
  padding: 0.85rem 1.1rem;
  border: 2px solid #dbe5ef;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-dark);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cs-opt::after {
  content: "\203A";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--coway-light-blue);
}

.cs-opt:hover { border-color: var(--coway-light-blue); }

.cs-opt[aria-pressed="true"] {
  border-color: var(--coway-blue);
  background: #eef5ff;
}

.cs-opt[aria-pressed="true"]::after { content: "\2713"; font-size: 1.1rem; color: var(--coway-blue); }

/* Label + petunjuk kecil (contoh "Ruang tamu" / "sehingga 50 m²"). */
.cs-opt-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cs-opt-hint {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-light);
}

.cs-back { margin-top: 1rem; }

/* Hasil */
.cs-result-title {
  font-size: 1.2rem;
  margin: 1rem 0 0.6rem;
  scroll-margin-top: 96px;
}

.cs-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.cs-summary ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-summary li {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #eef3f8;
  color: var(--text-dark);
  font-weight: 600;
}

.cs-results {
  display: grid;
  gap: 1rem;
}

.cs-card {
  position: relative;
  border: 2px solid #e3ebf3;
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--white);
  transition: border-color 0.15s;
}

.cs-card.is-picked { border-color: #0f7a3a; }

.cs-badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #eef3f8;
  color: var(--text-medium);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cs-badge--best {
  background: var(--coway-blue);
  color: var(--white);
}

.cs-card-top {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.9rem;
  align-items: center;
}

.cs-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #f6f9fb;
  padding: 0.4rem;
}

.cs-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-card-cat {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}

.cs-card-name {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.cs-price {
  margin: 0;
  font-size: 1.3rem;
  color: var(--coway-blue);
}

.cs-price small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
}

.cs-was {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--text-light);
  margin-right: 0.2em;
}

.cs-specs {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
}

.cs-specs div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid #f1f5f9;
}

.cs-specs dt { color: var(--text-light); font-weight: 600; }
.cs-specs dd { margin: 0; color: var(--text-dark); }

.cs-sub {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}

.cs-why {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-dark);
}

.cs-sub + .cs-why { margin-top: 0; }

.cs-why li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.5rem;
  line-height: 1.5;
}

.cs-why li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-weight: 800;
  color: #0f7a3a;
}

.cs-profile {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.cs-profile strong { color: var(--text-dark); }

.cs-plans ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.cs-plans li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid #f1f5f9;
}

.cs-plans li b { color: var(--text-dark); }
.cs-plans li strong { white-space: nowrap; color: var(--coway-blue); }

.cs-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1rem;
}

.cs-pick {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 2px solid #0f7a3a;
  border-radius: 10px;
  background: var(--white);
  color: #0f7a3a;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.cs-pick[aria-pressed="true"] {
  background: #0f7a3a;
  color: var(--white);
}

.cs-more {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--coway-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cs-empty {
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: #f6f9fb;
  font-size: 0.9rem;
}

.cs-note {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-light);
}

.cs-note a { color: var(--coway-blue); font-weight: 600; }

/* Mod pilih sendiri */
.cs-selects {
  display: grid;
  gap: 0.75rem;
  margin: 1.1rem 0 1rem;
}

.cs-field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
}

.cs-field select {
  width: 100%;
  min-height: 50px;
  padding: 0 2.5rem 0 0.9rem;
  border: 2px solid #dbe5ef;
  border-radius: var(--radius-md);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23004098' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center;
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
}

/* CTA WhatsApp. Hijau #0f7a3a memberi nisbah kontras 5.4:1 dengan teks
   putih (WCAG AA). Hijau jenama WhatsApp #25D366 hanya 2:1. */
.cs-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e3ebf3;
  box-shadow: 0 -6px 20px rgba(0, 40, 94, 0.08);
}

.cs-cta-label {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-medium);
}

.cs-cta-name {
  font-weight: 700;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-cta-price {
  font-weight: 700;
  color: var(--coway-blue);
  white-space: nowrap;
}

.cs-cta-price s { font-weight: 500; color: var(--text-light); }

.cs-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  background: #0f7a3a;
  color: var(--white);
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(15, 122, 58, 0.28);
}

.cs-cta-btn:hover { background: #0b6630; }
.cs-cta-btn svg { flex: 0 0 auto; }

/* Ruang di bawah halaman supaya bar tetap tidak menutup kaki laman. */
body.cs-bar-on { padding-bottom: 8.5rem; }

.cs-method {
  max-width: 760px;
  padding-bottom: 3rem;
}

.cs-method h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.cs-method p,
.cs-method li { font-size: 0.95rem; line-height: 1.7; }
.cs-method ul { margin: 0.5rem 0 1rem 1.2rem; }
.cs-method li { margin-bottom: 0.4rem; }
.cs-method a { color: var(--coway-blue); font-weight: 700; }

@media (min-width: 768px) {
  .cs-page-head { padding-block: 1.5rem 0.5rem; }
  .cs-page-head h1 { font-size: 2.1rem; }

  .cs { padding: 1.75rem 2rem 2rem; }
  .cs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .cs-title { margin: 0; font-size: 1.15rem; }
  .cs-seg { min-width: 360px; }

  /* Bilangan pilihan berbeza per soalan (2 kategori, 3 bajet, 4 luas
     ruang). auto-fit memberi setiap soalan satu baris penuh. */
  .cs-opts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .cs-opt { min-height: 64px; }

  /* Kad hasil sebelah menyebelah: sama tinggi, butang di dasar. Tanpa ini
     kad dengan empat sebab lebih panjang daripada kad dengan tiga, dan
     butang "Tanya model ini" duduk pada ketinggian berbeza. */
  .cs-results { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .cs-results .cs-card { display: flex; flex-direction: column; }
  .cs-results .cs-badge { align-self: flex-start; }
  .cs-results .cs-card-actions { margin-top: auto; padding-top: 1rem; }
  .cs-card-top { grid-template-columns: 112px 1fr; }

  /* Kad pilih sendiri: dua lajur tepat di bawah dua dropdown. Jarak 2rem pada
     kedua-dua grid, dan padding kad 1.5rem + sempadan 2px, menjadikan
     sempadan lajur kad jatuh pada titik yang sama dengan sempadan dropdown
     (separuh lebar + 16px). Dahulu kad ini 640px di kiri dan separuh kanan
     kosong. */
  .cs-selects { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cs-card--direct {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    padding: 1.5rem;
  }
  .cs-card--direct .cs-card-top { grid-template-columns: 1fr; justify-items: start; }
  .cs-card--direct .cs-media { width: 100%; max-width: 260px; }
  .cs-card--direct .cs-col:last-child > :first-child { margin-top: 0; }

  .cs-cta {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #f3faf6;
    border: 1px solid #cfe8d8;
    border-radius: var(--radius-md);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cs-cta-label { flex-direction: column; gap: 0.1rem; }
  .cs-cta-btn { flex: 0 0 auto; }

  body.cs-bar-on { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-bar-fill, .cs-opt, .cs-seg button, .cs-card { transition: none; }
}