/* === TIER GATING STYLES === */

/* Blur overlay for locked features */
.feature-locked {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.gate-title {
    position: relative;
    z-index: 5;
}

.gate-title .card-dark-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.blur-overlay {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
}

.lock-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    z-index: 10;
    cursor: pointer;
    padding: var(--space-4) var(--space-6);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(4px);
    transition: all var(--transition-normal);
}

.lock-badge:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translate(-50%, -50%) scale(1.02);
}

.lock-badge i {
    font-size: 1.5rem;
    color: var(--accent);
}

.lock-badge span {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

/* Upgrade prompt button */
.upgrade-cta {
    display: inline-block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: #000;
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.upgrade-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}