/* ============================================================
   member-center.css — 會員中心 / 問卷 / 預約等轉換頁共用樣式
   載入順序：bootstrap.min.css → member-center.css → 頁面內嵌 style
   目的：bootstrap 只提供 grid/modal 機制；視覺全部高級化覆蓋
   ============================================================ */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    color: #1a1a1a;
    background: #f5f5f7;
    font-size: 14px;
    line-height: 1.6;
}
a { color: #111; text-decoration: none; }
a:hover, a:focus { color: #e74c3c; text-decoration: none; }
img { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #111; }

/* ---------- 頁面主容器 ---------- */
body { padding: 0; }
.main-container { max-width: 1280px; margin: 0 auto; padding: 24px 20px 56px; }
.main { background: #fff; border-radius: 18px; padding: 26px; box-shadow: 0 2px 18px rgba(0,0,0,0.05); }

/* ---------- 麵包屑 ---------- */
.breadcrumbs { margin-bottom: 20px; }
.breadcrumbs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #999; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li a { color: #666; }
.breadcrumbs li a:hover { color: #111; }
.breadcrumbs li span { color: #ccc; margin: 0 2px; }
.breadcrumbs li strong { color: #111; font-weight: 600; }

/* ---------- 頁面標題 ---------- */
.page-title { margin-bottom: 18px; }
.page-title h2, .page-title h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: #111; }
.page-title h4.checkout-sep { font-size: 17px; font-weight: 800; margin: 22px 0 14px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; }

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 18px; background: #fff; }
.table > thead > tr > th {
    background: #f8f8fa;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 14px;
    border: none;
    border-bottom: 2px solid #eee;
    text-align: left;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 13px 14px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: none; }
.table > tbody > tr:hover > td { background: #fafafa; }
.table > tfoot > tr > td { border: none; padding: 14px; background: #fafafa; }
.table-bordered { border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: #fcfcfd; }
.table-striped > tbody > tr:nth-of-type(odd):hover > td { background: #f6f6f8; }

/* ---------- 表單 ---------- */
.form-control {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    border: 1px solid #e2e2e6;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
}
.form-control:focus {
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
textarea.form-control { height: auto; padding: 10px 12px; line-height: 1.6; }
select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 34px; cursor: pointer; }
.form-control[readonly], .form-control[disabled] { background: #f2f2f4; color: #888; cursor: not-allowed; }
.form-group { margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 600; color: #555; }
.form-group .control-label { padding-top: 12px; }
.form-group .required { color: #e74c3c; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: #111; margin-right: 4px; vertical-align: middle; }
.input-sm { height: 34px; font-size: 13px; border-radius: 8px; }

/* ---------- 按鈕 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    border-radius: 10px;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.btn:hover { background: #e2e2e2; color: #111; transform: translateY(-1px); }
.btn:focus { outline: none; }
.btn-primary { background: #111; color: #fff; }
.btn-primary:hover { background: #e74c3c; color: #fff; box-shadow: 0 6px 16px rgba(231,76,60,0.28); }
.btn-danger { background: #e74c3c; color: #fff; }
.btn-danger:hover { background: #c0392b; color: #fff; }
.btn-success { background: #27ae60; color: #fff; }
.btn-success:hover { background: #1e8449; color: #fff; }
.btn-info { background: #3498db; color: #fff; }
.btn-info:hover { background: #2980b9; color: #fff; }
.btn-warning { background: #f39c12; color: #fff; }
.btn-warning:hover { background: #d68910; color: #fff; }
.btn-default { background: #fff; color: #333; border: 1px solid #ddd; }
.btn-default:hover { background: #f5f5f5; color: #111; border-color: #ccc; }
.btn-lg { padding: 13px 32px; font-size: 15px; border-radius: 12px; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Modal ---------- */
/* modal 必須高於主頁頭部（kc-header z-index:1200 / cart-sidebar 1400 / usermenu 1500） */
.modal { z-index: 2000 !important; }
.modal-backdrop { z-index: 1950 !important; background: rgba(0,0,0,0.5); }
.modal-content {
    border: none;
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid #f0f0f0; padding: 16px 22px; background: #fafafa; }
.modal-header .close { font-size: 24px; color: #999; opacity: 1; text-shadow: none; }
.modal-header .close:hover { color: #111; }
.modal-title { font-size: 17px; font-weight: 800; color: #111; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid #f0f0f0; padding: 14px 22px; background: #fafafa; }

/* ---------- Alert ---------- */
.alert { border: none; border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.alert-danger { background: #fdecea; color: #c0392b; }
.alert-info { background: #e8f4fd; color: #2471a3; }
.alert-success { background: #e8f8ec; color: #1e7e34; }
.alert-warning { background: #fcf8e3; color: #8a6d3b; }

/* ---------- 其他元件 ---------- */
.label { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.label-primary { background: #111; color: #fff; }
.label-danger { background: #fdecea; color: #e74c3c; }
.label-success { background: #e8f8ec; color: #1e7e34; }
.badge { background: #111; color: #fff; border-radius: 20px; padding: 3px 8px; font-size: 12px; }
.pull-right { float: right; }
.pull-left { float: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: #e74c3c; }
.text-success { color: #1e7e34; }
.text-muted { color: #999; }
.thumbnail { border: none; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 10px; background: #fff; }
.thumbnail img { border-radius: 10px; }
.list-group-item { border: 1px solid #eee; border-radius: 10px !important; margin-bottom: 8px; padding: 12px 16px; }
.list-group-item.active { background: #111; border-color: #111; color: #fff; }
.well { background: #f8f8fa; border: none; border-radius: 14px; box-shadow: none; padding: 20px; }
.panel { border: 1px solid #eee; border-radius: 14px; box-shadow: none; overflow: hidden; }
.panel-heading { background: #f8f8fa; border-bottom: 1px solid #eee; padding: 12px 18px; font-weight: 700; }
.panel-body { padding: 18px; }
.nav-tabs { border-bottom: 2px solid #eee; }
.nav-tabs > li > a { border: none; color: #888; font-weight: 600; padding: 10px 18px; margin-right: 4px; border-radius: 10px 10px 0 0; }
.nav-tabs > li > a:hover { background: #f5f5f5; color: #111; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: none; color: #111; border-bottom: 2px solid #111; background: transparent; }
.tab-content > .tab-pane { padding: 18px 4px; }
.nav-pills > li > a { border-radius: 20px; color: #666; padding: 8px 18px; }
.nav-pills > li.active > a { background: #111; color: #fff; }
.progress { border-radius: 20px; height: 10px; background: #eee; box-shadow: none; }
.progress-bar { background: #111; border-radius: 20px; }
.input-group-addon { background: #f5f5f5; border: 1px solid #e2e2e6; border-radius: 10px; color: #666; }
.input-group .form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .input-group-addon:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.caret { border-top: 4px solid currentColor; }
.dropdown-menu { border: none; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); padding: 8px; }
.dropdown-menu > li > a { padding: 9px 14px; border-radius: 8px; color: #333; font-size: 14px; }
.dropdown-menu > li > a:hover { background: #f5f5f5; color: #111; }
.dropdown-menu > li > a i { margin-right: 8px; color: #888; }
.pagination > li > a, .pagination > li > span { border: none; border-radius: 8px !important; color: #555; margin: 0 3px; padding: 8px 13px; }
.pagination > li.active > a { background: #111; color: #fff; }
.pagination > li > a:hover { background: #eee; color: #111; }
.popover { border: none; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

/* ---------- 響應式微調 ---------- */
@media (max-width: 768px) {
    .main-container { padding: 16px 12px 40px; }
    .main { padding: 16px; border-radius: 14px; }
    .table-responsive { border: none; }
    .form-group .control-label { padding-top: 0; }
    .col-xs-12 { width: 100%; }
}

/* ============================================================
   Bootstrap grid 修復（對抗主頁頭部 *{margin:0;padding:0} 全域重置）
   主頁頭部 style 在 body 內後載入，同優先級會覆蓋 bootstrap；
   用 !important 確保 grid 正常
   ============================================================ */
.container,
.container-fluid {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}
.row {
    margin-right: -15px !important;
    margin-left: -15px !important;
}
.row:before, .row:after,
.container:before, .container:after,
.container-fluid:before, .container-fluid:after {
    display: table !important;
    content: " " !important;
}
.row:after, .container:after, .container-fluid:after { clear: both !important; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative !important;
    min-height: 1px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    float: left !important;
}
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { width: 100% !important; }
@media (min-width: 768px) {
    .col-sm-1 { width: 8.33333333% !important; } .col-sm-2 { width: 16.66666667% !important; }
    .col-sm-3 { width: 25% !important; } .col-sm-4 { width: 33.33333333% !important; }
    .col-sm-5 { width: 41.66666667% !important; } .col-sm-6 { width: 50% !important; }
    .col-sm-7 { width: 58.33333333% !important; } .col-sm-8 { width: 66.66666667% !important; }
    .col-sm-9 { width: 75% !important; } .col-sm-10 { width: 83.33333333% !important; }
    .col-sm-11 { width: 91.66666667% !important; } .col-sm-12 { width: 100% !important; }
}
@media (min-width: 992px) {
    .col-md-1 { width: 8.33333333% !important; } .col-md-2 { width: 16.66666667% !important; }
    .col-md-3 { width: 25% !important; } .col-md-4 { width: 33.33333333% !important; }
    .col-md-5 { width: 41.66666667% !important; } .col-md-6 { width: 50% !important; }
    .col-md-7 { width: 58.33333333% !important; } .col-md-8 { width: 66.66666667% !important; }
    .col-md-9 { width: 75% !important; } .col-md-10 { width: 83.33333333% !important; }
    .col-md-11 { width: 91.66666667% !important; } .col-md-12 { width: 100% !important; }
}
@media (min-width: 1200px) {
    .col-lg-1 { width: 8.33333333% !important; } .col-lg-2 { width: 16.66666667% !important; }
    .col-lg-3 { width: 25% !important; } .col-lg-4 { width: 33.33333333% !important; }
    .col-lg-5 { width: 41.66666667% !important; } .col-lg-6 { width: 50% !important; }
    .col-lg-7 { width: 58.33333333% !important; } .col-lg-8 { width: 66.66666667% !important; }
    .col-lg-9 { width: 75% !important; } .col-lg-10 { width: 83.33333333% !important; }
    .col-lg-11 { width: 91.66666667% !important; } .col-lg-12 { width: 100% !important; }
}
/* ============================================================
   #page 高度修復（主頁頭部 #page 是整個頁面容器）
   - .main-container 的 bootstrap col-* 會 float:left → #page 塌陷
   - 加 clearfix 讓 #page 跟隨內容高度；main-container 取消 float
   ============================================================ */
#page:before,
#page:after {
    display: table !important;
    content: " " !important;
}
#page:after { clear: both !important; }
#page { overflow: visible !important; }

.main-container,
.main-container.col-sm-12,
.main-container.col-xs-12,
.main-container.col-md-12,
.main-container.col-lg-12 {
    float: none !important;
    width: auto !important;
}
/* ============================================================
   舊模板元素覆蓋（.button、裸 input/select/textarea/button）
   ============================================================ */
/* 舊模板 .button 按鈕 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border: none !important;
    border-radius: 10px;
    background: #111;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    box-shadow: none !important;
}
.button:hover { background: #e74c3c; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(231,76,60,0.28) !important; }
.button:disabled, .button.disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* 無 class 的裸 button/input 按鈕 */
button:not([class]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
}
button:not([class]):hover { background: #e74c3c; }
input[type=button]:not([class]), input[type=submit]:not([class]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
}
input[type=button]:not([class]):hover, input[type=submit]:not([class]):hover { background: #e74c3c; }

/* 無 class 的裸 input / select / textarea */
input[type=text]:not([class]), input[type=password]:not([class]),
input[type=email]:not([class]), input[type=tel]:not([class]),
input[type=number]:not([class]), input[type=date]:not([class]),
select:not([class]), textarea:not([class]) {
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    border: 1px solid #e2e2e6;
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea:not([class]) { height: auto; padding: 10px 12px; line-height: 1.6; }
input[type=text]:not([class]):focus, input[type=password]:not([class]):focus,
input[type=email]:not([class]):focus, input[type=tel]:not([class]):focus,
input[type=number]:not([class]):focus, input[type=date]:not([class]):focus,
select:not([class]):focus, textarea:not([class]):focus {
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
select:not([class]) { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; }
input[type=file]:not([class]) { font-size: 13px; color: #666; }

/* 無本地定義的頁面自訂按鈕 class */
.pro-add-to-cart,
.buttonBookingSystem,
.nextBookingSystem,
.prevBookingSystem,
.eventInfoBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px !important;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
}
.pro-add-to-cart:hover,
.buttonBookingSystem:hover,
.nextBookingSystem:hover,
.prevBookingSystem:hover,
.eventInfoBtn:hover { background: #e74c3c; color: #fff; transform: translateY(-1px); }
/* ============================================================
   麵包屑 icon + 分隔符修復
   - 舊頁面的分隔符 span 是亂碼字元（?），用 CSS 隱藏改用 ::after
   - 首頁連結加 home icon
   ============================================================ */
.breadcrumbs ul li.home a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f015";
    margin-right: 5px;
    color: #666;
}
.breadcrumbs ul li span {
    font-size: 0 !important;
    position: relative;
    width: 8px;
    display: inline-block;
}
.breadcrumbs ul li span::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px !important;
    color: #ccc;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================================
   checkout.asp 版面修復
   1) #otherInfoDiv 內 col-* 直接放 .form-group（無 .row 包裹），
      float 子元素溢出容器 → 加 clearfix
   2) .cart_navigation 舊模板 class 無樣式 → 補版面（clear 浮動、右對齊）
   ============================================================ */
#otherInfoDiv .main:before,
#otherInfoDiv .main:after,
#otherInfoDiv .form-group:before,
#otherInfoDiv .form-group:after {
    display: table !important;
    content: " " !important;
    clear: both !important;
}
/* .main 撐起高度：BFC（flow-root）+ overflow:hidden 雙保險，確保包住 float 的 col-* */
#otherInfoDiv .main {
    display: flow-root !important;
    overflow: hidden !important;
}
#otherInfoDiv .form-group {
    margin-right: -15px;
    margin-left: -15px;
    display: flow-root !important;
    overflow: hidden !important;
}
#otherInfoDiv .col-xs-12.col-md-4,
#otherInfoDiv .col-xs-12.col-md-12 {
    margin-bottom: 18px;
}
#otherInfoDiv label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    display: inline-block;
}
#otherInfoDiv input.form-control,
#otherInfoDiv textarea.form-control {
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    padding: 10px 14px;
    font-size: 14px;
    box-shadow: none;
    background: #fafafa;
}
#otherInfoDiv input.form-control:focus,
#otherInfoDiv textarea.form-control:focus {
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

/* cart_navigation：清除上方金額表 float，右對齊結賬列 */
/* 對照 W006 原版：cart_navigation 是 block + width:100%，內部 flexRow 全寬靠右；
   不能用 display:flex 包住 flexRow（會把 flexRow 壓縮成內容寬度 391px） */
.cart_navigation {
    clear: both !important;
    display: block !important;
    width: 100%;
    margin-top: 10px;
    padding: 0;
}
/* 父 div 寬度由 inline style 保證（display:flex;justify-content:flex-end;width:100%），
   CSS 不再覆蓋 display/justify（避免 !important 壓掉 inline flex） */
.cart_navigation > div {
    width: 100% !important;
}
/* ============================================================
   checkout 內容區內嵌 bootstrap .container 修正
   問題：checkout 內容區（col-main 940px）裡嵌了 bootstrap .container
   （≥992px 視窗固定寬度 970px）→ 超出父容器 30px → 頁面橫向滾動
   14px → 右側內容（條款/提交訂單按鈕）被推出視口
   修正：內容區內的 .container 改流式寬度，breadcrumbs 容器也一併處理
   ============================================================ */
.breadcrumbs .container,
.page-content .container {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* breadcrumbs 的 container 保留左右 padding，避免內部 .row 的負 margin 溢出 */
.breadcrumbs .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.page-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* ============================================================
   窄視窗（<900px）主頁頭部響應式修正
   問題：kc-logobar 的 logo+search+cartbtn 總寬超視口 → 頁面橫向滾動
   ============================================================ */
@media (max-width: 899.98px) {
    .kc-logobar { flex-wrap: wrap !important; }
    .kc-search { order: 3; flex: 1 1 100% !important; max-width: none !important; }
    .kc-cartbtn { margin-left: auto !important; }
}
.cart_navigation .checkbox {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
/* 重置 bootstrap .checkbox 類干擾：
   TermsCheckboxDiv 用了 bootstrap checkbox 類但結構不是標準的（input 不在 label 內），
   bootstrap 的 input[type=checkbox]{position:absolute;margin-left:-20px} 會把 checkbox
   絕對定位脫離 flex 流、向左偏 20px；.checkbox-inline{padding-left:20px} 把 label 推右 */
.cart_navigation .checkbox,
.cart_navigation .checkbox-inline {
    position: static !important;
    padding-left: 0 !important;
}
.cart_navigation .checkbox input[type="checkbox"],
.cart_navigation .checkbox-inline input[type="checkbox"] {
    position: static !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
.cart_navigation .checkbox label {
    font-size: 13px;
    color: #555;
}
.cart_navigation #TermsCheckout {
    width: 16px;
    height: 16px;
    accent-color: #111;
}
.cart_navigation #TermsError {
    width: 100%;
    justify-content: flex-end;
    margin: 6px 0 0;
    font-size: 12px;
}


/* ============================================================
   DeliveryNameModal 地址列表操作按鈕（d-name-btn）
   選擇=黑底白字 / 編輯=灰 / 刪除=紅，文字+icon 清晰可辨
   ============================================================ */
.d-name-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}
.d-name-btn i { font-size: 12px; }
.d-name-btn:first-child {
    background: #111 !important;
    color: #fff !important;
}
.d-name-btn:first-child:hover {
    background: #e74c3c !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.d-name-btn:nth-child(2) {
    background: #f0f0f0 !important;
    color: #333 !important;
}
.d-name-btn:nth-child(2):hover {
    background: #e2e2e2 !important;
}
.d-name-del {
    background: #fdecec !important;
    color: #d63031 !important;
}
.d-name-del:hover {
    background: #d63031 !important;
    color: #fff !important;
}
/* 表格操作欄寬度與對齊 */
#deliveryNameTable td:last-child {
    white-space: nowrap;
}
#DeliveryNameModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}


/* ============================================================
   DeliveryNameModal 表格寬度修正
   問題：9 欄表格 + modal-lg(900px) 寬度不足 → 操作欄被擠出 modal
   被 modal-content overflow:hidden 裁掉（電腦寬度看不到按鈕）
   修正：table-layout:fixed + 全百分比列寬
   ============================================================ */
#deliveryNameTableDiv .table {
    table-layout: fixed;
    width: 100%;
}
#deliveryNameTableDiv .table th,
#deliveryNameTableDiv .table td {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    vertical-align: middle;
}
#deliveryNameTableDiv .table th:nth-child(1),
#deliveryNameTableDiv .table td:nth-child(1) { width: 17%; }
#deliveryNameTableDiv .table th:nth-child(2),
#deliveryNameTableDiv .table td:nth-child(2) { width: 7%; }
#deliveryNameTableDiv .table th:nth-child(3),
#deliveryNameTableDiv .table td:nth-child(3) { width: 8%; }
#deliveryNameTableDiv .table th:nth-child(4),
#deliveryNameTableDiv .table td:nth-child(4) { width: 9%; }
#deliveryNameTableDiv .table th:nth-child(5),
#deliveryNameTableDiv .table td:nth-child(5) { width: 15%; }
#deliveryNameTableDiv .table th:nth-child(6),
#deliveryNameTableDiv .table td:nth-child(6) { width: 8%; }
#deliveryNameTableDiv .table th:nth-child(7),
#deliveryNameTableDiv .table td:nth-child(7) { width: 9%; }
#deliveryNameTableDiv .table th:nth-child(8),
#deliveryNameTableDiv .table td:nth-child(8) { display: none !important; }
#deliveryNameTableDiv .table th:nth-child(9),
#deliveryNameTableDiv .table td:nth-child(9) { width: 8%; }
#deliveryNameTableDiv .table th:last-child,
#deliveryNameTableDiv .table td:last-child { width: 19%; }
#deliveryNameTableDiv .table td:last-child { white-space: normal; }
#deliveryNameTableDiv .table td:last-child .d-name-btn { margin-bottom: 4px; }

/* ============================================================
   國際地址：非訪客地址摘要卡（checkout.asp）
   只顯示已選運輸地址，減少輸入框佔用；提交數據由 hidden 保留
   ============================================================ */
.addr-summary-card {
    background: linear-gradient(135deg, #f8f8fa, #f0f1f4);
    border: 1px solid #e4e5e9;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
}
/* 卡片佔滿整個運輸地址列（col-sm-6） */
#transportDiv .addr-summary-card,
.col-sm-6 .addr-summary-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.addr-summary-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.addr-summary-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    border-radius: 12px;
    font-size: 18px;
}
.addr-summary-info {
    flex: 1;
    min-width: 200px;
}
.addr-summary-line1 {
    font-size: 12px;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.addr-summary-line2 {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}
.addr-summary-line3 {
    font-size: 13px;
    color: #555;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #d5d6db;
}
.addr-summary-btn {
    flex-shrink: 0;
    background: #111 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.addr-summary-btn:hover {
    background: #e74c3c !important;
    color: #fff !important;
}
.addr-summary-line4 {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #d5d6db;
}
/* 非訪客時隱藏國家/省/市/地址/聯絡人/電話/郵編輸入框（hidden 保留） */
body.is-member #CountrySelectDiv,
body.is-member #area1Div,
body.is-member #area2Div,
body.is-member #addressSelectDiv,
body.is-member #ContactNameDiv,
body.is-member #ContactPhoneDiv,
body.is-member #postalCodeDiv {
    display: none !important;
}

/* 沒地址時：卡片只顯示「選擇地址」按鈕 */
.addr-summary-empty {
    background: transparent;
    border: 1px dashed #ccc;
    padding: 6px;
}
.addr-summary-empty .addr-summary-inner {
    justify-content: center;
}
.addr-summary-empty .addr-summary-icon,
.addr-summary-empty .addr-summary-info {
    display: none !important;
}
.addr-summary-empty .addr-summary-btn {
    width: 100%;
    text-align: center;
    border-radius: 10px !important;
}

/* ===== SweetAlert2 置頂修復：主頁頭部 z-index 1200+，彈窗要蓋過頭部 ===== */
.swal2-container { z-index: 2100 !important; }