/**
 * Shoporama POS Custom Styles
 */

/* Loading spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Smooth transitions for cart highlight */
.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Product card hover effects and click feedback */
.product-card, .variant-product-container {
    transition: transform 0.1s ease-out, box-shadow 0.15s ease-out;
}

.product-card:hover, .variant-product-container:hover {
    transform: translateY(-2px);
}

/* Quick scale effect for click feedback */
.product-card.scale-95 {
    transform: scale(0.95);
}

/* Instant ring effect without delay */
.ring-2 {
    box-shadow: 0 0 0 2px rgb(34 197 94);
    transition: box-shadow 0s !important;
}

/* Modal backdrop blur effect */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

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

/* Custom scrollbar for cart */
#cart-items-list::-webkit-scrollbar {
    width: 6px;
}

#cart-items-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#cart-items-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#cart-items-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Print styles for receipts */
@media print {
    /* Hide everything except receipt modal */
    body * {
        visibility: hidden !important;
    }
    
    /* Show only receipt modal content */
    #receiptModal,
    #receiptModal * {
        visibility: visible !important;
    }
    
    /* Position receipt for printing */
    #receiptModal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
    }
    
    /* Remove modal styling */
    #receiptModal .fixed {
        position: static !important;
    }
    
    /* Receipt content styling */
    #receiptModal .bg-white {
        max-width: 80mm !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Hide non-printable elements */
    .print\\:hidden {
        display: none !important;
    }
    
    /* Show print-only elements */
    .print\\:block {
        display: block !important;
    }
    
    /* Adjust text sizes for print */
    #receiptModal .text-2xl {
        font-size: 20pt !important;
    }
    
    #receiptModal .text-lg {
        font-size: 14pt !important;
    }
    
    #receiptModal .text-sm {
        font-size: 10pt !important;
    }
    
    #receiptModal .text-xs {
        font-size: 8pt !important;
    }
    
    /* Remove colors for better print quality */
    #receiptModal .text-gray-600,
    #receiptModal .text-gray-500 {
        color: #333 !important;
    }
    
    /* Ensure borders are visible */
    #receiptModal .border-dashed {
        border-style: dashed !important;
        border-color: #666 !important;
    }
    
    /* Page break settings */
    @page {
        size: 80mm auto;
        margin: 5mm;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    /* Mobile-specific styles */
    .product-card {
        min-height: 140px;
    }
    
    /* Adjust modal positioning on mobile */
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Focus styles for accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* Disabled state styles */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Scanner video container */
#video {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* Success animation for cart items */
@keyframes highlight-fade {
    0% { background-color: rgb(220 252 231); }
    100% { background-color: transparent; }
}

.highlight-success {
    animation: highlight-fade 1s ease-out;
}

/* Details/Summary styling */
details summary::-webkit-details-marker {
    display: none;
}

details summary {
    cursor: pointer;
    user-select: none;
}

/* Smooth rotation for arrow icon */
details[open] .group-open\:rotate-90 {
    transform: rotate(90deg);
}

/* Transition for arrow rotation */
details svg {
    transition: transform 0.2s ease-in-out;
}

/* Shake animation for variant product images */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.shake-animation {
    animation: shake 0.6s ease-in-out;
}

/* Blink background animation for variant buttons */
@keyframes blink-background {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(239, 68, 68, 0.1); }
}

.blink-border {
    animation: blink-background 0.3s ease-in-out;
}

/* Custom checkbox styling */
.checkbox-custom {
    transition: all 0.2s ease-in-out;
}

/* When checkbox is checked */
#send_invoice:checked + .checkbox-custom {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

#send_invoice:checked + .checkbox-custom .checkmark {
    opacity: 1;
}

/* When checkbox is disabled */
#send_invoice:disabled + .checkbox-custom {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    cursor: not-allowed;
}

#send_invoice:disabled ~ div {
    opacity: 0.5;
}

/* Hover effect when enabled */
#send_invoice:not(:disabled) + .checkbox-custom:hover {
    border-color: #6366f1;
}

/* Focus effect */
#send_invoice:focus + .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}