/* Flipbooks that look like real books lying on a wooden table */
.mx-table {
    background-color: #c9a06c;
    background-image: radial-gradient(ellipse at 50% 45%, rgba(255,240,215,.18) 0%, rgba(0,0,0,0) 55%, rgba(40,20,5,.38) 100%), url("../img/flipbook-table.webp");
    background-size: cover, cover;
    background-position: center, center;
}
@media (max-width: 900px) {
    .mx-table { background-image: radial-gradient(ellipse at 50% 45%, rgba(255,240,215,.15) 0%, rgba(0,0,0,0) 55%, rgba(40,20,5,.38) 100%), url("../img/flipbook-table-sm.webp"); }
}

/* Book body: page edges (paper thickness) and a soft shadow on the table.
   Drawn on each visible page, so a closed book (cover only) looks right too. */
.mx-book .--left, .cp-flip__book .--left {
    box-shadow: -1px 0 0 #fdfbf6, -2px 1px 0 #d9d1c2, -3px 1px 0 #fbf8f1, -4px 2px 0 #d4ccbc, -5px 2px 0 #f8f4ec, -6px 3px 0 #cfc6b5,
                -14px 26px 34px -10px rgba(40,22,5,.55), 0 8px 16px rgba(40,22,5,.22);
}
.mx-book .--right, .cp-flip__book .--right {
    box-shadow: 1px 0 0 #fdfbf6, 2px 1px 0 #d9d1c2, 3px 1px 0 #fbf8f1, 4px 2px 0 #d4ccbc, 5px 2px 0 #f8f4ec, 6px 3px 0 #cfc6b5,
                14px 26px 34px -10px rgba(40,22,5,.55), 0 8px 16px rgba(40,22,5,.22);
}

/* Paper and the fold in the middle */
.fb-page::after, .cp-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mx-book .--left::after, .cp-flip__book .--left::after {
    background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,.08) 88%, rgba(0,0,0,.26) 100%);
}
.mx-book .--right::after, .cp-flip__book .--right::after {
    background: linear-gradient(270deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,.08) 88%, rgba(0,0,0,.26) 100%);
}
/* One page at a time on phones: only a light binding shadow on the left */
.mx-book .stf__parent.--portrait .--right::after, .mx-book.is-portrait .--right::after {
    background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,0) 8%);
}


/* Featured flipbook block on the website */
.mx-ffb { position: relative; border-radius: 32px; padding: 40px 20px 22px; margin-top: 10px; overflow: hidden; }
.mx-ffb__book { margin: 0 auto; width: 100%; }
.mx-ffb__bar { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 26px; }
.mx-ffb__btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(26,25,46,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; text-decoration: none; transition: .2s; }
.mx-ffb__btn:hover { background: #1A192E; color: #fff; }
.mx-ffb__btn--main { background: linear-gradient(90deg, #7B1FE4, #A121CA); }
.mx-ffb__count { min-width: 84px; text-align: center; color: #fff; font-weight: 700; font-size: 14px; background: rgba(26,25,46,.62); border-radius: 30px; padding: 12px; }
.mx-ffb__curl { position: absolute; z-index: 60; border: 0; padding: 0; background: none; cursor: pointer; }
.mx-ffb__curl[hidden] { display: none; }
/* Lifting page corners (dog-ears). Right corner = next page, left corner = previous page */
.mx-ffb__curl span, .fb-curl span {
    position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; transform-origin: 100% 100%;
    background: linear-gradient(to top left, #d9d1c1 0%, #ece6da 46%, rgba(0,0,0,.28) 49.5%, #ffffff 51%, #f4efe6 70%, #dcd4c4 100%);
    border-top-left-radius: 14px; filter: drop-shadow(-4px -4px 6px rgba(40,22,5,.35)); animation: mxCurl 3.2s ease-in-out infinite;
}
.mx-ffb__curl--l span, .fb-curl--l span {
    transform-origin: 0 100%; left: 0; right: auto;
    background: linear-gradient(to top right, #d9d1c1 0%, #ece6da 46%, rgba(0,0,0,.28) 49.5%, #ffffff 51%, #f4efe6 70%, #dcd4c4 100%);
    border-top-left-radius: 0; border-top-right-radius: 14px; filter: drop-shadow(4px -4px 6px rgba(40,22,5,.35));
    animation-delay: 1.6s;
}
.mx-ffb__curl:hover span, .fb-curl:hover span { animation-play-state: paused; transform: scale(1.08); }
@keyframes mxCurl { 0%, 100% { transform: scale(.2); } 30%, 55% { transform: scale(1); } }
.mx-ffb .fb-page { background: #fff; overflow: hidden; }
.mx-ffb .fb-page img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
@media (max-width: 767px) { .mx-ffb { border-radius: 22px; padding: 26px 10px 18px; } }

/* Left corner = mirror image of the right corner, so it always grows and shrinks into the bottom left corner (Safari safe) */
.mx-ffb__curl--l, .fb-curl--l { transform: scaleX(-1); }
.mx-ffb__curl--l span, .fb-curl--l span {
    left: auto; right: 0; transform-origin: 100% 100%;
    background: linear-gradient(to top left, #d9d1c1 0%, #ece6da 46%, rgba(0,0,0,.28) 49.5%, #ffffff 51%, #f4efe6 70%, #dcd4c4 100%);
    border-top-right-radius: 0; border-top-left-radius: 14px; filter: drop-shadow(-4px -4px 6px rgba(40,22,5,.35));
}

/* Desktop: no corner curls (arrows and drag are enough) */
@media (min-width: 801px) { .mx-ffb__curl, .fb-curl { display: none !important; } }