.track-shipment-container{min-height:100vh;display:flex;flex-direction:column;background-color:#fff}.track-header{background:#fff;border-bottom:1px solid #e0e0e0;padding:0rem 2rem}.track-header .logo-container{max-width:1200px;margin:0 auto}.track-header .logo{display:flex;align-items:center;gap:.75rem}.track-header .logo .logo-image{width:70px;height:70px;object-fit:contain}.track-header .logo .logo-text{font-size:1.5rem;font-weight:600;color:#1a1a1a}.track-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background-color:#f5f5f5}.track-content{width:100%;max-width:800px}.track-title{font-size:2rem;font-weight:600;text-align:center;margin-bottom:2rem;color:#1a1a1a}.track-card{background:#fff;border-radius:12px;padding:2.5rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}.search-by-section{margin-bottom:2rem}.search-by-section .search-by-label{display:block;font-size:.875rem;font-weight:500;color:#666;margin-bottom:.75rem}.search-by-section .radio-group{display:flex;gap:2rem}.search-by-section .radio-group .radio-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9375rem;color:#333}.search-by-section .radio-group .radio-option input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#2196f3}.search-by-section .radio-group .radio-option span{user-select:none}.input-section .input-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}@media(max-width: 640px){.input-section .input-row{grid-template-columns:1fr}}.input-section .input-group{display:flex;flex-direction:column;gap:.5rem}.input-section .input-group.full-width{grid-column:1/-1}.input-section .input-group label{font-size:.875rem;font-weight:500;color:#333}.input-section .input-group label .required{color:#ef4444}.input-section .input-group input{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:6px;font-size:.9375rem;transition:all .2s}.input-section .input-group input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 3px rgba(33,150,243,.1)}.input-section .input-group input::placeholder{color:#9ca3af}.input-section .error-message{color:#ef4444;font-size:.875rem;margin-bottom:1rem;padding:.75rem;background:#fef2f2;border-radius:6px;border-left:3px solid #ef4444}.input-section .track-button{width:100%;padding:.875rem 1.5rem;background:#9e9e9e;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.input-section .track-button:hover{background:#757575}.input-section .track-button:active{transform:translateY(1px)}.track-footer{background:#fff;border-top:1px solid #e0e0e0;padding:1.5rem 2rem;text-align:center;color:#666;font-size:.875rem}.track-footer p{margin:.25rem 0}.track-footer .powered-by{display:flex;align-items:center;justify-content:center;gap:.2rem;margin-top:.5rem}.track-footer .powered-by .logo-footer{display:inline-flex;align-items:center;gap:.25rem;font-weight:600;color:#2196f3}
.tracking-details-container{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.tracking-header{background:#fff;border-bottom:1px solid #e0e0e0;padding:1.5rem 2rem}.tracking-header .header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.tracking-header .header-content h1{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin:0}.tracking-header .header-content .back-button{background:none;border:none;color:#2196f3;font-size:1rem;cursor:pointer;padding:.5rem 1rem;border-radius:6px;transition:all .2s}.tracking-header .header-content .back-button:hover{background:#f0f0f0}.tracking-header .header-content .tracking-id{font-size:.875rem;color:#666;font-family:monospace}.tracking-main{flex:1;padding:2rem}.tracking-content{max-width:1000px;margin:0 auto}.shipment-block{margin-bottom:2.5rem}.shipment-summary-toggle{background:none;border:none;padding:0;cursor:pointer;text-align:left;width:100%;display:flex;justify-content:space-between;align-items:center;transition:all .2s}.shipment-summary-toggle:hover .shipment-summary{box-shadow:0 4px 8px rgba(0,0,0,.08)}.shipment-summary-toggle .toggle-arrow{font-size:.75rem;color:#2196f3;transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);margin-left:1rem;flex-shrink:0}.shipment-summary-toggle .toggle-arrow.expanded{transform:rotate(180deg)}.shipment-summary{background:linear-gradient(135deg, #ffffff 0%, #fafafa 100%);border:1px solid #e0e0e0;border-radius:12px;padding:1rem;margin-bottom:1.5rem;box-shadow:0 2px 4px rgba(0,0,0,.05);position:relative;flex:1;transition:all .2s}.shipment-badge{display:inline-block;background:#2196f3;color:#fff;font-size:.75rem;font-weight:700;padding:.375rem .75rem;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1rem}.summary-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:1rem}@media(max-width: 768px){.summary-content{grid-template-columns:1fr;gap:.75rem}}.summary-item{display:flex;flex-direction:column;gap:.25rem}.summary-item .summary-label{font-size:.65rem;font-weight:600;text-transform:uppercase;color:#999;letter-spacing:.4px}.summary-item .summary-value{font-size:.85rem;font-weight:600;color:#1a1a1a;word-break:break-all}.summary-item .summary-value.status-badge{display:inline-block;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;text-transform:capitalize;width:fit-content}.summary-item .summary-value.status-badge.status-order_placed{background:#e3f2fd;color:#1976d2}.summary-item .summary-value.status-badge.status-order_packed{background:#f3e5f5;color:#7b1fa2}.summary-item .summary-value.status-badge.status-in_transit{background:#fff3e0;color:#e65100}.summary-item .summary-value.status-badge.status-out_for_delivery{background:#f3e5f5;color:#7b1fa2}.summary-item .summary-value.status-badge.status-delivered{background:#e8f5e9;color:#2e7d32}.shipment-separator{border:none;border-top:2px dashed #e0e0e0;margin:2.5rem 0}.loading,.error{text-align:center;padding:3rem;font-size:1.125rem;color:#666}.error{color:#ef4444}.timeline-container{background:#fff;border-radius:12px;padding:2.5rem;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:1.5rem;border:1px solid #f0f0f0;position:relative;overflow:hidden}.timeline-container::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, #2196F3 0%, #e91e63 100%)}.timeline{display:flex;justify-content:space-between;align-items:flex-start;position:relative;padding:1rem 0}@media(max-width: 768px){.timeline{flex-direction:column;gap:2rem}}.timeline-item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;text-align:center}@media(max-width: 768px){.timeline-item{flex-direction:row;text-align:left;gap:1rem}}.timeline-icon-wrapper{position:relative;z-index:2}.timeline-icon-wrapper.active .timeline-icon{background:linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);color:#fff;transform:scale(1.15);box-shadow:0 4px 12px rgba(233,30,99,.3)}.timeline-icon-wrapper.current .timeline-icon{box-shadow:0 0 0 4px rgba(233,30,99,.2);animation:pulse 2s infinite}.timeline-icon{width:60px;height:60px;border-radius:50%;background:#f0f0f0;color:#9e9e9e;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:1rem;border:2px solid #e0e0e0}@media(max-width: 768px){.timeline-icon{margin-bottom:0;width:50px;height:50px;font-size:1.25rem}}.timeline-line{position:absolute;top:30px;left:50%;width:100%;height:4px;background:#e0e0e0;z-index:1}.timeline-line.active{background:linear-gradient(90deg, #e91e63 0%, #9c27b0 100%)}@media(max-width: 768px){.timeline-line{display:none}}@media(max-width: 768px){.timeline-content{flex:1}}.timeline-label{font-size:.75rem;font-weight:700;color:#999;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.4px}.timeline-label.active{color:#1a1a1a;background:linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.timeline-date{font-size:.7rem;color:#999;font-weight:500}.order-history-section{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;border:1px solid #f0f0f0;margin-top:1.5rem}.history-toggle{width:100%;padding:1.5rem;background:linear-gradient(135deg, #fafafa 0%, #ffffff 100%);border:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:1rem;font-weight:700;color:#1a1a1a;transition:all .2s}.history-toggle:hover{background:linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%)}.history-toggle .arrow{transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);color:#2196f3;font-size:.75rem}.history-toggle .arrow.expanded{transform:rotate(180deg)}.order-history{padding:1.5rem;border-top:1px solid #f0f0f0;background:#fafafa;animation:slideDown .3s ease-out}.history-timeline{display:flex;flex-direction:column;gap:1.5rem}.history-item{display:flex;gap:1.5rem;padding:1rem;background:#fff;border-radius:8px;border-left:3px solid #2196f3;transition:all .2s}.history-item:hover{box-shadow:0 2px 4px rgba(0,0,0,.05)}.history-marker{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:.5rem;flex-shrink:0}.history-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg, #2196F3 0%, #1976d2 100%);border:3px solid #fff;flex-shrink:0;box-shadow:0 2px 4px rgba(33,150,243,.3)}.history-line{width:2px;flex:1;background:linear-gradient(180deg, #2196F3 0%, #e0e0e0 100%);margin-top:.75rem}.history-content{flex:1;padding-bottom:.5rem}.history-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.35rem;flex-wrap:wrap;gap:.5rem}.history-header h4{font-size:.8rem;font-weight:700;color:#1a1a1a;margin:0;text-transform:capitalize}.history-header .history-time{font-size:.65rem;color:#999;font-weight:500;background:#f0f0f0;padding:.2rem .4rem;border-radius:3px}.history-location{font-size:.75rem;color:#2196f3;margin-bottom:.35rem;font-weight:600;display:inline-block}.history-description{font-size:.75rem;color:#666;line-height:1.5;margin:.35rem 0 0 0}.tracking-footer{background:#fff;border-top:1px solid #e0e0e0;padding:1.5rem 2rem;text-align:center;color:#666;font-size:.875rem}.tracking-footer p{margin:.25rem 0}.tracking-footer .powered-by{display:flex;align-items:center;justify-content:center;gap:.2rem;margin-top:.5rem}.tracking-footer .powered-by .logo-footer{font-weight:600;color:#2196f3}@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(233,30,99,.2)}50%{box-shadow:0 0 0 8px rgba(233,30,99,.1)}}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}.app{min-height:100vh;display:flex;flex-direction:column}