/* css/cross-sell.css -- Elevation cross-sell prompt on recipe detail pages (Phase 24) */

/* Elevation cross-sell prompt -- appears inline after save action */
.elevation-cross-sell {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--accent-lighter, #eff6ff);
    border: 1px solid var(--accent-light, #dbeafe);
    border-radius: var(--radius-md, 8px);
    animation: crossSellSlideIn 0.3s ease-out;
}

.elevation-cross-sell__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    flex: 1;
}

.elevation-cross-sell__icon {
    font-size: 1.2rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.elevation-cross-sell__text {
    font-family: var(--font-sans);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--text-color, #1f2937);
    margin: 0;
}

.elevation-cross-sell__link {
    color: var(--accent-color, #2563eb);
    font-weight: 600;
    text-decoration: none;
}

.elevation-cross-sell__link:hover {
    text-decoration: underline;
}

.elevation-cross-sell__close {
    background: none;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 var(--space-1, 4px);
    line-height: 1;
    flex-shrink: 0;
}

.elevation-cross-sell__close:hover {
    color: var(--text-color, #1f2937);
}

@keyframes crossSellSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode -- explicit data-theme attribute */
:root[data-theme="dark"] .elevation-cross-sell {
    background: var(--accent-light, #1e3a5f);
    border-color: var(--accent-hover, #1d4ed8);
}

:root[data-theme="dark"] .elevation-cross-sell__text {
    color: var(--text-color, #f5f5f5);
}

:root[data-theme="dark"] .elevation-cross-sell__link {
    color: var(--accent-color, #60a5fa);
}

:root[data-theme="dark"] .elevation-cross-sell__close {
    color: var(--text-secondary, #d1d5db);
}

:root[data-theme="dark"] .elevation-cross-sell__close:hover {
    color: var(--text-color, #f5f5f5);
}

/* Dark mode -- prefers-color-scheme auto-detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .elevation-cross-sell {
        background: var(--accent-light, #1e3a5f);
        border-color: var(--accent-hover, #1d4ed8);
    }

    :root:not([data-theme]) .elevation-cross-sell__text {
        color: var(--text-color, #f5f5f5);
    }

    :root:not([data-theme]) .elevation-cross-sell__link {
        color: var(--accent-color, #60a5fa);
    }

    :root:not([data-theme]) .elevation-cross-sell__close {
        color: var(--text-secondary, #d1d5db);
    }

    :root:not([data-theme]) .elevation-cross-sell__close:hover {
        color: var(--text-color, #f5f5f5);
    }
}