/* Existing CSS styles here */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .container {
            background: #fff;
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .container img {
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            text-align: left;
        }
        input[type="text"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .details {
            background: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            text-align: left;
            overflow-wrap: break-word;
        }
        .details p {
            margin: 0 0 10px;
        }
        .details p span {
            font-weight: bold;
        }
        #merchant-details, #deeplink-info {
            background-color: #f0f0f0;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            overflow-wrap: break-word;
        }
        .menu {
            background-color: #333;
            overflow: hidden;
        }
        .menu a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .menu a:hover {
            background-color: #ddd;
            color: black;
        }
body.dark-mode {
    background-color: #121212; /* Dark background for the body */
    color: #ffffff; /* Light text for the body */
}

body.dark-mode .container {
    background: #333; /* Dark background for containers */
    color: #fff; /* Light text for containers */
}

body.dark-mode input[type="text"] {
    background-color: #555; /* Dark background for text inputs */
    color: #fff; /* Light text for text inputs */
    border: 1px solid #777; /* Adjusted border color for better visibility */
}

body.dark-mode .details,
body.dark-mode #merchant-details, 
body.dark-mode #deeplink-info {
    background: #444; /* Dark background for details sections */
    color: #fff; /* Light text for details sections */
}

body.dark-mode .menu a:hover {
    background-color: #555; /* Darker background for menu links on hover */
    color: white;
}
body.dark-mode label {
    color: #ffffff; /* Light color for text in dark mode */
}

  #issue-report-modal input[type="text"],
        #issue-report-modal textarea {
            width: 100%; /* Full width */
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #issue-report-modal button {
            width: 100%; /* Full width */
            padding: 10px;
            background-color: #4CAF50; /* Example button color */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #issue-report-modal button:hover {
            background-color: #45a049; /* Darker shade for hover effect */
        }
		
	body.dark-mode form button {
    background-color: #333; /* Dark background for buttons in dark mode */
    color: #fff; /* Light text color for better visibility */
    border: 1px solid #444; /* Slightly lighter border for some contrast */
}

body.dark-mode form button:hover {
    background-color: #444; /* Slightly lighter background on hover */
}