/* ===================================================================
   GlassWorks · ช่างกระจก-อลูมิเนียม
   style.css — Premium Blue Theme
=================================================================== */

:root{
  --blue:#2563EB;
  --blue-deep:#1D4ED8;
  --blue-dark:#1E3A8A;
  --blue-light:#3B82F6;
  --blue-sky:#60A5FA;
  --ink:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
  --page-bg:#F8FAFC;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  font-family:'Sarabun',sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  margin:0;
  overflow-x:hidden;
}

/* ---- Material Symbols ---- */
.ms{
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-size:18px;
  line-height:1;
  display:inline-block;
  white-space:nowrap;
}

/* ---- Gradient helpers (blue) ---- */
.gx{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 45%,#1E3A8A 100%);
}
.gx-text{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#1E3A8A 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---- Glassmorphism header ---- */
.glass{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(226,232,240,.9);
}

/* ---- Square 1:1 images ---- */
.sq{
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

/* ---- Eyebrow ---- */
.eyebrow{ display:inline-block; }

/* ---- Reveal on scroll ---- */
[data-reveal],.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
[data-reveal].in,.reveal.in{
  opacity:1;
  transform:none;
}
.reveal.d1{ transition-delay:.05s; }
.reveal.d2{ transition-delay:.15s; }
.reveal.d3{ transition-delay:.25s; }
.reveal.d4{ transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal],.reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- Balance text ---- */
.text-balance{ text-wrap:balance; }

/* ---- Chips (service areas) ---- */
.chip{
  transition:all .2s ease;
  border:1px solid var(--line);
}
.chip:hover{
  background:var(--blue-deep);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(37,99,235,.6);
  border-color:transparent;
}

/* ---- FAQ ---- */
.faq summary{ cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ms{ transition:transform .3s ease; }
.faq[open] summary .ms{ transform:rotate(180deg); }

/* ---- Buttons: subtle lift ---- */
a.gx,button.gx,
a[href^="tel:"],a[href*="line.me"]{
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
a.gx:hover,button.gx:hover{ filter:brightness(1.05); transform:translateY(-2px); }

/* ---- Floating contact bar (mobile) ---- */
.float-bar{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:60;
  display:flex;
  gap:0;
  box-shadow:0 -6px 24px rgba(15,23,42,.14);
}
.float-bar a{
  flex:1;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}
@media (min-width:1024px){ .float-bar{ display:none; } }
body{ padding-bottom:56px; }
@media (min-width:1024px){ body{ padding-bottom:0; } }

/* ---- Calculator result box ---- */
#calcResult{
  background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%);
  border:1px solid #BFDBFE;
  border-radius:1.25rem;
  padding:20px;
  text-align:center;
}
#calcResult .price{
  font-family:'Kanit',sans-serif;
  font-weight:800;
  font-size:1.75rem;
  color:var(--blue-dark);
}

/* ---- Utility for smooth image loading ---- */
img{ background:#EEF2F7; }

/* placeholder styling for images while/if external source is unavailable */
img{ background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:transparent; font-size:0; }
img.sq{ min-height:60px; }