| .modern-cart { |
| position: relative; |
| min-height: 100vh; |
| background: transparent; |
| |
| padding: 50px 0 80px; |
| margin-top: -50px; |
| overflow: hidden; |
| } |
|
|
| .modern-cart::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle at 20% 80%, rgba(19, 35, 57, 0.3) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(68, 21, 48, 0.3) 0%, transparent 50%), |
| radial-gradient(circle at 40% 40%, rgba(15, 47, 59, 0.2) 0%, transparent 50%); |
| pointer-events: none; |
| z-index: 1; |
| } |
|
|
| .modern-cart::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); |
| pointer-events: none; |
| z-index: 1; |
| } |
|
|
| .cart-floating-elements { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 1; |
| } |
|
|
| .cart-floating-element { |
| position: absolute; |
| color: rgba(246, 211, 101, 0.4); |
| filter: drop-shadow(0 0 10px rgba(246, 211, 101, 0.3)); |
| animation: cartFloat 8s ease-in-out infinite; |
| } |
|
|
| @keyframes cartFloat { |
| 0%, |
| 100% { |
| transform: translateY(0px) rotate(0deg); |
| opacity: 0.4; |
| } |
| 50% { |
| transform: translateY(-30px) rotate(180deg); |
| opacity: 0.8; |
| } |
| } |
|
|
| .container { |
| position: relative; |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 20px; |
| z-index: 2; |
| } |
|
|
| .cart-header { |
| text-align: center; |
| margin-bottom: 40px; |
| position: relative; |
| } |
|
|
| .cart-title { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 16px; |
| font-size: 3.5rem; |
| font-weight: 800; |
| margin-bottom: 10px; |
| text-shadow: 0 0 50px rgba(246, 211, 101, 0.5); |
| position: relative; |
| } |
|
|
| .cart-title::after { |
| content: ""; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 200px; |
| height: 4px; |
| background: linear-gradient(90deg, transparent, #667eea, #f6d365, #667eea, transparent); |
| border-radius: 2px; |
| animation: titleGlow 3s ease-in-out infinite; |
| } |
|
|
| @keyframes titleGlow { |
| 0%, |
| 100% { |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); |
| } |
| 50% { |
| box-shadow: 0 0 40px rgba(246, 211, 101, 0.8); |
| } |
| } |
|
|
| .cart-content { |
| display: grid; |
| grid-template-columns: 1fr 400px; |
| gap: 60px; |
| align-items: start; |
| } |
|
|
| .cart-items-section { |
| position: relative; |
| } |
|
|
| .cart-item-card { |
| position: relative; |
| background: rgba(255, 255, 255, 0.03); |
| backdrop-filter: blur(30px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 25px; |
| margin-bottom: 25px; |
| overflow: hidden; |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| transform-style: preserve-3d; |
| } |
|
|
| .cart-item-card:hover { |
| background: rgba(182, 157, 146, 0.2); |
| border-color: rgba(255, 255, 255, 0.05); |
| box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); |
| transform: translateY(-10px) rotateX(2deg); |
| } |
|
|
| .cart-item-inner { |
| display: grid; |
| grid-template-columns: 120px 1fr auto auto auto auto; |
| gap: 25px; |
| align-items: center; |
| padding: 25px; |
| position: relative; |
| } |
|
|
| .cart-item-image { |
| position: relative; |
| width: 120px; |
| height: 120px; |
| border-radius: 20px; |
| overflow: hidden; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); |
| } |
|
|
| .cart-item-image img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.4s ease; |
| } |
|
|
| .image-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle at center, rgba(102, 126, 234, 0.2) 0%, transparent 70%); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| border-radius: 20px; |
| } |
|
|
| .cart-item-card:hover .image-glow { |
| opacity: 1; |
| } |
|
|
| .cart-item-info { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| min-width: 0; |
| } |
|
|
| .cart-item-name { |
| margin: 0; |
| } |
|
|
| .cart-item-name a { |
| color: white; |
| text-decoration: none; |
| font-size: 1.3rem; |
| font-weight: 600; |
| line-height: 1.4; |
| transition: all 0.3s ease; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| .cart-item-name a:hover { |
| background: linear-gradient(135deg, #a29b09ee, #05436e96); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| text-decoration: none; |
| transform: translateX(5px); |
| } |
|
|
| .cart-item-price { |
| display: flex; |
| } |
|
|
| .currency { |
| font-size: 1.1rem; |
| font-weight: 600; |
| color: #4ecdc4; |
| margin-right: 4px; |
| } |
|
|
| .amount { |
| font-size: 1.8rem; |
| font-weight: 800; |
| background: linear-gradient(135deg, #4ecdc4, #45b7d1); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| filter: drop-shadow(0 0 10px rgba(78, 205, 196, 0.3)); |
| } |
|
|
| .cart-item-quantity { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .quantity-label { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 0.9rem; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .quantity-controls { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 25px; |
| padding: 8px 16px; |
| } |
|
|
| .qty-btn { |
| width: 36px; |
| height: 36px; |
| border: none; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| color: white; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .qty-btn.minus { |
| background: linear-gradient(135deg, #ff6b6b, #ff5252); |
| box-shadow: 0 5px 20px rgba(255, 107, 107, 0.3); |
| } |
|
|
| .qty-btn.plus { |
| background: linear-gradient(135deg, #4ecdc4, #45b7d1); |
| box-shadow: 0 5px 20px rgba(78, 205, 196, 0.3); |
| } |
|
|
| .qty-btn:hover { |
| transform: scale(1.1) translateY(-2px); |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .qty-btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
|
|
| .qty-btn::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); |
| border-radius: 50%; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .qty-btn:hover::before { |
| opacity: 1; |
| } |
|
|
| .qty-display { |
| font-size: 1.2rem; |
| font-weight: 700; |
| color: white; |
| min-width: 30px; |
| text-align: center; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .cart-item-total { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 8px; |
| text-align: center; |
| } |
|
|
| .total-label { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 0.9rem; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .total-amount { |
| font-size: 1.6rem; |
| font-weight: 800; |
| background: linear-gradient(135deg, #f6d365, #fda085); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| filter: drop-shadow(0 0 10px rgba(246, 211, 101, 0.4)); |
| } |
|
|
| .remove-btn { |
| width: 64px; |
| height: 64px; |
| background: rgba(255, 107, 107, 0.18); |
| border: 2.5px solid #ff6b6b; |
| border-radius: 50%; |
| color: #edd4d7; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 2rem; |
| font-weight: bold; |
| box-shadow: 0 4px 24px rgba(255, 107, 107, 0.18); |
| transition: none; |
| position: relative; |
| overflow: hidden; |
| outline: none; |
| } |
|
|
| .remove-btn:hover, .remove-btn:focus { |
| background: rgba(255, 107, 107, 0.22); |
| border-color: #ff4757; |
| color: #be3636; |
| box-shadow: 0 4px 24px rgba(255, 107, 107, 0.22); |
| |
| } |
|
|
| .remove-btn::before, .remove-btn:hover::before { |
| display: none !important; |
| } |
|
|
| .order-summary-section { |
| position: sticky; |
| top: 120px; |
| } |
|
|
| .order-summary-card { |
| position: relative; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(30px); |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| border-radius: 25px; |
| padding: 35px; |
| overflow: hidden; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .order-summary-card::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(246, 211, 101, 0.05)); |
| z-index: -1; |
| } |
|
|
| .summary-title { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 1.8rem; |
| font-weight: 700; |
| color: white; |
| margin-bottom: 30px; |
| text-align: center; |
| justify-content: center; |
| } |
|
|
| .summary-title::after { |
| content: ""; |
| position: absolute; |
| bottom: -8px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 80px; |
| height: 2px; |
| background: linear-gradient(90deg, #667eea, #f6d365); |
| border-radius: 1px; |
| } |
|
|
| .summary-details { |
| margin-bottom: 30px; |
| } |
|
|
| .summary-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 15px 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| font-size: 1rem; |
| color: rgba(255, 255, 255, 0.8); |
| transition: all 0.3s ease; |
| } |
|
|
| .summary-row:hover { |
| color: white; |
| transform: translateX(5px); |
| } |
|
|
| .summary-row:last-child { |
| border-bottom: none; |
| } |
|
|
| .summary-value { |
| font-weight: 600; |
| color: white; |
| } |
|
|
| .summary-value.free { |
| color: #4ecdc4; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .summary-divider { |
| height: 2px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); |
| margin: 20px 0; |
| border-radius: 1px; |
| } |
|
|
| .summary-row.total { |
| font-size: 1.3rem; |
| font-weight: 700; |
| color: white; |
| padding: 20px 0; |
| border-top: 2px solid rgba(255, 255, 255, 0.2); |
| border-bottom: none; |
| margin-top: 15px; |
| } |
|
|
| .place-order-btn { |
| width: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| padding: 20px 30px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| color: white; |
| border: none; |
| border-radius: 20px; |
| font-weight: 700; |
| font-size: 1.1rem; |
| cursor: pointer; |
| transition: all 0.4s ease; |
| position: relative; |
| overflow: hidden; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: 25px; |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .place-order-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 20px 50px rgba(102, 126, 234, 0.6); |
| } |
|
|
| .btn-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); |
| border-radius: 20px; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .place-order-btn:hover .btn-glow { |
| opacity: 1; |
| } |
|
|
| .place-order-btn::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); |
| transition: left 0.6s; |
| } |
|
|
| .place-order-btn:hover::before { |
| left: 100%; |
| } |
|
|
| .security-badges { |
| display: flex; |
| justify-content: space-between; |
| gap: 15px; |
| margin-bottom: 20px; |
| } |
|
|
| .badge { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 10px 15px; |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 15px; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 0.85rem; |
| font-weight: 500; |
| transition: all 0.3s ease; |
| flex: 1; |
| justify-content: center; |
| } |
|
|
| .badge:hover { |
| background: rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.3); |
| color: white; |
| transform: translateY(-2px); |
| } |
|
|
| .empty-cart { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 70vh; |
| text-align: center; |
| position: relative; |
| } |
|
|
| .empty-cart::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle at center, rgba(102, 126, 234, 0.1) 0%, transparent 70%); |
| pointer-events: none; |
| } |
|
|
| .empty-cart-content { |
| position: relative; |
| z-index: 2; |
| max-width: 500px; |
| padding: 60px 40px; |
| background: rgba(255, 255, 255, 0.03); |
| backdrop-filter: blur(30px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 30px; |
| box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .empty-cart-icon { |
| margin-bottom: 30px; |
| color: rgba(255, 255, 255, 0.6); |
| animation: emptyCartFloat 3s ease-in-out infinite; |
| } |
|
|
| @keyframes emptyCartFloat { |
| 0%, |
| 100% { |
| transform: translateY(0px); |
| } |
| 50% { |
| transform: translateY(-15px); |
| } |
| } |
|
|
| .empty-cart-title { |
| font-size: 2.5rem; |
| font-weight: 800; |
| margin-bottom: 20px; |
| text-shadow: 0 0 30px rgba(246, 211, 101, 0.5); |
| } |
|
|
| .empty-cart-subtitle { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 1.2rem; |
| line-height: 1.6; |
| margin-bottom: 40px; |
| font-weight: 300; |
| } |
|
|
| .continue-shopping-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| padding: 18px 36px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| color: white; |
| text-decoration: none; |
| border-radius: 25px; |
| font-weight: 600; |
| font-size: 1.1rem; |
| transition: all 0.4s ease; |
| position: relative; |
| overflow: hidden; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .continue-shopping-btn:hover { |
| color: white; |
| text-decoration: none; |
| transform: translateY(-5px); |
| box-shadow: 0 20px 50px rgba(102, 126, 234, 0.6); |
| } |
|
|
| .continue-shopping-btn .btn-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); |
| border-radius: 25px; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .continue-shopping-btn:hover .btn-glow { |
| opacity: 1; |
| } |
|
|
| .order-success { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 70vh; |
| text-align: center; |
| position: relative; |
| } |
|
|
| .order-success::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle at center, rgba(46, 204, 113, 0.1) 0%, transparent 70%); |
| pointer-events: none; |
| } |
|
|
| .success-content { |
| position: relative; |
| z-index: 2; |
| max-width: 600px; |
| padding: 80px 50px; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(30px); |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| border-radius: 30px; |
| box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); |
| overflow: hidden; |
| } |
|
|
| .success-content::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(78, 205, 196, 0.05)); |
| z-index: -1; |
| } |
|
|
| .success-icon { |
| margin-bottom: 30px; |
| color: #2ecc71; |
| animation: successPulse 2s ease-in-out infinite; |
| filter: drop-shadow(0 0 20px rgba(46, 204, 113, 0.5)); |
| } |
|
|
| @keyframes successPulse { |
| 0%, |
| 100% { |
| transform: scale(1); |
| opacity: 1; |
| } |
| 50% { |
| transform: scale(1.1); |
| opacity: 0.8; |
| } |
| } |
|
|
| .success-title { |
| font-size: 3rem; |
| font-weight: 800; |
| margin-bottom: 25px; |
| text-shadow: 0 0 30px rgba(46, 204, 113, 0.5); |
| } |
|
|
| .success-subtitle { |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 1.3rem; |
| line-height: 1.6; |
| margin-bottom: 50px; |
| font-weight: 300; |
| } |
|
|
| .confetti { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| overflow: hidden; |
| } |
|
|
| .confetti-piece { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| background: #f6d365; |
| animation: confettiFall 3s linear infinite; |
| } |
|
|
| .confetti-piece:nth-child(2n) { |
| background: #667eea; |
| animation-delay: 0.5s; |
| } |
|
|
| .confetti-piece:nth-child(3n) { |
| background: #ff6b6b; |
| animation-delay: 1s; |
| } |
|
|
| .confetti-piece:nth-child(4n) { |
| background: #4ecdc4; |
| animation-delay: 1.5s; |
| } |
|
|
| @keyframes confettiFall { |
| 0% { |
| transform: translateY(-100vh) rotate(0deg); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(100vh) rotate(720deg); |
| opacity: 0; |
| } |
| } |
|
|
| @media (max-width: 1024px) { |
| .cart-content { |
| grid-template-columns: 1fr; |
| gap: 40px; |
| } |
|
|
| .order-summary-section { |
| position: static; |
| } |
|
|
| .cart-item-inner { |
| grid-template-columns: 100px 1fr; |
| gap: 20px; |
| } |
|
|
| .cart-item-quantity, |
| .cart-item-total { |
| grid-column: 2 / 4; |
| flex-direction: row; |
| justify-content: space-between; |
| margin-top: 15px; |
| } |
|
|
| .remove-btn { |
| grid-column: 3; |
| grid-row: 1; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .modern-cart { |
| padding: 40px 0 60px; |
| margin-top: -40px; |
| } |
|
|
| .container { |
| padding: 0 15px; |
| } |
|
|
| .cart-title { |
| font-size: 2.5rem; |
| } |
|
|
| .cart-content { |
| gap: 30px; |
| } |
| .cart-item-price{ |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| } |
| .cart-item-inner { |
| grid-template-columns: 80px 1fr; |
| gap: 15px; |
| padding: 20px; |
| } |
|
|
| .cart-item-image { |
| width: 80px; |
| height: 80px; |
| } |
|
|
| .cart-item-name a { |
| font-size: 1.1rem; |
| } |
|
|
| .amount { |
| font-size: 1.4rem; |
| } |
|
|
| .cart-item-quantity, |
| .cart-item-total, |
| .remove-btn { |
| grid-column: 1 / 3; |
| margin-top: 15px; |
| } |
|
|
| .cart-item-quantity { |
| justify-content: flex-start; |
| } |
|
|
| .cart-item-total{ |
| justify-content: center; |
| } |
|
|
| .remove-btn { |
| justify-self: flex-end; |
| margin-top: 0; |
| } |
|
|
| .order-summary-card { |
| padding: 25px; |
| } |
|
|
| .summary-title { |
| font-size: 1.5rem; |
| } |
|
|
| .security-badges { |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .empty-cart-content, |
| .success-content { |
| padding: 40px 25px; |
| margin: 0 15px; |
| } |
|
|
| .empty-cart-title, |
| .success-title { |
| font-size: 2rem; |
| } |
|
|
| .empty-cart-subtitle, |
| .success-subtitle { |
| font-size: 1rem; |
| } |
| } |
|
|
| @media (max-width: 576px) { |
| .cart-title { |
| font-size: 2rem; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .cart-item-card { |
| border-radius: 20px; |
| } |
|
|
| .cart-item-inner { |
| grid-template-columns: 1fr; |
| text-align: center; |
| gap: 15px; |
| } |
|
|
| .cart-item-image { |
| justify-self: center; |
| width: 100px; |
| height: 100px; |
| } |
| .cart-item-price{ |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| } |
| .cart-item-quantity, |
| .cart-item-total, |
| .remove-btn { |
| grid-column: 1; |
| justify-self: center; |
| margin-top: 10px; |
| } |
|
|
| .quantity-controls { |
| padding: 6px 12px; |
| gap: 12px; |
| } |
|
|
| .qty-btn { |
| width: 32px; |
| height: 32px; |
| } |
|
|
| .place-order-btn { |
| padding: 16px 24px; |
| font-size: 1rem; |
| } |
|
|
| .continue-shopping-btn { |
| padding: 14px 28px; |
| font-size: 1rem; |
| } |
| } |
|
|
| .cart-item-card { |
| will-change: transform; |
| } |
|
|
| .cart-item-image img { |
| will-change: transform; |
| } |
|
|
| .cart-floating-element { |
| will-change: transform, opacity; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .cart-floating-element, |
| .confetti-piece, |
| .success-icon, |
| .empty-cart-icon { |
| animation: none; |
| } |
|
|
| .cart-item-card, |
| .place-order-btn, |
| .continue-shopping-btn { |
| transition: none; |
| } |
| } |
|
|
| .qty-btn:focus, |
| .remove-btn:focus, |
| .place-order-btn:focus, |
| .continue-shopping-btn:focus { |
| outline: 2px solid rgba(102, 126, 234, 0.5); |
| outline-offset: 2px; |
| } |
|
|
| @media (prefers-contrast: high) { |
| .modern-cart { |
| background: #000; |
| } |
|
|
| .cart-item-card, |
| .order-summary-card, |
| .empty-cart-content, |
| .success-content { |
| border: 2px solid white; |
| background: rgba(0, 0, 0, 0.8); |
| } |
|
|
| .cart-item-name a, |
| .cart-title, |
| .summary-title { |
| color: white; |
| } |
|
|
| .place-order-btn, |
| .continue-shopping-btn { |
| border: 2px solid white; |
| } |
| } |
|
|
| .cart-loading { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 400px; |
| } |
|
|
| .cart-skeleton { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 15px; |
| animation: cartSkeletonPulse 1.5s ease-in-out infinite; |
| } |
|
|
| @keyframes cartSkeletonPulse { |
| 0%, |
| 100% { |
| opacity: 0.5; |
| } |
| 50% { |
| opacity: 0.8; |
| } |
| } |
|
|
| .cart-item-card::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); |
| transition: left 0.6s; |
| } |
|
|
| .cart-item-card:hover::after { |
| left: 100%; |
| } |
|
|
| .qty-display { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .qty-display::before { |
| content: attr(data-value); |
| position: absolute; |
| top: -100%; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: top 0.3s ease; |
| } |
|
|
| .qty-display.updating::before { |
| top: 0; |
| } |
|
|
| .qty-display.updating { |
| transform: translateY(100%); |
| transition: transform 0.3s ease; |
| } |
|
|
| .price-change-indicator { |
| position: absolute; |
| top: -20px; |
| right: 0; |
| font-size: 0.8rem; |
| color: #4ecdc4; |
| opacity: 0; |
| animation: priceChangeSlide 1s ease-out; |
| } |
|
|
| @keyframes priceChangeSlide { |
| 0% { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| 100% { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
| } |
|
|
| .celebration-burst { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 200px; |
| height: 200px; |
| pointer-events: none; |
| } |
|
|
| .burst-particle { |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| background: #f6d365; |
| border-radius: 50%; |
| animation: burstParticle 1s ease-out forwards; |
| } |
|
|
| @keyframes burstParticle { |
| 0% { |
| transform: scale(0) translate(0, 0); |
| opacity: 1; |
| } |
| 100% { |
| transform: scale(1) translate(var(--x), var(--y)); |
| opacity: 0; |
| } |
| } |
|
|
| .cart-badge-animation { |
| position: relative; |
| } |
|
|
| .cart-badge-animation::after { |
| content: "+1"; |
| position: absolute; |
| top: -20px; |
| right: -10px; |
| background: #4ecdc4; |
| color: white; |
| padding: 2px 6px; |
| border-radius: 10px; |
| font-size: 0.7rem; |
| font-weight: bold; |
| opacity: 0; |
| animation: badgePopup 1s ease-out; |
| } |
|
|
| @keyframes badgePopup { |
| 0% { |
| opacity: 1; |
| transform: scale(0) translateY(0); |
| } |
| 50% { |
| transform: scale(1.2) translateY(-10px); |
| } |
| 100% { |
| opacity: 0; |
| transform: scale(1) translateY(-30px); |
| } |
| } |
|
|
| .cart-transition-enter { |
| opacity: 0; |
| transform: translateY(30px) scale(0.9); |
| } |
|
|
| .cart-transition-enter-active { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| transition: all 0.4s ease-out; |
| } |
|
|
| .cart-transition-exit { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
|
|
| .cart-transition-exit-active { |
| opacity: 0; |
| transform: translateY(-30px) scale(0.9); |
| transition: all 0.3s ease-in; |
| } |
|
|
| .delete-all-cart-btn { |
| width: 100%; |
| margin-top: 18px; |
| padding: 20px 30px; |
| font-weight: 700; |
| font-size: 1.1rem; |
| border: none; |
| border-radius: 20px; |
| background: linear-gradient(135deg, #ff6b6b, #ff4e50, #f7971e); |
| color: white; |
| box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4); |
| backdrop-filter: blur(18px); |
| -webkit-backdrop-filter: blur(18px); |
| cursor: pointer; |
| position: relative; |
| overflow: hidden; |
| transition: all 0.4s ease; |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| } |
|
|
| .delete-all-cart-btn:hover, .delete-all-cart-btn:focus { |
| background: linear-gradient(135deg, #ff4e50, #ff6b6b, #f7971e); |
| color: #fff; |
| box-shadow: 0 20px 50px rgba(255, 107, 107, 0.6); |
| transform: translateY(-3px); |
| outline: none; |
| } |
|
|
| .delete-all-cart-btn::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); |
| transition: left 0.6s; |
| border-radius: 20px; |
| pointer-events: none; |
| } |
|
|
| .delete-all-cart-btn:hover::after { |
| left: 100%; |
| opacity: 1; |
| } |
