/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
.webContent{padding-bottom:30px}
/* Book Grid Layout */
.book-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns */
    gap:30px; /* Space between books */
    justify-content: center;
}

/* Book Card - Flexbox to Auto-Adjust Height */
.book-card {
    text-align: center;
    transition: transform 0.3s;
	position:relative;
    display: flex;
  flex-direction: column;
}
.book-card:hover {
    /*transform: scale(1.05);*/
}

/* Book Image Wrapper */
.book-image {
    width: 100%;
    height:320px;
    position: relative;
}

/* Book Flip Effect */
.book-front, .book-back {
    transition: transform 0.6s ease-in-out; /* Smooth transition */
    transform-style: preserve-3d;
	width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    backface-visibility: hidden;
    box-shadow:5px 10px 18px #888;
}
.book-back {
    opacity:0;
}
.book-image:hover .book-back,.book-image.flipped .book-back{
    opacity:1;
}

/* Book Info */
.book-info {
    width: 100%;
    padding: 15px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.book-info h3 {
    font-size:20px;
	font-weight:bold;
    margin:5px 0;
}
.book-info p {
    font-size:18px;
    color: #666;
    margin:5px 0;
}
#category-filter,#order-filter {display:flex;gap:15px;align-items:center}
#order-filter{gap:0px;margin-right:auto}
.book-library span,.book-library p {
  font-size: 18px;
  line-height: 23px;margin-block-end:0px;
}
.book-card .category-label {
    color: #000;
    padding:5px 10px;
    font-size: 18px;
    position: absolute;
    top:0px;
    right: 0px;
}
.book-card[data-category="4"] .category-label,#category-filter span[data-id="4"] {
  background: #96F8E9;
}
.book-card[data-category="3"] .category-label,#category-filter span[data-id="3"]{
  background: #F896DA;
}
#category-filter span,#order-filter span{padding:5px 10px;cursor:pointer}
.book-library .filters{display:flex;gap:30px;padding-bottom:30px}
#order-filter span, #order-filter p {margin-right:auto}
/* Book Button */
.book-btn,#book-now-btn,#book-request-form button{
    width:100%;
    padding: 10px;
    color: #000;
	background-color:#FFEB00;
    border: none;
    cursor: pointer;
    font-size:18px;
	line-height:23px;
	font-weight:600;
    transition: 0.3s;
}
#book_now_btn{width:auto}.book-btn.disabled{background:grey}
.book-btn:hover,.book-btn:focus{background:#000}
.inline-buttons {
  display: flex;
  gap: 15px;
  width: 100%;
  align-items: center;margin-top:auto
}
.view-details-btn {max-width:29px}
#book_request_form {
  display:flex;
  flex-flow:column;
  gap:10px;
}
.searchbox {display:none}
body.page-id-2 .searchbox {
  display: flex;
  gap: 0px;
}
.searchbox .ekit-wid-con {
  background: #FFEB03;
  font-size:34px;
  padding: 0px 10px;
  border-radius: 10px;cursor:pointer;margin-right:auto
}
.searchbox #search-box {
  display: none;border-left: none;border-radius: 0px 10px 10px 0px;border-color: #FFEB03;
}
.searchbox2 #search-box2{display:none}
#order-filter span.active,#category-filter span:hover{background:#FFEB03}#category-filter span.active{text-decoration:underline}
#book_request_form button{width:auto;border-radius: 10px;margin: auto;padding: 10px 40px;}
#book_request_form .form-row{display:flex;gap:10px;width:100%}
#book_request_form .form-group{text-align:right;width:100%}
/* Popup Styling */
.popup-content {
    text-align: left;
}
/* Popup Overlay */
.popup-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */
    z-index: 999; /* Ensure it's behind the popup but above other content */
}

.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width:600px;
    max-width: 90%;
    border-radius: 10px;
}
.popup-content {
    text-align: center;
}
.popup-content img {
    width: calc(50% - 30px);
    height: auto;
    margin: 10px;
}
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    color: #333;
}
.book-title, .book-category,.book-author,.view-details-btn{cursor:pointer}
/* Responsive - Adjusts to 2 columns on tablets and 1 column on mobile */
@media (max-width: 1024px) {
    .book-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 books per row */
    }
}

@media (max-width: 768px) {
    .book-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 book per row */
    }.book-image{height:400px}.book-library .filters{flex-direction:column;padding-top:30px}#order-filter{margin-left:auto;margin-right:unset}
}
@media (min-width: 768px) {
    .elementor-social-icon-icon-search{display:none !important}
}

/* SEFER BOOK UI 2026 START */

/* Compact pill-style borrow button */
.book-card .book-btn:not(.disabled) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;

    padding: 6px 14px !important;
    margin-inline: auto !important;

    border-radius: 999px !important;

    align-items: center !important;
    justify-content: center !important;

    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Magnifying-glass cursor on book images inside the modal */
#booking_popup #popup-images .zoom-img,
#booking_popup #popup-images img.zoomable {
    cursor: zoom-in !important;
}

/* SEFER BOOK UI 2026 END */