/* Add to Cart and Enquiry Button Styles */ /* Base button styles */ .add-to-cart-btn, .enquire-btn { background-color: #ff6600; color: #ffffff; border: none; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .add-to-cart-btn:hover { background-color: #e55a00; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255, 102, 0, 0.3); } .enquire-btn { background-color: #0073aa; } .enquire-btn:hover { background-color: #005a87; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3); } /* Button states */ .add-to-cart-btn:disabled, .add-to-cart-btn.added { opacity: 0.7; cursor: not-allowed; } .add-to-cart-btn.added { background-color: #28a745; } /* Notification styles */ .custom-notification { position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 4px; color: #ffffff; font-size: 14px; font-weight: 500; z-index: 99999; opacity: 0; transform: translateX(400px); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .custom-notification.show { opacity: 1; transform: translateX(0); } .custom-notification.success { background-color: #28a745; } .custom-notification.error { background-color: #dc3545; } .custom-notification.info { background-color: #17a2b8; } /* Loading spinner for button */ .add-to-cart-btn:disabled::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid #ffffff; border-radius: 50%; border-top-color: transparent; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Product table improvements */ table.product-table { width: 100%; border-collapse: collapse; } table.product-table th { background-color: #0073aa; color: #ffffff; padding: 12px; text-align: left; font-weight: 600; } table.product-table td { padding: 12px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; } table.product-table tr:hover { background-color: #f8f9fa; } table.product-table img { max-width: 80px; height: auto; border-radius: 4px; } /* Responsive adjustments */ @media (max-width: 768px) { .custom-notification { right: 10px; left: 10px; top: 10px; } .add-to-cart-btn, .enquire-btn { padding: 8px 15px; font-size: 12px; } } /* Stock badge (optional) */ .stock-badge { display: inline-block; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-left: 8px; } .stock-badge.in-stock { background-color: #d4edda; color: #155724; } .stock-badge.out-of-stock { background-color: #f8d7da; color: #721c24; }