* {
    box-sizing: border-box;
}


body {
    margin: 0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans TC",
        sans-serif;

    background: #f5f7fa;

    color: #222;
}


button,
input {
    font-family: inherit;
}


button {
    cursor: pointer;
}


/* =========================
   共用
========================= */

.hidden {
    display: none !important;
}


.page {
    min-height: 100vh;
}


/* =========================
   登入
========================= */

.login-page {
    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;
}


.login-card {
    width: 100%;

    max-width: 420px;

    background: white;

    border-radius: 18px;

    padding: 40px 32px;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.08);
}


.logo {
    text-align: center;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 8px;
}


.subtitle {
    text-align: center;

    color: #888;

    margin-bottom: 35px;
}


.form-group {
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 8px;
}


.form-group input {
    width: 100%;

    height: 50px;

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 0 15px;

    font-size: 16px;

    outline: none;

    transition: 0.2s;
}


.form-group input:focus {
    border-color: #333;

    box-shadow:
        0 0 0 3px
        rgba(0, 0, 0, 0.05);
}


.primary-button {
    width: 100%;

    height: 52px;

    border: none;

    border-radius: 10px;

    background: #222;

    color: white;

    font-size: 16px;

    font-weight: 600;

    margin-top: 5px;
}


.primary-button:hover {
    opacity: 0.9;
}


.primary-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


.message {
    text-align: center;

    min-height: 22px;

    margin-top: 15px;

    font-size: 14px;

    color: #d33;
}


/* =========================
   Header
========================= */

.header {
    height: 64px;

    background: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 25px;

    border-bottom:
        1px solid #eee;
}


.header-title {
    font-size: 19px;

    font-weight: 700;
}


.logout-button {
    background: none;

    border: none;

    color: #777;

    font-size: 14px;
}


/* =========================
   內容
========================= */

.container {
    width: 100%;

    max-width: 850px;

    margin: auto;

    padding: 30px 20px;
}


.welcome {
    margin-bottom: 20px;
}


.welcome-small {
    color: #888;

    font-size: 14px;

    margin-bottom: 5px;
}


.member-name {
    font-size: 25px;

    font-weight: 700;
}


/* =========================
   餘額
========================= */

.balance-card {
    background: #222;

    color: white;

    border-radius: 18px;

    padding: 28px;

    margin-bottom: 20px;
}


.balance-title {
    font-size: 14px;

    opacity: 0.7;
}


.balance {
    font-size: 38px;

    font-weight: 700;

    margin: 8px 0 20px;
}


.deposit-button {
    border: none;

    border-radius: 9px;

    padding: 11px 18px;

    background: white;

    color: #222;

    font-weight: 600;
}


/* =========================
   會員資料
========================= */

.info-card {
    background: white;

    border-radius: 15px;

    padding: 23px;

    margin-bottom: 20px;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.04);
}


.card-title {
    font-size: 16px;

    font-weight: 700;

    margin-bottom: 18px;
}


.info-row {
    display: flex;

    justify-content: space-between;

    padding: 12px 0;

    border-bottom:
        1px solid #eee;
}


.info-row:last-child {
    border-bottom: none;
}


.info-row span {
    color: #888;
}


/* =========================
   功能
========================= */

.menu-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}


.menu-card {
    border: none;

    background: white;

    border-radius: 15px;

    padding: 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    text-align: left;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.04);

    transition: 0.2s;
}


.menu-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, 0.08);
}


.menu-icon {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f3f3f3;

    border-radius: 12px;

    font-size: 21px;
}


.menu-title {
    font-weight: 700;

    margin-bottom: 4px;
}


.menu-description {
    color: #888;

    font-size: 13px;
}


/* =========================
   Loading
========================= */

.loading {
    position: fixed;

    inset: 0;

    background:
        rgba(255,255,255,0.75);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;
}


.loading-box {
    background: white;

    border-radius: 15px;

    padding: 25px 35px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,0.1);

    text-align: center;
}


.spinner {
    width: 30px;

    height: 30px;

    border: 3px solid #ddd;

    border-top-color: #222;

    border-radius: 50%;

    margin: 0 auto 12px;

    animation:
        spin 0.8s linear infinite;
}


@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================
   手機版
========================= */

@media (max-width: 600px) {

    .login-card {
        padding: 32px 22px;
    }


    .container {
        padding: 25px 15px;
    }


    .header {
        padding: 0 17px;
    }


    .balance {
        font-size: 34px;
    }


    .menu-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================
   商品商城
========================= */

.back-button {
    background: none;
    border: none;
    font-size: 22px;
}

.back-button {
    margin-right: 10px;
}


/* =========================
   懸浮購物車
========================= */

.floating-cart-button {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    background: #222;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    cursor: pointer;

    z-index: 900;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.22);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.floating-cart-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.26);
}

.floating-cart-button:active {
    transform: scale(0.95);
}

.floating-cart-icon {
    line-height: 1;
}

.cart-count {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    border-radius: 20px;

    background: #e53935;
    color: white;

    font-size: 12px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid white;
}

.floating-cart-count {
    pointer-events: none;
}


.shop-title {
    margin-bottom: 25px;
}


.shop-main-title {
    font-size: 26px;
    font-weight: 700;
}


.shop-subtitle {
    margin-top: 5px;

    color: #888;

    font-size: 14px;
}


/* =========================
   商品 Grid
========================= */

.product-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


.product-card {

    background: white;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.05);

}


.product-image {

    width: 100%;

    aspect-ratio: 1 / 1;

    background: #f3f3f3;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.product-placeholder {

    font-size: 55px;

    opacity: 0.6;

}


.product-info {

    padding: 17px;

}


.product-name {

    font-size: 18px;

    font-weight: 700;

}


.product-description {

    min-height: 38px;

    margin-top: 6px;

    color: #888;

    font-size: 13px;

    line-height: 1.5;

}


.product-bottom {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 10px;

    margin-top: 15px;

}


.product-price {

    font-size: 20px;

    font-weight: 700;

}


.product-stock {

    margin-top: 3px;

    color: #999;

    font-size: 12px;

}


.add-button {

    border: none;

    border-radius: 9px;

    background: #222;

    color: white;

    padding: 10px 13px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

}


.add-button.disabled {

    background: #ddd;

    color: #888;

}


.product-loading,
.empty-message {

    grid-column: 1 / -1;

    text-align: center;

    color: #888;

    padding: 50px 20px;

}


/* =========================
   購物車
========================= */

.cart-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.4);

    z-index: 1000;

}


.cart-panel {

    position: absolute;

    top: 0;

    right: 0;

    width: 430px;

    max-width: 100%;

    height: 100%;

    background: white;

    display: flex;

    flex-direction: column;

}


.cart-header {

    height: 65px;

    padding: 0 20px;

    border-bottom:
        1px solid #eee;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 18px;

    font-weight: 700;

}


.close-button {

    border: none;

    background: none;

    font-size: 28px;

    color: #777;

}


.cart-items {

    flex: 1;

    overflow-y: auto;

    padding: 15px 20px;

}


.cart-item {

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 12px;

    padding: 16px 0;

    border-bottom:
        1px solid #eee;

}


.cart-product-name {

    font-weight: 600;

}


.cart-product-price {

    margin-top: 4px;

    color: #888;

    font-size: 13px;

}


.cart-controls {

    display: flex;

    align-items: center;

    gap: 9px;

}


.cart-controls button {

    width: 28px;

    height: 28px;

    border: 1px solid #ddd;

    border-radius: 7px;

    background: white;

}


.cart-footer {

    padding: 20px;

    border-top:
        1px solid #eee;

}


.cart-total-row {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

    font-size: 18px;

}


.empty-cart {

    text-align: center;

    padding: 70px 20px;

    color: #888;

}


.empty-cart > div {

    margin-top: 10px;

}


/* =========================
   手機版商城
========================= */

@media (max-width: 800px) {

    .product-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 600px) {

    .product-grid {

        grid-template-columns: 1fr;

    }


    .cart-panel {

        width: 100%;

    }


    .product-bottom {

        align-items: center;

    }


    .floating-cart-button {

        right: 18px;

        bottom:
            calc(
                18px +
                env(safe-area-inset-bottom)
            );

        width: 58px;

        height: 58px;

        font-size: 27px;

    }

}

.menu-link {
    text-decoration: none;
    color: inherit;
}
/* =========================
   確認訂單
========================= */

.checkout-card {

    background: white;

    border-radius: 15px;

    padding: 22px;

    margin-top: 18px;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.04);

}


.checkout-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 0;

    border-bottom:
        1px solid #eee;

}


.checkout-item:last-child {

    border-bottom: none;

}


.checkout-product-name {

    font-weight: 700;

    font-size: 16px;

}


.checkout-product-detail {

    margin-top: 5px;

    color: #888;

    font-size: 14px;

}


.checkout-message {

    margin-top: 18px;

    margin-bottom: 15px;

    text-align: center;

    color: #c33;

    font-size: 14px;

}


.order-success {

    text-align: center;

    padding: 25px 10px;

}


.success-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #eee;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 15px;

    font-size: 30px;

    font-weight: 700;

}


.success-title {

    font-size: 22px;

    font-weight: 700;

}


.success-order {

    margin-top: 8px;

    color: #888;

}


.primary-button:disabled {

    opacity: 0.45;

    cursor: not-allowed;

}

/* =========================
   我的訂單
========================= */

.orders-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.order-card {

    background: white;

    border-radius: 16px;

    padding: 20px;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.05);

    cursor: pointer;

    transition:
        transform 0.15s ease;

}


.order-card:hover {

    transform:
        translateY(-2px);

}


.order-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

}


.order-id {

    font-size: 16px;

    font-weight: 700;

}


.order-date {

    margin-top: 5px;

    color: #999;

    font-size: 13px;

}


.order-summary {

    margin-top: 18px;

    color: #555;

    font-size: 15px;

}


.order-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid #eee;

    color: #999;

    font-size: 13px;

}


.order-card-bottom strong {

    color: #222;

    font-size: 19px;

}


.order-view {

    margin-top: 15px;

    text-align: right;

    color: #777;

    font-size: 13px;

}


.status-success,
.status-pending,
.status-cancelled {

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 12px;

    white-space: nowrap;

}


.status-success {

    background: #eeeeee;

    color: #333;

}


.status-pending {

    background: #f5f5f5;

    color: #777;

}


.status-cancelled {

    background: #eeeeee;

    color: #999;

}


.empty-orders {

    background: white;

    border-radius: 16px;

    padding: 60px 20px;

    text-align: center;

}


.empty-orders-icon {

    font-size: 50px;

}


.empty-orders-title {

    margin-top: 15px;

    font-size: 20px;

    font-weight: 700;

}


.empty-orders-text {

    margin-top: 8px;

    color: #999;

}


.small-button {

    margin-top: 25px;

    width: auto;

    padding-left: 25px;

    padding-right: 25px;

}


/* =========================
   訂單詳情
========================= */

.detail-title {

    margin-bottom: 20px;

    font-size: 26px;

    font-weight: 700;

}


.order-detail-card {

    background: white;

    border-radius: 16px;

    padding: 22px;

    margin-bottom: 18px;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.04);

}


.detail-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}


.detail-order-id {

    font-size: 18px;

    font-weight: 700;

}


.detail-date {

    margin-top: 5px;

    color: #999;

    font-size: 13px;

}


.detail-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 0;

    border-bottom:
        1px solid #eee;

}


.detail-item:last-child {

    border-bottom: none;

}


.detail-product-name {

    font-size: 16px;

    font-weight: 600;

}


.detail-product-info {

    margin-top: 5px;

    color: #999;

    font-size: 13px;

}


.detail-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 18px;

    font-size: 18px;

}


.detail-total strong {

    font-size: 22px;

}


/* 手機版 */

@media (max-width: 600px) {

    .order-card {

        padding: 17px;

    }


    .order-card-top {

        gap: 8px;

    }


    .detail-header {

        gap: 10px;

    }


    .detail-order-id {

        font-size: 16px;

    }

}

/* =========================
   會員資料
   ========================= */

.member-detail-card {

    background: white;

    border-radius: 16px;

    padding: 22px;

    margin-bottom: 18px;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.05);

}


.member-info-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 15px 0;

    border-bottom:
        1px solid #eee;

}


.member-info-row:last-child {

    border-bottom: none;

}


.member-info-row span {

    color: #888;

    font-size: 14px;

}


.member-info-row strong {

    text-align: right;

    word-break: break-word;

}


.member-back-home {

    margin-top: 5px;

}


@media (max-width: 600px) {

    .member-info-row {

        align-items: flex-start;

    }

    .member-info-row strong {

        max-width: 65%;

    }

}
/* =========================
   儲值
   ========================= */

.topup-description {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
}

.topup-description p {
    margin: 0 0 10px;
}

.topup-notice {
    margin-top: 15px;
    padding: 12px 15px;
    background: #f5f5f5;
    border-radius: 10px;
    color: #666;
    font-size: 13px;
}


.topup-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.topup-item {
    padding: 17px;
    border: 1px solid #eee;
    border-radius: 12px;
}


.topup-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}


.topup-request-id {
    font-weight: 700;
    font-size: 15px;
}


.topup-date {
    margin-top: 5px;
    color: #999;
    font-size: 12px;
}


.topup-amount {
    font-size: 20px;
    font-weight: 700;
}


.topup-item-info {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    color: #777;
    font-size: 13px;
    line-height: 1.8;
}


.topup-item-bottom {
    margin-top: 13px;
}


.topup-status {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 20px;
    background: #f3f3f3;
    color: #555;
    font-size: 12px;
}


.topup-status.pending {
    background: #f5f5f5;
    color: #666;
}


.topup-status.approved {
    background: #eeeeee;
    color: #222;
}


.topup-status.rejected {
    background: #eeeeee;
    color: #999;
}


.topup-empty,
.topup-loading {
    text-align: center;
    padding: 30px 10px;
    color: #999;
}


@media (max-width: 600px) {

    .topup-item-top {
        gap: 10px;
    }

    .topup-amount {
        font-size: 18px;
    }

}
/* =========================
   儲值成功視窗
   ========================= */

.topup-success-modal {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.45);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    z-index: 2000;

}


.topup-success-box {

    width: 100%;

    max-width: 400px;

    background: white;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.15);

}


.topup-success-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #f0f0f0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    font-weight: 700;

}


.topup-success-title {

    font-size: 21px;

    font-weight: 700;

    margin-bottom: 25px;

}


.topup-success-text {

    padding: 18px;

    background: #f7f7f7;

    border-radius: 12px;

}


.success-label {

    color: #999;

    font-size: 13px;

}


.success-request-id {

    margin-top: 5px;

    font-size: 17px;

    font-weight: 700;

}


.success-status-label {

    margin-top: 18px;

}


.success-status {

    margin-top: 5px;

    font-size: 15px;

    font-weight: 600;

}


.topup-success-box .primary-button {

    margin-top: 20px;

}
/* ========================================
   Header：返回鍵左側、標題真正置中
   ======================================== */

.header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.header .header-title {
    width: 100%;
    text-align: center;
}

/* Checkout delivery fields */
.delivery-card {display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.delivery-card label {font-weight:600;font-size:15px}
.delivery-card input:not([type="checkbox"]),.delivery-card textarea {box-sizing:border-box;width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#222;font:inherit}
.delivery-card input:focus,.delivery-card textarea:focus {outline:2px solid #444;outline-offset:1px}
.delivery-card .delivery-check {display:flex;align-items:center;gap:9px;cursor:pointer}
.delivery-card .delivery-check input {width:18px;height:18px}
.required-mark {color:#b42318}

.company-logo {
    display: inline-block;
    padding: 10px 20px;
}

.company-logo img {
    max-width: 100%;
    object-fit: contain;
}

/* 其他分頁的 LOGO */
.subpage-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 15px;
}

.subpage-logo img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* 手機版 */
@media (max-width: 600px) {

    .subpage-logo {
        margin-right: 8px;
    }

    .subpage-logo img {
        height: 32px;
    }

}