/* Modern Artisanal Roast & Brew POS Custom Styles */

[x-cloak] {
    display: none !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #fbf2e7;
}
::-webkit-scrollbar-thumb {
    background: #d2c3bf;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #807471;
}

/* Print Styles for 80mm & 58mm Thermal Printers */
@media print {
    body * {
        visibility: hidden;
    }
    #receipt-print-area, #receipt-print-area * {
        visibility: visible;
    }
    #receipt-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm;
        margin: 0;
        padding: 4mm;
        font-size: 11px;
        line-height: 1.35;
        background: #fff;
        color: #000;
    }
    .no-print {
        display: none !important;
    }
    @page {
        margin: 0;
        size: 80mm auto;
    }
}

/* Toast Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.toast-enter {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-leave {
    animation: fadeOut 0.25s ease-out forwards;
}

/* Loading Spinners */
.spinner {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* Tactile push feedback for POS touch/mouse */
.touch-card {
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.touch-card:active {
    transform: scale(0.97);
}