| .checkout-page { |
| min-height: 100vh; |
| background: transparent; |
| padding: 40px 0; |
| color: #ffffff; |
| } |
|
|
| .checkout-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 40px; |
| padding: 20px 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .back-btn { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| background: rgba(255, 255, 255, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 12px; |
| padding: 12px 20px; |
| color: #ffffff; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| } |
|
|
| .back-btn:hover { |
| background: rgba(255, 255, 255, 0.15); |
| transform: translateX(-5px); |
| } |
|
|
| .checkout-progress { |
| display: flex; |
| gap: 20px; |
| align-items: center; |
| } |
|
|
| .progress-step { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| opacity: 0.5; |
| transition: all 0.3s ease; |
| } |
|
|
| .progress-step.active { |
| opacity: 1; |
| } |
|
|
| .step-number { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| } |
|
|
| .progress-step.active .step-number { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border-color: #667eea; |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .checkout-content { |
| display: grid; |
| grid-template-columns: 1fr 400px; |
| gap: 40px; |
| align-items: start; |
| } |
|
|
| .checkout-main { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 20px; |
| padding: 30px; |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .checkout-step { |
| margin-bottom: 30px; |
| } |
|
|
| .step-header { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| margin-bottom: 30px; |
| padding-bottom: 20px; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .step-icon { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #ffffff; |
| } |
|
|
| .step-info h3 { |
| margin: 0; |
| font-size: 24px; |
| font-weight: 600; |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .step-info p { |
| margin: 4px 0 0 0; |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 14px; |
| } |
|
|
| .form-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| } |
|
|
| .form-group { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .form-group.full-width { |
| grid-column: 1 / -1; |
| } |
|
|
| .form-group label { |
| font-weight: 500; |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 14px; |
| } |
|
|
| .form-group input, |
| .form-group select, |
| .form-group textarea { |
| padding: 12px 16px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 12px; |
| background: rgba(255, 255, 255, 0.05); |
| color: #ffffff; |
| font-size: 14px; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| } |
|
|
| .form-group input:focus, |
| .form-group select:focus, |
| .form-group textarea:focus { |
| outline: none; |
| border-color: #667eea; |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| background: rgba(255, 255, 255, 0.1); |
| } |
|
|
| .form-group input::placeholder { |
| color: rgba(255, 255, 255, 0.5); |
| } |
|
|
| .form-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr 1fr; |
| gap: 20px; |
| } |
|
|
| .cvv-input { |
| position: relative; |
| } |
|
|
| .toggle-password { |
| position: absolute; |
| right: 12px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: none; |
| border: none; |
| color: rgba(255, 255, 255, 0.6); |
| cursor: pointer; |
| padding: 4px; |
| } |
|
|
| .payment-methods { |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| margin-bottom: 30px; |
| } |
|
|
| .payment-option { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 16px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 12px; |
| background: rgba(255, 255, 255, 0.05); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .payment-option:hover { |
| background: rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.3); |
| } |
|
|
| .payment-option input[type="radio"] { |
| width: 20px; |
| height: 20px; |
| accent-color: #667eea; |
| } |
|
|
| .payment-option label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| font-weight: 500; |
| } |
|
|
| .card-details { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 16px; |
| padding: 24px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .upi-details, |
| .cod-details { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 16px; |
| padding: 24px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .upi-note, |
| .cod-note { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 14px; |
| margin-top: 12px; |
| } |
|
|
| .cod-info { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .cod-info h4 { |
| margin: 0 0 4px 0; |
| color: #4ecdc4; |
| } |
|
|
| .cod-info p { |
| margin: 0; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 14px; |
| } |
|
|
| .checkbox-label { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| cursor: pointer; |
| font-size: 14px; |
| color: rgba(255, 255, 255, 0.9); |
| } |
|
|
| .checkbox-label input[type="checkbox"] { |
| width: 18px; |
| height: 18px; |
| accent-color: #667eea; |
| } |
|
|
| .review-sections { |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| } |
|
|
| .review-section { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 16px; |
| padding: 24px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .review-section h4 { |
| margin: 0 0 16px 0; |
| color: #4ecdc4; |
| font-size: 18px; |
| font-weight: 600; |
| } |
|
|
| .review-content p { |
| margin: 4px 0; |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 14px; |
| } |
|
|
| .order-items-review { |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
|
|
| .review-item { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 16px; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .review-item img { |
| width: 60px; |
| height: 60px; |
| border-radius: 8px; |
| object-fit: cover; |
| } |
|
|
| .item-details { |
| flex: 1; |
| } |
|
|
| .item-details h5 { |
| margin: 0 0 4px 0; |
| font-size: 14px; |
| color: #ffffff; |
| } |
|
|
| .item-details p { |
| margin: 2px 0; |
| font-size: 12px; |
| color: rgba(255, 255, 255, 0.7); |
| } |
|
|
| .item-total { |
| font-weight: 600; |
| color: #4ecdc4; |
| font-size: 16px; |
| } |
|
|
| .preferences-form { |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
|
|
| .checkout-actions { |
| display: flex; |
| justify-content: flex-end; |
| align-items: center; |
| gap: 20px; |
| margin-top: 40px; |
| padding-top: 30px; |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .btn-primary, |
| .btn-secondary { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 14px 28px; |
| border-radius: 12px; |
| font-weight: 600; |
| font-size: 16px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: none; |
| text-decoration: none; |
| min-width: 140px; |
| justify-content: center; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .btn-primary:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none; |
| } |
|
|
| .btn-secondary { |
| background: rgba(255, 255, 255, 0.1); |
| color: #ffffff; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
|
|
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.15); |
| transform: translateY(-2px); |
| } |
|
|
| .place-order-btn { |
| background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important; |
| box-shadow: 0 4px 20px rgba(78, 205, 196, 0.3) !important; |
|
|
| font-size: 18px !important; |
| font-weight: 700 !important; |
| } |
|
|
| .place-order-btn:hover { |
| box-shadow: 0 8px 30px rgba(78, 205, 196, 0.4) !important; |
| } |
|
|
| .spinner { |
| width: 20px; |
| height: 20px; |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| border-top: 2px solid #ffffff; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| .checkout-sidebar { |
| position: sticky; |
| top: 20px; |
| } |
|
|
| .order-summary { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 20px; |
| padding: 30px; |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| position: sticky; |
| top: 20px; |
| } |
|
|
| .order-summary h3 { |
| margin: 0 0 24px 0; |
| font-size: 20px; |
| font-weight: 600; |
| color: #4ecdc4; |
| text-align: center; |
| } |
|
|
| .summary-items { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| margin-bottom: 24px; |
| max-height: 200px; |
| overflow-y: auto; |
| } |
|
|
| .summary-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 12px; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 8px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .item-info { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .item-name { |
| font-size: 14px; |
| color: #ffffff; |
| font-weight: 500; |
| } |
|
|
| .item-qty { |
| font-size: 12px; |
| color: rgba(255, 255, 255, 0.6); |
| } |
|
|
| .item-price { |
| font-weight: 600; |
| color: #4ecdc4; |
| font-size: 14px; |
| } |
|
|
| .summary-breakdown { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| margin-bottom: 24px; |
| padding: 20px; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .summary-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 14px; |
| color: rgba(255, 255, 255, 0.8); |
| } |
|
|
| .summary-row.discount { |
| color: #4ecdc4; |
| font-weight: 600; |
| } |
|
|
| .summary-total { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border-radius: 12px; |
| font-size: 18px; |
| font-weight: 700; |
| color: #ffffff; |
| margin-bottom: 20px; |
| } |
|
|
| .security-badges { |
| display: flex; |
| justify-content: center; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
|
|
| .badge { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 8px 12px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 8px; |
| font-size: 12px; |
| color: rgba(255, 255, 255, 0.8); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
|
|
| .order-success-page { |
| min-height: 100vh; |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 40px 20px; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .success-content { |
| text-align: center; |
| max-width: 600px; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 24px; |
| padding: 60px 40px; |
| position: relative; |
| z-index: 2; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .success-title { |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| font-size: 32px; |
| font-weight: 700; |
| margin-bottom: 16px; |
| text-align: center; |
| } |
|
|
| .success-subtitle { |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 16px; |
| line-height: 1.6; |
| margin-bottom: 40px; |
| text-align: center; |
| } |
|
|
| .order-details { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 16px; |
| padding: 24px; |
| margin-bottom: 40px; |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .detail-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 12px 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .detail-row:last-child { |
| border-bottom: none; |
| } |
|
|
| .detail-row span:first-child { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 14px; |
| } |
|
|
| .detail-row span:last-child { |
| color: #ffffff; |
| font-weight: 600; |
| font-size: 14px; |
| } |
|
|
| .order-number { |
| color: #4ecdc4 !important; |
| font-size: 16px !important; |
| } |
|
|
| .success-actions { |
| display: flex; |
| gap: 16px; |
| justify-content: center; |
| flex-wrap: wrap; |
| margin-bottom: 20px; |
| } |
|
|
| .success-actions button { |
| background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); |
| color: white; |
| border: none; |
| padding: 12px 24px; |
| border-radius: 12px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 16px rgba(78, 205, 196, 0.3); |
| } |
|
|
| .success-actions button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 24px rgba(78, 205, 196, 0.4); |
| } |
|
|
| .success-actions button:active { |
| transform: translateY(0); |
| } |
|
|
| .btn-secondary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; |
| box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important; |
| } |
|
|
| .btn-secondary:hover { |
| box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4) !important; |
| } |
|
|
| .redirect-notice { |
| text-align: center; |
| margin-top: 20px; |
| padding: 16px; |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
|
|
| .redirect-notice p { |
| margin: 0; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 14px; |
| font-weight: 500; |
| } |
|
|
| .countdown-container { |
| text-align: center; |
| } |
|
|
| .countdown-timer { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| margin-top: 8px; |
| } |
|
|
| .countdown-number { |
| font-size: 24px; |
| font-weight: 700; |
| color: #4ecdc4; |
| background: rgba(78, 205, 196, 0.1); |
| padding: 8px 12px; |
| border-radius: 8px; |
| border: 1px solid rgba(78, 205, 196, 0.3); |
| } |
|
|
| .countdown-text { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 14px; |
| } |
|
|
| .confetti { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 1000; |
| } |
|
|
| .confetti-piece { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #43e97b); |
| border-radius: 50%; |
| animation: confetti-fall 3s linear infinite; |
| } |
|
|
| @keyframes confetti-fall { |
| 0% { |
| transform: translateY(-100vh) rotate(0deg); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(100vh) rotate(720deg); |
| opacity: 0; |
| } |
| } |
|
|
| .celebration-burst { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| pointer-events: none; |
| } |
|
|
| .burst-particle { |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c); |
| border-radius: 50%; |
| animation: burst-out 1s ease-out forwards; |
| } |
|
|
| @keyframes burst-out { |
| 0% { |
| transform: translate(0, 0) scale(0); |
| opacity: 1; |
| } |
| 100% { |
| transform: translate(var(--x), var(--y)) scale(1); |
| opacity: 0; |
| } |
| } |
|
|
| .success-icon { |
| width: 120px; |
| height: 120px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto 30px; |
| color: #ffffff; |
| box-shadow: 0 0 40px rgba(78, 205, 196, 0.4); |
| } |
|
|
| .tick-container { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .tick-svg { |
| width: 80px; |
| height: 80px; |
| z-index: 2; |
| position: relative; |
| } |
|
|
| .tick-circle { |
| stroke-dasharray: 283; |
| stroke-dashoffset: 283; |
| animation: draw-circle 1s ease-out 0.5s forwards; |
| } |
|
|
| .tick-path { |
| stroke-dasharray: 60; |
| stroke-dashoffset: 60; |
| animation: draw-tick 0.8s ease-out 1.2s forwards; |
| } |
|
|
| @keyframes draw-circle { |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
|
|
| @keyframes draw-tick { |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
|
|
| .tick-ripple { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 100%; |
| height: 100%; |
| border: 2px solid rgba(78, 205, 196, 0.6); |
| border-radius: 50%; |
| transform: translate(-50%, -50%) scale(0); |
| animation: ripple 2s ease-out infinite; |
| } |
|
|
| .tick-ripple.delay-1 { |
| animation-delay: 0.5s; |
| } |
|
|
| .tick-ripple.delay-2 { |
| animation-delay: 1s; |
| } |
|
|
| @keyframes ripple { |
| 0% { |
| transform: translate(-50%, -50%) scale(0); |
| opacity: 1; |
| } |
| 100% { |
| transform: translate(-50%, -50%) scale(1.5); |
| opacity: 0; |
| } |
| } |
|
|
| .success-content h1 { |
| margin: 0 0 16px 0; |
| font-size: 36px; |
| font-weight: 800; |
| background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 50%, #f6d365 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .success-content p { |
| margin: 0 0 40px 0; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 16px; |
| line-height: 1.6; |
| } |
|
|
| .loading-container { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 400px; |
| } |
|
|
| .loader { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 16px; |
| } |
|
|
| .loader::before { |
| content: ""; |
| width: 24px; |
| height: 24px; |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| border-top: 2px solid #667eea; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @media (max-width: 1024px) { |
| .checkout-content { |
| grid-template-columns: 1fr; |
| gap: 30px; |
| } |
| |
| .checkout-sidebar { |
| position: static; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .checkout-header { |
| flex-direction: column; |
| gap: 20px; |
| align-items: stretch; |
| } |
| |
| .checkout-progress { |
| justify-content: center; |
| } |
| |
| .form-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .form-row { |
| grid-template-columns: 1fr; |
| } |
| |
| .checkout-actions { |
| flex-direction: column; |
| gap: 16px; |
| } |
| |
| .btn-primary, |
| .btn-secondary { |
| width: 100%; |
| justify-content: center; |
| } |
| |
| .place-order-btn { |
| min-width: 100% !important; |
| padding: 16px 24px !important; |
| } |
| |
| .success-content { |
| padding: 40px 20px; |
| } |
| |
| .success-actions { |
| flex-direction: column; |
| } |
| |
| .order-success-page { |
| padding: 20px 16px; |
| } |
| |
| .success-content { |
| padding: 40px 20px; |
| margin: 20px; |
| } |
| |
| .success-title { |
| font-size: 24px; |
| } |
| |
| .success-subtitle { |
| font-size: 14px; |
| } |
| |
| .tick-svg { |
| width: 60px; |
| height: 60px; |
| } |
| |
| .success-icon { |
| width: 80px; |
| height: 80px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .checkout-main { |
| padding: 20px; |
| } |
| |
| .order-summary { |
| padding: 20px; |
| } |
| |
| .step-header { |
| flex-direction: column; |
| text-align: center; |
| gap: 12px; |
| } |
| |
| .progress-step { |
| flex-direction: column; |
| gap: 4px; |
| font-size: 12px; |
| } |
| } |
