/* Track */
#currentFuel.form-range::-webkit-slider-runnable-track {
  height: 10px;                 /* ความหนาแถบ */
  background: #ccc;
  border-radius: 5px;
}
#currentFuel.form-range::-moz-range-track {
  height: 10px;
  background: #ccc;
  border-radius: 5px;
}

/* Thumb */
#currentFuel.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;     /* ปิดค่า default */
  background: red;              /* สีปุ่ม */
  border: 2px solid #fff;
  width: 40px;                  /* <<< ขยายความกว้าง */
  height: 40px;                 /* <<< ขยายความสูง */
  border-radius: 50%;
  margin-top: -15px;             /* <<< จัดให้อยู่กลาง track */
  cursor: pointer;
}
#currentFuel.form-range::-moz-range-thumb {
  background: red;
  border: 2px solid #fff;
  width: 40px;                  /* <<< ขยาย */
  height: 40px;                 /* <<< ขยาย */
  border-radius: 50%;
  cursor: pointer;
}

/* Hover/Focus effect */
#currentFuel.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(255,0,0,0.3);
}
#currentFuel.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(255,0,0,0.3);
}

.swal-wide {
  width: 40em !important;
}



/* sticky */
/* แถบล่างแบบคอมแพ็ค — รองรับ safe-area */
.mixbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
@supports not (backdrop-filter: blur(6px)){
  .mixbar{ background:#fff; }
}
.mixbar__row{
  max-width: 680px; margin: 0 auto;
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
}
.mixbar__pill{
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 14px;
  background: #fff;
  white-space: nowrap;
}

/* bottom sheet */
.mixsheet{
  position: fixed; left:0; right:0; bottom:0;
  transform: translateY(100%);
  transition: transform .25s ease;
  z-index: 1040;
  padding-bottom: env(safe-area-inset-bottom);
}
.mixsheet.open{ transform: translateY(0%); }
.mixsheet__content{
  max-width: 680px; margin: 0 auto;
  background: #fff;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  box-shadow: 0 -10px 24px rgba(0,0,0,.2);
  padding: 16px;
}
.mixsheet__handle{
  width: 36px; height: 4px; border-radius: 4px;
  background: #ccc; margin: 8px auto;
}

/* อย่าให้แถบล่างบังเนื้อหา: เฉพาะจอเล็ก */
@media (max-width: 576px){
  body{ padding-bottom: 64px; } /* ขยับหน้าขึ้นให้ไม่ชนแถบ */
}

/* เคารพ reduced motion */
@media (prefers-reduced-motion: reduce){
  .mixsheet{ transition: none; }
}