.delivery-container { width: 100%; min-height: 100vh; padding: clamp(1rem, 3vw, 2rem); max-width: 1400px; margin: 0 auto; } /* Header */ .delivery-header { margin-bottom: clamp(2rem, 5vw, 3rem); text-align: center; } .delivery-header h1 { color: white; font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 0.5rem 0; font-weight: bold; letter-spacing: -0.5px; background: linear-gradient(to right, #10b981, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .delivery-subtitle { color: #888; font-size: clamp(1rem, 3vw, 1.2rem); margin: 0; } .welcome-message { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; color: #10b981; font-size: clamp(1rem, 3vw, 1.1rem); font-weight: 600; } /* Stats Grid */ .delivery-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 3vw, 1.5rem); margin-bottom: clamp(2rem, 5vw, 3rem); } .delivery-stat-card { position: relative; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100% ); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2rem); display: flex; align-items: center; gap: 1.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .delivery-stat-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(16, 185, 129, 0.1), transparent ); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .delivery-stat-card:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100% ); border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2); transform: translateY(-4px); } .delivery-stat-card:hover::before { left: 100%; } .delivery-stat-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .delivery-stat-card:hover .delivery-stat-icon { transform: scale(1.1) rotate(5deg); } .delivery-stat-icon.green { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1) ); color: #10b981; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3); } .delivery-stat-icon.blue { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1) ); color: #3b82f6; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); } .delivery-stat-icon.orange { background: linear-gradient( 135deg, rgba(251, 146, 60, 0.2), rgba(249, 115, 22, 0.1) ); color: #fb923c; box-shadow: 0 8px 24px rgba(251, 146, 60, 0.3); } .delivery-stat-icon.purple { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.2), rgba(109, 40, 217, 0.1) ); color: #7c3aed; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3); } .delivery-stat-icon.yellow { background: linear-gradient( 135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.1) ); color: #eab308; box-shadow: 0 8px 24px rgba(234, 179, 8, 0.3); } .delivery-stat-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .delivery-stat-label { color: #888; font-size: clamp(0.85rem, 2.5vw, 0.95rem); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .delivery-stat-value { color: white; font-size: clamp(1.8rem, 5vw, 2.2rem); margin: 0; font-weight: bold; letter-spacing: -0.5px; } .delivery-stat-trend { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; } .delivery-stat-trend.positive { color: #10b981; } .delivery-stat-trend.neutral { color: #fb923c; } /* Status Badge */ .status-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 12px; font-size: 0.9rem; font-weight: 600; margin-top: 0.5rem; } .header-badges { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; } .status-badge.available { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1) ); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .status-badge.busy { background: linear-gradient( 135deg, rgba(251, 146, 60, 0.2), rgba(249, 115, 22, 0.1) ); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); } .status-badge.offline { background: linear-gradient( 135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.1) ); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.3); } /* Location Modal */ .location-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .location-modal { background: linear-gradient( 135deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.98) 100% ); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: clamp(2rem, 5vw, 3rem); max-width: 500px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .location-modal-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 20px; background: linear-gradient( 135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1) ); border: 1px solid rgba(16, 185, 129, 0.3); } .location-modal-title { color: white; font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: bold; text-align: center; margin: 0 0 1rem 0; } .location-modal-text { color: #9ca3af; font-size: clamp(0.95rem, 3vw, 1.05rem); line-height: 1.6; text-align: center; margin: 0 0 2rem 0; } .location-modal-buttons { display: flex; flex-direction: column; gap: 1rem; } .location-button { padding: 1rem 1.5rem; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; } .location-button.primary { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); } .location-button.primary:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); transform: translateY(-2px); } .location-button.secondary { background: linear-gradient( 135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.1) ); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.3); } .location-button.secondary:hover { background: linear-gradient( 135deg, rgba(107, 114, 128, 0.3), rgba(75, 85, 99, 0.2) ); box-shadow: 0 8px 24px rgba(107, 114, 128, 0.3); } .location-error { color: #ef4444; font-size: 0.9rem; text-align: center; margin-top: 1rem; padding: 0.75rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; } /* Alert Modal */ .alert-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; animation: fadeIn 0.3s ease-in-out; } .alert-modal { background: linear-gradient( 135deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.98) 100% ); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: clamp(2rem, 5vw, 3rem); max-width: 450px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: slideUp 0.3s ease-out; } .alert-modal-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 20px; } .alert-modal-icon.success { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1) ); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; } .alert-modal-icon.error { background: linear-gradient( 135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1) ); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; } .alert-modal-icon.warning { background: linear-gradient( 135deg, rgba(251, 146, 60, 0.2), rgba(249, 115, 22, 0.1) ); border: 1px solid rgba(251, 146, 60, 0.3); color: #fb923c; } .alert-modal-icon.info { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1) ); border: 1px solid rgba(59, 130, 246, 0.3); color: #3b82f6; } .alert-modal-title { color: white; font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: bold; text-align: center; margin: 0 0 1rem 0; } .alert-modal-text { color: #9ca3af; font-size: clamp(0.95rem, 3vw, 1.05rem); line-height: 1.6; text-align: center; margin: 0 0 2rem 0; } .alert-modal-buttons { display: flex; flex-direction: column; gap: 1rem; } .alert-button { padding: 1rem 1.5rem; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; } .alert-button.primary.success { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); } .alert-button.primary.success:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); transform: translateY(-2px); } .alert-button.primary.error { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3); } .alert-button.primary.error:hover { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4); transform: translateY(-2px); } .alert-button.primary.warning { background: linear-gradient(135deg, #fb923c, #f97316); color: white; box-shadow: 0 4px 16px rgba(251, 146, 60, 0.3); } .alert-button.primary.warning:hover { box-shadow: 0 8px 24px rgba(251, 146, 60, 0.4); transform: translateY(-2px); } .alert-button.primary.info { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); } .alert-button.primary.info:hover { box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4); transform: translateY(-2px); } /* Quick Actions Section */ .delivery-actions-section { margin-bottom: clamp(2rem, 5vw, 3rem); } .delivery-actions-section h2 { color: white; font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 clamp(1.5rem, 4vw, 2rem) 0; font-weight: bold; } .delivery-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1rem, 3vw, 1.5rem); } .delivery-action-card { position: relative; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100% ); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .delivery-action-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(16, 185, 129, 0.1), transparent ); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .delivery-action-card:hover { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100% ); border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3); transform: translateY(-4px); } .delivery-action-card:hover::before { left: 100%; } .delivery-action-card:active { transform: scale(0.98); } .delivery-action-card svg { color: #10b981; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .delivery-action-card:hover svg { transform: scale(1.1) rotate(5deg); } .delivery-action-card span { color: white; font-size: clamp(1rem, 3vw, 1.1rem); font-weight: 600; text-align: center; } /* Current Delivery Section */ .current-delivery-section { margin-bottom: clamp(2rem, 5vw, 3rem); } .current-delivery-section h2 { color: white; font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 clamp(1.5rem, 4vw, 2rem) 0; font-weight: bold; } .current-delivery-card { position: relative; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100% ); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2rem); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .no-delivery-card { text-align: center; padding: 3rem 2rem; color: #888; font-size: 1.1rem; margin-top: 20px; } .delivery-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .delivery-info-item { display: flex; align-items: flex-start; gap: 1rem; } .delivery-info-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient( 135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1) ); color: #10b981; } .delivery-info-content h4 { color: #888; font-size: 0.85rem; margin: 0 0 0.25rem 0; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .delivery-info-content p { color: white; font-size: 1rem; margin: 0; font-weight: 500; } /* Order Items Section */ .order-items-section { margin-top: 1.5rem; } .order-items-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .order-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100% ); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; transition: all 0.3s ease; } .order-item:hover { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.02) 100% ); border-color: rgba(16, 185, 129, 0.2); transform: translateX(4px); } .order-item-name { color: white; font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem 0; } .order-item-quantity { color: #9ca3af; font-size: 0.875rem; margin: 0; } .order-item-price { color: #10b981; font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; } .order-total { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; background: linear-gradient( 135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100% ); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 12px; margin-top: 1rem; } .order-total span:first-child { color: white; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .order-total-amount { color: #10b981; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; } .delivery-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .delivery-button { flex: 1; min-width: 200px; padding: 1rem 1.5rem; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .delivery-button.primary { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); } .delivery-button.primary:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); transform: translateY(-2px); } .delivery-button.secondary { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1) ); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); } .delivery-button.secondary:hover { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2) ); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); transform: translateY(-2px); } /* Loading */ .loading-delivery { text-align: center; padding: 4rem 2rem; } .loading-delivery p { font-size: 1.2rem; color: #666; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Responsive */ @media (max-width: 1024px) { .delivery-stats-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media (max-width: 768px) { .delivery-stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .delivery-actions-grid { grid-template-columns: repeat(2, 1fr); } .delivery-stat-icon { width: 50px; height: 50px; } .delivery-button { min-width: 150px; } .order-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .order-item-price { align-self: flex-end; } } @media (max-width: 480px) { .delivery-stats-grid { grid-template-columns: 1fr; } .delivery-actions-grid { grid-template-columns: 1fr; } .delivery-info-grid { grid-template-columns: 1fr; } .delivery-actions { flex-direction: column; } .delivery-button { width: 100%; min-width: unset; } .order-total { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* Stats Card Clickable */ .delivery-stat-card.stats-card { cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .delivery-stat-card.stats-card:hover { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.1) 0%, rgba(109, 40, 217, 0.05) 100% ); border-color: rgba(124, 58, 237, 0.4); box-shadow: 0 12px 32px rgba(124, 58, 237, 0.3); transform: translateY(-4px) scale(1.02); } .delivery-stat-card.stats-card:active { transform: translateY(-2px) scale(1.01); } .delivery-stat-icon.purple { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.2), rgba(109, 40, 217, 0.1) ); color: #7c3aed; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3); } @media (hover: none) { .delivery-stat-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .delivery-stat-card.stats-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .delivery-action-card:hover { transform: none; } .delivery-button:hover { transform: none; } .order-item:hover { transform: none; } } .delivery-stat-card.stats-card:active { transform: translateY(-2px) scale(1.01); } .delivery-stat-icon.purple { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.2), rgba(109, 40, 217, 0.1) ); color: #7c3aed; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3); } @media (hover: none) { .delivery-stat-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .delivery-stat-card.stats-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .delivery-action-card:hover { transform: none; } .delivery-button:hover { transform: none; } .order-item:hover { transform: none; } }