:root { --primary:#ff6b00; --dark:#1a1a1a; --white:#ffffff; --grey:#f4f4f4; }
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Tahoma, Geneva, Verdana, sans-serif;background:#ffffff;color:#1a1a1a;line-height:1.5;}
.rtl{direction:rtl;text-align:right;}
.main-header{background:var(--dark);color:var(--white);padding:15px 20px;position:fixed;top:0;left:0;right:0;z-index:9999;box-shadow:0 2px 10px rgba(0,0,0,.2);}
.main-header .logo{font-size:1.4rem;font-weight:800;color:var(--primary);}
.main-header nav a{margin-left:14px;color:var(--white);text-decoration:none;font-weight:600;}
.main-header nav .btn-ghost{background:rgba(255,255,255,.1);padding:6px 12px;border-radius:5px;}
body {margin-top:70px;}
.container{max-width:1100px;margin:24px auto;padding:0 15px;}
.auth-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 100px);}
.card{background:#fff;border:1px solid #e7e7e7;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 4px 14px rgba(0,0,0,.04);}
.login-card{width:100%;max-width:380px;text-align:right;}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.card.compact{padding:16px;text-align:center;}.card.compact h3{margin:0;font-size:1rem;color:#777;}.card.compact p{font-size:2rem;margin:4px 0 0 0;font-weight:700;color:var(--primary);}
.table-responsive{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
table th, table td{padding:10px;border:1px solid #efefef;}
table th{background:#f9f9f9;color:#333;}
.btn{background:var(--primary);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer;transition:.2s;text-decoration:none;display:inline-block;}
.btn:hover{background:#e05b00;}
.btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--primary);padding:8px 12px;border-radius:8px;text-decoration:none;}
.btn-ghost:hover{background:#f8f0eb;}
.btn.danger{background:#d32f2f;}
.alert{padding:10px 12px;border-radius:8px;margin-bottom:14px;}
.alert.success{background:#e8f8ed;color:#157a32;border:1px solid #a3d7b1;}
.alert.error{background:#f8e6e6;color:#a33a3a;border:1px solid #e0b6b6;}
input, textarea, select{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin:8px 0 14px 0;outline:none;}
input:focus{border-color:var(--primary);}
.hero-card{position:fixed;top:70px;left:0;width:100vw;height:calc(100vh - 70px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(135deg, #fff8f3 0%, #fffbf8 100%);border:none;border-radius:0;box-shadow:none;z-index:10;padding:40px;}
.hero-card h1{font-size:2rem;color:var(--dark);margin:0 0 10px;}
.hero-card p{color:#555;margin-bottom:20px;}
.tracking-form{display:grid;grid-template-columns:1fr auto;gap:10px;}
.tracking-form input{font-size:1rem;}
.loader{border:4px solid #f3f3f3;border-top:4px solid var(--primary);border-radius:50%;width:36px;height:36px;animation:spin .8s linear infinite;margin:16px auto;}
.loader.hidden{display:none;}
.result-box{margin-top:18px;}
.result-box .summary{padding:14px;border:1px solid #eee;border-radius:10px;background:#fcfcfc;}
.timeline{position:relative;margin-top:20px;padding-left:12px;}
.timeline:before{content:'';position:absolute;top:0;left:9px;width:4px;height:100%;background:var(--primary);}
.timeline-item{position:relative;padding:14px 12px 14px 30px;border-radius:10px;background:#fff;border:1px solid #f1f1f1;margin-bottom:14px;box-shadow:0 3px 8px rgba(0,0,0,.03);}
.timeline-item:before{content:'';position:absolute;top:16px;left:-5px;width:12px;height:12px;background:#1a1a1a;border-radius:50%;border:3px solid var(--white);}
.timeline-item h4{margin:0 0 4px;font-size:1rem;color:#222;}
.timeline-item p{margin:3px 0;color:#333;}
.progress-container{margin:14px 0;padding:12px;border:1px solid #eee;background:#fff;border-radius:10px;}
.progress-label{margin:0 0 8px;font-weight:600;color:#333;}
.progress-bar{width:100%;height:18px;background:#ececec;border-radius:9px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg, #ff6b00 0%, #d35400 100%);transition:width .3s ease;}
.progress-text{margin-top:8px;font-size:.92rem;color:#555;}
.shipment-tracker{margin:20px 0;padding:30px 15px;background:linear-gradient(135deg, #fff8f3 0%, #fffbf8 100%);border:1px solid #ffe0cc;border-radius:12px;}
.shipment-tracker{margin:20px 0;padding:30px 15px;background:#2a2a2a;border-radius:16px;}
.tracker-line{position:relative;height:4px;background:#ff6b00;border-radius:2px;margin:24px 0;}
.tracker-progress{position:absolute;top:0;left:0;height:100%;background:#ff6b00;border-radius:2px;width:0;transition:width .4s ease;z-index:2;}
.tracker-dots{display:flex;justify-content:space-between;position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);z-index:3;pointer-events:none;}
.tracker-dot{width:28px;height:28px;border-radius:50%;border:3px solid;box-shadow:0 2px 10px rgba(0,0,0,.5);}
.tracker-dot.inactive{background:#fff;border-color:#fff;}
.tracker-dot.active{background:#ff6b00;border-color:#ff6b00;}
.tracker-truck{position:absolute;top:50%;left:0%;transform:translate(-50%, -50%);font-size:28px;z-index:4;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));}
.tracker-labels{display:flex;justify-content:space-between;margin-top:16px;font-size:.8rem;color:#ccc;}
.tracker-label{flex:1;text-align:center;min-width:50px;word-break:break-word;}
.tracker-label strong{display:block;font-size:.85rem;color:#fff;margin-bottom:4px;}
.tracker-label span{font-size:.75rem;color:#999;}
@keyframes bounce{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,-60%);}}
.updates-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:24px;margin:20px 0;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.updates-card h2{margin:0 0 16px;color:#1a1a1a;text-align:right;}
.steps-container{display:flex;flex-direction:column;gap:0;}
.step{display:flex;gap:16px;align-items:flex-start;flex-direction:row-reverse;margin:12px 0;}
.step-circle{width:48px;height:48px;border-radius:50%;border:3px solid;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;background:#fff;}
.step-content{flex:1;}
.step-content h3{margin:0 0 6px;font-size:1rem;color:#333;text-align:right;}
.step-content p{margin:4px 0;color:#666;text-align:right;font-size:.95rem;}
.step-content small{display:block;color:#999;font-size:.85rem;margin-top:4px;text-align:right;}
.step-divider{width:2px;height:40px;background:#ddd;margin:8px auto;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px;}
.stat-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.stat-icon{font-size:1.5rem;}
.stat-count{font-size:1.8rem;font-weight:700;color:#ff6b00;}
.stat-label{font-size:.85rem;color:#666;text-align:center;word-break:break-word;}
@media (max-width:768px){.stats-grid{grid-template-columns:1fr 1fr;}}
.status-bar-overview{display:flex;align-items:center;justify-content:space-between;background:#f4f4f4;border:1px solid #ddd;border-radius:50px;padding:16px 12px;gap:0;margin:16px 0;overflow-x:auto;position:relative;}
.status-bar-overview:before{content:'';position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);height:2px;background:#ccc;z-index:1;transition:background .35s ease;}
.status-item{position:relative;display:flex;align-items:center;gap:8px;min-width:120px;padding:8px 12px;border-radius:30px;background:rgba(0,0,0,.03);color:#777;transition:all .35s ease;z-index:2;}
.status-item:not(:last-child)::after{content:'';position:absolute;top:50%;right:-25px;width:50px;height:2px;background:#ccc;transform:translateY(-50%);z-index:1;transition:background .35s ease;}
.status-item.active{background:none;color:#157a32;font-weight:700;}
.status-item.current{background:#b4e2b1;color:#0f8f34;animation:slideBounce .5s ease forwards;}
.status-item.active:not(:last-child)::after{background:#1cbc52;}
.status-item .dot{width:12px;height:12px;border-radius:50%;background:#ccc;transition:background .35s ease;}
.status-item.active .dot{background:#1cbc52;}
.status-item.current .dot{box-shadow:0 0 0 4px rgba(28,188,82,.35);}
.status-item .label{font-size:.87rem;white-space:nowrap;}

@keyframes slideBounce {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
.status-item .icon{font-size:1.2rem;}
.status-item.faded{opacity:.35;}

@keyframes bounce{0%, 100%{transform:translate(-50%, -50%);} 50%{transform:translate(-50%, -60%);}}
@keyframes spin{100%{transform:rotate(360deg);}}

/* Responsive improvements */
@media (max-width: 1024px) {
    .container {padding: 0 12px;}
    .main-header {padding: 12px 14px;}
    .main-header .logo {font-size: 1.2rem;}
    .main-header nav a {margin-left: 10px; font-size: 0.95rem;}
    .hero-card {padding: 30px;}
    .hero-card h1 {font-size: 1.8rem;}
    .hero-card p {font-size: 0.95rem;}
    .tracking-form {grid-template-columns: 1fr auto; gap: 8px;}
    .tracking-form input {font-size: 0.95rem;}
    .btn {padding: 10px 14px;}
    .status-bar-overview {padding: 12px 10px;}
    .status-item {min-width: 100px; padding: 7px 10px;}
}

@media (max-width: 768px) {
    .header-content {flex-direction: column; align-items: flex-start; gap: 10px;}
    .main-header nav ul {display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;}
    .main-header nav a {margin-left: 0;}
    .hero-card {position: static; width: auto; min-height: unset; height: auto; padding: 20px; margin: 20px 0; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.08);}
    .tracking-form {display: flex; flex-direction: column;}
    .tracking-form button {width: 100%;}
    .step {flex-direction: column; text-align: right;}
    .status-bar-overview {flex-wrap: wrap; justify-content: center; overflow-x: visible; padding: 8px;}
    .status-item {min-width: auto; font-size: 0.8rem; gap: 4px;}
    .tracker-labels {font-size: 0.72rem;}
    .tracker-dot {width: 22px; height: 22px;}
    .tracker-truck {font-size: 22px;}
}

@media (max-width: 480px) {
    body {font-size: 14px;}
    .main-header .logo {font-size: 1rem;}
    .main-header nav a {font-size: 0.85rem;}
    .hero-card {padding: 18px;}
    .hero-card h1 {font-size: 1.5rem;}
    .hero-card p {font-size: 0.9rem;}
    .tracking-form input {font-size: 0.9rem; padding: 12px;}
    .tracking-form button {font-size: 0.95rem;}
    .result-box .summary {font-size: 0.9rem;}
    .status-item .label {display: none;}
    .status-item {padding: 6px 8px;}
}


/* Header Styles */
.main-header {
    background: var(--dark);
    color: var(--white);
    padding: 15px 20px;
    position: relative;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.logo h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.main-nav a {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--primary);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.contact-item .icon {
    font-size: 1.2rem;
}

/* Footer Styles */
.main-footer {
    background: var(--dark);
    color: var(--white);
    padding: 40px 20px 20px;
    margin-top: 50px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 30px;
}

.footer-section h3 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.footer-section p {
    margin: 8px 0;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--primary);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-bottom p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #ccc;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .main-nav ul {
        gap: 15px;
    }
    
    .contact-info {
        align-items: center;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}
@media (max-width:768px){.tracking-form{grid-template-columns:1fr;} .main-header{flex-wrap:wrap;}.main-header nav{margin-top:8px;}}