@charset "UTF-8";

/* 其他可供全域使用樣式屬性 */
/* 此 CSS 不使用 EC 前綴 */
:root {
  --blue: hsl(209 83% 50%);
  --blue-40: hsl(209 83% 96%);
  --blue-75: hsl(209 83% 92.5%);
  --blue-560: hsl(209 83% 44%);
  --blue-680: hsl(209 83% 32%);
  --blue-50: hsl(209 83% 95%);
  --blue-100: hsl(209 83% 90%);
  --blue-200: hsl(209 83% 80%);
  --blue-300: hsl(209 83% 70%);
  --blue-350: hsl(209 83% 65%);
  --blue-400: hsl(209 83% 60%);
  --blue-500: hsl(209 83% 50%);
  --blue-600: hsl(209 83% 40%);
  --blue-700: hsl(209 83% 30%);
  --blue-800: hsl(209 83% 20%);
  --blue-900: hsl(209 83% 10%);
  --blue-950: hsl(209 83% 5%);
  --grass: hsl(74 38% 50%);
  --grass-50: hsl(74 38% 95%);
  --grass-100: hsl(74 38% 90%);
  --grass-200: hsl(74 38% 80%);
  --grass-300: hsl(74 38% 70%);
  --grass-400: hsl(74 38% 60%);
  --grass-500: hsl(74 38% 50%);
  --grass-550: hsl(74 38% 45%);
  --grass-600: hsl(74 38% 40%);
  --grass-700: hsl(74 38% 30%);
  --grass-800: hsl(74 38% 20%);
  --grass-900: hsl(74 38% 10%);
  --grass-950: hsl(74 38% 5%);
  --green: hsl(119 62% 50%);
  --green-50: hsl(119 62% 95%);
  --green-100: hsl(119 62% 90%);
  --green-200: hsl(119 62% 80%);
  --green-300: hsl(119 62% 70%);
  --green-400: hsl(119 62% 60%);
  --green-500: hsl(119 62% 50%);
  --green-600: hsl(119 62% 40%);
  --green-625: hsl(119 62% 37.5%);
  --green-700: hsl(119 62% 30%);
  --green-800: hsl(119 62% 20%);
  --green-900: hsl(119 62% 10%);
  --green-950: hsl(119 62% 5%);
  --neutral: hsl(0 0% 50%);
  --neutral-20: hsl(0 0% 98%);
  --neutral-70: hsl(0 0% 93%);
  --neutral-50: hsl(0 0% 95%);
  --neutral-100: hsl(0 0% 90%);
  --neutral-150: hsl(0 0% 85%);
  --neutral-200: hsl(0 0% 80%);
  --neutral-300: hsl(0 0% 70%);
  --neutral-400: hsl(0 0% 60%);
  --neutral-500: hsl(0 0% 50%);
  --neutral-600: hsl(0 0% 40%);
  --neutral-700: hsl(0 0% 30%);
  --neutral-750: hsl(0 0% 25%);
  --neutral-800: hsl(0 0% 20%);
  --neutral-900: hsl(0 0% 10%);
  --neutral-950: hsl(0 0% 5%);
  --orange: hsl(34 100% 50%);
  --orange-75: hsl(34 100% 92.5%);
  --orange-50: hsl(34 100% 95%);
  --orange-100: hsl(34 100% 90%);
  --orange-200: hsl(34 100% 80%);
  --orange-300: hsl(34 100% 70%);
  --orange-400: hsl(34 100% 60%);
  --orange-500: hsl(34 100% 50%);
  --orange-550: hsl(34 100% 45%);
  --orange-600: hsl(34 100% 40%);
  --orange-700: hsl(34 100% 30%);
  --orange-800: hsl(34 100% 20%);
  --orange-900: hsl(34 100% 10%);
  --orange-950: hsl(34 100% 5%);
  --pastelTeal: hsl(184 69% 50%);
  --pastelTeal-50: hsl(184 69% 95%);
  --pastelTeal-100: hsl(184 69% 90%);
  --pastelTeal-200: hsl(184 69% 80%);
  --pastelTeal-300: hsl(184 69% 70%);
  --pastelTeal-400: hsl(184 69% 60%);
  --pastelTeal-500: hsl(184 69% 50%);
  --pastelTeal-600: hsl(184 69% 40%);
  --pastelTeal-700: hsl(184 69% 30%);
  --pastelTeal-800: hsl(184 69% 20%);
  --pastelTeal-900: hsl(184 69% 10%);
  --pastelTeal-950: hsl(184 69% 5%);
  --primary: #d62872;
  --primary-50: hsl(334 69% 95%);
  --primary-100: hsl(334 69% 90%);
  --primary-200: hsl(334 69% 80%);
  --primary-300: hsl(334 69% 70%);
  --primary-400: hsl(334 69% 60%);
  --primary-500: hsl(334 69% 50%);
  --primary-600: hsl(334 69% 40%);
  --primary-700: hsl(334 69% 30%);
  --primary-800: hsl(334 69% 20%);
  --primary-900: hsl(334 69% 10%);
  --primary-950: hsl(334 69% 5%);
  --red: hsl(0 73% 50%);
  --red-30: hsl(0 73% 97%);
  --red-50: hsl(0 73% 95%);
  --red-100: hsl(0 73% 90%);
  --red-200: hsl(0 73% 80%);
  --red-300: hsl(0 73% 70%);
  --red-400: hsl(0 73% 60%);
  --red-500: hsl(0 73% 50%);
  --red-600: hsl(0 73% 40%);
  --red-700: hsl(0 73% 30%);
  --red-800: hsl(0 73% 20%);
  --red-900: hsl(0 73% 10%);
  --red-950: hsl(0 73% 5%);
  --vermilion: hsl(12 77% 50%);
  --vermilion-85: hsl(12 77% 91.5%);
  --vermilion-50: hsl(12 77% 95%);
  --vermilion-100: hsl(12 77% 90%);
  --vermilion-200: hsl(12 77% 80%);
  --vermilion-300: hsl(12 77% 70%);
  --vermilion-400: hsl(12 77% 60%);
  --vermilion-500: hsl(12 77% 50%);
  --vermilion-600: hsl(12 77% 40%);
  --vermilion-700: hsl(12 77% 30%);
  --vermilion-800: hsl(12 77% 20%);
  --vermilion-900: hsl(12 77% 10%);
  --vermilion-950: hsl(12 77% 5%);
  --yellow: hsl(47 100% 50%);
  --yellow-30: hsl(47 100% 97%);
  --yellow-80: hsl(47 100% 92%);
  --yellow-50: hsl(47 100% 95%);
  --yellow-100: hsl(47 100% 90%);
  --yellow-200: hsl(47 100% 80%);
  --yellow-300: hsl(47 100% 70%);
  --yellow-400: hsl(47 100% 60%);
  --yellow-500: hsl(47 100% 50%);
  --yellow-600: hsl(47 100% 40%);
  --yellow-700: hsl(47 100% 30%);
  --yellow-800: hsl(47 100% 20%);
  --yellow-900: hsl(47 100% 10%);
  --yellow-950: hsl(47 100% 5%);
  --brown: hsl(36 83% 50%);
  --brown-50: hsl(36 83% 95%);
  --brown-100: hsl(36 83% 90%);
  --brown-200: hsl(36 83% 80%);
  --brown-300: hsl(36 83% 70%);
  --brown-400: hsl(36 83% 60%);
  --brown-500: hsl(36 83% 50%);
  --brown-560: hsl(36.13 83.04% 43.92%);
  --brown-600: hsl(36 83% 40%);
  --brown-700: hsl(36 83% 30%);
  --brown-800: hsl(36 83% 20%);
  --brown-900: hsl(36 83% 10%);
  --brown-950: hsl(36 83% 5%);
  --blueGray: hsla(228.81 23.89% 48.43%);
  --blueGray-50: hsla(225 23.53% 93.33%);
  --blueGray-100: hsla(228.75 24.24% 87.06%);
  --blueGray-200: hsla(229.57 23.23% 80.59%);
  --blueGray-300: hsla(228 22.73% 74.12%);
  --blueGray-400: hsla(228.65 22.42% 67.65%);
  --blueGray-500: hsla(229.33 22.84% 61.37%);
  --blueGray-600: hsla(228.68 22.94% 54.71%);
  --blueGray-700: hsla(228.81 23.89% 48.43%);
  --blueGray-800: hsla(228.53 32.08% 41.57%);
  --blueGray-900: hsla(228.65 40.66% 35.69%);
  /* ec border 參數 */
  --ec-border-width: 1px;
  --ec-border-style: solid;
  --ec-border-color: #dee2e6;
  --ec-border-color-translucent: rgba(0, 0, 0, 0.175);
  --ec-border-radius: 0.375rem;
  --ec-border-radius-sm: 0.25rem;
  --ec-border-radius-lg: 0.5rem;
  --ec-border-radius-xl: 1rem;
  --ec-border-radius-xxl: 2rem;
  --ec-border-radius-2xl: var(--ec-border-radius-xxl);
  --ec-border-radius-pill: 50rem;
}

/* border 框線 */
.ec-border {
  border: var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;
}

.ec-border-0 {
  border: 0 !important;
}

.ec-border-top {
  border-top: var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;
}

.ec-border-top-0 {
  border-top: 0 !important;
}

.ec-border-end {
  border-right: var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;
}

.ec-border-end-0 {
  border-right: 0 !important;
}

.ec-border-bottom {
  border-bottom: var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;
}

.ec-border-bottom-0 {
  border-bottom: 0 !important;
}

.ec-border-start {
  border-left: var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;
}

.ec-border-start-0 {
  border-left: 0 !important;
}

/* border-color 框線顏色 */
.ec-border-primary {
  --ec-border-opacity: 1;
  border-color: rgba(var(--primary), var(--ec-border-opacity)) !important;
}

/* border-width 框線寬度 */
.ec-border-1 {
  border-width: 1px !important;
}

.ec-border-2 {
  border-width: 2px !important;
}

.ec-border-3 {
  border-width: 3px !important;
}

.ec-border-4 {
  border-width: 4px !important;
}

.ec-border-5 {
  border-width: 5px !important;
}

/* border-opacity 框線透明度 */
.ec-border-opacity-10 {
  --ec-border-opacity: 0.1;
}

.ec-border-opacity-25 {
  --ec-border-opacity: 0.25;
}

.ec-border-opacity-50 {
  --ec-border-opacity: 0.5;
}

.ec-border-opacity-75 {
  --ec-border-opacity: 0.75;
}

.ec-border-opacity-100 {
  --ec-border-opacity: 1;
}

/* width 如有缺少，請手動新增 */
.min-width-120,
.ec-reset .min-width-120 {
  min-width: 120px;
}

/* display 顯示屬性 */
/* 使用我們的快速回應地切換組件等的顯示值。
包括對一些更常見值的支持，以及一些用於在列印時控制顯示的附加功能。 */
.d-block,
.ec-reset .d-block {
  display: block;
}

.d-nline-block,
.ec-reset .d-nline-block {
  display: inline-block;
}

.d-inline,
.ec-reset .d-inline {
  display: inline;
}

/* flex */
.d-flex,
.ec-reset .d-flex {
  display: flex;
}

/* justify-content */
.justify-content-between,
.ec-reset .justify-content-between {
  justify-content: space-between;
}

.justify-content-center,
.ec-reset .justify-content-center {
  justify-content: center;
}

/* align-items */
.align-items-end,
.ec-reset .align-items-end {
  align-items: end;
}

.align-items-center,
.ec-reset .align-items-center {
  align-items: center;
}

/* flex-column */
.flex-column,
.ec-reset .flex-column {
  flex-direction: column !important;
}

/* flex-shrink */
.flex-shrink-0,
.ec-reset .flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1,
.ec-reset .flex-shrink-1 {
  flex-shrink: 1 !important;
}

/* flex-grow */
.flex-grow-0,
.ec-reset .flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1,
.ec-reset .flex-grow-1 {
  flex-grow: 1 !important;
}

/* position */
.start-100,
.ec-reset .start-100 {
  left: 100% !important;
}

.top-0,
.ec-reset .top-0 {
  top: 0 !important;
}

/* position 位置 */
/* 使用這些可以快速配置元素的位置。 */
.position-absolute,
.ec-reset .position-absolute {
  position: absolute !important;
}

.position-relative,
.ec-reset .position-relative {
  position: relative !important;
}

.position-sticky,
.ec-reset .position-sticky {
  position: sticky !important;
}

/* Overflow 溢出 */
/* 使用這些可以快速配置內容如何溢出元素。 */
.overflow-hidden,
.ec-reset .overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto,
.ec-reset .overflow-auto {
  overflow: auto !important;
}

.overflow-visible,
.ec-reset .overflow-visible {
  overflow: visible !important;
}

.overflow-scroll,
.ec-reset .overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-hidden,
.ec-reset .overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-auto,
.ec-reset .overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-visible,
.ec-reset .overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll,
.ec-reset .overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-hidden,
.ec-reset .overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-auto,
.ec-reset .overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-visible,
.ec-reset .overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll,
.ec-reset .overflow-y-scroll {
  overflow-y: scroll !important;
}

/* 截斷文字 */
/***********
line-clamp 屬性按特定行數截斷文字
如欲使用字數統計截斷處理，請改用 JS 處理，CSS 無法提供字數統計截斷處理。
拷貝下方紅色文字 class 添加到需要的文本上即可，最多提供至 5 行的樣式使用。
***********/
.line-clamp,
.ec-reset .line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp.line2,
.ec-reset .line-clamp.line2 {
  -webkit-line-clamp: 2;
}

.line-clamp.line3,
.ec-reset .line-clamp.line3 {
  -webkit-line-clamp: 3;
}

.line-clamp.line4,
.ec-reset .line-clamp.line4 {
  -webkit-line-clamp: 4;
}

.line-clamp.line5,
.ec-reset .line-clamp.line5 {
  -webkit-line-clamp: 5;
}

/* 元素添加游標互動 pointer */
/*********** 
   增加 role="button" 將預設游標改為 pointer。
   此屬性添加到元素上用來輔助指示元素是可以互動的。
   <button> 原先就具有 cursor 的變化，所以 role 不是必須的。 
***********/
[role='button'],
.ec-reset [role='button'] {
  cursor: pointer;
}

.rounded-0,
.ec-reset .rounded-0 {
  border-radius: 0 !important;
}

.rounded-pill,
.ec-reset .rounded-pill {
  border-radius: 50rem !important;
}

/* Clearfix (清除浮動) */
/*********** 
透過增加 clearfix 通用類別，可以快速輕鬆地清除容器中的浮動內容。
***********/
.clearfix::after,
.ec-reset .clearfix::after {
  display: block;
  clear: both;
  content: '';
}

/* 底部面板包裝區 */
.store-bottom-sheet-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
    z-index: 1000;
    opacity: 0; /* 初始隱藏 */
    pointer-events: none; /* 不允許點擊 */
    transition: opacity 0.3s ease; /* 使用 opacity 過渡 */
  }

  /* 當底部面板開啟時顯示 */
  .store-bottom-sheet-wrapper.open {
    opacity: 1;
    pointer-events: auto; /* 允許點擊 */
  }

  /* 底部面板樣式 */
  .store-bottom-sheet {
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    transform: translateY(100%); /* 初始位置在底部 */
    transition: transform 0.3s ease; /* 平滑過渡效果 */
  }

  /* 當底部面板開啟時 */
  .store-bottom-sheet-wrapper.open .store-bottom-sheet {
    transform: translateY(0); /* 當面板開啟時移動到可視區域 */
  }

  /* 標題區域 */
  .store-bottom-sheet-header {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 0 15px;
  }

  .store-bottom-sheet-title {
    font-size: 17px;
    color: #404040;
    font-weight: bold;
  }

  /* 內容區域 */
  .store-bottom-sheet-body {
    padding: 15px; /* 增加內邊距 */
    display: flex;
    flex-direction: column;
  }

  /* 欄位樣式 */
  .store-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .store-field.top {
    align-items: start;
  }

  /* 增加欄位間的間距，但排除最後一個欄位 */
  .store-bottom-sheet-body .store-field:not(:last-child) {
    margin-bottom: 15px; /* 只對非最後一個欄位添加間距 */
  }

  /* 欄位說明標籤 */
  .store-field-explanation-tag {
    display: flex;
    box-sizing: border-box;
    width: 68px;
  }

  .store-field-explanation-tag span {
    font-size: 13px;
    color: #DD2726;
    background-color: #FFF3F4;
    padding: 1px 4px;
    white-space: nowrap;
  }

  /* 欄位說明文本 */
  .store-field-explanation-text {
    display: flex;
    box-sizing: border-box;
    width: calc(100% - 68px);
    padding-left: 6px;
    font-size: 15px;
  }

  /* 欄位文本 */
  .store-field-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 15px;
  }

  .store-field-line-1 {
    font-size: 15px;
    color: #404040;
  }

  .store-field-line-2 {
    font-size: 13px;
    color: #999999;
  }

  /* 開關樣式 */
  .store-toggle-switch-wrapper {
    display: flex;
    align-items: center;
  }

  .store-toggle-switch {
    display: none;
  }

  .store-toggle-label {
    width: 60px;
    height: 34px;
    background-color: #ddd;
    border-radius: 34px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .store-toggle-label:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.3s ease;
  }

  .store-toggle-switch:checked + .store-toggle-label {
    background-color: #4CAF50;
  }

  .store-toggle-switch:checked + .store-toggle-label:before {
    transform: translateX(26px);
  }

  /* 底部區域 */
  .store-bottom-sheet-footer {
    padding: 10px 15px 30px; /* 上邊距 10，左右邊距 15  下邊距 10+20 增加操控性*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .store-outline-button {
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    background-color: transparent;
    color: #404040;
    border: 1px solid #ededed;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .store-outline-button:hover {
    background-color: #f2f2f2;
  }

  .store-button {
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    background-color: #D62872;
    color: #FFFFFF;
    border: 0px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  /* 開啟按鈕樣式 */
  .store-open-btn {
    background-color: #4CAF50;
    color: white;
    font-size: 17px;
    font-weight: bold;
    border: none;
    border-radius: 22px;
    padding: 10px 20px;
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%, 50%); /* 垂直水平居中 */
    cursor: pointer;
    z-index: 999; /* 確保開啟按鈕在最上層 */
  }

  .store-open-btn:hover {
    background-color: #45a049;
  }