/* Importing Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Arial&display=swap');

    /* General styling */
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #fff7f7;
      color: #3e151a;
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Ensures full height */
      overflow-x: hidden;
    }

    /* Header Styling */
    header {
      background-color: #3e151a;
      color: #fff7f7;
      display: flex;
      justify-content: space-between; /* Align logo/button to left, search to right */
      align-items: center;
      padding: 15px;
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 1000;
    }

    /* Logo and Sidebar Button Container */
    .logo-container {
      display: flex;
      align-items: center;
      margin-left: 10px; /* Adjust the distance between the logo and the button */
    }

    .logo-container img {
      width: 60px;
      height: auto;
    }

    /* Sidebar Button */
    .sidebar-button {
      cursor: pointer;
      width: 40px;
      height: 40px;
      margin-left: 15px; /* Adjust the distance between the logo and the button */
    }

    .sidebar-button img {
      width: 100%;
      height: 100%;
    }

    /* Search Container Styling in Header */
    .search-container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 20px; /* Adjust the distance between search and logo/button */
      margin-right: 35px; /* Adjust the distance between the logo and the button */
    }

    .search-box {
      padding: 12px;
      width: 650px;
      font-size: 18px;
      border-radius: 25px;
      border: 3px solid #6d2932;
      box-sizing: border-box;
      background-color: #fff7f7; /* Same as header search background color */
    }
    .search-box:hover {
      border: 3px solid #be0b23;
    }

    

    .dropdown {
      padding: 12px;
      font-size: 16px;
      border-radius: 25px;
      border: 3px solid #6d2932;
      margin-left: 10px;
      width: 210px;
      box-sizing: border-box;
      background-color: #fff7f7; /* Same as header search background color */
    }
    .dropdown:hover {
      border: 3px solid #be0b23;
    }

    .search-button {
      background-color: transparent;
      border: none;
      cursor: pointer;
      width: 50px;
      height: 50px;
      margin-left: 10px;
      flex-shrink: 0;
    }

    .search-button img {
      width: 130%;
      height: 100%;
      border: 3px solid #6d2932;
      border-radius: 25px;
    }
    .search-button img:hover {
      width: 130%;
      height: 100%;
      border: 3px solid #be0b23;
      border-radius: 25px;
    }


    /* Sidebar Styling */
    .sidebar {
      width: 250px;
      background-color: #d7d1d3;
      position: fixed;
      top: 85px; /* Sidebar starts below header */
      left: -250px; /* Sidebar hidden initially */
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 85px); /* Sidebar height */
      z-index: 1;
      overflow-y: auto;
      transition: left 0.3s ease-in-out; /* Smooth transition */
    }

    .sidebar.open {
      left: 0;
    }

    .sidebar form select {
      width: 100%; /* Make the dropdown span the full width of the sidebar */
      padding: 10px; /* Add padding to make it look better */
      font-size: 16px; /* Adjust the font size for better readability */
      border: 3px solid #6d2932;
      margin-top: 10px;
      border-radius: 10px; /* Rounded corners for input fields */
      background-color: #fff7f7; /* White background for the dropdown */
      margin-bottom: 10px; /* Add spacing between the select box and other elements */
      box-sizing: border-box; /* Ensure padding and borders are included in the width */
    }

    .sidebar form select:hover {
      width: 100%; /* Make the dropdown span the full width of the sidebar */
      padding: 10px; /* Add padding to make it look better */
      font-size: 16px; /* Adjust the font size for better readability */
      border: 3px solid #be0b23;
      margin-top: 10px;
      border-radius: 10px; /* Rounded corners for input fields */
      background-color: #fff7f7; /* White background for the dropdown */
      margin-bottom: 10px; /* Add spacing between the select box and other elements */
      box-sizing: border-box; /* Ensure padding and borders are included in the width */
    }

    .sidebar form select {
      width: 100%; /* Make the dropdown span the full width of the sidebar */
      padding: 10px; /* Add padding to make it look better */
      font-size: 16px; /* Adjust the font size for better readability */
      border: 3px solid #6d2932;
      border-radius: 10px; /* Rounded corners for input fields */
      background-color: #fff; /* White background for the dropdown */
      margin-bottom: 10px; /* Add spacing between the select box and other elements */
      box-sizing: border-box; /* Ensure padding and borders are included in the width */
    }

    /* Main Content Styling */
    .main-content {
      margin-left: 0px; /* Initially no margin */
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
      box-sizing: border-box;
      flex-grow: 1; /* Main content takes remaining space */
      min-height: calc(100vh - 85px); /* Ensures content fits without pushing footer */
      font-family: 'Arial', sans-serif;
      background-color: #fff7f7;
      transition: margin-left 0.3s ease-in-out; /* Smooth transition when sidebar is toggled */
    }

    .welcome-text {
      font-size: 90px;
      font-weight: bold;
      margin-bottom: 20px;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }

    /* Footer Styling */
    footer {
      background-color: #3e151a;
      color: #fff7f7;
      text-align: center;
      width: 100%;
      position: relative;
      bottom: 0;
      display: block;
      padding: 10px;
    }

    footer p {
      margin: 0;
    }

    footer .footer-text {
      font-size: 12px;
      color: #fff7f7;
      font-family: 'Libre Baskerville';
    }

    /* Sidebar Section Titles */
    .section-title {
      font-weight: bold;  /* Bold section titles */
      background-color: #6d2932; /* Section title background color */
      color: #fff7f7; /* Section title text color */
      padding: 8px;
      margin-top: 20px;    /* Add space above section titles */
      margin-bottom: 10px; /* Add space below section titles */
      border-radius: 10px; /* Rounded corners for section titles */
    }
    
    .year-button{
      margin-bottom: 10px; /* Add space between each link */
      background-color: #fff7f7; /* Menu item background color */
      color: #000000; /* Text color for menu items */
      padding: 8px;
      font-size: 18px;
      text-decoration: none;
      border-radius: 10px; /* Rounded corners for menu items */
      display: block;
      border: 1px solid #6d2932; /* 1px border around menu items */
    }

    .year-button:hover{
      background-color: #6d2932;
      color: #fff7f7; /* Text color on hover */
    }

    /* Adjust the margin for menu items */
    .menu-item {
      margin-bottom: 10px; /* Add space between each link */
      background-color: #fff7f7; /* Menu item background color */
      color: #000000; /* Text color for menu items */
      padding: 8px;
      text-decoration: none;
      border-radius: 10px; /* Rounded corners for menu items */
      display: block;
      border: 1px solid #6d2932; /* 1px border around menu items */
    }

    /* Hover and active state */
    .menu-item:hover {
      background-color: #6d2932; /* Hover background color */
      color: #fff7f7; /* Text color on hover */
    }

    .menu-item.active {
      background-color: #d0a1a7; /* Active background color */
      color: #000000; /* Text color for active menu items */
    }

    .menu-item.active:hover {
      background-color: #6d2932; /* Ensure background changes to #6d2932 on hover when active */
      color: #fff7f7; /* Text color remains white when hovered */
    }

    .year-input {
    display: block !important; /* Ensure year input fields are displayed */
    }
    /* Input Fields for Min Year & Max Year */
    .year-input input {
      background-color: #fff7f7; /* Background for input fields */
      border: 3px solid #6d2932;
      border-radius: 10px; /* Rounded corners for input fields */
      padding: 8px;
      font-size: 16px;
      width: 100%; /* Make input fields fit properly */
      color: #000000; /* Black text color */
      box-sizing: border-box; /* Ensure inputs fit inside */
      margin-bottom: 10px;
    }

    .year-input input.is-click-hover {
      border: 3px solid #be0b23 !important;
      box-shadow: 0 0 0 2px rgba(190, 11, 35, 0.12);
    }

    .year-input label {
      font-weight: bold; /* Bold label for Min and Max Year */
      margin-bottom: 5px;
      margin-top: 5px;
      display: block;
    }

    /* Relevance Dropdown */
    .refine-search {
      color: #551f26; /* Text color */
      font-weight: bold; /* Bold the text */
      font-size: 18px; /* Increase font size by 2px */
    }

    /* Sidebar Refine Search Dropdown */
    .sidebar select {
      padding: 10px;
      font-size: 16px;
      border-radius: 25px;
      border: 3px solid #3e151a;
      background-color: #fff;
      margin-bottom: 10px; /* Reduced space between dropdown and section title */
    }

    /* Header Dropdown */
    .dropdown {
      padding: 12px;
      font-size: 16px;
      border-radius: 25px;
      border: 3px solid #6d2932;
      margin-left: 10px;
      width: 210px;
      box-sizing: border-box;
      background-color: #fff7f7; /* Same as header search background color */
    }

    /* See More Button */
    /* See More Button */
    .see-all-btn {
      background-color: transparent;
      border: none;
      color: #6d2932;
      font-size: 16px;
      cursor: pointer;
      padding: 10px;
      font-weight: bold;
      text-decoration: underline; /* 👈 adds the underline */
      text-underline-offset: 3px; /* spacing between text and underline */
    }

    /* Optional: subtle hover effect */
    .see-all-btn:hover {
      color: #a33b45; /* slightly darker on hover */
      text-decoration-thickness: 2px; /* make underline bolder when hovered */
    }

  
    .menu-items .menu-item {
      display: none; /* Hide all items initially */
    }
    /* New Container Styling */
    /* Styling for the book info */
    /* Styling for the book info */
    /* Styling for the book info */
    .book-info {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      border: 2px solid black;
      padding: 20px;
      box-sizing: border-box;
      width: 85%;
      border-radius: 15px;
      margin-bottom: 25px;
      gap: 20px;
      background-color: #fff;
    }

    /* Left section: book details */
    .book-details {
      flex: 1;
      text-align: left;
    }

    /* Title and paragraphs: font size adjusted */
    .book-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #000000;
    }

    .book-details p {
      font-size: 16px;
      margin: 4px 0;
      color: #000000;
    }

    /* View Info Button */
    .view-info-btn {
      background-color: #6d2932;
      color: #fff7f7;
      padding: 8px 16px;
      font-size: 14px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      margin-top: 10px;
    }

    .view-info-btn:hover {
      background-color: #541e29;
    }


    /* General Styling for Action Buttons */
    .action-btn {
      background-color: #fff7f7; /* Light background color */
      color: #4d1c23; /* Text color */
      padding: 12px 20px; /* Increase height by adjusting padding */
      font-size: 18px; /* Font size for the text */
      border: 1px solid #6d2932; /* Border color */
      border-radius: 10px; /* Rounded corners */
      text-decoration: none; /* Remove underline */
      display: block; /* Ensures the buttons take up full width */
      margin-bottom: 15px; /* Space between buttons */
      text-align: center; /* Center the text inside the button */
      width: 100%; /* Full width to match the sidebar button size */
      cursor: pointer; /* Pointer cursor on hover */
      transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover */
    }

    /* Hover Effect for Action Buttons */
    .action-btn:hover {
      background-color: #6d2932; /* Darker background on hover */
      color: #fff7f7; /* White text on hover */
    }

/* Custom Header and Main Content Styles */
.liraya-header {
  background-color: #3e151a; /* Header background color */
  color: #fff7f7; /* Header text color */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  
}

.liraya-header .logo-container {
  display: flex;
  align-items: center;
  font-family: 'Libre Baskerville', serif; /* Apply Libre Baskerville font */
}

.liraya-header .logo-container img {
  width: 60px; /* Adjust logo size */
  height: auto;
  margin-right: 10px;
  margin-left: 0px;
}

.liraya-header .page-name {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
}

.liraya-header .about-us {
  font-size: 22px;
  font-weight: normal;
  display: flex;
  align-items: center;
  text-decoration: underline;
  font-weight: bold;
  margin-bottom: 15px;
  margin-right: 35px;
  font-family: 'Libre Baskerville', serif; /* Apply Libre Baskerville font */
  color: #fff7f7;
}

.liraya-header .home {
  font-size: 22px;
  font-weight: normal;
  display: flex;
  align-items: center;
  text-decoration: underline;
  font-weight: bold;
  margin-bottom: 0px;
  font-family: 'Libre Baskerville', serif; /* Apply Libre Baskerville font */
  color: #fff7f7;
  margin-right: 45px;
}

.liraya-header .home:hover {
  font-size: 22px;
  font-weight: normal;
  display: flex;
  align-items: center;
  text-decoration: underline;
  font-weight: bold;
  margin-bottom: 0px;
  font-family: 'Libre Baskerville', serif; /* Apply Libre Baskerville font */
  color: #db2525;
}

/* Main Content Styling */
.liraya-main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  flex: 1;
  box-sizing: border-box;
  min-height: 60vh; /* Ensures main content is centered */
  font-family: 'Arial', sans-serif;
  background-image: url("{% static 'images/user_background_homepage.png' %}"); /* Correct background image link */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #fff7f7; /* Fallback color in case the image doesn't load */
}

.liraya-main-content .welcome-text {
  font-size: 90px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Adding shadow for depth */
}

.liraya-main-content .search-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 20px;
  width: 100%;
  max-width: 850px;
  flex-direction: row;
  box-sizing: border-box;
}

.liraya-main-content .search-box {
  padding: 12px;
  width: 520px;
  font-size: 18px;
  border-radius: 25px;
  border: 3px solid #3e151a;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; /* smooth hover */
}

.liraya-main-content .dropdown {
  padding: 12px;
  font-size: 16px;
  border-radius: 25px;
  border: 3px solid #3e151a;
  margin-left: 10px;
  width: 210px;
  box-sizing: border-box;
}

.liraya-main-content .search-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin-left: 10px;
  flex-shrink: 0;
}

.liraya-main-content .search-button img {
  width: 130%;
  height: 100%;
  border: 3px solid #3e151a;
  border-radius: 25px;
}

.liraya-main-content .search-box:hover {
  border-color: #be0b23; /* color only; no size change */
}

.liraya-main-content .dropdown:hover {
  border-color: #be0b23;
}

.liraya-main-content .search-button img:hover {
  width: 130%;
  height: 100%;
  border: 3px solid #be0b23;
  border-radius: 25px;
}

/* Optional: Ensure responsiveness */
@media (max-width: 768px) {
  .liraya-main-content .welcome-text {
    font-size: 50px; /* Smaller text on mobile */
  }

  .liraya-main-content .search-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .liraya-main-content .search-box {
    width: 80%; /* Adjust width on smaller screens */
  }

  .liraya-main-content .dropdown {
    width: 80%; /* Adjust width on smaller screens */
  }
}
/* Main Content Styling */
.liraya-main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  flex: 1;
  box-sizing: border-box;
  min-height: 60vh;
  font-family: 'Arial', sans-serif;
  background-image: url("{% static 'images/user_background_homepage.png' %}");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #fff7f7;
}

/* About Us Container */
/* About Us Container */
.about-us-container {
  display: flex;
  width: 100%;
  height: 78vh; /* 90% of viewport height */
  margin-top: 20px;
  border-radius: 5px;
  border: 0px solid #541e29;
  background-color: #fff7f7; /* Optional: Background color for the container */
  font-family: 'Libre Baskerville', serif; /* Apply font to the entire container */
}

/* Left container (text) - fills available height */
.liraya-left-container {
  width: 75%;
  padding: 20px;
  border-right: 0px solid black; /* Only right border since container has outer border */
  height: 100%; /* Fill parent height */
  overflow-y: auto; /* Adds scroll if content overflows */
  box-sizing: border-box; /* Includes padding/borders in height calc */
  text-align: justify; /* Added text justification */
}

/* Right container (image) - fills available height */
.liraya-right-container {
  width: 25%;
  padding: 20px;
  height: 100%; /* Fill parent height */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Content styling */
.liraya-left-content {
  height: 100%;
}

/* Main About Us heading */
.liraya-left-content h1 {
  font-size: 2.8rem; /* Very big */
  font-weight: 800; /* Bold */
  color: #491b21; /* Header color */
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow */
}

/* Regular paragraph text */
.liraya-left-content p {
  font-size: 1.1rem; /* Slightly larger text size */
  color: #3a2a2a; /* Softer text color for better readability */
  line-height: 1.8; /* Increased line height for better spacing */
  margin-bottom: 20px; /* Increased margin for better separation */
  letter-spacing: 0.5px; /* Slightly increased letter spacing */
}

/* Sub-headers (Mission, Vision, Features) */
.liraya-left-content h2 {
  font-size: 2rem; /* Slightly big */
  font-weight: 700; /* Bold */
  color: #491b21; /* Sub-header color */
  margin: 25px 0 15px 0;
  line-height: 1.3;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow */
}

/* Right content styling */
.liraya-right-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.liraya-right-content img {
  max-width: 100%; /* Ensure the image takes full width of the container */
  max-height: 100%; /* Ensure the image takes full height of the container */
  object-fit: contain; /* Maintain aspect ratio */
}





/* Main Content Container with 2px Border AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/
/* Main Content Container with 2px Border */
.border-container {
  border: 2px solid #000000; /* 2px black border */
  display: flex; /* Use flexbox to arrange the content side by side */
  flex-direction: row; /* Align content horizontally */
  height: calc(90vh - 85px); /* Reduced height by 10% */
  width: calc(100% - 20px); /* Adjust width to account for margin */
  box-sizing: border-box; /* Ensure padding and border are included in width/height */
  margin-left: 0px; /* Use margin instead of padding for left space */
  overflow: hidden; /* Prevent scrolling inside the container */
}

/* New content-right container */
/* Left container (content-left) */
.content-left {
  width: 22%; /* Left container width */
  height: 100%; /* Same height as the right container */
  margin-right: 20px; /* Space between the left and right containers */
  border: 0px solid #000000; /* 2px black border */
  box-sizing: border-box; /* Ensure padding/border is included in width/height */
  display: flex;
  margin-left: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Right container (content-right) */
/* replace .content-right with */
.content-right {
width: calc(100% - 25% - 30px); /* Increase the width from 22% to 25% for the left container */
height: 100%;
margin-right: 30px;
border: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-right: 6px;
}

/* Adjust book-photo to make image smaller */
.book-photo {
width: 80%; /* Decrease width from 100% to 80% */
aspect-ratio: 1 / 1.5;
overflow: hidden;
margin: 0 auto;
}

/* Image inside the container (book photo) */
.book-photo img {
width: 100%; /* Ensure the image fits within the container */
height: auto; /* Allow height to adjust automatically */
object-fit: contain; /* Maintain the aspect ratio */
border-radius: 8px; /* Optional: rounded corners for image */
}

/* Button styling for the return button at bottom-right of image */
.return-btn {
  margin-top: 10px; /* Space between image and button */
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 50px;
  height: 50px;
  align-self: flex-end; /* Align button to the right */
}

/* Return Button Image Styling */
.return-btn img {
  width: 100%; /* Make the image fill the return button */
  height: 100%; /* Ensure the image fits inside the button */
  object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

/* Bottom content section (below book photo) */
.content-bottom {
  flex: 1; /* Take available space */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  text-align: center;
  font-size: 18px;
}
/* Styling for the book title and synopsis container */
.book-text-container {
  width: 100%; /* Full width of the container */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 0px solid #000000; 
  align-items: flex-start;
  height: 100%; /* Same height as the book photo */
  justify-content: flex-start; /* Align text content to the top */
}

/* Book Title Styling */
.book-title {
  font-size: 30px; /* Big font size */
  font-weight: bold; /* Bold text */
  color: #000000; /* Black text color */
  margin-bottom: 10px; /* Space between title and synopsis */
  font-family: 'Arial', sans-serif; /* Use Arial */
}

/* Style for the synopsis text */
.book-synopsis {
  font-size: 14px;
  line-height: 1.5;
  color: #000000;
  overflow: hidden;
  height: 5.0em;  /* Initially show 2 lines (adjust based on your line height) */
  transition: height 0.3s ease; /* Smooth transition for height change */
}

.book-synopsis p {
  margin: 0;
  font-size: 18px;
  text-align: justify;
}

.see-more-btn {
  background-color: transparent;
  border: none;
  color: #6d2932;
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
  text-decoration: underline;
}

.see-more-btn:hover {
  color: #a71633; /* Darker shade on hover */
}

.content-right {
  width: 100%; /* Ensure the right container spans full width */
}

.book-text-container .synopsis-table {
  width: 100% !important; /* Ensure table spans full width */
  font-size: 16px; /* Enlarge the text */
  font-weight: bold; /* Make the text bold */
  box-sizing: border-box; /* Include padding/borders in width calculation */
  border-collapse: collapse; /* Collapse borders */
  
}

/* First column (left side) - Make bold */
.book-text-container .synopsis-table td:first-child {
  width: 25%;
  vertical-align: top; 
  font-weight: bold; /* Make text bold */
  text-align: left;
}

/* Second column (right side) - Make normal */
.book-text-container .synopsis-table td:nth-child(2) {
  font-weight: normal; /* Remove boldness */
  font-size: 16px; /* Adjust font size */
}



.book-text-container .synopsis-table td {
  padding: 8px 10px; /* Padding for table cells */
  border-left: 1px solid #ddd; /* Border for the left side */
  border-right: 1px solid #ddd; /* Border for the right side */
  border-top: 1px solid #ddd; /* Border for the top side */
  border-bottom: 1px solid #ddd; /* Border for the bottom side */
  font-weight: bold; /* Ensure table text is bold */
  font-weight: normal; /* Reduce boldness */
  font-size: 16px;
}


.book-text-container .synopsis-table td:not(:last-child) {
  border-right: none; /* Remove right border for all columns except the last one */
}

.synopsis-table-container {
  margin-top: 30px; /* Margin above the table */
  width: 100%; /* Ensure the container takes full width */
  box-sizing: border-box; /* Prevent padding and borders from affecting width */
}

.synopsis-table td {
  padding: 12px 15px; /* Padding for table cells */
  border-left: 1px solid #ddd; /* Border for the left side */
  border-right: 1px solid #ddd; /* Border for the right side */
  border-top: 1px solid #ddd; /* Border for the top side */
  border-bottom: 1px solid #ddd; /* Border for the bottom side */
}

/* Add this to remove column borders */
.synopsis-table td:not(:last-child) {
  border-right: none; /* Remove right border for all columns except the last one */
}

.synopsis-table {
  width: 100%;
  border-collapse: collapse;
}

.synopsis-table td {
  padding: 12px 15px; /* Padding for table cells */
  border: 1px solid #ddd; /* Border for table cells */
}

.row-odd {
  background-color: #feecec; /* Color for odd rows */
}

.row-even {
  background-color: #fff7f7; /* Color for even rows */
}













    /* Styling for the right section with the book cover */
    .book-cover-details {
      width: 200px;
      height: 300px;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 10px;
    }

    
    /* Styling for the right section with the book cover */
    .book-cover {
      width: 150px;
      height: 200px;
      background-color: #f0f0f0;
      display: flex;
      border-radius: 10px;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .book-cover img {
      width: 150px;
      height: 200px;
      border-radius: 15px;
      object-fit: cover;
    }

    .cover-image {
      width: 100%;
      height: auto;
      object-fit: cover; /* Ensure the image covers the entire space */
    }

    /* Pagination Styling */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
      background-color: #fff7f7;
      padding: 10px;
      position: relative;
      transition: margin-left 0.3s ease-in-out; /* Smooth transition */
    }



    .search-results-label {
      text-align: left;
      font-size: 18px;
      font-weight: 600;
      color: #3e151a;
      margin: 20px 0 10px 300px; /* start further right so not covered */
      position: relative;
      transition: margin-left 0.3s ease-in-out;
    }


    /* Adjust the pagination when sidebar is open */
    .sidebar.open + .main-content + .pagination + .search-results-label{
      margin-left: 270px; /* Same as the main content margin shift */
    }


    .page-item {
      margin: 0 5px; /* Space between page items */
      padding: 10px 15px; /* Padding for clickable area */
      text-decoration: none; /* Remove underline */
      color: #6d2932; /* Text color */
      border: 3px solid #6d2932; /* Border around each page item */
      border-radius: 5px; /* Rounded corners for page items */
      cursor: pointer; /* Show pointer cursor on hover */
      transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
      font-weight: bold; /* Make dots bold */
    }

    .page-item:hover {
      background-color: #6d2932; /* Background color on hover */
      color: #fff7f7; /* Text color on hover */
    }

    .active {
      background-color: #d0a1a7; /* Active page background color */
      color: #000000; /* Active page text color */
      border: 3px solid #6d2932; /* Ensure active page has the same border */
    }

    .dots {
      margin: 0 5px; /* Space around dots */
      color: #6d2932; /* Color for dots */
      font-weight: bold; /* Make dots bold */
    }

    .nav-button {
      margin: 0 5px; /* Space around navigation buttons */
      padding: 10px 15px; /* Padding for clickable area */
      background-color: #fff7f7; /* Background color */
      border: 3px solid #6d2932; /* Border color */
      border-radius: 5px; /* Rounded corners */
      color: #6d2932; /* Text color */
      cursor: pointer; /* Show pointer cursor on hover */
      transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
      font-weight: bold; /* Make dots bold */
    }

    .nav-button:hover {
      background-color: #6d2932; /* Background color on hover */
      color: #fff7f7; /* Text color on hover */
    }

/* Typeahead dropdown (scoped under the wrapper so it won't break other containers) */
.search-box-wrap { position: relative; flex: 1 1 auto; min-width: 0; }

.search-box-wrap .typeahead {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  background: #fff;
  border: 2px solid #6d2932;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 2000;
}


    /* Center the search box, dropdown, and button vertically inside the form */
.search-container .search-form {
  display: flex;
  align-items: center;  /* vertical centering of children */
  gap: 10px;            /* optional spacing */
  margin: 0;            /* avoid default form margins affecting alignment */
}

/* Keep the icon perfectly centered inside the button */
.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;       /* remove baseline quirks */
}

/* Prevent baseline gap on the image */
.search-button img {
  display: block;
}

/* (Optional) Make input and dropdown visually the same height as the 50px button */
.search-form .search-box,
.search-form .dropdown {
  height: 50px;
  line-height: 50px;    /* improves visual centering for text */
  box-sizing: border-box;
}
/* --- Homepage search bar alignment (won't affect search page) --- */
.liraya-main-content .search-container {
  justify-content: center;      /* center the whole bar horizontally */
  margin: 0 auto;               /* keep it centered within max-width */
}

.liraya-main-content .search-form {
  display: flex;
  align-items: center;          /* vertical centering of children */
  gap: 10px;
  width: 100%;
  max-width: 850px;             /* same container limit */
  margin: 0 auto;
}





/* Keep the icon nicely centered */
.liraya-main-content .search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.liraya-main-content .search-button img { display: block; }






    .menu-items .menu-item:nth-child(-n+4) {
      display: block; /* Show the first four items */
    }



    /* About Us Button */
    .about-us {
      margin-top: 20px;
      text-align: center;
      color: #6d2932;
      font-size: 20px;
      font-weight: bold;
      text-decoration: underline;
      cursor: pointer;
    }

    .about-us:hover {
      color: #db2525; /* Text color on hover */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      header {
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
      }

      .logo-container img {
        width: 30px;
      }

      .search-box {
        max-width: 100%;
        padding: 10px;
      }

      .search-button {
        width: 40px;
        height: 40px;
        font-size: 16px;
      }
      .search-button:hover {
        background-color: #ff0022;
      }

      .dropdown {
        width: auto;
        font-size: 14px;
      }

      .welcome-text {
        font-size: 28px;
      }

      .main-content {
        margin-left: 0;
      }

      .sidebar {
        position: static;
        width: 100%;
        height: auto;
      }
      
    }
/* ---- Typeahead (suggestions) — minimal, safe, scoped ---- */
.search-form .search-box-wrap { 
  position: relative; 
  flex: 1 1 auto; 
  min-width: 0; 
}

.search-form .typeahead {
  position: absolute;
  top: calc(100% + 6px);     /* sits just below the input */
  left: 0;
  right: 0;
  display: none;             /* hidden until JS adds .visible */
  background: #fff;
  border: 2px solid #6d2932;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 2000;             /* ensure it overlays surrounding UI */
}

.search-form .typeahead.visible { 
  display: block; 
}

/* Items (your requested styles, kept as-is) */
.typeahead-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
}

.typeahead-item:hover,
.typeahead-item.active {
  background: #feecec;
}

.typeahead-item .badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #6d2932;
  color: #6d2932;
  margin-left: 12px;
  white-space: nowrap;
}


/* Initially hide the full keywords and truncate the list */
.keywords {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 600px;
  color: black;
}

/* When expanded, show all keywords */
.keywords-expanded {
  white-space: normal;
  overflow: visible;
  color: black;
}

/* Styling for the See More button */
.kw_see_more {
  background-color: transparent;
  border: none;
  color: #6d2932;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  font-weight: bold;
  text-decoration: none; /* Remove the default underline */
}

/* Underline the text when hovered */
.kw_see_more:hover {
  text-decoration: underline;
}

/* Filter confirmation modal (header search – keep / drop filters) */
#filter-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: none;
}

#filter-confirm-modal .filter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

#filter-confirm-modal .filter-modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  border: 2px solid #6d2932;
  box-sizing: border-box;
}

.filter-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #3e151a;
  margin: 0 0 8px 0;
}

.filter-modal-body {
  font-size: 14px;
  color: #3a2a2a;
  margin: 0 0 12px 0;
}

.filter-modal-summary {
  font-size: 14px;
  color: #3a2a2a;
  background: #fff7f7;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.filter-modal-summary ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

.filter-modal-summary li {
  margin: 2px 0;
}

.filter-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.filter-modal-btn {
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #6d2932;
  background: #fff7f7;
  color: #6d2932;
}

.filter-modal-btn.primary {
  background: #6d2932;
  color: #fff7f7;
}

.filter-modal-btn.primary:hover {
  background: #541e29;
}

.filter-modal-btn:not(.primary):hover {
  background: #feecec;
}

.filter-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 700;
  color: #6d2932;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
}

.filter-modal-close:hover {
  background: #feecec;
}


/****** FOR SEE ALL ON THE SIDEBAR OF THE SEARCH PAGE ******/

/* See All Modal Background */
#seeAllModal {
    display: none;
    justify-content: center;
    align-items: flex-start; /* Align at the top instead of exact center */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    overflow: auto; /* Allow modal to scroll if needed */
    padding-top: 100px; /* 👈 pushes modal down below navbar */
}

/* See All Modal Content Box */
#seeAllModal .modal-content {
    background-color: #fff;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
    position: relative;
    margin: 0 auto; /* Center horizontally */
}

/* Modal Header Title */
#seeAllModal #modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
}

/* Close Button */
#seeAllModal .close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}
#seeAllModal .close-btn:hover {
    color: #000;
}

/* Modal Body */
#seeAllModal .modal-body {
    margin-top: 4px;
}

/* Menu Items */
#seeAllModal .modal-body a.menu-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    margin-bottom: 4px;
    transition: background 0.2s ease;
}
#seeAllModal .modal-body a.menu-item:hover {
    background: #f5f5f5;
}

/* Optional: Responsive Fix for Small Screens */
@media (max-width: 768px) {
    #seeAllModal {
        padding-top: 80px;
    }
    #seeAllModal .modal-content {
        width: 90%;
        max-width: none;
        border-radius: 6px;
    }
}

/* Year button */
.year-button:hover,
.year-button.is-click-hover {
  background-color: #6d2932 !important;
  color: #fff7f7 !important;
  border-color: #6d2932 !important;
}


/* Year inputs */
.year-input input:hover,
.year-input input.is-click-hover {
  border: 3px solid #be0b23 !important;
  box-shadow: 0 0 0 2px rgba(190, 11, 35, 0.12) !important;
}



/* Make Apply Year Filter show the hand cursor */
.year-button,
.year-button:hover,
.year-button:active {
  cursor: pointer !important;
}

/* Hand cursor for Min/Max year inputs */
#min-year,
#max-year,
#min-year:hover,
#max-year:hover,
#min-year:focus,
#max-year:focus {
  cursor: pointer !important;
}

/* Hand cursor for the Refine Search Results dropdown (sidebar select) */
.sidebar form select,
.sidebar form select:hover,
.sidebar form select:focus {
  cursor: pointer !important;
}

/* (Optional) If you also want the header field dropdown to show a hand */
header .dropdown,
header .dropdown:hover,
header .dropdown:focus {
  cursor: pointer !important;
}


#year-dd-root { position: fixed; z-index: 3000; inset: 0 auto auto 0; pointer-events: none; }
#year-dd-root .year-dropdown {
  pointer-events: auto;
  background: #fff;
  border: 2px solid #6d2932;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  overflow: hidden;
}
.year-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* text left, X right */
  gap: 12px;
  padding: 6px 10px;
  font-size: 12px;
  color: #6d2932;
  background: #fff7f7;
  border-bottom: 1px solid #e9d9dc;
}
.year-dd-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #6d2932;
  padding: 2px 6px;
  border-radius: 6px;
}
.year-dd-close:hover { background: #feecec; }
.year-dropdown-list { max-height: 260px; overflow-y: auto; }
.year-dd-item {
  display: block; width: 100%; padding: 8px 10px;
  background: #fff; border: 0; text-align: left; cursor: pointer; font-size: 14px;
}
.year-dd-item:hover { background: #feecec; }
.year-dd-item.is-current { font-weight: 700; background: #f8eef0; }


.tutorial-toggle {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #6d2932;
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.tutorial-toggle:hover { color: #a33b45; }

.tutorial-card {
  margin-top: 8px;
  background: #fff;
  border: 2px solid #6d2932;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 10px 10px 12px;
}

.tutorial-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; color: #3e151a; margin-bottom: 8px;
}
.tutorial-close {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 18px; color: #6d2932; border-radius: 6px; padding: 0 6px;
}
.tutorial-close:hover { background: #feecec; }

.tutorial-steps { margin: 0 0 8px 18px; padding: 0; color: #000; }
.tutorial-steps li { margin: 6px 0; line-height: 1.35; }

.tutorial-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tutorial-remember { font-size: 13px; color: #3e151a; }
.tutorial-ok {
  background: #6d2932; color: #fff7f7; border: none; border-radius: 8px;
  padding: 6px 10px; font-weight: 700; cursor: pointer;
}
.tutorial-ok:hover { background: #541e29; }


/* --- Guided tour overlay & tooltip --- */
#liraya-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.05);
  z-index: 4000;
  pointer-events: auto;
}

.liraya-tour-highlight {
  position: relative;
  z-index: 4002 !important;
  outline: 3px solid #be0b23;          /* red spotlight frame */
  box-shadow: 0 0 0 6px rgba(190,11,35,0.18);
  border-radius: 10px;
}

#liraya-tour-tooltip{
  position:fixed; z-index:9999; background:#fff; border:1px solid #ccc;
  border-radius:10px; padding:12px 14px; box-shadow:0 8px 28px rgba(0,0,0,.18);
  max-width:360px;
}

#liraya-tour-ring{
  position:fixed; z-index:9998; pointer-events:none;
  border-radius:10px;
  outline:3px solid rgba(164,12,12,.85);
  box-shadow:0 0 0 4px rgba(80,2,2,.3), 0 8px 24px rgba(0,0,0,.18);
}

.liraya-tour-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.liraya-tour-body {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.liraya-tour-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}

.liraya-tour-actions .left {
  display: flex; align-items: center; gap: 8px;
}

.liraya-tour-btn {
  background: #6d2932; color: #fff7f7;
  border: none; border-radius: 8px;
  padding: 6px 10px; font-weight: 700;
  cursor: pointer;
}
.liraya-tour-btn[disabled] { opacity: .5; cursor: default; }

.liraya-tour-secondary {
  background: #fff; color: #6d2932;
  border: 2px solid #6d2932;
}

.liraya-tour-close {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-size: 20px; color: #6d2932; padding: 0 6px; border-radius: 8px;
  position: absolute; top: 6px; right: 6px;
}
.liraya-tour-close:hover { background: #feecec; }


.pagination { visibility: hidden; }


/* Brand spinner vars */
:root{
  --spinner-size: 80px;          /* tweak for bigger/smaller */
  --spinner-thickness: 10px;      /* ring thickness */
  --spinner-color: #3e151a;       /* brand color */
  --spinner-track: rgba(255,215,215,0.4);
}

/* Keep overlay dark and header visible (you already have these; included for clarity) */
#liraya-loading {
  position: fixed;
  top: var(--header-height, 85px);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.1);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9990; /* header is higher via isolation: isolate + higher z-index */
}

#liraya-loading .box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  background: transparent; /* no white box */
  color:#fff;               /* not used now but fine to keep */
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .liraya-spinner{ animation: none; }
}

/* Rotate animation */
@keyframes liraya-rotate{
  to { transform: rotate(360deg); }
}


/* =========================
   Back button (above border-container)
   ========================= */
.main-content .top-back{
  /* Align with the left column: 
     main-content padding-left (20) + border-container padding-left (5) + content-left margin-left (30) = 55 */
  margin: 10px 0 12px 25px;
  align-self: flex-start;                 /* override main-content's align-items:center */
  transition: margin-left 0.3s ease-in-out;
  display: flex;
  align-items: center;
}

/* Make it a clean text+icon link (no border/bg) */
.main-content .top-back .back-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #6d2932;
  font-weight: 700;
  font-size: 18px;
  background: transparent;   /* no background */
  border: 0;                 /* no border */
  padding: 0;                /* no padding box */
}

.main-content .top-back .back-link:hover{ color:#be0b23; }

.main-content .top-back .back-icon{
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}

/* =========================
   ABOUT US at the bottom of sidebar
   ========================= */
.sidebar{
  display:flex !important;
  flex-direction:column !important;
  padding-bottom: 32px !important;   /* extra bottom spacing for whole sidebar */
}

.sidebar a.about-us{
  margin-top:auto !important;        /* push to bottom */
  margin-bottom: 8px !important;     /* lift a bit so it’s not hugging the edge */
  display:block;
  text-align:center;
  color:#6d2932;
  font-size:20px;
  text-decoration: underline;
  text-transform: none !important;
  cursor:pointer;
  padding: 12px 0 28px !important;   /* more bottom padding as requested */
}
.sidebar a.about-us:hover{ color:#db2525; }



                                               /*HOMEPAGE RESPONSIVE ON MOBILE*/
.search-box {
  flex: 1;
  max-width: 520px;
  padding: 12px;
  font-size: 18px;
  border-radius: 25px;
  border: 3px solid #3e151a;
  background-color: #fff7f7;
  transition: border-color 0.15s ease;
}

.search-box {
  flex: 1; /* grows to take remaining space */
  min-width: 0;
}

.dropdown, .search-button {
  width: 180px; /* fixed size */
}

/* Mobile layout */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    width: 100%;
  }

  .search-box,
  .dropdown {
    width: 80%;
    max-width: none;
  }

  .search-button {
    width: 45px;
    height: 45px;
  }
}

/* Keep the icon centered and prevent overflow (scoped to homepage) */
.liraya-main-content .search-button img {
  width: 100%;
  height: 100%;
  border: 3px solid #3e151a;
  border-radius: 25px;
  transition: border-color 0.15s ease;
}
.liraya-main-content .search-button img:hover { border-color: #be0b23; }

/* Mobile layout — exact structure requested:
   [ Search Here... ]
   [ All Fields ][ 🔍 ]                                  */
@media (max-width: 576px) {
  .liraya-main-content .search-form {
    display: flex;
    flex-direction: column;   /* stack rows */
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  /* Full but with a comfy 16px gutter on each side */
  .liraya-main-content .search-box {
    width: min(640px, calc(100% - 32px));
    margin: 0 auto;           /* keep it centered */
  }

  

  

  .liraya-main-content .actions-row .dropdown {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;           /* override any previous margin-left */
  }

  .liraya-main-content .actions-row .search-button {
    width: 48px;
    height: 48px;
    margin: 0;
    flex: 0 0 auto;
  }
}

/* --- Desktop / default: single line ------------------------------------ */
.liraya-main-content .search-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;           /* space between input and actions */
  flex-wrap: nowrap;   /* keep in one line on big screens */
}

/* keep input a reasonable size on desktop */
.liraya-main-content .search-box {
  width: clamp(340px, 40vw, 520px);
}

/* dropdown + button sit on the same row */
.liraya-main-content .actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* avoid stray margins that push things down */
.liraya-main-content .actions-row .dropdown { margin-left: 0; }

/* keep the icon neatly inside the button */
.liraya-main-content .search-button {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
}
.liraya-main-content .search-button img {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid #3e151a;
  border-radius: 25px;
  transition: border-color 0.15s ease;
}

/* --- Mobile: stack as requested ---------------------------------------- */
@media (max-width: 576px) {
  .liraya-main-content .search-form {
    flex-direction: column;         /* stack rows on small screens */
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  /* Row 1: full-width search box */
  .liraya-main-content .search-box {
    width: 80%;
    max-width: 520px;
  }

  /* Row 2: dropdown + button aligned horizontally */
  .liraya-main-content .actions-row {
    width: 92%;
    max-width: 480px;
  }
  .liraya-main-content .actions-row .dropdown {
    flex: 1 1 auto;                 /* fill the row */
    min-width: 0;
  }

  .liraya-main-content .actions-row .search-button {
    width: 48px;
    height: 48px;
  }
}

/* Fix the too-large search icon on desktop header */
header .search-button img {
  width: 100%;
  height: 100%;
  border: 3px solid #3e151a;
  border-radius: 25px;
  transition: border-color 0.15s ease;
}

/* Slight hover effect (optional, consistent with your theme) */
header .search-button img:hover {
  border-color: #be0b23;
}

/* Keep it as-is on mobile */
@media (max-width: 768px) {
  header .search-button img {
    width: 100%;
    height: 100%;
  }
}

/* Header-only sizing for the magnifying-glass button (search results page, etc.) */
header .search-button {
  /* smaller on desktop, still responsive */
  width: clamp(70px, 70vw, 70px);
  height: clamp(28px, 2.2vw, 36px);
}

/* --- Header search button: tidy, responsive, NOT stretched --- */
header .search-button {
  /* square button that scales a bit with the viewport */
  width: clamp(36px, 2.8vw, 46px);
  height: clamp(36px, 2.8vw, 46px);
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
}

/* make the icon fill the button without 130% stretch */
header .search-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 3px solid #3e151a;
  border-radius: 25px;
  transition: border-color 0.15s ease;
}

header .search-button img:hover {
  border-color: #be0b23;
}

/* keep your nice small size on mobile */
@media (max-width: 768px) {
  header .search-button {
    width: 40px;
    height: 40px;
  }
}

/* --- Consistent Header Height Across Devices --- */
header {
  background-color: #3e151a;
  color: #fff7f7;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* responsive padding — smaller on desktop, same structure on mobile */
  padding: clamp(8px, 1vw, 14px) clamp(12px, 2vw, 20px);

  /* prevent tall stretching */
  min-height: 64px;
  max-height: 78px;

  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;
}

/* Make logo + sidebar button stay aligned */
header .logo-container img {
  width: clamp(42px, 4vw, 60px);
  height: auto;
}

/* Make the search container shrink properly */
header .search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Keep smaller header look on mobile */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }
}

/* --- Header: fluid sizes on desktop, tidy on mobile --- */

/* Make the search area flexible */
header .search-container{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;          /* allow wrapping when space is tight */
  padding:8px 0;
}

/* Fluid input/dropdown sizes on larger screens */
header .search-box{
  width: clamp(240px, 60vw, 520px);
  max-width: 100%;
  box-sizing: border-box;
}

header .dropdown{
  width: clamp(140px, 30vw, 210px);
  max-width: 100%;
  box-sizing: border-box;
}

/* Keep the icon square and not stretched */
header .search-button{
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
}
header .search-button img{
  display:block;
  width:100%;
  height:100%;
  object-fit: contain;
  border: 3px solid #3e151a;
  border-radius: 25px;
  transition: border-color .15s ease;
}

/* --- Mobile layout: stack input, then row with dropdown + icon --- */
@media (max-width: 576px){
  header{
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    box-sizing:border-box;
    padding:clamp(8px,1vw,14px) clamp(12px,2vw,20px);
    min-height:var(--header-h);
  }

  /* Stack the search pieces vertically */
  header .search-container{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding:0;
    gap:8px; 
    flex-wrap:nowrap;
  }

  /* Row 1: full-width search box */
  header .search-box{
    width: 100%;
  }

  /* Row 2: dropdown + button on one line */
  header .actions-row{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
  }
  header .actions-row .dropdown{
    flex: 1 1 auto;   /* fill the row */
    min-width: 0;
  }
  header .actions-row .search-button{
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
  }
}

/* Safety: kill any older 130% image rules */
.search-button img{ width:100%; height:100%; }

/* --- LIRAYA HEADER: mobile-safe, one-row, auto height --- */
header, .liraya-header{
  flex-direction: row !important;     /* keep a single row on mobile */
  align-items: center !important;
  justify-content: space-between;
  flex-wrap: nowrap;                   /* prevent wrapping */
  max-height: none !important;         /* let height grow if needed */
  min-height: 56px;                    /* sensible floor */
  box-sizing: border-box;
}

/* shrink visuals so they fit on small screens */
header .logo-container img,
.liraya-header .logo-container img{
  width: clamp(36px, 8vw, 60px);
  height: auto;
}

.liraya-header .about-us,
.liraya-header .home{
  margin: 0 12px 0 0;                 /* remove bottom margin that pushes it down */
  line-height: 1;
  white-space: nowrap;                 /* keep text on one line */
  font-size: clamp(16px, 4.2vw, 22px);
}

/* stop header from getting taller because of the embedded search area */
header .search-container{
  padding: 0 !important;
  gap: 8px;
}

/* keep the icon square and small on mobile */
header .search-button{
  width: 40px;
  height: 40px;
  padding:0; 
  flex:0 0 auto;
}
header .search-button img{ object-fit: contain; }

/* Optional: align your fixed sidebar to the actual header height */
:root{ --header-h: 56px; }            /* tune if you change min-height */
.sidebar{
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
}

/* Homepage search input — fully fluid, no fixed width */
.liraya-main-content .search-box {
  box-sizing: border-box;
  width: clamp(260px, 92vw, 520px);   /* min 260px, scales with screen, caps at 520px */
}

/* Keep the layout tidy on very small phones */
@media (max-width: 576px) {
  .liraya-main-content .search-form { 
    flex-direction: column; 
    gap: 12px; 
    width: 100%;
  }
  .liraya-main-content .actions-row { 
    width: min(480px, 92vw); 
  }
}


/* --- LIRAYA: Final Unified Search Button Spec --- */

/* Button = perfect circle */
.liraya-main-content .search-button {
    width: 50px;
    height: 50px;
    padding: 0;
    background: transparent;
    border: 3px solid #3e151a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon = fill the circle (same size as your hover state BEFORE hover) */
.liraya-main-content .search-button img {
    height: 130%;
    object-fit: contain;
    display: block;

    /* remove old styling conflicts */
    border: none !important;
    border-radius: 0 !important;
}

/* Hover = ONLY the outline changes (icon stays SAME size) */
.liraya-main-content .search-button:hover {
    border-color: #be0b23;
}

/* Permanent kill switch for all legacy rules */
.search-button img {
    border: none !important;
    border-radius: 0 !important;
}

/* --- LIRAYA: single source of truth for the homepage search icon --- */

/* Circle button container */
.liraya-main-content .search-button{
  width: 50px;
  height: 50px;
  padding: 0;
  border: 3px solid #3e151a;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;          /* prevent inline-img baseline shift */
  overflow: hidden;        /* safety: clip any overflow */
  flex-shrink: 0;
}

/* Icon fits inside the circle; no borders on the img */
.liraya-main-content .search-button > img{
  width: 72% !important;   /* sweet spot; adjust 70–76% as desired */
  height: 72% !important;
  display: block;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Hover only changes the ring color; the icon stays put */
.liraya-main-content .search-button:hover{ border-color:#be0b23; }

/* Global kill-switch to neutralize any legacy 130% rules anywhere */
.search-button img{
  width: 72% !important;
  height: 72% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ==== Footer fix: stack lines, center, responsive, no extra gap ==== */
footer{
  background-color:#3e151a;
  color:#fff7f7;
  width:100%;
  padding: clamp(8px,1vw,14px) clamp(12px,2vw,20px);
  box-sizing:border-box;

  /* page layout */
  margin-top:auto;      /* anchors footer to bottom in the flex page */
  position: static;

  /* content layout */
  display:flex;
  flex-direction: column;     /* ⬅ stack the two <p> vertically */
  align-items:center;
  justify-content:center;
  gap: 4px;                   /* small space between lines */
  text-align:center;
}

footer p{
  margin:0;                   /* remove default <p> gaps */
}

footer .footer-text{
  font-family:'Libre Baskerville', serif;
  font-size: clamp(11px,1.6vw,13px);
  line-height: 1.4;
}

/* safety: prevent stray bottom spacing above footer */
.main-content, .liraya-main-content{ margin-bottom:0; }

/* Sidebar button ↔ logo alignment (header-only, safe) */
header .logo-container { display:flex; align-items:center; gap:12px; }
header .sidebar-button {
  display:flex; align-items:center; justify-content:center;
  width: clamp(36px, 2.8vw, 46px); height: clamp(36px, 2.8vw, 46px);
  margin-left: 12px;
}
header .sidebar-button img { width:100%; height:100%; object-fit:contain; display:block; }

/* --- FIX: Header search icon ring & hover (scoped, override-safe) --- */
header .search-button{
  width: clamp(36px, 2.8vw, 46px);
  height: clamp(36px, 2.8vw, 46px);
  padding: 0;
  background: transparent;
  border: 3px solid #6d2932;     /* ← ring lives on the button */
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
header .search-button:hover{ border-color:#be0b23; }
header .search-button img{
  width: 72% !important; height: 72% !important; display:block; object-fit:contain;
  border: 0 !important; border-radius: 0 !important;   /* keep img clean */
}


/* --- FIX: Sidebar never hides under header --- */
:root{ --header-h: 78px; }  /* conservative baseline; safe with your header min/max */
.sidebar{
  top: max(78px, var(--header-h, 78px));
  height: calc(100vh - max(78px, var(--header-h, 78px)));
  z-index: 1;  /* stays below header visually, but fully visible below it */
}

/* --- FIX: Book info cards are overflow-safe --- */
.book-info{
  display:flex; gap:20px; align-items:flex-start;
  width: 85%; padding:20px; border-radius:15px; box-sizing:border-box;
  flex-wrap: wrap;                /* allow wrap on tight screens */
}
.book-details{ 
  flex: 1 1 260px; 
  min-width: 0;                   /* enables text wrapping inside flex */
  text-align: left;
}
.book-title{
  font-size: 20px; font-weight: 700; color:#000;
  margin-bottom:8px;
  overflow-wrap: anywhere;        /* break very long tokens */
  word-break: break-word;
}
.book-details p{ 
  font-size:16px; margin:4px 0; color:#000;
  overflow-wrap:anywhere; word-break:break-word;
}

/* Keep cover fixed and non-intrusive */
.book-cover{
  flex: 0 0 150px; width:150px; height:200px; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#f0f0f0;
}
.book-cover img{ width:100%; height:100%; object-fit:cover; }

/* Keyword line stays inside the card */
.keywords-container{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.keywords{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* Buttons don’t force overflow */
.view-info-btn{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Mobile stacking */
@media (max-width: 600px){
  .book-info{ width: 92%; }               /* slight inner padding on phones */
  .book-cover{ order: -1; margin: 0 auto; } /* show cover first on mobile */
}








/* Hard lock the modal to the viewport and center it consistently */
#mobile-gate { position: fixed; inset: 0; z-index: 4000; }
#mobile-gate .mg-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
#mobile-gate .mg-box{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);   /* center on any screen */
  width:min(92vw, 520px);
  background:#fff; border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  padding:22px 18px; text-align:center;
  border:2px solid #6d2932;
  max-height: 80vh; overflow:auto;    /* resilient on small devices */
}
#mobile-gate .mg-title{ font-weight:800; font-size:18px; color:#3e151a; margin-bottom:14px; }
#mobile-gate .mg-btn{ background:#6d2932; color:#fff7f7; border:0; border-radius:10px; padding:10px 18px; font-weight:700; cursor:pointer; }
#mobile-gate .mg-btn:hover{ background:#541e29; }


/* --- Sidebar mobile hardening: keep About Us visible --- */
@media (max-width: 768px) {
  /* Ensure the sidebar is a proper overlay with its own scroll */
  .sidebar {
    position: fixed;                  /* not static on mobile */
    left: -100vw;                     /* hidden by default */
    top: var(--header-h, 56px);       /* align under header */
    height: calc(100vh - var(--header-h, 56px));
    width: 86vw;                      /* comfortable sheet width */
    z-index: 3000;                    /* above page chrome */
    overflow-y: auto;                 /* internal scroll */
    background-color: #d7d1d3;        /* keep brand tone */
    transition: left .3s ease-in-out; /* smooth slide-in */
  }
  .sidebar.open { left: 0; }

  /* Make About Us persist at the bottom while scrolling */
  .sidebar a.about-us {
    position: sticky;    /* anchors within sidebar scrollport */
    bottom: 0;           /* stick to bottom edge */
    display: block;
    background: #fff7f7; /* subtle surface to differentiate */
    border-top: 1px solid #e9d9dc;
    padding: 12px 0 16px !important;
    margin-top: 8px !important;
    z-index: 1;          /* sit above list content */
  }

  /* Give a little breathing room so it never overlaps content */
  .sidebar::after {
    content: "";
    display: block;
    height: 16px;
  }
}

/* --- user_search: Safari zoom/viewport-safe sidebar --- */
.page-search .sidebar{
  position: fixed;
  top: var(--header-h, 64px);   /* header height token you already use */
  bottom: 0;                    /* pin to bottom instead of calc() */
  height: auto;                 /* let top/bottom drive the height */
  overflow-y: auto;
}

/* iOS/Safari viewport unit quirks (address bar, zoom) */
@supports (-webkit-touch-callout: none) {
  .page-search .sidebar{
    min-height: calc(100dvh - var(--header-h, 64px));  /* dvh tracks dynamic viewport */
  }
}




/* ===== LIRAYA: Tabs above left column (scoped, no header impact) ===== */
.about-us-container .liraya-left-container .about-tabs{
  display: inline-flex;
  align-items: stretch;
  background: #fff7f7;                  /* matches site bg */
  border: 2px solid #6d2932;            /* brand border */
  border-radius: 12px;
  overflow: hidden;                      /* connects buttons: | A | B | */
  margin: 0 0 12px 0;                    /* sits above left content */
}

.about-us-container .liraya-left-container .about-tabs .tab-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: #3e151a;
  padding: .55rem 1rem;
  font: 700 0.95rem/1 'Arial', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.about-us-container .liraya-left-container .about-tabs .tab-btn + .tab-btn{
  border-left: 2px solid #6d2932;       /* vertical divider | */
}

.about-us-container .liraya-left-container .about-tabs .tab-btn:hover{
  background: #feecec;                   /* subtle hover in-brand */
}

/* Active segment */
.about-us-container .liraya-left-container .about-tabs .tab-btn.active{
  background: #3e151a;                   /* brand primary */
  color: #fff7f7;
}

/* Panels: JS toggles [hidden]; keep default visible behavior clean */
.about-us-container .liraya-left-content .tab-panel[hidden]{ display: none !important; }