/* Make the navbar fixed at the top */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Ensure it's on top of other content */
    background-color: #fff; /* Set the background to white or any color you prefer */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds shadow to the navbar */
    width: auto; /* Avoid full-width */
    max-width: 1200px; /* Or any other max-width based on your design */
    margin: 0 auto; /* Center the navbar */
}
/* Tooltip delay style */
.navbar-nav .nav-link {
    position: relative;
}

.navbar-nav .nav-link:hover::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 14px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.2s ease-in-out; /* Faster tooltip appearance */
}

/* Prevents the tooltip from showing up initially */
.navbar-nav .nav-link::after {
    opacity: 0;
}

/* Add padding to the body so the content does not go under the navbar */
body {
    padding-top: 80px; /* Adjust this value according to the height of the navbar */
}
/* Default button style */
.wishlist-btn {
    position: relative;
    overflow: hidden;
}

/* Button text */
.wishlist-btn .btn-text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Hover effect - show text */
.wishlist-btn:hover .btn-text {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Change color when clicked (active state) */
.wishlist-btn.active {
    background-color: orange;
    color: white;
}

/* The heart icon color on hover */
.wishlist-btn.active i {
    color: white;
}

/* Optional - when button is clicked, hide the "Add to Wishlist" text */
.wishlist-btn.active .btn-text {
    visibility: hidden;
    opacity: 0;
}

/* Modal settings */
.modal {
    z-index: 1050; /* Make sure the modal is above the navbar */
}

/* Add margin-top to create space between the navbar and the modal */
.modal-dialog {
    margin-top: 100px; /* Adjust this value as needed to create enough space */
}

/* Optional: If the navbar has a background color, ensure content underneath is visible */
.navbar-nav {
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

/* Optional: Reduce space between content and pagination */
.content-container {
    margin-bottom: 20px; /* Adjust as needed */
}

.pagination {
    margin-top: 10px; /* Adjust the space above pagination */
}

/* Optional: Adjust the pagination button spacing */
.pagination li {
    margin: 0 5px; /* Decrease horizontal space between page buttons */
}

/* Optional: Adjust button padding for better appearance */
.pagination a {
    padding: 5px 10px; /* Adjust the padding for smaller buttons */
}

/* Ensure pagination looks neat and aligned */
.pagination li a {
    display: block;
    text-align: center;
    font-size: 15px;
    width: 70px; /* Make buttons smaller */
}

/* Responsive Styles */
@media (max-width: 1200px) { /* Large devices like tablets */
    .pagination li a {
        font-size: 13px;
        width: 50px; /* Adjust button size for medium screens */
    }

    .content-container {
        margin-bottom: 15px; /* Slightly reduce space for medium screens */
    }
}

@media (max-width: 768px) { /* Tablets */
    .pagination li a {
        font-size: 12px;
        width: 45px; /* Make buttons even smaller */
    }

    .pagination {
        margin-top: 8px; /* Adjust space above pagination */
    }

    .content-container {
        margin-bottom: 10px; /* Further reduce space for small screens */
    }
}

@media (max-width: 576px) { /* Mobile devices */
    .pagination li a {
        font-size: 10px;
        width: 40px; /* Even smaller buttons on mobile */
    }

    .pagination {
        margin-top: 5px; /* Less space on mobile */
    }

    .content-container {
        margin-bottom: 5px; /* Very little space between content and pagination */
    }

    /* Ensure pagination items stack properly on small screens */
    .pagination {
        flex-wrap: wrap; /* Allow pagination items to stack on mobile */
        justify-content: center; /* Center pagination items */
    }
}
/* Ensure placeholder text is visible */
input::placeholder {
    color: #6c757d; /* Use a light color that contrasts with the background */
}

/* Make sure input fields and placeholders are styled well on small screens */
@media (max-width: 768px) {
    .form-control, .form-select {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    input[type="date"] {
        width: 100%; /* Ensure date inputs take full width */
        background-size: 20px 20px; /* Adjust the background size if you're using icons */
        background-position: right 10px center; /* Adjust position of the icon inside the input */
        background-repeat: no-repeat; /* Ensure the icon doesn't repeat */
    }
}

/* Make date inputs and select fields look consistent on mobile */
@media (max-width: 576px) {
    .col-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .input-group-text {
        padding: 0.375rem 0.75rem; /* Adjust padding for small screens */
    }
}