:root{
    /* 調色可依你的站點改 */
    --new-panel: #4a301b;
    --new-muted: #d9c7a5;
    --new-border: rgba(255,255,255,.2);
    --new-input-bg: #ffffff;
    --new-radius: 16px;
    --new-gap: 14px;
}


*{box-sizing:border-box}
.new-checkout{
    padding: 28px 16px 0px;
}
.new-form{
    max-width: 980px;
    margin: 0 auto;
}

/* 區塊卡片 */
.new-section{
    padding: 12px 12px;
    border-radius: 6px;
    margin-bottom:40px;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #67513c;
}

/* 標題 */
.new-legend{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--new-border);
    margin-bottom: 14px;
    color: #d7a86c;
}

/* 行排列：桌機左右、手機上下 */
.new-row{
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,.12);
}
.new-row:last-child{ border-bottom: 0; }

.new-label{
    flex: 0 0 110px;             /* 左側標籤寬 */

}
.new-input{
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.15);
    background: var(--new-input-bg);
    color: #000;
    outline: none;
    font-size: 16px;
}
.new-input:focus{
    border-color: #e5d2b2;
    box-shadow: 0 0 0 3px rgba(229,210,178,.25);
}

/* 小標題與選項群組 */
.new-subtitle{
    margin-top: 6px;
    color: var(--new-muted);
    font-weight: 600;
}
.new-options{
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
    padding-top: 10px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255,255,255,.12);
}
.new-options:last-child{ border-bottom: 0; }
.new-option{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.new-option input{ ;
    accent-color: #d1b06b;}

/* checkbox：同訂購人 */
.new-check{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    color: var(--new-muted);
    user-select: none;
}
.new-check input{ transform: translateY(1px); }

/* RWD */
@media (max-width: 840px){
    .new-row{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .new-label{
        flex-basis: auto;
    }
}
@media (max-width: 480px){
    .new-section{ padding: 18px 14px 8px; }
    .new-legend{ font-size: 16px; padding-bottom: 8px; }
}

@media (max-width: 768px){
    .new-checkout {
        padding-top: 30px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }
}

/* ===== Address (two-line, full width) ===== */
.new-address-group{ align-items: flex-start; }

.new-addr-wrapper{
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;                 /* 關鍵：外層允許撐滿 */
}

.new-addr-line1{
    display: flex;
    gap: 12px;
    align-items: center;
}

/* 視覺統一：select 與 input */
.new-select{
    appearance: none;
}

/* 寬度：城市/區/郵遞區號 */
.new-addr-line1 .new-select:nth-child(1){ width: 180px; }  /* 縣市 */
.new-addr-line1 .new-select:nth-child(2){ width: 180px; }  /* 區 */
.new-zip{
    width: 120px;
}

/* 上下分隔線 */
.new-addr-sep{
    height: 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin: 6px 0 8px;
}

/* 下排完整地址：一定滿版 */
.new-addr-line2{
    width: 100%;                /* 關鍵：輸入框滿版 */
    display: block;
}

/* RWD：手機改直向堆疊 */
@media (max-width: 840px){
    .new-addr-line1{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .new-addr-line1 .new-select:nth-child(1),
    .new-addr-line1 .new-select:nth-child(2),
    .new-zip{ width: 100%; }
}



.changePassword-wrapper {
    width: 100%;
    max-width: 400px;
    position: relative;
    background: linear-gradient(var(--panel-tint), var(--panel-tint)), var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding-top: 28px;
    padding-right: 28px;
    padding-left: 28px;
    padding-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
}

.changePassword-wrapper::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 1px solid #916328;
    pointer-events: none;
}

.changePassword-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    color: #FFFFFF;
}
.changePassword-form  label {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 16px;
}

.new-login-wrapper {
    width: 100%;
    max-width: 400px;
    position: relative;
    background: linear-gradient(var(--panel-tint), var(--panel-tint)), var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding-top: 28px;
    padding-right: 28px;
    padding-left: 28px;
    padding-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
}

.new-login-wrapper::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 1px solid #916328;
    pointer-events: none;
}

.new-login-title {
    font-size: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #916328;
    padding-bottom: 8px;
    color:#e9be84;
}

.new-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
    border: none;

}
.new-login-btn img {
    height: 50px;
}

.new-login-btn.fb {
    background-color: var(--btn-fb);
}
.new-login-btn.line {
    background-color: var(--btn-line);
}

.new-login-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 24px;
    text-align: center;
    color: #FFFFFF;
}

.new-login-form label {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 16px;
}

.new-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    color: #000000!important;
}

.new-submit-btn {
    background-color: #1c1109;
    color: white;
    border: none;
    padding: 10px 0;
    margin-top: 16px;
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.new-login-links {
    margin-top: 24px;
    font-size: 16px;
    color: #916328;
}
.new-login-links a {
    display:inline-block;
    text-decoration:none;
    color:#fff;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
    will-change: transform;
}
.new-login-links a:hover {
    color: #e9be84;
    border-color: #e9be84;
    outline: none;
    transform: translateY(-1px);
}



.new-member-panel{
    width: min(1100px, calc(100% - 40px)); /* 內縮 20px+20px，避免貼邊 */
    margin-left: auto;
    margin-right: auto;       /* 置中關鍵 */
    transform: translateX(var(--new-nudge-x));
}

/* 外層區塊鋪滿，避免外層容器造成看起來偏左 */
.new-member-section{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ====== Theme (可依站上主題微調) ====== */
:root{
    --new-bg: #3e2a17;            /* 整體深咖底 */
    --new-text: #f4ead7;          /* 主要文字 */
    --new-muted: #d9c7a5;         /* 次要文字 */
    --new-accent: #e9be84;        /* 金色重點 */
    --new-border: rgba(233,190,132,.55);
    --new-panel-bg: rgba(0,0,0,.06);
    --new-radius: 22px;
}


/* ====== Layout ====== */
.new-member-section{
    max-width: 900px;
    margin: 56px auto 72px;
    padding: 0 20px;
}

.new-member-panel{
    position: relative;
    background: linear-gradient(var(--panel-tint), var(--panel-tint)), var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding-top: 28px;
    padding-right: 28px;
    padding-left: 28px;
    padding-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 80px;
}

.new-member-panel::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 1px solid #916328;
    pointer-events: none;
}


/* 3 欄 → 2 欄 → 1 欄 RWD */
.new-member-grid{
    display:grid;
    gap: 28px 36px;
    grid-template-columns: 1fr;             /* mobile */
}
@media (min-width: 640px){
    .new-member-grid{ grid-template-columns: repeat(2,1fr); }  /* tablet */
}
@media (min-width: 960px){
    .new-member-grid{ grid-template-columns: repeat(3,1fr); }  /* desktop */
}

/* ====== Columns ====== */
.new-member-col{ min-width:0; }

.new-member-heading{
    margin: 6px 0 14px;
    font-size: 18px;
    color: #e9be84;
    letter-spacing:.06em;
    position: relative;
    padding-left: 1.1em;                    /* 為了放「- 」前綴 */
    font-weight:600;
}
.new-member-heading::before{
    content: "- ";
    position:absolute; left:0; top:0;
    color: var(--new-accent);
}

/* ====== Lists / Links ====== */
.new-member-list{
    list-style: none;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.new-member-link{
    display:inline-block;
    text-decoration:none;
    color:#fff;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
    will-change: transform;
}
.new-member-link:hover,
.new-member-link:focus{
    color: #e9be84;
    border-color: #d5b168;
    outline: none;
    transform: translateY(-1px);
}

/* 觸控裝置點擊範圍更好按 */
@media (hover:none){
    .new-member-link{ padding: 6px 0; }
}