/*
  SaloCart V4.4.1 — Shopper Orders CSS Fix
  Self-contained styling for the Shopper Orders screen.
  This file intentionally loads after all earlier UI layers so it does not rely
  on shared dashboard selectors or an older cached CSS package.
*/

.shopper-orders-page{
  --orders-card-radius:22px;
  --orders-media-size:86px;
  padding-top:28px!important;
}

.shopper-orders-page .page-header{
  position:relative;
  align-items:center!important;
  gap:18px;
  margin-bottom:16px!important;
  padding:20px 21px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--sc-line) 92%,transparent);
  border-radius:24px;
  background:
    radial-gradient(circle at 94% 0, color-mix(in srgb,var(--sc-blue) 13%,transparent), transparent 11rem),
    linear-gradient(145deg,color-mix(in srgb,var(--sc-surface) 98%,#fff),color-mix(in srgb,var(--sc-mint) 32%,var(--sc-surface)));
  box-shadow:var(--sc-shadow-xs);
}

.shopper-orders-page .page-header::after{
  position:absolute;
  right:-44px;
  bottom:-66px;
  width:160px;
  height:160px;
  border:25px solid color-mix(in srgb,var(--sc-green) 10%,transparent);
  border-radius:50%;
  content:"";
  pointer-events:none;
}

.shopper-orders-page .page-header>div{position:relative;z-index:1;min-width:0}
.shopper-orders-page .page-header .btn-sc{position:relative;z-index:1;flex:0 0 auto;white-space:nowrap}
.shopper-orders-page .page-header h1{margin:2px 0 5px!important;color:var(--sc-ink)}
.shopper-orders-page .page-header p{max-width:650px;margin:0!important;color:var(--sc-ink-soft)!important}

/* Filter controls remain one readable row on desktop and a touch-scroll rail on phones. */
.shopper-orders-page .order-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
  padding:7px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--sc-line);
  border-radius:18px;
  background:color-mix(in srgb,var(--sc-surface) 95%,transparent);
  box-shadow:var(--sc-shadow-xs);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.shopper-orders-page .order-filter-row::-webkit-scrollbar{display:none}
.shopper-orders-page .order-filter-row button{
  display:inline-flex;
  min-height:42px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:var(--sc-ink-soft);
  font-family:var(--font-ui);
  font-size:.73rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.shopper-orders-page .order-filter-row button:hover,
.shopper-orders-page .order-filter-row button:focus-visible{
  border-color:color-mix(in srgb,var(--sc-green) 22%,var(--sc-line));
  background:var(--sc-mint);
  color:var(--sc-green);
  outline:none;
}
.shopper-orders-page .order-filter-row button.active{
  border-color:transparent;
  background:linear-gradient(135deg,var(--sc-green),var(--sc-green-deep));
  color:#fff;
  box-shadow:0 9px 18px color-mix(in srgb,var(--sc-green) 20%,transparent);
}
.shopper-orders-page .order-filter-row button:active{transform:scale(.98)}
.shopper-orders-page .order-filter-row button span{
  display:grid;
  min-width:19px;
  height:19px;
  place-items:center;
  padding:0 5px;
  border-radius:99px;
  background:color-mix(in srgb,var(--sc-surface) 72%,transparent);
  color:var(--sc-green-deep);
  font-size:.59rem;
  font-variant-numeric:tabular-nums;
}
.shopper-orders-page .order-filter-row button.active span{background:rgba(255,255,255,.18);color:#fff}

/* Complete order-card layout. Earlier app styles used old .order-content classes,
   while the Orders screen renders .order-card-copy and .order-card-total. */
.shopper-orders-page .orders-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  align-items:start;
}
.shopper-orders-page .orders-grid>.empty-state{grid-column:1/-1}
.shopper-orders-page .order-card{
  display:grid!important;
  grid-template-columns:var(--orders-media-size) minmax(0,1fr);
  grid-template-areas:
    "media copy"
    "total total";
  gap:13px!important;
  min-width:0;
  padding:13px!important;
  overflow:hidden;
  border:1px solid var(--sc-line)!important;
  border-radius:var(--orders-card-radius)!important;
  background:var(--sc-surface)!important;
  box-shadow:var(--sc-shadow-xs)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.shopper-orders-page .order-card:hover{
  border-color:color-mix(in srgb,var(--sc-green) 24%,var(--sc-line))!important;
  box-shadow:var(--sc-shadow-sm)!important;
  transform:translateY(-2px);
}
.shopper-orders-page .order-card.is-pickup{
  border-color:color-mix(in srgb,var(--sc-orange) 44%,var(--sc-line))!important;
  background:linear-gradient(145deg,var(--sc-surface),color-mix(in srgb,#FFF3DE 47%,var(--sc-surface)))!important;
}
.shopper-orders-page .order-card-media{
  display:grid;
  width:var(--orders-media-size);
  height:var(--orders-media-size);
  grid-area:media;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--sc-line) 84%,transparent);
  border-radius:18px;
  background:linear-gradient(145deg,var(--sc-mint),var(--sc-surface-alt));
  color:var(--sc-green);
  font-size:1.65rem;
}
.shopper-orders-page .order-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.shopper-orders-page .order-card-copy{display:flex;min-width:0;grid-area:copy;flex-direction:column;justify-content:center}
.shopper-orders-page .order-card-top{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
}
.shopper-orders-page .order-card-top small{
  overflow:hidden;
  max-width:46%;
  color:var(--sc-muted);
  font-family:var(--font-ui);
  font-size:.61rem;
  font-weight:780;
  letter-spacing:.025em;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shopper-orders-page .order-card-copy h2{
  display:-webkit-box;
  overflow:hidden;
  margin:0 0 5px;
  color:var(--sc-ink);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.25;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.shopper-orders-page .order-card-copy>p{
  overflow:hidden;
  margin:0;
  color:var(--sc-ink-soft);
  font-size:.69rem;
  font-weight:650;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shopper-orders-page .order-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-top:10px;
}
.shopper-orders-page .order-card-meta span{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:5px;
  color:var(--sc-muted);
  font-size:.62rem;
  font-weight:740;
  line-height:1.35;
}
.shopper-orders-page .order-card-meta i{color:var(--sc-blue);font-size:.76rem}
.shopper-orders-page .order-card.is-pickup .order-card-meta i{color:#C87720}

.shopper-orders-page .order-card-total{
  display:grid;
  min-width:0;
  grid-area:total;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "label action"
    "amount action";
  column-gap:12px;
  align-items:center;
  padding-top:12px;
  border-top:1px solid var(--sc-line);
}
.shopper-orders-page .order-card-total>small{
  grid-area:label;
  margin:0 0 2px;
  color:var(--sc-muted);
  font-size:.6rem;
  font-weight:820;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.shopper-orders-page .order-card-total>strong{
  grid-area:amount;
  color:var(--sc-green);
  font-family:var(--font-display);
  font-size:1.22rem;
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.055em;
  line-height:1.06;
}
.shopper-orders-page .order-card.is-pickup .order-card-total>strong{color:#B66D16}
.shopper-orders-page .order-card-total>div{
  display:flex;
  min-width:130px;
  grid-area:action;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
}
.shopper-orders-page .order-card-total .btn-sc,
.shopper-orders-page .order-card-total .btn-sc-light{
  width:100%;
  min-height:42px!important;
  padding:8px 11px!important;
  border-radius:13px!important;
  font-size:.7rem!important;
  white-space:nowrap;
}
.shopper-orders-page .order-card-total .btn.btn-link{
  min-height:auto!important;
  padding:1px 2px!important;
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:750;
  text-decoration:none;
}
.shopper-orders-page .order-card-total .btn.btn-link:hover{text-decoration:underline}

/* Status chips only inside the Shopper Orders context, avoiding old card styling. */
.shopper-orders-page .status-pill{
  display:inline-flex!important;
  min-height:23px;
  align-items:center;
  margin:0!important;
  padding:4px 8px!important;
  border:1px solid transparent;
  border-radius:99px;
  font-family:var(--font-ui);
  font-size:.6rem!important;
  font-weight:820!important;
  line-height:1;
  white-space:nowrap;
}
.shopper-orders-page .status-pill.active{border-color:color-mix(in srgb,var(--sc-blue) 20%,transparent);background:var(--sc-blue-soft);color:var(--sc-blue)}
.shopper-orders-page .status-pill.ready{border-color:color-mix(in srgb,var(--sc-orange) 35%,transparent);background:#FFF1D9;color:#A85E0B}
.shopper-orders-page .status-pill.done{border-color:color-mix(in srgb,var(--sc-green) 20%,transparent);background:var(--sc-mint);color:var(--sc-green-deep)}
.shopper-orders-page .status-pill.waiting{border-color:color-mix(in srgb,var(--sc-orange) 23%,transparent);background:#FFF7E8;color:#98611A}
.shopper-orders-page .status-pill.problem{border-color:color-mix(in srgb,var(--sc-coral) 27%,transparent);background:color-mix(in srgb,var(--sc-coral) 11%,var(--sc-surface));color:var(--sc-coral)}

html[data-theme="dark"] .shopper-orders-page .page-header{
  background:linear-gradient(145deg,color-mix(in srgb,var(--sc-surface) 96%,#163629),var(--sc-surface-alt));
}
html[data-theme="dark"] .shopper-orders-page .order-card.is-pickup{
  background:linear-gradient(145deg,var(--sc-surface),color-mix(in srgb,#412D14 48%,var(--sc-surface)))!important;
}
html[data-theme="dark"] .shopper-orders-page .status-pill.ready{background:#3B2A17;color:#FFC377}
html[data-theme="dark"] .shopper-orders-page .status-pill.waiting{background:#332B1B;color:#FFD189}

@media (min-width:1200px){
  .shopper-orders-page .orders-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
  .shopper-orders-page .order-card{grid-template-columns:94px minmax(0,1fr);--orders-media-size:94px;padding:15px!important}
  .shopper-orders-page .order-card-copy h2{font-size:1.05rem}
}

@media (max-width:767.98px){
  .shopper-orders-page{padding-top:17px!important}
  .shopper-orders-page .page-header{align-items:stretch!important;flex-direction:column;gap:13px;margin-bottom:12px!important;padding:16px;border-radius:21px}
  .shopper-orders-page .page-header h1{font-size:1.37rem!important;line-height:1.1!important}
  .shopper-orders-page .page-header p{font-size:.73rem!important;line-height:1.53!important}
  .shopper-orders-page .page-header .btn-sc{width:100%;min-height:43px!important}
  .shopper-orders-page .order-filter-row{gap:7px;margin:0 -2px 12px;padding:5px 2px 8px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .shopper-orders-page .order-filter-row button{min-height:39px;padding:8px 11px;border-color:var(--sc-line);border-radius:12px;background:var(--sc-surface);box-shadow:var(--sc-shadow-xs);font-size:.66rem}
  .shopper-orders-page .order-filter-row button.active{border-color:transparent}
  .shopper-orders-page .orders-grid{grid-template-columns:1fr;gap:10px}
  .shopper-orders-page .order-card{--orders-media-size:70px;gap:10px!important;padding:11px!important;border-radius:18px!important}
  .shopper-orders-page .order-card-media{border-radius:15px;font-size:1.4rem}
  .shopper-orders-page .order-card-top{gap:6px;margin-bottom:6px}
  .shopper-orders-page .order-card-top small{font-size:.55rem}
  .shopper-orders-page .order-card-copy h2{font-size:.9rem;line-height:1.24}
  .shopper-orders-page .order-card-copy>p{font-size:.62rem}
  .shopper-orders-page .order-card-meta{gap:4px 8px;margin-top:7px}
  .shopper-orders-page .order-card-meta span{font-size:.55rem}
  .shopper-orders-page .order-card-total{padding-top:10px;column-gap:10px}
  .shopper-orders-page .order-card-total>strong{font-size:1.1rem}
  .shopper-orders-page .order-card-total>div{min-width:132px}
  .shopper-orders-page .order-card-total .btn-sc,.shopper-orders-page .order-card-total .btn-sc-light{min-height:40px!important;font-size:.65rem!important}
  .shopper-orders-page .status-pill{min-height:21px;padding:4px 7px!important;font-size:.55rem!important}
}

@media (max-width:390px){
  .shopper-orders-page .order-card{--orders-media-size:62px;grid-template-columns:62px minmax(0,1fr);gap:9px!important}
  .shopper-orders-page .order-card-copy h2{font-size:.84rem}
  .shopper-orders-page .order-card-top small{max-width:42%;font-size:.51rem}
  .shopper-orders-page .order-card-meta span:nth-child(2){display:none}
  .shopper-orders-page .order-card-total>div{min-width:119px}
  .shopper-orders-page .order-card-total .btn-sc,.shopper-orders-page .order-card-total .btn-sc-light{padding-inline:8px!important;font-size:.6rem!important}
}

@media (prefers-reduced-motion:reduce){
  .shopper-orders-page .order-card,.shopper-orders-page .order-filter-row button{transition:none!important}
}