/* ============================================================
   noReset login_pop.css — PC 版（px + % + max-width）
   登入類彈窗：#regressmodal / #privacymodal / #successmodal 系列
   不依賴 reset.js
   ============================================================ */

/* --- Pass 0: foundation 修正 reset.css 的 body{font-size:.16rem} 塌陷 --- */
html { font-size: 16px; }
.nte-pop.modal { font-size: 14px; line-height: 1.5; }

/* --- 共用容器 & 工具 --- */
.nte-pop .rel { position: relative; }
.nte-pop .abs { position: absolute; }
.nte-pop .auto { left: 50%; transform: translateX(-50%); }

/* --- 大容器 --- */
.nte-pop .pop { display: block; position: relative; }
.nte-pop .popCont { width: 96%; max-width: 570px; margin: 0 auto; position: relative; }
.nte-pop .popCont1 {
  width: 100%;
  height: 735px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.nte-pop .popClose {
  position: absolute;
  top: 11px; right: 11px;
  width: 25px; height: 25px;
  background: url(https://res1-nte.iwplay.com.tw/images/pop/popClose.png) no-repeat 0 0;
  background-size: 100% auto;
  z-index: 1; border: none; cursor: pointer;
}
/* 參考 fanart/css/login.css：width + max-width
   補 margin auto 修正 BS4 <576px 預設 margin:0.5rem（無 auto）不置中問題 */
.nte-pop.modal .modal-dialog { width: 96%; max-width: 520px; margin-left: auto; margin-right: auto; }
.nte-pop.modal .modal-content { background: transparent; border: 0; border-radius: 0; }
.nte-pop.modal .modal-body { padding: 0; background: none;}
.nte-pop.regressmodal.modal .modal-dialog,
.nte-pop.bookedmodal_old.modal .modal-dialog,
.nte-pop.bookedmodal.modal .modal-dialog,
.nte-pop.successmodal.modal .modal-dialog,
.nte-pop.loginMsg.modal .modal-dialog { max-width: 500px; }
.nte-pop.bookedmodal.modal .modal-dialog { max-width: 500px; }

/* 修正：HTML 裡 .popCont 帶 abs 工具類會 position:absolute，
   在 modal-body 內會讓內容脫離文件流 → modal-content 高度塌陷 →
   BS4 .modal-dialog-centered 把「0 高」置中 → 視覺上彈窗頂部貼著畫面中線。
   在 modal-body 範圍內強制 .popCont 回到 relative 流 */
.nte-pop.modal .modal-body .popCont {
  position: relative !important;
  top: auto; left: auto; transform: none;
}

/* --- #regressmodal 預約登入 ---
   縮放 ×0.702（570→400）對齊 privacymodal 大小
   原版 @1920 值 × 0.702 */
.nte-pop.regressmodal .popCont1 {
  height: 645px;              /* 735 × 0.702 × 1.25 */
  background-image: url(https://res1-nte.iwplay.com.tw/images/pop/popCont1_ZRRPZRBDRPTJKTTJ.png);
}
.nte-pop.regressmodal .popClose {
  top: 13px; right: 13px;     /* 15 × 0.702 × 1.25 */
  width: 27px; height: 27px;  /* 30 × 0.702 × 1.25 */
}
.nte-pop.regressmodal .pop_yy_tit {
  top: 101px;                 /* 116 × 0.702 × 1.25 */
  width: 236px; height: 56px; /* 268 × 0.702 × 1.25, 62 × 0.702 × 1.25 */
  background: url(https://res1-nte.iwplay.com.tw/images/pop/pop_yy_form_tt.png) no-repeat 0 0;
  background-size: 100% auto;
}
.nte-pop.regressmodal .yyForm {
  top: 176px;                 /* 200 × 0.702 × 1.25 */
  width: 387px;               /* 440 × 0.702 × 1.25 */
}
.nte-pop.regressmodal .form-bg {
  width: 100%; height: 37px;  /* 41 × 0.702 × 1.25 */
  margin-bottom: 8px;
  border-radius: 19px;        /* 21 × 0.702 × 1.25 */
  background: #1d1d1d; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 13px; /* 15 × 0.702 × 1.25 */
}
.nte-pop.regressmodal .form-select {
  padding: 0; width: 30%; font-size: 12px;
  display: inline-block; border: 0; border-radius: 0;
  border-right: 2px solid #c7c7c7;
  height: auto; color: #fff; text-align: center;
  background-color: transparent; background-image: none;
}
.nte-pop.regressmodal .form-select:focus { color: #fff; border-right: 2px solid #c7c7c7; outline: none; box-shadow: none; }
.nte-pop.regressmodal .form-select option { background-color: #1d1d1d; }
.nte-pop.regressmodal .form-control {
  padding: 0; width: 65%; font-size: 12px;
  display: inline-block; border: 0; border-radius: 0;
  height: auto; color: #fff; background-color: transparent;
  padding-left: 4%; outline: none; box-shadow: none;
}
.nte-pop.regressmodal .form-control::placeholder { color: #828282; }
.nte-pop.regressmodal .form-control:focus { outline: none; box-shadow: none; border: 0; color: #fff; background-color: transparent; }

/* 隱私勾選（原版本來就用 position:absolute） */
.nte-pop.regressmodal .d-flex {
  position: absolute;
  top: 228px;                 /* 259 × 0.702 × 1.25 */
  left: 0; right: 0;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.nte-pop.bookedmodal_old .d-flex {
  position: absolute;
  top: 228px;                 /* 259 × 0.702 × 1.25 */
  left: 0; right: 0;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* bookedmodal_old 專用：.bookedForm z-index:50 會擋住 .d-flex 的點擊，
   提升 z-index 並用 pointer-events 精準放行只讓 checkbox+label 可點，
   其餘空白區域仍讓 form 底下的 captcha/sms 接收點擊 */
.nte-pop.bookedmodal_old .d-flex {
  z-index: 100;
  pointer-events: none;
}
.nte-pop.bookedmodal_old .d-flex > * {
  pointer-events: auto;
}
/* form-check-input：覆寫 BS4 預設 position:absolute + 負 margin-left */
.nte-pop.regressmodal .form-check-input {
  position: relative;
  width: 17px; height: 17px;  /* 19 × 0.702 × 1.25 */
  margin: 0 8px 0 0;
  padding: 0;
  border: 1px solid #000; border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.nte-pop.bookedmodal_old .form-check-input {
  position: relative;
  width: 17px; height: 17px;  /* 19 × 0.702 × 1.25 */
  margin: 0 8px 0 0;
  padding: 0;
  border: 1px solid #000; border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.nte-pop.regressmodal .form-check-input:checked,
.nte-pop.bookedmodal_old .form-check-input:checked {
  background-color: #fff; border-color: #000;
}
.nte-pop.regressmodal .form-check-input:checked[type="checkbox"],
.nte-pop.bookedmodal_old .form-check-input:checked[type="checkbox"] {
  background-image: url(https://res1-nte.iwplay.com.tw/images/pop/check.svg);
}
.nte-pop.regressmodal .form-check-label {
  margin: 0; padding: 0;
  color: #000; font-size: 12px; line-height: 17px;
  cursor: pointer;
  vertical-align: middle;
}
.nte-pop.bookedmodal_old .form-check-label {
  margin: 0; padding: 0;
  color: #000; font-size: 12px; line-height: 17px;
  cursor: pointer;
  vertical-align: middle;
}

/* 平台按鈕（.platform 本身在 in-flow，但它的子元素都是絕對定位） */
.nte-pop.regressmodal .platform {
  position: static;
}
.nte-pop.regressmodal .yy_platform_head {
  top: 349px;                 /* 397 × 0.702 × 1.25 */
  width: 396px;               /* 450 × 0.702 × 1.25 */
  text-align: center;
  font-size: 12px; color: #ddd;
}
.nte-pop.regressmodal .yy_platform {
  top: 379px;                 /* 431 × 0.702 × 1.25 */
  left: 0;
  width: 100%;
  display: flex; justify-content: center; flex-wrap: wrap;
}
.nte-pop.regressmodal .yy_platform button {
  width: 181px; height: 47px; /* 206 × 0.702 × 1.25, 52 × 0.702 × 1.25 */
  margin: 2px;
  background-size: 100% 100%; background-repeat: no-repeat;
  border: none; cursor: pointer;
  text-indent: -9999px; overflow: hidden; background-color: transparent;
  padding: 0; transition: transform 0.3s;
}
.nte-pop.regressmodal .yy_platform button:hover { transform: scale(1.05); }
/* 平台按鈕背景圖 */
.nte-pop .pop_yy_form .yy_platform .platform_pc {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_pc_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_pc.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_pc_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_iOS {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ios_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_iOS.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ios_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_Android {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_Android_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_Android.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_Android_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_host {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ps_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_yy_form .yy_platform .platform_host.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ps_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_pc {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_pc_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_pc.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_pc_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_iOS {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ios_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_iOS.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ios_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_Android {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_Android_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_Android.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_Android_on.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_host {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ps_off.png) no-repeat; background-size: cover;
}
.nte-pop .pop_booked_form .yy_platform .platform_host.on {
  background: url(https://res1-nte.iwplay.com.tw/images/pop/btn_ps_on.png) no-repeat; background-size: cover;
}
.nte-pop.regressmodal .platform_tip {
  position: absolute;
  top: 493px;                 /* 562 × 0.702 × 1.25 */
  font-size: 12px; color: #ddd;
  width: 72%; margin: 0 14%;
  line-height: 1.4;
}

/* 預約按鈕 */
.nte-pop.regressmodal .yySubmit {
  display: block;
  top: 547px;                 /* 622 × 0.702 × 1.25 */
  width: 331px; height: 51px; /* 378 × 0.702 × 1.25, 58 × 0.702 × 1.25 */
  background: url(https://res1-nte.iwplay.com.tw/images/pop/yySubmit.png) no-repeat 0 0;
  background-size: 100% auto;
}
.nte-pop.regressmodal .yySubmit:hover { background-position: 0 -51px; }

/* --- #privacymodal ---
   對齊原版 7.6×11rem 比例 @450 寬 → popCont3 450×653
   尺寸換算：× (400/570) = × 0.702 × 1.125 */
.nte-pop.privacymodal.modal .modal-dialog { max-width: 500px; }
.nte-pop.privacymodal .modal-content.popCont {
  width: 100%; max-width: 100%; margin: 0 auto;
  background: transparent; border: none; box-shadow: none;
  overflow: visible !important;
}
.nte-pop.privacymodal .popCont3 {
  width: 100%; height: auto !important; aspect-ratio: 760 / 1100;
  background: url(https://res1-nte.iwplay.com.tw/images/sdk/popCont3.png) no-repeat center top;
  background-size: 100% 100%;
  position: relative;
  padding: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
.nte-pop.privacymodal .res_poptt {
  position: absolute; top: 13.9%; left: 50%; transform: translateX(-50%);
  width: auto; height: 7%; aspect-ratio: 430 / 77;
  background: url(https://res1-nte.iwplay.com.tw/images/pop/pop_yy_privacy_tt.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.nte-pop.privacymodal .res_poptt img { display: none; }
.nte-pop.privacymodal .list_con {
  position: absolute; top: 23%; left: 50%; transform: translateX(-50%);
  width: 90%;
  margin: 0;
  height: 63%;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #888 #d5d5d5;
}
.nte-pop.privacymodal .list_con::-webkit-scrollbar { width: 6px; }
.nte-pop.privacymodal .list_con::-webkit-scrollbar-track { background: #d5d5d5; }
.nte-pop.privacymodal .list_con::-webkit-scrollbar-thumb { background: #888; border-radius: 50px; }
.nte-pop.privacymodal .list_con::-webkit-scrollbar-thumb:hover { background: #555; }
.nte-pop.privacymodal .list_con ol {
  font-size: 11px; font-weight: 400;
  padding-left: 14px; list-style: decimal;
  line-height: 1.6;
}
.nte-pop.privacymodal .popup_close {
  position: absolute;
  left: 50%; bottom: 4.5%;
  transform: translateX(-50%);
  padding: 7px 40px;
  font-size: 16px; color: #fff; background: #000;
  cursor: pointer; text-decoration: none; width: auto;
  transition: 0.3s;
}
.nte-pop.privacymodal .popup_close:hover { background: #333; }

/* --- #successmodal 預約成功系列 ---
   縮放 ×0.702（570→400）對齊 regressmodal / privacymodal / bookedmodal
   原版 popCont2 7.6×8rem = 570×600，aspect 19/20 */
.nte-pop.successmodal .modal-content.popCont {
  width: 100%; max-width: 100%; margin: 0;
  background: transparent; border: none; box-shadow: none;
}
.nte-pop.successmodal .popCont2 {
  width: 100%;
  aspect-ratio: 19 / 20;        /* 原版 7.6:8 */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;   /* 維持原始比例，不拉伸 */
  position: relative;
}
#successmodal .popCont2 {
  background-image: url(../../images/login/successmodal/popCont2_v2.webp);
}
#successmodal .pop_yySuccess_tit {
  top: 25%;                   /* 135/600 原版比例 */
  width: 80%;                   /* 458/570 */
  height: 25%;                  /* 150/600 */
  background: url(../../images/login/successmodal/pop_yy_qa_success_tt.webp) no-repeat center center;
  background-size: contain;
}
.nte-pop.successmodal .focus_social_btns {
  display: flex; justify-content: center; align-items: center; width: 100%;
  margin-top: 54%;
}
.nte-pop.successmodal .urban_icon_ios,
.nte-pop.successmodal .urban_icon_android {
  width: 48%; margin: 6.5% 1% 1.5% 1%;  /* 37/570, 6/570, 8/570 */
}
.nte-pop.successmodal .urban_icon_ios a,
.nte-pop.successmodal .urban_icon_android a { display: block; width: 100%; transition: 0.3s; }
.nte-pop.successmodal .urban_icon_ios a:hover,
.nte-pop.successmodal .urban_icon_android a:hover { transform: scale(1.1); }
.nte-pop.successmodal .urban_icon_ios img,
.nte-pop.successmodal .urban_icon_android img { width: 100%; display: block; }

/* --- #successmodal_sns 預約成功（社群 FB+DC） --- */
#successmodal_sns .popCont2 {
  background-image: url(../../images/login/successmodal_sns/popCont2_v2.webp);
}
#successmodal_sns .pop_yySuccess_tit {
  top: 25%;
  width: 80%;
  height: 25%;
  background: url(../../images/login/successmodal_sns/pop_yy_qa_success_tt.webp) no-repeat center center;
  background-size: contain;
}
#successmodal_sns .focus_fb_icon,
#successmodal_sns .focus_dc_icon { width: 38%; margin: 0 1% 1.5% 1%; }
#successmodal_sns .focus_fb_icon a,
#successmodal_sns .focus_dc_icon a { display: block; width: 100%; transition: 0.3s; }
#successmodal_sns .focus_fb_icon a:hover,
#successmodal_sns .focus_dc_icon a:hover { transform: scale(1.1); }
#successmodal_sns .focus_fb_icon a img,
#successmodal_sns .focus_dc_icon a img { width: 100%; }

/* --- #successmodal_dual 預約成功（雙平台） --- */
#successmodal_dual .popCont6 {
  width: 100%;
  aspect-ratio: 19 / 20;
  background: url(../../images/login/successmodal_dual/popCont6.png) no-repeat center top;
  background-size: 100% auto;
  position: relative;
}
#successmodal_dual .pop_dual_yySuccess_tit {
  top: 18.7%;                   /* 112/600 */
  width: 80%;
  height: 25%;
  background: url(../../images/login/successmodal_dual/pop_dual_pre_success.png) no-repeat center center;
  background-size: contain;
}
#successmodal_dual .dual_platform_btns {
  display: flex; justify-content: center; align-items: center; width: 100%;
  margin-top: 42%; gap: 2.5%;
}
#successmodal_dual .pp_btn_android_prereg {
  display: block; width: 35%; height: auto; aspect-ratio: 231/68;
  background: url(../../images/login/successmodal_dual/btn_android_prereg.png) no-repeat 0 0;
  background-size: 100% 100%; transition: transform 0.3s;
}
#successmodal_dual .pp_btn_ios_prereg {
  display: block; width: 30%; height: auto; aspect-ratio: 193/60;
  background: url(../../images/login/successmodal_dual/btn_ios_prereg.png) no-repeat 0 0;
  background-size: 100% 100%; transition: transform 0.3s;
}
#successmodal_dual .pp_btn_android_prereg:hover,
#successmodal_dual .pp_btn_ios_prereg:hover { transform: scale(1.05); }

/* --- #loginMsg 登入訊息 ---
   複製 #successmodal 數值，所有 selector 專屬 #loginMsg / .loginMsg class，與 successmodal 完全分離 */
.nte-pop.loginMsg .modal-content.popCont {
  width: 100%; max-width: 100%; margin: 0;
  background: transparent; border: none; box-shadow: none;
}
.nte-pop.loginMsg .loginMsgBody {
  width: 100%;
  aspect-ratio: 19 / 20;            /* 原版 popCont2 比例 7.6:8 */
  background: url(../../images/login/successmodal/popCont2_v2.webp) no-repeat center top;
  background-size: 100% auto;
  position: relative;
}
#loginMsg .loginMsgTit {
  top: 25%;                       /* 135/600 原版比例 */
  width: 80%;                       /* 458/570 */
  height: 25%;                      /* 150/600 */
  background: url(../../images/login/successmodal/pop_yy_qa_success_tt.webp) no-repeat center center;
  background-size: contain;
}
.nte-pop.loginMsg .loginMsgContent {
  display: flex; justify-content: center; align-items: center;
  width: 100%; margin-top: 54%;
  flex-direction: column;
  color: #fff; font-size: 14px; line-height: 1.5;
  text-align: center;
  padding: 0 8%;
  box-sizing: border-box;
}

/* --- #bookedmodal_old ---
   縮放 ×0.702（570→400）對齊 privacymodal / regressmodal
   原版 8.8rem = 660 × 0.702 = 463 */
#bookedmodal_old .popCont1 {
  height: 579px;              /* 660 × 0.702 × 1.25 */
  background-image: url(https://res1-nte.iwplay.com.tw/images/pop/popCont1_booked.webp);
}
.nte-pop.bookedmodal_old .popClose {
  top: 13px; right: 13px;
  width: 27px; height: 27px;
}
.nte-pop.bookedmodal_old .pop_booked_tit {
  top: 101px;                 /* 116 × 0.702 × 1.25 */
  width: 236px; height: 56px; /* 268 × 0.702 × 1.25, 62 × 0.702 × 1.25 */
  background: url(https://res1-nte.iwplay.com.tw/images/pop/pop_booked_form_tt.png) no-repeat 0 0;
  background-size: 100% auto;
}
.nte-pop.bookedmodal_old .bookedForm {
  top: 176px;                 /* 200 × 0.702 × 1.25 */
  width: 387px;               /* 440 × 0.702 × 1.25 */
  z-index: 50;
}
.nte-pop.bookedmodal_old .form-bg {
  width: 100%; height: 37px;  /* 41 × 0.702 × 1.25 */
  margin-bottom: 8px;
  border-radius: 19px;        /* 21 × 0.702 × 1.25 */
  background: #1d1d1d; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 13px; /* 15 × 0.702 × 1.25 */
}
.nte-pop.bookedmodal_old .form-select {
  padding: 0; width: 30%; font-size: 12px;
  display: inline-block; border: 0; border-radius: 0;
  border-right: 2px solid #c7c7c7;
  height: auto; color: #fff; text-align: center;
  background-color: transparent; background-image: none;
}
.nte-pop.bookedmodal_old .form-select:focus { color: #fff; outline: none; box-shadow: none; }
.nte-pop.bookedmodal_old .form-select option { background-color: #1d1d1d; }
.nte-pop.bookedmodal_old .form-control {
  padding: 0; width: 65%; font-size: 12px;
  display: inline-block; border: 0; border-radius: 0;
  height: auto; color: #fff; background-color: transparent;
  padding-left: 4%; outline: none; box-shadow: none;
}
.nte-pop.bookedmodal_old .form-control::placeholder { color: #828282; }
.nte-pop.bookedmodal_old .graphic_verification_code,
.nte-pop.bookedmodal_old .phone_verification_code {
  height: 40px;               /* 45 × 0.702 × 1.25 */
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.nte-pop.bookedmodal_old .graphic_verification_code .captcha,
.nte-pop.bookedmodal_old .phone_verification_code .smsCode {
  width: 230px; height: 37px; /* 262 × 0.702 × 1.25, 41 × 0.702 × 1.25 */
  font-size: 10px;
  padding: 3px 11px;
  border-radius: 32px;        /* 37 × 0.702 × 1.25 */
  border: 2px solid #141414; background: #fff;
}
.nte-pop.bookedmodal_old .graphic_verification_code .img_code {
  width: 146px; height: 37px; /* 165 × 0.702 × 1.25 */
}
.nte-pop.bookedmodal_old .graphic_verification_code .img_code .img_code_pic {
  width: 100%; height: 100%;
  border-radius: 15px;
  border: 2px solid #141414;
}
.nte-pop.bookedmodal_old .phone_verification_code .btn_get_code {
  width: 146px; height: 37px;
  background-image: url(https://res1-nte.iwplay.com.tw/images/pop/btn_get_code.png);
  background-size: 100% auto;
}
.nte-pop.bookedmodal_old .bkSubmit {
  display: block;
  top: 408px;                 /* 465 × 0.702 × 1.25 */
  width: 230px; height: 40px; /* 262 × 0.702 × 1.25, 46 × 0.702 × 1.25 */
  background: url(https://res1-nte.iwplay.com.tw/images/pop/bookedSubmit.png) no-repeat 0 0;
  background-size: 100% auto;
  z-index: 2;
}
.nte-pop.bookedmodal_old .bkSubmit:hover { background-position: 0 -40px; }
.nte-pop.bookedmodal_old .booked_button_bg {
  top: 326px;                 /* 371 × 0.702 × 1.25 */
  width: 98%;
  height: 111px;              /* 127 × 0.702 × 1.25 */
  background: url(https://res1-nte.iwplay.com.tw/images/pop/building.webp) no-repeat 0 0;
  background-size: 100% auto;
  z-index: 1;
}
.nte-pop.bookedmodal_old .Change_acc_hint {
  top: 470px;                 /* 536 × 0.702 × 1.25 */
  width: auto;
  color: #fff; font-size: 17px;
  text-align: center;
  margin: 0;
}
.nte-pop.bookedmodal_old .Change_acc_box {
  top: 493px;                 /* 562 × 0.702 × 1.25 */
  width: 381px;               /* 435 × 0.702 × 1.25 */
  height: 79px;               /* 90 × 0.702 × 1.25 */
  display: flex; flex-direction: row;
  justify-content: space-around; align-items: center;
}
.nte-pop.bookedmodal_old .Change_acc_btn {
  width: 49px; height: 49px;  /* 56 × 0.702 × 1.25 */
  background-size: 100% auto; background-position: 0 -49px;
  cursor: pointer;
}
.nte-pop.bookedmodal_old .Change_acc_btn.google { background-image: url(https://res1-nte.iwplay.com.tw/images/pop/google.svg); }
.nte-pop.bookedmodal_old .Change_acc_btn.ios { background-image: url(https://res1-nte.iwplay.com.tw/images/pop/ios.svg); }
.nte-pop.bookedmodal_old .Change_acc_btn.facebook { background-image: url(https://res1-nte.iwplay.com.tw/images/pop/facebook.svg); }

/* --- #bookedmodal（新版 SDK 登入） ---
   縮放 ×0.702×1.125 對齊 regressmodal / bookedmodal_old
   子元素用 CSS 絕對定位 + flex 排版（HTML 沒 .abs auto） */
#bookedmodal .popCont1 {
  width: 100%;
  height: auto;              /* 覆蓋 .nte-pop .popCont1 的 735px，讓 aspect-ratio 生效 */
  aspect-ratio: 760 / 1000;
  background: url(https://res1-nte.iwplay.com.tw/images/sdk/popCont1_booked_sdk.webp) no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;
}
.nte-pop.bookedmodal .popClose { top: 11px; right: 11px; width: 31px; height: 31px; }
#bookedmodal .demo-state-btns {
  position: absolute; top: 1.8%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 99;
}
#bookedmodal .demo-state-btns .btn {
  padding: 3px 8px; font-size: 9px; line-height: 1; min-width: 0;
  background-color: #dc3545; border-color: #dc3545; color: #fff;
}
#bookedmodal .pop_booked_tit {
  position: absolute; top: 13.9%; left: 50%; transform: translateX(-50%);
  width: auto; height: 7%; aspect-ratio: 430 / 65;
  background: url(https://res1-nte.iwplay.com.tw/images/sdk/pop_sdk_login_tt.png) no-repeat 0 0;
  background-size: 100% 100%;
}
#bookedmodal .bookedForm {
  position: absolute; top: 21%; left: 50%; transform: translateX(-50%);
  width: 86%; max-width: 451px; height: 33%; z-index: 50; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
#bookedmodal .form-bg {
  width: 100%; max-width: 387px; height: 37px; margin-bottom: 0; border-radius: 19px;
  background: #1d1d1d; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 13px;
}
#bookedmodal .graphic_verification_code,
#bookedmodal .phone_verification_code,
#bookedmodal .phone_password {
  width: 100%; max-width: 387px;  /* 與 form-bg 同寬 */
  height: 32px; margin-top: 0;
  display: flex; justify-content: space-evenly; align-items: center;
}
#bookedmodal .graphic_verification_code .captcha,
#bookedmodal .phone_verification_code .smsCode {
  width: 230px; height: 37px; font-size: 10px; padding: 3px 11px;
  border-radius: 32px; border: 2px solid #141414; background: #fff;
}
#bookedmodal .graphic_verification_code .img_code { width: 146px; height: 37px; }
#bookedmodal .graphic_verification_code .img_code .img_code_pic {
  width: 100%; height: 100%; border-radius: 18px; border: 2px solid #141414;
}
#bookedmodal .phone_verification_code .btn_get_code {
  width: 146px; height: auto; aspect-ratio: 400 / 100;
  background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/btn_get_code.png);
  background-size: 100% 200%;
  background-position: 0 0;
}
#bookedmodal .phone_verification_code .btn_get_code:hover { background-position: 0 100%; }
#bookedmodal .phone_password .phone_password_input {
  width: 100%; height: 37px; background: #fff; font-size: 10px;
  padding: 3px 11px; border-radius: 32px; border: 2px solid #141414;
  box-sizing: border-box;
}
#bookedmodal .form-select {
  padding: 0 11px; width: 131px; font-size: 12px;
  display: inline-block; border: 0; border-radius: 0;
  border-right: 2px solid #c7c7c7; height: auto; color: #fff;
  text-align: center; background-color: transparent; background-image: none;
  appearance: none; -webkit-appearance: none;
}
#bookedmodal .form-select:focus { color: #fff; border-right: 2px solid #c7c7c7; outline: none; box-shadow: none; }
#bookedmodal .form-select option { background-color: #1d1d1d; text-align: center; }
#bookedmodal .form-control {
  padding: 0 0 0 4%; width: 60%; font-size: 12px; font-weight: 500;
  display: inline-block; border: 0; border-radius: 0; height: auto; color: #fff;
  background-color: transparent; outline: none; box-shadow: none;
}
#bookedmodal .form-control::placeholder { color: #828282; }
#bookedmodal .form-control:focus { outline: none; box-shadow: none; border: 0; color: #fff; background-color: transparent; }
#bookedmodal .privacy-check { display: flex; align-items: center; justify-content: center; gap: 6px; }
#bookedmodal .form-check-input {
  position: relative; flex-shrink: 0; margin: 0; width: 17px; height: 17px;
  background-color: transparent; border: 2px solid #000;
  appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
#bookedmodal .form-check-input:checked { background-color: #fff; border-color: #000; }
#bookedmodal .form-check-input:checked[type="checkbox"] { background-image: url(https://res1-nte.iwplay.com.tw/events/pre-gacha/images/pop/sdk/check.svg); }
#bookedmodal .form-check-input[type="checkbox"] { border-radius: 0; }
#bookedmodal .form-check-label { margin: 0; padding: 0; color: #000; font-size: 3cqw; line-height: 17px; cursor: pointer; vertical-align: middle; }
#bookedmodal .button_box {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 61%; width: 86%; max-width: 451px; height: 22%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; background-color: transparent;
}
#bookedmodal .button_box .row { display: contents; }

#bookedmodal .button_box .row .btn { width: 90%; max-width: 226px; height: auto; aspect-ratio: 504 / 77; flex: none; margin: 0; }
#bookedmodal .button_box .btn {
  display: flex; justify-content: center; align-items: center; height: auto;
  background-repeat: no-repeat; background-position: 0 0; background-size: 100% 200%;
  border: none; padding: 0; font-size: 14px; color: #fff; cursor: pointer; background-color: transparent;
}
#bookedmodal .button_box .btn:hover { background-position: 0 100%; transform: none;}
#booked_button  { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/booked_button.png); }
#back_sms_button { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/back_sms_button.png); }
#phoneNextBtn   { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/phoneNextBtn.png); }
#back_button    { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/back_button.png); }
#select_role_button { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/booked_button.png); }
#back_role_button   { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/back_button.png); }
#bookedmodal .Change_acc_box {
  position: absolute; top: 82.5%; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 381px; display: flex; flex-direction: column; align-items: center; gap: 2%;
}
#bookedmodal .Change_acc_hint { position: static; color: #fff; font-size: 17px; line-height: 40px; text-align: center; margin: 0; }
#bookedmodal #other_login > .Change_acc_box {
  position: static; width: 100%; height: auto; transform: none; left: auto;
  display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 5%;
}
#bookedmodal .Change_acc_box .Change_acc_btn { width: 20%; max-width: 49px; height: auto; aspect-ratio: 1 / 1; background-size: 100% auto; background-position: 0 -49px; cursor: pointer; }
#bookedmodal .google   { background-image: url(https://res1-nte.iwplay.com.tw/events/pre-gacha/images/pop/sdk/google.svg); }
#bookedmodal .ios      { background-image: url(https://res1-nte.iwplay.com.tw/events/pre-gacha/images/pop/sdk/ios.svg); }
#bookedmodal .facebook { background-image: url(https://res1-nte.iwplay.com.tw/events/pre-gacha/images/pop/sdk/facebook.svg); }
#bookedmodal .ps       { background-image: url(https://res1-nte.iwplay.com.tw/images/sdk/ps5.png); }

/* 角色選擇區 */
#bookedmodal #select_role {
  position: absolute; top: 24.6%; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 451px; height: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; text-align: center;
}
#bookedmodal #select_role > div:first-child { margin: 0 !important; padding: 0 !important; color: #000; }
#bookedmodal #select_role .bookedForm { position: static; transform: none; left: auto; margin: 0 auto; height: auto; }
#bookedmodal #select_role .form-bg { padding: 0; }
#bookedmodal #role_select { width: 100%; padding: 0 11px; border-right: 0; text-align: center; }

/* --- .otherPlatform 社群圖示 --- */
.nte-pop .otherPlatform { display: flex; justify-content: center; }
.nte-pop .otherPlatform a {
  position: relative; margin: 0 5px; width: 34px; height: 34px;
  background: url(../../images/otherPlatform.png) no-repeat;
  background-position-y: 0; background-size: auto 200%;
}
.nte-pop .otherPlatform a:hover { background-position-y: -34px; }









@media (max-width: 576px) {
  #bookedmodal .popCont1 { aspect-ratio: 760 / 1200; }
  #bookedmodal .bookedForm { top: 20%; }
}