/* ==========================================
   📅 BOOKING PAGE: FLIPPING GUIDE BOOK
============================================= */

.booking-page-section { min-height: 100vh; padding: 4rem 5%; display: flex; flex-direction: column; align-items: center; }

.guide-book-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin-top: 2rem;
    margin-bottom: 4rem;
    perspective: 2000px;
}

/* The Bookmarks (Legible and spaced per screenshot) */
.bookmarks-container {
    position: absolute;
    right: -30px; /* Sticks out past the book edge */
    top: 15%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Distinct separation between tabs */
    z-index: 1; /* Sits behind the front cover */
}

.bookmark-btn {
    background: #efebe1; /* Light, readable beige paper color */
    color: #1a2c33;
    padding: 15px 20px 15px 10px;
    border: 1px solid #d3cec4;
    border-left: none;
    border-radius: 0 10px 10px 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    text-align: right;
    width: 120px; /* Uniform width */
}

.bookmark-btn:hover { background: #fff; transform: translateX(5px); }
.bookmark-btn.active { background: #87572d; color: #fff; border-color: #87572d; transform: translateX(10px); z-index: 5;}

/* The 3D Book Layout */
.guide-book { position: relative; width: 80vw; max-width: 800px; height: 65vh; max-height: 600px; transform-style: preserve-3d; z-index: 10; }
.guide-page { position: absolute; width: 50%; height: 100%; right: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), z-index 0s; will-change: transform;}
.page-content { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; padding: 2.5rem; box-shadow: inset 0 0 20px rgba(0,0,0,0.02), 0 5px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; justify-content: center; border: 1px solid #eaeaea; overflow-y: auto;}

/* Custom Scrollbar for inner pages */
.page-content::-webkit-scrollbar { width: 5px; }
.page-content::-webkit-scrollbar-thumb { background: #87572d; border-radius: 5px; }

.front { transform: rotateY(0deg); }
.back { transform: rotateY(180deg); }

.guide-cover { text-align: center; justify-content: center; border-radius: 0 5px 5px 0;}
.guide-text { margin-bottom: 1.5rem; color: #555; line-height: 1.6; font-size: 0.95rem;}
.guide-list { margin-left: 1.5rem; color: #555; line-height: 1.8; margin-bottom: 2rem; font-family: 'Helvetica Neue', sans-serif; }

.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.media-placeholder { background: #e3e3e3; border: 1px dashed #aaa; border-radius: 4px; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; color: #888; font-size: 0.8rem; overflow: hidden; }
.media-placeholder.video-large { aspect-ratio: 16 / 9; width: 100%; }

/* The Final Booking CTA at the bottom */
.final-booking-cta { border-top: 1px solid #ccc; padding-top: 4rem; width: 100%; max-width: 800px; text-align: center;}
.contact-info { margin: 2rem 0 3rem 0; color: #555; line-height: 1.8; }

/* Image Logo Holders for Social Media */
.social-logo-holder {
    width: 25px;
    height: 25px;
    background-color: #eee;
    border: 1px dashed #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px; /* Slight rounding */
    overflow: hidden;
}
.social-logo-holder img { width: 100%; height: 100%; object-fit: cover; }

/* --- Tutorial Video Styling --- */
.tutorial-video-wrapper {
    width: 100%;
    max-width: 800px; /* Keeps the video from getting too massive on desktop */
    margin: 0 auto 2rem auto; /* Centers the video and adds bottom spacing */
    border-radius: 8px;
    overflow: hidden; /* Ensures the video corners respect the border-radius */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Soft vintage shadow */
    border: 1px solid #eae2d2; /* Istorya theme border */
    background: #000; /* Shows black padding if the video is still loading */
}

.tutorial-video {
    width: 100%;
    height: auto;
    display: block; /* Removes weird bottom spacing issues on media elements */
    object-fit: cover; /* Prevents the video from squishing */
}

/* Mobile Book Adaptations */
@media (max-width: 850px) {
    .guide-book { width: 95vw; height: 65vh; }
    .page-content { padding: 1.5rem; }
    .bookmarks-container { top: -45px; right: 5%; flex-direction: row; gap: 5px; z-index: 20; }
    .bookmark-btn { padding: 10px; font-size: 0.7rem; border-radius: 10px 10px 0 0; width: auto; transform: translateY(0); }
    .bookmark-btn:hover { transform: translateY(-5px); }
    .bookmark-btn.active { transform: translateY(-10px); }
    .media-grid { grid-template-columns: 1fr; }
}