table.dataTable thead .sorting {
  background-image: url("/img/affiliate/datatables/sort_both.png")
}

table.dataTable thead .sorting_asc {
  background-image: url("/img/affiliate/datatables/sort_asc.png")
}

table.dataTable thead .sorting_desc {
  background-image: url("/img/affiliate/datatables/sort_desc.png")
}

table.dataTable thead .sorting_asc_disabled {
  background-image: url("/img/affiliate/datatables/sort_asc_disabled.png")
}

table.dataTable thead .sorting_desc_disabled {
  background-image: url("/img/affiliate/datatables/sort_desc_disabled.png")
}

.swal2-container {
  z-index: 3000;
}

.header .referral-code .code-copy .ic-link {
  -webkit-mask: url("/img/affiliate/icon/icon-link.svg") no-repeat center/40%;
  mask: url("/img/affiliate/icon/icon-link.svg") no-repeat center/40%;
}

.header .referral-code .btn-copy::before {
  -webkit-mask: url("/img/affiliate/icon/icon-copy-w.svg") no-repeat center/50%;
  mask: url("/img/affiliate/icon/icon-copy-w.svg") no-repeat center/50%;
}

.header .referral-code-mobile .code-copy button.btn-copy .ic-link {
  -webkit-mask: url("/img/affiliate/icon/icon-copy-w.svg") no-repeat center/40%;
  mask: url("/img/affiliate/icon/icon-copy-w.svg") no-repeat center/40%;
}

.form-group.form-column .btn-phone span {
  background-image: url("/img/affiliate/icon/icon-phone.svg");
}

.form-group.form-column .btn-mail span {
  background-image: url("/img/affiliate/icon/icon-mail.svg");
}

.tip-error .ic-error {
  background-image: url("/img/affiliate/icon/icon-error.svg");
}

.svg-mail {
  -webkit-mask: url("/img/affiliate/icon/icon-mail.svg") no-repeat center/60%;
  mask: url("/img/affiliate/icon/icon-mail.svg") no-repeat center/60%;
}

.svg-phone {
  -webkit-mask: url("/img/affiliate/icon/icon-phone.svg") no-repeat center/80%;
  mask: url("/img/affiliate/icon/icon-phone.svg") no-repeat center/80%;
}

.btn-vcode.sending .svg-mail {
  -webkit-mask: url("/img/affiliate/icon/icon-mail.svg") no-repeat center/32%;
  mask: url("/img/affiliate/icon/icon-mail.svg") no-repeat center/32%;
}

.upload-box {
  background-image: url("/img/affiliate/icon/icon-upload.png");
}

.tip-error .ic-error {
  background-image: url("/img/affiliate/icon/icon-error.svg");
}

.state-fail .verify-state-icon {
  -webkit-mask: url("/img/affiliate/icon/icon-error.svg") no-repeat center/contain;
  mask: url("/img/affiliate/icon/icon-error.svg") no-repeat center/contain;
}

.state-success .verify-state-icon {
  -webkit-mask: url("/img/affiliate/icon/icon-success.svg") no-repeat center/contain;
  mask: url("/img/affiliate/icon/icon-success.svg") no-repeat center/contain;
}

.state-review .verify-state-icon {
  -webkit-mask: url("/img/affiliate/icon/icon-review.svg") no-repeat center/contain;
  mask: url("/img/affiliate/icon/icon-review.svg") no-repeat center/contain;
}

.upload-box .icon-close {
  -webkit-mask: url("/img/affiliate/icon/icon-close.svg") no-repeat center/cover;
  mask: url("/img/affiliate/icon/icon-close.svg") no-repeat center/cover;
}
/* ===== 新版代理前台切換 banner =====
   登入頁 (login.jsp) 與登入後 (navbar.jsp) 共用同一條放在 header 上方的滿版 bar。
   素材的文字已燒在圖上, 因此只能等比縮放, 不能拉伸、也不能裁到文字:
     desktop  new-affiliate-banner.jpg         1920x80   = 24 : 1
     mobile   new-affiliate-banner-mobile.jpg  1170x240  = 4.875 : 1
   bar 高度由圖的比例決定 (= 視窗寬 / 比例), 收成 --af-fe-bar-h 一個變數,
   底下所有讓位的 override 都吃這個變數, 換圖時只要改比例與檔名。 */

:root {
  /* 滿版時 100vw/24 剛好等於圖寬, 不裁切也不留邊。
     上限 80px = 原圖高度, 超寬螢幕不放大, 兩側以圖的邊緣色補滿;
     下限 48px 避免窄視窗時縮成一條看不清的細線, 此時左右等量裁切,
     圖的內容集中在中間 1/3, 裁掉的是純底色。 */
  --af-fe-bar-h: clamp(48px, calc(100vw / 24), 80px);
  --af-fe-bar-img: url("/img/affiliate/new-affiliate-banner.jpg");
  --af-fe-bar-bg: #2a2f37; /* 取自 desktop 圖的左右邊緣 */
}

/* 手機直立換用 mobile 素材。
   media 條件必須與 template/style.css 的斷點逐字一致
   (max-aspect-ratio + max-width + orientation + hover), 否則 bar 高度與
   header/sidenav 會落在不同斷點的值上而錯位。 */
@media screen and (max-aspect-ratio: 13/9) and (max-width: 767px) and (orientation: portrait) and (hover: none) {
  :root {
    /* 1170/240 = 4.875。內容貼齊左右邊緣, 既不能裁切也不能留邊, 所以不設上下限 */
    --af-fe-bar-h: calc(100vw / 4.875);
    --af-fe-bar-img: url("/img/affiliate/new-affiliate-banner-mobile.jpg");
    --af-fe-bar-bg: #262d35;
  }
}

.af-fe-top-banner {
  display: block;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* template/style.css 的 .modal 是 z-index:2060 的滿版 fixed 容器,
     低於它 banner 會被蓋住而點不到; 同檔的 .swal2-container 也是為此用 3000 */
  z-index: 3000;
  height: var(--af-fe-bar-h);
  /* auto 100% = 貼齊高度等比縮放, 永不變形也不會裁到文字。
     置中後多出來的寬度由 --af-fe-bar-bg 補滿, 不足時左右等量裁切 */
  background: var(--af-fe-bar-bg) var(--af-fe-bar-img) no-repeat center / auto 100%;
  text-decoration: none;
  cursor: pointer;
}

.af-fe-top-banner:hover,
.af-fe-top-banner:focus {
  text-decoration: none;
  filter: brightness(1.08);
}

/* 文字已在圖上, 這裡只留給螢幕閱讀器, 視覺上隱藏 */
.af-fe-top-banner-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 登入頁: body 掛 has-af-fe-banner ---------- */
.has-af-fe-banner {
  padding-top: var(--af-fe-bar-h);
}

/* .modal 是 position:fixed, 不受 body 的 padding 影響, 要直接推它才會讓開 banner。
   template/style.css 的 .modal{padding:.5rem} 只覆寫 top, 左右下維持原值 */
.has-af-fe-banner .modal {
  padding-top: calc(.5rem + var(--af-fe-bar-h));
}

/* ---------- 登入後 (index.jsp / report/profile.jsp) ----------
   banner 由 navbar.jsp 輸出, 是 <header> 的前一個兄弟節點, 所以用 ~ 選取,
   兩個 shell 的 <body> 都不必額外掛 class; banner 沒顯示時整段完全不生效。
   template 的版型高度只有三組值 —— 3rem (desktop) / 11.5942028986vw (手機直立)
   / 6.5217391304vmax (手機橫放) —— 底下逐一補上 var(--af-fe-bar-h)。
   ⚠ 規則順序刻意與 template/style.css 相同: 這些選擇器的權重比 template 高,
   一旦順序不同就會蓋掉它原本的斷點行為。 */
.af-fe-top-banner ~ .header {
  top: var(--af-fe-bar-h);
}

.af-fe-top-banner ~ .container-flex {
  padding-top: calc(3rem + var(--af-fe-bar-h));
}

@media screen and (max-aspect-ratio: 13/9) and (max-width: 767px) and (orientation: portrait) and (hover: none) {
  .af-fe-top-banner ~ .container-flex {
    padding-top: calc(11.5942028986vw + var(--af-fe-bar-h));
  }
}

@media screen and (orientation: landscape) and (min-aspect-ratio: 13/9) and (hover: none) {
  .af-fe-top-banner ~ .container-flex {
    padding-top: calc(6.5217391304vmax + var(--af-fe-bar-h));
  }
}

/* ≤768: template 把 .container-flex 的 padding 歸零, 改由 .main 的 margin-top 讓位,
   .sidenav 也變成 fixed top:0 —— 這裡必須跟著改, 否則會重複偏移一次 */
@media screen and (max-width: 768px) {
  .af-fe-top-banner ~ .container-flex {
    padding-top: 0;
  }

  .af-fe-top-banner ~ .container-flex .sidenav {
    top: var(--af-fe-bar-h);
  }

  /* 手機側邊選單展開時是 height:100vh + overflow-y:hidden,
     bar 把它往下推之後要同步減掉, 否則選單底部會被裁掉且捲不到 */
  .af-fe-top-banner ~ .container-flex .toggle.sidenav,
  .af-fe-top-banner ~ .container-flex .toggle nav {
    height: calc(100vh - var(--af-fe-bar-h));
  }

  .af-fe-top-banner ~ .container-flex .main {
    margin-top: calc(3rem + var(--af-fe-bar-h));
    min-height: calc(100vh - 2.5rem - var(--af-fe-bar-h));
  }
}

@media screen and (max-width: 768px) and (max-aspect-ratio: 13/9) and (max-width: 767px) and (orientation: portrait) and (hover: none) {
  .af-fe-top-banner ~ .container-flex .main {
    margin-top: calc(11.5942028986vw + var(--af-fe-bar-h));
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) and (min-aspect-ratio: 13/9) and (hover: none) {
  .af-fe-top-banner ~ .container-flex .main {
    margin-top: calc(6.5217391304vmax + var(--af-fe-bar-h));
  }
}

/* 平板 (hover:none 但寬度 >768): template 會把 padding 重新宣告回 3rem, 照樣跟上 */
@media screen and (orientation: portrait) and (min-width: 1024px) and (max-height: 1366px) and (hover: none),
       screen and (orientation: landscape) and (min-width: 1366px) and (max-height: 1024px) and (hover: none),
       screen and (orientation: landscape) and (min-width: 1024px) and (max-height: 768px) and (hover: none) {
  .af-fe-top-banner ~ .container-flex {
    padding-top: calc(3rem + var(--af-fe-bar-h));
  }
}

/* desktop 的 sidenav 是 flex 不是 fixed, 靠 min-height 撐滿 header 以下的視窗;
   限定 ≥769px 以免蓋掉 template 在手機上給 .sidenav 的收合高度 */
@media screen and (min-width: 769px) {
  .af-fe-top-banner ~ .container-flex > .sidenav,
  .af-fe-top-banner ~ .container-flex .main {
    min-height: calc(100vh - 3rem - var(--af-fe-bar-h));
  }
}

/* 登入後的彈窗同樣是 fixed, 要讓開 banner 才不會被蓋住上緣 */
.af-fe-top-banner ~ .container-flex .modal {
  padding-top: calc(.5rem + var(--af-fe-bar-h));
}

/* 彈窗被 banner 往下推之後可用高度也要一併扣掉, 否則內容會被擠出視窗底部。
   .modal-dialog 是實際的內容框, template 給它 max-height:calc(100vh - 1rem) */
.has-af-fe-banner .modal-dialog,
.af-fe-top-banner ~ .container-flex .modal-dialog {
  max-height: calc(100vh - 1rem - var(--af-fe-bar-h));
}

/* 手機直立時 template 另外給 .modal 一個 calc(100vh - 110px) 的上限, 同樣要扣 */
@media screen and (max-aspect-ratio: 13/9) and (max-width: 767px) and (orientation: portrait) and (hover: none) {
  .has-af-fe-banner .modal,
  .af-fe-top-banner ~ .container-flex .modal {
    max-height: calc(100vh - 110px - var(--af-fe-bar-h));
  }
}