/*
 * Premium Blur Overlay Component
 * ================================
 * Reusable blur + upgrade button overlay for non-premium content.
 *
 * Usage:
 *   {% upgrade_button "my-id" title="Custom title" subtitle="Custom subtitle" %}
 *
 *   Inside a blur overlay:
 *   <div class="premium-blur-target premium-blur-target--card">
 *       ...content to blur...
 *       <div class="premium-blur-overlay">
 *           <div class="premium-blur-cta">
 *               {% upgrade_button "my-id" title="Title" subtitle="Subtitle" %}
 *           </div>
 *       </div>
 *   </div>
 *
 * Modifier classes:
 *    .premium-blur-target--card  — card-style blur (backdrop-filter)
 *    .premium-blur-row           — row-level blur (filter: blur)
 */

/* ==============================
   Target: the element whose content gets blurred
   ============================== */
.premium-blur-target {
    position: relative;
    overflow: hidden;
}

/* Card-style blur: backdrop-filter via ::before pseudo-element */
.premium-blur-target--card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.4);
    z-index: 10;
    pointer-events: none;
}

.dark .premium-blur-target--card::before {
    background: rgba(39, 39, 42, 0.4);
}

/* Table-style blur: applied to individual rows/cells */
.premium-blur-row {
    filter: blur(18px);
    position: relative;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* ==============================
   Overlay: positioned on top of blurred content
   ============================== */
.premium-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
}

/* ==============================
   CTA block: title + subtitle + button
   ============================== */
.premium-blur-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    text-align: center;
    padding: 16px;
    max-width: 90%;
    box-sizing: border-box;
}

/* ==============================
   Title & Subtitle
   Rendered by {% upgrade_button %} via .premium-blur-title / .premium-blur-subtitle classes.
   These are the single source of truth for all CTA text styling.
   ============================== */
.premium-blur-title {
    color: var(--Black, #000) !important;
    text-align: center !important;
    font-family: Poppins, sans-serif !important;
    font-size: 15px !important;
    /*font-weight: 500 !important;*/
    line-height: 20px !important;
    margin: 0 !important;
}

.dark .premium-blur-title {
    color: var(--White, #FFF) !important;
}

.premium-blur-subtitle {
    color: var(--Neutral-Gray-2, #656565) !important;
    text-align: center !important;
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    margin: 0 !important;
}

.dark .premium-blur-subtitle {
    color: var(--Neutral-Gray-2, #BABABA) !important;
}

/* ==============================
   Upgrade button overrides inside CTA
   Reset positioning/styles from base .upgrade-to-pro-wrap
   so the button integrates cleanly into the CTA layout.
   Title/subtitle visibility controlled by {% upgrade_button %} tag params.
   ============================== */
.premium-blur-cta .upgrade-to-pro-wrap {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /*gap: 16px !important;*/
}

.mentions .upgrade-to-pro-wrap {
    gap: 8px !important;
}


.premium-blur-cta .upgrade-to-pro-wrap .button {
    white-space: nowrap;
}

/* Also reset .upgrade-to-pro-wrap outside .premium-blur-cta
   when it contains .premium-blur-title (e.g. table overlays) */
.upgrade-to-pro-wrap .premium-blur-title,
.upgrade-to-pro-wrap .premium-blur-subtitle {
    z-index: 1;
}