/* books-page.css */

/* Breadcrumb Navigation */
.breadcrumb-container {
    background-color: var(--light-navy);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 10px;
    color: var(--light-gray);
}

.breadcrumb a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: var(--red);
}

.breadcrumb .active {
    color: var(--light-gray);
}

/* Page Header Styles */
.books-header {
margin-top: 15px;
margin-bottom: 2rem;
text-align: center;
}

.page-title {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(–white);
}

.books-description {
max-width: 800px;
margin: 0 auto 1.5rem;
color: var(–light-gray);
line-height: 1.6;
}

/* Filter Section Styles */
.filter-section {
    display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: var(--light-navy);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-box {
    flex: 1;
    max-width: 500px;
    margin-right: 1rem;
}

.search-box form {
display: flex;
}

.search-box input[type="text"] {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(221, 221, 221);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
}

.search-box .search-btn {
background-color: var(--navy);
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-box .search-btn:hover {
background-color: var(--navy);
}

.filter-controls {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.filter-dropdown {
position: relative;
display: inline-block;
}

.filter-btn {
background-color: #fff;
color: #444;
border: 1px solid #ddd;
padding: 0.75rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}

.filter-btn:hover {
border-color: #aaa;
}

.filter-btn i {
font-size: 0.9rem;
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 320px;
z-index: 1000;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow-y: auto;
}

.dropdown-content.show {
display: block;
}

.dropdown-content a {
display: block;
padding: 0.75rem 1rem;
color: #333;
text-decoration: none;
transition: background-color 0.2s;
border-bottom: 1px solid #f1f1f1;
}

.dropdown-content a:last-child {
border-bottom: none;
}

.dropdown-content a:hover {
background-color: #f8f9fa;
}

.dropdown-content a.active {
background-color: #e8f0fe;
color: #1a73e8;
font-weight: 500;
}

/* Books Grid Styles */
.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.book-card {
/* background-color: var(--white); */
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s;
}

.book-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.book-thumbnail {
position: relative;
overflow: hidden;
border-radius: 8px 8px 0 0;
}

.book-thumbnail img {
width: 100%;
height: 600px;
object-fit: cover;
transition: transform 0.3s;
}

.book-card:hover .book-thumbnail img {
transform: scale(1.05);
}

.book-details {
position: absolute;
bottom: 10px;
left: 10px;
color: var(--gray);
font-size: 0.9rem;
background: rgba(0,0,0,0.6);
padding: 5px 10px;
border-radius: 4px;
display: flex;
gap: 10px;
align-items: center;
}

.book-pages {
background: rgba(255,255,255,0.2);
padding: 2px 6px;
border-radius: 3px;
color: white;
}

.bestseller-badge {
background: #ab0000;
color: white;
padding: 2px 6px;
border-radius: 3px;
font-weight: 600;
font-size: 0.85rem;
}

.book-info {
padding: 1rem;
background: var(--white);
min-height: 240px;
}

.book-title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--navy);
line-height: 1.3;
/* Limit to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.author-name {
font-size: 0.95rem;
color: var(--light-gray);
/* Limit to 1 lines */
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.75rem;
}

.book-description {
color: var(--light-gray);
font-size: 0.9rem;
line-height: 1.5;
/* Limit to 3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 1rem;
}

.amazon-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ff9900;
font-weight: 600;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s;
}

.amazon-link:hover {
color: #cc7a00;
}

.amazon-link i {
font-size: 1.3rem;
}

/* No Books Found Styles */
.no-books {
text-align: center;
padding: 3rem 1rem;
background-color: var(–light-navy);
border-radius: 8px;
margin-bottom: 2rem;
}

.no-books i {
font-size: 3rem;
color: var(–white);
margin-bottom: 1rem;
}

.no-books h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(–white);
}

.no-books p {
color: var(–white);
margin-bottom: 1.5rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.no-books .btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #1a73e8;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s;
}

.no-books .btn:hover {
background-color: #0d62cb;
}

/* Error Message Styles */
.error-message {
background-color: #ffebee;
border-left: 4px solid #f44336;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 4px;
}

.error-message h2 {
color: #d32f2f;
margin-bottom: 0.5rem;
font-size: 1.25rem;
}

.error-message p {
color: #555;
margin-bottom: 0;
}

/* Pagination Styles */
.pagination {
margin: 2rem 0;
}

.pagination ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
}

.pagination li {
margin: 0;
}

.pagination a {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #fff;
color: #333;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
min-width: 40px;
text-align: center;
transition: all 0.2s;
}

.pagination a:hover {
background-color: #f5f5f5;
border-color: #ccc;
}

.pagination a.active {
background-color: #1a73e8;
color: white;
border-color: #1a73e8;
}

.pagination .pagination-arrow {
display: flex;
align-items: center;
gap: 0.5rem;
}

.pagination .ellipsis {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 38px;
color: #777;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.filter-section {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}

.search-box {
    max-width: 100%;
    margin-right: 0;
}

.filter-controls {
    justify-content: space-between;
}

.book-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.page-title {
    font-size: 2rem;
}


}

@media (max-width: 576px) {
.book-grid {
grid-template-columns: 1fr;
}

.filter-controls {
    flex-direction: column;
    width: 100%;
}

.filter-dropdown {
    width: 100%;
}

.filter-btn {
    width: 100%;
    justify-content: space-between;
}

.dropdown-content {
    width: 100%;
}

.pagination a {
    padding: 0.4rem 0.8rem;
    min-width: 36px;
}


}

.no-results-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.btn.primary-btn {
background-color: #1a73e8;
color: white;
border: 1px solid #1a73e8;
}

.btn.primary-btn:hover {
background-color: #0d62cb;
}

.btn.secondary-btn {
background-color: #fff;
color: #1a73e8;
border: 1px solid #1a73e8;
}

.btn.secondary-btn:hover {
background-color: #e8f0fe;
}

@media (min-width: 576px) {
.no-results-options {
flex-direction: row;
justify-content: center;
}
}

/* Loading Spinner / */
.loading-spinner {
display: none;
text-align: center;
padding: 20px;
width: 100%;
height: 80px; /* / Fixed height to prevent footer movement */
margin-bottom: 20px;
}

.loading-spinner i {
font-size: 40px;
color: #fff;
animation: spin 1s infinite linear;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Featured Book Styles */
.featured-book {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Changed from 1fr 1fr to make container 1/3 of row */
  gap: 20px;
  margin-bottom: 30px;
  background: var(--light-navy);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.featured-book-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  max-height: 570px;
  width: 100%;
  display: flex; /* Added to center the image */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

.featured-book-container img {
  width: auto;
  height: 100%;
  object-fit: contain; /* Changed from fill to maintain aspect ratio */
  transition: transform 0.3s ease;
  display: block; /* Helps with centering */
  max-width: 100%; /* Ensures image doesn't overflow */
}

.featured-book-container:hover img {
transform: scale(1.05);
}

.featured-book-info {
padding: 20px;
margin-right: 60px;
display: flex;
flex-direction: column;
justify-content: center;
}

.featured-book-info h3 {
font-size: 30px;
margin-bottom: 15px;
color: var(–white);
}

.featured-book-info p.lead {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
color: var(–light-gray);
}

.amazon-btn {
background: #ff9900;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
align-self: flex-start;
text-decoration: none;
text-align: center;
}

.amazon-btn:hover {
background: #cc7a00;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .two-columns {
    grid-template-columns: 1fr;
    }

    .featured-book-container {
        height: 500px;
    }

    .featured-book-info h3 {
        font-size: 20px;
    }

    .amazon-btn {
        font-size: 14px;
        padding: 10px 20px;
    }


}

@media (max-width: 450px) {

    .featured-book-container {
        height: 500px;
    }
    .featured-book-info {
        margin-right: 0px;
    }
    .book-thumbnail img {
        height: 500px;
    }


}

/* Book Card Enhancements */
.book-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.book-title-link {
text-decoration: none;
color: inherit;
}

.book-title-link:hover h3 {
color: #e74c3c;
}

/* Infinite Scroll Container */
.books-container {
position: relative;
min-height: 300px;
}