/* ==========================================================================
   Dear Flip - Multi-Theme Viewport Engine
   ========================================================================== */

.dfb-wrapper {
    position: relative;
    width: 100% !important;
    max-width: 1300px !important; /* Forces the plugin layout to expand wide for enhanced site readability */
    margin: 30px auto !important; /* Centers the larger viewport nicely with clean top/bottom separation */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.dfb-wrapper:fullscreen,
.dfb-wrapper:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Stage - Keeps overflow hidden to make sure zoomed-out book centers nicely */
.dfb-stage {
    position: relative;
    width: 100% !important; /* Spreads stage components fully into the expanded wrapper boundaries */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Strict crop so panning doesn't trigger parent scrollbars */
    padding: 25px; /* Increased padding slightly to isolate the document pages cleanly at larger viewports */
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.dfb-wrapper:fullscreen .dfb-stage,
.dfb-wrapper:-webkit-full-screen .dfb-stage {
    height: calc(100vh - 60px) !important;
}

/* Hardware accelerated transition engine */
.dfb-book {
    position: relative;
    margin: auto !important;
    transform-origin: center center;
    will-change: transform;
}

/* Grab cursors for panning */
.dfb-stage.zoomed-in {
    cursor: grab !important;
}
.dfb-stage.zoomed-in:active {
    cursor: grabbing !important;
}

.dfb-page {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.dfb-page canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ==========================================================================
   Toolbar Core Layout Structure
   ========================================================================== */
.dfb-toolbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 99;
    box-sizing: border-box;
}

.dfb-toolbar-left, .dfb-toolbar-center, .dfb-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dfb-toolbar-left { width: 25%; justify-content: flex-start; }
.dfb-toolbar-center { width: 50%; justify-content: center; }
.dfb-toolbar-right { width: 25%; justify-content: flex-end; }

.dfb-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dfb-page-indicator {
    font-size: 14px;
    padding: 4px 14px;
    border-radius: 15px;
    min-width: 50px;
    text-align: center;
    font-weight: 500;
}

.dfb-btn {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.dfb-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Reset Viewport Button - Perfectly matches the native toolbar theme buttons */
.dfb-wrapper .dfb-toolbar .dfb-btn.dfb-reset-view {
    background: transparent !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Forces the reset icon to behave exactly like the surrounding dashicons */
.dfb-wrapper .dfb-toolbar .dfb-btn.dfb-reset-view .dashicons {
    font-family: 'dashicons' !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    color: inherit !important; /* Inherits colors automatically from your Dark, Grey, and White themes */
}

@keyframes dfb-fade-in {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   THEME STYLES (Controlled by the Admin Panel Shortcode Data Attribute)
   ========================================================================== */

/* 1. DARK MODE */
.dfb-wrapper.theme-dark { background: #262626; }
.dfb-wrapper.theme-dark .dfb-toolbar { background: #141414; border-top: 1px solid #2d2d2d; }
.dfb-wrapper.theme-dark .dfb-title { color: #8a8a8a; }
.dfb-wrapper.theme-dark .dfb-page-indicator { color: #ffffff; background: #2d2d2d; }
.dfb-wrapper.theme-dark .dfb-btn { color: #aaaaaa; }
.dfb-wrapper.theme-dark .dfb-btn:hover { background: #333333; color: #ffffff; }

/* 2. GREY MODE */
.dfb-wrapper.theme-grey { background: #5a5f66; }
.dfb-wrapper.theme-grey .dfb-toolbar { background: #3c4045; border-top: 1px solid #4d5259; }
.dfb-wrapper.theme-grey .dfb-title { color: #cbd5e1; }
.dfb-wrapper.theme-grey .dfb-page-indicator { color: #ffffff; background: #4d5259; }
.dfb-wrapper.theme-grey .dfb-btn { color: #e2e8f0; }
.dfb-wrapper.theme-grey .dfb-btn:hover { background: #4d5259; color: #ffffff; }

/* 3. WHITE MODE */
.dfb-wrapper.theme-white { background: #f8fafc; }
.dfb-wrapper.theme-white .dfb-toolbar { background: #ffffff; border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 12px rgba(0,0,0,0.03); }
.dfb-wrapper.theme-white .dfb-title { color: #64748b; }
.dfb-wrapper.theme-white .dfb-page-indicator { color: #334155; background: #f1f5f9; }
.dfb-wrapper.theme-white .dfb-btn { color: #475569; }
.dfb-wrapper.theme-white .dfb-btn:hover { background: #f1f5f9; color: #0f172a; }

/* Loader Cover Options */
.dfb-loader {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: inherit;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.dfb-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0,124,186,0.1);
    border-top-color: #007cba;
    border-radius: 50%;
    animation: dfb-spin 1s infinite linear;
}
@keyframes dfb-spin { 100% { transform: rotate(360deg); } }

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .dfb-stage { padding: 5px; }
    .dfb-toolbar { height: auto; flex-direction: column; padding: 10px; gap: 10px; }
    .dfb-toolbar-left { display: none; }
    .dfb-toolbar-center, .dfb-toolbar-right { width: 100%; justify-content: center; gap: 12px; }
}