@tailwind base;
@tailwind components;
@tailwind utilities;

/* Sortable styles for drag-and-drop */
.sortable-ghost {
    @apply opacity-50 bg-gray-100;
}

.sortable-chosen {
    @apply cursor-grabbing;
}

.sortable-drag {
    @apply opacity-75 shadow-lg;
}

/* Food pattern background for auth pages */
.food-pattern-bg {
    background-color: #fef7ed;
    /* Orange-50 background */
    background-image:
        radial-gradient(circle at 20% 80%, rgba(251, 146, 60, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(251, 146, 60, 0.1) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}

/* Animated food emoji rows */
.food-pattern-bg::before {
    content: "🍕 🍔 🍟 🥗 🍜 🍛 🍝 🍤 🍣 🥘 🌮 🌯 🥙 🍖 🍗 🥩 🍳 🥞 🧇 🥯 🍞 🥐 🥖 🧀 🥓 🥨 🍕 🍔 🍟 🥗 🍜 🍛 🍝 🍤 🍣 🥘 🌮 🌯 🥙 🍖 🍗 🥩 🍳 🥞 🧇 🥯 🍞 🥐 🥖 🧀 🥓 🥨 🍕 🍔 🍟 🥗 🍜 🍛 🍝 🍤 🍣 🥘 🌮 🌯 🥙 🍖 🍗 🥩 🍳 🥞 🧇 🥯 🍞 🥐 🥖 🧀 🥓 🥨";
    position: absolute;
    top: 10%;
    left: 0;
    font-size: 28px;
    opacity: 0.12;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    animation: floatRight 35s linear infinite;
}

.food-pattern-bg::after {
    content: "🥪 🌭 🍿 🥜 🌰 🥔 🍠 🥕 🌽 🥒 🥬 🥦 🧄 🧅 🍄 🥝 🍅 🥑 🍆 🥒 🌶️ 🫑 🥭 🍍 🥥 🥨 🥪 🌭 🍿 🥜 🌰 🥔 🍠 🥕 🌽 🥒 🥬 🥦 🧄 🧅 🍄 🥝 🍅 🥑 🍆 🥒 🌶️ 🫑 🥭 🍍 🥥 🥨 🥪 🌭 🍿 🥜 🌰 🥔 🍠 🥕 🌽 🥒 🥬 🥦 🧄 🧅 🍄 🥝 🍅 🥑 🍆 🥒 🌶️ 🫑 🥭 🍍 🥥 🥨";
    position: absolute;
    top: 25%;
    right: 0;
    font-size: 28px;
    opacity: 0.12;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    animation: floatLeft 40s linear infinite;
}

.food-emoji-row {
    position: absolute;
    white-space: nowrap;
    font-size: 28px;
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.food-emoji-row-1::before {
    content: "🍰 🧁 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🎂 🍰 🧁 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🎂 🍰 🧁 🍮 🍭 🍬 🍫 🍰 🧁 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🎂 🍰 🧁 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🎂 🍰 🧁 🍮 🍭 🍬 🍫";
}

.food-emoji-row-1 {
    top: 40%;
    left: 0;
    animation: floatRight 45s linear infinite;
}

.food-emoji-row-2::before {
    content: "🍺 🍻 🥂 🍷 🥃 🍸 🍹 🍾 🧃 🥤 ☕ 🍵 🧋 🥛 🍼 🥤 ☕ 🍵 🧋 🥛 🍼 🥤 ☕ 🍵 🧋 🥛 🍺 🍻 🥂 🍷 🥃 🍸 🍹 🍾 🧃 🥤 ☕ 🍵 🧋 🥛 🍼 🥤 ☕ 🍵 🧋 🥛 🍼 🥤 ☕ 🍵 🧋 🥛";
}

.food-emoji-row-2 {
    top: 55%;
    right: 0;
    animation: floatLeft 38s linear infinite;
}

.food-emoji-row-3::before {
    content: "🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🥑 🍆 🥒 🌶️ 🫑 🥭 🍍 🥥 🥝 🍅 🥑 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🥑 🍆 🥒 🌶️ 🫑 🥭 🍍 🥥 🥝 🍅 🥑";
}

.food-emoji-row-3 {
    top: 15%;
    left: 0;
    animation: floatRight 42s linear infinite;
}

.food-emoji-row-4::before {
    content: "🥘 🍲 🥗 🍿 🧈 🥞 🧇 🥯 🍞 🥐 🥖 🧀 🥚 🍳 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🥪 🌮 🌯 🥘 🍲 🥗 🍿 🧈 🥞 🧇 🥯 🍞 🥐 🥖 🧀 🥚 🍳 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🥪 🌮 🌯";
}

.food-emoji-row-4 {
    top: 45%;
    right: 0;
    animation: floatLeft 37s linear infinite;
}

@keyframes floatRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(calc(100vw + 50%));
    }
}

@keyframes floatLeft {
    0% {
        transform: translateX(calc(100% + 50%));
    }

    100% {
        transform: translateX(-50%);
    }
}

.food-pattern-content {
    position: relative;
    z-index: 1;
}

/* Alternative subtle pattern using CSS gradients */
.food-pattern-subtle {
    background-color: #fef7ed;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(251, 146, 60, 0.05) 0%, transparent 25%),
        radial-gradient(circle at 75% 75%, rgba(251, 146, 60, 0.05) 0%, transparent 25%),
        linear-gradient(45deg, rgba(251, 146, 60, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(251, 146, 60, 0.02) 25%, transparent 25%);
    background-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;
    background-position: 0 0, 30px 30px, 0 0, 15px 15px;
}