:root{
  --bg:#f7f8fb;--surface:#ffffff;--surface2:#f1f4f8;--surface3:#e8edf4;
  --border:#1e1e28;--border2:#2a2a3a;
  --accent:#111827;--accent-dim:rgba(226,125,136,.14);--accent-light:#2f3a4a;
  --green:#78a7c7;--green-dim:rgba(120,167,199,.13);
  --red:#e27d88;--amber:#e3b56b;--blue:#78a7c7;
  --text:#1b2430;--text-muted:#687385;--text-dim:#9aa5b5;
  --font-display:'Space Mono',monospace;
  --font-body:'IBM Plex Sans Arabic',sans-serif;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  min-height:100vh;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}

/* WRAP */
.wrap{
  max-width:860px;
  margin:0 auto;
  padding:36px 24px;
  position:relative;
  z-index:1;
}

/* SEARCH BAR */
.search-section{text-align:center;margin-bottom:40px;}
.search-eyebrow{font-size:10px;color:var(--accent);letter-spacing:3px;margin-bottom:12px;}
.search-title{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
  letter-spacing:1px;
}
.search-sub{font-size:13px;color:var(--text-muted);margin-bottom:24px;}
.search-row{display:flex;gap:10px;max-width:520px;margin:0 auto;}
.search-input{
  flex:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:13px 18px;
  color:var(--text);
  font-family:var(--font-display);
  font-size:13px;
  outline:none;
  transition:border-color .2s;
  letter-spacing:1px;
}
.search-input:focus{border-color:var(--accent);}
.search-input::placeholder{
  color:var(--text-dim);
  font-family:var(--font-body);
  letter-spacing:0;
}
.search-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:13px 24px;
  font-family:var(--font-body);
  font-size:13px;
  cursor:pointer;
  transition:background .2s;
  white-space:nowrap;
}
.search-btn:hover{background:#2f3a4a;}

.quick-orders{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:12px;
  flex-wrap:wrap;
}
.quick-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--text-muted);
  border-radius:5px;
  padding:5px 12px;
  font-size:11px;
  cursor:pointer;
  font-family:var(--font-display);
  letter-spacing:1px;
  transition:all .15s;
}
.quick-btn:hover{
  border-color:var(--accent);
  color:var(--accent-light);
}

/* ORDER CARD */
.order-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:20px;
  animation:fadeIn .4s ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ORDER HEADER */
.order-header{
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.order-num{font-family:var(--font-display);font-size:14px;color:var(--accent);letter-spacing:2px;margin-bottom:3px;}
.order-date{font-size:12px;color:var(--text-muted);}

.status-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
}
.status-pill.delivered{
  background:var(--green-dim);
  border:1px solid rgba(120,167,199,.25);
  color:var(--green);
}
.status-pill.shipped{
  background:rgba(55,138,221,.1);
  border:1px solid rgba(55,138,221,.25);
  color:#6ab4f5;
}
.status-pill.processing{
  background:var(--accent-dim);
  border:1px solid rgba(17,24,39,.25);
  color:var(--accent-light);
}
.status-pill.pending{
  background:rgba(212,160,23,.1);
  border:1px solid rgba(212,160,23,.25);
  color:var(--amber);
}
.status-pill.cancelled{
  background:rgba(224,90,43,.12);
  border:1px solid rgba(224,90,43,.3);
  color:var(--red);
}

.status-pulse{width:8px;height:8px;border-radius:50%;}
.delivered .status-pulse{background:var(--green);}
.shipped .status-pulse{background:#6ab4f5;animation:pulse 2s infinite;}
.processing .status-pulse{background:var(--accent);animation:pulse 2s infinite;}
.pending .status-pulse{background:var(--amber);animation:pulse 2s infinite;}
.cancelled .status-pulse{background:var(--red);animation:pulse 2s infinite;}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

/* PROGRESS STEPS */
.progress-section{
  padding:28px 24px;
  border-bottom:1px solid var(--border);
}

.progress-steps{
  display:flex;
  align-items:flex-start;
  position:relative;
  padding:0 20px;
  direction:rtl;
}

.step-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:1;
}

/* الخط الواصل بين كل step واللي بعدها */
.step-item:not(:last-child)::after{
  content:'';
  position:absolute;
  top:18px;
  left:-50%;
  width:100%;
  height:2px;
  background:var(--border2);
  z-index:0;
  transition:background .5s;
}
@media ( max-width: 767px ){
.step-item:not(:last-child)::after{
  top:12px;
}
}
.step-item.done:not(:last-child)::after{
  background:var(--green);
}

.step-item.current:not(:last-child)::after{
  background:linear-gradient(270deg,var(--green) 50%,var(--border2) 50%);
}

.step-item.cancelled:not(:last-child)::after{
  background:var(--red);
}

.step-circle{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--border2);
  background:var(--surface2);
  transition:all .4s;
  position:relative;
  z-index:2;
  flex-shrink:0;
}

.step-item.done .step-circle{
  background:var(--green-dim);
  border-color:var(--green);
}

.step-item.current .step-circle{
  background:var(--accent-dim);
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(17,24,39,.15);
}

.step-item.future .step-circle{
  opacity:.35;
}

.step-item.cancelled .step-circle{
  background:rgba(224,90,43,.12) !important;
  border-color:var(--red) !important;
  box-shadow:0 0 0 4px rgba(224,90,43,.12);
  color:var(--red) !important;
}

.step-label{
  font-size:11px;
  color:var(--text-muted);
  margin-top:8px;
  text-align:center;
  line-height:1.4;
}

.step-item.done .step-label{
  color:var(--green);
}

.step-item.current .step-label{
  color:var(--accent-light);
}

.step-item.cancelled .step-label{
  color:var(--red) !important;
}

.step-time{
  font-size:10px;
  color:var(--text-dim);
  margin-top:3px;
  text-align:center;
  font-family:var(--font-display);
}

.step-item.cancelled .step-time{
  color:var(--red) !important;
}

/* ETA BANNER */
.eta-banner{
  margin:0 24px 20px;
  background:var(--accent-dim);
  border:1px solid rgba(17,24,39,.2);
  border-radius:10px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eta-banner.green{
  background:var(--green-dim);
  border-color:rgba(120,167,199,.2);
}
.eta-icon{
  width:38px;
  height:38px;
  border-radius:8px;
  background:rgba(17,24,39,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.eta-banner.green .eta-icon{background:rgba(120,167,199,.15);}
.eta-text{flex:1;}
.eta-main{font-size:14px;color:var(--text);font-weight:500;margin-bottom:2px;}
.eta-sub{font-size:12px;color:var(--text-muted);}
.eta-date{font-family:var(--font-display);font-size:13px;color:var(--accent);font-weight:700;}
.eta-banner.green .eta-date{color:var(--green);}

/* 2 COLUMN BODY */
.order-body{
  display:grid;
  grid-template-columns:1fr 280px;
  border-top:1px solid var(--border);
}
.order-body-left{
  padding:20px 24px;
  border-left:1px solid var(--border);
}
.order-body-right{padding:20px 24px;}

.section-label{
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:2px;
  margin-bottom:14px;
}

/* ITEMS */
.item-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.item-row:last-child{border-bottom:none;}
.item-thumb{
  width:48px;
  height:48px;
  border-radius:7px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.item-details{flex:1;}
.item-name{font-size:13px;color:var(--text);margin-bottom:3px;}
.item-meta{font-size:11px;color:var(--text-muted);display:flex;gap:8px;}
.item-meta span{
  background:var(--surface3);
  padding:2px 7px;
  border-radius:3px;
}
.item-price{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--accent);
  white-space:nowrap;
}

/* SUMMARY */
.sum-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:5px 0;
}
.sum-row .lbl{color:var(--text-muted);}
.sum-row .val{color:var(--text);}
.sum-total{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  padding:12px 0 0;
  border-top:1px solid var(--border2);
  margin-top:8px;
}
.sum-total .lbl{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:1px;
  color:var(--text-muted);
}
.sum-total .val{
  font-family:var(--font-display);
  font-size:18px;
  color:var(--accent);
  font-weight:700;
}

/* SHIPPING INFO */
.ship-info{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.ship-row{
  display:flex;
  gap:8px;
  font-size:12px;
  margin-bottom:8px;
}
.ship-row .icon-wrap{
  width:18px;
  display:flex;
  justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.ship-row .ship-val{color:var(--text-muted);}
.ship-row .ship-val strong{
  color:var(--text);
  display:block;
}

/* TIMELINE LOG */
.timeline{
  display:flex;
  flex-direction:column;
}

.tl-item{
  display:flex;
  gap:12px;
  position:relative;
  padding-bottom:18px;
}

.tl-item:last-child{padding-bottom:0;}

.tl-item:not(:last-child) .tl-line{
  position:absolute;
  right:9px;
  top:22px;
  width:1px;
  height:calc(100% - 10px);
  background:var(--border);
}

.tl-item.done:not(:last-child) .tl-line{
  background:var(--green);
}

.tl-dot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1.5px solid var(--border2);
  background:var(--surface2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  z-index:1;
}

.tl-item.done .tl-dot{
  background:var(--green-dim);
  border-color:var(--green);
}

.tl-item.current .tl-dot{
  background:var(--accent-dim);
  border-color:var(--accent);
}

.tl-content{flex:1;padding-top:1px;}

.tl-status{
  font-size:12px;
  color:var(--text);
  font-weight:500;
}

.tl-item.done .tl-status{
  color:var(--green);
}

.tl-item.current .tl-status{
  color:var(--accent-light);
}

.tl-time{
  font-size:10px;
  color:var(--text-dim);
  margin-top:2px;
  font-family:var(--font-display);
}

.tl-note{
  font-size:11px;
  color:var(--text-muted);
  margin-top:3px;
}

/* ACTIONS */
.order-actions {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.act-btn{
  border:none;
  border-radius:7px;
  padding:9px 18px;
  font-family:var(--font-body);
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  transition:all .15s;
}

.act-primary{background:var(--accent);color:#fff;}
.act-primary:hover{background:#2f3a4a;}

.act-ghost{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text-muted);
}
.act-ghost:hover{
  border-color:var(--border2);
  color:var(--text);
}

.act-danger{
  background:var(--red);
  color:#fff;
  opacity:.85;
}
.act-danger:hover{opacity:1;}

/* EMPTY STATE */
.empty-state{
  text-align:center;
  padding:60px 20px;
  display:none;
}
.empty-state.show{display:block;}
.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5;}
.empty-title{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--text-muted);
  letter-spacing:2px;
  margin-bottom:8px;
}
.empty-sub{font-size:13px;color:var(--text-dim);}

/* TOAST */
.toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--surface2);
  border:1px solid var(--accent);
  color:var(--text);
  border-radius:8px;
  padding:10px 18px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:9000;
  transition:transform .3s ease;
  white-space:nowrap;
}
.toast.show{
  transform:translateX(-50%) translateY(0);
}

@media(max-width:700px){
  .order-body{grid-template-columns:1fr;}
  .order-body-left{border-left:none;border-bottom:1px solid var(--border);}
  .progress-steps{padding:0;}
  .step-label{font-size:9px;}
  .nav-links{display:none;}
  .search-row{flex-direction:column;}
}

/* MODAL */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.25s ease;
  z-index:9999;
  padding:20px;
}

.modal-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.cancel-modal{
  width:min(100%, 460px);
  background:linear-gradient(180deg, rgba(22,22,30,.98) 0%, rgba(12,12,18,.98) 100%);
  border:1px solid rgba(175,169,236,.16);
  box-shadow:0 20px 80px rgba(0,0,0,.45);
  border-radius:24px;
  padding:28px 24px 22px;
  position:relative;
  transform:translateY(18px) scale(.96);
  transition:.25s ease;
}

.modal-overlay.show .cancel-modal{
  transform:translateY(0) scale(1);
}

.modal-close{
  position:absolute;
  top:14px;
  left:14px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#cfcde6;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.modal-close:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.cancel-icon-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

.cancel-icon{
  width:68px;
  height:68px;
  border-radius:20px;
  background:rgba(224,90,43,.12);
  border:1px solid rgba(224,90,43,.28);
  color:var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 8px rgba(224,90,43,.05);
}

.cancel-modal-title{
  text-align:center;
  font-size:22px;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
}

.cancel-modal-sub{
  text-align:center;
  color:#9d9bb3;
  font-size:14px;
  line-height:1.8;
  margin-bottom:18px;
}

#cancelOrderNumber{
  color:#fff;
  font-weight:700;
}

.cancel-warning-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px 16px;
  color:#b9b7ca;
  font-size:13px;
  line-height:1.8;
  margin-bottom:20px;
}

.cancel-modal-actions{
  display:flex;
  gap:12px;
}

.modal-btn{
  flex:1;
  height:48px;
  border-radius:14px;
  border:none;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:.2s ease;
}

.modal-btn-ghost{
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.modal-btn-ghost:hover{
  background:rgba(255,255,255,.09);
}

.modal-btn-danger{
  background:linear-gradient(135deg, #E05A2B 0%, #ff6b3d 100%);
  color:#fff;
  box-shadow:0 12px 30px rgba(224,90,43,.28);
}

.modal-btn-danger:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 35px rgba(224,90,43,.34);
}

body.modal-open{
  overflow:hidden;
}

@media (max-width: 575px){
  .cancel-modal{
    padding:24px 18px 18px;
    border-radius:20px;
  }

  .cancel-modal-title{
    font-size:19px;
  }

  .cancel-modal-actions{
    flex-direction:column;
  }
}

/* helpers */
.text-cancelled{
  color:var(--red) !important;
  font-weight:600;
}

/* cancelled progress overrides */
.step-item.cancelled,
.step-item.cancelled *{
  color:var(--red) !important;
}

.step-item.cancelled .step-circle{
  border-color:var(--red) !important;
  background:rgba(224,90,43,.12) !important;
  color:var(--red) !important;
}

.step-item.cancelled .step-time,
.step-item.cancelled .step-label{
  color:var(--red) !important;
}

/* ===== CANCELLED TIMELINE OVERRIDES - KEEP LAST ===== */
.timeline.cancelled .tl-item.done .tl-dot,
.timeline.cancelled .tl-item.current .tl-dot,
.timeline.cancelled .tl-item.future .tl-dot{
  background:rgba(224,90,43,.12) !important;
  border-color:var(--red) !important;
  color:var(--red) !important;
}

.timeline.cancelled .tl-item.done .tl-dot svg,
.timeline.cancelled .tl-item.current .tl-dot svg,
.timeline.cancelled .tl-item.future .tl-dot svg{
  stroke:var(--red) !important;
}

.timeline.cancelled .tl-item:not(:last-child) .tl-line,
.timeline.cancelled .tl-item.done:not(:last-child) .tl-line{
  background:rgba(224,90,43,.32) !important;
}

.timeline.cancelled .tl-item .tl-status,
.timeline.cancelled .tl-item .tl-time,
.timeline.cancelled .tl-item .tl-note{
  color:var(--red) !important;
}

.timeline.cancelled .tl-item.done .tl-status,
.timeline.cancelled .tl-item.current .tl-status{
  color:var(--red) !important;
}