/* Bannawang CMS v1.3.3 — universal responsive loading experience */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
button,input,select,textarea{font:inherit;max-width:100%}

.bnw-page-loader{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:rgba(4,18,29,.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.bnw-page-loader.is-active{opacity:1;visibility:visible;pointer-events:all}
.bnw-loader-inner{display:grid;justify-items:center;gap:14px;text-align:center;max-width:min(88vw,360px)}
.bnw-loader-ring{
  --bnw-loader-size:clamp(92px,13vw,132px);
  position:relative;
  width:var(--bnw-loader-size);
  height:var(--bnw-loader-size);
  display:grid;
  place-items:center;
  border-radius:50%;
  isolation:isolate;
  background:#fff url('https://lh3.googleusercontent.com/a/ACg8ocJUb1C6p23BOfQOIMAYDc1HQC-uNxppHyD931vYPFbFpAoZ1lPT=s576-c-no') center/cover no-repeat;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.bnw-loader-ring::before{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 48%,rgba(94,234,212,.18) 58%,#5eead4 72%,#38bdf8 82%,rgba(255,255,255,.95) 88%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:bnwRingSpin 1.1s linear infinite;
  filter:drop-shadow(0 0 8px rgba(94,234,212,.8)) drop-shadow(0 0 18px rgba(56,189,248,.35));
}
.bnw-loader-ring::after{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:-2;
  border-radius:50%;
  border:1px solid rgba(148,237,229,.18);
  box-shadow:0 0 28px rgba(20,184,166,.18),inset 0 0 18px rgba(56,189,248,.1);
  animation:bnwHaloPulse 1.8s ease-in-out infinite;
}
.bnw-loader-ring img{
  width:calc(var(--bnw-loader-size) - 14px);
  height:calc(var(--bnw-loader-size) - 14px);
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
  opacity:0;
}
.bnw-loader-title{
  margin-top:4px;
  color:#f8fafc;
  font-family:'Space Grotesk','Noto Sans Thai',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(18px,3.8vw,24px);
  font-weight:700;
  letter-spacing:.025em;
  line-height:1.25;
}
.bnw-loader-sub{
  min-height:20px;
  color:#a7c5cf;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.bnw-loader-dots::after{content:"";animation:bnwDots 1.2s steps(4,end) infinite}
@keyframes bnwRingSpin{to{transform:rotate(360deg)}}
@keyframes bnwHaloPulse{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.035)}}
@keyframes bnwDots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}

/* Small phones / landscape phones / tablets / desktop / high-DPI displays */
@media(max-width:480px){
  .bnw-page-loader{padding:20px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left))}
  .bnw-loader-ring{--bnw-loader-size:92px}
  .bnw-loader-ring::before{inset:-7px}
  .bnw-loader-title{font-size:18px}
}
@media(max-height:480px) and (orientation:landscape){
  .bnw-loader-inner{gap:8px}
  .bnw-loader-ring{--bnw-loader-size:72px}
  .bnw-loader-title{font-size:16px}
  .bnw-loader-sub{font-size:10px}
}
@media(min-width:1600px){.bnw-loader-ring{--bnw-loader-size:136px}}

/* Accessibility: keep the loader visible, but avoid forced motion. */
@media(prefers-reduced-motion:reduce){
  .bnw-page-loader{transition:none}
  .bnw-loader-ring::before,.bnw-loader-ring::after,.bnw-loader-dots::after{animation:none}
  .bnw-loader-dots::after{content:"..."}
}
