/* order/style.css */



:root{
  --brand: #8B5CF6;          /* purple */
  --brand-2: #F97316;        /* orange */
  --ink: #111827;
  --muted: #6B7280;
  --bg: #fafafa;
  --card: #ffffff;
  --line: #E5E7EB;
  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #dc2626;
  --info: #0ea5e9;
}

*{ box-sizing:border-box }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
}

.btn{
  border:0; border-radius:12px; padding:10px 14px; cursor:pointer;
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  font-weight:600;
}
.btn-primary{ background: var(--ink); color:#fff }
.btn-ghost{ background:#f3f4f6 }
.btn:disabled{ opacity:.6; cursor:default }

.orders-page{
  max-width: 1040px;
  margin: 28px auto;
  padding: 0 16px 40px;
}

.orders-header{
  display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:center;
  margin-bottom: 18px; text-align: center;
}
.orders-title h1{ margin:0 0 6px; font-size: 1.6rem }
.orders-title p{ margin:0; color:var(--muted); margin-bottom: 10px; }

.orders-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
  width:100%;
}

.orders-search{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px;
  min-width: 260px;
}
.orders-search input{
  border:0; outline:0; background:transparent; width:100%;
}

.orders-filters{ display:flex; gap:10px; align-items:center; }
.orders-filters label{
  display:flex; gap:6px; align-items:center; font-size:.95rem; color:var(--muted);
}
.orders-filters select{
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; color:var(--ink);
}

.orders-list{ display:grid; gap:12px; margin-top:16px; }

.order-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

.order-head{
  display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.order-id{
  font-weight:700; letter-spacing:.2px;
}
.order-meta{
  color:var(--muted); font-size:.93rem; margin-top:2px;
}
.order-tags{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-top:6px;
}
.chip{
  padding:6px 10px; border-radius:999px; font-size:.78rem; font-weight:700; border:1px solid transparent;
}
.chip.status--pending{ background:#FFF7ED; color:#9A3412; border-color:#FED7AA }
.chip.status--processing,
.chip.status--shipped{ background:#ECFEFF; color:#155E75; border-color:#A5F3FC }
.chip.status--delivered{ background:#ECFDF5; color:#065F46; border-color:#A7F3D0 }
.chip.status--cancelled{ background:#FEF2F2; color:#991B1B; border-color:#FECACA }

.chip.pay--unpaid{ background:#FEF3C7; color:#92400E; border-color:#FDE68A }
.chip.pay--paid{ background:#ECFDF5; color:#065F46; border-color:#A7F3D0 }
.chip.pay--failed{ background:#FEF2F2; color:#991B1B; border-color:#FECACA }
.chip.pay--refunded{ background:#F5F3FF; color:#4C1D95; border-color:#DDD6FE }

.order-actions{ display:flex; gap:8px; align-items:center; }
.order-toggle{
  background:#f3f4f6; border-radius:10px; padding:8px 10px; cursor:pointer;
}
.order-toggle i{ transition: transform .2s ease; }
.order-toggle.open i{ transform: rotate(180deg) }

.order-body{ display:none; padding:14px 16px; }
.order-body.open{ display:block; }

.line{ height:1px; background:var(--line); margin:10px 0 }

.items{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.items h4{ margin:0 0 8px; font-size:1rem }
.item{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  padding:8px 0; border-bottom:1px dashed #eee;
}
.item:last-child{ border-bottom:0 }
.item small{ color:var(--muted) }

.addr{
  margin-top:12px; color:var(--muted);
}
.addr h4{ margin:0 0 6px; font-size:1rem; color:var(--ink) }
.addr .grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.addr code{ background:#f3f4f6; padding:2px 6px; border-radius:6px }

.order-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px;
}

.orders-pagination{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px;
}
.pg-info{ color:var(--muted) }

/* Empty + skeleton */
.empty{
  text-align:center; color:var(--muted); padding:32px 12px;
}
.skel{
  background: linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);
  background-size:400% 100%; animation:sh 1.2s infinite;
  border-radius:10px; height:18px;
}
@keyframes sh{ 0%{background-position:100% 0} 100%{background-position:0 0} }




/* --- Small screen polish --- */
@media (max-width: 640px) {
  .orders-page{
    margin: 16px auto 32px;
    padding: 0 12px 28px;
  }

  /* Header + toolbar */
  .orders-header{
    gap: 12px;
    text-align: left;
    align-items: stretch;
  }
  .orders-title h1{ font-size: 1.35rem; text-align: center;}
  .orders-title p{ font-size: .95rem; }

  .orders-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .orders-search{
    width: 100%;
    min-width: 0;              /* override 260px */
    padding: 10px 12px;
  }
  .orders-filters{
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 5px;
  }
  .orders-filters label{
    width: 100%;
    justify-content: space-between;
    font-size: .9rem;
  }
  .orders-filters select{
    width: 82%;
    padding: 10px 12px;
  }

  /* List spacing */
  .orders-list{ gap: 10px; margin-top: 12px; }

  /* Card header → 1 column */
  .order-head{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 12px;
  }
  .order-id{
    font-size: 1rem;
    word-break: break-word;     /* prevent overflow on long IDs */
  }
  .order-meta{
    font-size: .9rem;
  }
  .order-tags{
    gap: 6px;
  }
  .chip{
    padding: 5px 8px;
    font-size: .72rem;
  }

  /* Card body */
  .order-body{
    padding: 12px 12px;
  }

  /* Items block */
  .items{
    padding: 10px;
    border-radius: 12px;
  }
  .items h4{
    font-size: .98rem;
  }
  .item{
    grid-template-columns: 1fr auto; /* keep price on the right */
    gap: 8px;
    padding: 8px 0;
  }
  .item small{ font-size: .85rem; }

  /* Address grid → 1 column */
  .addr{ margin-top: 10px; }
  .addr h4{ font-size: .98rem; }
  .addr .grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Actions */
  .order-actions{
    justify-content: space-between;
  }
  .order-toggle{
    padding: 8px 10px;
  }

  /* Card footer → stacked buttons */
  .order-foot{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }
  .order-foot .btn{
    width: 100%;
    padding: 12px 14px;
    font-size: .95rem;
  }

  /* Pagination */
  .orders-pagination{
    gap: 6px;
    margin-top: 14px;
  }
  .pg-info{ font-size: .9rem; }
  .btn-primarys{ background: var(--ink); color:#fff; width: -webkit-fill-available; margin-top: 10px; }
}

/* Helpful global tweaks */
.order-id{
  word-break: break-word;       /* also apply on larger screens just in case */
}