/* ===================================================================
   CompleteEvent · เช่าอุปกรณ์จัดงาน งานอีเวนต์ งานแต่งงาน
   style.css — Premium Blue Theme
=================================================================== */
:root{
  --blue:#2563EB; --blue-deep:#1D4ED8; --blue-dark:#1E3A8A; --blue-light:#3B82F6;
  --sky:#0EA5E9; --sky-deep:#0284C7;
  --ink:#0E1B33; --muted:#5A6B85; --line:#DDE7F2; --page-bg:#F6FAFF;
}
*{ -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; }

/* Icons (emoji) */
.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 (tech blue) */
.gx{ background:linear-gradient(135deg,#38BDF8 0%,#2563EB 48%,#1E3A8A 100%); }
.gx-text{ background:linear-gradient(135deg,#38BDF8 0%,#2563EB 55%,#1D4ED8 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* Glass header */
.glass{ background:rgba(246,250,255,.8); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid rgba(221,231,242,.9); }

/* 1:1 images */
.sq{ aspect-ratio:1/1; object-fit:cover; display:block; }
.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; } }
.text-balance{ text-wrap:balance; }

/* Chips */
.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); }
a.gx,button.gx{ 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(14,27,51,.16); }
.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 */
#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); }

/* Image placeholder (blue tint while external image loads) */
img{ background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:transparent; font-size:0; }
img.sq{ min-height:60px; }