/* ================================================================== */
/*  Content Locker – Gallery Blur & Overlay  v2                        */
/*  Targets UAEL (Ultimate Addons for Elementor) gallery items         */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Locked gallery items                                               */
/* ------------------------------------------------------------------ */
body.cl-not-patron .cl-gallery-locked {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

body.cl-not-patron .cl-gallery-locked .uael-grid-img-thumbnail img,
body.cl-not-patron .cl-gallery-locked > .uael-grid-item-content img {
    filter: blur( var(--cl-blur, 14px) );
    transform: scale(1.08);
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Prevent clicking through to lightbox */
body.cl-not-patron .cl-gallery-locked a.uael-grid-img,
body.cl-not-patron .cl-gallery-locked a.uael-grid-gallery-img {
    pointer-events: none;
}

/* Re-enable pointer events on overlay buttons */
body.cl-not-patron .cl-gallery-locked .cl-overlay__btn {
    pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/*  Overlay                                                            */
/* ------------------------------------------------------------------ */
.cl-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cl-bg, rgba(0,0,0,0.72));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

body.cl-not-patron .cl-gallery-locked:hover .cl-overlay,
body.cl-not-patron .cl-gallery-locked:focus-within .cl-overlay {
    opacity: 1;
    pointer-events: auto;
}

.cl-overlay__inner {
    text-align: center;
    color: var(--cl-text, #fff);
    padding: 20px 16px;
    max-width: 90%;
}

.cl-overlay__icon {
    opacity: 0.8;
    margin-bottom: 8px;
    color: var(--cl-text, #fff);
}

.cl-overlay__heading {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.cl-overlay__text {
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.82;
    margin: 0 0 14px;
}

/* ------------------------------------------------------------------ */
/*  Buttons                                                            */
/* ------------------------------------------------------------------ */
.cl-overlay__buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.cl-overlay__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}
.cl-overlay__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.cl-overlay__btn--filled {
    background: var(--cl-accent, #FF424D);
    color: #fff;
    border: none;
}

.cl-overlay__btn--outline {
    background: transparent;
    color: var(--cl-text, #fff);
    border: 1.5px solid rgba(255,255,255,0.45);
}
.cl-overlay__btn--outline:hover {
    border-color: rgba(255,255,255,0.8);
}

/* ------------------------------------------------------------------ */
/*  Patron sees everything clean                                       */
/* ------------------------------------------------------------------ */
body.cl-patron .cl-overlay {
    display: none !important;
}
body.cl-patron .cl-gallery-locked .uael-grid-img-thumbnail img,
body.cl-patron .cl-gallery-locked > .uael-grid-item-content img {
    filter: none !important;
    transform: none !important;
}

/* ------------------------------------------------------------------ */
/*  Mobile: show overlay always (no hover)                             */
/* ------------------------------------------------------------------ */
@media (hover: none) {
    body.cl-not-patron .cl-gallery-locked .cl-overlay {
        opacity: 1;
        pointer-events: auto;
        background: var(--cl-bg, rgba(0,0,0,0.82));
    }
}

/* ------------------------------------------------------------------ */
/*  Compact mode for thin/wide images                                  */
/*  When the gallery item is shorter than 160px, collapse overlay      */
/*  to just the lock icon + small label                                */
/* ------------------------------------------------------------------ */
.cl-overlay--compact .cl-overlay__heading,
.cl-overlay--compact .cl-overlay__text,
.cl-overlay--compact .cl-overlay__buttons {
    display: none !important;
}

.cl-overlay--compact .cl-overlay__inner {
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

.cl-overlay--compact .cl-overlay__icon {
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

/* Compact label shown only in compact mode */
.cl-overlay__compact-label {
    display: none;
}
.cl-overlay--compact .cl-overlay__compact-label {
    display: inline !important;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    color: var(--cl-text, #fff);
}

/* On tap/click in compact mode, show full overlay as a popup */
.cl-overlay--compact.cl-overlay--expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    background: var(--cl-bg, rgba(0,0,0,0.88)) !important;
}
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__heading,
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__text,
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__buttons {
    display: block !important;
}
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__buttons {
    display: flex !important;
}
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__inner {
    flex-direction: column !important;
    padding: 20px 16px !important;
}
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__icon {
    margin-bottom: 8px !important;
}
.cl-overlay--compact.cl-overlay--expanded .cl-overlay__compact-label {
    display: none !important;
}