/* ===================================================================
   JunkAway · รับขนขยะไปทิ้ง ขนของเก่า เคลียร์บ้าน
   style.css — Premium Brown Theme
=================================================================== */

:root{
  --brown:#92400E;
  --brown-deep:#78350F;
  --brown-dark:#451A03;
  --brown-light:#B45309;
  --brown-sky:#D9A066;
  --ink:#2A211A;
  --muted:#7C6F64;
  --line:#EAE0D5;
  --page-bg:#FAF7F2;
}

*{ -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 (brown) ---- */
.gx{
  background:linear-gradient(135deg,#B45309 0%,#92400E 45%,#78350F 100%);
}
.gx-text{
  background:linear-gradient(135deg,#B45309 0%,#92400E 55%,#78350F 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---- Glassmorphism header ---- */
.glass{
  background:rgba(250,247,242,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(234,224,213,.9);
}

/* ---- Square 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 (service areas) ---- */
.chip{ transition:all .2s ease; border:1px solid var(--line); }
.chip:hover{
  background:var(--brown-deep);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(146,64,14,.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(42,33,26,.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,#FFF7ED 0%,#FDE9CE 100%);
  border:1px solid #F5D9B0;
  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(--brown-dark);
}

/* ---- Image placeholder (renders as warm block if external image not yet loaded) ---- */
img{ background:linear-gradient(135deg,#FFF7ED,#FDE9CE); color:transparent; font-size:0; }
img.sq{ min-height:60px; }