/* ==========================================================================
   ECOWARM supplementary styles
   Only this file is added - the original theme CSS is never modified.
   1. Right-side floating contact bar (mirrors the reference site #wmkc widget)
   2. Bottom-right floating inquiry panel (mirrors the reference site side message form)
   ========================================================================== */

/* ---------- 1. Right-side floating contact bar ---------- */
#ecoFloat {
  position: fixed;
  right: 8px;
  top: 42%;
  transform: translateY(-50%);
  z-index: 99;
}

#ecoFloat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

#ecoFloat li + li {
  border-top: 1px solid #EEEEEE;
}

#ecoFloat li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 66px;
  padding: 8px 2px;
  color: #555555;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

#ecoFloat li a em {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 5px;
}

#ecoFloat li a p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

#ecoFloat li.eco-float-whatsapp a:hover { background: #25D366; color: #FFFFFF; }
#ecoFloat li.eco-float-email a:hover { background: #F90; color: #FFFFFF; }
#ecoFloat li.eco-float-fb a:hover { background: var(--color, #0081cc); color: #FFFFFF; }

/* ---------- 2. Floating inquiry panel ---------- */
#ecoFbFab {
  position: fixed;
  right: 35px;
  bottom: 60px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color, #0081cc);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 4px 16px rgba(0, 60, 120, .30);
  transition: transform .2s ease-in-out;
}

#ecoFbFab em {
  font-size: 26px;
  line-height: 1;
  color: #FFFFFF;
}

#ecoFbFab:hover { transform: scale(1.06); }
#ecoFbFab.eco-fab-on { display: none; }

#ecoFbPanel {
  position: fixed;
  right: 35px;
  bottom: 60px;
  width: 370px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 8px 34px rgba(0, 0, 0, .20);
  z-index: 1000;
  display: none;
  overflow: hidden;
}

#ecoFbPanel.eco-fb-open { display: block; }

#ecoFbPanel .eco-fb-head {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: #1E88E5;
  color: #FFFFFF;
}

#ecoFbPanel .eco-fb-head img {
  height: 26px;
  width: auto;
  margin-right: 10px;
  background: #FFFFFF;
  border-radius: 2px;
  padding: 2px;
  flex: none;
}

#ecoFbPanel .eco-fb-head-text {
  flex: 1;
  min-width: 0;
}

#ecoFbPanel .eco-fb-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ecoFbPanel .eco-fb-sub {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
}

#ecoFbPanel .eco-fb-sub i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #8BC34A;
  vertical-align: middle;
}

#ecoFbPanel .eco-fb-min {
  flex: none;
  cursor: pointer;
  padding: 2px 4px;
}

#ecoFbPanel .eco-fb-min em {
  font-size: 18px;
  color: #FFFFFF;
  line-height: 1;
}

#ecoFbPanel .eco-fb-body {
  padding: 14px 16px 4px;
  max-height: 62vh;
  overflow-y: auto;
}

#ecoFbPanel .eco-fb-body .wmkcfeedback .inquiry-form { margin-top: 0; }

#ecoFbPanel .eco-fb-body .wmkcfeedback input,
#ecoFbPanel .eco-fb-body .wmkcfeedback textarea {
  height: 42px;
  margin-bottom: 12px !important;
  font-size: 14px;
}

#ecoFbPanel .eco-fb-body .wmkcfeedback textarea { height: 96px; }

#ecoFbPanel .eco-fb-body .wmkcfeedback .send-btn {
  height: 42px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

#ecoFbPanel .eco-fb-error {
  display: none;
  margin: -4px 0 14px;
  color: #E00;
  font-size: 12px;
  line-height: 1.4;
}

#ecoFbPanel .eco-fb-error i {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  border-radius: 50%;
  background: #E00;
  color: #FFFFFF;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
  text-align: center;
  vertical-align: 1px;
}

@media (max-width: 1024px) {
  #ecoFbPanel { right: 12px; bottom: 76px; width: 340px; }
  #ecoFbFab { right: 12px; bottom: 76px; }
}

@media (max-width: 768px) {
  #ecoFloat { display: none; }
  #ecoFbPanel { right: 12px; bottom: 76px; width: calc(100% - 24px); }
  #ecoFbFab { right: 12px; bottom: 76px; width: 48px; height: 48px; }
  #ecoFbFab em { font-size: 22px; }
  #ecoFbPanel .eco-fb-body { max-height: 52vh; }
}

/* ---------- 3. Homepage banner slide ratio normalisation ----------
   On the reference site all three slides (one 16:9 video + two 1920x1080 images) share the same ratio,
   so the banner height stays stable. When a replacement image has a different ratio the banner is
   stretched by the tallest slide, which shows up as blank space under the image and pagination
   bullets falling outside the image. Forcing a 16:9 box with cover-cropping keeps the height fixed.
   Recommended upload size for future banner images: 1920x1080 (16:9). */
@media (min-width: 769px) {
  .home-banner #indexbanner .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1080;
    object-fit: cover;
  }
}

/* Homepage product-series slide ratio normalisation (the 3 reference images are all 554x445) */
.home-case .homecase-wrap .swiper-slide .img img {
  aspect-ratio: 554 / 445;
}

/* ---------- 4. Brand Overview "read more" button overlapping the text ----------
   Theme rule (other.css): @media(min-width:1025px){.home-about .home-more{transform:translateY(-100px)}}
   It pulls the button 100px up into the empty space of the left column, tuned for the shorter copy of
   the reference site. ECOWARM's copy is longer, so the button ended up on top of the text.
   The hard-coded offset is cancelled here so the button simply flows below the text. */
@media (min-width: 1025px) {
  .home-about .home-more {
    transform: none;
  }
}

/* ---------- 5. Homepage Brand Overview left image ----------
   The theme rule `.about-img .bgimg{width:100%;height:auto}` (image shown at its own ratio) is kept;
   only a maximum height is added so that a future portrait image cannot make the column too tall. */
.home-about .about-img .bgimg {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 560px;
}

/* ---------- 6. Product detail "Device features" list ----------
   The spec list copied from the client document is plain text; render it as a
   two-column disc list on desktop and a single column on mobile. */
.pro-device-features {
  columns: 2;
  column-gap: 48px;
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}

.pro-device-features li {
  margin-bottom: 8px;
  break-inside: avoid;
}

@media (max-width: 768px) {
  .pro-device-features {
    columns: 1;
  }
}

/* ---------- 7. Homepage Latest News thumbnail uniform height ----------
   The theme only sets `max-height:300px` on `.homenews-img`; its parent has no definite height, so the
   `height:100%` on the image degrades to auto and every image keeps its own ratio (1.55:1 / 2.5:1 ...),
   which makes the cards of one row uneven and misaligns the "read more" row.
   A fixed 3:2 box together with the existing object-fit:cover makes every thumbnail exactly the same
   height while still scaling proportionally with the viewport width. */
.home-news .homenews-list .homenews-item .homenews-img {
  aspect-ratio: 3 / 2;
}

/* ---------- 8. News / Knowledge list thumbnail uniform height ----------
   Same root cause as rule 7: `.newslist.list0 li .newslist-img` has a fixed width (350px)
   but no fixed height, so the image `height:100%` degrades to auto and every thumbnail
   keeps its own ratio - a portrait image (e.g. a certificate scan) blows the card up.
   A fixed 3:2 box with the existing object-fit:cover makes all list thumbnails the same
   height on /news/ and /info/, matching the homepage Latest News cards. */
.newslist.list0 li .newslist-img a {
  aspect-ratio: 3 / 2;
}