/* ============================================================
 * Panel Cuaca Perairan Sabah — hero index.html
 * Fixed kiri (kekal semasa scroll) · lajur 7 tarikh + 3 kad kawasan
 * Setiap kad: angin (blok menegak) · cuaca Pagi/Petang/Malam (rotor: teks +
 * ikon berpusing + tab) · tinggi ombak + tahap keselamatan (pill berdenyut)
 * Tema laut Ko-Nelayan (biru #0F5996) + aksen hijau MET
 * ============================================================ */

.konel-weather {
  --kw-primary: #0F5996;
  --kw-primary-dark: #0b4373;
  --kw-green: #6fb53f;
  --kw-green-soft: #e6f4d8;
  --kw-ink: #1f2d3d;
  --kw-radius: 14px;

  position: fixed;
  top: 116px;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  color: var(--kw-ink);
  transform: translateX(-112%);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 10px 28px rgba(8, 40, 70, .28));
}

.konel-weather.is-in { transform: translateX(0); }

/* ---------- BODY ---------- */
.konel-weather-body {
  width: 300px;                 /* dilebarkan -> ruang teks cuaca 2 baris + nama hari penuh */
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 var(--kw-radius) var(--kw-radius) 0;
  overflow: hidden;
  transition: width .45s cubic-bezier(.22, 1, .36, 1),
              opacity .35s ease, transform .45s ease;
}

.konel-weather[data-collapsed] .konel-weather-body {
  width: 0;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}

/* ---------- HEADER ---------- */
.konel-weather-header {
  background: linear-gradient(135deg, var(--kw-primary), var(--kw-primary-dark));
  color: #fff;
  padding: 9px 14px;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}
.konel-weather-title { font-size: .82rem; font-weight: 700; letter-spacing: .2px; }
.konel-weather-sub { font-size: .64rem; opacity: .85; font-weight: 500; }

/* ---------- MAIN (lajur tarikh + kad) ---------- */
.konel-weather-main { display: flex; align-items: stretch; }

/* Lajur tarikh */
.konel-weather-days {
  display: flex;
  flex-direction: column;
  background: #f1f5f9;
  padding: 6px;
  gap: 5px;
  flex: 0 0 auto;
}
.konel-weather-day {
  appearance: none;
  border: 1px solid #d7e0ea;
  background: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 62px;              /* muat nama hari penuh (Khamis/Jumaat) + "17.6" */
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.konel-weather-day:hover { border-color: var(--kw-primary); transform: translateY(-1px); }
.konel-weather-day .kw-d { font-size: .74rem; font-weight: 700; }
.konel-weather-day .kw-dow { font-size: .6rem; opacity: .7; white-space: nowrap; }
.konel-weather-day.is-active {
  background: var(--kw-primary);
  border-color: var(--kw-primary);
  color: #fff;
}
.konel-weather-day.is-active .kw-dow { opacity: .9; }

/* Lajur kad */
.konel-weather-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.konel-weather-card {
  background: #fff;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  padding: 6px 8px;
}
.konel-weather-card.is-empty { opacity: .6; }

.kw-card-name {
  font-size: .66rem;
  font-weight: 700;
  color: var(--kw-primary-dark);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kw-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Angin — blok menegak: ikon di atas, arah/kelajuan di bawah (jimat ruang mendatar) */
.kw-wind-block { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; line-height: 1.05; }
.kw-wind-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.kw-wind-label { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; margin-top: 1px; }
.kw-wind-label .kw-dir { font-size: .72rem; font-weight: 700; color: var(--kw-primary-dark); }
.kw-wind-label .kw-spd { font-size: .62rem; font-weight: 600; color: var(--kw-ink); }
.kw-wind-label small { font-size: .5rem; color: #6b7886; }

/* Rotor cuaca — teks waktu (atas) + ikon berpusing + tab Pagi/Petang/Malam */
.kw-rotor { margin-left: auto; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kw-wtext {
  width: 100%; text-align: center; font-size: .54rem; font-weight: 600;
  line-height: 1.15; color: var(--kw-ink);
  min-height: 2.3em;            /* rezab 2 baris -> kad tak melonjak bila teks tukar */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: opacity .3s ease;
}
.kw-rimg { width: 46px; height: 46px; position: relative; }
.kw-wimg {
  position: absolute; inset: 0; width: 46px; height: 46px; object-fit: contain;
  mix-blend-mode: multiply; opacity: 0; transition: opacity .45s ease;
}
.kw-wimg.is-show { opacity: 1; }
.kw-tabs { display: flex; gap: 3px; }
.kw-tab {
  border: none; background: #e3e9f0; color: #475569; cursor: pointer;
  font-size: .48rem; font-weight: 700; padding: 2px 5px; border-radius: 5px; line-height: 1.2;
}
.kw-tab.is-active { background: var(--kw-primary); color: #fff; }

/* Tinggi ombak — jalur wave beralun + label + nilai */
.kw-wave {
  margin-top: 5px;
  height: 26px;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.kw-wave::before,
.kw-wave::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #5aa9e6 0%, #1d4ed8 100%);
  -webkit-mask: url(../img/parallax/wave.png) repeat-x 0 bottom;
          mask: url(../img/parallax/wave.png) repeat-x 0 bottom;
  -webkit-mask-size: 320px 100%;
          mask-size: 320px 100%;
  pointer-events: none;
}
.kw-wave::before { opacity: .9;  animation: kwWaveScroll 6s linear infinite; }
.kw-wave::after  { opacity: .45; animation: kwWaveScroll 9.5s linear infinite reverse; }
.kw-wave-val {
  margin-top: 3px;
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
  color: #1d4ed8;          /* royal blue pekat — bawah wave, tiada chip */
  letter-spacing: .2px;
}
.kw-wave-val .kw-wave-lbl { font-size: .58rem; font-weight: 600; color: #6b7886; }

/* Petunjuk tahap keselamatan — bulatan warna (emoji) + label, teks NEUTRAL (bukan teks berwarna) */
.kw-safe {
  display: block; width: max-content; margin: 3px auto 0; padding: 1px 10px;
  border-radius: 999px; font-size: .58rem; font-weight: 700; letter-spacing: .2px;
  color: var(--kw-ink); background: #f1f5f9;
}
/* Bulatan berdenyut — tarik perhatian; 🔴 Bahaya denyut lebih laju */
.kw-safe-dot { display: inline-block; transform-origin: center; animation: kwSafePulse 1.7s ease-in-out infinite; }
.kw-safe-dot--urgent { animation-duration: .85s; }

/* ---------- FOOTER ---------- */
.konel-weather-foot {
  padding: 6px 12px 8px;
  font-size: .55rem;
  line-height: 1.3;
  color: #6b7886;
  background: #f8fafc;
  white-space: nowrap;
}
.konel-weather-foot b { color: var(--kw-primary-dark); }

/* ---------- TOGGLE (chevron lipat/buka) ---------- */
.konel-weather-toggle {
  appearance: none;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 8px;
  min-height: 78px;
  background: #4169e1;
  color: #fff;
  border-radius: 0 12px 12px 0;
  padding: 16px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 2px 3px 11px rgba(8, 40, 70, .32);
  transition: background .2s ease;
}
.konel-weather-toggle:hover { background: #2f50c2; }

.kw-chev {
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 13px solid #fff;   /* tunjuk '<' bila terbuka (lipat) */
  transition: transform .3s ease;
}
.konel-weather[data-collapsed] .kw-chev { transform: rotate(180deg); } /* tunjuk '>' bila terlipat (buka) */

/* Label "Cuaca" sentiasa nampak — handle besar mudah dilihat & ditekan */
.kw-toggle-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .6px;
}

/* ---------- ANIMASI ---------- */
@keyframes kwFlip {
  from { opacity: .35; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0); }
}
.konel-weather-card.kw-flip { animation: kwFlip .35s ease; }

@keyframes kwWaveScroll {
  from { -webkit-mask-position: 0 bottom;     mask-position: 0 bottom; }
  to   { -webkit-mask-position: 320px bottom; mask-position: 320px bottom; }
}

@keyframes kwSafePulse {
  0%, 100% { transform: scale(1);   opacity: .8; }
  50%      { transform: scale(1.3); opacity: 1; }
}

/* ---------- RESPONSIF ---------- */
@media (max-width: 991px) {
  .konel-weather { top: 96px; }
  .konel-weather-body { width: 272px; }
}
@media (max-width: 575.98px) {
  .konel-weather { top: 80px; }
  .konel-weather-body { width: 248px; }
  .konel-weather-day { min-width: 56px; }
}

/* Mobile/tablet: kad lebih sempit — kecilkan ikon + rapatkan jarak supaya
   ikon cuaca tidak tersembul keluar tepi kanan kad. Desktop (>991px) kekal. */
@media (max-width: 991.98px) {
  .kw-card-row { gap: 6px; }
  .kw-wind-icon { width: 34px; height: 34px; }
  .kw-rimg, .kw-wimg { width: 40px; height: 40px; }
}

/* Mobile: bila panel cuaca DIBUKA, sorok bubble ajakan Nelia supaya tak bertindih.
   Bubble muncul semula bila panel ditutup. Desktop tidak terjejas (media-query). */
@media (max-width: 767.98px) {
  body.konel-weather-open .konel-chat-nudge { display: none; }
}

/* ---------- AKSESIBILITI ---------- */
@media (prefers-reduced-motion: reduce) {
  .konel-weather,
  .konel-weather-body,
  .konel-weather-card.kw-flip,
  .kw-wimg,
  .kw-safe-dot,
  .kw-wave::before,
  .kw-wave::after { transition: none !important; animation: none !important; }
}