/* ============================================================
   หน้าแรกแบบแผนที่เต็มจอ
   โครง: แผนที่เต็มจอ (radar.css) + การ์ดอากาศแบบลากขึ้นจากล่าง
   ไฟล์นี้โหลดหลัง radar.css เพื่อ override เฉพาะที่ชนกัน
   ============================================================ */

/* ---------- ตัวแปรความสูง เพื่อไม่ให้การ์ดไปทับแถบเรดาร์ ---------- */
:root{
  --wx-controls-h: 88px;   /* ความสูงแถบเวลาเรดาร์ด้านล่าง (radar.css .controls) */
  --wx-sheet-peek: 76px;   /* ความสูงที่การ์ดเหลือตอนพับ */
  --wx-glass: rgba(15,23,42,.90);
  --wx-border: rgba(255,255,255,.15);
  --wx-accent: #4fc3f7;
}

/* ---------- ปิดขอบเลื่อน/ยืดของ body เพราะแผนที่เต็มจอ ---------- */
html,body{
  height:100%;
  overflow:hidden;
  background:#0a0e14;
}
/* ปิด overscroll เพื่อไม่ให้ลากแผนที่แล้วหน้าเลื่อนตาม */
body{ overscroll-behavior:none; }

/* ============================================================
   0) ความอ่านง่ายบนพื้นดาวเทียม
   ปัญหาที่เจอจากภาพ: ปุ่มฝั่งขวาเป็นกระจกเข้มทับภาพดาวเทียม
   ตัวหนังสือจาง + พื้นหลังโปร่ง = มองไม่เห็นบนภาพสว่าง/สว่าง ๆ
   แก้โดย: พื้นทึบขึ้น + ตัวหนังสือขาว + ขอบชัด + ขนาดใหญ่ขึ้น
   ============================================================ */
.settings button,
.wind-box button,
.icon-btn{
  background:rgba(8,15,28,.94) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(148,163,184,.45) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.55);
  font-size:14px !important;
  font-weight:700 !important;
  min-height:46px;
  padding:12px 14px !important;
}
.settings button:hover,
.wind-box button:hover,
.icon-btn:hover{
  background:rgba(30,58,95,.96) !important;
  border-color:rgba(79,195,247,.85) !important;
}
/* ปุ่มที่ "เปิดอยู่" ให้เห็นชัดว่าเปิดแล้ว */
.settings button.on,
.wind-box button.on{
  background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;
  border-color:#7dd3fc !important;
  color:#fff !important;
}
/* ปุ่มธีมให้ผู้ใช้เห็นโหมดปัจจุบัน */
#themeMapBtn{ font-size:13px !important; }
#themeMapBtn[data-mode="light"]{ border-color:#fbbf24 !important; }
#themeMapBtn[data-mode="dark"]{  border-color:#818cf8 !important; }

/* กล่องคำอธิบายสีเรดาร์ */
.legend{
  background:rgba(8,15,28,.95) !important;
  border:1px solid rgba(148,163,184,.45) !important;
  color:#f1f5f9;
  font-size:13px;
  padding:16px;
}
.legend-title{ font-size:14px; }
.legend-labels,.legend-unit{ color:#cbd5e1 !important; font-size:12px; }

/* แถบเวลาเรดาร์ */
.controls{
  background:rgba(8,15,28,.95) !important;
  border:1px solid rgba(148,163,184,.45) !important;
}
.time-main{ font-size:17px; color:#f1f5f9; }
.time-rel{ color:#94a3b8 !important; }

/* ช่องค้นหา */
.search-box input{
  background:rgba(8,15,28,.95) !important;
  color:#f8fafc !important;
  border:1px solid rgba(148,163,184,.5) !important;
  min-height:48px;
  font-size:16px;   /* 16px กัน iOS ซูมอัตโนมัติเวลาพิมพ์ */
}
.search-box input::placeholder{ color:#94a3b8 !important; }
.suggestions{ background:rgba(8,15,28,.98) !important; border-color:rgba(148,163,184,.5) !important; }
.suggestion{ font-size:15px; padding:13px 16px; color:#f1f5f9; }
.suggestion .country{ color:#94a3b8 !important; }

/* ป้าย "เรดาร์ฝนสด" */
.radar-badge{
  background:rgba(8,15,28,.95) !important;
  border:2px solid #38bdf8 !important;
  font-size:14px;
}

/* ปุ่ม +/- ของ Leaflet */
.leaflet-control-zoom a{
  background:rgba(8,15,28,.95) !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.5) !important;
  width:46px !important; height:46px !important;
  line-height:46px !important;
  font-size:24px !important;
}

/* ============================================================
   0b) พื้นที่กดของแถบเลื่อน
   ⚠️ วัดแล้วได้: แถบเวลาเรดาร์สูงแค่ 6px และแถบเกณฑ์ฝน 14px
      บนมือถือแทบลากไม่ได้ (มาตรฐานต้อง ≥44px)
   แก้โดย: ทำ "พื้นที่กด" สูง 44px แต่ให้เส้นภาพยังบางเท่าเดิม
   ============================================================ */
.timeline input[type=range],
.threshold-box input[type=range]{
  height:44px !important;
  background:transparent !important;
  border:0;
  margin:0;
}
/* เส้นภาพ = บางเหมือนเดิม จัดกลางในพื้นที่กด 44px */
.timeline input[type=range]::-webkit-slider-runnable-track,
.threshold-box input[type=range]::-webkit-slider-runnable-track{
  height:6px;
  background:rgba(255,255,255,.22);
  border-radius:3px;
}
.timeline input[type=range]::-moz-range-track,
.threshold-box input[type=range]::-moz-range-track{
  height:6px;
  background:rgba(255,255,255,.22);
  border-radius:3px;
}
/* หัวแถบ: 20px ขึ้นกลางเส้น (เส้น 6px → เลื่อนขึ้น (6-20)/2 = -7px) */
.timeline input[type=range]::-webkit-slider-thumb,
.threshold-box input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:26px; height:26px;
  margin-top:-10px;
  background:#4fc3f7; border:3px solid #fff;
  border-radius:50%; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.timeline input[type=range]::-moz-range-thumb,
.threshold-box input[type=range]::-moz-range-thumb{
  width:26px; height:26px;
  background:#4fc3f7; border:3px solid #fff;
  border-radius:50%; cursor:pointer;
}
/* ปุ่มหาตำแหน่งให้กว้างพอสำหรับนิ้ว */
.icon-btn{ min-width:48px !important; }

/* ============================================================
   1) การ์ดอากาศแบบลากขึ้น (bottom sheet)
   ============================================================ */
.wx-sheet{
  position:fixed;
  left:0; right:0;
  bottom:calc(var(--wx-controls-h) + 8px);
  z-index:998;
  max-width:760px;
  margin:0 auto;
  pointer-events:none;
  /* สูงสุดเท่ากับพื้นที่ว่างเหนือแถบเวลาเรดาร์ */
  max-height:calc(100vh - var(--wx-controls-h) - 120px);
  display:flex;
  flex-direction:column;
}

/* --- ส่วนที่เห็นตอนพับ (สรุปสั้น ๆ) --- */
.wx-summary{
  pointer-events:auto;
  display:flex; align-items:center; gap:14px;
  padding:12px 18px;
  min-height:var(--wx-sheet-peek);
  background:var(--wx-glass);
  border:1px solid var(--wx-border);
  border-radius:18px;
  backdrop-filter:blur(16px);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, background .16s ease;
}
.wx-summary:hover{ background:rgba(20,32,54,.95); }
.wx-summary:active{ transform:scale(.99); }

.wx-sum-icon{
  font-size:38px; line-height:1; flex-shrink:0;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(79,195,247,.12);
  border-radius:14px;
}
/* ไอคอนเป็น <img> จาก cdn.weatherapi.com (คัดลอกมาจากการ์ดจริง) */
.wx-sum-icon img{ width:42px; height:42px; object-fit:contain; }
.wx-sum-icon:not(:has(img)){ font-size:34px; }
.wx-dot{ opacity:.5; margin:0 6px; }
.wx-sum-main{ flex:1; min-width:0; }
.wx-sum-top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.wx-sum-temp{
  font-family:'Prompt',sans-serif; font-size:32px; font-weight:700;
  line-height:1.05; color:#fff; white-space:nowrap;
}
.wx-sum-city{
  font-size:16px; font-weight:600; color:#e2e8f0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw;
}
.wx-sum-cond{
  font-size:13px; color:rgba(226,232,240,.75);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wx-sum-extra{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;
  font-size:12px; color:rgba(226,232,240,.7);
}
.wx-sum-extra span{ white-space:nowrap; }

.wx-sum-toggle{
  flex-shrink:0;
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); border:1px solid var(--wx-border);
  color:#fff; font-size:15px;
  transition:transform .2s ease;
}
.wx-sheet.open .wx-sum-toggle{ transform:rotate(180deg); }

/* --- ส่วนรายละเอียด (เลื่อนได้) --- */
.wx-body{
  pointer-events:auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:none;
  padding:2px 2px 4px;
  /* ซ่อนจากสายตาแต่ยังเลื่อนได้ตอนพับ */
  max-height:0;
}
.wx-sheet.open .wx-body{ display:block; max-height:60vh; }

/* ตัวจับการลาก */
.wx-grip{
  pointer-events:auto;
  display:none;
  width:100%; padding:10px 0 6px;
  background:none; border:0; cursor:grab;
}
.wx-sheet.open .wx-grip{ display:block; }
.wx-grip span{
  display:block; width:44px; height:5px; margin:0 auto;
  background:rgba(255,255,255,.35); border-radius:3px;
}

/* ---------- การ์ดด้านใน ---------- */
/* การ์ดของ style.css ตั้งพื้นหลังอัตโนมัติตามธีม
   แต่บนแผนที่ต้องการกระจกสีเข้มเสมอ ไม่งั้นอ่านยาก */
.wx-body .card{
  background:var(--wx-glass);
  border:1px solid var(--wx-border);
  border-radius:16px;
  color:#e2e8f0;
  backdrop-filter:blur(16px);
  margin-bottom:12px;
}
.wx-body .card h3{ color:#fff; }
.wx-body .main-card{ padding:20px 18px; }
.wx-body .temp{ color:#fff; }
.wx-body .feels,
.wx-body .location p{ color:rgba(226,232,240,.75); }

.wx-body .error{
  display:none;
  background:rgba(255,80,80,.18);
  border:1px solid rgba(255,80,80,.5);
  color:#ffb3b3;
  max-width:none; margin:0 0 12px;
}

.wx-foot{
  pointer-events:none;
  padding:2px 6px 6px;
  font-size:11px; color:rgba(226,232,240,.55); text-align:center;
}

/* ============================================================
   2) ตอนการ์ดเปิด → ซ่อนแถบเวลาเรดาร์กับคำอธิบายสี
      ไม่งั้นจะทับกันและกดกดไม่ถึง
   ============================================================ */
.wx-sheet.open ~ .controls,
body.wx-open .controls{
  opacity:0; pointer-events:none;
  transform:translateY(120%);
}
.wx-sheet.open ~ .legend,
body.wx-open .legend{
  opacity:0; pointer-events:none;
}
.controls,.legend{ transition:opacity .2s ease, transform .2s ease; }

/* ============================================================
   3) ปุ่มเล็กบนมือถือ + ปลอดภัยจาก safe-area
   ============================================================ */
@media (max-width:700px){
  :root{ --wx-controls-h: 74px; }
  .wx-sheet{ max-height:calc(100vh - var(--wx-controls-h) - 110px); }
  .wx-sheet.open .wx-body{ max-height:58vh; }
  .wx-sum-temp{ font-size:28px; }
  .wx-sum-city{ max-width:38vw; font-size:15px; }
  .wx-sum-icon{ width:46px; height:46px; font-size:32px; }
}
/* เครื่องที่มีที่ปรับ (ขอบจอ) เช่น iPhone → เว้นขอบล่าง */
@supports (padding: max(0px)){
  .wx-sheet{ bottom:calc(var(--wx-controls-h) + 8px + env(safe-area-inset-bottom)); }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว → ไม่ให้การ์ดเลื่อนนุ่ม */
@media (prefers-reduced-motion:reduce){
  .wx-summary,.wx-sum-toggle,.controls,.legend{ transition:none; }
}

/* ---------- จอเล็กมาก: ตัดข้อมูลรองออก ให้เหลือสิ่งจำเป็น ---------- */
@media (max-width:380px){
  .wx-sum-extra{ display:none; }
}