/* ===== Maintenance Alert — แจ้งเตือน "กำลังปรับปรุงระบบ" แสดงเฉพาะกล่อง (พื้นหลังโปร่งใส) (ใช้คู่ js/maint-alert.js) ===== */
.mx-overlay,.mx-overlay *{box-sizing:border-box}
.mx-overlay{
  --brand:#123f2c;--brand-light:#1a5a3f;--brand-dark:#0d2d1f;--brand-soft:#e8f0eb;--gold:#d4a548;
  --g200:#e2e8f0;--g400:#94a3b8;--g500:#64748b;
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;overflow:hidden;
  background:transparent;font-family:"Sarabun","Inter","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
}
.mx-overlay.open{display:flex;animation:mx-in .4s ease}
.mx-overlay.closing{animation:mx-out .3s ease forwards}
@keyframes mx-in{from{opacity:0}to{opacity:1}}
@keyframes mx-out{from{opacity:1}to{opacity:0}}

.mx-alert{position:relative;z-index:1;width:100%;max-width:440px;padding:40px 32px 28px;overflow:hidden;text-align:center;
  background:#fff;border:1.5px solid var(--g200);border-radius:24px;
  box-shadow:0 24px 64px rgba(18,63,44,.12),0 8px 20px rgba(18,63,44,.06),0 1px 3px rgba(18,63,44,.04);
  animation:mx-card .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes mx-card{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:none}}
.mx-alert::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--gold) 50%,var(--brand) 100%);background-size:200% 100%;animation:mx-grad 4s ease infinite}
@keyframes mx-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.mx-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;display:flex;align-items:center;justify-content:center;margin:0;padding:0;
  border:0;border-radius:10px;background:transparent;color:var(--g400);cursor:pointer;transition:all .2s ease}
.mx-close:hover{background:var(--brand-soft);color:var(--brand);transform:rotate(90deg)}
.mx-close:active{transform:rotate(90deg) scale(.9)}
.mx-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.mx-icon-wrap{position:relative;width:88px;height:88px;margin:0 auto 22px}
.mx-icon-wrap::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(18,63,44,.15) 0%,transparent 70%);animation:mx-glow 2.5s ease-in-out infinite}
@keyframes mx-glow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
.mx-icon{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-light) 0%,var(--brand-dark) 100%);
  box-shadow:0 12px 32px rgba(18,63,44,.35),inset 0 2px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.15);animation:mx-bob 3s ease-in-out infinite}
@keyframes mx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mx-icon svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}

.mx-title{margin:0 0 10px;padding:0;font-size:23px;font-weight:800;line-height:1.3;letter-spacing:-.4px;color:var(--brand);text-transform:none}
.mx-desc{max-width:340px;margin:0 auto 26px;padding:0;font-size:14.5px;line-height:1.65;color:var(--g500)}

.mx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0;padding:14px 24px;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));color:#fff;font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 6px 18px rgba(18,63,44,.3),inset 0 1px 0 rgba(255,255,255,.15);transition:all .25s cubic-bezier(.4,0,.2,1)}
.mx-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 10px 24px rgba(18,63,44,.4),inset 0 1px 0 rgba(255,255,255,.15)}
.mx-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(18,63,44,.3)}
.mx-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mx-btn:focus-visible,.mx-close:focus-visible{outline:3px solid rgba(212,165,72,.6);outline-offset:2px}

@media(max-width:480px){
  .mx-overlay{padding:16px}
  .mx-alert{padding:34px 22px 22px;border-radius:20px}
  .mx-title{font-size:19px}
  .mx-desc{font-size:14px}
  .mx-icon-wrap,.mx-icon{width:76px;height:76px}
  .mx-icon svg{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  .mx-overlay *,.mx-overlay::before,.mx-overlay::after,.mx-alert,.mx-alert::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}