.ww-est.wrap{max-width:1100px;margin:0 auto}
/* Desktop ขึ้นไป */
@media (min-width: 981px){
  .ww-hero{
    display:block;
    width:fit-content;
    min-width:420px;
    margin:8px auto 18px;
    padding:12px 34px;
    border-radius:14px;
    background:#0d47a1;
    color:#fff;
    font-weight:800;
    font-size:2.1rem;
    text-align:center;
  }
}

/* มือถือ/แท็บเล็ต */
@media (max-width: 980px){
  .ww-hero{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:12px 0 16px;        /* ไม่ใช้ auto เพื่อไม่ล้น */
    padding:12px 16px;
    border-radius:12px;
    background:#0d47a1;
    color:#fff;
    font-weight:800;
    font-size:1.9rem;          /* เล็กลงนิดให้พอดีจอ */
    text-align:center;
    box-sizing:border-box;
  }
}

.ww-hero.alt{background:#0d47a1}
.ww-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ww-card{background:#ffffffcc;border:1px solid #e7e7e7;border-radius:16px;padding:18px}
.ww-badge{display:block;width:fit-content;min-width:220px;text-align:center;margin:0 auto 12px;background:#0d47a1;color:#fff;padding:10px 20px;border-radius:12px;font-weight:800}
.ww-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ww-label{font-weight:700}
.ww-field input,.ww-field select{padding:14px 16px;border:1px solid #d9d9d9;border-radius:28px;width:100%;background:#fff}
.ww-note{color:#222}
.ww-center{text-align:center}
.ww-progress{position:relative;list-style:none;margin:18px 0 8px;padding:26px 0 0;display:flex}
.ww-progress::before{content:'';position:absolute;left:0;right:0;top:26px;height:4px;background:#e1e5ee;border-radius:4px}
.ww-progress li{flex:1;display:flex;flex-direction:column;align-items:center;color:#8a90a2;font-weight:700}
.ww-progress li:first-child{align-items:flex-start}
.ww-progress li:last-child{align-items:flex-end}
.ww-progress .dot{width:26px;height:26px;border-radius:999px;background:#e1e5ee;display:inline-block;position:relative;z-index:1;border:3px solid #fff;box-shadow:0 0 0 3px #e1e5ee}
.ww-progress li.done{color:#0d47a1}
.ww-progress li.done .dot{background:#0d47a1;box-shadow:0 0 0 3px #0d47a133}
.ww-progress .lbl{display:block;margin-top:10px}
.ww-btn{padding:14px 26px;border-radius:28px;border:0;font-weight:800;cursor:pointer}
.ww-btn-green{background:#10b981;color:#fff}
.ww-btn-grey{background:#e5e7eb;color:#6b7280;cursor:not-allowed}
.ww-quote,.ww-footnote{color:#222;text-align:center;margin:8px 0 18px;font-size:1.15rem}
.ww-footnote{margin-top:22px}
.ww-pill{display:grid;grid-template-columns:minmax(260px,1fr) auto auto auto auto;align-items:center;gap:24px;background:#0d47a1;color:#fff;padding:20px 28px;border-radius:18px;margin:22px 0}
.ww-pill .title{font-weight:800;font-size:1.25rem}
.ww-pill .num{font-weight:400;font-size:1.6rem;letter-spacing:.3px;white-space:nowrap}
.ww-pill .sep{font-weight:800;font-size:1.2rem;opacity:.95}
.ww-pill .unit{font-weight:800;font-size:1.2rem;white-space:nowrap}
@media(max-width:980px){.ww-grid2{grid-template-columns:1fr}.ww-pill{grid-template-columns:1fr;text-align:center;gap:8px}}


/* --- v1.6.3: stronger specificity & centering fixes --- */
.ww-est .ww-hero { margin-left:auto; margin-right:auto; text-align:center }
.ww-est .ww-badge { margin-left:auto; margin-right:auto; text-align:center }

/* ensure our submit button colors override theme/page builder */
.ww-est button#submitBtn.ww-btn-green { background:#10b981 !important; color:#fff !important; }
.ww-est button#submitBtn.ww-btn-grey  { background:#e5e7eb !important; color:#6b7280 !important; }

/* also handle generic elementor button class if injected */
.ww-est button#submitBtn.ww-btn-green.elementor-button { background:#10b981 !important; color:#fff !important; border-color:#10b981 !important; }
.ww-est button#submitBtn.ww-btn-grey.elementor-button  { background:#e5e7eb !important; color:#6b7280 !important; border-color:#e5e7eb !important; }



/* === v1.9.0 UI from PDF === */

/* Two-column layout; result on the right starting from top row */
.ww-est.wrap{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
.ww-est.wrap > .ww-hero,
.ww-est.wrap > .ww-grid2,
.ww-est.wrap > .ww-privacy,
.ww-est.wrap > .ww-progress,
.ww-est.wrap > .ww-free,
.ww-est.wrap > .ww-center,
.ww-est.wrap > #msg{ grid-column:1 !important; }
.ww-est.wrap > #result{ grid-column:2 !important; grid-row:1 / span 100 !important; align-self:start !important; }

/* Left container as a soft-blue card */
.ww-grid2{
  background:#eaf3ff !important;
  border:1px solid #cfe2ff !important;
  border-radius:16px !important;
  padding: 20px 24px !important;
}
.ww-grid2 > .ww-card{ background:transparent !important; border:0 !important; box-shadow:none !important; padding: 8px 10px !important; }

/* Headings */
.ww-hero{ font-size: 32px !important; font-weight:700 !important; text-align:center !important; color:#1b3b56 !important; margin:8px 0 18px !important; }
.ww-badge{ text-align:center !important; font-size: 20px !important; font-weight: 700 !important; color:#1b3b56 !important; padding: 6px 0 !important; }

/* Inputs */
.ww-field input, .ww-field select{
  background:#cfe1ff !important;
  border:1px solid #a8c4ea !important;
  border-radius:26px !important;
  padding:12px 16px !important;
}

/* Move + center notes */
.ww-privacy, .ww-free{ text-align:center !important; color:#243a55 !important; font-size:14px !important; font-weight:600 !important; margin: 10px 0 !important; }
/* Divider above progress */
.ww-progress{ margin-top:6px !important; padding-top:8px !important; border-top:1px solid #cfe2ff !important; }

/* Submit button pill grey-blue */
.ww-btn{ background:#d2e2f4 !important; color:#233f60 !important; border:1px solid #a8c4ea !important; border-radius:24px !important; padding:10px 24px !important; font-weight:700 !important; }

/* Result panel */
#result{ background:#ffffff !important; border:1px solid #cfe2ff !important; border-radius:18px !important; }
#result .ww-quote{ text-align:center !important; color:#2d4060 !important; font-weight:600 !important; margin: 2px 0 6px !important; }
#result .ww-tablehead{ margin:6px 18px 6px !important; padding-bottom:12px !important; border-bottom: 2px solid #bcd5f2 !important; }
#result .ww-tablehead .th-left, #result .ww-tablehead .th-right{ font-size: 18px !important; font-weight:700 !important; color:#1b3b56 !important; }
#result .ww-pill{ margin:0 18px 12px !important; padding:12px 0 !important; border-top:1px solid #bcd5f2 !important; }
#result .title, #result .sep, #result .unit{ font-size:16px !important; font-weight:600 !important; color:#1b3b56 !important; }
#result .num{ font-size:22px !important; font-weight:800 !important; color:#000 !important; }
/* Reset button look */
#mts_reset{ background:#d2e2f4 !important; color:#233f60 !important; border:1px solid #a8c4ea !important; border-radius:22px !important; padding:8px 18px !important; }



/* === v1.9.1: Left panel clean per user === */

/* Left container: white background, black text */
.ww-leftcard, .ww-grid2{
  background:#ffffff !important;
  border:1px solid #e0ecff !important;
  color:#000 !important;
}

/* Headings and labels on left in black */
.ww-leftcard .ww-hero,
.ww-leftcard .ww-badge,
.ww-leftcard .ww-label{
  color:#000 !important;
  background: transparent !important;
}

/* "ข้อมูลผู้ติดต่อ / รายละเอียดงาน" — no blue background */
.ww-badge{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
}

/* Inputs stay blue */
.ww-field input, .ww-field select{
  background:#cfe1ff !important;
  border:1px solid #a8c4ea !important;
  color:#000 !important;
}

/* Ensure left notes also black */
.ww-leftcard .ww-privacy, .ww-leftcard .ww-free{ color:#000 !important; }



/* === v1.9.2: LEFT panel polish to match provided mock === */

/* Panel shell: white, thin border, generous radius */
.ww-leftcard, .ww-grid2{
  background: #ffffff !important;
  border: 1px solid #dfe7f3 !important; /* softer than e0ecff */
  border-radius: 20px !important;
  padding: 22px 26px !important;
  color: #000 !important;
}

/* Headline + section headings */
.ww-hero{
  font-size: 34px !important;
  font-weight: 700 !important;
  color: #1b2e44 !important;
  text-align: center !important;
  margin: 6px 0 22px !important;
}
.ww-badge{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #1b2e44 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 4px 0 12px !important;
  padding: 0 !important;
}

/* Labels on left: bold black */
.ww-label{ color:#000 !important; font-weight: 800 !important; margin-bottom: 6px !important; }

/* Inputs: soft blue pills with darker outline and large radius */
.ww-field input, .ww-field select{
  background: #cfe1ff !important;
  border: 1px solid #9fb8da !important;
  color: #000 !important;
  border-radius: 28px !important;
  height: 50px !important;
  padding: 12px 18px !important;
}
.ww-field input::placeholder{ color:#4b6a8f !important; opacity:0.9 !important; }

/* Privacy + Free notes centered exactly */
.ww-privacy, .ww-free{
  text-align: center !important;
  width: 100% !important;
  margin: 10px 0 !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* Divider above progress like in mock */
.ww-progress{
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid #d2dcee !important;
}
/* progress labels darker */
.ww-progress .lbl{ color:#5c6c83 !important; font-weight:700 !important; }

/* Submit button: rounded grey-blue */
.ww-center .ww-btn, .ww-center button{
  background: #cfdff3 !important;
  border: 1px solid #a8c4ea !important;
  color: #153454 !important;
  border-radius: 26px !important;
  padding: 12px 28px !important;
  font-weight: 800 !important;
}



/* === v1.9.3: remove crossed items & internalize sections === */

/* Hide any small inline notes that were under each column */
.ww-grid2 .ww-note, .ww-grid2 .ww-disclaimer { display: none !important; }

/* Ensure single centered notes inside left card only */
.ww-leftcard .ww-privacy, .ww-leftcard .ww-free {
  display: block !important; text-align: center !important; margin: 10px 0 !important;
}
/* If any global privacy/free outside shows up, hide it */
.ww-est.wrap > .ww-privacy:not(.ww-leftcard *), .ww-est.wrap > .ww-free:not(.ww-leftcard *) { display:none !important; }

/* Remove any decorative top blue bar if present (pseudo elements or backgrounds) */
.ww-hero::before, .ww-hero::after { content:none !important; display:none !important; }
.ww-badge { background: transparent !important; box-shadow:none !important; border:0 !important; }

/* Left card spacing to include progress + submit inside */
.ww-leftcard { padding-bottom: 26px !important; }
.ww-leftcard .ww-progress { margin-bottom: 8px !important; }

/* Keep whole leftcard in left column */
.ww-leftcard{ grid-column:1 !important; grid-row:1 / span 100 !important; }



/* === v1.9.4: smaller/lighter section titles; restore texts; remove inner frame & progress line === */

/* Section headings "ข้อมูลผู้ติดต่อ / รายละเอียดงาน" — smaller & lighter */
.ww-badge{
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #000 !important;
  background: transparent !important;
  padding: 0 0 6px !important;
}

/* Main headline visible */
.ww-hero{ display:block !important; color:#000 !important; }

/* Privacy & Free notes centered and visible */
.ww-privacy, .ww-free{ display:block !important; text-align:center !important; color:#000 !important; font-weight:700 !important; }

/* Remove divider line above progress */
.ww-progress{ border-top: 0 !important; padding-top: 8px !important; }

/* Remove inner frame (the inner border box) */
.ww-grid2{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Keep outer left card styling */
.ww-leftcard{
  background:#fff !important;
  border:1px solid #dfe7f3 !important;
  border-radius:20px !important;
  padding:22px 26px 26px !important;
}



/* === v1.9.5: set field blue to #b4d7ff === */
.ww-field input, .ww-field select{
  background: #b4d7ff !important;
  border-color: #96c5ff !important;
}
.ww-field input:focus, .ww-field select:focus{
  border-color: #6aaefc !important;
  box-shadow: 0 0 0 3px rgba(106, 174, 252, .18) !important;
}

/* If there are any small help pills inside phone field, match the same blue */
.ww-field .ww-hint, .ww-field .help-pill, .ww-field .mini-pill{
  background: #b4d7ff !important;
  border-color: #96c5ff !important;
  color: #000 !important;
}



/* === v1.9.6: title black + privacy single line centered === */
.ww-hero{
  color:#000 !important;
  text-align:center !important;
  margin-top: 4px !important;
  margin-bottom: 18px !important;
}
.ww-privacy{
  text-align:center !important;
  display:block !important;
  margin: 10px auto 6px !important;
}
@media (min-width: 901px){
  .ww-privacy{ white-space: nowrap !important; }
}



/* === v1.9.7: show top title + center privacy exactly === */
.ww-hero{
  display:block !important;
  color:#000 !important;
  text-align:center !important;
  margin: 6px 0 18px !important;
}
.ww-privacy{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin: 10px auto 6px !important;
  white-space: nowrap !important; /* keep single line */
}
/* allow wrap on very small screens to avoid overflow */
@media (max-width: 420px){
  .ww-privacy{ white-space: normal !important; }
}



/* === v1.9.8: enforce centering + headings size/weight === */

/* Top title */
.ww-hero{
  color:#000 !important;
  font-size:34px !important;
  line-height:1.3 !important;
  text-align:center !important;
  display:block !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-top:6px !important;
  margin-bottom:18px !important;
}

/* Privacy note single-line & centered */
.ww-privacy{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin:10px auto 6px !important;
  white-space:nowrap !important;
}

/* Section headings: bigger but thinner (ตัวบาง) */
.ww-badge{
  font-size:22px !important;
  font-weight:500 !important; /* thinner */
  color:#000 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 0 8px !important;
}



/* === v1.9.9: lighter title, privacy perfectly centered, smaller progress labels === */

/* Top title — thinner (ตัวบางขึ้น) */
.ww-hero{
  font-weight: 500 !important; /* was 700/normal; now thinner */
}

/* Privacy note — center using flex to override any residual layout quirks */
.ww-privacy{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 10px auto 6px !important;
  width: 100% !important;
  white-space: nowrap !important;
}

/* Progress labels under the line — smaller and thin */
.ww-progress .lbl{
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6b7b91 !important;
}



/* === v1.9.10: strong centering for section heading + privacy line === */

/* Section headings inside the two cards */
.ww-leftcard .ww-grid2 .ww-card .ww-badge,
.ww-grid2 .ww-card .ww-badge,
.ww-leftcard .ww-badge,
.ww-badge{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Privacy text: force perfect centering */
.ww-leftcard .ww-privacy,
.ww-privacy{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  text-align:center !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  white-space:nowrap !important;
}



/* === v1.9.11: bulletproof centering for privacy line === */
.ww-leftcard .ww-privacy,
.ww-privacy{
  display:block !important;
  text-align:center !important;
  white-space:nowrap !important;
  width:max-content !important;     /* shrink to text width */
  margin-left:auto !important;       /* then center */
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  float:none !important;
  position:relative !important;
  left:0 !important;
  transform:none !important;
}
@media (max-width: 480px){
  .ww-leftcard .ww-privacy,
  .ww-privacy{ width:auto !important; white-space:normal !important; }
}

/* v1.9.12: when privacy sits between grid and progress, center across full width */
.ww-leftcard > .ww-privacy{ width: max-content !important; margin-left:auto !important; margin-right:auto !important; }



/* === v2.0.0: Result panel -> table look (white), remove blue bars === */
#result{
  background:#ffffff !important;
  border:1px solid #cfe2ff !important;
  border-radius:18px !important;
  padding-bottom: 14px !important;
  color:#000 !important;
}
#result *{ color:#000 !important; }

/* Header row: 'ช่วงเวลา | ค่าจ้างโดยประมาณ' */
#result .ww-tablehead{
  display:grid !important;
  grid-template-columns: 1fr max-content !important;
  align-items:center !important;
  margin: 8px 18px 8px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #dbe8ff !important;
}
#result .ww-tablehead .th-left,
#result .ww-tablehead .th-right{
  font-size:18px !important;
  font-weight:700 !important;
}

/* Each row (use existing .ww-pill as row container) */
#result .ww-pill{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid #dbe8ff !important;
  margin: 0 18px 12px !important;
  padding: 12px 0 !important;
}
#result .title{ font-size: 16px !important; font-weight:600 !important; }
#result .sep{ font-size: 16px !important; font-weight:600 !important; margin: 0 10px !important; }
#result .unit{ font-size: 16px !important; font-weight:600 !important; }
#result .num{ font-size:22px !important; font-weight:800 !important; font-variant-numeric: tabular-nums; }

/* Quote text centered beneath table */
#result .ww-quote{
  text-align:center !important;
  color:#000 !important;
  font-weight:700 !important;
  margin: 10px 16px 8px !important;
}

/* Reset blue button to grey-blue pill */
#result .mts-btn-outline, #result .ww-btn-outline, #mts_reset{
  background:#d2e2f4 !important;
  color:#233f60 !important;
  border:1px solid #a8c4ea !important;
  border-radius:22px !important;
  padding:8px 18px !important;
}



/* === v2.0.1: remove remaining blue header bar; grid 65/25 === */

/* Kill any blue background on the result title area */
#result h2, #result .ww-title, #result .card-header, #result .ww-cardtitle{
  background: transparent !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 8px 0 6px !important;
}
#result{ box-shadow: none !important; }

/* Layout: left 65%, right 25%, leave natural gap in between */
.ww-est.wrap{
  display:grid !important;
  grid-template-columns: 60% 40% !important;
  justify-content: space-between !important;
  align-items: start !important;
  column-gap: 24px !important;
}
/* Ensure left-card and result sit in intended columns */
.ww-leftcard{ grid-column: 1 !important; }
#result{ grid-column: 2 !important; }



/* v2.0.3: enforce 60/40 grid and remove any blue header bg in Result */
#result,
#result *{
  background-image: none !important;
}
#result .ww-header,
#result .header,
#result .card-header,
#result .titlebar,
#result .ww-title,
#result h2{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
  padding: 0 !important;
  margin: 8px 0 6px !important;
}



/* ===== UI 3 Overrides (2025-10-08) ===== */
.ww-est.wrap{
  max-width: 1280px;
}
.ww-grid2{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items:start;
}
@media(max-width: 980px){
  .ww-grid2{ grid-template-columns: 1fr; }
}
.ww-card{
  border-radius: 24px;
  border: 4px solid #bed8ff;
  background: #f3f9ff;
  box-shadow: 0 4px 12px rgba(13,71,161,.08);
  padding: 20px 24px 28px;
}
.ww-badge{
  display:inline-block;
  padding:8px 14px;
  background:#fff;
  border:2px solid #c7ddff;
  color:#0d47a1;
  border-radius:999px;
  font-weight:700;
  margin-bottom:12px;
}
.ww-field{
  margin: 12px 0 14px;
}
.ww-label{
  font-weight:700;
  margin-bottom:8px;
  color:#173a63;
}
.ww-field input, .ww-field select{
  width:100%;
  padding:16px 18px;
  border-radius:999px;
  border:2px solid #c7ddff;
  background:#dfeeff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 0 0 3px rgba(13,71,161,0);
  outline:none;
  transition: box-shadow .2s, border-color .2s, background .2s;
  font-size:16px;
}
.ww-field input:focus, .ww-field select:focus{
  border-color:#7fb2ff;
  background:#edf5ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(127,178,255,.35);
}
.ww-hero{
  background:#e8f2ff;
  color:#173a63;
  border:2px solid #c7ddff;
  font-weight:800;
  font-size: 28px;
  border-radius:16px;
}
.ww-hero.alt{
  background:#e8f2ff;
  color:#173a63;
}
/* Results panel look */
#result .ww-pill{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:2px solid #c7ddff;
  border-radius:16px; padding:14px 16px; margin:12px 0;
}
#result .title{ min-width: 88px; font-weight:700; color:#173a63; }
#result .num{ font-weight:800; font-size:22px; }
#result .sep{ opacity:.8; }
#result .unit{ margin-left:auto; color:#173a63; font-weight:700; }
.ww-quote{
  text-align:center; font-weight:700; color:#173a63;
}
.ww-footnote{
  text-align:center; color:#173a63;
}
/* Buttons */
.ww-btn{ border-radius:999px; padding:12px 26px; font-weight:800; letter-spacing:.3px; }
.ww-btn-grey{ background:#e0ebff; border:2px solid #bcd6ff; color:#0b2e57; }
.ww-btn-grey:hover{ background:#cfe3ff; }
#resetBtn.ww-btn{ background:#98bfff; border:2px solid #7fb2ff; color:#0b2e57; }
#resetBtn.ww-btn:hover{ filter:brightness(0.98); }
/* Centering small notes */
.ww-center{ text-align:center; }


/* ===== UI 3 — Round 2 tweaks (per user marks) ===== */
/* Left: main heading — no border line */
.ww-hero{ border: none !important; }

/* Remove the duplicate empty hero divider if any has height */
.ww-hero:empty{ display:none !important; height:0 !important; padding:0 !important; margin:0 !important; }

/* Inputs & selects color to #b4d7ff */
.ww-field input, .ww-field select{
  background: #b4d7ff !important;
  border-color: #b4d7ff !important;
}

/* Right: Result panel — remove background/border */
#result.ww-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 0.5rem;
}
#result .ww-hero.alt{
  background: transparent !important;
  border: none !important;
}

/* Quote thinner */
#result .ww-quote{
  font-weight: 400 !important;
}

/* Make numbers same weight & size as 'ถึง' */
#result .ww-pill{ font-size: 16px; }
#result .ww-pill .num{
  font-weight: 400 !important;
  font-size: inherit !important;
}


/* ===== UI 3 — Round 3 ===== */
/* Restore white background for result block */
#result.ww-card{
  background:#fff !important;
  border:none !important;
  box-shadow:none !important;
}

/* Header row inside result */
#result .ww-head{
  display:grid;
  grid-template-columns: 120px 1fr 60px;
  align-items:center;
  gap:12px;
  padding: 8px 10px 6px;
  border-bottom:2px solid #c7ddff;
  margin-top:4px;
  margin-bottom:8px;
  font-weight:700;
  color:#173a63;
}

/* Pill rows layout: left title, centered numbers, right unit */
#result .ww-pill{
  display:grid;
  grid-template-columns: 120px 1fr 60px;
  align-items:center;
  gap:12px;
  background: transparent;
  border-bottom:2px solid #c7ddff;
  border-radius:0;
  padding:14px 10px;
  margin:0;
}
#result .ww-pill:last-of-type{ border-bottom:2px solid #c7ddff; }

#result .ww-pill .title{ font-weight:700; color:#173a63; }
#result .ww-pill .nums{ text-align:center; }
#result .ww-pill .nums .num,
#result .ww-pill .nums .sep{ font-weight:400; font-size:16px; }
#result .ww-pill .unit{ text-align:right; font-weight:700; color:#173a63; }



/* ===== UI 3 — Round 4 ===== */
/* Remove all borders in the result table area */
#result .ww-head{ border: none !important; }
#result .ww-pill{ border: none !important; background: transparent !important; }

/* Keep numbers on a single line and centered as a block */
#result .ww-pill .nums{ 
  white-space: nowrap !important;
  text-align: center;
}

/* Let middle column take a bit more room so it won't wrap */
#result .ww-head,
#result .ww-pill{
  grid-template-columns: 110px 1.2fr 60px !important;
}

/* Optional: slightly larger internal max-width so the right card breathes more */
#result.ww-card{ max-width: 105%; }


/* ===== UI 3 — Round 5: exact column alignment ===== */
#result .grid5{ 
  display:grid;
  grid-template-columns: 130px 1fr 70px 1fr 70px; /* ช่วงเวลา | min | ถึง | max | บาท */
  align-items:center;
  gap: 12px;
}
#result .ww-head.grid5{
  font-weight:700; color:#173a63;
  padding: 8px 4px 6px;
  border-bottom: 2px solid #c7ddff;
}
#result .ww-head .c2{ grid-column: 2 / span 3; text-align:center; } /* ค่าจ้างโดยประมาณ ครอบ min-ถึง-max */
#result .ww-head .c1{ grid-column: 1; }
#result .ww-head .c5{ grid-column: 5; text-align:right; }

#result .ww-row{ padding: 14px 4px; border-bottom: 2px solid #c7ddff; }
#result .ww-row .title{ font-weight:700; color:#173a63; }
#result .ww-row .min, #result .ww-row .max{ text-align:center; white-space:nowrap; }
#result .ww-row .to{ text-align:center; }
#result .ww-row .unit{ text-align:right; font-weight:700; color:#173a63; }

/* Typography for numbers and 'ถึง/บาท' to match */
#result .ww-row .min, #result .ww-row .max, #result .ww-row .to, #result .ww-row .unit{
  font-weight:400; font-size:16px;
}


/* ===== UI 3 — Round 6 ===== */
/* Thin separators under header & each row */
#result .ww-head.grid5{
  border-bottom: 1px solid #cfe1ff !important;
}
#result .ww-row{
  border-bottom: 1px solid #cfe1ff !important;
  padding: 12px 4px !important;
}

/* Keep the last row with the same bottom rule for visual rhythm */
#result .ww-row:last-of-type{
  border-bottom: 1px solid #cfe1ff !important;
}

/* Make the quote smaller & force single line */
#result .ww-quote{
  font-size: 15px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
  margin-bottom: 10px;
}


/* ===== UI 3 — Round 7: numbers match 'ต่อวัน' label size/weight ===== */
#result .ww-row .title{
  font-size:16px !important;
  font-weight:700 !important;
}
#result .ww-row .num,
#result .ww-row .min,
#result .ww-row .max{
  font-size:16px !important;
  font-weight:700 !important;  /* match the label */
  line-height:1.3;
}
#result .ww-row .to{
  font-size:16px !important;
  font-weight:700 !important;
}
#result .ww-row .unit{
  font-size:16px !important;
  font-weight:700 !important;
}


/* ===== UI 3 — Round 8: keep inside card + tidy columns ===== */
#result.ww-card{
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}

#result .grid5{
  grid-template-columns: 120px 1fr 56px 1fr 44px !important; /* last col smaller so it never spills */
}
#result .ww-row .unit{ padding-right: 0; }

/* Ensure numbers shrink rather than overflow */
#result .ww-row .min, #result .ww-row .max{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep everything vertically tidy */
#result .ww-row{ padding: 12px 0 !important; }
#result .ww-head.grid5{ padding: 8px 0 6px !important; }



/* ===== UI 3 — Round 9: shift numbers left & enlarge quote ===== */
/* Make the 'ช่วงเวลา' column narrower so the min–ถึง–max block starts further left */
#result .grid5{
  grid-template-columns: 90px 1fr 56px 1fr 44px !important; /* was 120px ... */
  gap: 10px !important;
}

/* Slightly larger quote but keep one line */
#result .ww-quote{
  font-size: 17px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== UI 3 — Round 10: rows thin & black; extra spacing below quote ===== */
#result .ww-row .title,
#result .ww-row .min,
#result .ww-row .max,
#result .ww-row .to,
#result .ww-row .unit{
  color: #000 !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

/* Add more space under the quote */
#result .ww-quote{
  margin-bottom: 16px !important;
}


/* ===== UI 3 — Round 11: Blue SUBMIT button ===== */
#submitBtn.ww-btn{
  background: #2f6df6 !important;
  border: 2px solid #2158d9 !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
#submitBtn.ww-btn:hover{
  filter: brightness(0.97);
}
#submitBtn.ww-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}


/* ===== UI 3 — Round 12: force SUBMIT to blue even with theme overrides ===== */
.ww-est.wrap button#submitBtn.ww-btn,
.ww-est.wrap #submitBtn.ww-btn,
#submitBtn.ww-btn,
#submitBtn {
  background: #2f6df6 !important;
  background-image: none !important;
  border: 2px solid #2158d9 !important;
  color: #fff !important;
}
.ww-est.wrap #submitBtn.ww-btn:hover { filter: brightness(0.97) !important; }
.ww-est.wrap #submitBtn.ww-btn:disabled { opacity: .6 !important; cursor: not-allowed !important; }



/* ===== UI3 Integrated Overrides (2025-10-08) ===== */

/* Results: 5-column grid alignment */
#result.ww-card{ max-width:100%; width:100%; overflow:hidden; box-sizing:border-box; padding-left:16px; padding-right:16px; background:#fff; border:none; box-shadow:none; }
#result .grid5{ display:grid; grid-template-columns: 90px 1fr 56px 1fr 44px; align-items:center; gap:10px; }
#result .ww-head.grid5{ font-weight:700; color:#173a63; padding:8px 0 6px; border-bottom:1px solid #cfe1ff; }
#result .ww-head .c1{ grid-column:1; }
#result .ww-head .c2{ grid-column:2 / span 3; text-align:center; }
#result .ww-head .c5{ grid-column:5; text-align:right; }
#result .ww-row{ padding:12px 0; border-bottom:1px solid #cfe1ff; }
#result .ww-row .title{ font-weight:400; font-size:16px; color:#000; }
#result .ww-row .min, #result .ww-row .max{ text-align:center; white-space:nowrap; color:#000; font-weight:400; font-size:16px; }
#result .ww-row .to{ text-align:center; color:#000; font-weight:400; font-size:16px; }
#result .ww-row .unit{ text-align:right; color:#000; font-weight:400; font-size:16px; }
#result .ww-quote{ font-size:17px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:6px; margin-bottom:16px; }

/* Submit button states */
.ww-est.wrap #submitBtn.ww-btn:not(:disabled){ background:#408BC2 !important; border:2px solid #2f78a9 !important; color:#fff !important; background-image:none !important; }
.ww-est.wrap #submitBtn.ww-btn:not(:disabled):hover{ filter:brightness(0.97) !important; }
.ww-est.wrap #submitBtn.ww-btn:disabled{ background:#B0CFD2 !important; border:2px solid #9fbac0 !important; color:#fff !important; opacity:1 !important; cursor:not-allowed !important; background-image:none !important; }

/* Mobile button full width */
@media (max-width:480px){
  .ww-est.wrap #submitBtn.ww-btn{ width:100% !important; max-width:420px !important; display:block !important; margin:14px auto 0 !important; padding:14px 18px !important; font-size:16px !important; border-radius:999px !important; }
  .ww-est.wrap, .ww-est.wrap .ww-card{ overflow:hidden; }
}



/* ===== UI3 Mobile Full-Width Fixes (<= 480px) ===== */
@media (max-width: 480px){
  .ww-est.wrap{
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .ww-grid2{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ww-card{
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }
  .ww-field input, .ww-field select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* reduce big headings a bit so they don't wrap weirdly */
  .ww-hero{
    font-size: 22px !important;
    padding: 10px 12px !important;
  }
}



/* ===== UI3 Mobile Stack (<= 820px): Left/Right -> Top/Bottom ===== */
@media (max-width: 820px){
  .ww-grid2{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 18px !important;
  }
  /* Ensure the result card goes below the form card */
  #result.ww-card{ order: 2 !important; }
  .ww-grid2 > .ww-card:first-of-type{ order: 1 !important; }
  .ww-card{ width:100% !important; margin:0 !important; }
  .ww-est.wrap{ max-width:100% !important; width:100% !important; padding:14px !important; box-sizing:border-box !important; }
  .ww-field input, .ww-field select{ width:100% !important; max-width:100% !important; }
}



/* ===== UI3 Mobile Stack — Hard override (<= 992px) ===== */
@media (max-width: 992px){
  .ww-grid2{
    display: block !important;           /* force block layout */
  }
  .ww-grid2 > *{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    flex: 0 0 100% !important;           /* in case any flex is applied */
  }
  /* Safety: if any grid columns remain from theme */
  .ww-grid2{
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 18px !important;
  }
}



/* ===== UI3 Mobile Stack — Strong specificity (<= 992px) ===== */
@media (max-width: 992px){
  .ww-est.wrap > .ww-grid2{
    display:block !important;
    grid-template-columns:none !important;
    column-gap:0 !important;
    row-gap:18px !important;
  }
  .ww-est.wrap > .ww-grid2 > .ww-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 18px !important;
    flex:0 0 100% !important;
    float:none !important;
    clear:both !important;
  }
  /* Ultra fallback in case other wrappers intervene */
  .ww-est.wrap .ww-grid2{ display:block !important; grid-template-columns:none !important; }
  .ww-est.wrap .ww-grid2 .ww-card{ width:100% !important; max-width:100% !important; }
}



/* ===== UI3 Mobile Stack — Target container `.ww-est.wrap` which is grid (<= 992px) ===== */
@media (max-width: 992px){
  .ww-est.wrap{
    display:block !important;                 /* stop grid at container level */
    grid-template-columns:none !important;
    gap:0 !important;
    column-gap:0 !important;
    row-gap:0 !important;
    max-width:100% !important;
    width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }
  .ww-est.wrap > .ww-leftcard,
  .ww-est.wrap > #result.ww-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 18px !important;
    float:none !important;
    clear:both !important;
  }
}



/* ===== UI3: Privacy line overflow fix ===== */
.ww-leftcard .ww-privacy{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
}



/* ===== UI3: Mobile numbers — avoid ellipsis by giving more room and adaptive font ===== */
@media (max-width: 540px){
  #result .grid5{ 
    grid-template-columns: 64px minmax(0,1fr) 40px minmax(0,1fr) 36px !important;
    gap: 8px !important;
  }
  #result .ww-row .min, #result .ww-row .max{
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: nowrap !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }
  #result .ww-row .title,
  #result .ww-row .to,
  #result .ww-row .unit{
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }
}



/* ===== UI3: Desktop spacing tidy (>= 993px) ===== */
@media (min-width: 993px){
  /* Ensure the two panels align to the top with no big gap below */
  .ww-est.wrap{
    display: grid !important;
    grid-template-columns: 60% 40% !important;
    align-items: start !important;
    row-gap: 0 !important;
  }
  .ww-leftcard, #result.ww-card{
    margin-bottom: 0 !important;
    height: auto !important;
  }
  /* Remove accidental large padding at the bottom on some themes */
  .ww-leftcard{ padding-bottom: 16px !important; }
  /* Tidy inner blocks spacing */
  .ww-privacy, .ww-free, .ww-progress, .ww-center{ margin-bottom: 12px !important; }
  /* Elementor wrappers sometimes add bottom spacing; neutralize within our area only */
  .ww-est.wrap .elementor-widget, 
  .ww-est.wrap .elementor-column, 
  .ww-est.wrap .elementor-container{ margin-bottom: 0 !important; }
}



/* ===== Form-only minimal: just hide results, keep everything else the same ===== */
.ww-est.wrap #result{ display:none !important; }
.ww-est.wrap .ww-grid2{ grid-template-columns: minmax(0,1fr) !important; }


/* ===== Force 2 columns (high specificity) ===== */
#result, .ww-run, .ww-footnote{ display:none !important; }

@media (min-width: 992px){
  /* reset any outer grid */
  .elementor-shortcode .ww-est.wrap .ww-leftcard{ display:block !important; grid-template-columns:initial !important; }

  /* make inner grid2 the 2-col container */
  .elementor-shortcode .ww-est.wrap .ww-leftcard > .ww-grid2{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:24px !important;
    row-gap:24px !important;
    align-items:start !important;
  }

  /* ensure sections sit in separate columns */
  .elementor-shortcode .ww-est.wrap .ww-leftcard > .ww-grid2 > .ww-card{
    grid-column:auto !important;
    width:auto !important;
    min-width:0 !important;
  }
}

@media (max-width: 991.98px){
  .elementor-shortcode .ww-est.wrap .ww-leftcard > .ww-grid2{
    display:grid !important;
    grid-template-columns: 1fr !important;
    row-gap:20px !important;
  }
}


/* ===== Center the whole form on the page ===== */
.elementor-shortcode .ww-est.wrap,
.elementor-shortcode .ww-est.wrap .ww-leftcard,
.elementor-shortcode .ww-est.wrap .ww-leftcard > .ww-grid2{
  max-width: 1100px;   /* adjust if you want wider/narrower */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* remove any right padding/ghost column leftover from old layout */
.elementor-shortcode .ww-est.wrap,
.elementor-shortcode .ww-est.wrap .ww-leftcard{
  padding-right: 25px !important;
}

/* ensure top wrapper isn't a grid that reserves space on the right */
.elementor-shortcode .ww-est.wrap{ display:block !important; }


/* ขอบซ้าย-ขวาให้เท่ากัน และจัดกึ่งกลางแน่นอน */
@media (min-width: 992px){
  .elementor-shortcode .ww-est.wrap{
    max-width: 1100px;             /* ปรับได้ตามชอบ */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important; /* ระยะด้านซ้าย */
    padding-right: 32px !important;/* ระยะด้านขวา */
    box-sizing: border-box !important;
  }
  /* เพิ่มระยะห่างระหว่างคอลัมน์อีกนิด (ถ้าต้องการ) */
  .elementor-shortcode .ww-est.wrap .ww-leftcard > .ww-grid2{
    column-gap: 28px !important;   /* ปรับได้ 24–36px */
  }
}

/* มือถือให้เหลือ padding น้อยลงหน่อย */
@media (max-width: 991.98px){
  .elementor-shortcode .ww-est.wrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}