@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP&family=Noto+Serif+TC:wght@200..900&display=swap');

html,
body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #333333;
    font-size: 1.125rem;
    line-height: 135%;
}

a {
    color: #666666;
    text-decoration: none;
}

a:hover {
    color: #ee6622;
    text-decoration: none;
}

@media all and (max-width:600px) {
    a {
        font-size: 1.125rem;
    }
}

table {
    width: 100%;
}

img {
    vertical-align: middle;
}

#ns_Wrapper {
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: 0px;
    padding: 0px;
    max-width: 500px;
    margin: 0 auto;
}

.ns_WrapperR1,
.ns_WrapperR3,
#ns_Wrapper4,
#ns_Wrapper6 {
    display: none;
}

#ns_Header {
    width: 100%;
    height: 30px;
    background: #538234;
    margin: 0px;
    padding: 0px;
    margin-bottom: 4px;
}

.ns_HeaderR1,
.ns_HeaderR3,
#ns_Header4,
#ns_Header6 {
    display: none;
}

#id_Header {
    width: 100%;
}

#id_HeaderLeft {}

#id_HeaderRight {}

#id_HeaderCol {
    width: 100%;
}

#ns_Footer {
    width: 100%;
    height: 30px;
    background: #538234;
    padding: 0px;
    margin-top: 8px;
}

.ns_FooterR1,
.ns_FooterR3,
#ns_Footer4,
#ns_Footer6 {
    display: none;
}

#id_Footer {
    width: 100%;
}

#id_FooterLeft {}

#id_FooterRight {}

#id_FooterCol {
    width: 100%;
}

#id_Menu {
    width: 100%;
    margin-bottom: 4px;
}

#id_MenuLeft {
    max-width: 50%;
    text-align: left;
}

#id_MenuRight {
    text-align: right;
}

.TopMenuUserName,
.TopMenuHome,
.TopMenuLoginLogout,
.TopMenuJoinPanel,
.TopMenuMemberCenter,
.TopMenuSearch {
    white-space: nowrap;
}

#id_CtrlBtn {
    display: none;
}

.TopMenuSearch {
    display: none;
}

#id_CtrlBtn>span {
    border-right: 1px solid #888;
    padding: 0px 10px 0px 10px;
}

#SearchBox {
    border: 1px solid #888888;
    color: #bbbbbb;
}

#SearchBox:focus {
    color: #333333;
}

#id_MemoLeft,
#id_MemoRight {
    width: 50%;
}

#ns_Copyright {
    width: 990px;
}

@media all and (max-width:990px) {
    body #ns_Wrapper {
        width: 100%;
    }

    body #ns_Copyright {
        width: 100%;
    }
}

#ns_Main {
    width: 100%;
    max-width: 1240px;
}

.ns_MainR1,
.ns_MainR3,
#ns_Main4,
#ns_Main6 {
    display: none;
}

#id_Main {
    width: 100%;
    height: 300px;
}

#id_Content {
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

#id_ColLeft {
    height: 100%;
    width: 180px;
}

#id_ColRight {
    height: 100%;
    width: 180px;
}

@media all and (max-width:599px) {

    body #id_ColLeft,
    body #id_ColRight {
        width: auto;
    }
}

#ns_Content {
    width: 100%;
}

.ns_ContentR1,
.ns_ContentR3,
#ns_Content4,
#ns_Content6 {
    display: none;
}

#ns_Content5 {}

#id_ContentTop {
    width: 100%;
    margin-bottom: 8px;
}

#id_ContentBottom {
    width: 100%;
    margin-top: 8px;
}

#id_ContTop {
    width: 100%;
}

#id_ContTopLeft {
    width: 34%;
}

#id_ContTopCenter {
    display: ;
}

#id_ContTopRight {
    width: 34%;
}

#id_ContBottom {
    width: 100%;
}

#id_ContBottomLeft {
    width: 34%;
}

#id_ContBottomCenter {
    display: ;
}

#id_ContBottomRight {
    width: 34%;
}

#id_PhpTop {
    width: 100%;
}

#id_PhpTopLeft {
    width: 50%;
}

#id_PhpTopRight {
    width: 50%;
}

#id_PhpBottom {
    width: 100%;
}

#id_PhpBottomLeft {
    width: 50%;
}

#id_PhpBottomRight {
    width: 50%;
}

#id_ColLeft .meMsg_MsgTitleBlk,
#id_ColRight .meMsg_MsgTitleBlk {
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    color: #000000;
    margin-bottom: 4px;
}

#id_ColLeft .meMsg_MsgBlk,
#id_ColRight .meMsg_MsgBlk {
    padding-left: 8px;
    padding-right: 8px;
}

#id_ColLeft .meMsg_MsgContentBlk,
#id_ColRight .meMsg_MsgContentBlk {
    padding-left: 8px;
    padding-right: 8px;
}

#id_ColLeft .meMsg_MsgListBlk,
#id_ColRight .meMsg_MsgListBlk {
    padding-left: 8px;
    padding-right: 8px;
}

#ns_Content .meMsgInfo {
    margin-bottom: 20px;
}

.meMsg_MsgTitleBlk {
    color: #000000;
    font-weight: normal;
}

.meMsg_MsgBlk img {}

.meMsg_MsgBlk .meMsg_MsgTitle {
    color: #333333;
    font-weight: bold;
}

.meMsg_MsgBlk .meMsg_MsgSubTitle {
    color: #333333;
    font-weight: bold;
}

.meMsg_MsgBlk .meMsg_Content {
    color: #555555;
    font-weight: normal;
    margin-top: 5px;
}

.meMsg_MsgURLList {
    margin: 0px;
    padding: 0px;
}

.meMsg_MsgURL {
    margin-left: 20px;
    list-style: disc outside;
    color: #222222;
}

.meMsg_MsgFileList {
    margin: 0px;
    padding: 0px;
}

.meMsg_MsgFile {
    margin-left: 20px;
    list-style: disc outside;
    color: #222222;
}

.meMsg_MsgList {
    margin-bottom: 10px;
}

.meMsg_MsgList td {}


#id_ContentTop .meMsg_MsgTitleBlk {
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    color: #000000;
    margin-bottom: 4px;
}

#id_ContentBottom .meMsg_MsgTitleBlk {
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    color: #000000;
    margin-bottom: 4px;
}

#id_ContTop .meMsg_MsgTitleBlk {
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    color: #000000;
    margin-bottom: 4px;
}

#id_ContBottom .meMsg_MsgTitleBlk {
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    color: #000000;
    margin-bottom: 4px;
}

#PageCtrl {
    font-weight: normal;
    color: #666666;
}

#PageCtrl a {
    font-weight: normal;
    color: #666666;
}

#PageCtrl .ThisPage a {
    font-weight: bold;
    color: #000000;
}

#PageCtrl .OtherPage a {
    font-weight: normal;
    color: #666666;
}

#MemberMenu {
    text-align: left;
}

/* forms elements */
.weFormDiv {}

.weForm {
    font-weight: normal;
    font-family: 細明體;
    color: #666666;
    width: auto;
}

.weForm .header {
    font-family: 細明體;
    font-weight: normal;
    text-align: center;
    padding: 4px;
    color: #000000;
    background-color: #a0a0a0;
}

.weForm .caption {
    font-family: 細明體;
    font-weight: normal;
    text-align: right;
    vertical-align: top;
}

.weForm td {
    font-family: 細明體;
    font-weight: normal;
    text-align: left;
    padding-top: 1px;
    padding-bottom: 1px;
}

.weForm hr {
    width: 99%;
    height: 0px;
    border: 1px #E18A00 solid;
}

.weForm a {
    font-weight: normal;
}

.weForm a:hover {
    font-weight: normal;
}

.weForm .formview {
    font-weight: normal;
    color: #222222;
    line-height: 150%;
}

.weForm .formbold {
    font-weight: bold;
    color: #222222;
    line-height: 150%;
}

.weForm .desc {
    font-family: 細明體;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

.weForm input {
    font-family: 細明體;
    height: 13px;
    border: 1px solid #bbbbbb;
    color: #666666;
    padding: 2px;
    margin: 0px;
    vertical-align: middle;
}

.weForm input:focus {
    border: 1px solid #888888;
}

.weForm input[type=submit] {
    height: 19px;
    padding: 1px;
}

.weForm input[type=button] {
    height: 19px;
    padding: 1px;
}

* html .weForm input {
    height: 12px;
}

* html .weForm input.button {
    height: 18px;
    padding: 1px;
    background: #dddddd;
}

.weForm select {
    font-family: 細明體;
    color: #000000;
    background-color: #ffffff;
    padding: 2px;
    vertical-align: middle;
    margin: 0px;
    border: 1px solid #bbbbbb;
}

.weForm select,
x:-moz-any-link {}

.weForm select,
x:-moz-any-link,
x:default {}

* html .weForm select {
    height: 19px;
}

*+html .weForm select {
    height: 19px;
}

.weForm textarea {
    width: 100%;
    font-weight: normal;
    font-family: 細明體;
    color: #000000;
    border: #a0a0a0 1px solid;
    background-color: #ffffff;
    padding: 3px;
    margin: 0px;
    box-sizing: border-box;
}

.ViewTextArea {
    width: 428px;
    color: #222222;
    background-color: white;
    border: 1px solid #a0a0a0;
    padding: 3px;
}

.weForm textarea,
x:-moz-any-link {
    width: 420px;
}

/* firefox 2 */
.weForm .ViewTextArea,
x:-moz-any-link {
    width: 428px;
}

/* firefox 2 */
.weForm textarea,
x:-moz-any-link,
x:default {
    width: 420px;
}

/* firefox 3 */
.weForm .ViewTextArea,
x:-moz-any-link,
x:default {
    width: 428px;
}

/* firefox 3 */
* html .weForm textarea {
    width: 420px;
}

/* ie 6 */
* html .weForm .ViewTextArea {
    width: 428px;
}

/* ie 6 */
*+html .weForm textarea {
    width: 418px;
}

/* ie 7 */
*+html .weForm .ViewTextArea {
    width: 426px;
}

/* ie 7 */

/* CSS 控制項 */
.isLogin1 .isLogin0 {
    display: none;
}

.isLogin0 .isLogin1 {
    display: none;
}

/* 管理後台內容區背景色 */
.PanelBgColor {
    background: #c0d0e0;
}


/* ══════════════════════════════════════
   iwin
   ══════════════════════════════════════ */

.iWinCaption {
    background-color: #538234;
}

.iWinBorder {
    border: 1px solid #538234;
    background-color: #ffffff;
    box-shadow: 0px 3px 15px #333333;
    border-radius: 5px;
}




/* ============================================================
   優惠券 — noon360 ptMyCouponCol3No1v2 覆蓋樣式
   對齊 mockup: .tk 票券設計（橘色邊框 · 左淺橘 + 右白 · 鋸齒邊）
   規則：body 前綴、禁 !important、禁流水編號
   ============================================================ */

/* ── Tokens ── */
body .ptMyCouponBind {
    --bg: #f6f3ed;
    --card: #fff;
    --line: #e7e0d6;
    --ink: #222;
    --muted: #7a7268;
    --orange: #D9822B;
    --orange-light: #FFF5E8;
    --orange-text: #8B5C2A;
    --red: #c95d54;
    --green: #0b7a3e;
    --green-soft: #e3f5e9;
    --navy: #1A3A5C;
    --radius: 14px;
}

/* ══════════════════════════════════════
   標題區 (mockup: sheet h3 + .sheet-sub)
   ══════════════════════════════════════ */
body .meMsgBase .meMsg_MsgTitle {
    font-size: 1.125rem;
    font-weight: 900;
    color: #222;
    display: block;
    margin-bottom: 4px;
}

body .meMsgBase .meMsg_Content {
    font-size: 0.875rem;
    color: #7a7268;
    margin-bottom: 16px;
    display: block;
}

/* ══════════════════════════════════════
   容器 .tbMain — 改為垂直堆疊
   ══════════════════════════════════════ */
body .tbMain {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    max-width: 480px;
    margin: 0 auto;
}

/* ══════════════════════════════════════
   票券外殼 .CouponArea  (mockup: .tk)
   保留 position:relative + 固定高度，
   讓 absolute 的 Coupon-side 翻牌正常運作
   ══════════════════════════════════════ */
body .CouponArea {
    width: 100%;
    min-width: unset;
    height: 160px;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    border: 2px solid #D9822B;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(217, 130, 43, .18);
    overflow: visible;
    transition: opacity .12s;
}

body .CouponArea:active {
    opacity: .85;
}

/* ── 已使用狀態 (mockup: .tk.used) ── */
/* pointer-events: none → 禁止翻牌，維持平台原行為 */
body .MemberInfo.PrdList .CouponArea.已使用 {
    border-color: #ccc;
    box-shadow: none;
    opacity: .68;
    cursor: default;
    filter: grayscale(.4);
    pointer-events: none;
}

/* ── 已過期狀態 (mockup: .tk.expired) ── */
body .MemberInfo.PrdList .CouponArea.已過期 {
    border-color: #e8b5b0;
    box-shadow: none;
    opacity: .6;
    cursor: default;
    filter: grayscale(.5);
    pointer-events: none;
}

/* ══════════════════════════════════════
   Coupon-side 共用 — 保留平台翻牌機制
   position:absolute + backface-visibility:hidden
   ══════════════════════════════════════ */
body .Coupon-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform .3s;
    border-radius: 14px;
    overflow: hidden;
}

/* ══════════════════════════════════════
   前面 .Coupon-front  (mockup: tk 內容)
   ══════════════════════════════════════ */
body .MemberInfo.PrdList .Coupon-front {
    display: flex;
    background: #fff;
}

/* 翻牌後前面隱藏 */
body .MemberInfo.PrdList .CouponArea.fliped .Coupon-front {
    transform: rotateY(180deg);
}

/* ══════════════════════════════════════
   左半 .CouponInfo  (mockup: .tk-left)
   ══════════════════════════════════════ */
body .CouponInfo {
    width: 108px;
    min-width: 108px;
    flex-shrink: 0;
    background: #FFF5E8;
    border-radius: 12px 0 0 12px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 8px;
    gap: 4px;
    position: relative;
}

/* 鋸齒邊分隔線 (mockup: .tk-left::after) */
body .CouponInfo::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom,
            transparent 0, transparent 6px,
            #D9822B 6px, #D9822B 12px);
}

/* 移除平台原本的半圓凹口 */
body .CouponInfo::before {
    display: none;
}

/* ── 圖示 .CouponIcon (mockup: .tk-icon) ── */
body .CouponIcon {
    width: 36px;
    height: 36px;
    background: #D9822B;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
}

body .CouponIcon::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.5' fill='white' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    padding: 10px;
    display: block;
    filter: none;
}

/* ── 類型標題 .CouponClasstitle (mockup: .tk-type) ── */
body .CouponClasstitle {
    font-size: 0.75rem;
    color: #8B5C2A;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.3;
    width: auto;
    text-align: center;
}

/* 隱藏 ::before / ::after 的自動文字 */
body .CouponClasstitle::before,
body .CouponClasstitle::after {
    content: none;
    display: none;
}

/* ── 折扣金額 .CouponDiscount (mockup: .tk-amt) ── */
body .CouponDiscount {
    margin-top: 2px;
    font-size: 1.375rem;
    font-weight: 900;
    color: #D9822B;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
}

body .CouponDiscount.amt {
    font-size: 0.8125rem;
    font-weight: 700;
}

/* 已使用 / 已過期的折扣色 */
body .MemberInfo.PrdList .CouponArea.已使用 .CouponDiscount,
body .MemberInfo.PrdList .CouponArea.已過期 .CouponDiscount {
    color: #999;
}

/* ══════════════════════════════════════
   右半 .CouponDetail  (mockup: .tk-right)
   ══════════════════════════════════════ */
body .CouponDetail {
    flex: 1;
    width: auto;
    background: #fff;
    border: none;
    border-radius: 0 12px 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* 移除平台原本的半圓凹口 */
body .CouponDetail::after {
    display: none;
}

/* ── 內容 padding ── */
body .CouponPadding {
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    flex-direction: column;
}

/* ── 券名 .defaultTitle.prdname (mockup: .tk-name) ── */
body .defaultTitle.prdname {
    font-size: 1rem;
    font-weight: 900;
    color: #222;
    margin: 0 0 2px;
    line-height: 1.4;
}

/* ── 隱藏不需要的欄位 ── */
body .MemberInfo.PrdList .CouponBody,
body .MemberInfo.PrdList .bookingSource,
body .MemberInfo.PrdList .CouponFooter ul,
body .MemberInfo.PrdList .CouponHeader+.CouponBody .divFlex {
    display: none;
}

/* ── 使用期限 .defaulttext.validdt (mockup: .tk-expire) ── */
body .CouponFooter {
    margin: 0;
}

body .defaulttext.validdt {
    font-size: 0.75rem !important;
    color: #8B5C2A;
    font-weight: 700;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}

body .defaulttext.validdt b {
    display: block;
    font-size: 0.875rem;
    font-weight: 900;
    color: #c95d54;
    margin-top: 1px;
}

/* ── 已使用的邊框色 ── */
body .CouponArea.已使用 .CouponInfo,
body .CouponArea.已使用 .CouponDetail {
    border: none;
}

body .CouponArea.已使用 .CouponInfo::before,
body .CouponArea.已使用 .CouponDetail::after {
    display: none;
}

body .CouponArea.已使用 .CouponInfo::after {
    background: repeating-linear-gradient(to bottom,
            transparent 0, transparent 6px,
            #ccc 6px, #ccc 12px);
}

/* ── 已過期的邊框色 ── */
body .MemberInfo.PrdList .CouponArea.已過期 .CouponInfo,
body .MemberInfo.PrdList .CouponArea.已過期 .CouponDetail {
    border: none;
}

body .MemberInfo.PrdList .CouponArea.已過期 .CouponInfo::before,
body .MemberInfo.PrdList .CouponArea.已過期 .CouponDetail::after {
    display: none;
}

body .MemberInfo.PrdList .CouponArea.已過期 .CouponInfo::after {
    background: repeating-linear-gradient(to bottom,
            transparent 0, transparent 6px,
            #e8b5b0 6px, #e8b5b0 12px);
}

body .MemberInfo.PrdList .CouponArea.已使用 .CouponDetail,
body .MemberInfo.PrdList .CouponArea.已過期 .CouponDetail {
    background: #fff;
}

/* ── 已使用的 CouponIcon ── */
body .MemberInfo.PrdList .CouponArea.已使用 .CouponIcon,
body .MemberInfo.PrdList .CouponArea.已過期 .CouponIcon {
    background: #bbb;
}

body .MemberInfo.PrdList .CouponArea.已使用 .CouponIcon::before,
body .MemberInfo.PrdList .CouponArea.已過期 .CouponIcon::before {
    filter: none;
    opacity: 1;
}

/* ══════════════════════════════════════
   使用狀態 Badge（用 .CouponMemo .text1 或 validdt 後追加）
   用 CouponArea class 控制顯示
   ══════════════════════════════════════ */
/* 可使用狀態 — 在 CouponFooter 後顯示 badge */
body .MemberInfo.PrdList .CouponArea:not(.已使用):not(.已過期) .CouponPadding::after {
    content: "可使用";
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    font-weight: 900;
    width: fit-content;
    margin-top: 4px;
    background: #e3f5e9;
    color: #0b7a3e;
    border: 1px solid #9dd4ae;
}

body .MemberInfo.PrdList .CouponArea.已使用 .CouponPadding::after {
    content: "已核銷";
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    font-weight: 900;
    width: fit-content;
    margin-top: 4px;
    background: #f0eee9;
    color: #7a7268;
    border: 1px solid #e5ddd6;
}

body .MemberInfo.PrdList .CouponArea.已過期 .CouponPadding::after {
    content: "已過期";
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    font-weight: 900;
    width: fit-content;
    margin-top: 4px;
    background: #ffe9e8;
    color: #c95d54;
    border: 1px solid #f3c9c5;
}

/* ══════════════════════════════════════
   背面 .Coupon-back  (翻牌後)
   保持 transform:rotateY(180deg) 預設
   fliped 時變 rotateY(0deg) 顯示
   ══════════════════════════════════════ */
body .MemberInfo.PrdList .Coupon-back {
    border-radius: 14px;
    border: none;
    background: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
}

body .MemberInfo.PrdList .CouponArea.fliped .Coupon-back {
    transform: rotateY(0deg);
}

body .MemberInfo.PrdList .Coupon-back::before,
body .MemberInfo.PrdList .Coupon-back::after {
    display: none;
}

/* 背面內容佈局 */
body .MemberInfo.PrdList .Coupon-back .memo-title {
    display: none;
}

body .MemberInfo.PrdList .Coupon-back .memo-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 90%;
    height: auto;
    max-height: 90px;
    flex: 1;
    margin: 14px 0 0;
}

body .MemberInfo.PrdList .Coupon-back .Couponname {
    font-size: 1rem;
    font-weight: 900;
    color: #222;
    text-align: left;
    width: auto;
    flex: 1;
    display: block;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    line-height: 1.4;
}

body .MemberInfo.PrdList .Coupon-back .showCouponbtn {
    width: auto;
    text-align: center;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

body .MemberInfo.PrdList .Coupon-back .showCouponbtn button.showCouponbtn {
    background: none;
    border: 1.5px solid #e7e0d6;
    border-radius: 10px;
    padding: 4px;
    cursor: pointer;
}

body .MemberInfo.PrdList .Coupon-back .showCouponbtn img {
    max-width: 80px;
    max-height: 80px;
}

body .MemberInfo.PrdList .Coupon-back .CouponMemo {
    display: none;
}

/* 背面底部 */
body .MemberInfo.PrdList .Coupon-back .bottom {
    position: relative;
    bottom: auto;
    width: 90%;
    margin: 6px 0 10px;
    padding-top: 6px;
    border-top: 1px solid #e7e0d6;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

body .MemberInfo.PrdList .Coupon-back .bottomblk1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

body .MemberInfo.PrdList .Coupon-back .validdt-back {
    font-size: 0.75rem;
    color: #8B5C2A;
    font-weight: 600;
}

body .MemberInfo.PrdList .Coupon-back .CouponCode {
    font-size: 0.75rem;
    color: #7a7268;
    padding: 0;
}

body .MemberInfo.PrdList .Coupon-back .bottomblk2 {
    flex-shrink: 0;
}


/* ══════════════════════════════════════
   錯誤 / 空狀態
   ══════════════════════════════════════ */
body .ptMyCouponBind .txt_MsgEmpty {
    min-height: 80px;
    padding: 24px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #7a7268;
    text-align: center;
}

/* ══════════════════════════════════════
   加入禮 (JoinGift) 覆蓋 — 統一橘色風格
   不使用平台的藍色 joingift 樣式
   ══════════════════════════════════════ */
body .MemberInfo.PrdList [ty*="joingift"] .CouponInfo,
body .MemberInfo.PrdList [ty*="joingift"] .CouponDetail {
    border: none;
}

body .MemberInfo.PrdList [ty*="joingift"] .CouponInfo::before {
    display: none;
}

body .MemberInfo.PrdList [ty*="joingift"] .CouponDetail::after {
    display: none;
}

body .MemberInfo.PrdList [ty*="joingift"] .CouponDetail {
    background: #fff;
}

body .MemberInfo.PrdList [ty*="joingift"] .CouponDiscount {
    color: #D9822B;
}

body .MemberInfo.PrdList [ty*="joingift"] .CouponClasstitle::before,
body .MemberInfo.PrdList [ty*="joingift"] .CouponClasstitle::after {
    content: none;
    display: none;
}

/* 生日禮也統一 */
body .MemberInfo.PrdList [ty*="birthday"] .CouponInfo,
body .MemberInfo.PrdList [ty*="birthday"] .CouponDetail {
    border: none;
}

body .MemberInfo.PrdList [ty*="birthday"] .CouponInfo::before {
    display: none;
}

body .MemberInfo.PrdList [ty*="birthday"] .CouponDetail::after {
    display: none;
}

body .MemberInfo.PrdList [ty*="birthday"] .CouponDetail {
    background: #fff;
}

body .MemberInfo.PrdList [ty*="birthday"] .CouponDiscount {
    color: #D9822B;
}

body .MemberInfo.PrdList [ty*="birthday"] .CouponClasstitle::before,
body .MemberInfo.PrdList [ty*="birthday"] .CouponClasstitle::after {
    content: none;
    display: none;
}

/* ══════════════════════════════════════
   RWD
   ══════════════════════════════════════ */
@media (max-width: 540px) {
    body .CouponArea {
        width: 99%;
        height: 190px;
        min-width: unset;
        margin: 0px 0px 0px -1px;
    }

    body .CouponInfo {
        width: 100px;
        min-width: 100px;
        padding: 14px 6px;
    }

    body .CouponInfo {
        flex-direction: column;
    }

    body .CouponDiscount {
        font-size: 1.25rem;
    }
}

@media (max-width: 360px) {
    body .CouponInfo {
        width: 90px;
        min-width: 90px;
    }

    body .CouponDiscount {
        font-size: 1.125rem;
    }

    body .defaultTitle.prdname {
        font-size: 0.9375rem;
    }
}



/* ══════════════════════════════════════
    彈出視窗的優惠券
   ══════════════════════════════════════ */

body .iWinBorder .Coupon-side {
    width: auto;
}


/*按鈕*/
body fieldinfo * {
    font-size: 1.125rem;
    border: 1px solid #e7e0d6;
    background: #f8f7f4;
    border-radius: 10px;
    padding: 14px;
    font-weight: 700;
}

#iWin_iWinContent .notice {
    margin: 60px 0 10px;
}

@media (max-width: 540px) {
    body .iWinBorder .CouponArea {
        width: 90%;
        min-width: unset;
    }
}


.divCouponUsed .t4 input {
    width: 90%;
    font-size: 1.125rem;
    border: 1px solid #e7e0d6;
    background: #f8f7f4;
    border-radius: 10px;
    padding: 14px;
    font-weight: 700;
}





/* ============================================================
   會員卡
   ============================================================ */
#QRCode canvas {
    width: 125px;
    height: 125px;
}

.userForm .cardTitle,
.userForm .cardQRcode {
    display: none;
}

.inc_msg_WeForm .userForm {
    width: 100%;
}

body .memTab .meMsg_MsgContentBlk {
    display: unset;
}

.phpMemberCenter .memTab #dataSiteTree.HoriClk .SiteGroup_1,
.phpManagerCenter .memTab #dataSiteTree.HoriClk .SiteGroup_1 {
    width: 31%;
}

.phpMemberCenter .memTab #dataSiteTree.HoriClk .SiteItem,
.phpManagerCenter .memTab #dataSiteTree.HoriClk .SiteItem {
    width: 100% !important;
}

/* .MemberInfo {
    display: none;
} */

.shopCard,
body .shopNamePreview {
    color: #fff;
}

.memberName,
.memberPhone {
    text-align: left;
    font-weight: 700;
}

/*會員卡細節*/



body .memberPhone {
    color: #c8af94;
    font-family: "Noto Serif TC";
}

body .memberName {
    font-family: "Noto Serif TC";
}

body.phpMemberCenter .memTab #dataSiteTree.HoriClk .ClassImg img {
    max-height: 50px;
    max-width: 50px;
}


/*按鈕*/



/* 清除原本樣式 */
.member-center-menu .SiteGroup,
.member-center-menu .SiteNode,
.member-center-menu .SiteItem {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-sizing: border-box;
}


/* 疊色高光 */


/* 底部柔光陰影 */
.member-center-menu .SiteItem_1::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8px;
    height: 10px;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;

    background: rgba(0, 0, 0, 0.06);
    filter: blur(10px);
}

.member-center-menu .SiteItem_1:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}



/*隱藏qrcode*/
.cardMemo,
.QRcodeimg,
body .qrcodeArea {
    display: none;
}


/*背景色*/
body #ns_Main {
    background-color: #fff !important;
}

/*QRtit*/
.QRtit {
    padding: 0 0 20px;
}

.FE.cardContent {
    display: none;
}

/*tab*/

body .memTab {
    display: block;
}
rgb(84, 44, 44)
.phpMemberCenter .memTab,
.phpManagerCenter .memTab {
    margin-top: 0 !important;
}

.ClassName {
    color: #2b2b2b;
}

@media (max-width: 768px) {
    body:not(.phpMemberCenter, .phpManagerCenter) #id_Content .meCSS {
        padding: 0px 0px !important;
    }
}

#divForm_jyMemberCard {
    display: none;
}