/* Responsive CSS Fix */
@media (max-width: 1024px) {
    .container { max-width: 100% !important; }
}

@media (max-width: 768px) {
    /* Mobile adjustments */
    body { font-size: 14px; }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    
    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
    
    /* Grid fixes */
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .lg\\:col-span-2, .lg\\:col-span-1 { grid-column: span 1 !important; }
    
    /* Spacing */
    .gap-6 { gap: 1rem !important; }
    .gap-4 { gap: 0.75rem !important; }
    .gap-3 { gap: 0.5rem !important; }
    
    /* Padding */
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1.25rem !important; }
    .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    
    /* Rounded corners */
    .rounded-3xl { border-radius: 1rem !important; }
    .rounded-2xl { border-radius: 0.75rem !important; }
    
    /* QR Code */
    #qrcode canvas, #qrcode img {
        border-width: 5px !important;
        max-width: 100% !important;
    }
    
    
    /* History sidebar */
    .sticky { position: relative !important; }
    .max-h-96 { max-height: 16rem !important; }
    
    /* Buttons */
    button { font-size: 0.875rem !important; }
    
    /* Hide long text on mobile */
    .hidden-mobile { display: none !important; }
}

@media (max-width: 640px) {
    .text-3xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .text-2xl { font-size: 1.125rem !important; line-height: 1.5rem !important; }
    .text-xl { font-size: 1rem !important; line-height: 1.5rem !important; }
    
    .w-12 { width: 2.5rem !important; }
    .h-12 { height: 2.5rem !important; }
}