@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap');

:root {
    --primary: #f97316;
    --bg-main: #fcfaf7;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-main);
    color: #1f2937;
    overflow-x: hidden;
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(249, 115, 22, 0.1);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ingredient-btn.selected {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

#ai-modal.active { opacity: 1; pointer-events: auto; }
#ai-modal.active .ai-content-panel { transform: translateX(0); }

.ai-content-panel {
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.shimmer {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.recipe-rich-text h4 { font-weight: 700; color: #f97316; margin-top: 1.5rem; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.recipe-rich-text ul { list-style-type: none; padding-left: 0; }
.recipe-rich-text li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; }
.recipe-rich-text li::before { content: "•"; color: #f97316; position: absolute; left: 0; font-weight: bold; }