/* 廠商進駐申請表 / QR Code / 會員等級 彈窗 */

/* ============ 廠商進駐申請表 ============ */
.abox { width: 480px; height: auto; max-height: min(864px, 100%); background: #f8f9fd; border-radius: 24px; }
.aview { display: flex; flex-direction: column; min-height: 0; max-height: min(864px, calc(100vh - 40px)); }
.aview[hidden] { display: none; }
.aview--white { background: #fff; }
.ahead { position: relative; flex: none; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--primary-dark); color: #fff; }
.ahead h2 { font-weight: 500; font-size: 16px; letter-spacing: .48px; }
.ahead .modal__close { position: absolute; right: 20px; top: 16px; color: #fff; }
.ahead .modal__close:hover { background: rgba(255,255,255,.15); }
.ahead__back { position: absolute; left: 20px; top: 16px; width: 40px; height: 40px; padding: 8px; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.ahead--plain { background: transparent; justify-content: flex-end; }
.ahead--plain .modal__close { color: var(--text); }
.abody { padding: 20px; display: flex; flex-direction: column; gap: 24px; }
.abody--scroll { overflow-y: auto; min-height: 0; flex: 1; }
.afield { display: flex; flex-direction: column; gap: 8px; }
.afield label:not(.upload), .alabel { display: flex; gap: 2px; align-items: center; font-weight: 600; font-size: 14px; color: var(--text-strong); }
.afield label i, .alabel i { font-style: normal; font-size: 12px; color: rgba(245,47,106,.8); }
.afield input[type=text], .afield select {
  width: 100%; height: 48px; padding: 12px; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff;
  font: 400 14px/normal var(--font); color: var(--text); outline: none;
}
.afield input[type=text]:focus, .afield select:focus { border-color: var(--primary); }
.afield input::placeholder { color: #9aacb3; }
.afield select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232a2a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.afield select:invalid { color: #9aacb3; }
.afield.is-invalid input[type=text], .afield.is-invalid select, .afield.is-invalid .upload, .afield.is-invalid .catpick { border-color: #f52f6a; }
.upload { position: relative; width: 64px; height: 64px; border: 1px solid #a7e0ef; border-radius: 4px; background: #eaf9fd; cursor: pointer; overflow: hidden; display: block; }
.upload input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.upload__plus::before, .upload__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #7bc4d6; transform: translate(-50%, -50%); }
.upload__plus::before { width: 20px; height: 1.5px; }
.upload__plus::after { width: 1.5px; height: 20px; }
.upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.upload.has-file img { display: block; }
.upload.has-file .upload__plus { display: none; }
.upload.is-doc { background: #fff; }
.upload.is-doc img { display: none; }
.upload.is-doc::after { content: attr(data-name); position: absolute; inset: 4px; font-size: 11px; line-height: 14px; color: var(--primary-dark); overflow: hidden; word-break: break-all; }
.radios { display: flex; gap: 24px; font-size: 14px; color: var(--muted); }
.radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative; }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios span { width: 18px; height: 18px; border: 1.5px solid #9aacb3; border-radius: 50%; position: relative; background: #fff; }
.radios input:checked + span { border-color: var(--primary-dark); }
.radios input:checked + span::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary-dark); }
.radios label:has(input:checked) { color: var(--primary-dark); font-weight: 500; }
.catpick { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 12px; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff; font: 400 14px/normal var(--font); color: var(--text-strong); cursor: pointer; }
.catpick .is-empty { color: #9aacb3; }
.afoot { flex: none; display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid #e8edf3; background: #f8f9fd; }
.afoot--plain { border-top: 0; background: #fff; padding-top: 16px; }
.afoot .btn { padding: 12px 32px; }
.amsg { font-size: 14px; }
.amsg:empty { display: none; }
.amsg.fail { color: #f52f6a; }
.cats { gap: 8px; }
.cbtn { position: relative; display: flex; align-items: center; gap: 8px; flex: none; height: 48px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: var(--text-strong); cursor: pointer; }
.cbtn input { position: absolute; opacity: 0; pointer-events: none; }
.cbox { width: 16px; height: 16px; border: 1.5px solid #9aacb3; border-radius: 3px; position: relative; flex: none; background: #fff; }
.cbtn.is-on { border-color: var(--primary); }
.cbtn.is-on .cbox { background: #2aceed; border-color: #2aceed; }
.cbtn.is-on .cbox::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.aview--success { background: #fff; border-radius: 24px; }
.asuccess { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 20px 56px; }
.asuccess p { font-weight: 500; font-size: 22px; color: var(--primary-dark); }

/* ============ QR Code / 會員等級 ============ */
.qrbox { width: 640px; padding: 56px 40px; align-items: center; text-align: center; }
.qrbox__x { position: absolute; right: 20px; top: 20px; }
.qrbox h2 { font-weight: 500; font-size: 32px; color: var(--primary-dark); margin-bottom: 24px; }
.qrbox__code { width: 186px; height: 186px; border: 1px solid #e1e6ef; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff; }
.qrbox__code img { width: 142px; height: 142px; }
.qrbox p { margin-top: 16px; font-size: 18px; color: #9aacb3; }
.mbox { width: 800px; padding: 56px 80px 60px; }
.mbox h2 { text-align: center; font-weight: 500; font-size: 32px; color: var(--primary-dark); margin-bottom: 32px; }
.mtable__wrap { overflow-x: auto; border: 1px solid #e1e6ef; border-radius: 8px; }
.mtable { width: 100%; min-width: 520px; border-collapse: collapse; text-align: center; font-size: 14px; }
.mtable th, .mtable td { height: 68px; border-bottom: 1px solid #e1e6ef; padding: 0; }
.mtable tbody tr:last-child th, .mtable tbody tr:last-child td { border-bottom: 0; }
.mtable thead th { height: 84px; font-weight: 600; font-size: 14px; vertical-align: middle; }
.mtable thead th img { display: block; width: 40px; height: 40px; margin: 0 auto 2px; }
.mtable tbody th { width: 28%; font-weight: 500; color: var(--text-strong); line-height: 22px; }
.mtable tbody tr:hover { background: #eff4f8; }
.mtable td svg { display: inline-block; vertical-align: middle; }
.lv0 { color: #007497; }
.lv1 { color: #1aa9c9; }
.lv2 { color: #45535d; }
.lv3 { color: #f19600; }
.mtable td svg:has(use[href="#ic-no"]) { color: #9aacb3; }

@media (max-width: 767px) {
  .abox, .qrbox, .mbox { width: 100%; }
  .qrbox { padding: 56px 20px 40px; }
  .qrbox h2 { font-size: 22px; }
  .mbox { padding: 56px 16px 32px; }
  .mbox h2 { font-size: 24px; margin-bottom: 20px; }
  .mtable { min-width: 0; }
  .mtable tbody th { width: 30%; font-size: 13px; }
}
.modal__box:focus { outline: none; }