/* =============================================================================
   Bunny SFW&NSFW Gallery — style.css
   v0.4.0
   ============================================================================= */

/* -----------------------------------------------------------------------------
   WRAPPER
   ----------------------------------------------------------------------------- */

.bunny-gallery-wrapper {
    position: relative;
}

/* -----------------------------------------------------------------------------
   TÍTULO
   ----------------------------------------------------------------------------- */

.bunny-gallery-title {
	margin-top: 1.5em;
    margin-bottom: calc(0.3em + 10px);
    font-size: 1.87em;
    font-weight: 700;
    line-height: 1.3;
}
.bunny-gallery-title--sfw  { color: #1e1e1e; }
.bunny-gallery-title--nsfw { color: #cc1818; }

/* -----------------------------------------------------------------------------
   GRID
   ----------------------------------------------------------------------------- */

.bunny-gallery {
    display: grid;
    gap: 10px;
}

.bunny-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: var( --bunny-ratio, 1 / 1 );
    background: #f0f0f1;
}

.bunny-gallery-item img,
.bunny-gallery-item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: filter 0.3s ease, transform 0.2s ease;
}

.bunny-gallery-wrapper[style*="--bunny-ratio: auto"] .bunny-gallery-item img,
.bunny-gallery-wrapper[style*="--bunny-ratio:auto"]  .bunny-gallery-item img {
    object-fit: contain;
}

.bunny-gallery-item:hover img {
    transform: scale( 1.03 );
}

/* -----------------------------------------------------------------------------
   BLUR NSFW — solo sobre las imágenes, nunca sobre el overlay
   ----------------------------------------------------------------------------- */

.bunny-gallery-wrapper[data-blur="1"].locked .bunny-gallery img {
    filter: blur( var( --bunny-blur, 12px ) );
}

/* -----------------------------------------------------------------------------
   MODO MINIMAL — badge flotante
   ----------------------------------------------------------------------------- */

.bunny-nsfw-badge {
    position:    absolute;
    bottom:      12px;
    left:        50%;
    transform:   translateX( -50% );
    z-index:     20;
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     6px 14px;
    background:  rgba( 0, 0, 0, 0.65 );
    backdrop-filter: blur( 6px );
    -webkit-backdrop-filter: blur( 6px );
    border:      1px solid rgba( 255, 255, 255, 0.2 );
    border-radius: 999px;
    color:       #fff;
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
    white-space: nowrap;
    transition:  background 0.2s ease, transform 0.15s ease;
    /* El badge flota SOBRE las imágenes con blur, no sobre ninguna capa oscura */
}

.bunny-nsfw-badge:hover {
    background: rgba( 0, 0, 0, 0.82 );
    transform:  translateX( -50% ) scale( 1.04 );
}

.bunny-nsfw-badge:focus-visible {
    outline:        2px solid #fff;
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   MODO OVERLAY — capa semitransparente (tipo X/Twitter)
   ----------------------------------------------------------------------------- */

.bunny-nsfw-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    justify-content: center;
    align-items:     center;
    color:           #fff;
    border-radius:   10px;
    z-index:         10;
    transition:      opacity 0.3s ease;
}

.bunny-nsfw-overlay--overlay {
    background: rgba( 0, 0, 0, 0.55 );
    backdrop-filter: blur( 2px );
    -webkit-backdrop-filter: blur( 2px );
}

/* -----------------------------------------------------------------------------
   MODO HIDDEN — capa sólida fuerte
   ----------------------------------------------------------------------------- */

.bunny-nsfw-overlay--hidden {
    background: rgba( 10, 10, 10, 0.92 );
}

/* Caja interior (overlay y hidden) */
.bunny-nsfw-box {
    text-align:    center;
    padding:       24px 20px;
    border-radius: 12px;
    background:    rgba( 255, 255, 255, 0.06 );
    max-width:     320px;
}

.bunny-nsfw-box p {
    margin:      0 0 14px;
    font-size:   14px;
    line-height: 1.5;
}

.bunny-unlock-btn {
    display:       inline-block;
    padding:       9px 20px;
    cursor:        pointer;
    border-radius: 8px;
    border:        1px solid rgba( 255, 255, 255, 0.45 );
    background:    rgba( 255, 255, 255, 0.14 );
    color:         #fff;
    font-size:     13px;
    font-weight:   600;
    transition:    background 0.2s ease, border-color 0.2s ease;
}

.bunny-unlock-btn:hover,
.bunny-unlock-btn:focus-visible {
    background:   rgba( 255, 255, 255, 0.24 );
    border-color: rgba( 255, 255, 255, 0.7 );
    outline:      none;
}

/* -----------------------------------------------------------------------------
   MODAL NSFW (modo minimal)
   ----------------------------------------------------------------------------- */

.bunny-nsfw-modal {
    position: fixed;
    inset:    0;
    z-index:  999999;
    display:  flex;
    align-items:    center;
    justify-content: center;
}

.bunny-nsfw-modal[hidden] {
    display: none;
}

.bnm-backdrop {
    position:   fixed;
    inset:      0;
    background: rgba( 0, 0, 0, 0.6 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    cursor:     pointer;
}

.bnm-dialog {
    position:      relative;
    z-index:       1;
    background:    #fff;
    border-radius: 16px;
    padding:       36px 32px 28px;
    max-width:     360px;
    width:         calc( 100% - 32px );
    box-shadow:    0 24px 80px rgba( 0, 0, 0, 0.3 );
    text-align:    center;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           14px;
    box-sizing:    border-box;
}

.bnm-icon {
    font-size:   40px;
    line-height: 1;
}

.bnm-message {
    margin:      0;
    font-size:   15px;
    line-height: 1.55;
    color:       #2c2c2c;
}

.bnm-btn {
    width:         100%;
    padding:       11px 20px;
    border-radius: 9px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    transition:    background 0.18s ease, transform 0.12s ease;
}

.bnm-btn:active { transform: scale( 0.98 ); }

.bnm-btn--confirm {
    background: #1a1a1a;
    color:      #fff;
}

.bnm-btn--confirm:hover,
.bnm-btn--confirm:focus-visible {
    background: #333;
    outline:    none;
}

.bnm-btn--cancel {
    background: #f0f0f0;
    color:      #555;
}

.bnm-btn--cancel:hover,
.bnm-btn--cancel:focus-visible {
    background: #e2e2e2;
    outline:    none;
}

/* -----------------------------------------------------------------------------
   BOTÓN DE RESET (re-bloquear)
   ----------------------------------------------------------------------------- */

.bunny-nsfw-reset {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    margin-top:    16px;
    padding:       7px 16px;
    background:    transparent;
    border:        1px solid #ccc;
    border-radius: 8px;
    color:         #666;
    font-size:     12px;
    cursor:        pointer;
    transition:    border-color 0.2s ease, color 0.2s ease;
}

.bunny-nsfw-reset:hover {
    border-color: #999;
    color:        #333;
}

.bunny-nsfw-reset[hidden] {
    display: none;
}

/* =============================================================================
   LIGHTBOX v0.4.0 — Rediseño completo premium
   ============================================================================= */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */

.bunny-lightbox-overlay {
    /* dark theme (default) */
    --blb-bg:           rgba( 10, 10, 12, 0.96 );
    --blb-surface:      rgba( 255, 255, 255, 0.07 );
    --blb-surface-hover: rgba( 255, 255, 255, 0.15 );
    --blb-border:       rgba( 255, 255, 255, 0.12 );
    --blb-text:         rgba( 255, 255, 255, 0.90 );
    --blb-text-muted:   rgba( 255, 255, 255, 0.50 );
    --blb-accent:       var( --bunny-accent, #7c6aff );
    --blb-icon-close:   '✕';
    --blb-icon-prev:    '‹';
    --blb-icon-next:    '›';
    --blb-radius-btn:   12px;
    --blb-btn-size:     44px;
    --blb-transition:   0.22s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* light theme */
.bunny-lightbox-overlay[data-theme="light"] {
    --blb-bg:            rgba( 245, 245, 247, 0.97 );
    --blb-surface:       rgba( 0, 0, 0, 0.06 );
    --blb-surface-hover: rgba( 0, 0, 0, 0.12 );
    --blb-border:        rgba( 0, 0, 0, 0.10 );
    --blb-text:          rgba( 10, 10, 20, 0.90 );
    --blb-text-muted:    rgba( 10, 10, 20, 0.45 );
}

/* auto: respeta prefers-color-scheme */
@media ( prefers-color-scheme: light ) {
    .bunny-lightbox-overlay[data-theme="auto"] {
        --blb-bg:            rgba( 245, 245, 247, 0.97 );
        --blb-surface:       rgba( 0, 0, 0, 0.06 );
        --blb-surface-hover: rgba( 0, 0, 0, 0.12 );
        --blb-border:        rgba( 0, 0, 0, 0.10 );
        --blb-text:          rgba( 10, 10, 20, 0.90 );
        --blb-text-muted:    rgba( 10, 10, 20, 0.45 );
    }
}

/* ── Base overlay ──────────────────────────────────────────────────────────── */

body.bunny-lightbox-open { overflow: hidden; }

.bunny-lightbox-overlay {
    position:   fixed;
    inset:      0;
    z-index:    99999;
    /* grid layout: toda la pantalla */
    display:    grid;
    grid-template-rows: auto 1fr auto auto;
    /* top-bar / image / caption / thumbs */
    align-items: center;
}

.bunny-lightbox-overlay[hidden] { display: none; }

/* enter animation */
.bunny-lightbox-overlay:not( [hidden] ) {
    animation: blb-fadein 0.22s ease both;
}
@keyframes blb-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Backdrop ──────────────────────────────────────────────────────────────── */

.blb-backdrop {
    position:   fixed;
    inset:      0;
    background: var( --blb-bg );
    cursor:     zoom-out;
    z-index:    0;
}

/* ── Top bar (close + counter) ─────────────────────────────────────────────── */

.blb-topbar {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         100002;
    height:          60px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 16px;
    pointer-events:  none;
}

/* ── Botón base ────────────────────────────────────────────────────────────── */

.blb-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var( --blb-btn-size );
    height:          var( --blb-btn-size );
    background:      var( --blb-surface );
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    border:          1px solid var( --blb-border );
    border-radius:   var( --blb-radius-btn );
    color:           var( --blb-text );
    cursor:          pointer;
    transition:      background var( --blb-transition ),
                     border-color var( --blb-transition ),
                     box-shadow var( --blb-transition );
    pointer-events:  auto;
    user-select:     none;
    -webkit-user-select: none;
    flex-shrink:     0;
}

.blb-btn:hover {
    background:   var( --blb-surface-hover );
    border-color: rgba( 255, 255, 255, 0.22 );
    box-shadow:   0 0 0 1px rgba( 255, 255, 255, 0.08 );
}

.blb-btn:active {
    background: var( --blb-surface );
    box-shadow: none;
}

.blb-btn:focus-visible {
    outline:        2px solid var( --blb-accent );
    outline-offset: 2px;
}

/* ── Botón cerrar ──────────────────────────────────────────────────────────── */

.blb-close {
    position: fixed;
    top:      10px;
    right:    12px;
    z-index:  100003;
}

.blb-close svg {
    width:  18px;
    height: 18px;
    stroke: var( --blb-text );
    fill:   none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ── Contador (pill) ───────────────────────────────────────────────────────── */

.blb-counter {
    position:        fixed;
    top:             18px;
    left:            50%;
    transform:       translateX( -50% );
    z-index:         100003;
    display:         flex;
    align-items:     center;
    gap:             4px;
    padding:         6px 14px;
    background:      var( --blb-surface );
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    border:          1px solid var( --blb-border );
    border-radius:   999px;
    font-size:       12px;
    font-family:     system-ui, -apple-system, sans-serif;
    font-weight:     600;
    letter-spacing:  0.5px;
    color:           var( --blb-text );
    white-space:     nowrap;
    pointer-events:  none;
}

.blb-counter-current { color: var( --blb-accent ); }
.blb-counter-sep     { color: var( --blb-text-muted ); margin: 0 1px; }
.blb-counter-total   { color: var( --blb-text-muted ); }

/* ── Botones prev / next — FIJOS, no se mueven ─────────────────────────────── */

.blb-prev,
.blb-next {
    position:  fixed;
    top:       50%;
    transform: translateY( -50% );
    z-index:   100002;
    width:     48px;
    height:    48px;
    border-radius: 14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.blb-prev { left:  16px; }
.blb-next { right: 16px; }

.blb-prev svg,
.blb-next svg {
    width:  22px;
    height: 22px;
    stroke: var( --blb-text );
    fill:   none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Área de imagen ────────────────────────────────────────────────────────── */

.blb-img-wrap {
    position:        fixed;
    top:             60px;
    bottom:          0;
    left:            80px;
    right:           80px;
    z-index:         100001;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0;
    pointer-events:  none;
}

/* con thumbnails activos, reducir espacio inferior */
.bunny-lightbox-overlay[data-thumbs="1"] .blb-img-wrap {
    bottom: 110px;
}

/* con caption, ajustar */
.bunny-lightbox-overlay[data-caption]:not( [data-caption=""] ) .blb-img-wrap {
    bottom: 0;
    padding-bottom: 64px;
}

.bunny-lightbox-overlay[data-thumbs="1"][data-caption]:not( [data-caption=""] ) .blb-img-wrap {
    bottom: 110px;
    padding-bottom: 56px;
}

.blb-img {
    display:    block;
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 80px rgba( 0, 0, 0, 0.55 );
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.25s ease;
}

/* ── Caption / metadata ────────────────────────────────────────────────────── */

.blb-caption {
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         100002;
    padding:         14px 80px 16px;
    display:         flex;
    flex-direction:  column;
    gap:             4px;
    pointer-events:  none;
    text-align:      center;
}

.bunny-lightbox-overlay[data-thumbs="1"] .blb-caption {
    bottom: 104px;
}

.blb-caption[hidden] { display: none; }

.blb-caption-title {
    font-size:   14px;
    font-weight: 600;
    font-family: system-ui, -apple-system, sans-serif;
    color:       var( --blb-text );
    margin:      0;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.blb-caption-text {
    font-size:   12px;
    font-family: system-ui, -apple-system, sans-serif;
    color:       var( --blb-text-muted );
    margin:      0;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* full mode: multi-línea */
.blb-caption--full .blb-caption-title,
.blb-caption--full .blb-caption-text {
    white-space: normal;
}

/* ── Thumbnails rail ───────────────────────────────────────────────────────── */

.blb-thumbs {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          100002;
    height:           96px;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    gap:              8px;
    padding:          0 16px 8px;
    overflow-x:       auto;
    overflow-y:       hidden;
    scrollbar-width:  none;
    -ms-overflow-style: none;
    background:       linear-gradient( to top, var( --blb-bg ) 60%, transparent );
    scroll-behavior:  smooth;
}

.blb-thumbs::-webkit-scrollbar { display: none; }

.blb-thumbs[hidden] { display: none; }

.blb-thumb {
    flex-shrink:   0;
    width:         64px;
    height:        64px;
    border-radius: 8px;
    overflow:      hidden;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    border-color var( --blb-transition ),
                   opacity var( --blb-transition ),
                   transform var( --blb-transition );
    opacity:       0.55;
}

.blb-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    pointer-events: none;
    user-select: none;
}

.blb-thumb:hover {
    opacity:   0.85;
    transform: scale( 1.06 );
}

.blb-thumb.is-active {
    border-color: var( --blb-accent );
    opacity:      1;
    transform:    scale( 1.08 );
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
    .blb-prev { left:  8px; width: 40px; height: 40px; }
    .blb-next { right: 8px; width: 40px; height: 40px; }

    .blb-img-wrap {
        left:  56px;
        right: 56px;
        top:   56px;
    }

    .bunny-lightbox-overlay[data-thumbs="1"] .blb-img-wrap {
        bottom: 100px;
    }

    .blb-caption {
        padding: 10px 56px 12px;
        font-size: 12px;
    }

    .blb-thumb {
        width:  52px;
        height: 52px;
    }

    .blb-thumbs {
        height: 80px;
        padding: 0 8px 6px;
    }

    .bunny-lightbox-overlay[data-thumbs="1"] .blb-caption {
        bottom: 86px;
    }
}
 
/* -----------------------------------------------------------------------------
   ASTRA THEME RESET — neutralizar overrides del tema en botones del lightbox
   ----------------------------------------------------------------------------- */
 
.bunny-lightbox-overlay button.blb-btn {
    background-color: var( --blb-surface ) !important;
    border-color:     var( --blb-border )  !important;
    color:            var( --blb-text )    !important;
    padding:          0                    !important;
    font-size:        inherit              !important;
    font-weight:      inherit              !important;
    line-height:      inherit              !important;
    box-shadow:       none                 !important;
    border-style:     solid                !important;
    border-width:     1px                  !important;
}
 
.bunny-lightbox-overlay button.blb-btn:hover {
    background-color: var( --blb-surface-hover )              !important;
    border-color:     rgba( 255, 255, 255, 0.22 )             !important;
    box-shadow:       0 0 0 1px rgba( 255, 255, 255, 0.08 )   !important;
}