/* =====================================================================
   Shared interior-page redesign — restyles the common chrome used across
   the Member site's inner pages (newweb-head + back chevron + title,
   filter pill tabs, menu-row lists, form inputs, primary buttons, list
   cards). Load on interior pages that use `newweb-head`. 750-space px.
   NOT loaded on auth/home (those have their own sheets).
   ===================================================================== */

#wrapper { background: var(--ds-bg); font-family: var(--ds-font); }

/* The body is a fixed-height scaled canvas (basic.js reset_win), so the
   wrapper (or a child .ova) is always the scroll container. Any element
   wider than the 750px canvas makes the page horizontally scrollable,
   which on iOS Safari can swallow vertical swipes entirely — clamp it,
   and keep touch momentum on the vertical scrollers. */
#wrapper { overflow-x: hidden; }
#wrapper.ova, #wrapper .ova { -webkit-overflow-scrolling: touch; }

/* ── Header bar ── */
.newweb-head {
    background: var(--ds-surface); height: 82px; min-height: 82px;
    box-shadow: 0 1px 0 var(--ds-border); position: relative; z-index: 3;
}
.newweb-head .history-back,
.newweb-head .history-close {
    width: 82px; height: 82px; display: inline-flex; align-items: center;
    margin-left: 0 !important; background-image: none !important;
    font-size: 0; text-decoration: none; cursor: pointer;
}
.newweb-head .history-back {
    padding-left: 16px;
    box-sizing: border-box;
}
.newweb-head .history-back::before,
.newweb-head .history-close::before {
    content: "\2039"; font-size: 56px; color: var(--ds-text); font-weight: 400;
}
.newweb-head .head-title { color: var(--ds-text); font-size: 30px; font-weight: 600; text-align: center; }
.newweb-head .head-zw { width: 82px; flex: 0 0 82px; }

/* ── Floating back chip ──
   For detail pages that hide `newweb-head` for a full-bleed hero: a round
   translucent back control pinned over the image. position:fixed anchors to
   the transformed body (the scaled canvas), so it stays put while the
   wrapper scrolls. */
.ds-float-back {
    position: fixed; top: 24px; left: 24px; z-index: 6;
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 6px 20px rgba(28, 24, 6, .18);
    color: var(--ds-text); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.ds-float-back:active { background: #fff; }
.ds-float-back svg {
    width: 34px; height: 34px;
    fill: none; stroke: currentColor; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ── Filter pill tabs ── */
.tagrq {
    background: var(--ds-surface); gap: 15px; padding: 10px 30px 20px;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tagrq::-webkit-scrollbar { display: none; }
.tagrq .filter-item {
    flex: 0 0 auto; white-space: nowrap;
    height: 60px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ds-radius-pill); background: #fafafa;
    border: 2px solid var(--ds-border); color: var(--ds-text-tertiary); font-size: 26px; line-height: 1;
}
.tagrq .filter-item.atc { background: var(--ds-primary); color: #fff; border-color: var(--ds-primary); }
.tagrq .filter-item.atc:before { display: none; }

/* balance total line — the first bold line under the tabs */
#js-balance { color: var(--ds-primary); }

/* ── Menu-row lists (setting-rq etc.) ── */
.setting-rq {
    background: var(--ds-surface); border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-card); margin: 24px 30px 0; overflow: hidden;
}
.setting-rq .item {
    display: flex; align-items: center; height: 112px; padding: 0 34px;
    border-bottom: 2px solid var(--ds-bg-secondary);
}
.setting-rq .item:last-child { border-bottom: none; }
.setting-rq .item .flex-left { color: var(--ds-text); font-size: 31px; }
.setting-rq .item .flex-right {
    margin-left: auto; display: inline-flex; align-items: center;
    background: none !important; width: auto; height: auto;
}
.setting-rq .item .flex-right::after { content: "\203A"; color: var(--ds-text-tertiary); font-size: 40px; line-height: 1; }

/* ── Form fields ── */
.mem-info-input {
    margin: 10px 30px 0; background: #fafafa; border: 2px solid var(--ds-border);
    border-radius: 22px; padding: 0 28px; position: relative;
    display: flex; align-items: center; min-height: 100px; box-sizing: border-box;
}
.mem-info-input input,
.mem-info-input .disinput,
.mem-info-input textarea {
    border: none; background: transparent; font-size: 30px; color: var(--ds-text);
    min-height: 96px; line-height: 1.4; flex: 1 1 auto; width: 100%;
    display: flex; align-items: center; font-family: var(--ds-font);
}
.mem-info-input input::placeholder { color: var(--ds-placeholder); }
/* +852 prefix → inline flex prefix before the input */
.mem-info-input .num820 {
    position: static; order: -1; flex: 0 0 auto; width: auto;
    margin-right: 10px; color: var(--ds-text-tertiary); font-size: 30px;
}
.error-text { color: var(--ds-danger); font-size: 24px; }

/* ── Primary buttons ── */
.button-go, .btn-confirm {
    background: var(--ds-primary); color: #fff; border: none; box-shadow: none;
    border-radius: 22px; height: 100px; line-height: 100px; font-size: 32px; font-weight: 500;
    font-family: var(--ds-font); text-align: center; padding: 0 40px;
}
.button-go:disabled, .btn-confirm:disabled,
.button-go.disabled-control, .btn-confirm.disabled-control { background: #b5a75c; }

/* ── Generic list cards (優惠券/交易記錄/訂單/預約 lists) ── */
.pagelist, .flex-grow-1.ova { }
.ul-list, .list { padding: 8px 30px 40px; }
.ul-list > .item,
.list > .item {
    background: var(--ds-surface); border-radius: 20px; box-shadow: var(--ds-shadow-card);
    padding: 26px 30px; margin-bottom: 22px;
}