:root {
    --bpv-bg: transparent; 
    --bpv-panel: rgba(10, 5, 20, 0.7); 
    --bpv-accent: #14F195; 
    --bpv-purple: #9945FF; 
    --bpv-text: #f4f4f5;
    --bpv-text-muted: #a1a1aa;
    --bpv-border: rgba(255, 255, 255, 0.1);
    --bpv-border-med: rgba(255, 255, 255, 0.2);
    --bpv-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --bpv-radius: 24px; 
}

/* -----------------------------------------------------------------
   GLOBAL WRAPPER
----------------------------------------------------------------- */
.bpv-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-family: var(--bpv-font) !important;
    color: var(--bpv-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* -----------------------------------------------------------------
   ANTI-HIJACK: PREVENT THEME INTERFERENCE
----------------------------------------------------------------- */
body .bpv-wrapper button.bpv-control-icon,
body .bpv-wrapper a.bpv-control-icon,
body .bpv-wrapper button.bpv-inline-close-btn,
body .bpv-wrapper button.bpv-gl-btn,
body .bpv-wrapper button.bpv-gl-close {
    background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-text-fill-color: initial !important;
    color: white !important; cursor: pointer !important; transform: none !important; font-family: var(--bpv-font) !important;
}
body .bpv-wrapper button.bpv-switch-to-login,
body .bpv-wrapper button.bpv-switch-to-unlock,
body .bpv-wrapper button.bpv-back-step {
    background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-text-fill-color: initial !important;
    display: inline-block !important; color: var(--bpv-text-muted) !important; font-size: 12px !important; cursor: pointer !important; text-decoration: underline !important; transform: none !important;
}
body .bpv-wrapper button.bpv-switch-to-login:hover,
body .bpv-wrapper button.bpv-switch-to-unlock:hover,
body .bpv-wrapper button.bpv-back-step:hover { 
    color: #fff !important; 
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* -----------------------------------------------------------------
   NATIVE VIDEO SECTION 
----------------------------------------------------------------- */
.bpv-video-section {
    position: relative !important; 
    width: 100% !important; 
    aspect-ratio: 16 / 9 !important; 
    background: #000 !important; 
    overflow: hidden !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    border-radius: var(--bpv-radius) var(--bpv-radius) 0 0 !important; 
    border: 1px solid var(--glass-border) !important; 
    border-bottom: none !important;
}

.bpv-main-video { 
    position: absolute !important; top: 0 !important; left: 0 !important; 
    width: 100% !important; height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; margin: 0 !important; padding: 0 !important; 
    transition: object-fit 0.3s ease !important; z-index: 1 !important; 
}
.bpv-main-video.contain-mode { object-fit: contain !important; }

/* -----------------------------------------------------------------
   CUSTOM VIDEO FOOTER (Flat Theme Match, 1 Row, Zero Glow)
----------------------------------------------------------------- */
.bpv-custom-video-footer {
    display: flex !important;
    gap: 8px !important;
    padding: 16px 24px !important;
    background: rgba(5, 2, 10, 0.85) !important; /* Theme Header Match */
    border-bottom: 1px solid var(--glass-border) !important;
    border-left: 1px solid var(--glass-border) !important;
    border-right: 1px solid var(--glass-border) !important;
    border-radius: 0 0 var(--bpv-radius) var(--bpv-radius) !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    margin-bottom: 30px !important;
    z-index: 2 !important;
    position: relative !important;
}

body .bpv-wrapper button.bpv-footer-btn,
body .bpv-wrapper a.bpv-footer-btn {
    flex: 1 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    padding: 0 !important; 
    background: transparent !important;
    border: none !important; 
    border-radius: 0 !important; 
    color: #f8fafc !important; /* Theme Menu White */
    font-size: 15px !important; 
    font-weight: 800 !important; 
    text-transform: capitalize !important;
    white-space: nowrap !important; 
    cursor: pointer !important;
    text-decoration: none !important; 
    box-shadow: none !important; 
    transform: none !important; 
    -webkit-text-fill-color: initial !important;
    outline: none !important;
}

/* PLUGIN NULLIFIER FIX: 
    Explicitly forces no background, box-shadow, or transform on hover to 
    prevent the theme from hijacking the interaction.
*/
body .bpv-wrapper button.bpv-footer-btn:hover,
body .bpv-wrapper a.bpv-footer-btn:hover {
    color: var(--sol-green) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
    outline: none !important;
}

/* Hide SVG Icons if present so they purely look like flat text links */
body .bpv-wrapper button.bpv-footer-btn svg,
body .bpv-wrapper a.bpv-footer-btn svg { display: none !important; }

/* Active loop button color state */
body .bpv-wrapper button.bpv-ab-loop-btn[data-state="1"],
body .bpv-wrapper button.bpv-ab-loop-btn[data-state="2"] {
    color: var(--sol-green) !important;
}

/* -----------------------------------------------------------------
   PREMIUM WIDE INLINE MODAL (Desktop Split, Mobile Stack)
----------------------------------------------------------------- */
.bpv-inline-modal {
    background: #0a0514 !important;
    border-left: 1px solid var(--glass-border) !important;
    border-right: 1px solid var(--glass-border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bpv-inline-modal-pad {
    padding: 40px 32px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* True CSS Display Toggle for Zero-Gap Heights */
.bpv-slide-1, .bpv-slide-2 { display: none !important; width: 100% !important; }
.bpv-step-slider[data-step="1"] .bpv-slide-1 { display: block !important; }
.bpv-step-slider[data-step="2"] .bpv-slide-2 { display: block !important; }

/* Vertically Center Content on Desktop */
.bpv-desktop-split {
    display: flex !important;
    gap: 40px !important;
    align-items: center !important;
    width: 100% !important;
}
.bpv-split-left { flex: 1 !important; text-align: left !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.bpv-split-right { flex: 1.2 !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }

.bpv-value-prop { 
    font-size: 1.8rem !important; 
    color: #fff !important; 
    font-weight: 900 !important; 
    line-height: 1.3 !important; 
    text-wrap: balance !important; 
    margin: 0 !important;
}

/* Step 2 Specific Adjustments */
.bpv-step2-header { display: flex !important; align-items: center !important; position: relative !important; margin-bottom: 24px !important; }
body .bpv-wrapper button.bpv-back-step { background: transparent !important; border: none !important; color: var(--bpv-text-muted) !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 !important; text-decoration: none !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: none !important; transform: none !important; }
body .bpv-wrapper button.bpv-back-step:hover { color: #fff !important; background: transparent !important; box-shadow: none !important; transform: none !important;}
body .bpv-wrapper button.bpv-back-step svg { width: 16px !important; height: 16px !important; margin:0 !important; display: block !important;}
.bpv-amount-large { font-family: monospace !important; font-size: 36px !important; font-weight: 900 !important; color: var(--bpv-accent) !important; margin-bottom: 0 !important; }

body .bpv-wrapper button.bpv-inline-close-btn {
    margin-top: 16px !important;
    color: var(--bpv-text-muted) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    font-size: 12px !important; font-weight: 700 !important; transition: color 0.2s !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
    background: transparent !important; box-shadow: none !important; transform: none !important;
}
body .bpv-wrapper button.bpv-inline-close-btn:hover { color: #fff !important; background: transparent !important; box-shadow: none !important; transform: none !important;}
body .bpv-wrapper button.bpv-inline-close-btn svg { width: 16px !important; height: 16px !important; }

/* INPUTS & BUTTONS */
.bpv-input { width: 100% !important; padding: 14px !important; background: rgba(0,0,0,0.6) !important; border: 1px solid var(--bpv-border) !important; color: #fff !important; border-radius: 12px !important; box-sizing: border-box !important; font-size: 15px !important; font-family: var(--bpv-font) !important; transition: all 0.3s !important; margin-bottom: 16px !important; }
.bpv-input:focus { outline: none !important; border-color: var(--bpv-purple) !important; box-shadow: inset 0 0 10px rgba(153,69,255,0.2) !important; }
.bpv-main-btn { width: 100% !important; padding: 14px !important; background: linear-gradient(135deg, var(--bpv-purple) 0%, var(--bpv-accent) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: none !important; border-radius: 50px !important; font-weight: 900 !important; cursor: pointer !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; transition: all 0.3s !important; box-shadow: 0 8px 25px rgba(153,69,255,0.3) !important; font-family: var(--bpv-font) !important; display: block !important; text-align: center !important; margin: 0 !important; }
.bpv-main-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(20, 241, 149, 0.4) !important; color: #ffffff !important; }

/* --- PAYMENT UI --- */
.bpv-payment-container { width: 100% !important; }
.bpv-instruction-text { font-size: 12px !important; color: var(--bpv-text-muted) !important; font-weight: 800 !important; margin-bottom: 4px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-align: left !important; }
.bpv-pay-grid { display: flex !important; flex-direction: row !important; gap: 16px !important; align-items: center !important; margin-bottom: 20px !important; width: 100% !important; }
.bpv-qr-box { display: block !important; background: #fff !important; padding: 8px !important; border-radius: 12px !important; width: 100px !important; height: 100px !important; flex-shrink: 0 !important;}
.bpv-qr-box img { width: 100% !important; height: 100% !important; display: block !important; }
.bpv-wallet-wrapper { width: 100% !important; text-align: left !important; }
.bpv-wallet-code { background: rgba(0,0,0,0.8) !important; border: 1px solid rgba(153,69,255,0.4) !important; border-radius: 8px !important; padding: 14px !important; font-family: monospace !important; font-size: 13px !important; color: var(--bpv-accent) !important; word-break: break-all !important; max-height: 80px !important; overflow-y: auto !important; cursor: pointer !important; transition: all 0.3s !important; text-align: center !important; }
.bpv-wallet-code:hover { border-color: var(--bpv-accent) !important; color: #000 !important; background: var(--bpv-accent) !important; }
.bpv-status-msg { margin-top: 16px !important; background: rgba(0,0,0,0.4) !important; border: 1px solid var(--bpv-border) !important; border-radius: 8px !important; padding: 14px !important; font-size: 13px !important; color: #aaa !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-weight: bold !important; }
.blink { animation: bpvBlink 1.5s infinite !important; }
@keyframes bpvBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }


/* -----------------------------------------------------------------
   DESCRIPTION & TAGS
----------------------------------------------------------------- */
.bpv-post-body { padding: 0 0 30px 0 !important; color: #cbd5e1 !important; font-size: 1.05rem !important; font-weight: 400 !important; line-height: 1.7 !important; background: transparent !important; }
.bpv-post-body p { margin-bottom: 1.5em !important; }
.bpv-post-body p:last-child { margin-bottom: 0 !important; }
.bpv-tags { padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; background: transparent !important; }
.bpv-tag { background: rgba(153, 69, 255, 0.1) !important; color: var(--bpv-accent) !important; padding: 8px 16px !important; border-radius: 99px !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: 1px solid rgba(153, 69, 255, 0.3) !important; transition: all 0.3s !important; }
.bpv-tag:hover { background: rgba(20, 241, 149, 0.15) !important; border-color: var(--bpv-accent) !important; color: #fff !important; }

/* -----------------------------------------------------------------
   PHOTO GALLERY GRID
----------------------------------------------------------------- */
.bpv-photo-grid-view { padding: 0 0 30px 0 !important; background: transparent !important; }
.bpv-photo-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
.bpv-photo-thumb { position: relative !important; border-radius: 20px !important; overflow: hidden !important; aspect-ratio: 4/5 !important; cursor: pointer !important; border: 1px solid var(--bpv-border) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; background: rgba(0,0,0,0.5) !important; display: block !important; margin: 0 !important; }
.bpv-photo-thumb:hover { border-color: rgba(20,241,149,0.5) !important; box-shadow: 0 15px 40px rgba(153,69,255,0.2) !important; transform: translateY(-6px) !important; }
.bpv-photo-thumb img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; border-radius: 0 !important; transition: transform 0.5s ease !important; }
.bpv-photo-thumb:hover img { transform: scale(1.05) !important; }
.bpv-photo-thumb::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(3,1,8,0) 30%, rgba(153,69,255,0.2) 100%) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; pointer-events: none !important; }
.bpv-photo-thumb:hover::after { opacity: 1 !important; }

/* -----------------------------------------------------------------
   REBUILT SOLANA GALLERY LIGHTBOX (CSS-ONLY VISIBILITY TOGGLE)
----------------------------------------------------------------- */
.bpv-gallery-lightbox {
    position: fixed !important; inset: 0 !important; background: rgba(3,1,8,0.95) !important; 
    backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; 
    z-index: 999999 !important; display: flex !important; flex-direction: column !important; 
    align-items: center !important; justify-content: center !important; overflow: hidden !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.bpv-gallery-lightbox.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* Floating Top-Right Close Button */
body .bpv-wrapper button.bpv-gl-close {
    position: absolute !important; top: 24px !important; right: 24px !important; width: 48px !important; height: 48px !important;
    background: rgba(0,0,0,0.5) !important; border: 1px solid var(--bpv-border) !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    z-index: 10 !important; transition: all 0.3s !important;
}
body .bpv-wrapper button.bpv-gl-close:hover {
    background: rgba(153,69,255,0.3) !important; border-color: var(--sol-purple) !important; transform: scale(1.1) !important; color: #fff !important; box-shadow: none !important;
}
body .bpv-wrapper button.bpv-gl-close svg { width: 24px !important; height: 24px !important; display: block !important; margin: 0 !important; }

/* Image Viewport */
.bpv-gl-viewport {
    width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important;
}
.bpv-gl-photo { 
    max-width: 95vw !important; max-height: 85vh !important; object-fit: cover !important; border-radius: 16px !important; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important; transform-origin: center center !important; user-select: none !important; 
    -webkit-user-drag: none !important; transition: object-fit 0.3s ease, transform 0.05s linear !important; 
}
.bpv-gl-photo.contain-mode { object-fit: contain !important; }

/* Floating Bottom Solana Dock */
.bpv-gl-dock {
    position: absolute !important; bottom: 30px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: rgba(10,5,20,0.85) !important; border: 1px solid rgba(20,241,149,0.3) !important; border-radius: 50px !important;
    padding: 10px 20px !important; display: flex !important; gap: 20px !important; box-shadow: 0 10px 40px rgba(20,241,149,0.15) !important;
    backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 10 !important;
}
body .bpv-wrapper button.bpv-gl-btn {
    width: 44px !important; height: 44px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
    background: transparent !important; opacity: 0.7 !important; transition: all 0.2s !important;
}
body .bpv-wrapper button.bpv-gl-btn:hover {
    opacity: 1 !important; color: var(--bpv-accent) !important; transform: scale(1.15) !important; box-shadow: none !important; background: transparent !important;
}
body .bpv-wrapper button.bpv-gl-btn svg { width: 22px !important; height: 22px !important; display: block !important; margin: 0 !important; }

.bpv-feedback-overlay { position: absolute !important; top: 80px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 80 !important; background: rgba(10, 10, 10, 0.8) !important; backdrop-filter: blur(10px) !important; padding: 10px 24px !important; border-radius: 20px !important; font-size: 14px !important; font-weight: 800 !important; color: white !important; border: 1px solid var(--bpv-border) !important; display: flex !important; align-items: center !important; gap: 8px !important; opacity: 0 !important; transition: opacity 0.2s !important; pointer-events: none !important; }
.bpv-feedback-overlay.visible { opacity: 1 !important; }
.bpv-feedback-overlay svg { color: var(--bpv-accent) !important; width: 20px !important; height: 20px !important; }

/* -----------------------------------------------------------------
   MOBILE OPTIMIZATIONS (4:5 Video Native Ratio)
----------------------------------------------------------------- */
@media (max-width: 768px) {
    .bpv-video-section {
        aspect-ratio: 4 / 5 !important;
    }
    
    /* Footer Buttons Force 1 Row */
    .bpv-custom-video-footer {
        padding: 8px !important;
        gap: 4px !important;
    }
    body .bpv-wrapper button.bpv-footer-btn, 
    body .bpv-wrapper a.bpv-footer-btn {
        font-size: 13px !important;
        padding: 12px 4px !important;
    }
    
    /* Inline Modal Stacking */
    .bpv-inline-modal-pad { padding: 32px 16px 16px !important; }
    .bpv-desktop-split { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
    .bpv-split-left { text-align: center !important; }
    .bpv-value-prop { font-size: 1.5rem !important; text-align: center !important;}
    .bpv-amount-large { text-align: center !important; margin-top: 8px !important; font-size: 32px !important;}
    .bpv-instruction-text { text-align: center !important; }
    .bpv-pay-grid { flex-direction: column !important; }
    .bpv-qr-box { margin: 0 auto !important; width: 120px !important; height: 120px !important; }

    /* Gallery */
    .bpv-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    body .bpv-wrapper button.bpv-gl-close { top: 16px !important; right: 16px !important; width: 44px !important; height: 44px !important; }
    .bpv-gl-dock { bottom: 20px !important; padding: 8px 16px !important; gap: 12px !important; }
    body .bpv-wrapper button.bpv-gl-btn { width: 38px !important; height: 38px !important; }
}
@media (max-width: 480px) {
    .bpv-photo-grid { grid-template-columns: 1fr !important; }
}