/* dist/he-ui.css — minimal styles for Step-1 “Order Validated” card */

:root{
  /* Core palette */
  --he-brand:#2563EB;            /* primary blue */
  --he-brand-hover:#1D4ED8;      /* hover */
  --he-brand-press:#1E40AF;      /* pressed/focus ring */
  --he-success:#10B981;          /* success/savings */
  --he-warn:#F59E0B;             /* muted yellow (info) */
  --he-surface:#FFFFFF;          /* cards */
  --he-surface-alt:#F8FAFC;      /* tinted sections */
  --he-border:#E5E7EB;
  --he-text:#111827;
  --he-muted:#6B7280;
  /* Back-compat alias */
  --he-tint:#EAF1FF;

  /* Radii */
  --he-radius:12px;
  --he-radius-pill:9999px;

  /* Shadows */
  --he-shadow-0:none;
  --he-shadow-1:0 8px 22px rgba(2,6,23,.08);
  --he-shadow-2:0 12px 28px rgba(2,6,23,.12);

  /* Spacing */
  --he-space-1:4px; --he-space-2:8px; --he-space-3:12px; --he-space-4:16px;
  --he-space-5:20px; --he-space-6:24px; --he-space-8:32px; --he-space-12:48px;
}

/* Buttons (global) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 16px; border-radius:var(--he-radius-pill); font-weight:700; font-size:15px;
  text-decoration:none; line-height:1.1; border:1px solid transparent; cursor:pointer;
  transition:filter .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(29,78,216,.25); }
.btn-primary{ background:linear-gradient(90deg,var(--he-brand),var(--he-brand-hover)); color:#fff; border-color:var(--he-brand-hover); box-shadow:var(--he-shadow-1); }
.btn-primary:hover{ filter:brightness(.97); }
.btn-primary:active{ transform:translateY(1px); }
.btn-secondary{ background:#fff; color:var(--he-brand); border-color:var(--he-brand); box-shadow:0 6px 14px rgba(37,99,235,.08); }
.btn-secondary:hover{ background:#EFF6FF; border-color:var(--he-brand-hover); }
.btn-secondary:active{ transform:translateY(1px); }
.btn-link{ background:transparent; color:var(--he-brand); border-color:transparent; padding:0; box-shadow:none; }
.btn-link:hover{ text-decoration:underline; }

/* Global focus ring for links/buttons (A11y) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.25) !important;
  border-radius: var(--he-radius) !important;
}

.he-hidden{ display:none !important; }

#he-order-card.he-card{
  margin-top:12px;
  border:1px solid var(--he-border);
  border-radius:var(--he-radius);
  background:var(--he-surface);
  overflow:hidden;
  box-shadow:var(--he-shadow-1);
}

.he-banner{
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem; font-weight:600;
  border-bottom:1px solid var(--he-border);
}
.he-banner.he-success{ background:var(--he-tint); color:var(--he-brand); }
.he-banner.he-error{
  background:#FEE2E2; color:#991B1B; border-bottom:1px solid #fecaca;
}
.he-note{ color:#991B1B; }
.he-banner.he-skeleton{ background:#f8fafc; }

.he-icon{ width:18px; height:18px; display:inline-block; }
.he-check{ background:conic-gradient(from 90deg at 50% 50%, var(--he-ok), var(--he-ok)); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="black" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.285-5.012-3.715 3.716 9 8.729 15-15.285z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="black" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.285-5.012-3.715 3.716 9 8.729 15-15.285z"/></svg>') center/contain no-repeat; }
.he-x{ background:conic-gradient(from 90deg at 50% 50%, var(--he-err), var(--he-err)); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="black" viewBox="0 0 24 24"><path d="M18.3 5.71a1 1 0 010 1.41L13.41 12l4.89 4.88a1 1 0 01-1.42 1.42L12 13.41l-4.88 4.89a1 1 0 01-1.42-1.42L10.59 12 5.7 7.12A1 1 0 117.12 5.7L12 10.59l4.88-4.89a1 1 0 011.42 0z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="black" viewBox="0 0 24 24"><path d="M18.3 5.71a1 1 0 010 1.41L13.41 12l4.89 4.88a1 1 0 01-1.42 1.42L12 13.41l-4.88 4.89a1 1 0 01-1.42-1.42L10.59 12 5.7 7.12A1 1 0 117.12 5.7L12 10.59l4.88-4.89a1 1 0 011.42 0z"/></svg>') center/contain no-repeat; }

.he-summary{
  display:flex; gap:.5rem; flex-wrap:wrap; padding:12px 14px;
}
.he-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; background:#fff; border:1px solid var(--he-border);
  border-radius:9999px; color:var(--he-text);
}
.he-chip .he-icon{
  background:conic-gradient(from 90deg at 50% 50%, var(--he-brand), var(--he-brand));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7l9-4 9 4-9 4-9-4zm0 6l9 4 9-4M3 7v10"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7l9-4 9 4-9 4-9-4zm0 6l9 4 9-4M3 7v10"/></svg>') center/contain no-repeat;
}
.he-chip .he-chip-txt{ max-width:220px; }
.he-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.he-accordion{
  width:100%; background:#fff; border-top:1px solid var(--he-border);
  display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1rem; font-weight:600; cursor:pointer;
}
.he-accordion .he-chevron{
  width:14px; height:14px;
  background: conic-gradient(from 90deg at 50% 50%, var(--he-brand), var(--he-brand));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M12 15.5l-7-7 1.41-1.41L12 12.67l5.59-5.58L19 8.5z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M12 15.5l-7-7 1.41-1.41L12 12.67l5.59-5.58L19 8.5z"/></svg>') center/contain no-repeat;
  transform: rotate(-90deg); transition: transform .15s ease;
}
.he-accordion[aria-expanded="true"] .he-chevron{ transform: rotate(0deg); }

.he-items{ padding:8px 14px 12px; }
.he-items-list{ list-style:none; margin:0; padding:0; }
.he-item{ padding:6px 0; color:var(--he-text); }
.he-qty{ display:inline-block; min-width:1.25rem; text-align:center; margin-right:.25rem; background:var(--he-tint); border-radius:6px; color:var(--he-brand); }
.he-more{
  margin-top:8px; background:var(--he-tint); color:var(--he-brand);
  border:1px solid #c3d5fa; font-weight:600; padding:.5rem .75rem; border-radius:var(--he-radius-pill);
}

/* Skeleton bars */
.he-skeleton .he-skel-bar{ height:12px; background:#e2e8f0; border-radius:8px; }
.he-skeleton .he-skel-chip{ width:110px; height:28px; background:#e2e8f0; border-radius:9999px; margin:6px 8px 6px 0; }
.crisp-client,
.crisp-client *,
#crisp-chatbox {
  display: none !important;
}
