/* PorosiOnline — Global Styles */
/* Shared between kiosk shop frontend and admin panel */

/* ========================================
   Smooth scrolling
   ======================================== */
html { scroll-behavior: smooth; }

/* ========================================
   Custom scrollbar (thin, subtle)
   ======================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ========================================
   Touch optimizations for kiosk tablets
   ======================================== */
* { -webkit-tap-highlight-color: transparent; }
input, button, select, textarea { font-size: 16px; /* prevents zoom on iOS */ }
button, a { touch-action: manipulation; }

/* Prevent text selection on kiosk (except inputs) */
.kiosk-mode { -webkit-user-select: none; user-select: none; }
.kiosk-mode input, .kiosk-mode textarea, .kiosk-mode select {
    -webkit-user-select: auto; user-select: auto;
}

/* ========================================
   Alpine.js transition helpers
   ======================================== */
[x-cloak] { display: none !important; }

.fade-enter { opacity: 0; }
.fade-enter-active { transition: opacity 0.3s ease; }
.fade-leave-active { transition: opacity 0.2s ease; opacity: 0; }

.slide-right-enter { transform: translateX(100%); }
.slide-right-enter-active { transition: transform 0.3s ease; }
.slide-right-leave-active { transition: transform 0.2s ease; transform: translateX(100%); }

/* ========================================
   Loading spinner
   ======================================== */
.spinner {
    width: 24px; height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Shake animation (for errors)
   ======================================== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
.shake { animation: shake 0.4s ease-in-out; }

/* ========================================
   Pulse animation (for cart badge)
   ======================================== */
@keyframes pulse-badge {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.pulse-badge { animation: pulse-badge 0.3s ease; }

/* ========================================
   Success checkmark animation
   ======================================== */
@keyframes checkmark-draw {
    0% { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
}

/* ========================================
   Floating/bobbing animation (for logo)
   ======================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.float-animation { animation: float 3s ease-in-out infinite; }

/* ========================================
   Scale pop animation (for input feedback)
   ======================================== */
@keyframes scale-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1.05); }
}
.scale-pop { animation: scale-pop 0.2s ease-out forwards; }

/* ========================================
   Print styles
   ======================================== */
@media print {
    .no-print { display: none !important; }
    body { font-size: 12px; }
}

/* ========================================
   Number display for currency
   ======================================== */
.currency-display {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}