:root{
    --clot-dark:#24120b;
    --clot-brown:#5b2d16;
    --clot-gold:#c8924f;
    --clot-cream:#fff9f4;
    --clot-line:#eadfd6;
    --clot-green:#18794e;
    --clot-muted:#7a6c64;
}

.clot-track-page{
    max-width:980px;
    margin:34px auto;
    padding:0 16px;
    font-family:inherit;
}
.clot-track-head{
    text-align:center;
    margin-bottom:22px;
}
.clot-track-head span{
    display:block;
    color:var(--clot-gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
}
.clot-track-head h2{
    margin:8px 0 6px;
    color:var(--clot-dark);
    font-size:30px;
}
.clot-track-head p{
    margin:0;
    color:var(--clot-muted);
}
.clot-track-form{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:10px;
    padding:14px;
    background:var(--clot-cream);
    border:1px solid var(--clot-line);
    border-radius:18px;
    box-shadow:0 14px 38px rgba(36,18,11,.06);
}
.clot-field label{
    display:block;
    font-size:12px;
    font-weight:800;
    color:var(--clot-dark);
    margin-bottom:6px;
}
.clot-field input{
    width:100%;
    height:46px;
    padding:0 12px;
    border:1px solid #ddcfc5;
    border-radius:11px;
    background:#fff;
    font:inherit;
    outline:none;
}
.clot-field input:focus{
    border-color:var(--clot-gold);
    box-shadow:0 0 0 3px rgba(200,146,79,.12);
}
.clot-track-form button{
    align-self:end;
    height:46px;
    border:0;
    border-radius:11px;
    padding:0 22px;
    background:var(--clot-dark);
    color:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}
.clot-track-form button:disabled{opacity:.6;cursor:wait}

.clot-track-result{margin-top:18px}
.clot-loading,.clot-error{
    padding:14px 16px;
    border-radius:12px;
    text-align:center;
}
.clot-loading{background:#fff8ef;color:#6b4a31}
.clot-error{background:#fff1f0;color:#b42318;border:1px solid #ffd0cc}

.clot-card{
    background:#fff;
    border:1px solid var(--clot-line);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 18px 55px rgba(36,18,11,.08);
}
.clot-order-top{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:#efe5dc;
}
.clot-order-top>div{
    background:var(--clot-cream);
    padding:16px;
}
.clot-order-top small{
    display:block;
    color:var(--clot-muted);
    font-size:11px;
    margin-bottom:6px;
}
.clot-order-top strong{
    color:var(--clot-dark);
    font-size:14px;
}
.clot-current-status{color:var(--clot-green)!important}
.clot-danger{color:#b42318!important}

.clot-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    padding:32px 24px 26px;
}
.clot-timeline:before{
    content:"";
    position:absolute;
    top:55px;
    right:8%;
    left:8%;
    height:3px;
    background:#eadfd6;
    border-radius:999px;
}
.clot-step{
    position:relative;
    z-index:2;
    text-align:center;
}
.clot-dot{
    width:48px;
    height:48px;
    margin:0 auto 11px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:3px solid #eadfd6;
    background:#fff;
    color:#a79890;
    font-weight:900;
    transition:.2s ease;
}
.clot-step.done .clot-dot{
    background:var(--clot-green);
    border-color:var(--clot-green);
    color:#fff;
}
.clot-step.active .clot-dot{
    background:var(--clot-dark);
    border-color:var(--clot-gold);
    color:#fff;
    box-shadow:0 0 0 6px rgba(200,146,79,.13);
}
.clot-step-copy strong{
    display:block;
    font-size:12px;
    color:var(--clot-dark);
}
.clot-step-copy small{
    display:block;
    margin-top:4px;
    color:var(--clot-muted);
    font-size:10px;
}
.clot-step.future{opacity:.58}

.clot-bottom{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:13px 18px;
    background:var(--clot-dark);
    color:#fff;
    font-size:12px;
}
.clot-problem{
    margin:24px;
    padding:16px;
    border:1px solid #ffc9c4;
    background:#fff4f3;
    color:#a61b12;
    border-radius:13px;
    line-height:1.9;
}
.clot-account-wrap{margin:22px 0}
.clot-account-wrap>h3{margin-bottom:12px}

@media(max-width:800px){
    .clot-track-form{grid-template-columns:1fr}
    .clot-track-form button{width:100%}
    .clot-order-top{grid-template-columns:1fr 1fr}
    .clot-timeline{
        display:block;
        padding:20px 18px;
    }
    .clot-timeline:before{
        top:25px;
        bottom:25px;
        right:41px;
        left:auto;
        width:3px;
        height:auto;
    }
    .clot-step{
        display:flex;
        align-items:center;
        gap:13px;
        text-align:right;
        margin:0 0 18px;
    }
    .clot-dot{
        flex:0 0 48px;
        margin:0;
    }
    .clot-bottom{flex-direction:column;text-align:center}
}