@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

.jigji-track-page{
    --ink:#1c1917;
    --paper:#fbf7f2;
    --red:#c10000;
    --red-deep:#8f0000;
    --sand:#f0e6da;
    --muted:#6b6660;
    --line:#e8e0d5;

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

    min-height:70vh;
    background:var(--paper);
    font-family:'Inter',Arial,sans-serif;
    color:var(--ink);
    padding:80px 20px;
    overflow-x:hidden;
}

.track-container{
    max-width:720px;
    margin:0 auto;
}

.track-header{
    text-align:center;
    margin-bottom:40px;
}

.eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--red-deep);
    background:var(--sand);
    padding:8px 18px;
    border-radius:50px;
    margin-bottom:20px;
}

.track-header h1{
    font-family:'Fraunces',serif;
    font-size:clamp(28px, 4vw, 40px);
    margin:0 0 14px;
}

.track-header p{
    color:var(--muted);
    font-size:16px;
    margin:0;
}

.track-form{
    display:flex;
    gap:14px;
    background:#fff;
    padding:14px;
    border-radius:16px;
    border:1px solid var(--line);
    box-shadow:0 15px 40px rgba(28,25,23,.06);
}

.track-form input{
    flex:1;
    height:52px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:0 18px;
    font-size:15px;
    min-width:0;
}

.track-form input:focus{
    outline:none;
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(193,0,0,.12);
}

.track-form button{
    height:52px;
    padding:0 28px;
    border:none;
    border-radius:10px;
    background:var(--red);
    color:#fff;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    transition:.25s;
    white-space:nowrap;
}

.track-form button:hover{
    background:var(--red-deep);
}

.track-form button:disabled{
    opacity:.7;
    cursor:not-allowed;
}

#track-message{
    margin-top:18px;
}

#track-message:empty{
    display:none;
}

.track-message-error{
    background:#fdecea;
    color:#b71c1c;
    padding:14px 18px;
    border-radius:10px;
    border:1px solid #ffcdd2;
    font-size:14px;
}

.track-result{
    margin-top:40px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:36px;
    box-shadow:0 15px 40px rgba(28,25,23,.06);
}

.track-summary{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    margin-bottom:44px;
    padding-bottom:28px;
    border-bottom:1px solid var(--line);
}

.track-summary > div{
    display:flex;
    flex-direction:column;
}

.track-summary .label{
    display:flex;
    align-items:flex-end;
    min-height:2.4em;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted);
    font-weight:600;
    margin-bottom:6px;
}
.track-summary .value{
    display:block;
    font-size:15px;
    font-weight:700;
    word-break:break-word;
}

.track-timeline{
    display:flex;
    justify-content:space-between;
    position:relative;
}

.track-timeline::before{
    content:"";
    position:absolute;
    top:9px;
    left:20px;
    right:20px;
    height:3px;
    background:var(--line);
    z-index:0;
}

.timeline-step{
    position:relative;
    z-index:1;
    flex:1;
    text-align:center;
}

.step-dot{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--line);
    border:3px solid #fff;
    box-shadow:0 0 0 2px var(--line);
    margin:0 auto 12px;
    transition:.3s;
}

.timeline-step.completed .step-dot{
    background:var(--red);
    box-shadow:0 0 0 2px var(--red);
}

.timeline-step.current .step-dot{
    background:var(--red);
    box-shadow:0 0 0 2px var(--red), 0 0 0 6px rgba(193,0,0,.15);
}

.step-label{
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}

.timeline-step.completed .step-label,
.timeline-step.current .step-label{
    color:var(--ink);
}

.track-updated{
    margin:32px 0 0;
    text-align:center;
    font-size:13px;
    color:var(--muted);
}

@media(max-width:640px){

    .jigji-track-page{
        padding:50px 16px;
    }

    .track-form{
        flex-direction:column;
    }

    .track-summary{
        grid-template-columns:1fr;
        gap:14px;
    }

    .track-result{
        padding:26px;
    }

    .track-timeline{
        flex-direction:column;
        gap:26px;
        align-items:flex-start;
    }

    .track-timeline::before{
        top:0;
        bottom:0;
        left:9px;
        right:auto;
        width:3px;
        height:auto;
    }

    .timeline-step{
        display:flex;
        align-items:center;
        gap:14px;
        text-align:left;
    }

    .step-dot{
        margin:0;
        flex-shrink:0;
    }

}