.amplifi-flipbook {
    position: relative;
    width: 100%;
    overflow: visible;
}

.amplifi-flipbook-viewport {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.amplifi-flipbook-viewport canvas {
    display: block;
    max-width: 100%;
    height: auto;
    flex: 0 1 auto;
    min-width: 0;
}

.amplifi-flipbook-viewport.slide-left {
    opacity: 0;
    transform: translateX(-12px);
}

.amplifi-flipbook-viewport.slide-right {
    opacity: 0;
    transform: translateX(12px);
}

.amplifi-flipbook-prev,
.amplifi-flipbook-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 2.4rem;
    line-height: 1;
    padding: 0.4rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.amplifi-flipbook-btn-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    padding: 0;
    font-size: 1.4rem;
}

.amplifi-flipbook-prev:hover,
.amplifi-flipbook-next:hover {
    color: #555;
}

.amplifi-flipbook-btn-circle:hover {
    opacity: 0.85;
}

.amplifi-flipbook-prev { left: 8px; right: auto; }
.amplifi-flipbook-next { right: 8px; left: auto; }

.amplifi-flipbook-prev:disabled,
.amplifi-flipbook-next:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

@keyframes amplifi-peek {
    0%, 100% { transform: translateX(0); }
    40%      { transform: translateX(-16px); }
    70%      { transform: translateX(0); }
}

.amplifi-flipbook-viewport.peek {
    animation: amplifi-peek 0.6s ease 3;
}

.amplifi-flipbook-indicator {
    text-align: center;
    font-size: 0.8rem;
    color: #aaa;
    padding: 0.5rem 0;
    user-select: none;
}

.amplifi-flipbook-open {
    display: none;
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    text-decoration: none;
    padding: 0.25rem 0;
}

.amplifi-flipbook-open:hover {
    color: #555;
}

@media (max-width: 768px) {
    .amplifi-flipbook-prev,
    .amplifi-flipbook-next {
        font-size: 1.8rem;
    }

    .amplifi-flipbook-open {
        display: block;
    }
}