/***
 Custom CSS in addition to bootstrap
***/

/* Custom Classes */
.product-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price-big {
    font-size: 1.25rem; /* Larger font size for prices */
}

/* Pagination */
.pagination {
    flex-wrap: wrap;
    justify-content: center; /* Center the pagination */
}

.pagination .page-item {
    flex: 0 0 auto; /* Prevent items from stretching */
    margin: 2px;
}

.pagination .page-item .page-link {
    padding: 0.25rem 0.5rem;
    width: auto;
}

.pagination .page-item.active .page-link {
    background-color: #343a40; /* Dark background for the active page */
    border-color: #343a40;
    color: #fff !important; /* White text for active page number */
}

.pagination .page-link {
    color: #000; /* Dark text color for non-active page links */
}

.page-info {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Additional Custom Styles */
.product-img-action-wrap {
    border-radius: 0.25rem; /* Rounded corners for images */
    overflow: hidden;
}

.product-action-1 .text-dark {
    color: #6c757d !important; /* Lighten action icon color */
}

.product-action-1 .text-dark:hover {
    color: #343a40 !important; /* Darken on hover */
}

.product-category a {
    text-decoration: none;
}

.product-category a:hover {
    text-decoration: underline;
}


/* Custom classes for the product detail page */
/* Ensure all images fit their containers uniformly */
/* Ensure main product image is centered and consistently sized */
.main-img {
    max-width: 100%;
    max-height: 400px; /* Set a consistent max height */
    min-height: 400px; /* Set a consistent min height */
    object-fit: contain; /* Ensure image scales correctly */
    display: block;
    margin: auto;
}

/* Thumbnail image styling */
.thumb-img {
    width: 80px;
    height: 80px;
    object-fit: cover; /* Cover ensures the aspect ratio is maintained */
}

.fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Define a specific size for thumbnails to maintain consistency */
.thumbnail {
    width: 60px;
    height: 60px;
}

.text-muted {
    color: #6c757d;
}

.h5, .h6, .nav-link {
    font-weight: 600;
}

.product-rating .bi {
    font-size: 1.2rem;
}

/* Existing styles */
.nav-pills .nav-link {
    border-radius: .25rem;
    font-weight: 500;
    flex: 1 1 auto;
    white-space: nowrap;
}

#categoryNav .nav-link {
    text-align: left;
}

/* Center-align text for the nav-pills */
.nav-pills.nav-justified .nav-link {
    text-align: center;
}

.nav-pills .nav-link.active {
    background-color: #343a40;
    color: #fff !important; /* force White text color for active tab */
}

/* Custom styles for mobile view to ensure 2 columns */
@media (max-width: 767.98px) {
    .nav-pills .nav-item {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        box-sizing: border-box;
        padding: 0.25rem;
    }

    .nav-pills .nav-link {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Add this to your CSS file */
@media (max-width: 767px) {
    #categoryNav .nav-link:last-child {
        margin-bottom: 20px; /* Adjust the value as needed */
    }
}

/* Ensure the active tab's text color is white */
.nav-pills .nav-link.active {
    color: #fff;
}

.table th, .table td {
    padding: .75rem 1.25rem;
}

.table th {
    width: 30%;
}

@media (max-width: 767.98px) {
    .product-details-section .row {
        display: flex;
        flex-wrap: wrap;
    }

    .product-details-section .row .col-3,
    .product-details-section .row .col-9 {
        width: 100%;
        flex: none;
    }

    .product-details-section .row .col-3 {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .product-details-section .row .col-9 {
        margin-bottom: 10px;
    }

    .product-details-section .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .product-details-section .btn:last-child {
        margin-bottom: 0;
    }

    .product-details-section .input-group {
        width: 100%;
    }
}

.btn-custom {
    min-height: 40px; /* Ensures all buttons have the same minimum height */
}

.form-control-custom {
    min-height: 40px; /* Adjust the height as needed */
}

/* Related products */
.related-products .d-flex {
    align-items: flex-start;
}

.related-product-img {
    width: 96px;
    height: 96px;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

.related-products .info .nav-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.related-products .info .d-flex {
    margin-top: 5px;
}

.related-products .info .text-dark {
    margin-top: 5px;
}

@media (max-width: 576px) {
    .list-view .list-view-img {
        height: 280px !important;
        object-fit: cover !important;
        width: 100% !important;
        max-width: 200px; /* Set a max-width to ensure consistency */
    }
}

.list-view img {
    padding-right: 15px;
}

/* Fixing container width to prevent horizontal scrolling */
.container {
    overflow-x: hidden;
}

aside {
    width: 100%; /* Ensure it fits within the viewport */
    max-width: 100%; /* Prevent it from exceeding the viewport width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

@media (max-width: 576px) {
    aside {
        width: 100%;
        padding: 0 15px; /* Adjust padding for smaller screens */
    }
}

.progress {
    height: 20px;
    position: relative;
}

.progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #000;
    white-space: nowrap;
}

/* This ensures the input takes up 100% width of its parent container */
.flatpickr-inline-container {
    width: 100%;
}

.flatpickr-calendar {
    width: 100% !important; /* Override any existing width properties */
}

/* Custom styles for the modal */
/* Add a border to make the modal stand out */
/* Modal Content */
.modal-content {
    border: 1px solid #d6e0f5; /* Light blue border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    background-color: #f0f4ff; /* Light blue background */
    border-radius: 8px; /* Rounded corners */
}

/* Optional: Add some padding inside the modal */
.modal-body {
    padding: 20px;
    background-color: #fff; /* White background for modal body */
}

/* Styling the modal header */
.modal-header {
    background-color: #495057; /* Darker navy */
    color: #fff; /* White text for the header */
    border-bottom: 1px solid #d6e0f5; /* Bottom border */
    border-top-left-radius: 8px; /* Rounded top corners */
    border-top-right-radius: 8px; /* Rounded top corners */
}

/* Styling the modal footer */
.modal-footer {
    background-color: #e9ecef; /* Light grey background */
    border-top: 1px solid #d6e0f5; /* Top border */
    border-bottom-left-radius: 8px; /* Rounded bottom corners */
    border-bottom-right-radius: 8px; /* Rounded bottom corners */
}

.slot-inactive {
    background-color: lightcoral;
}

.slot-reserved {
    background-color: lightyellow;
}

.slot-booked {
    background-color: lightgreen;
}

.booked-reserved-date {
    background-color: lightgreen !important;
    color: green !important;
}

.past-4pm-date {
    background-color: #ffcccc !important; /* Light shade of red */
    color: #ff0000 !important; /* Red text color */
}

/* In your CSS file */
.small-category-card {
    font-size: 0.8rem; /* Adjust as needed */
    display: block;       /* Ensures it stays on its own line */
    margin-top: 0.25rem; /* Small top margin for better spacing */
}

.small-category-table {
    font-size: 0.6rem;
    display: block;
    margin-top: 0.1rem; /* Reduced top margin for less gap */
}

@media (max-width: 576px) {
    /* Ensure elements are spaced properly when wrapping */
    .d-flex.flex-wrap > div {
        margin-bottom: 8px;
    }

    /* Allow the expiration input to adjust width in smaller viewports */
    #expiration_date {
        width: 100%;
        max-width: 200px; /* Prevent it from getting too large */
    }

    /* Smaller labels for mobile */
    .form-label {
        font-size: 12px;
    }
}

.form-check-input:checked {
        background-color: #343a40 !important; /* Dark color */
        border-color: #343a40 !important;    /* Dark color */
    }

/* Styles for refill table */
.table-warning>td { background:#fff7d1 !important; }
textarea.notes-field { max-height:5rem; resize:vertical; }


/* Scoped My Account sidebar link colors (static, not in templates) */
#accountNav .nav-link:not(.active) {
    color: var(--bs-secondary-color) !important; /* grey for inactive */
}
#accountNav .nav-link:not(.active):hover,
#accountNav .nav-link:not(.active):focus {
    color: var(--bs-body-color) !important; /* darker on hover/focus */
}