/* ============ Responsive Background Image ============ */
:root{
  /* เปลี่ยนพาธรูปตามที่คุณวางไฟล์ */
  --login-bg-webp-1x: url("../img/bg2.webp");
  --login-bg-webp-2x: url("../img/bg2.webp");
  --login-bg-jpg-1x:  url("../img/bg2.webp");

  /* โทนทับบนภาพเพื่อให้ตัวหนังสืออ่านง่าย */
  --login-bg-overlay-from: rgb(255 233 233 / 45%);
  --login-bg-overlay-to:   rgb(255 163 163 / 60%);

  /* สีเผื่อกรณีโหลดภาพไม่ทัน */
  --login-bg-fallback: #ff9a83;
}

/* ให้หน้าสูงอย่างน้อยเต็มจอ (แก้ปัญหา mobile viewport) */
html, body{ height: 100%; }
body{
  min-height: 100dvh; /* ใช้ dynamic viewport บน iOS/Android รุ่นใหม่ */
  position: relative;
}

/* วางภาพพื้นหลังไว้หลังสุดด้วย pseudo-element (ประหยัด DOM) */
body::before{
  content:"";
  position: fixed;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  z-index: -2;

  /* ไล่สีทับบนรูป + รองรับภาพหลายชนิด/ความละเอียด */
  background:
    linear-gradient(180deg, var(--login-bg-overlay-from), var(--login-bg-overlay-to)),
    image-set(
      var(--login-bg-webp-2x) type("image/webp") 2x,
      var(--login-bg-webp-1x) type("image/webp") 1x,
      var(--login-bg-jpg-1x)  type("image/jpeg") 1x
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ช่วยให้เลื่อนลื่นบนมือถือ */
  transform: translateZ(0);
  will-change: transform;
}

/* ============ Bubble layer ============ */
/* ครอบชั้นฟองอากาศให้ลอยอยู่เหนือภาพ แต่ไม่บังการคลิกฟอร์ม */
.floating-bg{
  position: fixed;
  inset: 0;
  z-index: -1;            /* อยู่เหนือ body::before แต่ใต้เนื้อหา */
  pointer-events: none;   /* ไม่รับอีเวนต์เมาส์/ทัช */
  overflow: hidden;
}

/* ถ้าต้องการลดภาระเครื่อง ฝั่ง mobile ให้โชว์ bubble แค่ 34 อันแรก */
@media (max-width: 575.98px){
  .floating-bg .bubble:nth-child(n+35){ display: none; }
}

/* เคลื่อนไหวเยอะๆ อาจเวียนหัว — ให้ผู้ใช้ที่ตั้งค่าลดแอนิเมชันได้พัก */
@media (prefers-reduced-motion: reduce){
  .bubble{ animation: none !important; }
}

/* ============ Card/Login box ============ */
/* เพิ่มความอ่านง่ายบนภาพ: กระจกใส + เงา + ขอบมน */
.box-main{
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 1rem;
}

/* ปรับขนาดคอนเทนเนอร์ให้เต็มจออย่างเสถียรทุกอุปกรณ์ */
.vh-100{
  min-height: 100dvh !important;  /* ทับของ Bootstrap ในบางเบราว์เซอร์มือถือ */
}

/* ปรับปุ่มให้แตะง่ายขึ้นบนจอเล็ก */
@media (max-width: 575.98px){
  .btn{ padding-top: .9rem; padding-bottom: .9rem; }
}

/* ============ เล็กน้อยเพื่อความเนียน ============ */
h3.card-title{
  color: #111;           /* คงคอนทราสต์กับพื้นหลัง */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ป้องกัน .traffic-lights (ถ้ามี) ลอยผิดตำแหน่งบนจอเล็ก */
.traffic-lights{ display:flex; gap:.4rem; margin-bottom:.5rem; }
.traffic-lights .dot{
  width:.75rem; height:.75rem; border-radius:50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset, 0 1px 2px rgba(0,0,0,.12);
}
.traffic-lights .red{    background:#ff5f56; }
.traffic-lights .yellow{ background:#ffbd2e; }
.traffic-lights .green{  background:#27c93f; }