/* ==========================================================================
   Home Solar – custom styles (ส่วนที่ Tailwind utility ทำไม่สะดวก)
   ========================================================================== */

/* ---------- Fonts (Better Together จาก asset-home-solar/fonts) ---------- */
/* แยก family ตามน้ำหนัก ให้ตรงกับ class font-bt-* ที่กำหนดแค่ font-family */
@font-face {
  font-family: "BetterTogether-Light";
  src:
    url("../fonts/BetterTogether-Light.woff2") format("woff2"),
    url("../fonts/BetterTogether-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "BetterTogether-Regular";
  src:
    url("../fonts/BetterTogether-Regular.woff2") format("woff2"),
    url("../fonts/BetterTogether-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "BetterTogether-Medium";
  src:
    url("../fonts/BetterTogether-Medium.woff2") format("woff2"),
    url("../fonts/BetterTogether-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "BetterTogether-Bold";
  src:
    url("../fonts/BetterTogether-Bold.woff2") format("woff2"),
    url("../fonts/BetterTogether-Bold.woff") format("woff");
  font-display: swap;
}

/* ---------- Swiper ---------- */
.hs-swiper .swiper-slide {
  height: auto;
}

/* ความกว้าง slide (desktop ของ checklist ใช้ grid แทน — ดูด้านล่าง) */
.js-checklist-swiper .swiper-slide {
  width: 270px;
}
.js-package-swiper .swiper-slide {
  width: 300px;
}
/* การ์ดที่ไม่ใช่ขนาดแนะนำ (Swiper ข้าม slide ที่ display: none) — ใช้แทน class hidden ของ Tailwind ที่แพ้ swiper-bundle.css */
.js-package-swiper .swiper-slide.is-hidden {
  display: none;
}

/*
  swiper-bundle.css ตั้ง .swiper { margin-left/right: auto } (unlayered) ซึ่งชนะ class -mx-4 ของ Tailwind
  และทำให้ .swiper ใน flex column กว้างตามเนื้อหาจนเลื่อนไม่ได้ → กำหนด margin ที่นี่แทน
  mobile: ขยายเต็มจอ (ชดเชย padding 16px ของ container), desktop: เท่า container
*/
.hs-swiper {
  align-self: stretch;
  margin-left: -16px;
  margin-right: -16px;
  /* เผื่อพื้นที่ให้เงาการ์ดไม่โดนตัด */
  padding-top: 4px;
  padding-bottom: 16px;
}

@media (min-width: 1024px) {
  .hs-swiper {
    margin-left: 0;
    margin-right: 0;
  }

  /* เช็กความพร้อมของบ้าน: ไม่ใช้ Swiper — การ์ด 4 ใบเต็มแถว */
  .js-checklist-swiper {
    overflow: visible;
  }
  .js-checklist-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .js-checklist-swiper .swiper-slide {
    width: auto;
  }

  /* แพ็กเกจ: carousel ยาวต่อไปทางขวาจนสุดจอ (ตาม Figma) แต่ตัดขอบซ้ายที่ container */
  .js-package-swiper {
    overflow: visible;
    clip-path: inset(-16px -100vw -24px 0);
  }
}

/* รวมคำถามเกี่ยวกับโซลาร์เซล */
.js-article-swiper .swiper-slide {
  width: 264px;
}
.js-article-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.js-article-pagination .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgba(48, 60, 70, 0.38);
  opacity: 1;
  transition: width 0.2s ease;
}
.js-article-pagination .swiper-pagination-bullet-active {
  width: 35px;
  background: #e00000;
}

/* ---------- ตารางแพ็กเกจ (Premium / Platinum) ----------
   Figma: desktop กว้าง 1128px, mobile คือ desktop ย่อเหลือ 358px ทั้งตาราง
   → ทุกขนาดคิดเป็นสัดส่วนของความกว้างตาราง (--u = 1px ที่กว้าง 1128px) */
.hs-pkg-table-wrap {
  container-type: inline-size;
}
.hs-pkg-table {
  --u: calc(100cqw / 1128);
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: calc(var(--u) * 24);
  font-size: calc(var(--u) * 20);
  line-height: 1.4;
  text-align: center;
  color: #303c46;
}
.hs-pkg-table--premium {
  --pkg-head: #c00000;
  --pkg-price: #e00000;
  --pkg-label: #ffdad4;
  --pkg-line: #ffb4a8;
}
.hs-pkg-table--platinum {
  --pkg-head: #000;
  --pkg-price: #303c46;
  --pkg-label: #e2e2e5;
  --pkg-line: #e2e2e5;
}
.hs-pkg-table .col-label {
  width: calc(var(--u) * 220);
}
.hs-pkg-table th,
.hs-pkg-table td {
  padding: calc(var(--u) * 16);
  vertical-align: middle;
  font-weight: normal;
}
.hs-pkg-table .pkg-title {
  padding: calc(var(--u) * 24);
  background: var(--pkg-head);
  font-size: calc(var(--u) * 32);
  color: #fff;
}
.hs-pkg-table .pkg-price th,
.hs-pkg-table .pkg-price td {
  height: calc(var(--u) * 80);
  background: var(--pkg-price);
  border-right: 1px solid #edeef1;
  color: #fff;
}
.hs-pkg-table .pkg-price td {
  font-size: calc(var(--u) * 24);
}
.hs-pkg-table .pkg-price > :last-child {
  border-right: 0;
}
.hs-pkg-table tbody th {
  background: var(--pkg-label);
}
.hs-pkg-table tbody td {
  background: #fff;
  border-right: 1px solid var(--pkg-line);
}
.hs-pkg-table tbody tr:nth-child(odd) td {
  background: #edeef1;
}
.hs-pkg-table tbody td:last-child {
  border-right: 0;
}
.hs-pkg-table tbody tr:not(:last-child) > * {
  border-bottom: 1px solid var(--pkg-line);
}
.hs-pkg-table .pkg-note {
  display: block;
  font-size: calc(var(--u) * 12);
}
/* แถบ HUAWEI + Optimizer (Platinum Plus) */
.hs-pkg-table .pkg-brand {
  background: #fff;
}
.hs-pkg-table .pkg-brand-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-pkg-table .pkg-brand-huawei {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}
.hs-pkg-table .pkg-brand-logo {
  position: relative;
  display: block;
  width: calc(var(--u) * 173);
  height: calc(var(--u) * 60);
  overflow: hidden;
}
.hs-pkg-table .pkg-brand-logo img {
  position: absolute;
  top: 0;
  left: -6.47%;
  width: 106.58%;
  max-width: none;
  height: 100%;
}
.hs-pkg-table .pkg-brand-optimizer {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  width: calc(var(--u) * 390);
  text-align: left;
}
.hs-pkg-table .pkg-brand-optimizer img {
  width: calc(var(--u) * 67);
  height: calc(var(--u) * 100);
  object-fit: contain;
}
.hs-pkg-table .pkg-brand-optimizer p {
  padding-right: calc(var(--u) * 16);
  font-size: calc(var(--u) * 16);
}

/* จำนวนเครื่องใช้ไฟฟ้า: ไอคอน + ตัวเลข 2 × 2 */
.hs-pkg-table .pkg-appliances {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: calc(var(--u) * 16) calc(var(--u) * 24);
  width: max-content;
  min-width: calc(var(--u) * 128);
  margin: 0 auto;
}
.hs-pkg-table .pkg-appliances span {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
  white-space: nowrap;
}
.hs-pkg-table .pkg-appliances img {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
}

/* ---------- Accordion ---------- */
.js-accordion .accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.js-accordion.is-open .accordion-body {
  grid-template-rows: 1fr;
}
.js-accordion .accordion-body > div {
  overflow: hidden;
}
.js-accordion .icon-up {
  display: none;
}
.js-accordion.is-open .icon-up {
  display: block;
}
.js-accordion.is-open .icon-down {
  display: none;
}

/* ---------- Select / input (outlined text field) ---------- */
.hs-select select {
  -webkit-appearance: none;
  appearance: none;
}
.hs-select input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.hs-select input[type="number"]::-webkit-inner-spin-button,
.hs-select input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hs-select.is-error .hs-select-box {
  border-color: #e00000;
}

/* ---------- Checkbox ---------- */
.hs-checkbox input:checked {
  background-color: #e00000;
  border-color: #e00000;
}
.hs-checkbox input:checked + img {
  display: block;
}

/* ---------- Summary reveal ---------- */
.js-calc-summary {
  scroll-margin-top: 24px;
}