/* General Styles */
body {
    background-color: #2e404c; /* Dark teal background */
    color: #99d6d7; /* Soft cyan text */
    font-family: Arial, sans-serif;
}

/* Navbar */
.navbar {
    background-color: #2e404c; /* Match background for consistency */
}
.navbar-brand, .nav-link {
    color: #ecaa78 !important; /* Cyan text */
    font-weight: bold;
}
.nav-link:hover {
    color: #99d6d7; /* Keep cyan on hover for uniformity */
}

/* Buttons */
.btn-primary, .btn-secondary, .btn-success, #pay-button {
    background-color: #2e404c; /* Match background */
    border-color: #99d6d7; /* Cyan border */
    color: #99d6d7 !important; /* Cyan text */
}
.btn-primary:hover {
    background-color: #233747; /* Darker teal */
    border-color: #99d6d7;
    color: #99d6d7;
}
.btn-secondary:hover {
    background-color: #233747; /* Darker teal */
    border-color: #99d6d7;
    color: #99d6d7;
}
.btn-success:hover, #pay-button:hover {
    background-color: #233747; /* Darker teal */
    border-color: #99d6d7;
    color: #99d6d7;
}

/* Cards (for product listings) */
.card {
    transition: transform 0.2s;
    border-color: #99d6d7; /* Cyan border */
    background-color: #34495E; /* Slightly lighter teal for contrast */
}
.card:hover {
    transform: scale(1.05);
    border-color: #99d6d7; /* Keep cyan */
}
.card-body {
    color: #99d6d7; /* Cyan text */
}

/* Alerts */
.alert-success {
    background-color: #d4edda;
    color: #99d6d7; /* Cyan text */
}
.alert-danger {
    background-color: #f8d7da;
    color: #99d6d7; /* Cyan text */
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .navbar-nav {
        text-align: center;
    }
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    .container {
        padding: 10px;
    }
}