/* ----- scrollbar 滾動條 ----- */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: all 1s;
}
::-webkit-scrollbar-thumb:hover {
  --v-high-emphasis-opacity: 0.4;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}
/* ----- /scrollbar 滾動條 ----- */
/* -------------------------------------
  GLOBAL
  --------------
  ----------------------- */
@font-face {
  font-family: "FuturaPTCondBook";
  src: url("../font/Futura PT Cond Book/Futura PT Cond Book.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}
:root {
  --bs-primary: #A9C4D7; /* 淺綠主色 */
  --bs-primary2: #000; /* 文字主色 */
  --bs-primary-rgb: 140, 215, 144;
  --bs-primary-bg-subtle: #c4f1c8; /* 更淡背景 */
  --bs-btn-active-bg: #A9C4D7;     /* 深一點按下去 */
  --bs-btn-hover-bg: #7ed685;      /* 滑過按鈕 */
  --bs-link-color-rgb: 140, 215, 144;
  --bs-link-hover-color-rgb: 112, 190, 116;

  --bs-font-sans-serif: "FuturaPTCondBook", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 添加 FuturaPTCondBook 及其他備選字體 */
}
* {
  letter-spacing: 0.1rem;
}
body {
  background: var(--bs-body-color);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: #fff;
}
.form-check-input:focus {
  border-color: var(--bs-primary-bg-subtle);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.btn {
  --bs-btn-hover-bg: #7ed685;
}
.btn a {
  text-decoration: none;
}.nav-top img
.btn:hover svg path {
  transition: 0.3s;
  fill: white!important;
}
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: #2c3e50;
  --bs-btn-hover-bg: #7ed685;
  --bs-btn-hover-border-color: #5a7a6b;
  --bs-btn-active-bg: #016CA6;
  --bs-btn-active-border-color: #015a8a;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: #2c3e50;
  --bs-btn-color: #ffffff;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  border: 1px solid #2c3e50;
  /* 靠右對齊 */
  text-align: right;
}
.btn-white {
  --bs-btn-bg: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn.rounded-circle {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
}

/* ----- banner 橫幅 ----- */
.nav-top img {
  max-width: 100vw;
  max-height: 100px;
  height: auto;
  object-fit: contain;
}

/* ----- /banner 橫幅 ----- */
/* ----- 側邊攔 ----- */
#divTabs {
  pointer-events: none;
}
#divTabs > div , #divTabs > ul {
  pointer-events: auto!important;
}
.nav_gis {
  width: 20rem;
  height: 100%;
  transition: all 0.3s;
  transition-delay: 0.1s;
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;
}
.nav_gis.nav_gis-mini {
  width: 62px;
  transition-delay: 0s;
}
.nav_gis.nav_gis-mini #bi-chevron-left {
  display: none;
}
.nav_gis:not(.nav_gis-mini) #bi-search {
  display: none;
}

#nav-top-btn-ground {
  overflow: hidden;
}
.nav_gis .navdiv,
.nav_gis .nav-bottom {
  width: 20rem;
  background: var(--bs-primary);
  transition: transform 0.4s;
  animation: slideInNavDiv 0.4s forwards;
}
.nav_gis.nav_gis-mini .navdiv,
.nav_gis.nav_gis-mini .nav-bottom {
  animation: slideOutNavDiv 0.4s forwards;
  overflow: hidden;
}
@keyframes slideOutNavDiv {
  0% { transform: translateX(0); }
  75% { transform: translateX(calc(-100% + 68px)); }
  100% { transform: translateX(-100%); }
}

@keyframes slideInNavDiv {
  0% { transform: translateX(-100%); }
  25% { transform: translateX(calc(-100% + 68px)); }
  100% { transform: translateX(0); }
}
.nav-top {
  flex-shrink: 0;
  background: var(--bs-primary);
}
.navdiv {
  flex-shrink: 1;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.nav-bottom {
  flex-shrink: 0;
  margin-top: auto;
}
#f_logo {
  width: 100vw;
  display: block;
  max-width: 100%;
  height: auto;
}
#f_logo_phone {
  width: 100vw;
  max-width: 100%;
  height: auto;
  display: none;
}


@media (max-width: 576px) {
  #f_logo {
    display: none;
  }
  #f_logo_phone {
    display: block;
  }
  .nav-top {
    /*padding-top: 180px*/
    padding-top: calc(10px + (170 * ((115vw - 200px) / 376)));
  }

  .nav_gis.nav_gis-mini {
    width: 62px!important;
    min-width: 62px!important;
  }
  .nav_gis , .navdiv ,.nav-bottom  {
    /* width: 15rem!important; */
    width: 60vw!important;
    min-width: 200px;
  }
}
@media (min-width: 576px) {
  #f_logo {
    display: block;
  }
  /*.nav-top {max-width: 199px
    padding-top: 10px
  }*/
}
/* 手風琴樣式 */

.nav_gis .accordion {
  --bs-accordion-active-bg: var(--bs-btn-active-bg);
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-bg: var(--bs-primary);
  --bs-accordion-btn-color: #fff;
  height: 100%;

  display: flex;
  flex-direction: column;
}
.nav_gis .accordion .accordion-item {
  /*border: 0;*/
  flex: 0 1 auto;
}
#accordionPanelsStayOpenExample.accordion .accordion-item {
  /*border: 0;*/
}
.nav_gis .accordion .accordion-item:has(.accordion-collapse.collapse.show) {
  /*flex: 1 1 auto;*/
}
.nav_gis .accordion .accordion-item .list-group-item {
  /*border-left:0;*/
  display: flex;
  align-items: center;
}

/*//icon間距*/
.accordion .accordion-item .list-group-item , .accordion-button {
  align-items: center;
}
/*.nav_gis .accordion .accordion-header , .accordion-button:hover {
  --bs-btn-hover-bg: #E0DFE2;
  background-color: var(--bs-btn-hover-bg);
}*/
.accordion .accordion-item .list-group-item svg , .accordion-button svg{
  margin-right: 0.3rem;
  flex-shrink: 0;
}
.nav_gis .accordion-button::after {
  margin-left: 10px;
  --bs-accordion-btn-icon:
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e")
}
.nav_gis .accordion-button:not(.collapsed)::after {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e")
}
.accordion .accordion-body .list-group-item-action {
  color: var(--bs-primary2) !important;
}

.accordion .accordion-header, .accordion-button:hover {
  --bs-btn-hover-bg: rgba(0,0,0,.1);
  background-color: var(--bs-btn-hover-bg);
}

.accordion-button:not(.collapsed) {
  --bs-accordion-border-color: transparent;
}

/* ----- /側邊攔 ----- */

/* ---- 彈出視窗靠右 ---- */
.modal.fade.right {
  point-events: none !important;
  overflow: visible !important;
}

.modal.fade.right .modal-content {
  point-events: auto !important;
  box-shadow: 5px 5px 20px rgba(0,0,0,.5) !important;
}
/* ----- 調整彈出視窗高度 ----- */
.modal-dialog{
  height: 100%;
  margin: 0;
}
.modal-content {
  height: 100%;
}
@media (min-width: 576px) {
  .modal-body{
    max-height: 100%;
  }
}
/* ----- /調整彈出視窗高度 ----- */
/*// 影子*/
.modal-backdrop {
  --bs-backdrop-opacity: 0!important;
  --bs-backdrop-bg: transparent !important;
}
.modal-backdrop.fade.show {
  opacity: 0!important;
  pointer-events: none;
}
/*// header*/
.modal-content .modal-header {
  background: var(--bs-primary)!important;
}

@media (min-width: 576px) {
  .modal.fade.right {
    width: 500px !important;
    margin-right: 0 !important;
    margin-left: calc(100% - 500px) !important;
  }
}
.modal-body{
  overflow-y: auto;
  max-height: inset;
}
/* ---- /彈出視窗靠右 ---- */
#rwdchange .img{
  display: block;
}
#rwdchange .text{
  display: none;
}

@media (min-width: 576px) {
  #rwdchange .img{
    display: none;
  }
  #rwdchange .text{
    display: block;
  }
}
/* ----- 店家資訊泡泡框 ----- */
#popup-closer.ol-popup-closer {
    width: .8em;
    transform: translate(-8px , 4px);
    position: absolute;
    right: 0;
}
.ol-popup-closer:after{
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  /*background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;*/
  content: var(--bs-btn-close-bg)!important;
}
/*#popup-content code p {
  font-size: .875rem;
}
#popup-content code {
  font-size: 0;
  padding: 0;
}*/
#popup-content {
  display: flex;
  flex-direction: column;
}
#popup-content > p { /* title*/
  flex-shrink: 0;
}
/*#popup-content > p:before {
  content: "D";
}*/
#popup-content > p { /* content*/
  flex-shrink: 0;
}

#popup-content code > p {
  font-size: .875em;
  line-height: 1.5em;
  word-break: keep-all;
  text-justify: inter-word;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(5.5em, auto) 1fr; /* 第一欄最小寬度5個字，最大自適應 */
  gap: 10px;
  row-gap: 2px;
}
#popup-content code {
  padding: 0px !important;
}
#popup-content code p a {
  text-decoration-line: none;
  padding: 4px;
  border-radius: 4px;
  margin-top: 10px;
  transition: .3s;
}
#popup-content code p img , #popup-content code p a {
  grid-column: span 2;
}

#popup-content code p a:has(svg) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* color: var(--bs-primary); */
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  border: 1px solid var(--bs-btn-hover-bg);
  background: rgba(var(--bs-link-hover-color-rgb), .1);
  position: relative;
  left: 50%;
  transform: translate(-50%, 0px);
}
#popup-content code p a:has(svg):hover {
  color: white;
  background: var(--bs-primary);
   /*box-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px var(--bs-btn-hover-bg),
    0 0 8px var(--bs-btn-hover-bg),
    0 0 10px var(--bs-btn-hover-bg),
    0 0 12px var(--bs-btn-hover-bg),
    0 0 14px var(--bs-btn-hover-bg),
    0 0 16px var(--bs-btn-hover-bg);*/
}

#popup.ol-popup {
   /* 半透明白色背景 */
  /*background-color: rgba(255, 255, 255, 0.7); */
   /* 毛玻璃效果 */
    /*backdrop-filter: blur(10px); */
     /* Safari 支持 */
/*    -webkit-backdrop-filter: blur(10px);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));*/

}
/* 當視窗寬度小於 360px 時，設置動態寬度 */
@media (max-width: 360px) {
  #popup.ol-popup {
    min-width: min(max(300px, 70vw), 70vw)!important;
  }
}
/* ----- /店家資訊泡泡框 -----


/* id  #accordionPanelsStayOpenExample  */
.list-group-item-dark {
--bs-list-group-action-hover-bg: rgba(0,0,0,.1);
}
.accordion-button {

}
#accordionPanelsStayOpenExample .accordion-button:not(.collapsed) {
  --bs-accordion-active-bg: #0187D0;
 background-color:  #0187D0;
}
#accordionPanelsStayOpenExample .accordion-button:not(.collapsed):hover {
  background-color: #6CC2E6;
}
#accordionPanelsStayOpenExample .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23777777' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e")
}
/* id  #accordionPanelsStayOpenExample */