/* Global Styling and Neo-Brutalist Utilities for Space Print 3D */

/* Theme & Layout Settings */
body {
    background-color: #050505;
    color: #F4F4F5;
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading, .font-display {
    font-family: 'Bungee', cursive;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #1A1A24;
    border: 2px solid #05D9E8;
}
::-webkit-scrollbar-thumb:hover {
    background: #fa2e6f;
}

/* Shared Neo-Brutalist Utility Classes */
.neo-border {
    border: 2px solid #05D9E8;
}
.neo-border-primary {
    border: 2px solid #FF2A6D;
}
.neo-shadow {
    box-shadow: 6px 6px 0px #05D9E8;
}
.neo-shadow-hover:hover {
    box-shadow: 8px 8px 0px #05D9E8;
    transform: translate(-2px, -2px);
}

/* Shared Brutalist Buttons */
.btn-primary {
    background-color: #FF2A6D;
    color: #F4F4F5;
    border: 2px solid #F4F4F5;
    box-shadow: 6px 6px 0px #05D9E8;
    transition: all 0.2s ease-in-out;
    font-family: 'Bungee', cursive;
    text-transform: uppercase;
}
.btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #05D9E8;
}
.btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #05D9E8;
}

/* Home / Landing Page Specific */
.service-card {
    background-color: #1A1A24;
    border: 2px solid #05D9E8;
    transition: all 0.3s ease;
    box-shadow: 6px 6px 0px transparent;
}
.service-card:hover {
    box-shadow: 10px 10px 0px #FF2A6D;
    transform: translateY(-4px);
}

.step-card {
    background-color: #1A1A24;
    border: 2px solid #8D8D99;
    position: relative;
}
.step-number {
    font-family: 'Bungee', cursive;
    color: #FFC800;
    font-size: 4rem;
    position: absolute;
    top: -25px;
    left: -10px;
    text-shadow: 4px 4px 0px #050505, -2px -2px 0px #050505;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.fab-whatsapp {
    background-color: #25D366;
    color: #050505;
    border: 2px solid #050505;
    box-shadow: 4px 4px 0px #050505;
    transition: all 0.2s;
}
.fab-whatsapp:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #050505;
}

/* Product Detail Specific */
.brutal-border {
    border: 2px solid #05D9E8;
}
.brutal-border-primary {
    border: 2px solid #FF2A6D;
}
.brutal-btn {
    transition: all 0.2s ease-in-out;
}
.brutal-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #05D9E8;
}
.brutal-btn.primary:hover {
    box-shadow: 8px 8px 0px #FF2A6D;
}

/* Order Wizard (wizard.html) Stepper Content Toggle */
.step-content { 
    display: none; 
}
.step-content.active { 
    display: block; 
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(-6deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
}
@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) rotate(12deg); }
    50% { transform: translateY(15px) rotate(8deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}
@keyframes slideIn {
    0% { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out forwards;
}

.error-shake {
    animation: shake 300ms ease-in-out;
    border-color: #FF2A6D !important;
}

/* Header Drawer Transitions removed - using tailwind overlay now */

/* Custom border-only pulse for low stock alert */
@keyframes border-pulse-red {
    0%, 100% { 
        border-color: rgba(239, 68, 68, 0.3);
        box-shadow: 0 0 0px transparent;
    }
    50% { 
        border-color: rgba(255, 42, 109, 1);
        box-shadow: 0 0 4px rgba(255, 42, 109, 0.4);
    }
}
.animate-border-pulse {
    animation: border-pulse-red 1.5s infinite ease-in-out;
}