/* Custom styles go here */
body {
    padding-top: 105px; /* compact navbar: ~55px top row + ~45px nav links row */
}

/* Square product image */
.product-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

/* Compact carousel */
.carousel-item .row {
    margin-left: -5px; /* Adjust as needed */
    margin-right: -5px; /* Adjust as needed */
}

.product-card {
    margin-bottom: 10px; /* Reduce space between cards */
}

/* WhatsApp Floating Button */
.whatsapp-floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* WhatsApp green */
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensure it stays on top */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.whatsapp-floating-button:hover {
    background-color: #1da851;
}

/* Navbar Radius Shape */
.main-navbar {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    /* Removed overflow: hidden; to allow dropdowns to show */
}

/* Carousel control button styling */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Make buttons larger */
    background-color: transparent; /* Remove background */
    z-index: 50; /* Ensure they are above other content */
    opacity: 1 !important; /* Ensure they are always visible */
}

.carousel-control-prev i,
.carousel-control-next i {
    color: black !important; /* Set icon color to black and force override */
    font-weight: bold; /* Make icon bold */
    font-size: 2rem; /* Adjust icon size */
}

/* Bigger, clearly-tappable arrow controls on mobile (default tap zone/icon
   are too small to reliably hit with a finger) */
@media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 15%;
    }

    .carousel-control-prev i,
    .carousel-control-next i {
        font-size: 1.1rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
}

/* Product Image Frame for Carousel */
#productImageCarousel {
    border: 1px solid #dee2e6; /* Light gray border */
    border-radius: 0.25rem; /* Slightly rounded corners */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
    margin-bottom: 1rem;
}


/* Themed Section */
.themed-section {
    background-color: #e3e6e7;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

/* Login Card Theme */
.login-card .card-header, .login-card .card-body {
    background-color: #ff661a;
    color: white;
}

.login-card .card-body a {
    color: #f8f9fa;
}

/* Navbar Dropdown z-index */
.main-navbar .dropdown-menu {
    z-index: 1050; /* Ensure dropdown is above other content */
}

/* Active Navbar Link */
.nav-link.active {
    background-color: #f8f9fa; /* Light gray background */
    color: #212529 !important; /* Dark text color */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #dee2e6;
    border-bottom: none;
}

.custom-hero {
    background-color: #ff661a;; /* choose your color */
}