/* ============================================================
   BURGERSTACK - Custom Styles
   ============================================================ */

/* Brutalist Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #1c160d; }
::-webkit-scrollbar-thumb { background: #f94406; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #ff6633; }

/* Background pattern */
body.main-page {
    background-color: #fcfaf8;
    background-image: radial-gradient(#d4c5b0 1px, transparent 1px);
    background-size: 20px 20px;
}
body.admin-page {
    background-color: #121212;
    background-image: radial-gradient(#222 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Clip paths */
.clip-diagonal { clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); }
.clip-jagged { clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0% 90%); }

/* Text effects */
.text-stroke-1 {
    -webkit-text-stroke: 1px currentColor;
    color: transparent;
}

/* Rotations */
.rotate-random-1 { transform: rotate(-1deg); }
.rotate-random-2 { transform: rotate(2deg); }
.rotate-random-3 { transform: rotate(-3deg); }

/* Animations */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 20s linear infinite; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-1deg); }
    75% { transform: translateX(4px) rotate(1deg); }
}
.animate-shake { animation: shake 0.4s ease-in-out; }

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.animate-slide-in { animation: slide-in-right 0.3s ease-out; }

@keyframes pulse-border {
    0%, 100% { border-color: #f94406; }
    50% { border-color: #fff; }
}
.animate-pulse-border { animation: pulse-border 1.5s ease-in-out infinite; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.3s ease-out; }

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Notification container */
#notifications {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 400px;
}
#notifications > * { pointer-events: auto; }

/* Admin status dots */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
    display: inline-block;
}
.status-dot.pending { background: #facc15; }
.status-dot.preparing { background: #3b82f6; }
.status-dot.ready { background: #22c55e; }
.status-dot.delivered { background: #6b7280; }
.status-dot.cancelled { background: #ef4444; }

/* Custom checkbox brutalist */
input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 3px solid #000;
    background: #fff;
    cursor: pointer;
    position: relative;
}
input[type="checkbox"]:checked {
    background: #f94406;
}
input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: 900;
    font-size: 14px;
}

/* Cart sidebar transition */
#cart-sidebar {
    transition: transform 0.3s ease-in-out;
}

/* Modal backdrop */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

/* Brutalist input */
.input-brutal {
    background: transparent;
    border: 4px solid #000;
    padding: 12px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.2s;
    border-radius: 0;
}
.input-brutal:focus {
    outline: none;
    background: #f94406;
    border-color: #000;
    color: #000;
}
.input-brutal::placeholder {
    color: #999;
}
.input-brutal:focus::placeholder {
    color: #000;
}

/* Admin inputs (dark mode) */
.input-brutal-dark {
    background: #1a1a1a;
    border: 3px solid #333;
    color: #fff;
    padding: 10px 14px;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    transition: all 0.2s;
    border-radius: 0;
}
.input-brutal-dark:focus {
    outline: none;
    border-color: #f94406;
    background: #222;
}

/* Print styles */
@media print {
    header, footer, #cart-sidebar, #notifications { display: none !important; }
}