.elta-tracking{
  --elta-primary:#3b82f6;
  --elta-primary-rgba:rgba(59,130,246,0.2);
  --elta-container-max-width:1100px;
  --elta-results-max-width:1100px;
  --elta-output-min-height:0px;
  color:#0f172a;
  padding:28px 0;
  background:
    radial-gradient(1000px 500px at 10% 0%, var(--elta-primary-rgba) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(34,197,94,0.12) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f8fafc 0%, #ffffff 65%, #ffffff 100%);
}

.elta-tracking *,
.elta-tracking *::before,
.elta-tracking *::after{
  box-sizing:border-box;
}

.elta-tracking img{
  max-width:100%;
  height:auto;
}

.elta-tracking-container{
  max-width:var(--elta-container-max-width,1100px);
  width:100%;
  margin:0 auto 32px auto;
  padding:0 20px;
}

.elta-tracking-output{
  min-height:var(--elta-output-min-height,0px);
  padding:0 0 28px 0;
}

.elta-tracking-form-wrapper{
  background:#ffffff;
  border-radius:16px;
  padding:40px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
  border:1px solid rgba(15,23,42,0.08);
}

.elta-form-title{
  font-size:24px;
  font-weight:700;
  color:#111827;
  margin:0 0 8px 0;
  text-align:center;
}

.elta-form-subtitle{
  font-size:16px;
  color:#6b7280;
  margin:0 0 32px 0;
  text-align:center;
}

.elta-field{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.elta-field-label{
  font-size:13px;
  font-weight:700;
  color:#334155;
  letter-spacing:0.2px;
}

.elta-input-group{
  position:relative;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.elta-input{
  padding:10px 12px;
  border:1px solid #ccd0d4;
  border-radius:6px;
  background:#ffffff;
  color:#111827;
}

.elta-input:focus{
  outline:none;
  border-color:var(--elta-primary);
  box-shadow:0 0 0 3px var(--elta-primary-rgba);
}

.elta-input-group input.elta-input{
  flex:1;
  min-width:280px;
  height:56px;
  padding:0 20px;
  font-size:16px;
  border:2px solid #e5e7eb;
  border-radius:12px;
  transition:all 0.2s ease;
}

.elta-input-group input.elta-input:focus{
  outline:none;
  border-color:var(--elta-primary);
  box-shadow:0 0 0 4px var(--elta-primary-rgba);
}

.elta-input-group input.elta-input::placeholder{
  color:#9ca3af;
}

.elta-btn{
  padding:10px 14px;
  border-radius:6px;
  border:1px solid #1d2327;
  background:#1d2327;
  color:#fff;
  cursor:pointer;
}

.elta-btn-primary{
  background:var(--elta-primary);
  border-color:var(--elta-primary);
}

.elta-btn-primary:hover{
  filter:brightness(0.95);
}

.elta-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.elta-input-group .elta-btn{
  height:56px;
  padding:0 32px;
  font-size:16px;
  font-weight:600;
  color:#ffffff;
  background:var(--elta-primary);
  border:none;
  border-radius:12px;
  transition:all 0.2s ease;
  white-space:nowrap;
}

.elta-input-group .elta-btn:hover{
  transform:translateY(-2px);
  filter:brightness(0.95);
  box-shadow:0 10px 20px -5px var(--elta-primary-rgba);
}

.elta-input-group .elta-btn:active{
  transform:translateY(0);
}

.elta-card{
  margin-top:16px;
  border:1px solid #dcdcde;
  border-radius:8px;
  padding:14px;
  background:#fff;
}

.elta-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.elta-col{
  flex:1;
  min-width:220px;
}

.elta-muted{
  color:#646970;
  font-size:13px;
}

.elta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.elta-tracking .elta-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e2e8f0;
}

.elta-tracking .elta-table th{
  background:#f8fafc;
  padding:16px;
  text-align:left;
  font-size:12px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid #e2e8f0;
}

.elta-tracking .elta-table td{
  padding:16px;
  border-bottom:1px solid #f1f5f9;
  color:#334155;
}

.elta-tracking .elta-table tbody tr:hover{
  background:#f8fafc;
}

.elta-tracking .elta-table tbody tr:last-child td{
  border-bottom:none;
}

.elta-barcode{
  font-family:monospace;
  letter-spacing:2px;
  font-size:14px;
  margin-top:8px;
}

.elta-history-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f0f0f1;
}

.elta-history-item:last-child{
  border-bottom:0;
}

.elta-label{
  border:1px dashed #8c8f94;
  border-radius:8px;
  padding:12px;
  margin:12px 32px 32px 32px;
}

.elta-status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 20px;
  border-radius:9999px;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  background:var(--elta-primary);
  color:#ffffff;
}

.elta-status-delivered{
  background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
}

.elta-status-transit{
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
}

.elta-status-pending{
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
}

.elta-status-exception{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
}

.elta-status-default{
  background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);
}

.elta-results-container{
  max-width:var(--elta-results-max-width,1100px);
  width:100%;
  margin:0 auto 32px auto;
  padding:0 20px;
}

.elta-result-card{
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.08);
}

.elta-result-header{
  background:linear-gradient(135deg,#ffffff 0%,rgba(255,255,255,0.85) 35%,var(--elta-primary-rgba) 100%);
  padding:32px;
  border-bottom:1px solid #e2e8f0;
}

.elta-result-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

.elta-result-header-main{
  min-width:0;
}

.elta-header-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px 0;
}

.elta-tracking img.elta-company-logo{
  display:block;
  height:40px !important;
  width:auto !important;
  max-height:40px !important;
  max-width:min(240px,70vw);
  object-fit:contain;
}

.elta-result-header-media{
  display:flex;
  justify-content:flex-end;
  flex:0 0 auto;
}

.elta-tracking img.elta-featured-image{
  display:block;
  width:92px !important;
  height:92px !important;
  max-width:92px !important;
  max-height:92px !important;
  border-radius:14px;
  object-fit:cover;
  border:1px solid #e2e8f0;
  background:#ffffff;
}

.elta-tracking-number-display{
  font-size:32px;
  font-weight:800;
  color:#1e293b;
  letter-spacing:2px;
  margin:0 0 16px 0;
}

.elta-details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
  padding:32px;
}

.elta-detail-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.elta-detail-label{
  font-size:12px;
  font-weight:600;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.elta-detail-value{
  font-size:16px;
  font-weight:600;
  color:#1e293b;
}

.elta-timeline-section{
  padding:32px;
  border-top:1px solid #e2e8f0;
}

.elta-packages-section{
  padding:32px;
  border-top:1px solid #e2e8f0;
}

.elta-section-title{
  font-size:18px;
  font-weight:700;
  color:#1e293b;
  margin:0 0 24px 0;
  display:flex;
  align-items:center;
  gap:10px;
}

.elta-timeline{
  position:relative;
  padding-left:24px;
}

.elta-timeline::before{
  content:'';
  position:absolute;
  left:7px;
  top:0;
  bottom:0;
  width:2px;
  background:#e2e8f0;
}

.elta-timeline-event{
  position:relative;
  padding-bottom:24px;
  padding-left:24px;
}

.elta-timeline-event:last-child{
  padding-bottom:0;
}

.elta-timeline-dot{
  position:absolute;
  left:-24px;
  top:4px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#3b82f6;
  border:3px solid #ffffff;
  box-shadow:0 0 0 2px #3b82f6;
}

.elta-timeline-event.completed .elta-timeline-dot{
  background:#22c55e;
  box-shadow:0 0 0 2px #22c55e;
}

.elta-timeline-event.current .elta-timeline-dot{
  background:var(--elta-primary);
  box-shadow:0 0 0 2px var(--elta-primary);
  animation:elta-pulse 2s infinite;
}

@keyframes elta-pulse{
  0%,100%{box-shadow:0 0 0 2px var(--elta-primary),0 0 0 6px var(--elta-primary-rgba)}
  50%{box-shadow:0 0 0 2px var(--elta-primary),0 0 0 10px rgba(59,130,246,0)}
}

.elta-event-title{
  font-weight:700;
  color:#1e293b;
  margin-bottom:4px;
}

.elta-event-meta{
  font-size:14px;
  color:#64748b;
  line-height:1.5;
}

.elta-actions-section{
  padding:24px 32px;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  display:flex;
  gap:12px;
  justify-content:flex-end;
}

.elta-btn-secondary{
  padding:12px 24px;
  font-size:14px;
  font-weight:600;
  color:#64748b;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s ease;
}

.elta-btn-secondary:hover{
  background:#f1f5f9;
  border-color:#cbd5e1;
}

@media (max-width:640px){
  .elta-tracking-form-wrapper{
    padding:24px;
  }

  .elta-input-group{
    flex-direction:column;
  }

  .elta-input-group input.elta-input,
  .elta-input-group .elta-btn{
    width:100%;
  }
}

@media (max-width:768px){
  .elta-tracking-number-display{
    font-size:24px;
  }

  .elta-result-header-row{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .elta-result-header-media{
    justify-content:flex-start;
  }

  .elta-tracking img.elta-company-logo{
    height:36px !important;
    max-height:36px !important;
    max-width:min(240px,80vw);
  }

  .elta-tracking img.elta-featured-image{
    width:80px !important;
    height:80px !important;
    max-width:80px !important;
    max-height:80px !important;
  }

  .elta-details-grid{
    grid-template-columns:1fr;
    gap:20px;
    padding:24px;
  }

  .elta-result-header,
  .elta-timeline-section,
  .elta-packages-section,
  .elta-actions-section{
    padding:24px;
  }

  .elta-label{
    margin:12px 24px 24px 24px;
  }
}