/* =========================================
   TRACKING CONTAINER
========================================= */

.medibyx-rpx .rpx-tracking-box{

max-width:900px;
margin:70px auto;

padding:40px;

background:#fff;

border-radius:16px;

box-shadow:0 12px 40px rgba(0,0,0,.06);

border:1px solid #f2f2f2;

}


/* =========================================
   HEADER
========================================= */

.medibyx-rpx .rpx-tracking-title{

font-size:30px;
font-weight:700;

}

.medibyx-rpx .rpx-tracking-subtitle{

margin-top:6px;

font-size:14px;

color:#777;

}


/* =========================================
   FORM
========================================= */

.medibyx-rpx .rpx-track-form{

display:grid;

grid-template-columns:1fr 140px;

gap:14px;

margin-top:26px;
margin-bottom:32px;

}

.medibyx-rpx .rpx-track-input{

padding:16px 18px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

height:48px;

}

.medibyx-rpx .rpx-track-input:focus{

outline:none;

border-color:var(--rpx-primary);

}


/* BUTTON */

.medibyx-rpx .rpx-track-btn{

height:48px;

background:var(--rpx-primary);

color:#fff;

border:none;

border-radius:10px;

font-weight:600;

cursor:pointer;

transition:all .15s ease;

display:flex;

align-items:center;

justify-content:center;

gap:6px;

}

.medibyx-rpx .rpx-track-btn:hover{

background:var(--rpx-primary-hover);

transform:translateY(-1px);

}

.medibyx-rpx .rpx-track-btn:disabled{

opacity:.6;

cursor:not-allowed;

}


/* =========================================
   STATUS BADGE
========================================= */

.medibyx-rpx .rpx-status-badge{

display:inline-block;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:600;

margin-bottom:22px;

}

.medibyx-rpx .rpx-status-in_transit{

background:rgba(255,102,0,.12);

color:#ff6600;

}

.medibyx-rpx .rpx-status-delivered{

background:#e8f7ef;

color:#0a7a35;

}

.medibyx-rpx .rpx-status-failed{

background:#ffecec;

color:#c40000;

}


/* =========================================
   SHIPMENT STEP PROGRESS
========================================= */

.medibyx-rpx .rpx-steps{

display:flex;

justify-content:space-between;

margin-bottom:32px;

position:relative;

}

.medibyx-rpx .rpx-steps::before{

content:"";

position:absolute;

top:8px;

left:0;
right:0;

height:2px;

background:#eee;

z-index:0;

}

.medibyx-rpx .rpx-step-progress{

text-align:center;

position:relative;

z-index:1;

flex:1;

}

.medibyx-rpx .rpx-step-circle{

width:16px;
height:16px;

border-radius:50%;

background:#ddd;

border:3px solid #fff;

margin:0 auto;

}

.medibyx-rpx .rpx-step-progress.active .rpx-step-circle{

background:var(--rpx-primary);

}

.medibyx-rpx .rpx-step-label{

font-size:12px;

margin-top:6px;

color:#777;

}

.medibyx-rpx .rpx-step-progress.active .rpx-step-label{

color:#000;

font-weight:600;

}


/* =========================================
   SUMMARY CARD
========================================= */

.medibyx-rpx .rpx-summary-card{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

background:#f8f8f8;

padding:22px 26px;

border-radius:12px;

margin-bottom:28px;

}

.medibyx-rpx .rpx-summary-item strong{

display:block;

font-size:11px;

color:#777;

margin-bottom:6px;

}

.medibyx-rpx .rpx-summary-item span{

font-size:16px;

font-weight:600;

}


/* =========================================
   TIMELINE
========================================= */

.medibyx-rpx .rpx-timeline{

position:relative;

border-left:2px solid #eee;

padding-left:42px;

margin-top:10px;

}

.medibyx-rpx .rpx-step{

position:relative;

margin-bottom:28px;

}

.medibyx-rpx .rpx-dot{

position:absolute;

left:-47px;

top:6px;

width:14px;

height:14px;

border-radius:50%;

background:#fff;

border:3px solid #ddd;

}

.medibyx-rpx .rpx-dot.active{

border-color:var(--rpx-primary);

background:var(--rpx-primary);

box-shadow:0 0 0 6px rgba(255,102,0,.15);

}

.medibyx-rpx .rpx-step-title{

font-size:15px;

font-weight:600;

}

.medibyx-rpx .rpx-step-time{

font-size:13px;

color:#666;

margin-top:4px;

}

.medibyx-rpx .rpx-step-location{

font-size:13px;

color:#999;

margin-top:2px;

}


/* =========================================
   LOADING
========================================= */

.medibyx-rpx .rpx-loading{

text-align:center;

padding:30px;

}

.medibyx-rpx .rpx-spinner{

width:30px;

height:30px;

border:3px solid #eee;

border-top:3px solid var(--rpx-primary);

border-radius:50%;

animation:rpx-spin 1s linear infinite;

margin:0 auto 10px;

}

@keyframes rpx-spin{

to{ transform:rotate(360deg); }

}


/* =========================================
   ERROR
========================================= */

.medibyx-rpx .rpx-error{

padding:18px;

background:#ffecec;

border-radius:8px;

color:var(--rpx-danger);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:640px){

.medibyx-rpx .rpx-track-form{
grid-template-columns:1fr;
}

.medibyx-rpx .rpx-summary-card{
grid-template-columns:1fr;
}

}