/**
 * 專案自管樣式（勿放進 styles/css/，該目錄為切版產出，可能被覆蓋）
 */

/* 表單／API 錯誤提示紅字（blade 多處使用 text-danger，主樣式未內建） */
.text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--m-quaternary-rgb) / var(--tw-text-opacity, 1));
}

/*
 * 地圖標記：left/top 應對齊「圓點中心」，而非整塊（圓點＋標籤）中心。
 * 否則後台焦點百分比與前台視覺會有水平落差。
 */
.brandsMap__container .brandsMap__wrapper .brandsMap__link {
  --map-dot-size: 18px;
  --tw-translate-x: calc(var(--map-dot-size) / -2);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}
.brandsMap__container .brandsMap__wrapper .brandsMap__link.left {
  /* 標籤在左、圓點在右：以圓點中心為錨點 */
  --tw-translate-x: calc(-100% + var(--map-dot-size) / 2);
}
@media (max-width: 768px) {
  .brandsMap__container .brandsMap__wrapper .brandsMap__link {
    --map-dot-size: 16px;
  }
}

/*
 * 相關產品：外層為 flex（左右箭頭 + swiper）。
 * 若不給 .swiper 明確佔寬，會塌成 min-content（單字直排）。
 */
.swiper-container.relatedProducts > .swiper {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.swiper-container.relatedProducts .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/*
 * 商品卡：維持圖區比例；勿對卡片設 min-width:0（會讓 flex/swiper 塌縮）。
 */
.productsCard {
  width: 100%;
}
.productsCard a.img {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.productsCard a.img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.productsCard .info .wrap {
  width: 100%;
}

/*
 * 表單送出按鈕：disabled + 轉圈圈（contacts / cart / member 等共用）
 */
.btn-loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-loading-spin 0.6s linear infinite;
}
@keyframes btn-loading-spin {
  to {
    transform: rotate(360deg);
  }
}