/* Calculator specific styles */

/* Fixed header styles */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.fixed-header-table {
    overflow: visible !important;
    max-height: none !important;
    border: 1px solid #dee2e6;
    position: static !important;
    height: auto !important;
    width: 100% !important;
}

.sticky-thead {
    position: sticky;
    top: 0;
    z-index: 1010;
    background-color: #212529;
}

.sticky-thead th {
    position: sticky;
    top: 0;
    z-index: 1010;
    background-color: #212529;
}

.sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 1015 !important;
    background: linear-gradient(to right, #f0f0f0 0%, #d4d4d4 100%) !important;
    border-right: 2px solid #a0a0a0 !important;
}

.sticky-thead .sticky-col {
    z-index: 1020 !important;
    background: linear-gradient(to bottom, #212529 0%, #1a1d20 100%) !important;
    color: white !important;
}

/* Excel table styles */
.excel-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    position: static !important;
    width: 100% !important; /* ensure table fills container width */
    height: 100% !important; /* set table height to 100% to fit container */
    table-layout: fixed !important; /* use fixed table layout */
    overflow: visible !important;
    min-width: 100% !important; /* ensure minimum width is 100% */
    max-width: 100% !important; /* ensure maximum width does not exceed 100% */
    box-sizing: border-box !important; /* ensure includes border and padding */
    margin: 0 !important; /* clear all margins */
    padding: 0 !important; /* clear all padding */
}

.excel-table th,
.excel-table td {
    border: 1px solid #c0c0c0;
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    height: auto !important; /* 让单元格高度自适应 */
    overflow: hidden !important; /* 防止内容溢出 */
    box-sizing: border-box !important; /* 确保包含边框和内边距 */
    word-wrap: break-word; /* 允许单词换行 */
    white-space: nowrap; /* 防止文字换行影响布局 */
}

/* Table header styles */
.col-header {
    background: linear-gradient(to bottom, #f0f0f0 0%, #d4d4d4 100%);
    color: #333;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    border: 1px solid #a0a0a0;
}

.row-header {
    background: linear-gradient(to right, #f0f0f0 0%, #d4d4d4 100%);
    color: #333;
    font-weight: bold;
    font-size: 12px;
    text-align: right;
    padding-right: 8px;
    border: 1px solid #a0a0a0;
    white-space: nowrap;
    min-width: 120px;
}

/* Summary column styles - based on screenshot b01.jpg color scheme */
.summary-col {
    border-color: #6699cc !important;
}

/* Summary value column - blue green */
.sum-col {
    background: linear-gradient(to bottom, #e8f4f8 0%, #d0e9f0 100%) !important;
    color: #2b5f6f !important;
    font-weight: bold !important;
}

/* Average value column - light green */
.avg-col {
    background: linear-gradient(to bottom, #e8f5e8 0%, #d0ead0 100%) !important;
    color: #2d5a2d !important;
    font-weight: bold !important;
}

/* Maximum value column - light orange */
.max-col {
    background: linear-gradient(to bottom, #fff4e6 0%, #ffe4cc 100%) !important;
    color: #b8620e !important;
    font-weight: bold !important;
}

/* Minimum value column - light purple */
.min-col {
    background: linear-gradient(to bottom, #f3e8ff 0%, #e6d0ff 100%) !important;
    color: #6b3d9e !important;
    font-weight: bold !important;
}

/* Input cell styles */
.input-cell {
    border: none !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
    text-align: center;
    background: white;
    border-radius: 0 !important;
    height: 28px;
    box-shadow: none !important;
}

.input-cell:focus {
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 0 0 1px #4a90e2 !important;
    outline: none;
}

.input-cell.is-invalid {
    border-color: #dc3545 !important;
    background-color: #ffebee;
}

/* Result cell styles */
.result-cell {
    background: #f8f9fa;
    color: #495057;
    font-weight: 500;
    cursor: not-allowed;
    user-select: none;
    padding: 6px 8px;
}

.result-cell.text-danger {
    background: #fff5f5;
    color: #dc3545;
    font-weight: bold;
}

/* Calculated row styles */
.calculated-row {
    background: linear-gradient(to right, #fff9f9 0%, #fff5f5 100%);
}

.calculated-row .row-header {
    background: linear-gradient(to right, #ffe6e6 0%, #ffcccc 100%);
    color: #dc3545;
}

.calculated-row .sticky-col {
    background: linear-gradient(to right, #ffe6e6 0%, #ffcccc 100%) !important;
    color: #dc3545 !important;
}

/* Table container */
.table-responsive {
    overflow: auto !important; /* restore automatic scrollbar */
    max-height: 350px !important; /* set reasonable maximum height */
    border: 1px solid #dee2e6;
    height: auto !important; /* set to automatic height */
    position: relative !important;
    width: 100% !important; /* ensure responsive container 100% width */
}

/* Special container for ROI detailed table - force full display and fill width */
.card-body .table-responsive.fixed-header-table {
    overflow: hidden !important; /* force hide scrollbar */
    max-height: none !important;
    height: 115% !important; /* set height to 115% */
    position: static !important;
    width: 100% !important; /* ensure container 100% width */
    -webkit-overflow-scrolling: auto !important;
    display: flex !important; /* use flex layout */
    flex-direction: column !important; /* vertical direction */
    box-sizing: border-box !important; /* ensure includes border and padding */
}

/* Ensure card container does not restrict height and width */
.card {
    overflow: hidden !important; /* force hide scrollbar */
    max-height: none !important;
    height: 115% !important; /* set height to 115% */
    display: flex !important; /* use flex layout */
    flex-direction: column !important; /* vertical direction */
    width: 100% !important; /* ensure card 100% width */
    box-sizing: border-box !important; /* ensure includes border and padding */
}

.card-body {
    overflow: hidden !important; /* force hide scrollbar */
    height: 115% !important; /* set height to 115% */
    max-height: none !important;
    padding: 1rem !important;
    width: 100% !important; /* ensure card body 100% width */
    flex: 1 !important; /* occupy remaining space */
    display: flex !important; /* use flex layout */
    flex-direction: column !important; /* vertical direction */
    box-sizing: border-box !important; /* ensure includes border and padding */
}

/* Restore scrollbar for data source table - specific to each table */
.card-body .table-responsive:not(.fixed-header-table) {
    max-height: 750px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    border: 1px solid #dee2e6;
}

/* Package data source table restore scroll */
#packageMaterialTable tbody,
.card:nth-child(1) .table-responsive {
    max-height: 750px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Shipping data source table restore scroll */
#shippingRateTable tbody,
.card:nth-child(2) .table-responsive {
    max-height: 750px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Service fee rate table restore scroll */
#serviceFeeTable tbody,
#serviceFeeTable .table-responsive,
.col-md-3:nth-child(1) .card .table-responsive {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Shipping insurance table restore scroll */
#shippingInsuranceTable tbody,
#shippingInsuranceTable .table-responsive,
.col-md-3:nth-child(2) .card .table-responsive {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Return rate table restore scroll */
#returnRateTable tbody,
#returnRateTable .table-responsive,
.col-md-3:nth-child(3) .card .table-responsive {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Small payment table restore scroll */
#smallPaymentTable tbody,
#smallPaymentTable .table-responsive,
.col-md-3:nth-child(4) .card .table-responsive {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Force restore scrollbar for all data source areas */
.card:not(.roi-table-section) .table-responsive {
    overflow: auto !important;
    max-height: 750px !important;
}

.card:not(.roi-table-section) .card-body .table-responsive {
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 750px !important;
}

/* Special scroll settings for configuration parameter table */
.col-md-3 .card .table-responsive,
.col-md-3 .card .card-body .table-responsive {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Package and shipping table scroll settings */
.col-md-6 .card .table-responsive,
.col-md-6 .card .card-body .table-responsive {
    max-height: 750px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Clear possible styles that might affect data source table */
.card:not(.roi-table-section) .card-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.card:not(.roi-table-section) {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* ROI detailed table remains without scroll */
.roi-table-section .table-responsive {
    overflow: hidden !important; /* completely cancel scrollbar */
    max-height: none !important;
    width: 100% !important; /* restore to 100% width */
    height: 100% !important; /* change to 100% height */
    min-height: auto;
    transform: scale(1) !important; /* ensure not scaled */
    display: block !important; /* change to block layout */
    min-width: 100% !important; /* ensure minimum width 100% */
    max-width: 100% !important; /* ensure maximum width 100% */
    box-sizing: border-box !important; /* include border and padding */
    border: 1px solid #dee2e6;
    position: relative !important; /* ensure relative positioning */
    /* force remove all possible margins and padding */
    margin: 0 !important;
    padding: 0 !important;
    /* force table container stretch */
    flex: 1 !important;
}

.roi-table-section .card-header {
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.roi-table-section .card-body {
    padding: 0 !important;
    overflow: hidden !important; /* completely cancel scroll */
    width: 100% !important; /* force ensure card body fills width */
    height: 115% !important; /* set height to 115% */
    transform: scale(1) !important; /* ensure not scaled */
    flex: 1 !important; /* occupy remaining space */
    display: flex !important; /* use flex layout */
    flex-direction: column !important; /* vertical direction */
    min-width: 100% !important; /* ensure minimum width 100% */
    max-width: 100% !important; /* ensure maximum width 100% */
    box-sizing: border-box !important; /* include border and padding */
}

.roi-table-section .table-responsive > div {
    position: relative;
    width: 100% !important; /* force ensure inner container fills width */
    height: 100% !important; /* set height to 100% to fit container */
    min-width: 100% !important; /* force ensure minimum width is 100% */
    max-width: 100% !important; /* force ensure maximum width is 100% */
    overflow: visible !important; /* change to visible, let table naturally display */
    box-sizing: border-box !important; /* include border and padding */
    display: block !important; /* use block layout */
    /* force remove all margins and padding */
    margin: 0 !important;
    padding: 0 !important;
}

/* Table body content adaptation - force full fill and extend to container boundary */
.roi-table-section .table-responsive .excel-table {
    width: 100% !important; /* force table 100% width */
    height: auto !important; /* change to auto height, let table naturally display */
    display: table !important;
    table-layout: fixed !important; /* use fixed layout, force column width allocation */
    min-width: 100% !important; /* force minimum width 100% */
    max-width: 100% !important; /* force maximum width 100% */
    box-sizing: border-box !important; /* include border and padding */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    /* force table stretch to container boundary */
    margin: 0 !important;
    padding: 0 !important;
    /* ensure table rows can correctly layout */
    overflow: hidden !important;
    /* ensure table boundary precisely to "minimum value" column */
    border-right: 1px solid #c0c0c0 !important; /* table right boundary on right side of minimum value column */
}

/* Ensure table rows and cells support flex layout */
.roi-table-section .excel-table tr {
    display: table-row !important;
    width: 100% !important;
}

.roi-table-section .excel-table th,
.roi-table-section .excel-table td {
    display: table-cell !important;
    box-sizing: border-box !important;
    /* ensure cell content does not overflow */
    word-wrap: break-word !important;
    overflow: hidden !important;
}

/* Force "minimum value" column to be last column, its right side cannot have any element */
.roi-table-section .excel-table th:nth-child(17),
.roi-table-section .excel-table td:nth-child(17) {
    /* 17th column is minimum value column, this is the last column of the table */
    border-right: 2px solid #a0a0a0 !important; /* emphasize right boundary of last column */
}

/* Hide possible existing columns 18th and beyond (extra columns) */
.roi-table-section .excel-table th:nth-child(n+18),
.roi-table-section .excel-table td:nth-child(n+18) {
    display: none !important; /* force hide extra columns */
}

/* Table header fixed */
.roi-table-section .sticky-thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 1010 !important;
    background-color: #212529 !important;
}

.roi-table-section .sticky-thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1010 !important;
    background-color: #212529 !important;
}

/* First column fixed */
.roi-table-section .sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 1015 !important;
    background: linear-gradient(to right, #f0f0f0 0%, #d4d4d4 100%) !important;
    border-right: 2px solid #a0a0a0 !important;
}

.roi-table-section .sticky-thead .sticky-col {
    z-index: 1020 !important;
    background: linear-gradient(to bottom, #212529 0%, #1a1d20 100%) !important;
    color: white !important;
}

/* Force table column width allocation */
.roi-table-section .excel-table th,
.roi-table-section .excel-table td {
    border: 1px solid #c0c0c0 !important;
    padding: 4px 6px !important;
    text-align: center;
    vertical-align: middle;
    position: relative;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* First column fixed width */
.roi-table-section .excel-table .sticky-col {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

/* Data column adaptive width */
.roi-table-section .excel-table th:not(.sticky-col),
.roi-table-section .excel-table td:not(.sticky-col):not(.summary-col) {
    /* remove fixed width, use flex layout average allocation */
    width: auto !important;
    min-width: 60px !important;  /* set minimum width ensure readable content */
    max-width: none !important;  /* remove maximum width restriction */
    flex: 1 1 auto !important;   /* flex stretch, average allocation remaining space */
    box-sizing: border-box !important;
}

/* Summary column fixed smaller width */
.roi-table-section .excel-table .summary-col {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}

/* Input box styles */
.roi-table-section .input-cell {
    border: none !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
    text-align: center;
    background: white;
    border-radius: 0 !important;
    height: 28px !important;
    width: 100% !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.roi-table-section .input-cell:focus {
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 0 0 1px #4a90e2 !important;
    outline: none;
}

/* Result cell styles */
.roi-table-section .result-cell {
    background: #f8f9fa;
    color: #495057;
    font-weight: 500;
    cursor: not-allowed;
    user-select: none;
    height: 28px !important;
    line-height: 28px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Remove original complex styles, keep simple */
.roi-table-section .table-responsive,
.roi-table-section .card-body,
.roi-table-section .table-responsive > div {
    /* force ensure container and table fills width - fix width not fully filled problem */
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    /* clear margins and padding */
    margin: 0 !important;
    padding: 0 !important;
    /* ensure box model includes border */
    box-sizing: border-box !important;
}

/* Clear data button styles */
#clearBtn {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    border: none;
    color: white !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
}

#clearBtn:hover {
    background: linear-gradient(135deg, #ee5a24, #c44569);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.4);
    color: white !important;
}

#clearBtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(255, 107, 107, 0.3);
}

#clearBtn i {
    font-size: 13px;
    margin-right: 4px;
}

/* Now pay button styles */
.btn-gradient-pay {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white !important;
    font-weight: 600;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-gradient-pay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-gradient-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.6);
    color: white !important;
}

.btn-gradient-pay:hover::before {
    left: 100%;
}

.btn-gradient-pay:active {
    transform: translateY(0);
}

/* Large size button extra styles */
.btn-gradient-pay.btn-lg {
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 25px;
    animation: pulse-glow 3s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(118, 75, 162, 0.3);
    }
}

/* Responsive adaptation */
@media (max-width: 768px) {
    .btn-gradient-pay.btn-lg {
        padding: 10px 25px;
        font-size: 14px;
    }
}

/* Error tooltip styles */
.error-tooltip {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Cell hover effect */
.excel-table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.excel-table tbody tr:hover .row-header {
    background: linear-gradient(to right, #e6f3ff 0%, #cce7ff 100%);
}

/* Input cell animation */
.input-cell {
    transition: all 0.2s ease;
}

.input-cell:focus {
    transform: scale(1.02);
}

/* Loading state */
.calculating {
    position: relative;
}

.calculating::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Numeric formatting styles */
.currency {
    color: #28a745;
    font-weight: bold;
}

.percentage {
    color: #fd7e14;
    font-weight: bold;
}

.negative {
    color: #dc3545;
    font-weight: bold;
}

.positive {
    color: #28a745;
    font-weight: bold;
}

/* Select box styles */
.form-select.input-cell {
    padding: 2px 20px 2px 4px !important;
    background-size: 12px;
    background-position: right 4px center;
}

.form-select.input-cell:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 1px #4a90e2;
}

/* Toolbar styles */
.navbar {
    border-bottom: 1px solid #dee2e6;
}

.btn-group .btn {
    margin: 0 2px;
}

/* Responsive design */
@media (max-width: 768px) {
    .excel-table {
        min-width: 100% !important; /* mobile ensure table fills container */
        font-size: 11px;
        width: 100% !important; /* mobile table width 100% */
        height: 100% !important; /* mobile also set height to 100% */
    }
    
    .input-cell {
        padding: 1px 2px !important;
        font-size: 11px !important;
        height: 24px;
    }
    
    .col-header,
    .row-header {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .btn-group .btn {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .btn-group {
        display: none !important;
    }
    
    .excel-table {
        font-size: 10px;
    }
    
    .card {
        border: none;
        box-shadow: none;
    }
    
    .table-responsive {
        overflow: visible;
        max-height: none;
    }
}

/* Page bottom blank space */
.footer-space {
    min-height: 400px; /* increase blank space height */
    padding: 80px 0; /* increase top and bottom padding */
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%); /* gradient background */
    margin-top: 60px; /* distance from main content area */
    position: relative; /* relative positioning */
    display: flex; /* flex layout */
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
}

/* Fixed payment button area */
.fixed-payment-section {
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px; /* ensure enough vertical space */
}

/* Fixed payment button styles enhancement */
.payment-btn-fixed {
    padding: 16px 40px !important; /* increase button size */
    font-size: 18px !important; /* increase font size */
    font-weight: 700 !important; /* bold font */
    border-radius: 30px !important; /* larger corner radius */
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important; /* enhance shadow */
    transition: all 0.3s ease !important;
    animation: gentle-pulse 4s infinite ease-in-out; /* gentle pulse animation */
    margin-bottom: 15px; /* distance from copyright text */
    text-decoration: none !important;
    border: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.payment-btn-fixed:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6) !important;
    color: white !important;
}

.payment-btn-fixed:active {
    transform: translateY(-1px) !important;
}

/* Fixed copyright text styles */
.copyright-text-fixed {
    color: rgba(108, 117, 125, 0.7) !important; /* gray semi-transparent */
    font-size: 13px !important; /* small font */
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif !important;
    letter-spacing: 0.5px; /* increase character spacing */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* slight white text shadow */
}

/* Gentle pulse animation */
@keyframes gentle-pulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6);
        transform: scale(1.02);
    }
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .footer-space {
        min-height: 320px; /* mobile reduce height */
        padding: 60px 20px; /* mobile adjust padding */
        margin-top: 40px; /* reduce top margin */
    }
    
    .fixed-payment-section {
        min-height: 160px; /* mobile reduce height */
    }
    
    .payment-btn-fixed {
        padding: 14px 32px !important; /* mobile reduce button */
        font-size: 16px !important; /* mobile reduce font size */
        border-radius: 25px !important; /* mobile corner radius */
    }
    
    .copyright-text-fixed {
        font-size: 12px !important; /* mobile smaller font */
    }
}

/* Page overall height adjustment */
body {
    min-height: 100vh; /* ensure page at least fills window height */
    display: flex;
    flex-direction: column;
}

/* Main container flex layout */
.container-fluid {
    flex: 1; /* main content area occupies remaining space */
}

/* Remove original copyright text styles, use new fixed styles */
.copyright-text {
    display: none; /* hide old copyright text styles */
}

/* ROI table area specific styles - ensure truly fills container width */
.roi-table-section {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important; /* ensure area fills width */
    box-sizing: border-box !important; /* ensure includes border and padding */
    margin: 0 !important; /* clear margins */
    padding: 0 !important; /* clear padding, but keep necessary card padding */
    position: relative !important; /* add relative positioning, as dialog positioning reference */
}

.roi-table-section .card-header {
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Trial user payment reminder dialog */
.trial-payment-dialog {
    position: absolute; /* absolute positioning relative to ROI table container */
    top: 15%; /* position relative to table container top 15% */
    left: 50%; /* position relative to table container horizontal center */
    width: 75%; /* dialog width increased to 4x */
    height: 750px; /* limit height */
    transform: translate(-50%, -50%); /* base positioning relative to dialog center */
    background: transparent; /* remove semi-transparent mask */
    display: none; /* initially hidden, avoid flicker */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: auto; /* prevent interaction only in dialog area */
    opacity: 0; /* initial transparency 0 */
    transition: opacity 0.5s ease-in-out; /* add smooth transition */
}

/* Display state */
.trial-payment-dialog.show {
    display: flex;
    opacity: 1;
}

/* Mosaic background area - relative to ROI table container middle */
.trial-payment-dialog::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%; /* mosaic width remains unchanged */
    height: 750px; /* equal to dialog height */
    transform: translate(-50%, -50%);
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(255, 255, 255, 0.98) 8px,
            rgba(255, 255, 255, 0.98) 16px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            rgba(0, 0, 0, 0.98) 8px,
            rgba(0, 0, 0, 0.98) 16px
        );
    animation: mosaic-effect 6s infinite linear; /* extend animation time, reduce flicker */
    z-index: -1;
    pointer-events: none; /* mosaic background does not prevent interaction */
    will-change: background-position; /* optimize animation performance */
}

/* Optimized mosaic animation effect - reduce flicker */
@keyframes mosaic-effect {
    0% {
        background-position: 0 0, 0 0;
    }
    25% {
        background-position: 10px 10px, -10px -10px;
    }
    50% {
        background-position: 20px 20px, -20px -20px;
    }
    75% {
        background-position: 30px 30px, -30px -30px;
    }
    100% {
        background-position: 32px 32px, -32px -32px;
    }
}

/* Dialog content container - optimize animation */
.payment-dialog-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(102, 126, 234, 0.3);
    max-width: 400px;
    min-width: 300px;
    height: auto;
    min-height: 250px;
    animation: dialog-smooth-bounce 0.8s ease-out; /* optimized pop animation */
    position: relative;
    z-index: 1;
    pointer-events: auto; /* dialog content can interact */
    will-change: transform, opacity; /* optimize animation performance */
}

/* Optimized dialog pop animation - reduce flicker */
@keyframes dialog-smooth-bounce {
    0% {
        transform: scale(0.5) rotate(0deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.05) rotate(0deg);
        opacity: 0.9;
    }
    80% {
        transform: scale(0.98) rotate(0deg);
        opacity: 0.95;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Dialog text styles */
.payment-dialog-text {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.5;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* Dialog button styles - optimize animation */
.payment-dialog-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    text-decoration: none;
    display: inline-block;
    will-change: transform, box-shadow; /* optimize button animation performance */
}

.payment-dialog-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.payment-dialog-btn:active {
    transform: translateY(-1px);
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .trial-payment-dialog {
        top: 15%; /* mobile also position relative to table container top 15% */
        left: 50%;
        width: 1200px; /* mobile dialog width increased to 4x */
        height: 550px; /* mobile limit height */
        transform: translate(-50%, -50%); /* mobile also base positioning relative to center */
    }
    
    .trial-payment-dialog::before {
        width: calc(300px * 4); /* mobile mosaic width remains unchanged */
        height: 550px; /* mobile dialog height */
        background-image: 
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 6px,
                rgba(255, 255, 255, 0.98) 6px,
                rgba(255, 255, 255, 0.98) 12px
            ),
            repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 6px,
                rgba(0, 0, 0, 0.98) 6px,
                rgba(0, 0, 0, 0.98) 12px
            );
    }
    
    .payment-dialog-content {
        margin: 20px;
        padding: 30px 25px;
        min-width: 250px;
        min-height: 200px;
    }
    
    .payment-dialog-text {
        font-size: 18px;
        margin-bottom: 25px;
    }
    
    .payment-dialog-btn {
        padding: 12px 30px;
        font-size: 16px;
    }
}

.trial-mask-content-75 {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 280px;
    animation: fadeInScale 0.5s ease-out;
}

.trial-mask-icon-75 {
    font-size: 2.5em;
    color: #667eea;
    margin-bottom: 15px;
}

.trial-mask-title-75 {
    color: #333;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 10px;
}

.trial-mask-description-75 {
    color: #666;
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 0;
}

.table-container-with-mask {
    position: relative !important;
    overflow: hidden;
}

@media (max-width: 768px) {
    .trial-mask-overlay-75 {
        width: 75% !important;
    }
    .trial-mask-content-75 {
        max-width: 220px;
        padding: 15px;
    }
}