@charset "utf-8";
/* CSS Document */

body * { font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4, Tahoma, Monaco, sans-serif; }
table * { font-size: 1em; }
table span { font-size: 15px; }

/* 手機版側欄開關：收合時三線，展開時轉為 X。 */
.navbar .navbar-menu-wrapper .navbar-toggler.webcms-offcanvas-toggle {
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #FFF;
  color: var(--main-color, var(--my-primary, #cb0505));
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.navbar .navbar-menu-wrapper .navbar-toggler.webcms-offcanvas-toggle:hover,
.navbar .navbar-menu-wrapper .navbar-toggler.webcms-offcanvas-toggle:focus {
  background: #F5F5F5;
  outline: 0;
}
.webcms-offcanvas-toggle__icon { position: relative; display: block; width: 17px; height: 14px; }
.webcms-offcanvas-toggle__icon span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform .22s ease, opacity .18s ease; }
.webcms-offcanvas-toggle__icon span:nth-child(1) { top: 0; }
.webcms-offcanvas-toggle__icon span:nth-child(2) { top: 6px; }
.webcms-offcanvas-toggle__icon span:nth-child(3) { top: 12px; }
.webcms-offcanvas-toggle.is-open .webcms-offcanvas-toggle__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.webcms-offcanvas-toggle.is-open .webcms-offcanvas-toggle__icon span:nth-child(2) { opacity: 0; }
.webcms-offcanvas-toggle.is-open .webcms-offcanvas-toggle__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* pagebar  */
ul.pagebar { text-align:center; margin: auto; margin-top: 16px; }
ul.pagebar li { display: inline-block; width: 42px; line-height: 32px; text-align: center;
    background:#fff; color:var(--my-primary); border:var(--my-primary) 1px solid;
    border-radius: 3px; margin:0 2px;
}
ul.pagebar li a { display: block; text-decoration: none; color:var(--my-primary); }
ul.pagebar li:hover { background: #cb0505; border: #cb0505 1px solid; border-radius: 3px; }
ul.pagebar li:hover a { color:#FFF; }
ul.pagebar li.active { color:#FFF; background:var(--my-primary); border:var(--my-primary) 1px solid; }

ul.navBlock { list-style:none; }
ul.navBlock li { display:inline-block; margin-bottom: 6px; }
ul.navBlock li a {
  background: #AAA; color:#FFF; padding: 3px 10px;
  display: inline-block; border-radius:3px; text-decoration: none;
}
ul.navBlock li a:hover { background: #D5AB08; }
ul.navBlock li a.active { background: #3C3100; color:#FFF; }

/* button */
.recordBtn, .viewBtn,
.editBtn, .deleteBtn, cancelBtn, .setBtn, .otherBtn {
  display: inline-block; margin: 3px 6px 3px 0 !important;
}
.editBtn { color: #65BE3D; }
.deleteBtn { color: #4F4F4F; }
.cancelBtn { color: #EF433C; }  /*沒用到*/
.setBtn { color: #16ADB7; }
.otherBtn { color: #E15D06; }

/* text type */
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt13 { font-size:13px; }
.txt14 { font-size:14px; }
.txt15 { font-size:15px; }
.txt16 { font-size:16px; }
.txt17 { font-size:17px; }
.txt18 { font-size:18px; }
.txt24 { font-size:24px; }
.txtB { font-weight:bold; }
.txtN { font-weight:normal; }

.txtBlack { color:#000; }
.txtNavy { color:#069; }
.txtLightBlue { color:#9fd0e3; }
.txtBlue { color:#4ca4de; }
.txtBrown { color:#b5730f; }
.txtGreen { color:#539a14; }
.txtGray { color:#919295; }
.txtOrange { color:#f86d11; }
.txtPurple { color:#975f7a; }
.txtRed { color:#e23a3b; }
.txtYellow { color:#ff9; }
.txtPink { color:#f56f6c; }
.txtWhite { color:#fff; }

span.tag { display: inline-block; padding: 6px 12px; border-radius:999px; font-size: 1em; }
.tag_gray { background:#e2e2e2; color: #939393; }
.tag_yellow { background:#f7f093; color: #696638; }	/*#f6aa00*/
.tag_orange { background:#f6aa00; color: #fff; }
.tag_blue { background:#b4e1f3; color: #3f6a7b; }
.tag_green { background:#c8f9b4; color: #578245; }
.tag_red { background:#f7b4b4; color: #774e4e; }
.tag_purple { background:#814863; color: #fff; }
.tag_navy { background:#437a9a; color: #fff; }

.tag_red_border { background:#FFF; border:1px #DF4A50 solid; color: #DF4A50; }
.tag_navy_border { background:#FFF; border:1px #437a9a solid; color: #437a9a;
  padding: 2px 6px !important; margin-top:4px;
}

.number {}
.error { color:#f56e81; }

/* width */
.w40 { width:40px;}
.w50 { width:50px;}
.w60 { width:60px;}
.w80 { width:80px; }
.w100 { width:100px; }
.w150 { width:150px; }
.w180 { width:180px; }
.w200 { width:200px; }
.w250 { width:250px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w400 { width:400px; }
.w500 { width:500px; }
.w600 { width:600px; }
.w700 { width:700px; }
.w800 { width:800px; }

.w20p { width:20%; }
.w30p { width:30%; }
.w40p { width:40%; }
.w50p { width:50%; }
.w60p { width:60%; }
.w70p { width:70%; }
.w80p { width:80%; }
.w90p { width:90%; }

.heading { margin-bottom: 36px; }
.heading span { background: var(--my-danger); color:#FFF; padding:4px 8px; z-index:1; border-radius: 6px 6px 0 0; }
.heading hr { margin-top: 2px; border-bottom: var(--my-danger) 1px solid; }

/* notify block */
.notify-primary,
.notify-danger,
.notify-warning,
.notify-success {
  text-align:left; margin:8px 0; padding:6px 12px; border-radius: 3px; line-height:1.2em;
  font-size: 0.9em; width: auto;
}

.notify-primary { background-color: #E7F5FE; color:#5574AC; border:#98D2F6 1px solid; }
.notify-danger  { background-color: #FDE8E8; color:#AF5F5F; border:#FFA4A4 1px solid; }
.notify-warning { background-color: #FBF7E6; color:#B25F0D; border:#F3E58F 1px solid; }
.notify-success { background-color: #EEFFE2; color:#6D865B; border:#A2DA70 1px solid; }

/* ------------------------ { other } -------------------- */

.imgPreload img { width:100%; height:auto; }
.imgBorder { border:#ddd 1px solid; background:#fff; padding:2px; margin:0 2px; }
.jDate { background: #FFF url(/assets/images/calendar.png) no-repeat right;
		 background-position-x: 96%;
		 background-position-y: center;
}
.clear { clear:both; }

.videoBlock {
  width: 100%;
  margin-bottom: 30px;
}

/* 當 videoBlock 裡面完全沒有內容，或是裡面的 iframe 沒給 src 時隱藏 */
.videoBlock:not(:has(iframe[src])),
.videoBlock:not(:has(video)) {
  margin-bottom: 0;
}

.videoBlock > iframe,
.videoBlock > video {
  width: 100%;
  /* 移除 position: absolute，改用標準流的 aspect-ratio */
  aspect-ratio: 16 / 9;
  display: block;
}

.mobileBtn { display:none; }
@media (max-width: 767px) {
	.compBtn { display:none; }
	.mobileBtn { display:block; }
}

/* ------------------------ { button } -------------------- */

/* btn-primary */
.btn-primary { background-color: var(--my-primary); border-color: var(--my-primary); }
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover { background-color: var(--my-primary-hover); border-color: var(--my-primary-hover); }

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	background-color: var(--my-primary-active); border-color: var(--my-primary-active);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(128, 128, 128, 0.3);
}

/*btn-danger*/
.btn-warning { background-color: var(--my-danger); border-color: var(--my-danger); color:#fff; }
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover { background-color: var(--my-danger-hover); border-color: var(--my-danger-hover); color:#fff; }

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
	background-color: var(--my-danger-active); border-color: var(--my-danger-active); color:#fff;
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(128, 128, 128, 0.3);
}

/*btn-warning*/
.btn-warning { background-color: var(--my-warning); border-color: var(--my-warning); }
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover { background-color: var(--my-warning-hover); border-color: var(--my-warning-hover); }

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
	background-color: var(--my-warning-active); border-color: var(--my-warning-active);
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(128, 128, 128, 0.3);
}

/*btn-success*/
.btn-success { background-color: var(--my-success); border-color: var(--my-success); }
.btn-success:active,
.btn-success:focus,
.btn-success:hover { background-color: var(--my-success-hover); border-color: var(--my-success-hover); }

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
	background-color: var(--my-success-active); border-color: var(--my-success-active);
}
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(128, 128, 128, 0.3);
}

.btn-primary, .btn-primary:hover,
.btn-danger,  .btn-danger:hover,
.btn-warning, .btn-warning:hover,
.btn-success, .btn-success:hover {
    box-shadow: 0 2px 2px 0 rgba(128, 128, 128, 0.14), 0 3px 1px -2px
    rgba(128, 128, 128, 0.2), 0 1px 5px 0
    rgba(128, 128, 128, 0.12);
}

div.growlUI { background: url(/assets/images/icon_success.png) no-repeat 10px 10px; }
div.growlUI h1,
div.growlUI h2 {
		line-height: 40px;
    color: #fff;
    padding: 8px 4px 4px 58px; text-align: left;
}
div.growlUI h1 { font-size: 1em; }
div.growlUI h2 { font-size: 0.8em; }

.__nav > a { margin-bottom:6px; }

/* -------------------- { 開關切換 } -------------------- */
.switch { position: relative; width: 40px; margin-top:6px; }
/* 原checkbox樣式隱藏 */
.switch_checkbox { display: none; }
/* 主外框 */
.switch_label { display: block; overflow: hidden; cursor: pointer; border: 1px solid #ADBAC9; border-radius: 15px; }
/* 背景 */
.switch_inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.12s ease-in 0s; }
.switch_inner:before, .switch_inner:after {
  display: block;
  float: left;
  width: 50%; /* before和after各佔50% */
  height: 18px; /* 全按鈕高度 */
  line-height: 18px; /* ON OFF文字高度 */
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}
/* ON */
.switch_inner:before {
  content: "";
  background-color: #0d6efd;
}
/* OFF */
.switch_inner:after {
  content: "";
  background-color: #FFF;
  text-align: right;
}
/* 上面的小圓 */
.switch_circle {
  display: block;
  margin: 0px; /* 小圓距離上下左右margin */
  width: 12px; /* 小圓寬度 */
  height: 12px; /* 小圓高度 */
  position: absolute;
  top: 4px; /* 距離上邊緣 左右是和一開始的位置有關 */
  right: 22px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
  background-color: #ADBAC9;
  border-radius: 100px;
  transition: right 0.12s ease-in 0s;
}
.switch_checkbox:checked + .switch_label { border: 1px solid #0d6efd;  }
/* label和背景的移動 */
.switch_checkbox:checked + .switch_label .switch_inner { margin-left: 0; }
/* label和上面小圓的移動 */
.switch_checkbox:checked + .switch_label .switch_circle { right: 5px; background:#FFF; }

.list_content tbody tr:hover { background: #EFFFE8; transition: background-color 0.5s ease, opacity 0.5s ease; }
#sortable tr:hover { cursor: move; }

/* -------------------- { 銷售數據分析 } -------------------- */
.analytics-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.analytics-heading h4 { margin:0 0 6px; color:#222; font-size:1.25rem; font-weight:700; }
.analytics-heading p { margin:0; color:#8a8a8a; font-size:.88rem; }
.analytics-granularity { flex:0 0 auto; padding:6px 11px; border-radius:20px; background:#f0f1ff; color:#4b49ac; font-size:.78rem; font-weight:700; }
.analytics-filter-form { display:grid; grid-template-columns:minmax(210px, 1.35fr) minmax(145px, .8fr) minmax(145px, .9fr) minmax(145px, .9fr) auto; align-items:end; gap:14px; padding:18px; border:1px solid #e8e8ef; border-radius:10px; background:#fafafd; }
.analytics-filter-field label { display:block; margin-bottom:7px; color:#555; font-size:.82rem; font-weight:700; }
.analytics-filter-field .form-control { height:42px; border-color:#dddfe8; }
.analytics-shop-select-native { display:none !important; }
.analytics-shop-search { position:relative; }
.analytics-shop-search-input { padding-right:38px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.4.6 6 5.2 10.6.6 12 2l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 14px center; cursor:text; }
.analytics-shop-search-options { display:none; position:absolute; z-index:120; top:calc(100% + 5px); right:0; left:0; max-height:280px; overflow-y:auto; padding:6px; border:1px solid #dfe1e8; border-radius:8px; background:#fff; box-shadow:0 10px 25px rgba(35, 35, 55, .15); }
.analytics-shop-search-options.is-open { display:block; }
.analytics-shop-search-option { display:block; width:100%; padding:9px 11px; border:0; border-radius:6px; background:#fff; color:#444; font-size:.86rem; text-align:left; cursor:pointer; }
.analytics-shop-search-option:hover, .analytics-shop-search-option.is-active { background:#f0f1ff; color:#4b49ac; }
.analytics-shop-search-option.is-selected { color:#4b49ac; font-weight:700; }
.analytics-shop-search-empty { padding:14px 10px; color:#999; font-size:.84rem; text-align:center; }
.analytics-filter-submit { display:flex; gap:8px; }
.analytics-filter-submit .btn { display:inline-flex; align-items:center; justify-content:center; height:42px; padding-right:18px; padding-left:18px; white-space:nowrap; }
.analytics-summary-row { margin-top:20px; }
.analytics-summary-card { display:flex; align-items:center; gap:16px; min-height:104px; margin-bottom:18px; padding:18px 20px; border:1px solid #e8e8ef; border-radius:10px; background:#fff; }
.analytics-summary-icon { display:flex; flex:0 0 54px; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; font-size:1.65rem; }
.analytics-summary-content { min-width:0; }
.analytics-summary-card span { display:block; margin-bottom:7px; color:#858585; font-size:.82rem; }
.analytics-summary-card strong { color:#222; font-size:1.55rem; line-height:1.15; }
.analytics-summary-card strong small { font-size:.78rem; font-weight:600; }
.analytics-summary-sales .analytics-summary-icon { background:#fff2d8; color:#e39100; }
.analytics-summary-orders .analytics-summary-icon { background:#e5efff; color:#2563eb; }
.analytics-summary-average .analytics-summary-icon { background:#ddf8ee; color:#0b9a70; }
.analytics-chart-row { margin-top:2px; }
.analytics-chart-card { margin-bottom:18px; padding:18px; border:1px solid #e8e8ef; border-radius:10px; background:#fff; }
.analytics-chart-card h5 { margin:0 0 16px; color:#333; font-size:.95rem; font-weight:700; }
.analytics-chart-canvas { position:relative; height:310px; }

@media (max-width: 991px) {
  .analytics-filter-form { grid-template-columns:1fr 1fr; }
  .analytics-filter-shop, .analytics-filter-type { grid-column:1 / -1; }
  .analytics-filter-submit { grid-column:1 / -1; }
  .analytics-filter-submit .btn { flex:1; }
}
@media (max-width: 575px) {
  .analytics-heading { display:block; }
  .analytics-granularity { display:inline-block; margin-top:12px; }
  .analytics-filter-form { grid-template-columns:1fr; padding:14px; }
  .analytics-filter-shop, .analytics-filter-type, .analytics-filter-submit { grid-column:auto; }
  .analytics-filter-submit { flex-direction:column; }
  .analytics-chart-canvas { height:260px; }
}
/*
.table-responsive tbody tr:hover {
    background-color: rgba(227, 230, 255, 1);
}
*/

/* 盤商網店申請審查 */
.review-choice-intro { margin:0 0 12px; color:#666; font-size:.9rem; }
/* 網店前台與管理員代管入口 */
.admin-context-navbar .admin-site-nav { flex:1; min-width:0; margin-right:12px; }
/* 與盤商後台一致的身份卡片；總站以紅色區分。 */
.navbar.admin-context-navbar .navbar-menu-wrapper .navbar-nav .admin-identity { margin:0; }
.navbar.admin-context-navbar .admin-identity .admin-identity-trigger { display:flex; align-items:center; gap:9px; padding:6px 10px; border:1px solid #d4dfe7; border-radius:6px; background:#f4f7f9; color:#526d82; }
.navbar.admin-context-navbar .admin-identity .admin-identity-trigger:hover,
.navbar.admin-context-navbar .admin-identity .admin-identity-trigger:focus,
.navbar.admin-context-navbar .admin-identity.show .admin-identity-trigger { background:#e9eff3; border-color:#c7d3dd; color:#526d82; }
.admin-identity-icon { color:#526d82; font-size:26px; line-height:1; }
.admin-identity-text { display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; }
.admin-identity-label { color:#526d82; font-size:10px; font-weight:600; line-height:1.2; white-space:nowrap; }
.admin-identity-name { display:block; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#343a40; font-size:13px; font-weight:700; line-height:1.3; }
@media (max-width:991px) {
  .navbar.admin-context-navbar .navbar-menu-wrapper .navbar-nav-right { flex-shrink:0; }
  .navbar.admin-context-navbar .navbar-menu-wrapper .webcms-offcanvas-toggle { flex-shrink:0; margin-left:10px; }
  .admin-identity-name { max-width:120px; }
}
@media (max-width:575px) {
  .navbar.admin-context-navbar .admin-identity .admin-identity-trigger { gap:7px; height:38px; box-sizing:border-box; padding:4px 9px; border-radius:7px; }
  .admin-identity-text { gap:2px; }
  .admin-identity-label { font-size:9px; }
  .admin-identity-name { max-width:72px; font-size:12px; }
  .admin-identity-icon { display:none; }
}
.navbar.admin-context-navbar .admin-site-nav .nav-item { margin:0; }
.admin-public-site { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:4px 8px; border:1px solid #d6dee5; border-radius:4px; background:#f8fafc; color:#47667d; font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; text-decoration:none; }
.admin-public-site .mdi { font-size:14px; line-height:1; }
.admin-public-site:hover { color:#47667d; border-color:#8ca8bb; background:#edf4f8; text-decoration:none; }
.admin-public-site:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
@media (max-width:575px) {
  .admin-context-navbar .admin-site-nav { margin-right:6px; }
  .navbar.admin-context-navbar .navbar-menu-wrapper { padding-left:8px; padding-right:8px; }
}
.shop-entry-actions { display:flex; flex-wrap:wrap; gap:6px; }
.list_content .shop-entry-actions { flex-direction:column; align-items:flex-start; }
.shop-entry-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:28px; padding:4px 8px; border:1px solid; border-radius:4px; font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; transition:background-color .15s, border-color .15s; text-decoration:none; }
.shop-entry-button .mdi { font-size:14px; line-height:1; }
.shop-entry-button--store { color:#28709b; border-color:#b0cadb; background:#f7fbfe; }
.shop-entry-button--store:hover { color:#1c5274; border-color:#28709b; background:#eaf4fb; text-decoration:none; }
.shop-entry-button--manage { color:#406357; border-color:#b3cbbf; background:#f5faf7; }
.shop-entry-button--manage:hover { color:#284b3e; border-color:#406357; background:#e9f3ed; text-decoration:none; }
.shop-entry-button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.review-choice-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:12px; }
.review-choice { position:relative; display:flex; align-items:center; gap:13px; min-height:88px; margin:0; padding:16px; border:2px solid #e4e4e4; border-radius:10px; background:#fff; cursor:pointer; transition:.2s ease; }
.review-choice:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,.08); }
.review-choice input { position:absolute; top:12px; right:12px; width:18px; height:18px; cursor:pointer; }
.review-choice-icon { display:flex; flex:0 0 46px; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; font-size:1.5rem; }
.review-choice-text { display:block; padding-right:24px; }
.review-choice-text strong { display:block; margin-bottom:5px; color:#333; font-size:1.05rem; }
.review-choice-text small { display:block; color:#777; font-size:.82rem; line-height:1.55; }
.review-choice-open .review-choice-icon { background:#e3f7ea; color:#238447; }
.review-choice-close .review-choice-icon { background:#f4f4f4; color:#777; }
.review-choice-open:has(input:checked) { border-color:#35a65f; background:#f5fff8; box-shadow:0 0 0 3px rgba(53,166,95,.1); }
.review-choice-close:has(input:checked) { border-color:#888; background:#fafafa; box-shadow:0 0 0 3px rgba(90,90,90,.08); }
@media (max-width:575px) {
  .review-choice-grid { grid-template-columns:1fr; }
}