/* SUN X — savings calculator (self-contained)
 * ย้ายออกจาก sunx-site.css เมื่อ 2026-09-06 และเปลี่ยนชื่อคลาสจากชื่อของ
 * ไฟล์ต้นฉบับมาเป็น namespace sunx-calc__* ไฟล์นี้โหลดเฉพาะหน้าที่มี widget
 */
.sunx-calc-section{background:#f5f4f2;overflow:hidden}
.sunx-calc{max-width:1180px;box-shadow:var(--shadow);background:#fff;border:1px solid #1717170d;border-radius:18px;grid-template-columns:1.13fr .87fr;margin:50px auto 0;display:grid;position:relative;overflow:hidden}
.sunx-calc__input{padding:clamp(30px,4vw,58px)}
.sunx-calc__kicker{color:#aaa39e;gap:24px;margin-bottom:42px;font-size:12px;display:flex}
.sunx-calc__kicker span:first-child{color:var(--orange);background:var(--off-white);border-radius:7px;padding:8px 13px}
.sunx-calc__input label{color:#655f5a;font-size:14px;font-weight:500;display:block}
.sunx-calc__bill{align-items:end;gap:12px;margin:6px 0 28px;display:flex}
.sunx-calc__bill strong{letter-spacing:-.05em;font-size:clamp(48px,5.3vw,74px);line-height:1}
.sunx-calc__bill span{color:#8f8984;margin-bottom:7px}
.sunx-calc__range-labels{color:#aaa39e;justify-content:space-between;margin-top:10px;font-size:12px;display:flex}
.sunx-calc__note{color:#955326;background:var(--off-white);border-radius:8px;margin:38px 0 0;padding:13px 15px;font-size:13px}
.sunx-calc__note span{width:19px;height:19px;color:var(--orange);border:1px solid var(--orange);border-radius:50%;place-items:center;margin-right:9px;font-weight:700;display:inline-grid}
.sunx-calc__result{color:#fff;background:var(--charcoal);padding:clamp(28px,4vw,52px)}
.sunx-calc__result-label{color:#ffae72;margin-bottom:20px;font-size:13px;font-weight:600}
.sunx-calc__grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}
.sunx-calc__grid>div{background:var(--graphite);border:1px solid #ffffff0a;border-radius:10px;min-height:118px;padding:20px}
.sunx-calc__grid span{color:#ffffff80;margin-bottom:8px;font-size:12px;display:block}
.sunx-calc__grid strong{font-size:clamp(25px,2.2vw,34px);line-height:1}
.sunx-calc__grid small{color:#ffffffb3;margin-left:3px;font-size:16px}
.sunx-calc__result .sunx-calc__cta{margin-top:18px}
.sunx-calc__disclaimer{color:#ffffff59;text-align:center;margin-top:13px;font-size:10px;display:block}
.sunx-calc__range-note{color:#807a75;min-height:48px;font-size:13px}
@media (max-width:960px){
  .sunx-calc{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sunx-calc{margin-top:34px}
  .sunx-calc__input,.sunx-calc__result{padding:25px 20px}
  .sunx-calc__kicker{gap:8px;margin-bottom:30px}
  .sunx-calc__kicker span{display:none}
  .sunx-calc__kicker span:first-child{display:inline-block}
  .sunx-calc__grid{grid-template-columns:1fr 1fr;gap:8px}
  .sunx-calc__grid>div{min-height:105px;padding:15px 12px}
  .sunx-calc__grid strong{font-size:22px}
}
.sunx-native-source-section .sunx-calc input[type="range"]{-webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, var(--orange) 0 var(--range, 8%), #d7d4d1 var(--range, 8%)) !important;
  box-shadow: none !important;
  accent-color: var(--orange) !important;}
.sunx-native-source-section .sunx-calc input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 5px solid #fff !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange), 0 4px 14px rgba(255,122,26,.25) !important;}
.sunx-native-source-section .sunx-calc input[type="range"]::-moz-range-thumb{width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  border: 5px solid #fff !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange), 0 4px 14px rgba(255,122,26,.25) !important;}
.sunx-native-source-section .sunx-calc :where(.sunx-calc__kicker,.sunx-calc__kicker span,.sunx-calc__range-labels,.sunx-calc__grid span),.sunx-native-source-section .sunx-calc :where(.sunx-calc__note,.sunx-calc__result-label,.sunx-calc__disclaimer){line-height: 1.65 !important;}
.sunx-native-source-section .sunx-calc .sunx-calc__input label{color: #655f5a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;}
.sunx-native-source-section .sunx-calc .sunx-calc__note{margin: 38px 0 0 !important;}
.sunx-native-source-section .sunx-calc .sunx-calc__result-label{margin-bottom: 20px !important;}
.sunx-native-source-section .sunx-calc__result a.sunx-calc__cta{color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 30px rgba(255,122,26,.18) !important;}


/* ---- CTA ----------------------------------------------------------------
   เดิมปุ่มนี้ยืมคลาส .button/.button-full จาก stylesheet รวม พอย้ายมาเป็น
   sunx-calc__cta จึงต้องพกสไตล์มาเอง ค่าทั้งหมดคัดจากดีไซน์ที่อนุมัติ
   ตัวอักษรต้องมี specificity สูงกว่า .elementor-kit-N a (0,2,0) ไม่งั้นจะได้
   สีส้มบนพื้นส้ม (บั๊กที่มีอยู่เดิม)                                        */
a.sunx-calc__cta,
.sunx-calc a.sunx-calc__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid var(--orange);
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 30px #ff7a1a2e;
  transition: transform .25s, box-shadow .25s, background .25s;
}
a.sunx-calc__cta:hover,
.sunx-calc a.sunx-calc__cta:hover {
  background: #f66f0c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px #ff7a1a47;
}

/* ---- line-height ---------------------------------------------------------
   ต้นฉบับให้ข้อความในเครื่องคำนวณสืบ line-height 1.65 จาก body เดิมมีกฎ
   !important ใน stylesheet รวมคอยบังคับไว้ พอย้ายมาเป็นไฟล์ของตัวเองจึงต้อง
   ประกาศตรงนี้ ไม่งั้น Elementor จะยัด line-height ของมันเข้ามาแล้วการ์ดสูงเกิน */
.sunx-calc__kicker,
.sunx-calc__kicker span,
.sunx-calc__range-labels,
.sunx-calc__result-label,
.sunx-calc__note,
.sunx-calc__disclaimer { line-height: 1.65; }