body {
    font-family: 'Poppins', sans-serif;
    padding-bottom: 70px; /* Adjust based on bottom nav height */
}

:root {
    --bs-primary: #FFD700; /* Gold/Yellow color */
    --bs-primary-rgb: 255, 215, 0;
}
.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #e6c300;
    --bs-btn-hover-border-color: #e6c300;
    --bs-btn-focus-shadow-rgb: 255, 215, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ccb000;
    --bs-btn-active-border-color: #ccb000;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Custom style for max width on main content */
.main-content-container {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Custom styles for modern look */
.card {
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
}
.card:hover {
    transform: translateY(-5px);
}
.card-title {
    font-weight: 600;
}
.badge {
    font-weight: 400;
}
.bottom-nav-icon {
    font-size: 1.5rem; /* Adjust icon size */
}

/* Custom style for bottom nav max width */
#Bottom-nav .container {
    max-width: 640px;
}
/* Adjust image size for better visibility in grid */
#All-Kebaya .card-img-top {
    height: 180px; /* Increased image height */
    object-fit: cover; /* Changed to cover to fill space better */
}

.thumbnail-active-ring {
    box-shadow: 0 0 0 3px var(--bs-primary);
}

/* Dark Mode Styles */
html[data-bs-theme="dark"] {
    /* Adjust general text color in main content for dark mode */
    .main-content-container {
        color: #dee2e6; /* Light gray text */
    }

    /* Adjust text color for primary buttons in dark mode */
    .btn-primary {
        color: #fff !important; /* White text */
    }

    /* Adjust text color for product cards */
    .card-title,
    .card-text {
        color: #dee2e6 !important; /* Light gray text */
    }

    /* Adjust text color for theme toggle icon in dark mode */
    #theme-toggle i {
        color: #fff !important; /* White color for icon in dark mode */
    }

    /* Adjust link color in main content for dark mode */
    .main-content-container a {
        color: #dee2e6; /* Light gray color for links */
    }

    /* Adjust product image container background in dark mode */
    #All-Kebaya .card-img-top {
        background-color: #343a40 !important; /* Darker background */
    }

    /* Adjust background color for thumbnail section on details page in dark mode */
    #Thumbnail {
        background-color: #343a40 !important; /* Darker background */
    }

    /* Adjust color for back button icon on details page in dark mode */
    .main-content-container .bi-arrow-left {
        color: #fff !important; /* White color for back arrow icon */
    }

    /* Adjust bottom navbar colors */
    #Bottom-nav {
        background-color: #212529 !important; /* Dark background */
        border-top-color: #343a40 !important; /* Darker border */
    }

    #Bottom-nav .nav-link {
        color: #dee2e6 !important; /* Light gray text for links */
    }

    #Bottom-nav .nav-link.text-dark {
         color: #fff !important; /* White text for active/highlighted link */
    }

    /* Adjust text color for the order ID in custom success page in dark mode */
    html[data-bs-theme="dark"] #SuccessOrder #orderId {
        color: #fff !important; /* White text for order ID */
    }

    /* Adjust background and text color for bg-light elements in dark mode */
    .bg-light {
        background-color: #495057 !important; /* Darker background for bg-light */
        color: #dee2e6 !important; /* Light gray text */
    }

    /* Ensure text on warning/success backgrounds is visible in dark mode */
    .card.bg-warning.text-dark {
        color: #212529 !important; /* Keep dark text on warning background */
    }

    .card.bg-success.text-white {
        color: #fff !important; /* Keep white text on success background */
    }
}