/* ============================================================
   智能下单卡片 · smart-order-card
   设计语言对齐全站：深色底 #16161F + 紫色主色 #8B7CF6
   复用 material-card 容器与 focus-within 发光，零新增配色
   ============================================================ */
.smart-order-card {
  --soc-primary: #8B7CF6;
  --soc-primary-soft: rgba(139, 124, 246, .16);
  --soc-bg: #16161F;
  --soc-surface: #1A1A24;
  --soc-border: rgba(255, 255, 255, .08);
  --soc-text: #E5E5EF;
  --soc-muted: #9A9AB0;
  --soc-success: #34D399;
  --soc-warn: #F59E0B;
  border: 1px solid var(--soc-border);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(139, 124, 246, .04), transparent 40%), var(--soc-bg);
}

.soc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.soc-emoji { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(139, 124, 246, .5)); }
.soc-title { font-size: 16px; font-weight: 700; color: var(--soc-text); }
.soc-sub { font-size: 12px; color: var(--soc-muted); margin-top: 2px; }

.soc-input {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface);
  color: var(--soc-text);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.soc-input::placeholder { color: #6b6b80; }
.soc-input:focus {
  outline: none;
  border-color: var(--soc-primary);
  box-shadow: 0 0 0 3px var(--soc-primary-soft);
}

.soc-actions { display: flex; gap: 10px; margin-top: 12px; }
.soc-actions .btn { flex: 0 0 auto; }
.soc-actions .btn-primary { box-shadow: 0 4px 14px rgba(139, 124, 246, .3); }

/* 草稿区 */
.soc-draft { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--soc-border); }
.soc-draft-title { font-size: 13px; font-weight: 600; color: var(--soc-text); margin-bottom: 12px; }
.soc-ok { color: var(--soc-success); font-weight: 600; font-size: 12px; }
.soc-warn { color: var(--soc-warn); font-weight: 600; font-size: 12px; }
.soc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.soc-row { display: flex; flex-direction: column; gap: 4px; }
.soc-label { font-size: 12px; color: var(--soc-muted); }
.soc-field {
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface);
  color: var(--soc-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.soc-field:focus {
  outline: none;
  border-color: var(--soc-primary);
  box-shadow: 0 0 0 3px var(--soc-primary-soft);
}
select.soc-field { appearance: none; cursor: pointer; }
.soc-wide { grid-column: 1 / -1; }
.soc-phone-row { margin-top: 12px; }

.soc-submit {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  background: var(--soc-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.soc-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(139, 124, 246, .4); }
.soc-submit:disabled { opacity: .65; cursor: progress; }

/* 成功区 */
.soc-result { margin-top: 14px; }
.soc-success {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, .35);
  background: rgba(52, 211, 153, .08);
}
.soc-success-badge { font-size: 14px; font-weight: 700; color: var(--soc-success); }
.soc-order-no { font-size: 13px; color: var(--soc-text); margin: 8px 0; }
.soc-order-no b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; color: #fff; }
.soc-success-tip { font-size: 12px; color: var(--soc-muted); margin-top: 8px; }
.soc-success-actions { margin-top: 12px; display: flex; gap: 10px; }

/* 时间线占位微调（复用全局 OrderTimeline） */
.soc-success .order-timeline { margin-top: 10px; }

@media (max-width: 520px) {
  .soc-grid { grid-template-columns: 1fr; }
}