/* Image Hotspot */
.fp-hotspot-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    background: transparent !important;
    display: block;
}
.fp-hotspot-image .fp-hotspot-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
    text-align: center;
    pointer-events: none;
}

/* Link Hotspot */
.fp-hotspot-link {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.fp-hotspot-link-btn {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(37,99,235,0.85);
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 6px;
    transition: background 0.2s;
    border: none;
    outline: none;
    box-shadow: none;
}
.fp-hotspot-link-btn:hover {
    background: rgba(37,99,235,1);
}
.fp-hotspot.no-border,
.fp-hotspot-video.no-border {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.fp-hotspot-video iframe,
.fp-hotspot-video video {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: #000 !important;
    object-fit: cover !important;
    display: block;
}
/* Video kontrollerini gizle (MP4) */
.fp-hotspot-video video::-webkit-media-controls {
    display: none !important;
}
.fp-hotspot-video video::-webkit-media-controls-enclosure {
    display: none !important;
}
.fp-hotspot-video video::-webkit-media-controls-panel {
    display: none !important;
}
.fp-hotspot-video video::-webkit-media-controls-play-button,
.fp-hotspot-video video::-webkit-media-controls-start-playback-button,
.fp-hotspot-video video::-webkit-media-controls-timeline,
.fp-hotspot-video video::-webkit-media-controls-current-time-display,
.fp-hotspot-video video::-webkit-media-controls-time-remaining-display,
.fp-hotspot-video video::-webkit-media-controls-volume-slider,
.fp-hotspot-video video::-webkit-media-controls-mute-button,
.fp-hotspot-video video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}
.fp-hotspot-video video {
    pointer-events: none;
}
/* Hotspot içindeki video tam otursun */
.fp-hotspot-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    z-index: 1;
}
.fp-hotspot-video iframe,
.fp-hotspot-video video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
    background: #000;
    display: block;
}
/* ========================================
   FarPaper Viewer - CSS Styles
   ======================================== */

/* CSS Variables - Light Theme (Default) */
:root {
    --fp-primary: #2563eb;
    --fp-primary-hover: #1d4ed8;
    --fp-primary-dark: #1d4ed8;
    --fp-secondary: #64748b;
    --fp-background: #f1f5f9;
    --fp-surface: #ffffff;
    --fp-surface-hover: #f8fafc;
    --fp-text: #1e293b;
    --fp-text-muted: #64748b;
    --fp-border: #e2e8f0;
    --fp-shadow: rgba(0, 0, 0, 0.1);
    --fp-overlay: rgba(0, 0, 0, 0.5);
    --fp-highlight: rgba(255, 213, 0, 0.4);
    --fp-toolbar-height: 56px;
    --fp-sidebar-width: 280px;
    --fp-search-width: 320px;
    --fp-transition: 0.2s ease;
    --fp-page-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --fp-product-icon-size: 32px;
    --fp-icon-color: #1e293b;
    --fp-icon-size: 24px;
}

/* Dark Theme */
.fp-theme-dark {
    --fp-background: #1e293b;
    --fp-surface: #334155;
    --fp-surface-hover: #475569;
    --fp-text: #f8fafc;
    --fp-text-muted: #94a3b8;
    --fp-border: #475569;
    --fp-shadow: rgba(0, 0, 0, 0.3);
    --fp-overlay: rgba(0, 0, 0, 0.7);
    --fp-page-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --fp-icon-color: #f8fafc;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--fp-background);
    color: var(--fp-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Container */
.farpaper-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    outline: none; /* Hide focus outline for keyboard navigation */
}

/* ========================================
   Toolbar
   ======================================== */
.fp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--fp-toolbar-height);
    padding: 0 16px;
    background: var(--fp-surface);
    border-bottom: 1px solid var(--fp-border);
    z-index: 100;
    flex-shrink: 0;
}

.fp-toolbar-left,
.fp-toolbar-center,
.fp-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-toolbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Buttons */
.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--fp-primary);
    color: var(--fp-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--fp-transition), transform var(--fp-transition);
}

.fp-btn:hover {
    background: var(--fp-primary-hover);
}

.fp-btn:active {
    transform: scale(0.95);
}

.fp-btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.fp-btn-icon:hover {
    background: var(--fp-surface-hover);
    transform: scale(1.1);
}

.fp-btn-icon:active {
    transform: scale(0.95);
}

.fp-btn-icon svg {
    width: var(--fp-icon-size, 20px);
    height: var(--fp-icon-size, 20px);
    color: var(--fp-text);
}

/* Page Info */
.fp-page-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--fp-text);
}

.fp-page-input {
    width: 48px;
    padding: 4px 8px;
    border: 1px solid var(--fp-border);
    border-radius: 4px;
    background: var(--fp-background);
    color: var(--fp-text);
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
}

.fp-page-input::-webkit-outer-spin-button,
.fp-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fp-page-input:focus {
    outline: none;
    border-color: var(--fp-primary);
}

.fp-page-separator {
    color: var(--fp-text-muted);
}

/* Zoom Level */
.fp-zoom-level {
    min-width: 50px;
    text-align: center;
    font-size: 13px;
    color: var(--fp-text-muted);
}

/* ========================================
   Sidebar (Thumbnails)
   ======================================== */
.fp-sidebar {
    position: absolute;
    top: var(--fp-toolbar-height);
    left: 0;
    width: var(--fp-sidebar-width);
    height: calc(100% - var(--fp-toolbar-height));
    background: var(--fp-surface);
    border-right: 1px solid var(--fp-border);
    z-index: 90;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--fp-transition);
}

.fp-sidebar.active {
    transform: translateX(0);
}

.fp-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fp-border);
    font-weight: 600;
    flex-shrink: 0;
}

.fp-thumbnail-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fp-thumbnail-item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color var(--fp-transition), transform var(--fp-transition), box-shadow var(--fp-transition);
    background: var(--fp-background);
    flex-shrink: 0;
}

.fp-thumbnail-item:hover {
    border-color: var(--fp-surface-hover);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fp-thumbnail-item.active {
    border-color: var(--fp-primary);
    box-shadow: 0 0 0 2px var(--fp-primary);
}

/* Spread container for thumbnails */
.fp-thumbnail-spread {
    display: flex;
    gap: 3px;
    padding: 6px;
    background: var(--fp-background);
    justify-content: center;
    align-items: stretch;
}

.fp-thumbnail-page {
    flex: 1;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-thumbnail-page img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Single page spread */
.fp-thumbnail-spread:has(.fp-thumbnail-page:only-child) .fp-thumbnail-page {
    max-width: 60%;
}

.fp-thumbnail-item img {
    width: 100%;
    height: auto;
    display: block;
}

.fp-thumbnail-number {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text-muted);
    padding: 6px 0;
    background: var(--fp-surface);
}

/* ========================================
   Search Panel
   ======================================== */
.fp-search-panel {
    position: absolute;
    top: var(--fp-toolbar-height);
    left: 0;
    width: var(--fp-search-width);
    height: calc(100% - var(--fp-toolbar-height));
    background: var(--fp-surface);
    border-right: 1px solid var(--fp-border);
    z-index: 95;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--fp-transition);
}

.fp-search-panel.active {
    transform: translateX(0);
}

.fp-search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fp-border);
    flex-shrink: 0;
}

.fp-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--fp-border);
    border-radius: 6px;
    background: var(--fp-background);
    color: var(--fp-text);
    font-size: 14px;
}

.fp-search-input:focus {
    outline: none;
    border-color: var(--fp-primary);
}

.fp-search-input::placeholder {
    color: var(--fp-text-muted);
}

.fp-search-info {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--fp-text-muted);
    border-bottom: 1px solid var(--fp-border);
    flex-shrink: 0;
}

.fp-search-info:empty {
    display: none;
}

.fp-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.fp-search-result-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--fp-transition);
    margin-bottom: 4px;
    align-items: center;
}

.fp-search-result-item:hover {
    background: var(--fp-surface-hover);
}

.fp-search-result-item.active {
    background: var(--fp-primary);
}

.fp-search-result-thumb {
    width: 50px;
    height: auto;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--fp-border);
}

.fp-search-result-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.fp-search-result-info {
    flex: 1;
    min-width: 0;
}

.fp-search-result-page {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

.fp-search-result-query {
    font-size: 11px;
    color: var(--fp-text-muted);
}

.fp-search-result-item.active .fp-search-result-query {
    color: rgba(255, 255, 255, 0.8);
}

.fp-search-result-text {
    font-size: 12px;
    color: var(--fp-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-search-result-item.active .fp-search-result-text {
    color: rgba(255, 255, 255, 0.8);
}

.fp-search-result-text mark {
    background: var(--fp-highlight);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.fp-search-no-results {
    text-align: center;
    padding: 32px 16px;
    color: var(--fp-text-muted);
}

/* ========================================
   Main Viewer Area
   ======================================== */
.fp-viewer-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fp-background);
    min-height: 0; /* Important for flex child scrolling */
}

.fp-pages-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible; /* Allow tooltips to show outside */
    cursor: grab;
    flex-shrink: 0;
    /* Disable browser's default touch zoom to handle it ourselves */
    touch-action: pan-x pan-y;
}

.fp-pages-wrapper.zoomed {
    overflow: auto; /* Enable scrolling when zoomed */
    cursor: grab;
    touch-action: none; /* Disable all touch actions when zoomed - we handle it */
}

.fp-pages-wrapper.grabbing {
    cursor: grabbing;
}

.fp-spread {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    padding: 0px;
    transform-origin: center center;
}

/* When zoomed, spread should allow full scroll */
.fp-pages-wrapper.zoomed .fp-spread {
    padding: 0px;
    margin: 0;
}

.fp-pages-wrapper.zoomed .fp-spread.animating {
    transition: transform 0.3s ease-out;
}

/* Pages */
.fp-page {
    position: relative;
    background: #fff;
    box-shadow: var(--fp-page-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow tooltips to overflow */
    flex-shrink: 0;
    /* Minimum size for loading state */
    min-width: 100px;
    min-height: 150px;
    cursor: zoom-in;
}

/* Zoomed state - show zoom-out cursor */
.fp-pages-wrapper.zoomed .fp-page {
    cursor: zoom-out;
}

/* Grabbing state overrides zoom cursor */
.fp-pages-wrapper.grabbing .fp-page {
    cursor: grabbing;
}

.fp-page img {
    /* Contain image within page bounds */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fp-page.hidden {
    display: none;
}

/* Page loading skeleton animation */
.fp-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.03) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    background-size: 200% 100%;
    animation: fp-skeleton-loading 1.5s infinite;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* Show skeleton only when no image loaded yet */
.fp-page:not(:has(.fp-page-image[src]))::before {
    opacity: 1;
}

@keyframes fp-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.fp-page-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Wrapper that contains image and all overlays - sized by image */
.fp-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    /* Smooth transition for zoom with spring effect */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Allow transform without overflow issues */
    will-change: transform;
}

.fp-page-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    opacity: 1;
    transition: opacity 0.1s ease;
    /* Ensure smooth image transitions */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Loading state - now we keep old image visible, no hiding */
.fp-page-image.loading {
    /* Keep visible - old image stays until new one is ready */
    opacity: 1;
}

/* Product Icons Layer */
.fp-products-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible; /* Allow tooltips to overflow */
}

.fp-product-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    transition: transform var(--fp-transition), opacity 0.4s ease;
    /* FadeUp animation */
    animation: fp-icon-fadeUp 0.5s ease-out backwards;
}

/* Staggered animation delay for multiple icons */
.fp-product-icon:nth-child(1) { animation-delay: 0.1s; }
.fp-product-icon:nth-child(2) { animation-delay: 0.15s; }
.fp-product-icon:nth-child(3) { animation-delay: 0.2s; }
.fp-product-icon:nth-child(4) { animation-delay: 0.25s; }
.fp-product-icon:nth-child(5) { animation-delay: 0.3s; }
.fp-product-icon:nth-child(6) { animation-delay: 0.35s; }
.fp-product-icon:nth-child(7) { animation-delay: 0.4s; }
.fp-product-icon:nth-child(8) { animation-delay: 0.45s; }
.fp-product-icon:nth-child(9) { animation-delay: 0.5s; }
.fp-product-icon:nth-child(10) { animation-delay: 0.55s; }
.fp-product-icon:nth-child(n+11) { animation-delay: 0.6s; }

@keyframes fp-icon-fadeUp {
    from {
        opacity: 0;
        transform: translate(-50%, -30%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.fp-product-icon:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

.fp-product-icon-btn {
    width: var(--fp-product-icon-size);
    height: var(--fp-product-icon-size);
    border-radius: 50%;
    border: none;
    background: var(--fp-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background var(--fp-transition);
}

.fp-product-icon-btn:hover {
    background: var(--fp-primary-hover);
}

.fp-product-icon-btn svg {
    width: 50%;
    height: 50%;
}

/* Product Tooltip */
.fp-product-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--fp-surface);
    color: var(--fp-text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fp-transition), visibility var(--fp-transition);
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fp-product-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--fp-surface);
}

/* Tooltip position for icons near bottom of page - show above */
.fp-product-icon:hover .fp-product-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Tooltip below the icon (for icons near top) */
.fp-product-icon.tooltip-bottom .fp-product-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}

.fp-product-icon.tooltip-bottom .fp-product-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--fp-surface);
}

/* Out of Stock Product Styles */
.fp-product-icon.out-of-stock .fp-product-icon-btn {
    background: #888;
    opacity: 0.7;
}

.fp-product-icon.out-of-stock .fp-product-icon-btn:hover {
    background: #666;
}

.fp-product-tooltip .out-of-stock-label {
    color: #e53e3e;
    font-weight: 600;
    font-size: 11px;
}

/* Highlight Layer (for search) */
.fp-highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Now inside fp-image-wrapper, so 100% = image size */
}

.fp-highlight-box {
    position: absolute;
    background: var(--fp-highlight);
    border: 2px solid #ffd500;
    border-radius: 4px;
    animation: fp-highlight-pulse 1.5s ease-in-out infinite;
    box-sizing: border-box;
}

.fp-highlight-box.fp-highlight-primary {
    background: rgba(255, 90, 104, 0.35);
    border-color: #FF5A68;
    animation: fp-highlight-pulse-primary 1s ease-in-out infinite;
    z-index: 10;
}

@keyframes fp-highlight-pulse-primary {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 8px rgba(255, 90, 104, 0.5);
    }
    50% { 
        opacity: 0.7;
        box-shadow: 0 0 16px rgba(255, 90, 104, 0.8);
    }
}

@keyframes fp-highlight-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Navigation Arrows */
.fp-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 50;
    padding: 0;
    color: #1e293b;
}

.fp-nav-arrow svg {
    width: 32px;
    height: 32px;
}

.fp-nav-arrow.fp-nav-prev {
    left: 8px;
}

.fp-nav-arrow.fp-nav-next {
    right: 8px;
}

/* Theme-based arrow colors */
.fp-theme-light .fp-nav-arrow {
    color: #1e293b;
}

.fp-theme-dark .fp-nav-arrow {
    color: #f8fafc;
}

/* ========================================
   Loading Overlay
   ======================================== */
.fp-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fp-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fp-loading.active {
    opacity: 1;
    visibility: visible;
}

.fp-loading.hidden {
    opacity: 0;
    visibility: hidden;
}

.fp-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--fp-surface);
    border-top-color: var(--fp-primary);
    border-radius: 50%;
    animation: fp-spin 1s linear infinite;
}

@keyframes fp-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Error/Not Found Overlay
   ======================================== */
.fp-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fp-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fp-error.active {
    opacity: 1;
    visibility: visible;
}

.fp-error-content {
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.fp-error-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    color: var(--fp-text-muted);
    opacity: 0.6;
}

.fp-error-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--fp-text);
    margin: 0 0 12px 0;
}

.fp-error-message {
    font-size: 15px;
    color: var(--fp-text-muted);
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.fp-error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--fp-primary);
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.fp-error-btn:hover {
    background: var(--fp-primary-dark, #1d4ed8);
    transform: translateY(-1px);
}

/* ========================================
   Share Modal
   ======================================== */
.fp-share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fp-share-modal.active {
    opacity: 1;
    visibility: visible;
}

.fp-share-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.fp-share-content {
    position: relative;
    background: var(--fp-surface);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.fp-share-modal.active .fp-share-content {
    transform: translateY(0);
}

.fp-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--fp-border);
}

.fp-share-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--fp-text);
    margin: 0;
}

.fp-share-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--fp-text-muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.fp-share-close:hover {
    background: var(--fp-surface-hover);
    color: var(--fp-text);
}

.fp-share-close svg {
    width: 20px;
    height: 20px;
}

.fp-share-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

.fp-share-section {
    margin-bottom: 24px;
}

.fp-share-section:last-child {
    margin-bottom: 0;
}

.fp-share-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* URL Copy Box */
.fp-share-url-box {
    display: flex;
    gap: 8px;
}

.fp-share-url-box input {
    flex: 1;
    padding: 12px 16px;
    background: var(--fp-background);
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--fp-text);
    outline: none;
}

.fp-share-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--fp-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.fp-share-copy-btn:hover {
    background: var(--fp-primary-hover);
}

.fp-share-copy-btn svg {
    width: 18px;
    height: 18px;
}

.fp-share-copy-btn.copied {
    background: #10b981;
}

/* Social Share Buttons */
.fp-share-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fp-share-social-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-share-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fp-share-social-btn svg {
    width: 24px;
    height: 24px;
}

.fp-share-whatsapp {
    background: #25D366;
    color: white;
}

.fp-share-twitter {
    background: #000000;
    color: white;
}

.fp-share-facebook {
    background: #1877F2;
    color: white;
}

.fp-share-linkedin {
    background: #0A66C2;
    color: white;
}

.fp-share-email {
    background: var(--fp-secondary);
    color: white;
}

/* QR Code */
.fp-share-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 12px;
}

.fp-share-qr-code {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-share-qr-code img,
.fp-share-qr-code canvas {
    width: 100%;
    height: 100%;
}

.fp-share-qr-hint {
    margin-top: 12px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* Embed Code */
.fp-share-embed-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-share-embed-box textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--fp-background);
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: var(--fp-text);
    resize: none;
    outline: none;
}

.fp-share-embed-box .fp-share-copy-btn {
    align-self: flex-end;
}

/* Notification Toast */
.fp-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    background: var(--fp-surface);
    color: var(--fp-text);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    z-index: 400;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.fp-notification.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.fp-notification.success {
    background: #10b981;
    color: white;
}

.fp-notification.warning {
    background: #f59e0b;
    color: white;
}

.fp-notification.error {
    background: #ef4444;
    color: white;
}

/* ========================================
   Fullscreen Mode
   ======================================== */
.farpaper-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

/* ========================================
   Responsive Design
   ======================================== */

/* Mobile/Tablet view (< 1024px width) */
@media (max-width: 1023px) {
    .fp-toolbar {
        padding: 0 8px;
    }

    .fp-toolbar-center {
        position: static;
        transform: none;
    }

    .fp-btn-icon {
        width: 36px;
        height: 36px;
    }

    .fp-zoom-level {
        display: none;
    }

    .fp-sidebar {
        width: 160px;
    }

    .fp-search-panel {
        width: 280px;
    }

    .fp-nav-arrow {
        width: 40px;
        height: 40px;
    }

    .fp-nav-arrow svg {
        width: 24px;
        height: 24px;
    }

    /* Single page view on mobile - hide right page */
    .fp-pages-wrapper.mobile .fp-page-right {
        display: none !important;
    }

    /* Pages wrapper - center single page on mobile */
    .fp-pages-wrapper.mobile {
        justify-content: center;
        /* Allow pinch zoom on mobile */
        touch-action: manipulation;
    }

    /* Ensure left page takes full available space on mobile */
    .fp-pages-wrapper.mobile .fp-page-left {
        max-width: 100%;
    }

    .farpaper-container.mobile-view .fp-spread {
        justify-content: center;
    }
    
    /* Mobile zoom - smooth transitions */
    .farpaper-container.mobile-view .fp-spread {
        will-change: transform;
    }
}

@media (max-width: 480px) {
    .fp-toolbar-left .fp-btn-icon:not(:first-child),
    .fp-toolbar-right .fp-btn-icon:not(:last-child) {
        display: none;
    }

    .fp-sidebar {
        width: 100%;
    }

    .fp-search-panel {
        width: 100%;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    .fp-btn-icon:hover {
        background: transparent;
    }

    .fp-thumbnail-item:hover {
        transform: none;
    }

    .fp-product-icon:hover {
        transform: translate(-50%, -50%);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .fp-toolbar,
    .fp-sidebar,
    .fp-search-panel,
    .fp-progress-bar,
    .fp-nav-arrow,
    .fp-loading {
        display: none !important;
    }

    .fp-viewer-area {
        height: auto;
    }

    .fp-page {
        page-break-after: always;
    }
}

/* ========================================
   Scrollbar Styles
   ======================================== */
.fp-thumbnail-list::-webkit-scrollbar,
.fp-search-results::-webkit-scrollbar,
.fp-pages-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fp-thumbnail-list::-webkit-scrollbar-track,
.fp-search-results::-webkit-scrollbar-track,
.fp-pages-wrapper::-webkit-scrollbar-track {
    background: var(--fp-background);
}

.fp-thumbnail-list::-webkit-scrollbar-thumb,
.fp-search-results::-webkit-scrollbar-thumb,
.fp-pages-wrapper::-webkit-scrollbar-thumb {
    background: var(--fp-surface-hover);
    border-radius: 4px;
}

.fp-thumbnail-list::-webkit-scrollbar-thumb:hover,
.fp-search-results::-webkit-scrollbar-thumb:hover,
.fp-pages-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--fp-secondary);
}

/* ========================================
   Theme Variations
   ======================================== */

/* Light Theme */
.fp-theme-light {
    --fp-background: #f1f5f9;
    --fp-surface: #ffffff;
    --fp-surface-hover: #e2e8f0;
    --fp-text: #1e293b;
    --fp-text-muted: #64748b;
    --fp-border: #e2e8f0;
    --fp-shadow: rgba(0, 0, 0, 0.1);
}

.fp-theme-light .fp-toolbar {
    background: #ffffff;
    border-color: #e2e8f0;
}

.fp-theme-light .fp-btn {
    color: #475569;
}

.fp-theme-light .fp-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.fp-theme-light .fp-sidebar,
.fp-theme-light .fp-search-panel {
    background: #ffffff;
    border-color: #e2e8f0;
}

.fp-theme-light .fp-thumbnail-item:hover,
.fp-theme-light .fp-thumbnail-item.active {
    background: #f1f5f9;
}

/* Dark Theme (default, already defined) */
.fp-theme-dark {
    --fp-background: #1e293b;
    --fp-surface: #334155;
    --fp-surface-hover: #475569;
    --fp-text: #f8fafc;
    --fp-text-muted: #94a3b8;
    --fp-border: #475569;
}

/* ========================================
   Toolbar Position Variations
   ======================================== */
.fp-toolbar-bottom {
    display: flex;
    flex-direction: column;
}

.fp-toolbar-bottom .fp-toolbar {
    order: 3;
    border-bottom: none;
    border-top: 1px solid var(--fp-border);
}

.fp-toolbar-bottom .fp-viewer-area {
    order: 1;
    flex: 1;
}

.fp-toolbar-bottom .fp-progress-bar {
    order: 2;
}

.fp-toolbar-bottom .fp-sidebar,
.fp-toolbar-bottom .fp-search-panel {
    top: 0;
    bottom: auto;
    height: calc(100% - var(--fp-toolbar-height));
}

/* Toolbar Background Variations */
.fp-toolbar-transparent {
    background: transparent !important;
    border: none !important;
}

.fp-toolbar-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========================================
   Navigation Position Variations
   ======================================== */
.fp-nav-none .fp-nav-arrow,
.fp-nav-toolbar .fp-nav-arrow {
    display: none;
}

.fp-nav-none #fp-prev,
.fp-nav-none #fp-next,
.fp-nav-sides #fp-prev,
.fp-nav-sides #fp-next {
    display: none;
}

/* Side navigation arrows */
.fp-nav-sides .fp-nav-arrow,
.fp-nav-both .fp-nav-arrow {
    display: flex;
}

/* ========================================
   Toolbar Divider
   ======================================== */
.fp-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--fp-border);
    margin: 0 4px;
}

/* ========================================
   Notification Toast
   ======================================== */
.fp-notification {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    animation: fp-notification-in 0.3s ease;
    box-shadow: 0 4px 12px var(--fp-shadow);
}

.fp-notification-success {
    background: #10b981;
    color: white;
}

.fp-notification-warning {
    background: #f59e0b;
    color: white;
}

.fp-notification-error {
    background: #ef4444;
    color: white;
}

.fp-notification-info {
    background: var(--fp-primary);
    color: white;
}

.fp-notification-hide {
    animation: fp-notification-out 0.3s ease forwards;
}

@keyframes fp-notification-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fp-notification-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* ========================================
   Icon Styles
   ======================================== */
/* Base icon styling */
.fp-container .fp-btn-icon svg,
.fp-container .fp-sidebar-close svg,
.fp-container .fp-search-close svg {
    width: var(--fp-icon-size);
    height: var(--fp-icon-size);
    color: var(--fp-icon-color);
    transition: color var(--fp-transition);
}

/* Solid icons (filled) */
.fp-container.fp-icons-solid svg {
    fill: currentColor;
    stroke: none;
}

/* Outline icons */
.fp-container.fp-icons-outline svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Rounded icons */
.fp-container.fp-icons-rounded svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Light theme icon adjustments */
.fp-container.fp-theme-light.fp-icons-solid svg {
    color: var(--fp-icon-color, #1e293b);
}

.fp-container.fp-theme-light .fp-btn-icon:hover svg {
    color: var(--fp-primary);
}

/* Dark theme icon adjustments */
.fp-container.fp-theme-dark .fp-btn-icon svg,
.fp-container.fp-theme-dark .fp-sidebar-close svg,
.fp-container.fp-theme-dark .fp-search-close svg {
    color: var(--fp-text);
}

.fp-container.fp-theme-dark .fp-btn-icon:hover svg {
    color: var(--fp-primary);
}

/* ============================================
   HOTSPOTS LAYER
   ============================================ */

.fp-hotspots-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.fp-hotspot {
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.fp-hotspot:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.7);
}

.fp-hotspot-inner {
    width: 64px;
    height: 64px;
    max-width: 50%;
    max-height: 50%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0.8;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.fp-hotspot:hover .fp-hotspot-inner {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(255, 90, 104, 0.9);
}

.fp-hotspot-inner svg {
    width: 50%;
    height: 50%;
    margin-left: 5%; /* Visual centering for play icon */
}

.fp-hotspot-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fp-hotspot:hover .fp-hotspot-label {
    opacity: 1;
}

/* ============================================
   VIDEO MODAL
   ============================================ */

.fp-video-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    animation: fp-fade-in 0.3s ease;
}

.fp-video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90%;
    z-index: 1001;
    animation: fp-scale-in 0.3s ease;
}

.fp-video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fp-video-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.fp-video-modal-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}

.fp-video-modal-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.fp-video-modal-player iframe,
.fp-video-modal-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes fp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fp-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   PAGE TRANSITION ANIMATIONS
   ======================================== */

/* Animation timing variable */
.fp-pages-wrapper {
    --fp-animation-duration: 400ms;
}

/* Prevent interaction during animation */
.fp-pages-wrapper.fp-animating {
    pointer-events: none;
}

/* SLIDE ANIMATIONS */
@keyframes fp-slide-out-left-anim {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes fp-slide-out-right-anim {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes fp-slide-in-left-anim {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fp-slide-in-right-anim {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.fp-slide-out-left {
    animation: fp-slide-out-left-anim var(--fp-animation-duration) ease-out forwards;
}

.fp-slide-out-right {
    animation: fp-slide-out-right-anim var(--fp-animation-duration) ease-out forwards;
}

.fp-slide-in-left {
    animation: fp-slide-in-left-anim var(--fp-animation-duration) ease-out forwards;
}

.fp-slide-in-right {
    animation: fp-slide-in-right-anim var(--fp-animation-duration) ease-out forwards;
}

/* FADE ANIMATIONS */
@keyframes fp-fade-out-anim {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fp-fade-in-anim {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fp-fade-out {
    animation: fp-fade-out-anim var(--fp-animation-duration) ease-out forwards;
}

.fp-fade-in {
    animation: fp-fade-in-anim var(--fp-animation-duration) ease-out forwards;
}

/* FLIP ANIMATIONS (Book-like) */
@keyframes fp-flip-out-left-anim {
    from { 
        transform: perspective(1000px) rotateY(0deg); 
        opacity: 1;
    }
    to { 
        transform: perspective(1000px) rotateY(-90deg); 
        opacity: 0;
    }
}

@keyframes fp-flip-out-right-anim {
    from { 
        transform: perspective(1000px) rotateY(0deg); 
        opacity: 1;
    }
    to { 
        transform: perspective(1000px) rotateY(90deg); 
        opacity: 0;
    }
}

@keyframes fp-flip-in-left-anim {
    from { 
        transform: perspective(1000px) rotateY(90deg); 
        opacity: 0;
    }
    to { 
        transform: perspective(1000px) rotateY(0deg); 
        opacity: 1;
    }
}

@keyframes fp-flip-in-right-anim {
    from { 
        transform: perspective(1000px) rotateY(-90deg); 
        opacity: 0;
    }
    to { 
        transform: perspective(1000px) rotateY(0deg); 
        opacity: 1;
    }
}

.fp-flip-out-left {
    animation: fp-flip-out-left-anim var(--fp-animation-duration) ease-in-out forwards;
    transform-origin: left center;
}

.fp-flip-out-right {
    animation: fp-flip-out-right-anim var(--fp-animation-duration) ease-in-out forwards;
    transform-origin: right center;
}

.fp-flip-in-left {
    animation: fp-flip-in-left-anim var(--fp-animation-duration) ease-in-out forwards;
    transform-origin: right center;
}

.fp-flip-in-right {
    animation: fp-flip-in-right-anim var(--fp-animation-duration) ease-in-out forwards;
    transform-origin: left center;
}

/* ZOOM ANIMATIONS */
@keyframes fp-zoom-out-anim {
    from { 
        transform: scale(1); 
        opacity: 1;
    }
    to { 
        transform: scale(0.8); 
        opacity: 0;
    }
}

@keyframes fp-zoom-in-anim {
    from { 
        transform: scale(1.2); 
        opacity: 0;
    }
    to { 
        transform: scale(1); 
        opacity: 1;
    }
}

.fp-zoom-out {
    animation: fp-zoom-out-anim var(--fp-animation-duration) ease-out forwards;
}

.fp-zoom-in {
    animation: fp-zoom-in-anim var(--fp-animation-duration) ease-out forwards;
}

/* Ensure smooth animations with hardware acceleration */
.fp-spread.fp-animating,
.fp-pages-container.fp-animating,
.fp-pages-wrapper.fp-animating {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Slider track for slide animation */
.fp-slider-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    will-change: transform;
    backface-visibility: hidden;
    z-index: 10;
}

.fp-slide-current,
.fp-slide-next {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure spread can hold the slider */
.fp-spread {
    position: relative;
}

/* ===== Toast Notifications ===== */
.fp-toast-container {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.fp-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 14px;
    font-weight: 500;
    pointer-events: auto;
    animation: fp-toast-in 0.3s ease-out;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fp-toast.fp-toast-out {
    animation: fp-toast-out 0.3s ease-in forwards;
}

.fp-toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.fp-toast-icon svg {
    width: 100%;
    height: 100%;
}

.fp-toast.fp-toast-success {
    border-left: 3px solid #4ade80;
}

.fp-toast.fp-toast-success .fp-toast-icon {
    color: #4ade80;
}

.fp-toast.fp-toast-error {
    border-left: 3px solid #f87171;
}

.fp-toast.fp-toast-error .fp-toast-icon {
    color: #f87171;
}

.fp-toast.fp-toast-info {
    border-left: 3px solid #60a5fa;
}

.fp-toast.fp-toast-info .fp-toast-icon {
    color: #60a5fa;
}

.fp-toast.fp-toast-warning {
    border-left: 3px solid #fbbf24;
}

.fp-toast.fp-toast-warning .fp-toast-icon {
    color: #fbbf24;
}

@keyframes fp-toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Mobile adjustments for toast */
@media (max-width: 768px) {
    .fp-toast-container {
        bottom: 70px;
        left: 16px;
        right: 16px;
        transform: none;
    }
    
    .fp-toast {
        font-size: 13px;
        padding: 10px 16px;
    }
}