/* Flipa front-end: lightbox + bookshelf + book skeleton + brand logo removal */

/* Hide brand logo on frontend */
#flipa-credit,
.flipa-credit,
[id*="flipa-credit"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Lightbox triggers */
.flipa-lb-trigger{cursor:pointer}
button.flipa-lb-trigger{display:inline-flex;align-items:center;gap:8px;background:#2f6bff;color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:15px;line-height:1.2;cursor:pointer}
button.flipa-lb-trigger:hover{background:#2257d6}
img.flipa-lb-trigger{max-width:100%;height:auto;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .15s}
img.flipa-lb-trigger:hover{transform:translateY(-2px)}

.flipa-lb-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:2vmin}
.flipa-lb-overlay.open{display:flex}
.flipa-lb-box{position:relative;width:min(1100px,96vw);height:min(90vh,96vh);background:#222a36;border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.flipa-lb-box iframe{width:100%;height:100%;border:0;display:block}
.flipa-lb-close{position:absolute;top:8px;inset-inline-end:8px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.flipa-lb-close:hover{background:rgba(0,0,0,.85)}

/* Bookshelf */
.flipa-shelf{display:grid;gap:18px;grid-template-columns:repeat(var(--flipa-cols,3),1fr)}
@media(max-width:782px){.flipa-shelf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flipa-shelf{grid-template-columns:1fr}}
.flipa-shelf-item{cursor:pointer;text-align:center}
.flipa-shelf-cover{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18);background:#e9edf3;color:#7a8699;font-weight:700;padding:10px;box-sizing:border-box;transition:transform .15s}
.flipa-shelf-item:hover .flipa-shelf-cover{transform:translateY(-3px)}
.flipa-shelf-title{margin-top:8px;font-size:14px;font-weight:600}

/* Embed Container & Skeleton Loader */
.flipa-embed {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    min-height: 350px;
}

.flipa-skeleton-book {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
    border-radius: 12px;
}

.flipa-loaded .flipa-skeleton-book {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Book Spread Shape */
.flipa-skeleton-spread {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e8f0;
}

/* Left & Right Pages */
.flipa-skeleton-page {
    flex: 1;
    padding: 24px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f8fafc;
}

/* Spine divider & shadow */
.flipa-skeleton-spine {
    width: 4px;
    background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.18) 100%);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
}

/* Shimmer pulse elements */
.flipa-skeleton-box,
.flipa-skeleton-line {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
    background-size: 400% 100%;
    animation: flipa-shimmer 1.4s ease infinite;
    border-radius: 8px;
}

@keyframes flipa-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.flipa-skeleton-title {
    height: 20px;
    width: 55%;
    border-radius: 6px;
}

.flipa-skeleton-box {
    width: 100%;
    flex: 1;
    min-height: 120px;
    border-radius: 10px;
}

.flipa-skeleton-line {
    height: 12px;
    width: 100%;
    border-radius: 4px;
}

.flipa-skeleton-line.flipa-skeleton-short {
    width: 70%;
}

@media (max-width: 600px) {
    .flipa-skeleton-page.flipa-skeleton-left,
    .flipa-skeleton-spine {
        display: none;
    }
}