/* Style riêng: màn Tạo đơn (js/views/order-new.js, đợt 4). Bố cục 2 cột dùng .on-layout / .on-summary trong catalog.css. */

.on-banner { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--violet-bg); color: var(--violet); font-weight: 500; }
.on-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.on-warn { color: var(--danger); }
.on-low { color: var(--warn); }
.on-ok { color: var(--good); }

/* Nguồn đơn */
.on-source { border-left: 4px solid var(--warn); display: flex; flex-direction: column; gap: 10px; }
.on-source > .small { margin: 0; }
.on-source-grid { margin-top: 2px; }
.on-closer-fixed { margin: 0; align-self: end; padding-bottom: 6px; }

/* Khách hàng */
.on-cust-search { display: flex; gap: 8px; }
.on-cust-search input { flex: 1 1 auto; min-width: 0; }
.on-picked { background: var(--good-bg); flex-wrap: wrap; }
.on-picked-pending { border-color: var(--warn); background: var(--warn-bg); }

/* Giỏ hàng */
.on-cart-head { margin-bottom: 8px; }
.on-empty-cart { margin: 0 0 12px; font-size: 13px; }
.on-lines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.on-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 104px 32px; gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.on-line:last-child { border-bottom: 0; }
.on-line.is-over { background: var(--danger-bg); }
.on-line-name { min-width: 0; overflow-wrap: anywhere; }
.on-line-amount { text-align: right; }
.on-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.on-stepper input { width: 52px; border: 0; text-align: center; background: transparent; padding: 6px 2px; -moz-appearance: textfield; }
.on-stepper input::-webkit-inner-spin-button, .on-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Ưu đãi + quà */
.on-promo { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.on-promo.is-on { border: 1px solid var(--good); background: var(--good-bg); }
.on-promo p { margin: 0; }
.on-promo-lines { margin: 0; padding-left: 18px; line-height: 1.6; }
.on-gifts { margin-top: 4px; }
.on-extra-gift .row-between select { flex: 1 1 auto; min-width: 0; }
.on-promo > .btn { align-self: flex-start; }

/* Lưới chọn sản phẩm */
.on-picker { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.on-group-title { margin: 6px 0 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.on-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.on-prod {
  position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; min-height: 104px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit;
}
.on-prod:hover:not(:disabled) { border-color: var(--ink-2); }
.on-prod.is-picked { border: 2px solid var(--accent-strong); padding: 9px 11px; }
.on-prod.is-out { opacity: .55; cursor: not-allowed; }
.on-prod-name { font-weight: 600; font-size: 13px; line-height: 1.35; padding-right: 30px; overflow-wrap: anywhere; }
.on-prod-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.on-prod-qty { position: absolute; top: 8px; right: 8px; background: var(--accent-strong); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }

/* Giao hàng */
.on-addr { min-width: 0; }
.on-options { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.on-options summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }

/* Thanh toán */
.on-summary h2 { margin: 0; }
.on-money-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.on-summary > .small { margin: -4px 0 0; }
.on-gift-sum { padding: 6px 0; color: var(--good); overflow-wrap: anywhere; }

/* Thanh tổng dính đáy (chỉ điện thoại) */
.on-sticky { display: none; }

@media (max-width: 860px) {
  .on-page { padding-bottom: 72px; }
  .on-summary { position: static; }
  .on-line { grid-template-columns: minmax(0, 1fr) auto 32px; }
  .on-line-amount { grid-column: 1 / -1; text-align: left; order: 4; }
  .on-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-cust-search { flex-wrap: wrap; }
  .on-cust-search .btn { flex: 1 1 100%; }
  .on-sticky {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; position: fixed; z-index: 34;
    left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); padding: 10px 16px;
    background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  }
  .on-sticky-info { display: flex; flex-direction: column; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; cursor: pointer; }
  .on-sticky-info .strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .on-sticky .btn { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .on-money-inputs { grid-template-columns: minmax(0, 1fr); }
}