/* =============================================================
   ISO 1200 Feed Teaser — teaser.css
   Version: 5.1.1

   STRUCTURE:
   1. Base locked card styles (shared by all circles)
   2. Per-circle banner content — edit wording here
   3. Hover effects
   ============================================================= */
   
/* ── 1. Base: locked card wrapper ───────────────────────────── */

.iso-teaser-locked {
    position: relative !important;
    cursor: default !important; 
    overflow: hidden !important;
}

/* Blur everything inside the card */
.iso-teaser-locked > * {
    filter: grayscale(50%) blur(6px) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Shared badge styles */
.iso-teaser-locked::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffcc006b;
    color: #494949;
    
    /* 1. LAYOUT: Increase left padding to accommodate the icon */
    padding: 18px 18px 18px 38px; 
    
    font-weight: 500;
    font-size: 16px;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    pointer-events: none;
    font-family: 'Figtree', sans-serif;

    /* 2. ICON: Inject the SureDash SVG as a background image */
    /* Note: I've encoded the SVG and set the stroke color to #494949 to match your text */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23494949' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center; /* Position the lock 20px from the left */
    background-size: 18px; /* Scale the lock icon */
	z-index: 1 !important;
}


/* ── 2. Per-circle badge wording ────────────────────────────── */

/* 
 * NOTE: Removed the 🔒 from the text. 
 * The icon is now automatically handled by the base style above.
 */

.iso-teaser-locked.iso-circle-one-light-one-wall-paid::after {
    content: 'One Light. One Wall. Member Content';
}

/* Example for second circle */
.iso-teaser-locked.iso-circle-second-circle-slug::after {
    content: 'Second Circle Member Content';
}