/* SHOP-FIX.CSS ============= INSTALLATION: Add to ALL pages in : */ :root { --bg: #0b0b10; --card: #0f1724; --accent: #06b6d4; --muted: #9aa7b4; } /* Add to Cart Button */ .add-to-cart-btn, .detail-add-to-cart { background: var(--accent); color: #000; border: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.9rem; margin-top: 10px; width: 100%; transition: opacity 0.2s; } .add-to-cart-btn:hover { opacity: 0.9; } .detail-buy-now { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.9rem; margin-top: 10px; width: 100%; } /* Cart Modal */ .cart-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 9999; display: none; justify-content: flex-end; } .cart-modal.active { display: flex; } .cart-modal-content { width: 350px; background: var(--card); border-left: 2px solid var(--accent); display: flex; flex-direction: column; } .cart-header { padding: 20px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; } .cart-header h3 { margin: 0; color: var(--accent); } #closeCartBtn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; } #cartItems { padding: 20px; overflow-y: auto; flex: 1; } .cart-item-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 10px; margin-bottom: 10px; border-radius: 4px; } .qty-controls button { background: #333; color: #fff; border: 1px solid #444; width: 24px; height: 24px; cursor: pointer; margin: 0 2px; } .cart-footer { padding: 20px; border-top: 1px solid #333; margin-top: auto; } .cart-total-row { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: bold; color: var(--accent); margin-bottom: 15px; } .checkout-btn { width: 100%; background: var(--accent); border: none; padding: 12px; font-weight: bold; cursor: pointer; margin-top: 10px; text-transform: uppercase; } /* Product Detail CTA */ .compact-cta-bar { background: var(--card); padding: 15px; border-radius: 8px; border: 1px solid #333; margin: 20px 0; display: flex; justify-content: space-between; align-items: center; } .cta-price span { display: block; font-size: 1.5rem; color: var(--accent); font-weight: bold; } .cta-price small { color: var(--muted); } .cta-actions { display: flex; gap: 10px; } /* Toast */ .toast-msg { position: fixed; bottom: 20px; right: 20px; background: var(--accent); color: #000; padding: 12px 20px; border-radius: 6px; font-weight: bold; transform: translateY(100px); transition: transform 0.3s; z-index: 10000; } .toast-msg.visible { transform: translateY(0); }