/* Modern Feature Unavailable Page - Matching Homepage Theme */

.container {
    @apply min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50
    flex items-center justify-center px-4;
}

.content {
    @apply max-w-2xl w-full text-center;
}

.iconContainer {
    @apply flex justify-center mb-8;
}

.icon {
    @apply w-24 h-24 text-purple-600;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.title {
    @apply text-4xl md:text-5xl font-extrabold mb-6 leading-tight;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.description {
    @apply text-xl text-gray-600 mb-8 leading-relaxed;
}

.messageBox {
    @apply bg-amber-50 border border-amber-200 rounded-2xl p-6 mb-8
    flex items-center justify-center space-x-3;
}

.alertIcon {
    @apply w-6 h-6 text-amber-600;
}

.message {
    @apply text-amber-800 font-semibold;
}

.alternativesBox {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 
    border border-gray-100 mb-8;
}

.alternativesTitle {
    @apply text-2xl font-bold text-gray-900 mb-6;
}

.alternativesList {
    @apply text-left space-y-3 text-gray-700;
}

.alternativesList li {
    @apply flex items-center;
}

.alternativesList li::before {
    content: "✓";
    @apply text-purple-600 font-bold mr-3;
}

.backButton {
    @apply flex items-center justify-center px-8 py-4 
    bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold
    rounded-xl hover:from-purple-700 hover:to-indigo-700 
    shadow-lg hover:shadow-xl transition-all duration-300
    transform hover:-translate-y-0.5
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

.backIcon {
    @apply w-5 h-5 mr-2;
}

/* Animation for icon */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .title {
        @apply text-3xl;
    }

    .description {
        @apply text-lg;
    }

    .alternativesBox {
        @apply p-6;
    }

    .backButton {
        @apply px-6 py-3 text-sm;
    }
}