:root{
  --bg:#0e141c; --bg2:#101a24;
  --text:#e8eef6; --muted:#a2afbd;
  --glass:rgba(255,255,255,.07); --card:rgba(255,255,255,.06);
  --accent:#00cec9; --accent2:#2a7fe8;
  --radius:16px; --blur:blur(10px);
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --gap:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:16px 16px 84px;
  background:
    radial-gradient(1200px 600px at 110% -10%, #142233 0, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #0c2130 0, transparent 60%),
    var(--bg);
  color:var(--text); font-family:"Segoe UI", system-ui, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}



/* Header */
.page-header{
  max-width:1200px; margin:0 auto 14px; display:flex; align-items:center; gap:12px;
}
.page-header h1{ margin:0; font-size:clamp(20px,3.2vw,28px); font-weight:800; color:#fff; }
.btn.back{
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), #00b5b0); color:#001215;
  font-weight:900; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s, filter .2s;
}
.btn.back:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* Toolbar */
.toolbar{
  max-width:1200px; margin:0 auto 14px; padding:12px 14px;
  background:var(--glass); backdrop-filter:var(--blur); border-radius:var(--radius);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow);
}
.chips{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.chip{
  border:none; border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer;
  background:#1f2937; color:#cfe7ff; transition:transform .1s, background .2s;
}
.chip.active{ background:linear-gradient(180deg, var(--accent2), #1f71df); color:#08121f; }
.chip:hover{ transform:translateY(-1px); }
.sep{ width:1px; height:22px; background:rgba(255,255,255,.2); margin:0 4px; }
.search{ margin-left:auto; min-width:220px; flex:1; display:flex; justify-content:flex-end; }
.search input{
  width:min(420px,100%); padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:#0f1822; color:#eaf5ff;
}

/* Stats */
.stats{
  max-width:1200px; margin:0 auto 14px; padding:10px 14px;
  background:var(--glass); border-radius:var(--radius); backdrop-filter:var(--blur);
  box-shadow:var(--shadow);
}
.stats strong{ color:#fff; }

/* Views */
.orders-grid{
  max-width:1200px; margin:0 auto; display:grid; gap:var(--gap);
  grid-template-columns:1fr; 
}
@media (min-width:760px){ .orders-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .orders-grid{ grid-template-columns:1fr 1fr 1fr; } }

/* Carousel shell & track */
.carousel-shell{
  max-width:1200px; margin:0 auto; position:relative;
}
.orders-track{
  display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:thin;
}
.orders-track::-webkit-scrollbar{ height:10px; }
.orders-track::-webkit-scrollbar-thumb{ background:#1f2b3a; border-radius:10px; }
.orders-track .order-card{ min-width:85vw; max-width:85vw; scroll-snap-align:start; }
@media (min-width:760px){
  .orders-track .order-card{ min-width:520px; max-width:520px; }
}

/* Scroll arrows */
.scroll-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), #00b5b0); color:#00191a;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
}
.scroll-arrow.left{ left:-6px; }
.scroll-arrow.right{ right:-6px; }
@media (max-width:480px){ .scroll-arrow{ display:none; } }

/* Order card (στυλ συμβατό με το order_list.js) */
.order-card{
  background:var(--glass); backdrop-filter:var(--blur); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s;
  display:flex; flex-direction:column; gap:8px;
}
.order-card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.45); }
.order-card h2{ margin:0 0 4px; font-size:18px; color:#fff; }
.order-card p{ margin:2px 0; color:var(--muted); }
.order-card p strong{ color:#d9ecff; }

/* Tracking bar που δημιουργεί το JS σου */
.tracking-bar{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:8px 0; }
.tracking-bar > div{ height:6px; background:#203040; border-radius:6px; }
.tracking-bar > div.active{ background:linear-gradient(90deg, var(--accent), #33e1dc); }

/* Items */
.order-items{ list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.order-items li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  padding:8px 12px; border-radius:12px; font-size:14px;
}
.order-items li small{ color:#9fc9ff; }
.order-items .price{ font-weight:800; color:#e8f4ff; }

/* Κουμπί λεπτομερειών */
.details-btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  background:linear-gradient(180deg, var(--accent2), #1e73e0); color:#07101f;
  padding:10px 14px; border-radius:12px; font-weight:800; box-shadow:var(--shadow);
  margin-top:4px; width:max-content;
}

/* Empty */
.empty-state{ max-width:800px; margin:20px auto; text-align:center; padding:28px; }
.empty-state .emoji{ font-size:56px; }

/* Focus */
a,button,input{ outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible{
  box-shadow:0 0 0 3px rgba(0,206,201,.45);
  border-radius:10px;
}



/* Print */
@media print{
  body{ background:#fff; color:#000; }
  .page-header, .toolbar, .carousel-shell, #bottom-nav-placeholder{ display:none !important; }
  .orders-grid{ grid-template-columns:1fr !important; }
  .order-card{ box-shadow:none; background:#fff; border:1px solid #ddd; }
}

/* Γενική λίστα παραγγελιών */
.orders-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;              /* κενό ανάμεσα στις παραγγελίες */
}

/* Κάθε κάρτα παραγγελίας */
.order-card {
  margin: 4px 0;
  background: transparent;
  border: 0;
}

/* Μπάρα σύνοψης (πάνω μέρος) */
.order-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #111c2a, #122337);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* Όταν είναι ανοιχτή η κάρτα, “ενώνεται” με τα details */
.order-summary.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ID */
.summary-id {
  font-weight: 700;
  font-size: 14px;
  min-width: 62px;
}

/* Pickup / Pickup point κτλ. */
.summary-type {
  font-size: 12px;
  opacity: 0.9;
}

/* Status σαν badge δεξιά */
.summary-status {
  margin-left: auto;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 200, 120, 0.18);
  border: 1px solid rgba(0, 200, 120, 0.45);
  white-space: nowrap;
}

/* Βελάκι */
.summary-chevron {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.7;
}

/* Λεπτομέρειες (κάτω μέρος) */
.order-details {
  background: #0b141f;
  border-radius: 0 0 18px 18px;
  padding: 10px 14px 12px;
  margin-top: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}