/* Paymee - User Frontend Styles */

/* --- Theme Variables --- */
:root {
    --bs-body-font-family: 'Inter', 'Noto Sans Bengali', sans-serif;
    --bs-body-bg: #f4f7f6; 
    --bs-body-color: #212529; /* Default text for light theme */
    --bs-primary: #0d6efd; 
    --bs-primary-rgb: 13,110,253;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0,0,0,0.1);
    
    /* Custom App Variables */
    --app-surface-bg: #ffffff; /* Card backgrounds, etc. */
    --app-text-muted: #6c757d;

    /* Top Bar */
    --minimal-top-bar-height: 56px;
    --minimal-top-bar-bg: var(--bs-primary); 
    --minimal-top-bar-text-color: #ffffff;
    --minimal-top-bar-icon-color: #ffffff;

    /* Bottom Navigation */
    --bottom-navbar-height: 60px;
    --bottom-navbar-bg: #ffffff;
    --bottom-navbar-border-color: #e0e0e0;
    --bottom-navbar-text-color: #6c757d; 
    --bottom-navbar-active-color: var(--bs-primary);
    --bottom-navbar-hover-color: var(--bs-primary);
    --bottom-navbar-icon-size: 1.4rem;
    --bottom-navbar-text-size: 0.7rem;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #121212; 
    --bs-body-color: #e0e0e0;
    --bs-primary: #4dabf7; 
    --bs-primary-rgb: 77,171,247;
    --bs-secondary: #7f8c8d;
    --bs-success: #2ecc71;
    --bs-info: #3498db;
    --bs-warning: #f1c40f;
    --bs-danger: #e74c3c;
    --bs-light: #343a40; /* Darker light for dark mode */
    --bs-dark: #e9ecef;  /* Lighter dark for dark mode */
    --bs-border-color: #3a3f44;
    --bs-border-color-translucent: rgba(255,255,255,0.1);

    --app-surface-bg: #1e1e1e;
    --app-text-muted: #adb5bd;

    --minimal-top-bar-bg: #1e1e1e; 
    --minimal-top-bar-text-color: #e9ecef;
    --minimal-top-bar-icon-color: #e9ecef;

    --bottom-navbar-bg: #1e1e1e; 
    --bottom-navbar-border-color: #343a40;
    --bottom-navbar-text-color: #adb5bd;
    --bottom-navbar-active-color: var(--bs-primary);
    --bottom-navbar-hover-color: var(--bs-primary);
}

/* --- General Body & Typography --- */
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding-top: var(--minimal-top-bar-height);    
    padding-bottom: calc(var(--bottom-navbar-height) + 10px); /* 10px buffer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 0.95rem; /* Slightly adjusted base font size for app feel */
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* Medium weight for headings */
    letter-spacing: -0.01em;
}

a {
    color: var(--bs-primary);
    text-decoration: none;
}
a:hover {
    color: color-mix(in srgb, var(--bs-primary) 80%, black);
}

/* --- Main Content Area --- */
main.container {
    flex-shrink: 0;
    flex-grow: 1; 
    /* mt-3 from header.php adds top margin */
    /* mb-4 from header.php adds bottom margin */
}


/* --- Minimal Top Bar --- */
.minimal-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--minimal-top-bar-height); 
    background-color: var(--minimal-top-bar-bg); 
    color: var(--minimal-top-bar-text-color); 
    display: flex;
    align-items: center;
    padding: 0 1rem;
    z-index: 1030; /* Above most content, below modals */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Softer shadow */
}
.minimal-top-bar .back-button {
    color: var(--minimal-top-bar-icon-color);
    font-size: 1.5rem; 
    margin-right: 0.75rem; /* Adjusted margin */
    text-decoration: none;
    padding: 0.25rem; /* Make clickable area larger */
}
.minimal-top-bar .page-title-display {
    font-size: 1.1rem; 
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; 
}


/* --- Bottom Navigation Bar --- */
.bottom-navbar {
    background-color: var(--bottom-navbar-bg);
    border-top: 1px solid var(--bottom-navbar-border-color);
    height: var(--bottom-navbar-height);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06); /* Slightly more pronounced shadow for depth */
    z-index: 1030; 
}
.bottom-navbar .nav-items-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 0 0.25rem; 
}
.bottom-navbar .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 0; /* Allow items to grow and shrink equally */
    flex-grow: 1;
    text-decoration: none;
    color: var(--bottom-navbar-text-color);
    padding: 0.3rem 0.1rem; /* Adjusted padding */
    transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
    font-size: var(--bottom-navbar-text-size); 
    position: relative; 
    text-align: center;
}
.bottom-navbar .nav-item i.bi {
    font-size: var(--bottom-navbar-icon-size);
    margin-bottom: 2px; 
}
.bottom-navbar .nav-item span {
    display: block;
    line-height: 1.1; 
    margin-top: 1px;
    white-space: nowrap; /* Prevent text from wrapping if too long for the space */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Ensure it doesn't overflow its flex item container */
}
.bottom-navbar .nav-item:hover {
    color: var(--bottom-navbar-hover-color);
    /* transform: translateY(-2px); Optional hover effect */
}
.bottom-navbar .nav-item.active {
    color: var(--bottom-navbar-active-color); 
    font-weight: 600; 
}
.bottom-navbar .nav-item.active i.bi {
    /* You can add specific styling for active icons, e.g., font-weight if using font icons that support it */
}

/* paymee/assets/css/style.css */
/* ... (other styles) ... */

.flag-icon {
    width: 24px; /* Constrain width */
    height: auto;  /* Maintain aspect ratio */
    max-height: 18px; /* Ensure it doesn't get too tall, adjust as needed */
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #eee; /* Optional subtle border */
    object-fit: contain; /* Ensures the image fits without being cropped or stretched weirdly */
}

/* For the flag inside the main selector button */
.phone-input-group .btn img.flag-icon {
    margin-right: 0.25rem; /* Space between flag and prefix text in button */
    width: 22px; /* Slightly smaller for button */
    max-height: 16px;
}

/* For flags in the dropdown list items */
.phone-input-group .dropdown-menu .dropdown-item img.flag-icon {
    margin-right: 0.5rem; /* Space between flag and country name in list */
}

/* Ensure the button itself doesn't stretch unnecessarily */
.phone-input-group .btn {
    display: flex;
    align-items: center;
}

/* ... (other styles) ... */


/* --- General Card Styling --- */
.card {
    background-color: var(--app-surface-bg);
    border: 1px solid var(--bs-border-color-translucent); /* Softer border */
    border-radius: 0.5rem; /* Consistent border radius */
    margin-bottom: 1.5rem;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */ /* Optional: default subtle shadow for all cards */
}
.card-header {
    background-color: #333 !important; /* Cleaner look */
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    color: #f1f1f1;
}
.card-title-h, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { /* Standardize card header text */
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0;
}
.card-body {
    padding: 1.25rem;
}


/* --- Home Page Specific Styles --- */
.balance-card {
    /* background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 80%, black) 100%); */
    /* color: #fff; */ /* Ensure text is white if using dark gradient */
}
.balance-card .display-5 {
    letter-spacing: -0.5px;
}

.daily-reward-btn {
    font-size: 1.05rem;
    padding: 0.65rem 1rem;
    font-weight: 500;
}

.quick-actions-title {
    font-size: 1.2rem;
    color: var(--app-text-muted);
}
.quick-action-card {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    border: 1px solid var(--bs-border-color);
    background-color: var(--app-surface-bg);
}
.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.08)!important;
}
.quick-action-card .card-body i {
    /* Colors are set by text-success, text-primary etc. in HTML */
}
.quick-action-card .card-body span {
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

/* --- Form Elements --- */
.form-control, .form-select {
    font-size: 0.9rem;
    border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* --- Buttons --- */
.btn {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem; /* Default button padding */
    border-radius: 0.3rem;
}
.btn-lg {
    font-size: 1rem;
    padding: 0.65rem 1.25rem;
}
.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
}

/* --- Alert Styling (Flash Messages) --- */
.alert {
    border-left-width: 4px;
    border-radius: .25rem;
    font-size: 0.9rem;
}
.alert-dismissible .btn-close {
    padding: 0.85rem 1rem; /* Make close button easier to tap */
}
.alert-success { border-left-color: var(--bs-success); }
.alert-danger { border-left-color: var(--bs-danger); }
.alert-warning { border-left-color: var(--bs-warning); }
.alert-info { border-left-color: var(--bs-info); }

/* --- Responsive Adjustments --- */
@media (max-width: 370px) { /* Slightly adjusted breakpoint */
    .bottom-navbar .nav-item span {
        font-size: 0.6rem; /* Even smaller text */
    }
    .bottom-navbar .nav-item i.bi {
        font-size: 1.2rem; /* Slightly smaller icons */
    }
    .bottom-navbar {
        height: 56px;
    }
    body {
        padding-bottom: 66px; 
    }
    .minimal-top-bar .page-title-display {
        font-size: 1rem;
    }
    .quick-actions-grid {
        /* Consider making quick actions full width on very small screens if needed */
        /* .col { flex: 0 0 100%; max-width: 100%; } */
    }
}

/* Helper class for responsive table text */
.table-responsive-sm td, .table-responsive-sm th,
.table-responsive-md td, .table-responsive-md th,
.table-responsive-lg td, .table-responsive-lg th,
.table-responsive-xl td, .table-responsive-xl th {
    white-space: nowrap; /* Prevent text wrapping in table cells by default */
}
/* Allow wrapping for specific columns if needed by adding a class to those <td> or <th> */
.wrap-text {
    white-space: normal !important;
}

/* For tables where horizontal scroll is expected, ensure usability */
.table-responsive {
    /* Consider adding a subtle visual cue that it's scrollable if needed */
    /* e.g., a faint gradient on the right edge when content overflows */
}




/* --- Wallet Page Specific Styles --- */
.wallet-balance-card {
    /* background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 80%, black) 100%); */
    /* color: white; */ /* Ensure text is white if using dark gradient, now handled by Bootstrap bg-primary and text-white */
    border-radius: 0.75rem;
    /* Other styles from previous response */
}

.wallet-balance-card .display-4 { /* Or display-5 if you used that */
    letter-spacing: -1px;
    font-weight: 600; /* Make balance a bit bolder */
}

.wallet-action-buttons .btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem; /* Slightly smaller than previous for better fit */
    font-weight: 500;
    border-radius: 0.5rem; /* Consistent rounding */
}

.wallet-action-buttons .btn i {
    font-size: 1.5rem; /* Prominent icons */
    margin-bottom: 0.35rem; /* Space between icon and text */
}

.summary-stat-card {
    background-color: var(--app-surface-bg); /* Use theme variable */
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Subtle shadow */
}

.summary-stat-card .stat-label {
    font-size: 0.75rem; /* Smaller label */
    color: var(--app-text-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.summary-stat-card .stat-value {
    font-size: 1.15rem; /* Adjusted value size */
    font-weight: 600;
    color: var(--bs-body-color);
}

/* --- Recent Transactions List Styling --- */
.recent-transactions-card .card-body {
    padding: 0; /* Remove default card body padding if list group is flush */
}

.transaction-list-item {
    /* list-group-item from Bootstrap already provides some styling */
    padding: 0.85rem 1.25rem; /* Adjust padding for list items */
    border-bottom: 1px solid var(--bs-border-color-translucent); /* Consistent border */
    background-color: var(--app-surface-bg); /* Ensure it uses theme surface color */
    color: var(--bs-body-color); /* Ensure text uses theme body color */
}

.transaction-list-item:last-child {
    border-bottom: none;
}

[data-bs-theme="dark"] .transaction-list-item {
    border-bottom-color: var(--bs-border-color); /* Darker border for dark mode */
}


.transaction-list-item .transaction-type {
    font-weight: 500; /* Medium weight for type */
    color: var(--bs-body-color);
    font-size: 0.95rem;
}

.transaction-list-item .transaction-amount {
    font-size: 0.95rem;
    /* font-weight: 600; /* Already handled by fw-medium in HTML */
}

.transaction-list-item .transaction-amount.positive {
    color: var(--bs-success);
}
[data-bs-theme="dark"] .transaction-list-item .transaction-amount.positive {
    color: color-mix(in srgb, var(--bs-success) 85%, white); /* Make success color a bit lighter on dark bg */
}


.transaction-list-item .transaction-amount.negative {
    color: var(--bs-danger);
}
[data-bs-theme="dark"] .transaction-list-item .transaction-amount.negative {
    color: color-mix(in srgb, var(--bs-danger) 85%, white); /* Make danger color a bit lighter */
}


.transaction-list-item .small.text-muted {
    color: var(--app-text-muted) !important; /* Ensure text-muted uses our theme variable */
    font-size: 0.75rem; /* Smaller date/status text */
}

.transaction-list-item .badge { /* For status badge */
    font-size: 0.7rem;
    padding: 0.3em 0.5em;
    font-weight: 500;
}

.card-footer.recent-transactions-footer { /* For "View All" button footer */
    background-color: var(--bs-light); /* Use light variable for consistency */
    border-top: 1px solid var(--bs-border-color-translucent);
}
[data-bs-theme="dark"] .card-footer.recent-transactions-footer {
    background-color: var(--bs-tertiary-bg); /* Or a slightly different dark shade */
    border-top: 1px solid var(--bs-border-color);
}



/* assets/css/style.css */
/* ... (all existing styles, including those for .transaction-list-item from wallet.php) ... */

/* Specific enhancements for all_transactions.php if using list-group style */
.transaction-list-item .transaction-description,
.transaction-list-item .transaction-method-ref {
    color: var(--app-text-muted); /* Use the muted text color */
    font-size: 0.8rem; /* Slightly smaller for these details */
    line-height: 1.3;
    word-break: break-word; /* Allow long descriptions or refs to wrap */
}

/* Pagination styling (Bootstrap's default is usually fine, but you can customize) */
.pagination .page-link {
    font-size: 0.85rem; /* Slightly smaller pagination for mobile */
    padding: 0.3rem 0.6rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary); /* Primary color for dark theme */
    border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--app-surface-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bs-tertiary-bg);
}



/* In assets/css/style.css or your theme file */
.profile-ad-slot {
    /* For example, to ensure it doesn't mess with layout if ad is an odd size */
    min-height: 50px; /* Or whatever your smallest ad height might be */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* You might need to style the ad content itself if it doesn't come with its own styling */
.profile-ad-slot img, 
.profile-ad-slot iframe {
    max-width: 100%;
}







/* --- Updated Dark Mode Specifics for Deposit Page: Payment Method Details Box --- */

[data-bs-theme="dark"] #paymentMethodDetails {
    background-color: #333 !important;
    color: #fff;
    border-color: var(--bs-border-color);   /* Dark mode border color, e.g., #3a3f44 */
}

[data-bs-theme="dark"] #paymentMethodDetails h5#selectedMethodName {
    color: #fff; /* Explicitly light text for the method name */
}

[data-bs-theme="dark"] #paymentMethodDetails #selectedMethodInstructions {
    color: #fff; /* Themed muted light text for instructions, e.g., #adb5bd */
}

[data-bs-theme="dark"] #paymentMethodDetails .account-info {
    background-color: #222; /* Even darker background for inset effect, e.g., #121212 */
    color: #fff;         /* Light text on this very dark background */
    border: 1px solid var(--bs-border-color); /* Use the standard dark mode border for this inner box */
    /* Ensure padding is sufficient if not already set by .account-info base style */
    padding: 0.625rem 0.875rem; /* Consistent padding */
    border-radius: var(--bs-border-radius-sm, 0.25rem); /* Consistent border radius */
}

[data-bs-theme="dark"] #paymentMethodDetails p.small { /* For "Min Deposit:", "Charge:" labels */
    color: #fff !important; /* Use themed muted light text, ensure it overrides */
}

[data-bs-theme="dark"] #paymentMethodDetails p.small span { /* For the actual values like amounts/percentages */
    color: var(--bs-body-color); /* Make values clear and light */
    font-weight: 500; /* Ensure values are slightly bolder than their labels */
}






/* --- Dark Mode Specifics for Withdraw Page --- */

[data-bs-theme="dark"] .payment-method-card-withdraw {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .payment-method-card-withdraw:hover {
    border-color: color-mix(in srgb, var(--bs-success) 60%, transparent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

[data-bs-theme="dark"] .payment-method-card-withdraw.selected {
    box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-success-rgb), 0.35); /* Success color for dark theme */
}

/* Styling for #withdrawalMethodDetails as requested */
[data-bs-theme="dark"] #withdrawalMethodDetails {
    background-color: #333 !important; /* Hardcoded dark gray as per request */
    color: #fff;                     /* Hardcoded white text as per request */
    border-color: var(--bs-border-color); /* Use theme variable for border for consistency */
}

[data-bs-theme="dark"] #withdrawalMethodDetails h5#selectedWithdrawalMethodName {
    color: #fff; /* Hardcoded white text */
}

/* For the Min/Max/Charge descriptive text labels */
[data-bs-theme="dark"] #withdrawalMethodDetails p.small {
    color: #ddd !important; /* Slightly off-white for labels, as #fff can be too stark for secondary info */
}

/* For the actual values (amounts, percentages) within the p.small */
[data-bs-theme="dark"] #withdrawalMethodDetails p.small span {
    color: #fff; /* Bright white for the values themselves */
    font-weight: 500;
}


[data-bs-theme="dark"] .withdrawal-history-card .list-group-item {
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .withdrawal-history-card .list-group-item .fw-bold.text-warning {
    color: color-mix(in srgb, var(--bs-warning) 80%, white) !important;
}
[data-bs-theme="dark"] .withdrawal-history-card .list-group-item .fw-bold.text-success {
    color: color-mix(in srgb, var(--bs-success) 80%, white) !important;
}
[data-bs-theme="dark"] .withdrawal-history-card .list-group-item .fw-bold.text-danger {
    color: color-mix(in srgb, var(--bs-danger) 80%, white) !important;
}

[data-bs-theme="dark"] #wdWalletSpecificFields .form-label,
[data-bs-theme="dark"] #wdCryptoSpecificFields .form-label {
    color: var(--app-text-muted);
}







/* --- User Investment Card - Dark Mode Specifics --- */

[data-bs-theme="dark"] .user-investment-card {
    background-color: var(--app-surface-bg); /* e.g., #1e1e1e */
    color: var(--bs-body-color);             /* e.g., #e0e0e0 */
    border: 1px solid var(--bs-border-color);  /* e.g., #3a3f44 */
    padding: 1.25rem; /* Consistent padding */
    border-radius: var(--bs-card-border-radius, 0.5rem); /* Match general card radius */
    margin-bottom: 1.5rem; /* Consistent margin */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Softer, darker shadow for dark mode */
    position: relative; /* For badge positioning */
}

[data-bs-theme="dark"] .user-investment-card .plan-start-date {
    color: var(--app-text-muted); /* Muted light text */
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

[data-bs-theme="dark"] .user-investment-card .plan-status-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    /* Bootstrap's bg-* classes with data-bs-theme="dark" should handle text color automatically for contrast */
}
/* Example: If you need to force text color on a specific badge that Bootstrap doesn't handle well */
/*
[data-bs-theme="dark"] .user-investment-card .plan-status-badge.bg-light {
    color: var(--bs-dark) !important;
}
*/

[data-bs-theme="dark"] .user-investment-card .plan-title {
    color: #fff; /* Slightly brighter than default body color for headings */
    font-size: 1.3rem;
    font-weight: 600; /* Bolder title */
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .user-investment-card .small.text-muted { /* For Instance ID */
    color: var(--app-text-muted) !important;
    font-size: 0.75rem;
}

[data-bs-theme="dark"] .user-investment-card .plan-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent); /* Softer divider */
}

[data-bs-theme="dark"] .user-investment-card .plan-stats > div {
    text-align: center;
    flex-basis: 0;
    flex-grow: 1;
    padding: 0 0.25rem;
}

[data-bs-theme="dark"] .user-investment-card .plan-stats .stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.1rem;
}

[data-bs-theme="dark"] .user-investment-card .plan-stats .stat-value.earnings {
    color: var(--bs-success); /* Use theme success color */
    /* If success is too dark on dark bg, lighten it:
    color: color-mix(in srgb, var(--bs-success) 80%, white);
    */
}

[data-bs-theme="dark"] .user-investment-card .plan-stats .stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    line-height: 1.2;
}

[data-bs-theme="dark"] .user-investment-card .progress-container {
    margin-top: 1rem;
}

[data-bs-theme="dark"] .user-investment-card .progress {
    height: 0.75rem; /* Slightly thinner progress bar */
    background-color: var(--bs-tertiary-bg); /* Darker track for progress bar */
    border-radius: var(--bs-progress-border-radius, 0.25rem);
}

[data-bs-theme="dark"] .user-investment-card .progress-bar {
    /* bg-info should be handled by Bootstrap dark theme. Text color inside is auto. */
    font-size: 0.6rem; /* Smaller percentage text */
}

[data-bs-theme="dark"] .user-investment-card .progress-text {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin-top: 0.25rem;
}

[data-bs-theme="dark"] .user-investment-card .btn-outline-danger {
    /* Bootstrap default dark mode for outline buttons is usually good.
       The text and border will be var(--bs-danger).
       Hover background will be a translucent var(--bs-danger).
       If you need to override:
    */
    /* color: var(--bs-danger); */
    /* border-color: var(--bs-danger); */
}
[data-bs-theme="dark"] .user-investment-card .btn-outline-danger:hover {
    /* color: var(--bs-light); */ /* Or specific contrast color */
    /* background-color: var(--bs-danger); */
}


[data-bs-theme="dark"] .user-investment-card .congrats-message {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--bs-tertiary-bg); /* Subtle different background */
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .user-investment-card .congrats-message .bi-patch-check-fill {
    /* text-success from HTML, ensure it's light enough */
    color: color-mix(in srgb, var(--bs-success) 85%, white) !important;
}

[data-bs-theme="dark"] .user-investment-card .congrats-message h5 {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .user-investment-card .congrats-message p {
    color: var(--app-text-muted);
}

[data-bs-theme="dark"] .user-investment-card .alert-secondary {
    /* Bootstrap handles alert-secondary in dark mode: dark bg, light text */
    /* You can customize further if needed: */
    /* background-color: var(--bs-secondary-bg); */ /* Bootstrap's dark secondary bg */
    /* color: var(--bs-emphasis-color); */         /* Bootstrap's text color for on-secondary-bg */
    /* border-color: var(--bs-border-color); */
}




/* --- Card Footer (e.g., "View All Transactions") - Dark Mode --- */

[data-bs-theme="dark"] .card-footer.recent-transactions-footer {
    background-color: #333 !important; /* Bootstrap's variable for a slightly lighter dark background */
    border-top: 1px solid var(--bs-border-color); /* Your theme's dark mode border color */
}



/* --- Landing Page Sections - Dark Mode --- */


/* --- "Why Choose Us?" Section (Dark Mode) --- */

[data-bs-theme="dark"] .landing-section.text-center {
    background-color: var(--bs-body-bg); /* Uses your main dark theme background, e.g., #121212 */
    padding: 3.5rem 0; /* Adjust vertical padding as desired */
    color: var(--bs-body-color); /* Default text color for the section, e.g., #e0e0e0 */
}

[data-bs-theme="dark"] .landing-section.text-center h2 {
    color: #fff; /* e.g., #e9ecef or a brighter white */
    margin-bottom: 2.5rem; /* Space below "Why Choose Us?" title */
    font-weight: 600;     /* Bolder section title */
}

[data-bs-theme="dark"] .landing-section.text-center .feature-icon {
    font-size: 3rem; /* Larger icons */
    color: var(--bs-primary); /* Uses your dark theme's primary color, e.g., #4dabf7 */
    margin-bottom: 1rem;
    display: inline-block; /* Ensures margin-bottom applies correctly */
}

[data-bs-theme="dark"] .landing-section.text-center .col-md-4 h4 { /* Feature titles: "Secure Investments", etc. */
    color: var(--bs-body-color); /* Standard light text for dark mode */
    font-size: 1.3rem;       /* Slightly larger feature titles */
    margin-bottom: 0.5rem;
    font-weight: 500;       /* Medium weight for feature titles */
}

[data-bs-theme="dark"] .landing-section.text-center .col-md-4 p.text-muted {
    color: var(--app-text-muted) !important; /* Your theme's muted text color, e.g., #adb5bd */
    font-size: 0.9rem;                     /* Standard paragraph size */
    line-height: 1.6;                    /* Improved readability for paragraph text */
}
f


/* General styling for all .landing-section elements in dark mode */
[data-bs-theme="dark"] .landing-section {
    padding: 3.5rem 0; /* Adjust padding as needed */
    color: var(--bs-body-color); /* Default text color for the section */
}

/* Section titles */
[data-bs-theme="dark"] .landing-section h2 {
    color: var(--bs-heading-color, var(--bs-light)); /* Use Bootstrap's heading color or a light color */
    margin-bottom: 2rem; /* Space below the main section title */
    font-weight: 600;
}

/* --- "Why Choose Us?" Section (No explicit background class, inherits body background) --- */
[data-bs-theme="dark"] .landing-section:not(.bg-light) { /* Targets the first section */
    background-color: var(--bs-body-bg); /* Explicitly set to main dark body background */
}

[data-bs-theme="dark"] .landing-section .feature-icon {
    font-size: 2.8rem; /* Size of the Bootstrap Icons */
    color: var(--bs-primary); /* Use your theme's primary color for icons */
    
    
    margin-bottom: 1rem;
    display: inline-block; /* Allows margin-bottom to work as expected */
}

[data-bs-theme="dark"] .landing-section .col-md-4 h4 { /* Titles for each feature */
    color: var(--bs-body-color); /* Standard light text color */
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* p.text-muted will already be styled correctly by Bootstrap's dark theme
   (color: var(--bs-secondary-color) or var(--app-text-muted) if you've overridden it) */
[data-bs-theme="dark"] .landing-section .col-md-4 p.text-muted {
    color: var(--app-text-muted) !important; /* Ensure your theme's muted color is used */
    font-size: 0.9rem;
}


/* --- "About Paymee" Section (with .bg-light) --- */
[data-bs-theme="dark"] .landing-section.bg-light {
    /* Bootstrap's .bg-light in dark mode typically becomes var(--bs-secondary-bg) or var(--bs-tertiary-bg)
       which is a darker gray. This is usually desirable for section differentiation.
       If you want it to be the same as the body background, you'd uncomment the line below:
    */
    /* background-color: var(--bs-body-bg) !important; */

    /* If you want a specific different dark background for sections with .bg-light: */
    background-color: var(--bs-tertiary-bg); /* Or var(--app-surface-bg) if that's your card bg */
    border-top: 1px solid var(--bs-border-color-translucent);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .landing-section.bg-light h2 {
    /* Ensure heading color contrasts with the .bg-light's dark mode equivalent */
    color: var(--bs-heading-color, var(--bs-light));
}

[data-bs-theme="dark"] .landing-section.bg-light p.text-muted {
    color: #333 !important; /* Ensure it contrasts well */
}

/* The .btn-outline-primary will be handled by Bootstrap's dark theme:
   - Text and border will be var(--bs-primary) (your dark theme's primary, e.g., #4dabf7)
   - Hover background will be var(--bs-primary) with contrasting text.
*/

[data-bs-theme="dark"] .landing-section.bg-light .img-fluid {
    /* If the image has transparency and looks bad on dark bg,
       you might add a subtle border or background to the image container.
       Example:
    */
    /* border: 1px solid var(--bs-border-color-translucent); */
    /* background-color: rgba(255,255,255,0.05); */ /* Very subtle light glow if needed */
    /* border-radius: var(--bs-border-radius); */
}




333