/* Nationwide province enquiry directory v1.0.9.
   Progressive enhancement: all 77 provinces remain in server-rendered HTML. */
main .province-directory {
  padding-block: clamp(30px, 4.7vw, 68px);
  background: linear-gradient(180deg, rgba(250,248,244,.12), rgba(250,248,244,.38));
  scroll-margin-top: 94px;
}
main .province-directory__shell {
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  width: calc(100% - var(--site-side-gap, 20px) * 2);
  max-width: var(--site-content-max, 1180px);
  margin-inline: auto;
  padding: clamp(19px, 3.1vw, 38px);
  border: 1px solid #e0e6ee;
  border-radius: clamp(21px, 2.7vw, 30px);
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 65%, #fff 100%);
  box-shadow: 0 18px 54px rgba(17,40,72,.085), inset 0 1px rgba(255,255,255,.98);
  font-family: "Noto Sans Thai", "Prompt", "Sarabun", system-ui, sans-serif;
}
main .province-directory * { box-sizing: border-box; }
main .province-directory__masthead {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(12px, 3vw, 34px);
  padding: clamp(16px, 3.7vw, 38px);
  border-radius: 23px;
  background: radial-gradient(circle at 93% 12%, rgba(246,187,100,.16), transparent 40%), linear-gradient(125deg,#081c35 0%,#103761 100%);
  color: #e5edf9;
  box-shadow: 0 12px 29px rgba(12,42,81,.14);
}
main .province-directory__heading { min-width: 0; }
main .province-directory__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #f6c686;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .085em;
}
main .province-directory__eyebrow span { font-size: 1rem; }
main .province-directory__heading h2 {
  margin: 0;
  max-width: 830px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 950;
  line-height: 1.28;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
main .province-directory__heading h2 span { color: #f4c47a; }
main .province-directory__heading p {
  margin: 13px 0 0;
  max-width: 820px;
  color: #c4d4e9;
  font-size: .95rem;
  line-height: 1.83;
}
main .province-directory__heading p strong { color: #fff1d6; }
main .province-directory__badge {
  display: grid;
  place-items: center;
  width: clamp(100px, 12vw, 142px);
  min-height: 130px;
  padding: 16px 8px;
  border: 1px solid rgba(252,209,149,.36);
  border-radius: 22px;
  background: linear-gradient(135deg,rgba(248,183,91,.17),rgba(255,255,255,.035));
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}
main .province-directory__badge strong { color: #ffcf87; line-height: 1; font-size: clamp(2.45rem, 5vw, 4rem); font-weight: 950; }
main .province-directory__badge span { color: #fff; font-weight: 900; font-size: 1rem; }
main .province-directory__badge small { color: #bacce2; font-size: .74rem; }
main .province-directory__process {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
  padding: clamp(15px,2vw,23px) 0;
  border-bottom: 1px solid #e7ebf0;
}
main .province-directory__process > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #425e7e;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.5;
}
main .province-directory__process b {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #f1ddbf;
  background: #fff8eb;
  color: #a06b2b;
  font-size: .75rem;
}
main .province-directory__tools { padding: clamp(18px,2.5vw,29px) 0 18px; }
main .province-directory__tools > label { display: flex; align-items: center; gap: 8px; color: #163960; font-weight: 900; font-size: 1.05rem; margin-bottom: 10px; }
main .province-directory__tools > label span { color: #bf812b; font-size: 1.6rem; line-height: 1; }
main .province-directory__search-wrap { display:flex; align-items:center; min-width:0; border:1px solid #d8e0e9; border-radius:15px; box-shadow:0 7px 18px rgba(24,55,89,.035); overflow:hidden; background:#fff; }
main .province-directory__search { display:block; min-width:0; flex:1 1 auto; width:100%; margin:0; padding:13px 17px; border:0; background:transparent; color:#102b50; font-family:inherit; font-size:.95rem; line-height:1.5; outline:none; }
main .province-directory__search-wrap:focus-within { border-color: #e7a749; box-shadow: 0 0 0 3px rgba(239,167,65,.14); }
main .province-directory__count { flex:0 0 auto; padding:0 16px; font-size:.79rem; font-weight:850; color:#386387; white-space:nowrap; }
main .province-directory__tools > p { margin:9px 0 0; color:#73859c; font-size:.78rem; line-height:1.72; }
main .province-directory__quick { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:14px; }
main .province-directory__quick > span { font-size:.76rem; color:#667f9b; font-weight:800; margin-right:4px; }
main .province-directory__quick-btn { appearance:none; border:1px solid #dfe6ef; background:#f5f8fb; color:#345677; border-radius:999px; padding:6px 11px; font-family:inherit; font-size:.8rem; font-weight:800; line-height:1.3; cursor:pointer; transition:border-color .18s, background .18s; }
main .province-directory__quick-btn:hover { border-color:#e4b76e; background:#fff8ed; }
main .province-directory__groups { display:grid; gap:10px; }
main .province-directory__region {
  min-width:0;
  border:1px solid #e0e7ef;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 16px rgba(20,49,84,.035);
}
main .province-directory__region[open] { border-color:#d2deeb; box-shadow:0 12px 23px rgba(20,49,84,.055); }
main .province-directory__region[hidden], main .province-directory__city[hidden] { display:none !important; }
main .province-directory__region summary { display:flex; align-items:center; gap:11px; cursor:pointer; list-style:none; padding:14px 16px; color:#16385e; font-size:.94rem; font-weight:800; }
main .province-directory__region summary::-webkit-details-marker { display:none; }
main .province-directory__region-marker { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:11px; color:#b87e28; background:#fff5e6; border:1px solid #f7e5c9; font-size:1.1rem; }
main .province-directory__region summary strong { flex:1 1 auto; min-width:0; line-height:1.4; overflow-wrap:anywhere; }
main .province-directory__region-count { flex:0 0 auto; white-space:nowrap; color:#7188a3; font-size:.76rem; font-weight:800; }
main .province-directory__chevron { font-size:1.45rem; line-height:1; color:#c18a3f; transition:transform .2s; }
main .province-directory__region[open] .province-directory__chevron { transform:rotate(180deg); }
main .province-directory__cities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:9px; padding:0 14px 14px; }
main .province-directory__city {
  appearance:none; text-align:left; display:flex; align-items:center; min-width:0; gap:9px;
  margin:0; padding:11px 12px; min-height:66px;
  color:#19375b; border-radius:13px; border:1px solid #e3e9f1;
  background:linear-gradient(180deg,#fff,#f9fbfe);
  box-shadow:0 3px 9px rgba(19,45,75,.025);
  cursor:pointer;
  font-family:inherit;
  transition:transform .15s, border-color .15s, box-shadow .15s, background .15s;
}
main .province-directory__city:hover { transform:translateY(-2px); border-color:#deb77d; background:#fffaf2; box-shadow:0 8px 16px rgba(30,53,84,.07); }
main .province-directory__city[aria-pressed="true"] { border-color:#b97722; background:#fff5e5; box-shadow:inset 0 0 0 1px rgba(199,131,38,.13); }
main .province-directory__city:focus-visible, main .province-directory button:focus-visible, main .province-directory a:focus-visible, main .province-directory summary:focus-visible { outline:3px solid #efaa49; outline-offset:2px; }
main .province-directory__city-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:10px; background:#edf3f9; color:#2f6393; font-size:.9rem; }
main .province-directory__city[aria-pressed="true"] .province-directory__city-icon { background:#173b61; color:#fff; }
main .province-directory__city-copy { display:block; min-width:0; flex:1 1 auto; }
main .province-directory__city strong { display:block; min-width:0; overflow-wrap:anywhere; color:#17375e; font-weight:850; font-size:.85rem; line-height:1.38; }
main .province-directory__city small { display:block; margin-top:4px; color:#7288a2; font-size:.71rem; line-height:1.38; overflow-wrap:anywhere; }
main .province-directory__no-results { padding:14px 16px; border-radius:12px; background:#fef6ea; border:1px solid #f2d4a5; color:#805523; font-weight:750; }
main .province-directory__enquiry { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr); gap:24px; align-items:center; margin-top:21px; padding:clamp(19px,2.5vw,27px); border-radius:20px; background:linear-gradient(135deg,#122f50,#0c213c); border:1px solid rgba(244,199,125,.17); box-shadow:0 12px 27px rgba(16,43,78,.12); }
main .province-directory__enquiry-copy, main .province-directory__enquiry-actions { min-width:0; }
main .province-directory__enquiry-kicker { color:#f2c68b; letter-spacing:.09em; font-size:.73rem; font-weight:850; }
main .province-directory__enquiry-copy h3 { margin:7px 0 9px; font-size:clamp(1.2rem,2vw,1.53rem); color:#fff; line-height:1.43; overflow-wrap:anywhere; }
main .province-directory__enquiry-copy p { color:#c3d2e4; font-size:.88rem; line-height:1.78; margin:0; }
main .province-directory__enquiry-copy .province-directory__caution { margin-top:10px; color:#f4d0a2; font-size:.77rem; }
main .province-directory__enquiry-actions { display:grid; gap:8px; }
main .province-directory__cta { display:flex; align-items:center; justify-content:center; gap:8px; min-height:41px; padding:9px 13px; border-radius:11px; text-align:center; color:#fff; font-size:.9rem; font-weight:850; text-decoration:none; transition:opacity .2s; }
main .province-directory__cta:hover { opacity:.87; text-decoration:none; }
main .province-directory__cta--line { color:#071c13; background:#38cd77; }
main .province-directory__cta--call { border:1px solid rgba(255,255,255,.29); color:#fff; background:rgba(255,255,255,.1); }
main .province-directory__copy { appearance:none; border:1px solid rgba(246,202,138,.33); border-radius:11px; padding:10px 12px; color:#f3d2a8; font-family:inherit; font-size:.85rem; font-weight:800; line-height:1.4; background:rgba(247,195,114,.07); cursor:pointer; }
main .province-directory__copy:hover { background:rgba(247,195,114,.18); }
main .province-directory__copy-message { min-height:0; color:#e7f5e9; font-size:.76rem; }
main .province-directory__guide { color:#e8c48c; font-size:.79rem; font-weight:800; line-height:1.55; text-align:center; }
main .province-directory__guide-body { margin-top:27px; border-top:1px solid #e5eaf0; padding:clamp(18px,2.6vw,28px) 0 0; }
main .province-directory__guide-intro > span { color:#ad741f; font-size:.76rem; letter-spacing:.06em; font-weight:900; }
main .province-directory__guide-intro h3 { margin:7px 0; color:#18385f; font-size:clamp(1.22rem,2.15vw,1.68rem); line-height:1.35; }
main .province-directory__guide-intro p { color:#5d728a; line-height:1.78; font-size:.9rem; }
main .province-directory__guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:19px 0 23px; }
main .province-directory__guide-grid > div { min-width:0; padding:17px; border-radius:13px; background:#f5f8fc; border:1px solid #e1e8f0; }
main .province-directory__guide-grid strong { display:block; color:#16395f; margin-bottom:8px; font-size:.95rem; }
main .province-directory__guide-grid p { margin:0; color:#526b87; font-size:.83rem; line-height:1.75; }
main .province-directory__faq h3 { color:#16395f; font-size:1.2rem; margin:0 0 10px; }
main .province-directory__faq details { border:1px solid #e0e7ee; border-radius:12px; margin:8px 0; padding:11px 14px; background:#fff; }
main .province-directory__faq summary { color:#24466f; font-weight:850; cursor:pointer; line-height:1.55; }
main .province-directory__faq details p { padding:8px 0 0; margin:0; color:#5d728a; font-size:.87rem; line-height:1.75; }
@media (max-width: 930px) {
  main .province-directory__cities { grid-template-columns:repeat(2,minmax(0,1fr)); }
  main .province-directory__enquiry { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 680px) {
  main .province-directory__shell { padding:14px; border-radius:20px; }
  main .province-directory__masthead { grid-template-columns:minmax(0,1fr); gap:15px; padding:21px 17px; border-radius:17px; }
  main .province-directory__heading h2 { font-size:clamp(1.52rem,6.5vw,2.2rem); }
  main .province-directory__heading p { font-size:.86rem; line-height:1.73; }
  main .province-directory__badge { width:auto; min-height:0; display:flex; align-items:baseline; justify-content:center; gap:9px; padding:9px 11px; border-radius:13px; }
  main .province-directory__badge strong { font-size:1.75rem; }
  main .province-directory__badge span { font-size:.86rem; }
  main .province-directory__badge small { font-size:.72rem; }
  main .province-directory__process { grid-template-columns:minmax(0,1fr); padding:15px 0; gap:8px; }
  main .province-directory__process > span { font-size:.81rem; }
  main .province-directory__process b { width:28px; height:28px; flex-basis:28px; }
  main .province-directory__tools { padding-top:19px; }
  main .province-directory__tools > label { font-size:.97rem; }
  main .province-directory__count { padding:0 9px; font-size:.72rem; }
  main .province-directory__search { padding:12px; font-size:.86rem; }
  main .province-directory__quick > span { width:100%; }
  main .province-directory__region summary { padding:11px 10px; gap:8px; font-size:.82rem; }
  main .province-directory__region-marker { width:27px; height:27px; flex-basis:27px; }
  main .province-directory__region-count { font-size:.68rem; }
  main .province-directory__cities { grid-template-columns:minmax(0,1fr); padding:0 10px 10px; gap:7px; }
  main .province-directory__city { min-height:56px; padding:9px 11px; }
  main .province-directory__city strong { font-size:.87rem; }
  main .province-directory__city small { font-size:.73rem; }
  main .province-directory__enquiry { padding:18px 15px; border-radius:16px; }
  main .province-directory__guide-grid { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { main .province-directory__city, main .province-directory__cta { transition:none; } }
/* The directory contains its own LINE / phone actions: avoid double floating
   overlays that otherwise cover province buttons on narrow screens. */
@media (max-width:720px) {
  body.province-directory-active .floating-cta {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
  }
  body .floating-cta { transition:opacity .2s ease, transform .2s ease, visibility .2s ease; }
}