/* ============================================================
   EQUIPMENT PAYMENT — QR / SLIP / RECEIPT
   ============================================================ */
#equipPayModal{
  position:fixed;
  inset:0;
  z-index:22000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,7,13,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#equipPayModal.show{display:flex;animation:eqPayFade .18s ease both}
@keyframes eqPayFade{from{opacity:0}to{opacity:1}}
.eq-pay-box{
  position:relative;
  width:min(100%,430px);
  max-height:90vh;
  overflow-y:auto;
  padding:22px 18px 18px;
  border:1px solid rgba(125,211,252,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(56,189,248,.09),transparent 28%),
    linear-gradient(145deg,#102033,#0c1524);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}
.eq-pay-x{
  position:absolute;right:11px;top:11px;
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(6,16,26,.68);color:#dbeafe;font-size:20px
}
.eq-pay-head{text-align:center;margin-top:4px}
.eq-pay-head h3{margin:0;color:#fff;font-size:19px}
.eq-pay-head p{margin:5px 0 0;color:#8197aa;font-size:10px;line-height:1.5}
.eq-pay-trip{
  margin:13px 0 0;
  padding:10px 11px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:13px;
  background:rgba(5,16,26,.50);
  color:#b8c9d7;font-size:10px;line-height:1.5
}
.eq-pay-trip strong{color:#eef8ff}
.eq-pay-total{
  margin:10px 0 13px;
  padding:12px;
  text-align:center;
  border:1px solid rgba(125,211,252,.15);
  border-radius:15px;
  background:rgba(56,189,248,.055)
}
.eq-pay-total small{display:block;color:#7d94a8;font-size:9px}
.eq-pay-total strong{
  display:block;margin-top:4px;color:#7dd3fc;font-size:27px;line-height:1;font-weight:900
}
.eq-pay-qr{
  width:185px;
  margin:0 auto 13px;
  display:block;
  border:5px solid #fff;
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.26)
}
#equipPayModal .slip-upload{margin:8px 0 12px}
#equipPayModal .btn-pay-ok{
  width:100%;
  min-height:48px;
  border:0;border-radius:14px;
  background:linear-gradient(135deg,#0284c7,#38bdf8);
  color:#fff;font:inherit;font-size:12px;font-weight:850;
  box-shadow:0 10px 25px rgba(2,132,199,.20)
}
#equipPayModal .btn-pay-ok:disabled{opacity:.45;box-shadow:none}
.eq-pay-note{
  margin-top:10px;text-align:center;color:#6f8598;font-size:9px;line-height:1.55
}
#equipReceiptPage .eqr-paid-status{
  margin:10px 0 0;
  padding:9px 11px;
  border-radius:11px;
  text-align:center;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.16);
  color:#86efac;
  font-size:10px;
  font-weight:800
}
@media(min-width:900px){
  .eq-pay-box{width:min(900px,92vw);display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px 24px;padding:26px}
  .eq-pay-x{grid-column:1/-1}
  .eq-pay-head{grid-column:1/-1;text-align:left}
  .eq-pay-head h3{font-size:27px}
  .eq-pay-head p{font-size:14px}
  .eq-pay-trip{grid-column:1;grid-row:2;font-size:13px}
  .eq-pay-total{grid-column:1;grid-row:3}
  .eq-pay-qr{grid-column:1;grid-row:4;width:245px}
  #equipPayModal .slip-upload{grid-column:2;grid-row:2/5;margin:0}
  #equipPayModal .btn-pay-ok{grid-column:2;grid-row:5;font-size:17px}
  .eq-pay-note{grid-column:1/-1;font-size:12px}
}

/* ================================================================
   EQUIPMENT PAYMENT — FOREST GLASS VISUAL ONLY
   ไม่แตะระบบเช่า / QR / slip / submit / EasySlip / receipt
   ================================================================ */
#equipPayModal{
  background:
    linear-gradient(180deg,rgba(3,8,13,.72),rgba(3,8,13,.88)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=76') center/cover fixed no-repeat!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}

#equipPayModal .eq-pay-box{
  background:
    linear-gradient(145deg,rgba(8,20,31,.82),rgba(6,15,25,.88)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=76') center/cover no-repeat!important;
  border:1px solid rgba(125,211,252,.14)!important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

#equipPayModal .eq-pay-box::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(56,189,248,.07),transparent 29%),
    linear-gradient(180deg,rgba(5,12,21,.08),rgba(3,9,16,.30))!important;
}

#equipPayModal .eq-pay-box > *{
  position:relative!important;
  z-index:1!important;
}

#equipPayModal .eq-pay-trip{
  background:rgba(7,18,30,.60)!important;
  border-color:rgba(148,163,184,.10)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#equipPayModal .eq-pay-total{
  background:rgba(9,31,43,.58)!important;
  border-color:rgba(125,211,252,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#equipPayModal .slip-drop{
  background:rgba(8,20,32,.66)!important;
  border-color:rgba(148,163,184,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#equipPayModal .slip-drop.has-file{
  background:rgba(8,42,32,.54)!important;
  border-color:rgba(52,211,153,.34)!important;
}

#equipPayModal .eq-pay-qr{
  background:#fff!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.15)!important;
}

#equipPayModal .eq-pay-x{
  background:rgba(7,16,27,.72)!important;
  border-color:rgba(148,163,184,.13)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#equipPayModal .eq-pay-note{
  color:#7d91a3!important;
}

@media(max-width:430px){
  #equipPayModal{
    background:
      linear-gradient(180deg,rgba(3,8,13,.76),rgba(3,8,13,.90)),
      url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=76') center/cover no-repeat!important;
  }
}

/* ================================================================
   EQUIPMENT QR PAYMENT HEADER ALIGNMENT — VISUAL ONLY
   ================================================================ */
#equipPayModal .eq-pay-box{
  position:relative!important;
  padding-top:58px!important;
}

/* ปุ่มปิดอยู่มุมขวาบนจริง */
#equipPayModal .eq-pay-x{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  margin:0!important;
  z-index:8!important;
  width:36px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
}

/* หัวส่วนค่าเช่าให้อยู่สูงขึ้นและสมดุลกับ QR pages อื่น */
#equipPayModal .eq-pay-head{
  position:relative!important;
  z-index:2!important;
  margin:0 38px 12px!important;
  text-align:center!important;
}

#equipPayModal .eq-pay-head h3{
  margin:0 0 4px!important;
  line-height:1.22!important;
}

#equipPayModal .eq-pay-head p{
  margin:0!important;
  line-height:1.4!important;
}

/* ขยับองค์ประกอบแรกขึ้นให้ไม่เกิดช่องว่างด้านบน */
#equipPayModal .eq-pay-trip{
  margin-top:0!important;
}

@media(max-width:430px){
  #equipPayModal .eq-pay-box{
    padding-top:54px!important;
  }

  #equipPayModal .eq-pay-x{
    top:12px!important;
    right:12px!important;
    width:34px!important;
    height:34px!important;
  }

  #equipPayModal .eq-pay-head{
    margin-left:30px!important;
    margin-right:30px!important;
  }
}