/* Dark Mode Styles */
body.dark-mode {
    background: #181818;
    color: white;
}

.dark-mode .settings-box {
    background: #222;
    border: 1px solid #4CAF50;
}

.dark-mode .settings-item {
    border-bottom: 1px solid #444;
}

.dark-mode .arrow {
    color: #4CAF50;
}

.dark-mode .slider {
    background-color: #666;
}

.dark-mode input:checked + .slider {
    background-color: #4CAF50;
}


/*toggle dark light mode*/

/* Ensure all text turns white in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode .settings-item {
    color: white;
}

/* Keep green color consistent */
.dark-mode a,
.dark-mode .arrow {
    color: #4CAF50;
}


.dark-mode #sidebar,
.dark-mode .settings-container,
.dark-mode .main-content {
    background-color: #181818 !important;
    color: white !important;
}


/* Sidebar */
.dark-mode .sidebar {
    background-color: #121212 !important;
    color: white !important;
}

/* Sidebar icons or text */
.dark-mode #sidebar span,
.dark-mode #sidebar a {
    color: white !important;
}

/* Navbar */
.dark-mode .navbar {
    background-color: #1a1a1a !important;
    color: white !important;
}

/* Navbar links */
.dark-mode .navbar a {
    color: #4CAF50 !important;
}


/* FIX FOR THE WHITE BOX - Add these new rules */
.dark-mode .content {
    background-color: #181818 !important;
    color: white !important;
}

.dark-mode .hh {
    background-color: #181818 !important;
    color: white !important;
}

/* This is the main culprit - the .su class with the green border */
.dark-mode .su {
    background-color: #222222 !important;
    border: 3px solid #6EE550 !important;
    color: white !important;
}



/* Footer dark mode */
.dark-mode .footer {
    background-color: #0a0a0a !important;
    color: white !important;
}

/* ZenBot dark mode styles */
.dark-mode .zenbot-modal {
    background-color: #1a1a1a !important;
}

.dark-mode .zenbot-modal-content {
    background-color: #1a1a1a !important;
    color: white !important;
}

.dark-mode .zenbot-chat-body {
    background: #181818 !important;
}

.dark-mode .zenbot-bot-message {
    background: #333333 !important;
    color: white !important;
}

.dark-mode .zenbot-input {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #6EE550 !important;
}

.dark-mode .zenbot-form {
    background: #1a1a1a !important;
}


/* BOOTSTRAP NOTIFICATION FIXES - ADD THESE NEW RULES */

/* Bootstrap list group items (notifications) */
.dark-mode .list-group-item {
    background-color: #2d2d2d !important;
    color: white !important;
    border-color: #444 !important;
}


/* Container */
.dark-mode .container {
    background-color: transparent !important;
    color: white !important;
}


/* Links in notifications */
.dark-mode .list-group-item a {
    color: #4CAF50 !important;
}


/* Hover effects for list items */
.dark-mode .list-group-item:hover {
    background-color: #3d3d3d !important;
}

/* Bootstrap skeleton placeholders */
.dark-mode .placeholder {
    background-color: #444 !important;
}


/* Small text elements */
.dark-mode small {
    color: #ccc !important;
}


/* List group */
.dark-mode .list-group {
    background-color: transparent !important;
}

/* Images in notifications (profile pictures) */
.dark-mode .list-group-item img {
    border: 2px solid #444 !important;
}

/* General div elements in notifications */
.dark-mode .list-group-item div {
    color: white !important;
}




/* SETTINGS PAGE FIXES - for the white boxes */

/* Settings items (the main white boxes) */
.dark-mode .settings-item {
    background-color: #2d2d2d !important;
    color: white !important;
    border-bottom: 1px solid #444 !important;
}

/* Settings item links */
.dark-mode .settings-item a {
    color: white !important;
}

/* Settings item arrows and icons */
.dark-mode .settings-item i {
    color: #4CAF50 !important;
}

/* Account email text */
.dark-mode .account-email {
    color: #ccc !important;
}

/* Settings list container */
.dark-mode .settings-list {
    background-color: transparent !important;
}

/* Social icons */
.dark-mode .social-icons i {
    color: #4CAF50 !important;
}

/* Settings container border */
.dark-mode .settings-container {
    border-color: #4CAF50 !important;
}


/* SIDEBAR BRIGHTNESS FIX - This is the key fix for your dimmed sidebar text */
.dark-mode .sidebar ul li a {
    color: white !important;
    opacity: 1 !important;
    brightness: 1 !important;
}



/* FAQ Container - This is the main white box you're seeing */
.dark-mode .faq-container {
    background-color: #222222 !important;
    color: white !important;
}

/* FAQ Header text */
.dark-mode .faq-header {
    color: #4CAF50 !important;
}

/* FAQ Subheader */
.dark-mode .faq-subheader {
    color: white !important;
}

/* FAQ Description text */
.dark-mode .faq-description {
    color: #ccc !important;
}

/* FAQ Category cards */
.dark-mode .faq-category {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Active FAQ category */
.dark-mode .faq-category.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* FAQ category text */
.dark-mode .faq-category p {
    color: white !important;
}

/* FAQ Questions */
.dark-mode .faq-question {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* FAQ Answers */
.dark-mode .faq-answer {
    background-color: #2a2a2a !important;
    color: white !important;
    border-left: 3px solid #4CAF50 !important;
}

/* FAQ Answer paragraph text */
.dark-mode .faq-answer p {
    color: white !important;
}

/* FAQ Icons */
.dark-mode .faq-icon {
    color: #4CAF50 !important;
}

/* FAQ Section headings */
.dark-mode .faq-section h3 {
    color: white !important;
}



/* About Container - This is the main white box you're seeing */
.dark-mode .about-container {
    background-color: #222222 !important;
    color: white !important;
    border: 2px solid #4CAF50 !important;
}

/* About list items */
.dark-mode .about-item {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* About item hover effect */
.dark-mode .about-item:hover {
    background-color: #3d3d3d !important;
}

/* About item text/span */
.dark-mode .about-item span {
    color: white !important;
}

/* Version text */
.dark-mode .version {
    color: #ccc !important;
}

/* Arrow links */
.dark-mode .arrow a {
    color: #4CAF50 !important;
}

/* About page heading */
.dark-mode .about-container h2 {
    color: white !important;
}



/* Reviews Container - This is the main white box you're seeing */
.dark-mode .reviews-container {
    background-color: #222222 !important;
    color: white !important;
    border: 2px solid #4CAF50 !important;
}

/* Individual Review Cards */
.dark-mode .review-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
}

/* Review Card Headings */
.dark-mode .review-card h4 {
    color: white !important;
}

/* Review Card Paragraphs */
.dark-mode .review-card p {
    color: #ccc !important;
}

/* Add Review Button */
.dark-mode .add-review-btn {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .add-review-btn:hover {
    background-color: #45a049 !important;
}

/* Modal Styles for Dark Mode */
.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode .modal-content {
    background-color: #222222 !important;
    color: white !important;
}

/* Modal Close Button */
.dark-mode .close-btn {
    color: white !important;
}

/* Modal Input Fields */
.dark-mode .modal-content input,
.dark-mode .modal-content textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .modal-content input::placeholder,
.dark-mode .modal-content textarea::placeholder {
    color: #ccc !important;
}

/* Modal Labels */
.dark-mode .modal-content label {
    color: white !important;
}

/* Send Button in Modal */
.dark-mode .send-btn {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .send-btn:hover {
    background-color: #45a049 !important;
}

/* Star Rating */
.dark-mode .star-rating .fa {
    color: #666 !important;
}

.dark-mode .star-rating .fa:hover,
.dark-mode .star-rating .fa.active {
    color: orange !important;
}

/* Loading Text */
.dark-mode .loading {
    color: white !important;
}

/* Stars in Review Cards */
.dark-mode .stars {
    color: orange !important;
}


/* Fix the main content background */
.dark-mode .content {
    background: #181818 !important;
}

/* Fix the help container specifically */
.dark-mode .help-container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the help container heading */
.dark-mode .help-container h2 {
    color: white !important;
}

/* Fix the help container labels */
.dark-mode .help-container label {
    color: white !important;
}

/* Fix the help container input fields */
.dark-mode .help-container input,
.dark-mode .help-container textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix input placeholder text */
.dark-mode .help-container input::placeholder,
.dark-mode .help-container textarea::placeholder {
    color: #ccc !important;
}

/* Fix the help container button */
.dark-mode .help-container button {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .help-container button:hover {
    background: #45a049 !important;
}



/* Fix the help container specifically */
.dark-mode .help-container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the help container heading */
.dark-mode .help-container h2 {
    color: white !important;
}

/* Fix the help container labels */
.dark-mode .help-container label {
    color: white !important;
}

/* Fix the help container input fields */
.dark-mode .help-container input,
.dark-mode .help-container textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix input placeholder text */
.dark-mode .help-container input::placeholder,
.dark-mode .help-container textarea::placeholder {
    color: #ccc !important;
}

/* Fix the help container button */
.dark-mode .help-container button {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .help-container button:hover {
    background: #45a049 !important;
}

/* Dating Tips Page - Fix the white box */
.dark-mode .grid1 {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dating Tips - Fix the title */
.dark-mode .title {
    color: white !important;
}

/* Dating Tips - Fix the highlight span */
.dark-mode .highlight {
    color: #4CAF50 !important;
}

/* Dating Tips - Fix list items */
.dark-mode .tips-list li {
    color: white !important;
}

/* Dating Tips - Fix heart icons (keep them green) */
.dark-mode .tips-list i {
    color: #4CAF50 !important;
}

/* Ad Cards - Fix for dark mode */
.dark-mode .ad-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ad-card h4,
.dark-mode .ad-card h5,
.dark-mode .ad-card p {
    color: white !important;
}



/* Fix the help container specifically */
.dark-mode .help-container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the help container heading */
.dark-mode .help-container h2 {
    color: white !important;
}

/* Fix the help container labels */
.dark-mode .help-container label {
    color: white !important;
}

/* Fix the help container input fields */
.dark-mode .help-container input,
.dark-mode .help-container textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix input placeholder text */
.dark-mode .help-container input::placeholder,
.dark-mode .help-container textarea::placeholder {
    color: #ccc !important;
}

/* Fix the help container button */
.dark-mode .help-container button {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .help-container button:hover {
    background: #45a049 !important;
}

/* Dating Tips Page - Fix the white box */
.dark-mode .grid1 {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dating Tips - Fix the title */
.dark-mode .title {
    color: white !important;
}

/* Dating Tips - Fix the highlight span */
.dark-mode .highlight {
    color: #4CAF50 !important;
}

/* Dating Tips - Fix list items */
.dark-mode .tips-list li {
    color: white !important;
}

/* Dating Tips - Fix heart icons (keep them green) */
.dark-mode .tips-list i {
    color: #4CAF50 !important;
}

/* Ad Cards - Fix for dark mode */
.dark-mode .ad-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ad-card h4,
.dark-mode .ad-card h5,
.dark-mode .ad-card p {
    color: white !important;
}

/* Matches Page - Fix the white container */
.dark-mode .contains {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix search bar */
.dark-mode .search-bar {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .search-bar::placeholder {
    color: #ccc !important;
}

/* Fix tab buttons */
.dark-mode .tab-link {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .tab-link.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Fix load more button */
.dark-mode .load-more {
    background: #4CAF50 !important;
    color: white !important;
}

/* Fix user modal */
.dark-mode .user-modal .modal-content {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-header {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-body {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .user-modal .user-details p {
    color: white !important;
}

.dark-mode .user-modal .modal-footer {
    background: #222222 !important;
    border-top: 1px solid #444 !important;
}

/* Fix message icon button */
.dark-mode .message-icon {
    background-color: #4CAF50 !important;
    color: white !important;
}


/* Fix the help container specifically */
.dark-mode .help-container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the help container heading */
.dark-mode .help-container h2 {
    color: white !important;
}

/* Fix the help container labels */
.dark-mode .help-container label {
    color: white !important;
}

/* Fix the help container input fields */
.dark-mode .help-container input,
.dark-mode .help-container textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix input placeholder text */
.dark-mode .help-container input::placeholder,
.dark-mode .help-container textarea::placeholder {
    color: #ccc !important;
}

/* Fix the help container button */
.dark-mode .help-container button {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .help-container button:hover {
    background: #45a049 !important;
}

/* Dating Tips Page - Fix the white box */
.dark-mode .grid1 {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dating Tips - Fix the title */
.dark-mode .title {
    color: white !important;
}

/* Dating Tips - Fix the highlight span */
.dark-mode .highlight {
    color: #4CAF50 !important;
}

/* Dating Tips - Fix list items */
.dark-mode .tips-list li {
    color: white !important;
}

/* Dating Tips - Fix heart icons (keep them green) */
.dark-mode .tips-list i {
    color: #4CAF50 !important;
}

/* Ad Cards - Fix for dark mode */
.dark-mode .ad-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ad-card h4,
.dark-mode .ad-card h5,
.dark-mode .ad-card p {
    color: white !important;
}

/* Matches Page - Fix the white container */
.dark-mode .contains {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix search bar */
.dark-mode .search-bar {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .search-bar::placeholder {
    color: #ccc !important;
}

/* Fix tab buttons */
.dark-mode .tab-link {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .tab-link.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Fix load more button */
.dark-mode .load-more {
    background: #4CAF50 !important;
    color: white !important;
}

/* Fix user modal */
.dark-mode .user-modal .modal-content {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-header {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-body {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .user-modal .user-details p {
    color: white !important;
}

.dark-mode .user-modal .modal-footer {
    background: #222222 !important;
    border-top: 1px solid #444 !important;
}

/* Fix message icon button */
.dark-mode .message-icon {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* People Nearby Page - Fix the white container */
.dark-mode .container-box {
    background: #222222 !important;
    color: white !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the tabs */
.dark-mode .tab {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .tab.active {
    background: #4CAF50 !important;
    color: white !important;
}

/* Fix user cards */
.dark-mode .user-card,
.dark-mode .viewer-card {
    background: #333333 !important;
    color: white !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix user card overlays */
.dark-mode .overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
}

/* Fix loading and error messages */
.dark-mode .loading {
    color: white !important;
}

.dark-mode .error-message {
    color: #ff6b6b !important;
}

/* Fix user modal for people nearby */
.dark-mode .user-modal .modal-content {
    background: linear-gradient(135deg, #222222, #333333) !important;
    color: white !important;
}

.dark-mode .user-modal .modal-header {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-body {
    background: transparent !important;
    color: white !important;
}

.dark-mode .user-modal .user-details {
    color: white !important;
}

.dark-mode .user-modal .user-details p {
    color: white !important;
}

.dark-mode .user-modal .modal-footer {
    background: transparent !important;
    border-top: 1px solid #444 !important;
}



/* CHATIFY DARK MODE FIXES */

/* Chat main background */
.dark-mode .messenger-messagingView,
.dark-mode .messages-container,
.dark-mode .messenger-listView,
.dark-mode .messenger-infoView {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* Chat header */
.dark-mode .messenger-headTitle,
.dark-mode .messenger-title {
    color: #4CAF50 !important; /* keep brand green */
}

/* Messages */
.dark-mode .messages,
.dark-mode .message-hint {
    background-color: transparent !important;
    color: #ccc !important;
}

/* Single message bubbles */
.dark-mode .message-card {
    background-color: #2a2a2a !important;
    color: #f1f1f1 !important;
}
.dark-mode .message-card.sent {
    background-color: #4CAF50 !important;
    color: white !important;
}
.dark-mode .message-card.received {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Input box */
.dark-mode .messenger-sendCard {
    background-color: #2a2a2a !important;
    border-top: 1px solid #444 !important;
}
.dark-mode .messenger-sendCard textarea {
    background-color: #333 !important;
    color: #e0e0e0 !important;
}

/* Placeholder text */
.dark-mode .messenger-sendCard textarea::placeholder {
    color: #aaa !important;
}

/* Ads section */
.dark-mode .ads-section,
.dark-mode .ad-card {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}


/* Reset Password Page - Fix the white form box */
.dark-mode .account-form {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Fix form labels */
.dark-mode .form-group label {
    color: white !important;
}

/* Fix form inputs */
.dark-mode .form-control {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .form-control:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
}

/* Fix placeholder text */
.dark-mode .form-control::placeholder {
    color: #ccc !important;
}

/* Fix the main headings */
.dark-mode .login-section > h2 {
    color: white !important;
}

.dark-mode .sub-heading {
    color: white !important;
}

/* Keep the green highlight in sub-heading */
.dark-mode .sub-heading span {
    color: #4CAF50 !important;
}

/* Fix success message */
.dark-mode .success-message {
    color: #4CAF50 !important;
}

/* Fix message box */
.dark-mode .message-box {
    color: white !important;
}

/* Fix OTP inputs */
.dark-mode .otp-input {
    background-color: #333333 !important;
    color: white !important;
    border: 2px solid #4CAF50 !important;
}

.dark-mode .otp-input:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
}

/* Fix password toggle icons */
.dark-mode .password-toggle {
    color: #4CAF50 !important;
}

/* Fix login link text */
.dark-mode .login-link {
    color: #ccc !important;
}

.dark-mode .login-link a {
    color: #4CAF50 !important;
}

/* Fix buttons (they should already be green but ensure they stay green) */
.dark-mode .btn-primary {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

.dark-mode .btn-primary:hover {
    background-color: #45a049 !important;
}

/* Fix resend button */
.dark-mode #resendBtn {
    color: #4CAF50 !important;
    background: transparent !important;
}

/* Fix text elements */
.dark-mode .text-secondary {
    color: #ccc !important;
}

.dark-mode .text-primary {
    color: #4CAF50 !important;
}

/* Fix any other text elements */
.dark-mode p,
.dark-mode .text-center {
    color: white !important;
}

/* Fix required asterisks */
.dark-mode .text-danger {
    color: #ff6b6b !important;
}


/* Profile Card - Main white container */
.dark-mode .profile-card {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Profile header */
.dark-mode .profile-header {
    border-bottom: 1px solid #444 !important;
}

/* User name and profession */
.dark-mode .user-name {
    color: white !important;
}

.dark-mode .profession {
    color: #ccc !important;
}

/* Menu button */
.dark-mode .menu-btn {
    background: #333333 !important;
    color: white !important;
}

.dark-mode .menu-btn:hover {
    background: #444444 !important;
}

/* Menu content dropdown */
.dark-mode .menu-content {
    background: #333333 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .menu-content button {
    color: white !important;
}

.dark-mode .menu-content button:hover {
    background: #444444 !important;
}

/* Stats section */
.dark-mode .stat-number {
    color: #4CAF50 !important;
}

.dark-mode .stat-label {
    color: #ccc !important;
}

/* Section titles */
.dark-mode .section-title {
    color: white !important;
}

.dark-mode .section-title i {
    color: #4CAF50 !important;
}

/* About text */
.dark-mode .about-text {
    background: #333333 !important;
    color: white !important;
}

/* Personal info items */
.dark-mode .info-item {
    background: #333333 !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .info-item i {
    color: #4CAF50 !important;
}

.dark-mode .info-item strong {
    color: white !important;
}

/* Edit inputs */
.dark-mode .edit-input {
    background-color: #444444 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .edit-input:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
}

.dark-mode .edit-input::placeholder {
    color: #ccc !important;
}

/* Update button */
.dark-mode #updateBtn {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode #updateBtn:hover {
    background: #45a049 !important;
}

/* Image options dropdown */
.dark-mode .image-options {
    background: #333333 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .image-options button {
    color: white !important;
}

.dark-mode .image-options button:hover {
    background: #444444 !important;
}

/* Gallery images - keep original styling but add dark hover effects */
.dark-mode .gallery-image:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Skeleton loading for dark mode */
.dark-mode .skeleton {
    background: #444444 !important;
}

.dark-mode .skeleton-circle {
    background: #444444 !important;
}

/* Fix body background for profile page */
.dark-mode body {
    background: #181818 !important;
}

/* Ensure all text is visible */
.dark-mode .profile-card * {
    color: white;
}

/* Override any specific text colors */
.dark-mode .view-text {
    color: white !important;
}


/* CHATIFY DARK MODE FIXES - Enhanced */

/* Main chat containers */
.dark-mode .messenger {
    background-color: #181818 !important;
    color: white !important;
}

/* Chat sidebar/list view */
.dark-mode .messenger-listView {
    background-color: #1e1e1e !important;
    color: white !important;
}

/* Chat header */
.dark-mode .m-header {
    background-color: #2a2a2a !important;
    color: white !important;
    border-bottom: 1px solid #444 !important;
}

/* Search input */
.dark-mode .messenger-search {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .messenger-search::placeholder {
    color: #ccc !important;
}

/* Contact list items */
.dark-mode .messenger-list-item {
    background-color: #2a2a2a !important;
    color: white !important;
    border-bottom: 1px solid #333 !important;
}

.dark-mode .messenger-list-item:hover {
    background-color: #333333 !important;
}

.dark-mode .messenger-list-item.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Contact names and messages */
.dark-mode .messenger-list-item p {
    color: white !important;
}

.dark-mode .messenger-list-item span {
    color: #ccc !important;
}

/* Main messaging area */
.dark-mode .messenger-messagingView {
    background-color: #181818 !important;
    color: white !important;
}

/* Messages container */
.dark-mode .messages-container {
    background-color: #1e1e1e !important;
}

.dark-mode .messages {
    background-color: transparent !important;
}

/* Message bubbles - sent messages */
.dark-mode .message-card.sent .message {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Message bubbles - received messages */
.dark-mode .message-card.received .message {
    background-color: #333333 !important;
    color: white !important;
}

/* Message text */
.dark-mode .message-text {
    color: white !important;
}

/* Message meta info */
.dark-mode .message-meta {
    color: #ccc !important;
}

/* Message input area */
.dark-mode .messenger-sendCard {
    background-color: #2a2a2a !important;
    border-top: 1px solid #444 !important;
}

/* Message input textarea */
.dark-mode .m-send {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .m-send::placeholder {
    color: #ccc !important;
}

/* Send button and other form buttons */
.dark-mode .send-button,
.dark-mode .emoji-button {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Favorites section */
.dark-mode .messenger-favorites {
    background-color: #1e1e1e !important;
}

/* Saved messages */
.dark-mode .saved-messages {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Date headers in messages */
.dark-mode .date-header {
    background-color: #333333 !important;
    color: white !important;
}

/* Message hints */
.dark-mode .message-hint {
    color: #ccc !important;
}

/* File preview */
.dark-mode .file-preview {
    background-color: #333333 !important;
    color: white !important;
}

/* Settings modal inside chat */
.dark-mode .app-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode .app-modal-card {
    background-color: #222222 !important;
    color: white !important;
}

.dark-mode .app-modal-header {
    color: white !important;
}

.dark-mode .app-modal-body {
    background-color: #222222 !important;
    color: white !important;
}

.dark-mode .app-modal-footer {
    background-color: #222222 !important;
    border-top: 1px solid #444 !important;
}

/* Form elements in modals */
.dark-mode .app-modal input,
.dark-mode .app-modal textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Avatar upload preview */
.dark-mode .upload-avatar-preview {
    border: 2px solid #4CAF50 !important;
}

/* Color buttons for theme selection */
.dark-mode .update-messengerColor .color-btn {
    border: 2px solid #333 !important;
}

/* Internet connection status */
.dark-mode .internet-connection {
    background-color: #333333 !important;
    color: white !important;
}

/* Ads section in chat */
.dark-mode .ads-section {
    background-color: #1a1a1a !important;
    color: white !important;
}

.dark-mode .ads-title {
    color: white !important;
}

/* Individual ad cards */
.dark-mode .ad-card {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #444 !important;
}

.dark-mode .ad-card-body h4,
.dark-mode .ad-card-body h5,
.dark-mode .ad-card-body p {
    color: white !important;
}

/* Typing indicator */
.dark-mode .typing-indicator {
    background-color: #333333 !important;
    color: white !important;
}

/* Message actions (edit/delete) */
.dark-mode .message-actions {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode .message-actions i {
    color: white !important;
}

/* Edit message input */
.dark-mode .edit-input {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Edit buttons */
.dark-mode .edit-buttons .save-btn {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .edit-buttons .cancel-btn {
    background-color: #666666 !important;
    color: white !important;
}

/* Unread message badge */
.dark-mode .unread-badge {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Image modal */
.dark-mode .imageModal {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.dark-mode .imageModal-close {
    color: white !important;
}

/* Message status icons */
.dark-mode .message-status {
    color: #ccc !important;
}

/* Tab content in messenger */
.dark-mode .messenger-tab {
    background-color: #1e1e1e !important;
    color: white !important;
}

/* Search results */
.dark-mode .search-records {
    background-color: #1e1e1e !important;
    color: white !important;
}

/* Header avatar */
.dark-mode .header-avatar {
    border: 2px solid #4CAF50 !important;
}




/* Dashboard container */
.dark-mode .dashboard-container {
    background-color: #181818 !important;
    color: white !important;
}

/* Dashboard wrapper */
.dark-mode .dashboard-wrapper {
    background-color: #181818 !important;
}

/* Main dashboard cards */
.dark-mode .swipe {
    background-color: #222222 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .like {
    background-color: #222222 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .chat-requests {
    background-color: #222222 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Dashboard card headings */
.dark-mode .swipe h2,
.dark-mode .like h2,
.dark-mode .chat-requests h2 {
    color: white !important;
}

/* Dashboard card paragraphs */
.dark-mode .swipe p,
.dark-mode .like p {
    color: #ccc !important;
}

/* Match cards in carousel */
.dark-mode .match-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .match-card p {
    color: white !important;
}

.dark-mode .match-card strong {
    color: white !important;
}

.dark-mode .match-card a {
    color: white !important;
}

/* Swipe button */
.dark-mode .swipe-button {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .swipe-button a {
    color: white !important;
}

/* Request list items */
.dark-mode .request {
    background-color: #333333 !important;
    color: white !important;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dark-mode .request p {
    color: white !important;
}

.dark-mode .request strong {
    color: white !important;
}

/* Accept and decline buttons */
.dark-mode .accept {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .decline {
    background-color: #ff3b3b !important;
    color: white !important;
}

/* Request list container */
.dark-mode .request-list {
    background-color: transparent !important;
}

/* Skeleton loading elements */
.dark-mode .skeleton {
    background-color: #444444 !important;
    animation: skeleton-loading-dark 1.5s infinite ease-in-out;
}

.dark-mode .skeleton-circle {
    background-color: #444444 !important;
    animation: skeleton-loading-dark 1.5s infinite ease-in-out;
}

.dark-mode .skeleton-card {
    background-color: #333333 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .skeleton-text {
    background-color: #444444 !important;
}

/* Dark mode skeleton animation */
@keyframes skeleton-loading-dark {
    0% { background-color: #444444; }
    50% { background-color: #555555; }
    100% { background-color: #444444; }
}

/* Ads section */
.dark-mode .ads-section {
    background-color: #1a1a1a !important;
    color: white !important;
    border-left: 1px solid #333 !important;
}

.dark-mode .ads-section h3 {
    color: #4CAF50 !important;
}

/* Individual ad cards */
.dark-mode .ad-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ad-card-body {
    background-color: #333333 !important;
}

.dark-mode .ad-card h4,
.dark-mode .ad-card h5,
.dark-mode .ad-card p {
    color: white !important;
}

/* View more button in ads */
.dark-mode .btn-view-more {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .btn-view-more:hover {
    background-color: #45a049 !important;
}

/* Grid layout */
.dark-mode .grid {
    background-color: transparent !important;
}

/* Carousel controls */
.dark-mode .carousel-control-prev-icon,
.dark-mode .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dark-mode .carousel-control-prev:hover .carousel-control-prev-icon,
.dark-mode .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Carousel inner */
.dark-mode .carousel-inner {
    background-color: transparent !important;
}

/* Match section */
.dark-mode .match {
    background-color: transparent !important;
}

/* HR elements */
.dark-mode hr {
    border-color: #444 !important;
}

/* Text elements in dashboard */
.dark-mode .dashboard-container h2,
.dark-mode .dashboard-container h3 {
    color: white !important;
}

/* Loading states */
.dark-mode .loading {
    color: white !important;
}

/* Error messages */
.dark-mode .text-danger {
    color: #ff6b6b !important;
}

/* Success messages */
.dark-mode .text-success {
    color: #4CAF50 !important;
}

/* Carousel item text */
.dark-mode .carousel-item p {
    color: white !important;
}

/* Match list */
.dark-mode .match-list {
    background-color: transparent !important;
}

/* User card hover effects */
.dark-mode .user-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Profile links in match cards */
.dark-mode .user-link {
    color: white !important;
    text-decoration: none !important;
}

.dark-mode .user-link:hover {
    color: #4CAF50 !important;
}



/* Fix the main content background */
.dark-mode .content {
    background: #181818 !important;
}

/* Fix the help container specifically */
.dark-mode .help-container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the help container heading */
.dark-mode .help-container h2 {
    color: white !important;
}

/* Fix the help container labels */
.dark-mode .help-container label {
    color: white !important;
}

/* Fix the help container input fields */
.dark-mode .help-container input,
.dark-mode .help-container textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix input placeholder text */
.dark-mode .help-container input::placeholder,
.dark-mode .help-container textarea::placeholder {
    color: #ccc !important;
}

/* Fix the help container button */
.dark-mode .help-container button {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .help-container button:hover {
    background: #45a049 !important;
}

/* Dating Tips Page - Fix the white box */
.dark-mode .grid1 {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dating Tips - Fix the title */
.dark-mode .title {
    color: white !important;
}

/* Dating Tips - Fix the highlight span */
.dark-mode .highlight {
    color: #4CAF50 !important;
}

/* Dating Tips - Fix list items */
.dark-mode .tips-list li {
    color: white !important;
}

/* Dating Tips - Fix heart icons (keep them green) */
.dark-mode .tips-list i {
    color: #4CAF50 !important;
}

/* Ad Cards - Fix for dark mode */
.dark-mode .ad-card {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ad-card h4,
.dark-mode .ad-card h5,
.dark-mode .ad-card p {
    color: white !important;
}

/* Matches Page - Fix the white container */
.dark-mode .contains {
    background: #222222 !important;
    color: white !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix search bar */
.dark-mode .search-bar {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .search-bar::placeholder {
    color: #ccc !important;
}

/* Fix tab buttons */
.dark-mode .tab-link {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .tab-link.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Fix load more button */
.dark-mode .load-more {
    background: #4CAF50 !important;
    color: white !important;
}

/* Fix user modal */
.dark-mode .user-modal .modal-content {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-header {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-body {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .user-modal .user-details p {
    color: white !important;
}

.dark-mode .user-modal .modal-footer {
    background: #222222 !important;
    border-top: 1px solid #444 !important;
}

/* Fix message icon button */
.dark-mode .message-icon {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* People Nearby Page - Fix the white container */
.dark-mode .container-box {
    background: #222222 !important;
    color: white !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the tabs */
.dark-mode .tab {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .tab.active {
    background: #4CAF50 !important;
    color: white !important;
}

/* Fix user cards */
.dark-mode .user-card,
.dark-mode .viewer-card {
    background: #333333 !important;
    color: white !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Fix user card overlays */
.dark-mode .overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
}

/* Fix loading and error messages */
.dark-mode .loading {
    color: white !important;
}

.dark-mode .error-message {
    color: #ff6b6b !important;
}

/* Fix user modal for people nearby */
.dark-mode .user-modal .modal-content {
    background: linear-gradient(135deg, #222222, #333333) !important;
    color: white !important;
}

.dark-mode .user-modal .modal-header {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .user-modal .modal-body {
    background: transparent !important;
    color: white !important;
}

.dark-mode .user-modal .user-details {
    color: white !important;
}

.dark-mode .user-modal .user-details p {
    color: white !important;
}

.dark-mode .user-modal .modal-footer {
    background: transparent !important;
    border-top: 1px solid #444 !important;
}




/* Safety Section - Fix the main white container */
.dark-mode .safety-section {
    background-color: #181818 !important;
    color: white !important;
}

/* Safety Container - Fix the white content box */
.dark-mode .safety-container {
    background-color: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Safety headings */
.dark-mode .safety-section h1 {
    color: white !important;
}

.dark-mode .safety-section h2 {
    color: #4CAF50 !important; /* Keep the green color for section headers */
}

/* Safety paragraphs and text */
.dark-mode .safety-section p {
    color: white !important;
}

/* Safety list items */
.dark-mode .safety-section ul > li {
    color: white !important;
}

.dark-mode .safety-section ul > li strong {
    color: white !important;
}

/* Safety sub-lists */
.dark-mode .safety-section ul ul li {
    color: white !important;
}

/* Safety links - keep them green */
.dark-mode .safety-section a {
    color: #4CAF50 !important;
}

.dark-mode .safety-section a:hover {
    color: #45a049 !important;
}

/* Safety HR lines */
.dark-mode .safety-section hr {
    background-color: #444 !important;
    border-color: #444 !important;
}

/* Bullet points - keep them green */
.dark-mode .safety-section ul > li:before {
    color: #4CAF50 !important;
}




/* Subscription Section */
.dark-mode .subscription-section {
    background-color: #181818 !important;
    color: white !important;
}

/* Section Title */
.dark-mode .section-title {
    color: #4CAF50 !important; /* Keep the green title */
}

/* Subscription Container */
.dark-mode .subscription-container {
    background-color: transparent !important;
}

/* Subscription Cards - Fix the white background */
.dark-mode .subscription-card {
    background-color: #222222 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #333 !important;
}

.dark-mode .subscription-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Custom card (Most Popular) - keep the green border */
.dark-mode .custom-card {
    border: 2px solid #4CAF50 !important;
    background-color: #222222 !important;
}

/* Plan Title - keep the green background */
.dark-mode .plan-title {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Plan Description */
.dark-mode .plan-description {
    color: #ccc !important;
}

/* Plan Features List */
.dark-mode .plan-features {
    color: white !important;
}

.dark-mode .plan-features li {
    color: white !important;
}

/* Feature icons - keep them green */
.dark-mode .plan-features ion-icon {
    color: #4CAF50 !important;
}

/* Plan Price */
.dark-mode .plan-price {
    color: white !important;
}

.dark-mode .plan-price span {
    color: #ccc !important;
}

/* Plan Button - keep the green background */
.dark-mode .plan-button {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .plan-button:hover {
    background-color: #45a049 !important;
}

/* Down Container */
.dark-mode .down-container {
    color: white !important;
}

/* Most Popular Badge - keep it green */
.dark-mode .custom-card::before {
    background: #4CAF50 !important;
    color: white !important;
}



/* Trust Container - Fix the light gray/white background */
.dark-mode .trust-container {
    background-color: #181818 !important;
    color: white !important;
}

/* Trust Container Header Text */
.dark-mode .trust-container-header-text {
    color: white !important;
}

/* Trust Cards */
.dark-mode .trust-card {
    color: white !important;
}

.dark-mode .trust-card-header {
    color: white !important;
}

.dark-mode .trust-card-subtext {
    color: #ccc !important;
}

/* Meet Single Container - Fix the light green background */
.dark-mode .meet-single-container {
    background: #333333 !important; /* Change from light green to dark */
    color: white !important;
}

/* Chat Section */
.dark-mode .chat-section {
    background-color: #181818 !important;
    color: white !important;
}

.dark-mode .chat-section h1 {
    color: white !important;
}

/* Keep the green spans for "Relationship" and "Friendship" */
.dark-mode .chat-section span {
    color: #4CAF50 !important;
}

/* Image Text Container */
.dark-mode .image-text-container {
    background-color: transparent !important;
}

.dark-mode .image-text {
    color: white !important;
}

.dark-mode .image-text p {
    color: white !important;
}

/* Card Slider Section */
.dark-mode .card-slider-section {
    background-color: #181818 !important;
    color: white !important;
}

.dark-mode .card-slider-section h2 {
    color: white !important;
}

/* Keep the green "Success" span */
.dark-mode .card-slider-section span {
    color: #4CAF50 !important;
}

.dark-mode .card-slider-section p {
    color: white !important;
}

/* Testimonial Cards - Fix the white cards */
.dark-mode .card {
    background: #222222 !important;
    border: 1px solid #333 !important;
    color: white !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Card Content */
.dark-mode .card-content .comment {
    color: #ccc !important;
}

.dark-mode .card-content .name {
    color: white !important;
}

/* Keep the yellow/gold rating stars */
.dark-mode .card-content .rating {
    color: #ffcc00 !important;
}

/* Card Images - keep the white border for contrast */
.dark-mode .card-image img {
    border: 5px solid #333 !important; /* Change from white to dark for better contrast */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Card Slider Wrapper */
.dark-mode .card-slider-wrapper {
    background-color: transparent !important;
}

/* Card Slider */
.dark-mode .card-slider {
    background-color: transparent !important;
}


/* Chat Page (chatx.html) Dark Mode Fixes - Add these to your dark-mode.css file */

/* Main chat messenger container */
.dark-mode .messenger {
    background-color: #181818 !important;
    color: white !important;
}

/* Chat sidebar/list view - fix white background */
.dark-mode .messenger-listView {
    background-color: #1e1e1e !important;
    color: white !important;
}

/* Chat header */
.dark-mode .m-header {
    background-color: #2a2a2a !important;
    color: white !important;
    border-bottom: 1px solid #444 !important;
}

/* Messages header title */
.dark-mode .messenger-headTitle {
    color: #4CAF50 !important;
}

/* Search input */
.dark-mode .messenger-search {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .messenger-search::placeholder {
    color: #ccc !important;
}

/* Contact list items - fix white backgrounds */
.dark-mode .messenger-list-item {
    background-color: #2a2a2a !important;
    color: white !important;
    border-bottom: 1px solid #333 !important;
}

.dark-mode .messenger-list-item:hover {
    background-color: #333333 !important;
}

.dark-mode .messenger-list-item.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Contact names and messages */
.dark-mode .messenger-list-item p {
    color: white !important;
}

.dark-mode .messenger-list-item span {
    color: #ccc !important;
}

/* Messenger titles */
.dark-mode .messenger-title {
    color: white !important;
}

.dark-mode .messenger-title span {
    color: white !important;
}

/* Main messaging area - fix white background */
.dark-mode .messenger-messagingView {
    background-color: #181818 !important;
    color: white !important;
}

/* Messages container */
.dark-mode .messages-container {
    background-color: #1e1e1e !important;
}

.dark-mode .messages {
    background-color: transparent !important;
}

/* Message bubbles - sent messages (keep green) */
.dark-mode .message-card.sent .message {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Message bubbles - received messages */
.dark-mode .message-card.received .message {
    background-color: #333333 !important;
    color: white !important;
}

/* Message text */
.dark-mode .message-text {
    color: white !important;
}

/* Message meta info */
.dark-mode .message-meta {
    color: #ccc !important;
}

/* Message hints */
.dark-mode .message-hint {
    color: #ccc !important;
}

/* Message input area - fix white background */
.dark-mode .messenger-sendCard {
    background-color: #2a2a2a !important;
    border-top: 1px solid #444 !important;
}

/* Message input textarea */
.dark-mode .m-send {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode .m-send::placeholder {
    color: #ccc !important;
}

/* Send button and form buttons */
.dark-mode .send-button,
.dark-mode .emoji-button {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* File upload button */
.dark-mode .messenger-sendCard label {
    color: #4CAF50 !important;
}

/* Saved messages */
.dark-mode .saved-messages {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Date headers in messages */
.dark-mode .date-header {
    background-color: #333333 !important;
    color: white !important;
}

/* File preview */
.dark-mode .file-preview {
    background-color: #333333 !important;
    color: white !important;
}

/* Favorites section */
.dark-mode .messenger-favorites {
    background-color: #1e1e1e !important;
}

/* Search tab */
.dark-mode .search-tab {
    background-color: #1e1e1e !important;
    color: white !important;
}

.dark-mode .search-records {
    background-color: transparent !important;
    color: white !important;
}

/* Messenger body */
.dark-mode .m-body {
    background-color: #1e1e1e !important;
    color: white !important;
}

/* Contacts container */
.dark-mode .contacts-container {
    background-color: #1e1e1e !important;
}

/* Chat user name in header */
.dark-mode #chat-user-name {
    color: white !important;
}

/* Header navigation */
.dark-mode .m-header nav a {
    color: white !important;
}

.dark-mode .m-header-right a {
    color: white !important;
}

/* Connection status */
.dark-mode .internet-connection {
    background-color: #333333 !important;
    color: white !important;
}

/* Avatar circles */
.dark-mode .avatar {
    border: 2px solid #333 !important;
}

/* List of contacts container */
.dark-mode .listOfContacts {
    background-color: transparent !important;
}

/* Messenger tabs */
.dark-mode .messenger-tab {
    background-color: #1e1e1e !important;
    color: white !important;
}

/* Unread badge - keep green */
.dark-mode .unread-badge {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Message actions (edit/delete) */
.dark-mode .message-actions {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode .message-actions i {
    color: white !important;
}

/* Edit message input */
.dark-mode .edit-input {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Edit buttons */
.dark-mode .edit-buttons .save-btn {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode .edit-buttons .cancel-btn {
    background-color: #666666 !important;
    color: white !important;
}

/* Typing indicator */
.dark-mode .typing-indicator {
    background-color: #333333 !important;
    color: white !important;
}

/* Image modal */
.dark-mode .imageModal {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.dark-mode .imageModal-close {
    color: white !important;
}

/* Message status icons */
.dark-mode .message-status {
    color: #ccc !important;
}

/* Settings modal and other modals */
.dark-mode .app-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode .app-modal-card {
    background-color: #222222 !important;
    color: white !important;
}

.dark-mode .app-modal-header {
    color: white !important;
}

.dark-mode .app-modal-body {
    background-color: #222222 !important;
    color: white !important;
}

.dark-mode .app-modal-footer {
    background-color: #222222 !important;
    border-top: 1px solid #444 !important;
}

/* Form elements in modals */
.dark-mode .app-modal input,
.dark-mode .app-modal textarea {
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Header avatar */
.dark-mode .header-avatar {
    border: 2px solid #4CAF50 !important;
}

/* Right sidebar ads section */
.dark-mode .messenger-infoView {
    background-color: #1e1e1e !important;
    color: white !important;
}



/* Additional Dark Mode Fixes for chatx.html - Add these to your dark-mode.css file */

/* Fix any remaining white backgrounds in messenger */
.dark-mode .messenger,
.dark-mode .messenger * {
    background-color: transparent !important;
}

/* Specifically target the main messenger containers */
.dark-mode .messenger {
    background: #181818 !important;
}

.dark-mode .messenger-listView,
.dark-mode .messenger-messagingView,
.dark-mode .messenger-infoView {
    background: #1e1e1e !important;
    color: white !important;
}

/* Fix any white message containers */
.dark-mode .messages,
.dark-mode .messages-container,
.dark-mode .m-body {
    background: #1e1e1e !important;
    color: white !important;
}

/* Fix message cards with white backgrounds */
.dark-mode .message-card,
.dark-mode .message {
    background: transparent !important;
}

.dark-mode .message-card.sent .message {
    background: #4CAF50 !important;
    color: white !important;
}

.dark-mode .message-card.received .message {
    background: #333333 !important;
    color: white !important;
}

/* Fix any lingering white backgrounds in chat area */
.dark-mode .app-scroll {
    background: transparent !important;
}

/* Fix contact list backgrounds */
.dark-mode .listOfContacts,
.dark-mode .contacts-container {
    background: transparent !important;
}

/* Fix search tab backgrounds */
.dark-mode .search-tab,
.dark-mode .search-records {
    background: #1e1e1e !important;
}

/* Fix favorites section */
.dark-mode .favorites-section,
.dark-mode .messenger-favorites {
    background: transparent !important;
}

/* Fix any white table elements */
.dark-mode table,
.dark-mode .messenger-list-item table {
    background: transparent !important;
}

/* Fix the main content wrapper */
.dark-mode .content {
    background: #181818 !important;
}

/* Force all divs in messenger to be transparent unless specifically styled */
.dark-mode .messenger div:not(.message):not(.avatar):not(.message-card):not(.file-preview) {
    background: transparent !important;
}

/* Fix any remaining white elements */
.dark-mode .messenger-tab,
.dark-mode .users-tab {
    background: transparent !important;
}

/* Fix date headers */
.dark-mode .date-header {
    background: #333333 !important;
    color: white !important;
    text-align: center;
    padding: 5px;
    margin: 10px 0;
    border-radius: 15px;
}

/* Fix message hint backgrounds */
.dark-mode .message-hint {
    background: transparent !important;
    color: #ccc !important;
}

/* Fix any Bootstrap or framework whites */
.dark-mode .bg-white,
.dark-mode .bg-light {
    background: #222222 !important;
}

/* Fix scrollable areas */
.dark-mode .app-scroll-hidden {
    background: transparent !important;
}

/* Ensure main body background is dark */
.dark-mode body {
    background: #181818 !important;
}

/* Fix any remaining white containers */
.dark-mode .container,
.dark-mode .container-fluid {
    background: transparent !important;
}

/* Override any inline styles that might be setting white backgrounds */
.dark-mode [style*="background: white"],
.dark-mode [style*="background-color: white"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background-color: #ffffff"] {
    background: #222222 !important;
}

/* Fix typing indicator */
.dark-mode .typing-indicator {
    background: #333333 !important;
    color: white !important;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 5px 0;
}

/* Fix edit container */
.dark-mode .edit-container {
    background: transparent !important;
}

.dark-mode .edit-container .edit-input {
    background: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix any modal backgrounds in chat */
.dark-mode .modal,
.dark-mode .modal-dialog,
.dark-mode .modal-content {
    background: #222222 !important;
    color: white !important;
}

/* Fix emoji picker container if it appears */
.dark-mode .emoji-picker,
.dark-mode .emoji-picker__container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

/* Fix any remaining system elements */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background: #333333 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #ccc !important;
}

/* Fix loading states */
.dark-mode .loading,
.dark-mode .spinner {
    color: white !important;
}

/* Fix any card-like elements */
.dark-mode .card,
.dark-mode .card-body {
    background: #333333 !important;
    color: white !important;
    border: 1px solid #444 !important;
}

/* Fix navigation elements */
.dark-mode nav,
.dark-mode .nav {
    background: transparent !important;
}

/* Additional specificity for stubborn elements */
.dark-mode .messenger .messenger-listView .m-header,
.dark-mode .messenger .messenger-messagingView .m-header {
    background: #2a2a2a !important;
}

.dark-mode .messenger .messenger-listView .m-body,
.dark-mode .messenger .messenger-messagingView .m-body {
    background: #1e1e1e !important;
}

/* Fix any grid or flexbox containers */
.dark-mode .d-flex,
.dark-mode .flex,
.dark-mode .grid {
    background: transparent !important;
}

/* Fix any remaining text colors */
.dark-mode .text-dark,
.dark-mode .text-black {
    color: white !important;
}

/* Fix borders to be dark-friendly */
.dark-mode .border,
.dark-mode .border-light {
    border-color: #444 !important;
}

/* IMPORTANT: Nuclear option for any remaining white backgrounds */
.dark-mode * {
    /* Only apply to elements that don't already have a background set */
    background-color: transparent !important;
}

/* Then re-apply the specific backgrounds we want */
.dark-mode body {
    background: #181818 !important;
}

.dark-mode .messenger {
    background: #181818 !important;
}

.dark-mode .messenger-listView,
.dark-mode .messenger-messagingView,
.dark-mode .messenger-infoView {
    background: #1e1e1e !important;
}

.dark-mode .m-header {
    background: #2a2a2a !important;
}

.dark-mode .message-card.sent .message {
    background: #4CAF50 !important;
}

.dark-mode .message-card.received .message {
    background: #333333 !important;
}

.dark-mode .messenger-sendCard {
    background: #2a2a2a !important;
}

.dark-mode .settings-box,
.dark-mode .help-container,
.dark-mode .profile-card,
.dark-mode .subscription-card,
.dark-mode .ad-card {
    background: #222222 !important;
}


/* Photo Verification Dark Mode Styles - Add to your dark-mode.css file */

/* Override the body background for photo verification page */
.dark-mode body {
    background: #181818 !important; /* Override the light green background */
}

/* Fix the main container */
.dark-mode .container {
    background: #222222 !important; /* Override the white background */
    color: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; /* Dark shadow instead of green */
}

/* Fix the heading */
.dark-mode h1 {
    color: #4CAF50 !important; /* Keep the green but make it the brand green */
}

/* Fix the video container border */
.dark-mode .video-container {
    border: 4px solid #4CAF50 !important; /* Use brand green instead of light green */
}

/* Fix the preview container border */
.dark-mode .preview-container {
    border: 4px solid #4CAF50 !important; /* Use brand green instead of light green */
}

/* Fix buttons - keep them green but ensure proper contrast */
.dark-mode button {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dark-mode button:hover {
    background-color: #45a049 !important;
}

/* Fix the retake button */
.dark-mode .btn-retake {
    background-color: #e53e3e !important;
}

.dark-mode .btn-retake:hover {
    background-color: #c53030 !important;
}

/* Fix the submit button */
.dark-mode .btn-submit {
    background-color: #2b6cb0 !important;
}

.dark-mode .btn-submit:hover {
    background-color: #2c5282 !important;
}

/* Fix the loading text */
.dark-mode .loading {
    color: white !important;
}

.dark-mode .loading p {
    color: white !important;
}

/* Fix the spinner - keep it green themed */
.dark-mode .spinner {
    border: 4px solid #333333 !important;
    border-top: 4px solid #4CAF50 !important;
}

/* Fix protocol warning boxes */
.dark-mode .protocol-warning {
    background-color: #2d2d2d !important;
    color: #ffd700 !important; /* Gold color for warning */
    border-left: 4px solid #ffd700 !important;
}

.dark-mode .protocol-fix {
    background-color: #1a4d3a !important; /* Dark green background */
    color: #4CAF50 !important;
    border-left: 4px solid #4CAF50 !important;
}

/* Fix any text in the protocol boxes */
.dark-mode .protocol-warning p,
.dark-mode .protocol-fix p {
    color: inherit !important;
}

/* Ensure all text is visible */
.dark-mode .container * {
    color: white;
}

/* Override any specific text that should stay green */
.dark-mode .container h1 {
    color: #4CAF50 !important;
}

/* Fix SweetAlert modals if they appear */
.dark-mode .swal2-popup {
    background: #222222 !important;
    color: white !important;
}

.dark-mode .swal2-title {
    color: white !important;
}

.dark-mode .swal2-html-container {
    color: white !important;
}

.dark-mode .swal2-confirm {
    background-color: #4CAF50 !important;
}

.dark-mode .swal2-deny,
.dark-mode .swal2-cancel {
    background-color: #666 !important;
}

/* Fix any canvas elements */
.dark-mode canvas {
    background: transparent !important;
}


/* Add these styles to your dark-mode.css file */

/* Terms and Conditions Dark Mode Fixes */
.dark-mode .terms-container {
    background: #222222 !important;
    color: white !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Fix the main heading */
.dark-mode .terms-container h2 {
    color: white !important;
}

/* Fix all section headings */
.dark-mode .terms-container h3 {
    color: #4CAF50 !important; /* Keep the green brand color */
}

/* Fix all paragraphs */
.dark-mode .terms-container p {
    color: white !important;
}

/* Fix list items */
.dark-mode .terms-container ul {
    color: white !important;
}

.dark-mode .terms-container li {
    color: white !important;
}

/* Fix links - keep them green */
.dark-mode .terms-container a {
    color: #4CAF50 !important;
}

.dark-mode .terms-container a:hover {
    color: #45a049 !important;
    text-decoration: underline !important;
}

/* Fix strong/bold text */
.dark-mode .terms-container strong {
    color: white !important;
}

/* Ensure all text elements are white */
.dark-mode .terms-container * {
    color: white !important;
}

/* Override specific elements that should stay green */
.dark-mode .terms-container h3,
.dark-mode .terms-container a {
    color: #4CAF50 !important;
}

/* Fix any section containers */
.dark-mode .terms-container section {
    color: white !important;
}