/* ═══════════════════════════════════════════════════════════════
   JeevanDrishti — Frontend Gallery Styles v1.1
   Bulletproof against theme overrides
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Scope ───────────────────────────────────────────── */
.jdg-gallery-root,
.jdg-gallery-root *,
.jdg-gallery-root *::before,
.jdg-gallery-root *::after {
    box-sizing: border-box !important;
}
.jdg-gallery-root button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}
.jdg-gallery-root img {
    max-width: 100%;
    height: auto;
    border: none !important;
    box-shadow: none !important;
}

/* ─── CSS Variables (Light Mode) ──────────────────────────────── */
.jdg-gallery-root {
    --jdg-accent: #E8691F;
    --jdg-accent-hover: #C04A12;
    --jdg-accent-soft: rgba(232,105,31,0.1);
    --jdg-accent-glow: rgba(232,105,31,0.25);
    --jdg-bg: #FAF6F0;
    --jdg-surface: #FFFFFF;
    --jdg-surface-hover: #FDFBF7;
    --jdg-border: #E0D2C0;
    --jdg-border-hover: #E8691F;
    --jdg-text: #3D2E1E;
    --jdg-text-mid: #6B5240;
    --jdg-text-soft: #A08668;
    --jdg-text-whisper: #D0BCA4;
    --jdg-overlay: rgba(60,30,10,0.7);
    --jdg-radius: 12px;
    --jdg-gap: 10px;
    --jdg-shadow: 0 2px 12px rgba(61,46,30,0.08);
    --jdg-shadow-hover: 0 12px 40px rgba(192,74,18,0.12);
    --jdg-transition: cubic-bezier(0.16, 1, 0.3, 1);
    --jdg-columns: 3;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--jdg-text) !important;
    line-height: 1.5 !important;
    position: relative;
}

/* ─── Dark Mode ───────────────────────────────────────────────── */
.jdg-gallery-root.jdg-dark {
    --jdg-bg: #161310;
    --jdg-surface: #221E18;
    --jdg-surface-hover: #2C261E;
    --jdg-border: #3E3528;
    --jdg-border-hover: #E8691F;
    --jdg-text: #F0E8DC;
    --jdg-text-mid: #C0A888;
    --jdg-text-soft: #887460;
    --jdg-text-whisper: #4A3E30;
    --jdg-overlay: rgba(8,6,4,0.8);
    --jdg-shadow: 0 2px 12px rgba(0,0,0,0.25);
    --jdg-shadow-hover: 0 12px 40px rgba(0,0,0,0.35);
    --jdg-accent-soft: rgba(232,105,31,0.15);
}

/* ─── Gallery Title ───────────────────────────────────────────── */
.jdg-gallery-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--jdg-text) !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em;
}

/* ─── Error State ─────────────────────────────────────────────── */
.jdg-error {
    padding: 24px !important;
    background: #FFF3CD !important;
    border: 1px solid #FFDA6A !important;
    border-radius: var(--jdg-radius) !important;
    color: #664D03 !important;
    font-size: 0.9rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════════════════════ */
.jdg-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 0 !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
.jdg-toolbar-left,
.jdg-toolbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Breadcrumbs */
.jdg-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}
.jdg-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: var(--jdg-surface) !important;
    border: 1px solid var(--jdg-border) !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--jdg-text-mid) !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
.jdg-breadcrumb:hover {
    color: var(--jdg-accent) !important;
    border-color: var(--jdg-accent) !important;
}
.jdg-breadcrumb svg {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6;
    flex-shrink: 0;
}
.jdg-breadcrumb-sep { color: var(--jdg-text-whisper) !important; font-size: 0.85rem !important; padding: 0 2px; }
.jdg-breadcrumb.active {
    color: var(--jdg-accent) !important;
    border-color: var(--jdg-accent) !important;
    background: var(--jdg-accent-soft) !important;
}

/* File count */
.jdg-file-count {
    font-size: 0.78rem !important;
    color: var(--jdg-text-soft) !important;
    padding: 5px 12px !important;
    background: var(--jdg-accent-soft) !important;
    border-radius: 20px !important;
}

/* Search */
.jdg-search {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: var(--jdg-surface) !important;
    border: 1.5px solid var(--jdg-border) !important;
    border-radius: 10px !important;
    transition: all 0.25s !important;
}
.jdg-search:focus-within {
    border-color: var(--jdg-accent) !important;
    box-shadow: 0 0 0 3px var(--jdg-accent-glow) !important;
}
.jdg-search svg { width: 16px !important; height: 16px !important; color: var(--jdg-text-soft) !important; flex-shrink: 0 !important; }
.jdg-search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 0.85rem !important;
    color: var(--jdg-text) !important;
    width: 160px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.jdg-search-input::placeholder { color: var(--jdg-text-whisper) !important; }

/* ─── Text Icon Helper ─────────────────────────────────────────── */
.jdg-gallery-root .jdg-ico {
    font-size: 1rem !important;
    line-height: 1 !important;
    display: inline-block !important;
}
.jdg-gallery-root .jdg-btn-label {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ─── Layout Switcher (FIXED) ─────────────────────────────────── */
.jdg-layout-switcher {
    display: flex !important;
    background: var(--jdg-surface) !important;
    border: 1.5px solid var(--jdg-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.jdg-layout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--jdg-border) !important;
    color: var(--jdg-text-soft) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.jdg-layout-btn:last-child { border-right: none !important; }
.jdg-layout-btn svg { width: 18px !important; height: 18px !important; display: block !important; }
.jdg-layout-btn:hover { color: var(--jdg-accent) !important; background: var(--jdg-accent-soft) !important; }
.jdg-layout-btn.active { background: var(--jdg-accent) !important; color: #FFFFFF !important; }
.jdg-layout-btn span { font-size: 1.1rem !important; line-height: 1 !important; }

/* ─── Dark Mode Toggle (FIXED) ────────────────────────────────── */
.jdg-darkmode-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--jdg-surface) !important;
    border: 1.5px solid var(--jdg-border) !important;
    border-radius: 10px !important;
    color: var(--jdg-text-mid) !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
}
.jdg-darkmode-toggle:hover {
    color: var(--jdg-accent) !important;
    border-color: var(--jdg-accent) !important;
    background: var(--jdg-accent-soft) !important;
}
.jdg-darkmode-toggle svg { width: 18px !important; height: 18px !important; display: block !important; }
.jdg-darkmode-toggle .jdg-sun,
.jdg-darkmode-toggle .jdg-moon { font-size: 1.15rem !important; line-height: 1 !important; }
.jdg-gallery-root:not(.jdg-dark) .jdg-darkmode-toggle .jdg-sun { display: none !important; }
.jdg-gallery-root:not(.jdg-dark) .jdg-darkmode-toggle .jdg-moon { display: inline-block !important; }
.jdg-gallery-root.jdg-dark .jdg-darkmode-toggle .jdg-sun { display: inline-block !important; }
.jdg-gallery-root.jdg-dark .jdg-darkmode-toggle .jdg-moon { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   FOLDER CARDS
   ═══════════════════════════════════════════════════════════════ */
.jdg-folders-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--jdg-gap) !important;
    margin-bottom: 24px !important;
}
.jdg-folders-grid:empty { display: none !important; }
.jdg-folder-card {
    background: var(--jdg-surface) !important;
    border: 1px solid var(--jdg-border) !important;
    border-radius: var(--jdg-radius) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.4s var(--jdg-transition) !important;
}
.jdg-folder-card:hover { transform: translateY(-4px) !important; box-shadow: var(--jdg-shadow-hover) !important; border-color: var(--jdg-border-hover) !important; }
.jdg-folder-cover { width: 100% !important; height: 140px !important; background: linear-gradient(150deg, var(--jdg-accent-soft), var(--jdg-surface)) !important; overflow: hidden !important; }
.jdg-folder-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.6s var(--jdg-transition) !important; }
.jdg-folder-card:hover .jdg-folder-cover img { transform: scale(1.06) !important; }
.jdg-folder-cover-empty { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 2rem !important; opacity: 0.2; }
.jdg-folder-info { padding: 14px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.jdg-folder-name { font-size: 0.88rem !important; font-weight: 700 !important; color: var(--jdg-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.jdg-folder-count { font-size: 0.72rem !important; font-weight: 600 !important; color: var(--jdg-accent) !important; background: var(--jdg-accent-soft) !important; padding: 4px 12px !important; border-radius: 20px !important; }

/* ═══════════════════════════════════════════════════════════════
   GALLERY GRID
   ═══════════════════════════════════════════════════════════════ */
.jdg-grid { width: 100% !important; }
.jdg-layout-masonry { columns: var(--jdg-columns) !important; column-gap: var(--jdg-gap) !important; }
.jdg-layout-grid { display: grid !important; grid-template-columns: repeat(var(--jdg-columns), 1fr) !important; gap: var(--jdg-gap) !important; }

.jdg-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--jdg-radius) !important;
    background: var(--jdg-surface) !important;
    cursor: pointer !important;
    transition: transform 0.4s var(--jdg-transition), box-shadow 0.4s ease !important;
}
.jdg-layout-masonry .jdg-item { break-inside: avoid !important; margin-bottom: var(--jdg-gap) !important; display: inline-block !important; width: 100% !important; }
.jdg-layout-grid .jdg-item { aspect-ratio: 1 !important; }
.jdg-item:hover { transform: translateY(-3px) !important; box-shadow: var(--jdg-shadow-hover) !important; z-index: 2 !important; }

.jdg-item-img { width: 100% !important; height: auto !important; display: block !important; transition: transform 0.7s var(--jdg-transition) !important; background: var(--jdg-accent-soft) !important; }
.jdg-layout-grid .jdg-item-img { position: absolute !important; inset: 0 !important; height: 100% !important; object-fit: cover !important; }
.jdg-item:hover .jdg-item-img { transform: scale(1.05) !important; }

.jdg-item-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(30,15,5,0.75) 0%, transparent 60%) !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 16px !important;
    pointer-events: none !important;
}
.jdg-item:hover .jdg-item-overlay { opacity: 1 !important; }
.jdg-item-name { color: #FFFFFF !important; font-size: 0.82rem !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jdg-item-meta { color: rgba(255,255,255,0.6) !important; font-size: 0.7rem !important; margin-top: 2px !important; }

.jdg-video-badge {
    position: absolute !important; top: 12px !important; right: 12px !important;
    width: 38px !important; height: 38px !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    z-index: 3 !important;
}
.jdg-item:hover .jdg-video-badge { background: var(--jdg-accent) !important; }
.jdg-video-badge span { color: #FFFFFF !important; font-size: 0.85rem !important; line-height: 1 !important; }

.jdg-item-download {
    position: absolute !important; top: 12px !important; left: 12px !important;
    width: 36px !important; height: 36px !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    border: none !important; border-radius: 10px !important;
    color: white !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; opacity: 0 !important; z-index: 3 !important;
    transition: all 0.3s var(--jdg-transition) !important;
}
.jdg-item-download span { color: #FFFFFF !important; font-size: 1.1rem !important; line-height: 1 !important; font-weight: 700 !important; }
.jdg-item:hover .jdg-item-download { opacity: 1 !important; }
.jdg-item-download:hover { background: var(--jdg-accent) !important; }

/* Loading */
.jdg-item-skeleton {
    border-radius: var(--jdg-radius) !important;
    background: linear-gradient(110deg, var(--jdg-surface) 40%, var(--jdg-accent-soft) 50%, var(--jdg-surface) 60%) !important;
    background-size: 200% 100% !important;
    animation: jdg-shimmer 1.5s linear infinite !important;
}
.jdg-layout-masonry .jdg-item-skeleton { break-inside: avoid; margin-bottom: var(--jdg-gap); display: inline-block; width: 100%; }
.jdg-layout-grid .jdg-item-skeleton { aspect-ratio: 1; }
@keyframes jdg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Footer */
.jdg-footer { text-align: center !important; padding: 24px 0 !important; }
.jdg-loading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; color: var(--jdg-text-soft) !important; font-size: 0.85rem !important; }
.jdg-loading[hidden] { display: none !important; }
.jdg-spinner { width: 22px !important; height: 22px !important; border: 2.5px solid var(--jdg-border) !important; border-top-color: var(--jdg-accent) !important; border-radius: 50% !important; animation: jdg-spin 0.7s linear infinite !important; }
@keyframes jdg-spin { to { transform: rotate(360deg); } }
.jdg-load-more {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 12px 32px !important; background: var(--jdg-surface) !important;
    border: 1.5px solid var(--jdg-border) !important; border-radius: 10px !important;
    font-size: 0.88rem !important; font-weight: 600 !important; color: var(--jdg-text-mid) !important;
    cursor: pointer !important; transition: all 0.3s var(--jdg-transition) !important;
}
.jdg-load-more:hover { border-color: var(--jdg-accent) !important; color: var(--jdg-accent) !important; }
.jdg-empty { text-align: center !important; padding: 60px 20px !important; color: var(--jdg-text-soft) !important; }
.jdg-empty-icon { font-size: 3rem !important; opacity: 0.3; margin-bottom: 12px !important; }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX (COMPLETELY REBUILT)
   ═══════════════════════════════════════════════════════════════ */
.jdg-lightbox {
    position: fixed !important; inset: 0 !important; z-index: 999999 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease !important;
}
.jdg-lightbox.open { opacity: 1 !important; pointer-events: all !important; }
.jdg-lightbox-backdrop {
    position: absolute !important; inset: 0 !important;
    background: rgba(0, 0, 0, 0.93) !important;
    backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
}
.jdg-lightbox-content {
    position: relative !important; z-index: 2 !important;
    width: 100% !important; height: 100% !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
}

.jdg-lb-media { max-width: 90vw !important; max-height: 78vh !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.jdg-lb-media img { max-width: 90vw !important; max-height: 78vh !important; object-fit: contain !important; border-radius: 6px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; }
.jdg-lb-media iframe { width: min(90vw, 960px) !important; height: min(78vh, 540px) !important; border: none !important; border-radius: 6px !important; }

/* ─── Close Button ────────────────────────────────────────────── */
.jdg-lb-close {
    position: absolute !important;
    top: 16px !important; right: 16px !important;
    width: 48px !important; height: 48px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.25s !important;
}
.jdg-lb-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.jdg-lb-close span {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    font-weight: 300 !important;
}

/* ─── Nav Arrows ──────────────────────────────────────────────── */
.jdg-lb-prev,
.jdg-lb-next {
    position: absolute !important;
    top: 50% !important; transform: translateY(-50%) !important;
    width: 52px !important; height: 52px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.25s !important;
}
.jdg-lb-prev { left: 20px !important; }
.jdg-lb-next { right: 20px !important; }
.jdg-lb-prev:hover,
.jdg-lb-next:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-50%) scale(1.06) !important;
}
.jdg-lb-prev span,
.jdg-lb-next span {
    font-size: 2rem !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    font-weight: 300 !important;
}

/* ─── Info Bar ────────────────────────────────────────────────── */
.jdg-lb-info {
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 24px 28px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, transparent 100%) !important;
    z-index: 5 !important;
}
.jdg-lb-name {
    color: #FFFFFF !important; font-size: 0.95rem !important; font-weight: 600 !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5) !important;
}
.jdg-lb-actions { display: flex !important; align-items: center !important; gap: 14px !important; }

/* ─── Download Button in Lightbox ─────────────────────────────── */
.jdg-lb-download {
    width: 44px !important; height: 44px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.25s !important;
}
.jdg-lb-download:hover {
    background: var(--jdg-accent) !important;
    border-color: var(--jdg-accent) !important;
}
.jdg-lb-download span {
    font-size: 1.4rem !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
.jdg-lb-counter { color: rgba(255, 255, 255, 0.6) !important; font-size: 0.85rem !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.jdg-item, .jdg-folder-card { animation: jdg-fade-in 0.5s var(--jdg-transition) both; }
@keyframes jdg-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.jdg-item { animation-delay: calc(var(--jdg-index, 0) * 40ms); }
.jdg-folder-card { animation-delay: calc(var(--jdg-index, 0) * 50ms); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) { .jdg-gallery-root { --jdg-columns: 3; } }
@media (max-width: 768px) {
    .jdg-gallery-root { --jdg-columns: 2; }
    .jdg-search-input { width: 120px !important; }
    .jdg-folders-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
    .jdg-folder-cover { height: 100px !important; }
    .jdg-lb-prev { left: 10px !important; }
    .jdg-lb-next { right: 10px !important; }
    .jdg-lb-prev, .jdg-lb-next { width: 44px !important; height: 44px !important; }
    .jdg-lb-close { width: 42px !important; height: 42px !important; }
}
@media (max-width: 480px) {
    .jdg-gallery-root { --jdg-columns: 2; }
    .jdg-toolbar-right .jdg-search { display: none !important; }
    .jdg-lb-prev, .jdg-lb-next { width: 40px !important; height: 40px !important; }
}
@media print {
    .jdg-toolbar, .jdg-lightbox, .jdg-footer, .jdg-item-overlay, .jdg-darkmode-toggle { display: none !important; }
}