/* --- Root Variables (Default values, overridden by Global Settings PHP) --- */
:root {
    --wpbs-bg: #ffffff;
    --wpbs-text: #333333;
    --wpbs-overlay: rgba(0, 0, 0, 0.5);
    --wpbs-blur: 2px;
    --wpbs-speed: 0.4s;
    --wpbs-max-width: 600px;
    --wpbs-max-height: 90vh;
    --wpbs-btn-bg: #0073aa;
    --wpbs-btn-text: #ffffff;
    --wpbs-btn-radius: 4px;
    --wpbs-btn-shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --wpbs-bg: #1a1a1a;
        --wpbs-text: #f0f0f0;
        --wpbs-overlay: rgba(0, 0, 0, 0.7);
    }
}

/* --- Trigger Button --- */
.wpbs-trigger-btn {
    padding: 10px 24px;
    background: var(--wpbs-btn-bg);
    color: var(--wpbs-btn-text);
    border: none;
    border-radius: var(--wpbs-btn-radius);
    box-shadow: var(--wpbs-btn-shadow);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.wpbs-trigger-btn:hover {
    filter: brightness(110%);
}

/* --- Container (The Stage) --- */
.wpbs-container {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 2147483647;
    
    /* 1. Start hidden from DOM entirely */
    display: none; 
    
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

/* 2. When triggered, we change to display: flex */
.wpbs-container.wpbs-show {
    display: flex;
}

/* --- Overlay --- */
.wpbs-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--wpbs-overlay);
    backdrop-filter: blur(var(--wpbs-blur));
    
    /* Start Invisible */
    opacity: 0;
    transition: opacity var(--wpbs-speed) ease;
}

/* When active class added via JS */
.wpbs-container.wpbs-open .wpbs-overlay {
    opacity: 1;
}

/* --- The Sheet --- */
.wpbs-sheet {
    position: relative;
    width: 100%;
    max-width: var(--wpbs-max-width);
    max-height: var(--wpbs-max-height);
    background: var(--wpbs-bg);
    color: var(--wpbs-text);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* 3. Start state: Off-screen (bottom) */
    transform: translateY(100%);
    
    /* Smooth "Spring" Animation Curve */
    transition: transform var(--wpbs-speed) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Final state: Slide into view */
.wpbs-container.wpbs-open .wpbs-sheet {
    transform: translateY(0);
}

/* --- Sheet Components --- */
.wpbs-header {
    width: 100%; 
    padding: 15px 0; 
    display: flex; 
    justify-content: center;
    flex-shrink: 0; 
    cursor: grab; 
    background: inherit; 
    z-index: 10;
}

.wpbs-handle {
    width: 44px;
    height: 5px;
    background: #e0e0e0;
    border-radius: 10px;
}

.wpbs-content-wrapper {
    padding: 0 25px 40px 25px;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.wpbs-loader {
    text-align: center;
    padding: 40px;
    color: #888;
}

/* --- Theme Typography Fixes --- */
.wpbs-prose {
    line-height: 1.6;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wpbs-prose h1, .wpbs-prose h2, .wpbs-prose h3 { 
    margin-top: 0; 
    line-height: 1.2; 
    color: inherit; 
}
.wpbs-prose p { margin-bottom: 1.5em; }
.wpbs-prose img { max-width: 100%; height: auto; border-radius: 8px; }