/* ==========================================================
   TH Social V87 — White + Blue UI Phase 1
   Goal: mobile-first, simple, readable, low-computer-literacy friendly
   ========================================================== */
:root{
  --v87-blue:#1677ff;
  --v87-blue-strong:#075fd7;
  --v87-blue-soft:#eef6ff;
  --v87-blue-line:#cfe4ff;
  --v87-ink:#172033;
  --v87-muted:#68758a;
  --v87-bg:#f7faff;
  --v87-card:#ffffff;
  --v87-line:#e3ebf5;
  color:var(--v87-ink);
  background:var(--v87-bg);
}
html,body{background:var(--v87-bg)!important;color:var(--v87-ink)!important}
body{background:linear-gradient(180deg,#fff 0,#f7faff 240px,#f7faff 100%)!important}

/* Header */
.siteHeaderV87{
  height:72px;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid var(--v87-blue-line)!important;
  box-shadow:0 3px 18px rgba(48,104,170,.06);
  backdrop-filter:blur(14px);
  padding:0 max(24px,5vw)!important;
  gap:24px!important;
}
.brandV87{gap:9px!important}
.brandV87 .logoMark{width:38px;height:38px;filter:none!important}
.brandNameV87{font-size:17px;font-weight:900;color:#156ddd;white-space:nowrap;letter-spacing:-.2px}
.mainNavV87{gap:4px!important;align-items:center}
.mainNavV87 button{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#536177!important;
  font-weight:750;
  border-radius:999px!important;
  padding:10px 15px!important;
  min-height:42px;
}
.mainNavV87 button:hover{background:var(--v87-blue-soft)!important;color:var(--v87-blue-strong)!important}
.mainNavV87 button.active{
  background:var(--v87-blue)!important;
  color:#fff!important;
  border-color:var(--v87-blue)!important;
  box-shadow:0 7px 18px rgba(22,119,255,.20);
}
#accountArea{gap:8px!important}
#accountArea .outlineBtn{
  background:#fff!important;color:var(--v87-blue-strong)!important;border:1px solid #a9d0ff!important;
  min-height:42px;border-radius:999px!important;font-weight:800;
}
#accountArea .primary,.headerSellerBtn{
  background:linear-gradient(135deg,#1677ff,#0796e9)!important;
  color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;
  min-height:42px;box-shadow:0 7px 18px rgba(22,119,255,.17)!important;
}
#accountArea .chatNavBtn{
  background:#fff!important;color:#156ddd!important;border:1px solid #b9d8ff!important;
  box-shadow:none!important;border-radius:999px!important;min-height:42px;
}
.bellBtn{background:#fff!important;color:#156ddd!important;border-color:#b9d8ff!important}
.balance{background:#f2f8ff!important;color:#156ddd!important;border-color:#cfe4ff!important}
.avatarBtn{background:#fff!important;color:var(--v87-ink)!important;border:1px solid var(--v87-line)!important}

/* Common customer-facing surfaces */
main{color:var(--v87-ink)}
.hero{
  border-color:#dceaff!important;
  background:linear-gradient(125deg,#fff 0,#f2f8ff 55%,#e5f2ff 100%)!important;
  box-shadow:0 18px 55px rgba(57,105,160,.09);
}
.hero h1,.pageHead h1,.sectionTitle h2,.card h3,.panel h3{color:var(--v87-ink)!important}
.hero p,.muted,.sectionTitle span,.pageHead p{color:var(--v87-muted)!important}
.eyebrow,.cat{color:#1677ff!important;font-weight:850}
.heroBrand,.heroIconArt{filter:drop-shadow(0 15px 28px rgba(22,119,255,.15))!important}
.primary{
  background:linear-gradient(135deg,#1677ff,#0796e9)!important;
  color:#fff!important;border:0!important;box-shadow:0 9px 24px rgba(22,119,255,.18)!important;
}
.card,.panel,.walletCard,.order,.stats>div,.info>div,.categoryCard,.authCard,.profileShowcase{
  background:#fff!important;border-color:var(--v87-line)!important;color:var(--v87-ink)!important;
  box-shadow:0 8px 28px rgba(49,91,140,.055);
}
.card:hover,.categoryCard:hover{border-color:#9ccaff!important;box-shadow:0 12px 34px rgba(22,119,255,.10)!important}
.thumb,.miniThumb,.productImage{background:linear-gradient(145deg,#f4f8fd,#eaf3ff)!important;border-color:#dce9f8!important}
.pageHead input,.form input,.form select,.form textarea,input,select,textarea{
  background:#fff;color:var(--v87-ink);border-color:#d9e5f3;
}
.chips span,.badges span{background:#f4f8fd!important;border-color:#dbe7f3!important;color:#506078!important}
.empty{color:#7a879a!important;border-color:#cddbeb!important;background:#fff!important}
.price,.row b{color:#0b72e7!important}
.toast{background:#fff!important;border-color:#b8d7ff!important;color:var(--v87-ink)!important;box-shadow:0 18px 50px rgba(42,77,120,.18)!important}

/* Account dropdown stays readable on white theme */
.accountDropdown{background:#fff!important;border-color:#dce7f3!important;color:var(--v87-ink)!important;box-shadow:0 18px 55px rgba(25,55,95,.18)!important}
.accountDropdownHeader,.accountMiniStats,.accountMenuList{color:var(--v87-ink)!important}
.accountMenuBtn{color:var(--v87-ink)!important}
.accountMenuBtn:hover{background:#f2f7fd!important}
.accountMenuBtn small,.accountDropdownHeader span,.accountMiniStat span{color:#738096!important}

/* Auth is deliberately large/simple */
.authCard label{color:#42516a!important}
.authCard input{background:#fff!important;color:#172033!important;border:1px solid #cddceb!important;min-height:48px}
.authSwitch{color:#68758a!important}
.authSwitch button{color:#126edc!important}

/* Mobile: usable, not desktop squeezed onto phone */
@media(max-width:768px){
  .siteHeaderV87{
    grid-template-columns:auto 1fr auto!important;
    grid-template-areas:"logo spacer account" "nav nav nav"!important;
    min-height:108px!important;
    padding:8px 10px 7px!important;
    gap:7px 8px!important;
    position:sticky!important;
  }
  .brandV87 .logoMark{width:34px!important;height:34px!important}
  .brandNameV87{font-size:14px}
  .mainNavV87{
    width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    overflow:visible!important;gap:6px!important;
  }
  .mainNavV87 button{
    width:100%;min-height:42px!important;padding:8px 6px!important;
    font-size:12px!important;white-space:nowrap!important;
  }
  #accountArea .outlineBtn,#accountArea .primary{min-height:38px!important;padding:7px 10px!important}
  #accountArea:not(:has(.avatarMenuWrap)) .outlineBtn,#accountArea:not(:has(.avatarMenuWrap)) .primary{font-size:11px!important}
  .hero{padding:28px 20px!important;min-height:0!important;border-radius:20px!important;grid-template-columns:1fr!important}
  .hero h1{font-size:36px!important}
  .hero p{font-size:15px!important;line-height:1.65}
  .heroArt{display:none!important}
  main{width:min(94vw,1180px)!important;margin-top:18px!important}
}
@media(max-width:430px){
  .brandNameV87{display:none}
  .siteHeaderV87{grid-template-columns:38px 1fr auto!important}
  #accountArea:not(:has(.avatarMenuWrap)) .outlineBtn,#accountArea:not(:has(.avatarMenuWrap)) .primary{padding:7px 9px!important}
}
@media(max-width:360px){
  .mainNavV87 button{font-size:11px!important;padding:7px 4px!important}
  #accountArea:not(:has(.avatarMenuWrap)) .outlineBtn{display:none!important}
}

/* ==========================================================
   TH Social V92 — Strong Blue Hero
   Darker, high-contrast hero inspired by bold blue marketplace banners.
   Right-side laptop visual removed; copy is rebalanced for clarity.
   ========================================================== */
.heroV89{
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  padding:68px 64px 64px!important;
  min-height:390px!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 86% 18%,rgba(48,175,255,.38),transparent 25%),
    radial-gradient(circle at 72% 78%,rgba(0,213,255,.18),transparent 26%),
    linear-gradient(128deg,#052a72 0%,#0757c9 47%,#0a84ef 100%)!important;
  box-shadow:0 22px 50px rgba(4,62,145,.24)!important;
}
.heroV89:before{
  content:"";position:absolute;right:-95px;top:-130px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 36px rgba(255,255,255,.035),0 0 0 80px rgba(255,255,255,.02);
  pointer-events:none;
}
.heroV89:after{
  content:"";position:absolute;right:70px;bottom:36px;width:300px;height:180px;border-radius:32px;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.14);transform:rotate(-8deg);pointer-events:none;
}
.heroV89Copy{position:relative;z-index:2;max-width:850px}
.heroV89Kicker{
  display:inline-flex;align-items:center;min-height:34px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:900;margin-bottom:18px;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)
}
.heroV89 h1{
  margin:0 0 20px!important;font-size:clamp(48px,5.7vw,78px)!important;line-height:1.02!important;
  letter-spacing:-1.7px!important;color:#fff!important;text-shadow:0 6px 24px rgba(0,31,83,.18)
}
.heroV89Copy>p{
  max-width:760px;font-size:18px!important;line-height:1.8!important;margin:0!important;color:rgba(255,255,255,.88)!important
}
.heroV89Copy>p b{color:#fff!important}
.heroV89Actions{display:flex;align-items:center;margin-top:30px}
.heroV89Primary{
  min-height:54px!important;padding:0 26px!important;border-radius:15px!important;font-size:16px!important;font-weight:900!important;
  background:#fff!important;color:#0868d7!important;border:0!important;box-shadow:0 14px 28px rgba(0,35,92,.24)!important
}
.heroV89Primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(0,35,92,.3)!important}
.heroV89Note{margin-top:17px;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6;max-width:700px}
.heroV89Visual,.heroV89Highlights,.heroV89Secondary,.heroV89Guide{display:none!important}

@media(max-width:768px){
  .heroV89{padding:38px 24px 36px!important;min-height:0!important;border-radius:24px!important}
  .heroV89:before{right:-170px;top:-145px;width:340px;height:340px}
  .heroV89:after{right:-100px;bottom:-70px;width:260px;height:160px;opacity:.7}
  .heroV89 h1{font-size:42px!important;line-height:1.06!important;letter-spacing:-1px!important}
  .heroV89Copy>p{font-size:15.5px!important;line-height:1.72!important}
  .heroV89Actions{display:grid;grid-template-columns:1fr;margin-top:24px}
  .heroV89Primary{width:100%!important;min-height:54px!important}
  .heroV89Kicker{font-size:13px}
}
@media(max-width:430px){
  .heroV89{padding:30px 18px 28px!important;border-radius:20px!important}
  .heroV89 h1{font-size:36px!important}
  .heroV89Note{font-size:13px}
}

/* ==========================================================
   TH Social V93 — Header member actions matched to strong-blue theme
   ========================================================== */
#accountArea{gap:9px!important;align-items:center!important}

#accountArea .balance{
  position:relative;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#eef6ff,#e2efff)!important;
  border:1px solid #bfd9ff!important;
  color:#0b5ecf!important;
  font-weight:900!important;
  box-shadow:0 6px 18px rgba(26,104,210,.10)!important;
}
#accountArea .balance:before{
  content:"฿";
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#0a54c7,#1499ff);
  color:#fff;font-size:12px;font-weight:950;
  box-shadow:0 5px 12px rgba(13,100,218,.20);
}

#accountArea .headerSellerBtn{
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0a51c2 0%,#0d7be8 58%,#16a4ff 100%)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 8px 20px rgba(10,83,194,.22)!important;
}
#accountArea .headerSellerBtn:hover{transform:translateY(-1px);filter:brightness(1.03)}

#accountArea .chatNavBtn{
  min-height:42px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #9fcaff!important;
  color:#0a5ac8!important;
  font-weight:900!important;
  box-shadow:0 6px 18px rgba(22,102,210,.09)!important;
}
#accountArea .chatNavBtn:hover{background:#eef6ff!important;border-color:#63a8ff!important}
#accountArea .chatNavBtn.hasUnread{box-shadow:0 0 0 3px rgba(45,139,255,.12),0 7px 18px rgba(22,102,210,.12)!important}
#accountArea .chatNavBadge{
  background:#ff4d68!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 10px rgba(220,48,74,.24)!important;
}

#accountArea .bellBtn{
  width:42px!important;height:42px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ffffff,#f3f8ff)!important;
  border:1px solid #9fcaff!important;
  color:#0a5ac8!important;
  box-shadow:0 6px 18px rgba(22,102,210,.09)!important;
  transition:.18s ease;
}
#accountArea .bellBtn:hover{background:#eaf4ff!important;border-color:#5ba3ff!important;transform:translateY(-1px)}
#accountArea .bellBtn.hasUnread{box-shadow:0 0 0 3px rgba(255,191,38,.14),0 7px 18px rgba(22,102,210,.10)!important}
#accountArea .notifBadge{
  background:linear-gradient(135deg,#ffb020,#ff7a00)!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 10px rgba(255,142,0,.30)!important;
}

#accountArea .avatarBtn{
  width:42px!important;height:42px!important;min-width:42px!important;
  padding:2px!important;
  border-radius:50%!important;
  border:2px solid #c9ddff!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(22,102,210,.13)!important;
  overflow:visible!important;
}
#accountArea .avatarBtn:hover{border-color:#5ba3ff!important;transform:translateY(-1px)}
#accountArea .avatarBtn .avatarImg{
  width:34px!important;height:34px!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#0b5bd3,#1ca7ff)!important;
  color:#fff!important;
  overflow:hidden!important;
}
#accountArea .avatarBtn .avatarDot{
  width:10px!important;height:10px!important;
  right:-1px!important;bottom:0!important;
  background:#22c55e!important;
  border:2px solid #fff!important;
}

/* Dropdown palette follows the new customer-facing theme */
#accountArea .accountDropdown{
  background:#fff!important;
  border:1px solid #d8e7f9!important;
  box-shadow:0 22px 55px rgba(28,72,125,.18)!important;
}
#accountArea .accountDropdownArrow{background:#fff!important;border-color:#d8e7f9!important}
#accountArea .accountDropdownAvatar{background:linear-gradient(135deg,#0b5bd3,#1ca7ff)!important}
#accountArea .accountMiniStat{background:#f3f8ff!important;border-color:#dce9f8!important}
#accountArea .accountMenuBtn{background:#fff!important;border-color:#e1eaf5!important;color:#172033!important}
#accountArea .accountMenuBtn:hover{background:#eef6ff!important;border-color:#a8cfff!important}
#accountArea .accountMenuBtn .menuIcon{background:#eef6ff!important;border-color:#d7e8fb!important}

@media(max-width:768px){
  #accountArea{gap:6px!important}
  #accountArea .headerSellerBtn,#accountArea .chatNavBtn{padding:0 10px!important;min-height:38px!important}
  #accountArea .bellBtn,#accountArea .avatarBtn{width:38px!important;height:38px!important;min-width:38px!important}
  #accountArea .avatarBtn .avatarImg{width:30px!important;height:30px!important}
}