/* === BEGIN: Koha Coverflow Stylesheet === */

#new-books-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* ป้องกันตัวขยายสเกลของการ์ดเล่มกลางถูกตัดขอบบนล่าง */
#new-books-container .flipster__container {
    padding: 40px 0 !important; /* เพิ่ม padding บนล่างเพื่อให้มีพื้นที่เล่มกลางขยายตัว */
}

/* 1. จัดโครงสร้างแต่ละแผ่นสไลด์ให้เป็นรูปแบบ "การ์ด" (Card Layout) */
#new-books-container .flipster__item {
    width: 180px !important;
    margin: 0 8px !important; /* ระยะห่างระหว่างแผ่นสไลด์ */
    vertical-align: middle !important; /* อิงแนวตั้งกึ่งกลาง เพื่อป้องกันการ์ดเล่มกลางขยายตัวแล้วตกขอบล่าง */
    transition: var(--transition-smooth) !important;
}

#new-books-container .flipster__item__content a {
    text-decoration: none;
    color: inherit;
}

/* ซ่อนแท็ก br ที่ติดมาจากโค้ดปลั๊กอินเดิม เพื่อไม่ให้เกิดช่องว่างเปล่าดันทับหน้าปกกับชื่อเรื่อง */
#new-books-container br {
    display: none !important;
}

/* โครงสร้างเนื้อหาตัวการ์ด (กรณีการ์ดที่ยังไม่ถูกเลือก / เล่มข้างๆ) */
#new-books-container .flipster__item__content {
    background: #f6f5f1 !important; /* การ์ดสีเทา/เบจอ่อนสำหรับเล่มรอบข้าง */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    display: flex;
    flex-direction: column;
    text-align: center !important; /* จัดกึ่งกลางข้อความจากระดับการ์ดหลัก */
    width: 180px !important;
    height: 280px !important; /* ปรับการ์ดให้กระชับลงที่ 295px (รูปภาพ 230px + พื้นที่เขียนชื่อเรื่อง 65px) */
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transform: translateZ(0) !important; /* บังคับให้บราว์เซอร์เปิดการประมวลผล 3D เร่งฮาร์ดแวร์ ป้องกันรูปภาพทะลุขอบมุมโค้งมน (Webkit rounded-corner bug) */
    -webkit-transform: translateZ(0) !important;
}

/* 2. บังคับรูปหน้าปกหนังสือให้อยู่ด้านบนของการ์ด และมีขอบโค้งมนเฉพาะมุมด้านบน */
#new-books-container img {
    width: 100% !important;
    height: 230px !important; /* ลดลง 10px เพื่อเว้นพื้นที่ให้ชื่อเรื่องภาษาไทย 2 บรรทัดแบบไม่โดนตัดยอด */
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none !important; /* ลบเงาที่ตัวรูปภาพ เพราะเราใช้เงาของตัวการ์ดแทน */
}

/* 3. ปรับระดับการแสดงผลของตัวอักษรชื่อเรื่อง (Title Box) ด้านล่างของการ์ดให้อยู่กึ่งกลาง ไม่ชิดขอบ */
#new-books-container .itemTitle {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* บังคับให้แสดงสูงสุดแค่ 2 บรรทัด */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* ถ้าชื่อเรื่องยาวกว่า 2 บรรทัด จะถูกตัดทิ้งแล้วเติม ... */
    text-align: center !important; /* จัดตัวอักษรกึ่งกลางแนวนอน */
    font-family: var(--font-th);
    font-size: 12.5px; /* ขนาดฟอนต์ที่พอดีและสวยงาม */
    color: #484848;
    line-height: 1.35;
    font-weight: 500;
    white-space: normal !important;
    background: transparent;
    padding: 0 !important;
    width: calc(100% - 24px) !important; /* จำกัดความกว้างไม่ให้ชิดขอบข้างละ 12px */
    margin: 8px auto 0 auto !important; /* เว้นระยะห่างด้านบนจากรูปปก 8px และจัดกึ่งกลางซ้าย-ขวา */
    transition: var(--transition-smooth);
}

/* 4. สไตล์การ์ดที่เป็นเล่มปัจจุบัน (เล่มตรงกลางที่ถูกเลือก - Active Card) */
#new-books-container .flipster__item--current {
    z-index: 100 !important; /* ดึงให้อยู่เหนือกองการ์ดเล่มข้างๆ */
    opacity: 1 !important;
}

#new-books-container .flipster__item--current .flipster__item__content {
    background: #ffffff !important; /* สีขาวบริสุทธิ์นูนเด่น */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.16) !important; /* เงาด้านล่างของการ์ดกลาง */
    transform: scale(1.18) translateZ(0) !important; /* ขยายขนาดการ์ดขึ้น 18% และบังคับแก้การตัดขอบรูปภาพ */
    opacity: 1 !important;
}

/* 5. สไตล์การ์ดด้านข้าง (Past / Future Card) */
#new-books-container .flipster__item--past,
#new-books-container .flipster__item--future {
    opacity: 0.98 !important; /* เพิ่มความชัดเจนของเล่มรอบข้างเป็น 98% เพื่อความสว่างและอ่านง่ายที่สุด */
}

#new-books-container .flipster__item--past .flipster__item__content,
#new-books-container .flipster__item--future .flipster__item__content {
    transform: scale(0.88) translateZ(0) !important; /* ย่อขนาดลง 12% และบังคับแก้การตัดขอบรูปภาพ */
    opacity: 1 !important;
}

/* ปุ่มเลื่อนสไลด์ Next/Prev */
#new-books-container .flipster__button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: var(--transition-smooth) !important;
    z-index: 200 !important;
}

#new-books-container .flipster__button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--color-primary) !important;
    stroke-width: 3.5 !important;
}

#new-books-container .flipster__button:hover {
    background: var(--color-primary) !important;
    box-shadow: 0 6px 20px rgba(104, 138, 41, 0.45) !important;
}

#new-books-container .flipster__button:hover svg {
    stroke: #fff !important;
}

#new-books-container .flipster__button--prev {
    left: 5px !important;
}

#new-books-container .flipster__button--next {
    right: 5px !important;
}

/* สไตล์สถานะโหลด ไอคอน และแสดงข้อผิดพลาดของ Coverflow */
#new-books-container .coverflow-loading,
#new-books-container .coverflow-error {
    text-align: center;
    width: 100%;
    color: var(--color-text-muted);
    padding: 40px 0;
    font-family: var(--font-th), sans-serif;
}

#new-books-container .coverflow-loading i {
    margin-right: 8px;
    font-size: 24px;
    color: var(--color-primary);
}

/* ==========================================================================
   Responsive Design for Coverflow (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 768px) {
    #new-books-container .flipster__item {
        width: 140px !important;
        margin: 0 4px !important;
    }

    #new-books-container .flipster__item__content {
        width: 140px !important;
        height: 235px !important; /* ปรับลดพื้นที่รวมของตัวการ์ด */
    }

    #new-books-container img {
        height: 180px !important; /* ลดความสูงรูปภาพปกบนอุปกรณ์เคลื่อนที่ */
    }

    #new-books-container .itemTitle {
        font-size: 11px !important;
        line-height: 1.35;
        height: 36px !important; /* ความสูงที่พอเหมาะสำหรับ 2 บรรทัดบนมือถือ */
        max-height: 36px !important;
        width: calc(100% - 16px) !important;
        margin: 6px auto 0 auto !important; /* ลดสเปซให้กระชับขึ้นตามการ์ด */
    }

    #new-books-container .flipster__button {
        width: 32px !important;
        height: 32px !important;
    }

    #new-books-container .flipster__button svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* === END: Koha Coverflow Stylesheet === */