.book-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 90%;
    margin: 0 auto;
    overflow: hidden; /* Prevents horizontal scrollbar if items are too wide during transition */
}

.carousel-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%; /* Ensure viewport takes available width */
    position: relative; /* For potential absolute positioning of items if needed */
    min-height: 400px; /* Increased to accommodate larger active book */
}

.carousel-item-container {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    display: flex; /* For centering image if needed */
    justify-content: center;
    align-items: center;
    position: relative; /* For pseudo-element and image positioning */
    overflow: hidden; /* To clip the scaled pseudo-element */
    border-radius: 8px; /* Moved from img to container */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Moved from img to container */
}

.carousel-item-container::before { /* Blurred background */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--book-bg-image);
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    transform: scale(1.2); /* Scale up to ensure blurred edges fill container */
    z-index: 0; /* Behind the actual image */
}

.carousel-item-container .carousel-img {
    display: block;
    width: 100%;   /* Fill container width */
    height: 100%;  /* Fill container height */
    object-fit: contain; /* Fit image within square, maintain aspect ratio */
    position: relative; /* To sit on top of ::before */
    z-index: 1; /* Above the pseudo-element */
}

.carousel-item-container.active-book {
    width: 500px;  /* Increased square dimension */
    height: 500px; /* Increased square dimension */
    transform: scale(1.1); /* Make active book slightly larger */
    opacity: 1;
    z-index: 2; /* Ensure active book is on top */
    margin: 0 10px; /* Adjusted margin for larger preview books */
}

.carousel-item-container.prev-book,
.carousel-item-container.next-book {
    width: 350px;  /* Increased base square dimension for prev/next */
    height: 350px; /* Increased base square dimension for prev/next */
    opacity: 0.5; /* Semi-transparent for preview */
    z-index: 1;
    cursor: pointer; /* Make preview books clickable */
    transform: scale(0.8);
}

.carousel-item-container.prev-book {
    transform: scale(0.8) translateX(50px); /* Adjusted transform for larger size */
}

.carousel-item-container.next-book {
    transform: scale(0.8) translateX(-50px); /* Adjusted transform for larger size */
}

/* Positioning for prev/next books relative to the active one */
.carousel-item-container.prev-book {
    /* Adjust margin or use absolute positioning if needed for overlap */
    margin-right: -50px;
}

.carousel-item-container.next-book {
    /* Adjust margin or use absolute positioning if needed for overlap */
    margin-left: -50px;
}


.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the book info now that buttons are hidden */
    width: 100%;
    max-width: 600px; /* Max width for controls */
}

.carousel-btn {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    line-height: 1; /* Ensure icon is centered */
    display: none; /* Hide arrow buttons */
}

.carousel-btn:hover {
    background-color: #555;
}

.book-info-display {
    text-align: center;
    padding: 0 15px; /* Space between info and buttons */
    flex-grow: 1; /* Allow info to take available space */
    min-width: 0; /* Prevent flex item from overflowing */
}

#carousel-book-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.4em;
    color: #fff;
}

#carousel-book-description {
    font-size: 1em;
    color: #f5ac8e;
    min-height: 90px; /* Reserve space for description to avoid layout shifts */
    margin-bottom: 10px;
}

#carousel-book-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff; /* White color for price */
    margin-bottom: 15px;
}

.purchase-btn {
    display: inline-block;
    background-color: #5cb85c; /* A green color for buy button */
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.purchase-btn:hover {
    background-color: #4cae4c; /* Darker green on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-viewport {
        min-height: 320px; /* Adjusted for medium screens */
    }
    .carousel-item-container.active-book {
        width: 280px;  /* Adjusted for medium screens */
        height: 280px; /* Adjusted for medium screens */
        margin: 0 8px; /* Adjusted margin */
        transform: scale(1.05);
    }
    .carousel-item-container.prev-book { /* Specific transform for prev-book */
        width: 200px; /* Adjusted for medium screens */
        height: 200px; /* Adjusted for medium screens */
        transform: scale(0.75) translateX(40px); /* Adjusted transform */
    }
    .carousel-item-container.next-book { /* Specific transform for next-book */
        width: 200px; /* Adjusted for medium screens */
        height: 200px; /* Adjusted for medium screens */
        transform: scale(0.75) translateX(-40px); /* Corrected to negative translateX */
    }
    .carousel-item-container .carousel-img {
        max-height: 260px; /* Adjusted max height */
    }

    .carousel-controls {
        flex-direction: column; /* Stack controls vertically */
        justify-content: center; /* Ensure info is centered */
    }
    .book-info-display {
        order: 1; /* Info first */
        margin-bottom: 15px;
    }
    .carousel-btn.prev-btn {
        order: 2; /* Prev button second */
        margin-right: 10px; /* Space between buttons if they become side-by-side in a row */
    }
    .carousel-btn.next-btn {
        order: 3; /* Next button third */
    }
    /* If buttons are to be side-by-side below info */
    .button-row {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .carousel-controls {
        position: relative; /* Allow buttons to be positioned if needed */
    }
    .carousel-btn {
        padding: 8px 12px;
        font-size: 18px;
    }
    /* Alternative for mobile: buttons on sides of viewport */
    /* This would require restructuring HTML or more complex CSS */
    #carousel-book-description {
        min-height: 90px; /* Adjust if needed */
        margin-bottom: 8px;
    }

    #carousel-book-price {
        font-size: 1.1em;
        margin-bottom: 12px;
    }

    .purchase-btn {
        padding: 8px 16px;
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .carousel-viewport {
        min-height: 280px; /* Adjusted for small screens */
    }
    .carousel-item-container.active-book {
        width: 220px;  /* Adjusted for small screens */
        height: 220px; /* Adjusted for small screens */
        margin: 0 5px; /* No margin, rely on transform for spacing */
        transform: scale(1); /* No extra scale on very small screens */
    }
    .carousel-item-container.prev-book { /* Specific transform for prev-book */
        width: 160px; /* Adjusted for small screens */
        height: 160px; /* Adjusted for small screens */
        transform: scale(0.7) translateX(30px); /* Adjusted transform */
    }
    .carousel-item-container.next-book { /* Specific transform for next-book */
        width: 160px; /* Adjusted for small screens */
        height: 160px; /* Adjusted for small screens */
        transform: scale(0.7) translateX(-30px); /* Corrected to negative translateX */
    }
    .active-book .carousel-img {
        max-height: 220px; /* Adjusted max height */
    }
    .carousel-item-container .carousel-img {
        max-height: 160px; /* Adjusted max height */
    }
    #carousel-book-title {
        font-size: 1.2em;
    }
    #carousel-book-description {
        font-size: 0.9em;
        min-height: 90px;
        margin-bottom: 8px;
    }
    #carousel-book-price {
        font-size: 1em;
        margin-bottom: 10px;
    }
    .purchase-btn {
        padding: 7px 14px;
        font-size: 0.9em;
    }
}