/* GOUDY OLD STYLE */
@font-face {
    font-family: 'Goudy Old Style';
    src: url('/fonts/Goudy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }


.card {
    min-height: 570px;
    display: flex;
    flex-direction: column; /* Ensure content stacks vertically */
    justify-content: space-between; /* Distribute content evenly */
    border: 1px solid #f0f0f0; /* Light border for distinction */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensure content stays within the card */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    background-color: white; /* Clean white background */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    
}

.card:hover {
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Card Image */
.card img {
    display: block; /* Remove extra spacing caused by inline elements */
    width: 100%; /* Ensure the image takes the full width of the container */
    height: 100%; /* Force the image to fill the height of the container */
    object-fit: cover; /* Crop the image to fit the container */
    border-bottom: 1px solid #f0f0f0; /* Separation line */
}

/* Card Image Container */
.card-img-container {
    width: 250px; /* Exact width for the container */
    height: 250px; /* Exact height for the container */
    overflow: hidden; /* Ensure the image doesn’t overflow the container */
    position: relative; /* Prepare for any positioning adjustments */
}

/* Card Body */
.card-body > .btn-warning {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    text-align: left;
    font-family: 'Roboto Condensed', sans-serif;
    flex-grow: 1;
    height: auto; /* ✅ Let height be dynamic */
}

.img-catalog {
    display: block; /* Ensures the image behaves as a block element */
    width: 100%; /* Make the image take the full width of its container */
    max-width: 200px; /* Set a maximum width for uniformity */
    height: auto; /* Adjust height proportionally */
    max-height: 300px; /* Set a maximum height to prevent excessive height */
    object-fit: cover; /* Crop the image while maintaining aspect ratio */
    border-radius: 5px; /* Optional: Add rounded corners for aesthetics */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for design */
    margin: 0 auto; /* Center-align the image */
}





/* Card Title */
.card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: -6px;
  line-height: 1.3;
  min-height: 1.6em; /* Allow at least 2 lines */
  max-height: 2.9em; /* Allow up to 3 lines max */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}


/* Additional Card Details */
.card-author,
.card-year,
.card-category,
.card-price,
.card-stocks {
    font-size: 0.9rem; /* Unified font size for details */
    color: #555; /* Neutral color for details */
    margin: 5px 0; /* Spacing between details */
}

/* Highlight Important Details */
.card-price {
    color: #FCB900; /* Yellow for price */
    font-weight: bold;
}

.card-stocks {
    color: #e60000; /* Red for low stock emphasis */
}

/* Category Sidebar */
.category-sidebar {
    padding: 20px;
    background-color: #ebecf0;
    border-radius: 15px;
    font-family: 'Goudy Old Style', serif;
}

.category-sidebar h4 {
    font-weight: bold;
    margin-bottom: 15px;
}

.category-sidebar ul {
    list-style: none;
    padding: 0;
}

.category-sidebar ul li {
    padding: 5px 0;
    cursor: pointer;
}

.category-sidebar ul li:hover {
    text-decoration: underline;
}

.list-unstyled {
    text-decoration: none;
    color: black

}

/* Catalog Header */
.catalog-header input {
    max-width: 300px;
}

.catalog-header select {
    max-width: 300px;
}

/* Book Catalog */
.card {
    border: none;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.06);
}

.card > a {
    text-decoration: none; /* Remove underline from anchor tags */
}

.card > a:hover {
    text-decoration: none; /* Remove underline on hover */
}

/* Custom styles for pagination */
.pagination .page-link {
    color: black; /* Text color */
    border: 1px solid #ccc; /* Border color for the links */
}

.pagination .page-item.active .page-link {
    background-color: #fcb900; /* Highlight color for the active page */
    color: black; /* Text color for the active page */
    border-color: #fcb900; /* Border color for the active page */
}

.pagination .page-item.disabled .page-link {
    background-color: #ebecf0; /* Background color for disabled items */
    color: #232323; /* Text color for disabled items */
    border-color: #ebecf0; /* Border color for disabled items */
}

/* Hover effect */
.pagination .page-link:hover {
    background-color: #fcb900; /* Hover background color */
    color: black; /* Text color on hover */
    text-decoration: none; /* Remove underline on hover */
}


/********************************************* Admin CSS *******************************************************************************/
/* Combined CSS for Admin and General Buttons */

/* Styling for the "+ ADD BOOK" button */
.add-book-btn {
    background-color: #fcb900; /* Yellow background */
    color: black; /* Text color */
    border: none;
    padding: 10px 20px; /* Padding for the button */
    border-radius: 30px; /* Rounded corners */
    font-weight: lighter;
    cursor: pointer;
    display: inline-flex; /* Ensure it aligns inline with other elements */
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: 'Goudy Old Style', serif;
}

.add-book-btn:hover {
    background-color: #e0a800; /* Darker yellow on hover */
    color: black;
}

/* General Button Styles */
/* General Button Styles */
.btn {
    flex-grow: 1; /* Ensure buttons stretch evenly */
    padding: 8px 10px; /* Consistent padding */
    font-size: 0.9rem; /* Adjust font size for consistency */
    font-weight: normal;
    text-align: center; /* Center-align button text */
    border: none; /* Remove borders */
    border-radius: 20px; /* Rounded corners for aesthetics */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    cursor: pointer;
    font-family: 'Goudy Old Style', serif; /* Consistent font family */
}

/* Add Button */
.add-btn {
    background-color: #FFCC33;
    color: black;
    margin-right: 10px;
}

.add-btn:hover {
    color: black;
}

/* Edit Button */
.edit-btn {
    font-size: 10px;
    background-color: #FFCC33; /* Yellow background */
    color: black; /* Text color */
    
}

.edit-btn:hover {
    background-color: #e6b800; /* Darker yellow on hover */
    transform: scale(1.05); /* Slight zoom effect */
}


/* Add Stock Button */
.btn-info {
    font-size: 10px;
    background-color: #FFCC33; /* Green background */
    color: black; /* Text color */
}

.btn-info:hover {
    background-color: #e6b800; /* Darker green on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Delete Button */
.delete-btn {
    font-size: 10px;
    background-color: #ff6666; /* Red background */
    color: white; /* Text color */
}

.delete-btn:hover {
    background-color: #e60000; /* Darker red on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Category Sidebar Buttons Alignment */
/* Category Sidebar */
.category-sidebar {
    padding: 20px;
    background-color: #ebecf0;
    border-radius: 15px;
    font-family: 'Goudy Old Style', serif;
    margin-right: 20px;
}

.category-sidebar h4 {
    font-weight: bold;
    margin-bottom: 15px;
}

.category-sidebar ul {
    list-style: none;
    padding: 0;
}

.category-sidebar ul li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-sidebar ul li:hover {
    text-decoration: underline;
}

.add-category-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Book Catalog */
.catalog-header input,
.catalog-header select {
    max-width: 300px;
}

/*.card {
    border: none;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.06);
}*/

/* Container for Buttons */
.book-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* ✅ Push buttons to the bottom */
    gap: 10px;
    flex-wrap: wrap; /* ✅ Ensure they don’t overflow */
}

/* CARD TEXTS */

/* SORT AND SEARCH AND PAGINATION BUTTONS */

.form-control {
    font-family: "Roboto Condensed", sans-serif;
    font-size:10px;
}

.page-item {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
}

.cat-view {
    margin-bottom: 3%;
}

/* MY ACCOUNT BUTTON */

#navbarDropdown {
    color:black;
  }
  
  .dropdown-item {
    font-family: "Goudy Old Style", serif;
  }

  /* Back Link */
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 11%;
    color: #FCB900;
    font-family: 'Goudy Old Style', serif;
    font-size: 1.1em;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}



.catalog-container {
  padding-left: 0;
  padding-right: 0;
}

.catalog-inner {
  padding-left: 100px;
  padding-right: 100px;
  margin: 0 auto;
  max-width: 1320%;
}

.catalog-inner .row {
  margin-left: -8px;
  margin-right: -8px;
}
.catalog-inner .col-lg-3,
.catalog-inner .col-md-4,
.catalog-inner .col-sm-6 {
  padding-left: 8px;
  padding-right: 8px;
}



.admincatalog-inner {
  padding-left: 100px;
  padding-right: 100px;
  margin: 0 auto;
  max-width: 1320%;
}

.admincatalog-inner .row {
  margin-left: -8px;
  margin-right: -8px;
}
.admincatalog-inner .col-lg-3,
.admincatalog-inner .col-md-4,
.admincatalog-inner .col-sm-6 {
  padding-left: 8px;
  padding-right: 8px;
}


/* side bar decoration link */
.category-sidebar ul li a {
    color: black !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.category-sidebar ul li a:hover {
    color: #FCB900 !important; /* Yellow on hover */
    text-decoration: underline !important;
}

/* search and filter radius  */
.catalog-header .btn-search {
    background-color: #fcb900 !important;
    color: black !important;
    font-family: 'Goudy Old Style', serif;
    font-weight: bold;
    border-radius: 10px !important;
    padding: 6px 18px;      /* reasonable space around text */
    height: 38px;
    border: none;
    font-size: 14px;
    white-space: nowrap;
    display: inline-block;
    width: auto !important;  /* ensures it only fits text */
    flex-shrink: 0;
}



.catalog-header .btn-search:hover {
    background-color: #e0a800 !important; /* Hover state */
    color: black !important;
}


.catalog-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-header input,
.catalog-header select {
    height: 38px;
    border-radius: 10px !important;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    color: #555 !important;
}

/* GAB BETWEEN SEARCH AND FILTER */
.catalog-searchbar {
    display: flex;
    align-items: center;
    gap: 5px; /* Tighter spacing between input, select, and button */
    justify-content: flex-start;
    flex-wrap: wrap; /* Ensures wrapping if screen is small */
}

.catalog-searchbar input,
.catalog-searchbar select {
    max-width: 250px;
    height: 38px;
    border-radius: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
     color: #555 !important; /* same shade of grey */
}

.catalog-searchbar .btn-search {
    background-color: #fcb900 !important;
    color: black;
    font-family: 'Goudy Old Style', serif;
    font-weight: bold;
    border-radius: 10px;
    padding: 6px 14px;
    height: 38px;
    white-space: nowrap;
    font-size: 14px;
    border: none;
    display: inline-block;
    width: auto;
    flex-shrink: 0;
}

.catalog-searchbar .btn-search:hover {
    background-color: #e0a800;
    color: black;
}


/* Responsive Add-Book Button and Sidebar */
/* For tablets and larger mobile screens (max-width: 768px) */
@media (max-width: 768px) {
    .add-book-btn {
        padding: 8px 16px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Reduce font size */
        width: 100%; /* Full-width on smaller screens */
        margin-bottom: 10px;
    }

    .category-sidebar {
        width: 100%;
        padding: 15px; /* Adjust padding for mobile */
        text-align: center; /* Center the text for mobile */
        margin-bottom: 10px;
    }

    .card {
        flex-direction: column; /* Stack the card items vertically on mobile */
        width: 100%; /* Full width for the cards */
        margin-bottom: 10px;
    }
}

/* For smaller mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    .add-book-btn {
        padding: 6px 12px; /* Further adjust padding */
        font-size: 12px; /* Smaller font for very small screens */
        width: 100%; /* Ensure full-width button on small screens */
    }

    .welcome-title {
        font-size: 24px; /* Smaller font for the welcome title */
    }

    .category-sidebar ul li {
        padding: 3px 0; /* Reduce padding between list items */
    }

    .card {
        padding: 10px; /* Adjust padding for the card on smaller screens */
    }
}

/* Hover effect */
.add-book-btn:hover {
    background-color: #e0a800; 
    color: black;
}

@media (max-width: 768px) {
    .category-sidebar {
        width: 100%;
        padding: 20px; /* Keep the same padding */
    }
    .card {
        flex-direction: column; /* Optional, adjust as needed */
    }
}

/* For screens smaller than 480px (e.g., smaller mobile devices) */

/* Responsive adjustments */
@media (max-width: 768px) {
    .category-sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
    .add-book-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .welcome-title {
        font-size: 24px;
    }
    .category-sidebar ul li {
        padding: 3px 0;
    }
}

@media (max-width: 767.98px) {
    .genre-toggle::after {
        content: ' ▼';
        font-size: 0.8em;
        color: #555;
    }

    .genre-toggle[aria-expanded="true"]::after {
        content: ' ▲';
    }
}

/* Ensure mobile genre list items are left-aligned */
@media (max-width: 767.98px) {
  .category-sidebar ul {
    text-align: left !important;
    padding-left: 15px;
  }

  .category-sidebar ul li {
    text-align: left !important;
    margin-left: 0;
  }

  .category-sidebar ul li a {
    display: inline-block;
    width: 100%;
  }
}