/* ============================================================
   ZR Express — Order Tracking (customer page)
   Mobile-first, accessible. Brand: blue -> purple (KODAZD).
   ============================================================ */
.zrt-wrap {
    --zrt-accent:#0e9fc1; --zrt-accent-dark:#7e03bc;
    --zrt-text:#14161a; --zrt-heading:#0b0d10; --zrt-muted:#667085;
    --zrt-card-bg:#fff; --zrt-card-border:#e9ebf0; --zrt-field-bg:#fff; --zrt-field-border:#d6dae1;
    --zrt-soft:#f7f8fb; --zrt-ok:#027a48; --zrt-err:#e11d48;
    --zrt-radius:20px; --zrt-field-radius:13px;
    --zrt-grad:linear-gradient(120deg,var(--zrt-accent),var(--zrt-accent-dark));
    --zrt-ring:0 0 0 4px color-mix(in srgb,var(--zrt-accent) 18%,transparent);
    direction:ltr; text-align:left; color:var(--zrt-text); font-family:inherit;
    -webkit-font-smoothing:antialiased; max-width:760px; margin:0 auto; line-height:1.5;
}
.zrt-wrap *,.zrt-wrap *::before,.zrt-wrap *::after{box-sizing:border-box;}

/* Banner */
.zrt-banner{background:var(--zrt-grad); color:#fff; border-radius:var(--zrt-radius);
    padding:24px 28px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between;
    gap:16px; position:relative; overflow:hidden;
    box-shadow:0 16px 36px color-mix(in srgb,var(--zrt-accent-dark) 28%,transparent);}
.zrt-banner::after{content:""; position:absolute; inset:-45% -8% auto auto; width:300px; height:300px;
    background:radial-gradient(circle,rgba(255,255,255,.20),transparent 70%); pointer-events:none;}
.zrt-banner-text{position:relative; z-index:1; min-width:0;}
.zrt-title{font-size:clamp(21px,4.2vw,27px); font-weight:800; margin:0; color:#fff; line-height:1.2;}
.zrt-sub{margin:7px 0 0; color:rgba(255,255,255,.92); font-size:14.5px;}
.zrt-banner-badge{display:inline-flex; align-items:center; gap:8px; flex-shrink:0; position:relative; z-index:1;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); padding:10px 15px;
    border-radius:999px; font-weight:700; font-size:13px; backdrop-filter:blur(6px); white-space:nowrap;}

/* Search form */
.zrt-form{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
    background:var(--zrt-card-bg); border:1px solid var(--zrt-card-border); border-radius:var(--zrt-radius);
    padding:18px; box-shadow:0 4px 18px rgba(16,24,40,.045);}
.zrt-field{display:flex; flex-direction:column; flex:1; min-width:180px;}
.zrt-field-phone{flex:0 0 130px; min-width:120px;}
.zrt-field label{font-weight:600; font-size:13px; margin-bottom:7px; color:#344054;}
.zrt-input{width:100%; height:52px; padding:0 15px; border:1.5px solid var(--zrt-field-border);
    border-radius:var(--zrt-field-radius); background:var(--zrt-field-bg); color:var(--zrt-text);
    font-size:16px; font-family:inherit; transition:border-color .18s,box-shadow .18s; -webkit-appearance:none; appearance:none;}
.zrt-input:focus{outline:none; border-color:var(--zrt-accent); box-shadow:var(--zrt-ring);}
.zrt-phone{letter-spacing:4px; text-align:center; font-weight:700;}
.zrt-btn{height:52px; padding:0 26px; border:0; border-radius:var(--zrt-field-radius); background:var(--zrt-grad);
    color:#fff; font-size:16px; font-weight:800; font-family:inherit; cursor:pointer; white-space:nowrap;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 10px 24px color-mix(in srgb,var(--zrt-accent-dark) 30%,transparent);
    transition:transform .12s,filter .18s,box-shadow .18s;}
.zrt-btn:hover{filter:brightness(1.06);}
.zrt-btn:active{transform:translateY(1px);}
.zrt-btn:disabled{opacity:.65; cursor:progress;}
.zrt-spinner{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
    border-radius:50%; animation:zrt-spin .7s linear infinite; display:none;}
.zrt-form.is-loading .zrt-spinner{display:inline-block;}
@keyframes zrt-spin{to{transform:rotate(360deg);}}

/* Messages */
.zrt-msg{margin-top:14px; font-weight:600; font-size:14px; border-radius:11px; max-height:0; overflow:hidden;
    transition:max-height .25s,padding .25s;}
.zrt-msg.is-error{background:#fef2f2; color:#b32d2e; padding:13px 15px; max-height:260px;}
.zrt-msg.is-info{background:var(--zrt-soft); color:var(--zrt-muted); padding:13px 15px; max-height:260px;}

/* Result */
.zrt-result{margin-top:20px;}
.zrt-card{background:var(--zrt-card-bg); border:1px solid var(--zrt-card-border); border-radius:var(--zrt-radius);
    padding:24px; margin-bottom:18px; box-shadow:0 4px 18px rgba(16,24,40,.045);}

/* Status hero */
.zrt-hero{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.zrt-hero-ico{width:58px; height:58px; flex-shrink:0; border-radius:16px; display:inline-flex;
    align-items:center; justify-content:center; font-size:28px; background:var(--zrt-soft);}
.zrt-hero.is-delivered .zrt-hero-ico{background:#ecfdf3;}
.zrt-hero.is-off .zrt-hero-ico{background:#fef2f2;}
.zrt-hero-body{min-width:0; flex:1;}
.zrt-hero-state{font-size:19px; font-weight:800; color:var(--zrt-heading); line-height:1.25;}
.zrt-hero-meta{font-size:13px; color:var(--zrt-muted); margin-top:3px;}
.zrt-chip{display:inline-block; font-size:12px; font-weight:700; color:#fff; padding:3px 10px; border-radius:999px;
    background:var(--zrt-accent-dark); margin-top:8px;}
.zrt-track-no{font-size:12.5px; color:var(--zrt-muted); margin-top:10px;}
.zrt-track-no b{color:var(--zrt-text); font-weight:700; letter-spacing:.3px;}

/* Progress (happy-path) */
.zrt-progress{display:flex; justify-content:space-between; gap:6px; margin-top:22px; position:relative;}
.zrt-progress::before{content:""; position:absolute; top:21px; left:9%; right:9%; height:3px;
    background:var(--zrt-field-border); border-radius:3px; z-index:0;}
.zrt-prog-fill{position:absolute; top:21px; left:9%; height:3px; background:var(--zrt-grad); border-radius:3px;
    z-index:1; transition:width .4s ease;}
.zrt-step{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:7px;
    flex:1; text-align:center;}
.zrt-step-dot{width:42px; height:42px; border-radius:50%; background:var(--zrt-card-bg);
    border:2px solid var(--zrt-field-border); display:inline-flex; align-items:center; justify-content:center;
    font-size:19px; transition:all .25s;}
.zrt-step.done .zrt-step-dot{border-color:var(--zrt-accent); background:color-mix(in srgb,var(--zrt-accent) 12%,#fff);}
.zrt-step.current .zrt-step-dot{border-color:var(--zrt-accent); background:var(--zrt-grad); color:#fff;
    box-shadow:0 0 0 5px color-mix(in srgb,var(--zrt-accent) 18%,transparent); animation:zrt-pulse 1.8s infinite;}
@keyframes zrt-pulse{0%,100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--zrt-accent) 18%,transparent);}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--zrt-accent) 6%,transparent);}}
.zrt-step-label{font-size:11.5px; font-weight:600; color:var(--zrt-muted); max-width:74px; line-height:1.3;}
.zrt-step.done .zrt-step-label,.zrt-step.current .zrt-step-label{color:var(--zrt-heading);}

/* Courier */
.zrt-courier{display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px;
    background:var(--zrt-soft); border-radius:14px;}
.zrt-courier-ico{font-size:22px;}
.zrt-courier-name{font-weight:700; font-size:14px;}
.zrt-courier a{color:var(--zrt-accent-dark); font-weight:700; text-decoration:none; font-size:14px;}

/* Timeline */
.zrt-tl-title{font-size:15px; font-weight:800; color:var(--zrt-heading); margin:0 0 16px;}
.zrt-tl{list-style:none; margin:0; padding:0; position:relative;}
.zrt-tl::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--zrt-field-border);}
.zrt-tl-item{position:relative; padding:0 0 18px 32px;}
.zrt-tl-item:last-child{padding-bottom:0;}
.zrt-tl-item::before{content:""; position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%;
    background:var(--zrt-field-border); border:3px solid var(--zrt-card-bg); z-index:1;}
.zrt-tl-item:first-child::before{background:var(--zrt-accent);}
.zrt-tl-state{font-weight:700; font-size:14px; color:var(--zrt-heading);}
.zrt-tl-meta{font-size:12.5px; color:var(--zrt-muted); margin-top:2px;}
.zrt-tl-comment{font-size:12.5px; color:var(--zrt-muted); margin-top:4px; font-style:italic;}

.zrt-refresh{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px;
    color:var(--zrt-accent-dark); background:none; border:0; cursor:pointer; font-weight:700; padding:6px 0;}
.zrt-refresh:hover{text-decoration:underline;}

/* Responsive */
@media (max-width:560px){
    .zrt-banner{padding:18px; border-radius:16px; flex-direction:column; align-items:flex-start; gap:12px;}
    .zrt-card{padding:18px; border-radius:16px;}
    .zrt-form{flex-direction:column; align-items:stretch;}
    .zrt-field-phone{flex:1;}
    .zrt-btn{width:100%; height:52px;}
    .zrt-step-dot{width:38px; height:38px; font-size:17px;}
    .zrt-step-label{font-size:10.5px; max-width:60px;}
    .zrt-progress::before,.zrt-prog-fill{top:19px;}
}
@media (prefers-reduced-motion:reduce){
    .zrt-wrap *,.zrt-wrap *::before,.zrt-wrap *::after{transition:none !important; animation-duration:.01ms !important;}
}

/* Dark mode */
@media (prefers-color-scheme:dark){
    .zrt-wrap{--zrt-text:#f2f4f7; --zrt-heading:#fff; --zrt-muted:#98a2b3;
        --zrt-card-bg:#15171c; --zrt-card-border:#2a2e37; --zrt-field-bg:#1c1f26; --zrt-field-border:#353a45; --zrt-soft:#20242c;}
    .zrt-hero.is-delivered .zrt-hero-ico{background:rgba(2,122,72,.16);}
    .zrt-hero.is-off .zrt-hero-ico{background:rgba(225,29,72,.16);}
    .zrt-msg.is-error{background:rgba(225,29,72,.12); color:#fda4af;}
}