/* ==========================================
   1. BRAND IDENTITY (60-30-10 Rule)
   ========================================== */
:root {
    --primary: #FFFFFF;    /* 60% - Base */
    --secondary: #02B150;  /* 30% - Brand Green */
    --accent: #FFD700;     /* 10% - Action Yellow */
}

body { 
    background-color: #F9FAFB; 
    font-family: 'Inter', sans-serif; 
}

/* Color Utility Classes */
.brand-text { color: var(--secondary); }
.secondary-bg { background-color: var(--secondary); }
.accent-bg { background-color: var(--accent); }

/* ==========================================
   2. RESPONSIVE LAYOUT (Desktop vs Mobile)
   ========================================== */
@media (min-width: 751px) {
    .main-wrapper { display: flex; min-height: 100vh; }
    .brand-side { 
        width: 35%; 
        background-color: var(--secondary); 
        display: flex !important; 
        flex-direction: column;
        justify-content: center;
        padding: 60px;
        position: fixed;
        height: 100vh;
        color: white;
    }
    .content-side { 
        width: 65%; 
        margin-left: 35%; 
        background-color: #F9FAFB;
        display: flex;
        justify-content: center;
    }
    .app-container { width: 100%; max-width: 700px; }
    nav.fixed-bottom { width: 65%; left: 35% !important; }
}

@media (max-width: 750px) {
    .brand-side { display: none; }
    .content-side { width: 100%; }
    .app-container { width: 100%; max-width: 450px; margin: 0 auto; background: white; min-height: 100vh;}
    nav.fixed-bottom { width: 100%; left: 0; max-width: 450px; margin: 0 auto; right: 0;}
}

/* ==========================================
   3. CUSTOM UI COMPONENTS
   ========================================== */

/* Store Status Toggle */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--secondary); }
input:checked + .slider:before { transform: translateX(20px); }

/* Animation for Live Orders */
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}