/* Commerce App — UI Polish Pack (Phase 2)
   Shopify × Uber Eats hybrid refinements: wizard, drawers, lists, messages.
   Scope: ONLY inside .ca-portal-app (theme-safe).
*/

/* ---------- Clickable list rows (Messages inbox etc.) ---------- */
.ca-portal-app .ca-list-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid var(--ca-border-soft, rgba(15,23,42,.08));
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 18px rgba(2,6,23,.04);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.ca-portal-app .ca-list-row:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(2,6,23,.06);
  border-color:rgba(37,99,235,.22);
  background:rgba(15,23,42,.01);
}
.ca-portal-app .ca-list-row:active{ transform:translateY(0); }

.ca-portal-app .ca-list-row .ca-badge{
  min-width:22px;
  height:22px;
  line-height:22px;
  border-radius:999px;
  font-weight:800;
}

/* ---------- Drawers (Order detail cards etc.) ---------- */
@keyframes caFadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.ca-portal-app .ca-drawer{
  animation:caFadeUp .16s ease;
  border:1px solid rgba(37,99,235,.18);
  box-shadow:0 18px 40px rgba(2,6,23,.08);
}

/* ---------- Vendor Product Wizard (guided flow) ---------- */
.ca-portal-app .ca-wiz{ max-width:980px; }

/* Sticky progress bar inside wizard for mobile-first usability */
.ca-portal-app .ca-wiz-header{
  position:sticky;
  top:58px;
  z-index:4;
  background:rgba(255,255,255,.85);
  border:1px solid var(--ca-border-soft, rgba(15,23,42,.08));
  border-radius:16px;
  padding:10px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
@media (max-width: 720px){
  .ca-portal-app .ca-wiz-header{ top:52px; }
}

/* Make current step feel "active" even if markup used inline styles */
.ca-portal-app .ca-wiz[data-ca-wiz-step="1"] .ca-wiz-pill[data-ca-wiz-pill="1"],
.ca-portal-app .ca-wiz[data-ca-wiz-step="2"] .ca-wiz-pill[data-ca-wiz-pill="2"],
.ca-portal-app .ca-wiz[data-ca-wiz-step="3"] .ca-wiz-pill[data-ca-wiz-pill="3"],
.ca-portal-app .ca-wiz[data-ca-wiz-step="4"] .ca-wiz-pill[data-ca-wiz-pill="4"]{
  border-color:rgba(37,99,235,.22) !important;
  background:#fff !important;
  box-shadow:0 10px 18px rgba(2,6,23,.04);
  transform:translateY(-1px);
}

/* Wizard steps: clean entrance */
.ca-portal-app .ca-wiz-step{ animation:caFadeUp .14s ease; }

/* Sticky actions footer (always visible on mobile) */
.ca-portal-app .ca-wiz-footer{
  position:sticky;
  bottom:10px;
  z-index:4;
  border-radius:18px;
  overflow:hidden;
}
.ca-portal-app .ca-wiz-footer .ca-card-body{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Inputs inside wizard feel tighter and more app-like */
.ca-portal-app .ca-wiz-form .ca-label{ font-weight:700; }
.ca-portal-app .ca-wiz-form .ca-input{
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:none !important;
}
.ca-portal-app .ca-wiz-form .ca-input:focus{
  outline:none;
  box-shadow:var(--ca-ring, 0 0 0 3px rgba(37,99,235,.18)) !important;
  border-color:rgba(37,99,235,.35) !important;
}

/* ---------- Messages thread (chat-like) ---------- */
.ca-portal-app .ca-thread{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.ca-portal-app .ca-thread-msg{
  border:1px solid var(--ca-border-soft, rgba(15,23,42,.08));
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 18px rgba(2,6,23,.04);
  padding:12px 14px;
}
.ca-portal-app .ca-thread-head{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.ca-portal-app .ca-thread-name{ font-weight:800; }
.ca-portal-app .ca-thread-role{ color:rgba(15,23,42,.60); font-weight:700; }
.ca-portal-app .ca-thread-time{ margin-left:auto; color:rgba(15,23,42,.55); font-size:12px; }
.ca-portal-app .ca-thread-body{ color:var(--ca-text, #0f172a); font-size:14px; }

.ca-portal-app .ca-thread-attachments{ margin-top:10px; }
.ca-portal-app .ca-attach{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--ca-border-soft, rgba(15,23,42,.08));
  background:rgba(15,23,42,.02);
  margin:4px 6px 0 0;
}
.ca-portal-app .ca-attach:hover{
  border-color:rgba(37,99,235,.22);
  background:rgba(37,99,235,.06);
}

/* Ensure older button class aliases still look premium */
.ca-portal-app .ca-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  background:var(--ca-primary, #2563eb);
  color:#fff;
  border:1px solid rgba(37,99,235,.24);
  cursor:pointer;
}
.ca-portal-app .ca-btn-primary:hover{ filter:brightness(0.98); }