/* /Views/Home/index.cshtml.rz.scp.css */
.pay-page[b-j1kbbml6cz] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

#app-donate[b-j1kbbml6cz] {
    width: 100%;
    max-width: 420px;
}

@media (min-width: 768px) {
    #app-donate[b-j1kbbml6cz] {
        max-width: 480px;
    }
}

.el-card[b-j1kbbml6cz] {
    border-radius: 12px;
    overflow: hidden; 
}
.el-card__body[b-j1kbbml6cz] {
    padding: 0;
}
    .el-card__body > :not(.card-banner)[b-j1kbbml6cz] {
        padding: 16px 16px 12px;
    }

.el-form-item[b-j1kbbml6cz] {
    margin-bottom: 12px;
}

.el-input[b-j1kbbml6cz],
.el-input-number[b-j1kbbml6cz],
.el-textarea[b-j1kbbml6cz] {
    width: 100%;
}

.el-button[b-j1kbbml6cz] {
    width: 100%;
    font-size: 16px;
}
/* Banner */
.card-banner[b-j1kbbml6cz] {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 3 / 1;
}
.el-button + .el-button[b-j1kbbml6cz] {
    margin-left: 0px;
}
.quick-amount[b-j1kbbml6cz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 8px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

    .quick-amount .el-button[b-j1kbbml6cz] {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

        .quick-amount .el-button:hover[b-j1kbbml6cz] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }

        .quick-amount .el-button:active[b-j1kbbml6cz] {
            transform: translateY(0);
        }

@media (max-width: 767px) {
    .card-banner[b-j1kbbml6cz] {
        aspect-ratio: 2.4 / 1;
    }

    .quick-amount[b-j1kbbml6cz] {
        grid-template-columns: repeat(3, 1fr); /* 一排 3 顆 */
    }

        .quick-amount .el-button[b-j1kbbml6cz] {
            font-size: 13px;
        }
}

/* 手機尺寸 */
@media (max-width: 480px) {
    .quick-amount[b-j1kbbml6cz] {
        grid-template-columns: repeat(3, 1fr); /* 一排 3 顆 */
        gap: 6px;
    }

        .quick-amount .el-button[b-j1kbbml6cz] {
            height: 36px;
            font-size: 13px;
        }
}

/* 小手機優化 */
@media (max-width: 360px) {
    .quick-amount[b-j1kbbml6cz] {
        grid-template-columns: repeat(2, 1fr); /* 一排 2 顆 */
    }

        .quick-amount .el-button[b-j1kbbml6cz] {
            font-size: 12px;
        }
}
/* /Views/Shared/_Layout.cshtml.rz.scp.css */
.main-container[b-speqyob0j4]{
    padding: 0px !important;
}

.footer[b-speqyob0j4] {
    width: 100%;
    padding: 16px 0;
    background-color: #f8f9fa;
    font-size: 14px;
}

    .footer .content-wrapper[b-speqyob0j4] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

.footer-content[b-speqyob0j4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; 
}

    .footer-content a[b-speqyob0j4] {
        text-decoration: none;
        white-space: nowrap;
    }

@media (max-width: 576px) {
    .footer-content[b-speqyob0j4] {
        flex-direction: column;
        text-align: center;
    }

        .footer-content .ms-3[b-speqyob0j4] {
            margin-left: 0 !important;
        }
}
.theme-toggle[b-speqyob0j4] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

body[b-speqyob0j4] {
    background-color: #f5f5f5;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-container[b-speqyob0j4] {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.footer[b-speqyob0j4] {
    background-color: #f8f9fa;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .footer a[b-speqyob0j4] {
        color: #0d6efd;
        transition: color 0.3s ease;
    }

        .footer a:hover[b-speqyob0j4] {
            color: #0a58ca;
        }

html.dark body[b-speqyob0j4] {
    background-color: #141414;
    color: #e5e5e5;
}

html.dark .main-container[b-speqyob0j4] {
    background-color: #1f1f1f;
}

html.dark .footer[b-speqyob0j4] {
    background-color: #1a1a1a;
    color: #e5e5e5;
    border-top: 1px solid #2a2a2a;
}

    html.dark .footer a[b-speqyob0j4] {
        color: #409eff;
    }

        html.dark .footer a:hover[b-speqyob0j4] {
            color: #66b1ff;
        }

.content-wrapper[b-speqyob0j4] {
    transition: all 0.3s ease;
}

html.dark h1[b-speqyob0j4],
html.dark h2[b-speqyob0j4],
html.dark h3[b-speqyob0j4],
html.dark h4[b-speqyob0j4],
html.dark h5[b-speqyob0j4],
html.dark h6[b-speqyob0j4],
html.dark p[b-speqyob0j4],
html.dark span[b-speqyob0j4],
html.dark div[b-speqyob0j4] {
    color: #e5e5e5;
}

/* Bootstrap 元素在夜間模式下的調整 */
html.dark .form-control[b-speqyob0j4],
html.dark .form-select[b-speqyob0j4] {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e5e5e5;
}

    html.dark .form-control:focus[b-speqyob0j4],
    html.dark .form-select:focus[b-speqyob0j4] {
        background-color: #2a2a2a;
        border-color: #409eff;
        color: #e5e5e5;
    }

html.dark .btn-primary[b-speqyob0j4] {
    background-color: #409eff;
    border-color: #409eff;
}

    html.dark .btn-primary:hover[b-speqyob0j4] {
        background-color: #66b1ff;
        border-color: #66b1ff;
    }

html.dark .card[b-speqyob0j4] {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e5e5e5;
}

html.dark .card-header[b-speqyob0j4] {
    background-color: #1f1f1f;
    border-color: #3a3a3a;
}

html.dark .table[b-speqyob0j4] {
    color: #e5e5e5;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) > *[b-speqyob0j4] {
    background-color: #2a2a2a;
}

html.dark .table-hover > tbody > tr:hover > *[b-speqyob0j4] {
    background-color: #333333;
}

/* SweetAlert2 夜間模式樣式 */
html.dark .swal2-popup[b-speqyob0j4] {
    background-color: #2a2a2a !important;
    color: #e5e5e5 !important;
    border: 1px solid #3a3a3a;
}

html.dark .swal2-title[b-speqyob0j4] {
    color: #e5e5e5 !important;
}

html.dark .swal2-html-container[b-speqyob0j4] {
    color: #e5e5e5 !important;
}

html.dark .swal2-confirm[b-speqyob0j4] {
    background-color: #409eff !important;
    border-color: #409eff !important;
}

    html.dark .swal2-confirm:hover[b-speqyob0j4] {
        background-color: #66b1ff !important;
        border-color: #66b1ff !important;
    }

html.dark .swal2-cancel[b-speqyob0j4] {
    background-color: #3a3a3a !important;
    border-color: #4a4a4a !important;
    color: #e5e5e5 !important;
}

    html.dark .swal2-cancel:hover[b-speqyob0j4] {
        background-color: #4a4a4a !important;
    }

html.dark .swal2-input[b-speqyob0j4],
html.dark .swal2-textarea[b-speqyob0j4] {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

    html.dark .swal2-input:focus[b-speqyob0j4],
    html.dark .swal2-textarea:focus[b-speqyob0j4] {
        border-color: #409eff !important;
    }

html.dark .swal2-select[b-speqyob0j4] {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

html.dark .swal2-validation-message[b-speqyob0j4] {
    background-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

html.dark .swal2-icon.swal2-success .swal2-success-ring[b-speqyob0j4] {
    border-color: rgba(103, 194, 58, 0.3) !important;
}

html.dark .swal2-icon.swal2-success [class^='swal2-success-line'][b-speqyob0j4] {
    background-color: #67c23a !important;
}

html.dark .swal2-icon.swal2-error [class^='swal2-x-mark-line'][b-speqyob0j4] {
    background-color: #f56c6c !important;
}

html.dark .swal2-icon.swal2-warning[b-speqyob0j4] {
    border-color: #e6a23c !important;
    color: #e6a23c !important;
}

html.dark .swal2-icon.swal2-info[b-speqyob0j4] {
    border-color: #409eff !important;
    color: #409eff !important;
}

html.dark .swal2-close[b-speqyob0j4] {
    color: #e5e5e5 !important;
}

    html.dark .swal2-close:hover[b-speqyob0j4] {
        color: #f56c6c !important;
    }

html.dark .swal2-footer[b-speqyob0j4] {
    border-top-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

html.dark .swal2-timer-progress-bar[b-speqyob0j4] {
    background-color: #409eff !important;
}