/* =====================================================================
   TEMA KHAS — Triage "Daftar Hasrat Kebun Dapur"  (Royal Green & Emas)
   ---------------------------------------------------------------------
   Palet diraja — hijau botol/emerald DALAM + emas (gaya "racing green &
   gold": Bentley/Rolls). BUKAN hijau terang poster. Di-scope ".kd-theme"
   SAHAJA → halaman triage lain (i-Nelayan/i-Hiliran/...) TIDAK terjejas.
   Dimuat SELEPAS triage.css. Tidak menyentuh main.css / style.css.
====================================================================== */

/* ---- 1. Override palet (var) — Royal Green DALAM + Emas + Gading ---- */
.triage-wrap.kd-theme {
  --tr-primary:      #14694f;   /* Emerald diraja dalam — tag / progress / nav */
  --tr-primary-2:    #0a3d2e;   /* Hijau botol gelap */
  --tr-royal-l:      #2d8466;   /* Emerald cerah (badge / hujung progress) */
  --tr-navy:         #06291e;   /* Hijau botol sangat gelap (header) */
  --tr-accent:       #d4af37;   /* Emas tulen */
  --tr-gold-d:       #b8860b;   /* Emas gelap (rim / teks aksen) */
  --tr-green-royal:  #14694f;   /* Emerald diraja (pilihan/ringkasan fallback) */
  --tr-green-d:      #0a3d2e;
  --tr-green-bg:     #e7f0eb;
  --tr-green-line:   #cfe2d8;
  --tr-ink:          #18271f;
  --tr-muted:        #5b6a61;
  --tr-line:         #dde8e1;
  --tr-radius:       20px;
  --tr-shadow:       0 18px 50px rgba(6, 41, 30, .18);

  /* Latar: gading-mint hangat + cahaya emerald/emas halus (kekal scroll) */
  background:
    radial-gradient(circle at 12% 8%, rgba(20, 105, 79, .10), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(212, 175, 55, .14), transparent 40%),
    radial-gradient(circle at 50% 118%, rgba(10, 61, 46, .08), transparent 55%),
    linear-gradient(180deg, #eef4ef 0%, #f5efe2 100%);
  background-attachment: fixed;
}

/* ---- 2. Header — hijau botol gelap -> emerald + kilau emas + tajuk Playfair ---- */
.kd-theme .triage-top {
  background: linear-gradient(125deg, #06291e 0%, #0f5132 64%, #14694f 100%);
  position: relative;
  overflow: hidden;
}
.kd-theme .triage-top::after {
  content: ""; position: absolute; top: -70px; right: -50px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(212, 175, 55, .32), transparent 65%);
  pointer-events: none;
}
.kd-theme .triage-top > * { position: relative; z-index: 1; }
/* Logo Ko-Nelayan — plak putih rounded-square + cincin emas supaya MENYERLAH atas
   header gelap. Rounded-square (bukan bulat) kerana logo LEBAR (nisbah 1.36) penuh
   ke tepi — bulat akan memotongnya. width:auto + content-box = logo penuh, tak herot. */
.kd-theme .triage-top img {
  height: 64px;
  width: auto;
  background: #fff;
  padding: 12px 20px;
  border-radius: 18px;
  border: 2px solid var(--tr-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .30), 0 0 0 5px rgba(212, 175, 55, .16);
  box-sizing: content-box;
  margin-bottom: 14px;
}
.kd-theme .triage-top h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ---- 3. Kad — putih lutsinar lembut + rim emas + hairline emas->emerald ----
   NOTA: JANGAN guna backdrop-filter / overflow:hidden di sini — ia menjadikan
   kad "containing block" yang mengepit dropdown native <select> daerah (26 item)
   sehingga terpotong & tak boleh scroll. Kekal mudah supaya popup native bebas. */
.kd-theme .triage-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(212, 175, 55, .38);
  box-shadow: 0 22px 60px rgba(6, 41, 30, .20), inset 0 1px 0 rgba(255, 255, 255, .6);
  position: relative;
}
.kd-theme .triage-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--tr-accent), var(--tr-primary));
  border-radius: 0 0 4px 4px;
}

/* ---- 4. Progress — emas -> emerald -> hijau botol dalam ---- */
.kd-theme .triage-progress-fill {
  background: linear-gradient(90deg, var(--tr-accent), #2d8466 50%, #0a3d2e);
}

/* ---- 5. Stage tag — gading-hijau + teks emerald dalam ---- */
.kd-theme .triage-stage-tag { background: #e4efe9; color: var(--tr-primary); }

/* ---- 6. Opsyen — hover hijau lembut; TERPILIH = emas + gading (mewah) ---- */
.kd-theme .triage-opt:hover { background: #f0f7f3; border-color: var(--tr-primary); }
.kd-theme .triage-opt .tr-ico { color: var(--tr-primary); }
.kd-theme .triage-opt.is-selected {
  border-color: var(--tr-gold-d);
  background: linear-gradient(135deg, #ffffff 0%, #fbf3dd 100%);
  box-shadow: inset 0 0 0 1px var(--tr-accent), 0 10px 26px rgba(184, 134, 11, .22);
}
.kd-theme .triage-opt.is-selected .tr-ico,
.kd-theme .triage-opt.is-selected .tr-tick { color: var(--tr-gold-d); }

/* ---- 7. Butang ---- */
/* Navigasi (Mula / Seterusnya) = emerald diraja gradient */
.kd-theme .triage-btn-primary { background: linear-gradient(135deg, #14694f, #0a3d2e); }
.kd-theme .triage-btn-primary:hover { filter: brightness(1.12); }
/* Aksi-komit (Daftar Hasrat + Hantar) = EMAS (id menang specificity) */
.kd-theme #tr-hasrat,
.kd-theme #tr-submit {
  background: linear-gradient(135deg, var(--tr-accent), #c9982f);
  color: #3a2a06;
  box-shadow: 0 12px 28px rgba(212, 175, 55, .42);
}
.kd-theme #tr-hasrat:hover,
.kd-theme #tr-submit:hover { filter: brightness(1.05); }
.kd-theme #tr-submit:disabled { background: #d9c79a; color: #6b5b34; box-shadow: none; }

/* ---- 8. Ringkasan jawapan — kad GADING + emas, nilai teks emerald dalam ---- */
.kd-theme .triage-summary {
  background: linear-gradient(135deg, #fffdf7 0%, #f7efdc 100%);
  border: 1px solid #ecd9a8;
  border-left: 4px solid var(--tr-accent);
}
.kd-theme .triage-summary h4 { color: var(--tr-gold-d); }
.kd-theme .triage-summary-row { border-bottom-color: #ecdcb4; }
.kd-theme .triage-summary-row .v { color: var(--tr-primary-2); }

/* ---- 9. Hasil — badge emerald (auto var) + tajuk Playfair hijau dalam ---- */
.kd-theme .triage-result h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; }
.kd-theme .triage-result.is-ok h2 { color: var(--tr-primary-2); }

/* ---- 10. Butang kembali bawah — selaras emerald ---- */
.kd-theme .triage-back-bottom { color: var(--tr-primary); }
.kd-theme .triage-back-bottom:hover { border-color: var(--tr-primary); }

/* ---- 11. Mobile: elak butang "Seterusnya"/"Hantar" terpotong ----
   Nav = [Kembali][spacer flex:1][Seterusnya]; pada skrin sempit butang tak
   boleh mengecut -> terkeluar kad. Buang spacer + kedua butang kongsi baris
   sama rata (flex:1) + padding mendatar dipadat. */
@media (max-width: 480px) {
  .kd-theme .triage-nav { gap: 10px; }
  .kd-theme .triage-nav .triage-spacer { display: none; }
  .kd-theme .triage-nav .triage-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
}