/* Shared visual baseline for dialogs and transactional forms. */
:root {
  --eco-surface: #ffffff;
  --eco-border: #dcebe2;
  --eco-muted: #63756d;
  --eco-primary: #079447;
  --eco-primary-dark: #06773b;
  --eco-focus: rgba(7, 148, 71, .22);
}

:focus-visible {
  outline: 3px solid var(--eco-focus);
  outline-offset: 2px;
}

.modal-bg {
  padding: 24px;
  backdrop-filter: blur(3px);
}

.modal {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 32px));
  max-height: min(82vh, 780px);
  border: 1px solid rgba(220, 235, 226, .95);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(16, 42, 31, .28);
  overflow: hidden;
}

.modal-head {
  flex: 0 0 auto;
  min-height: 78px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--eco-border);
}

.modal-head h2,
.modal-head h3 { line-height: 1.25; }

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  padding: 24px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--eco-border);
  background: #fbfdfb;
}

.modal .field input:not([type="checkbox"]):not([type="radio"]),
.modal .field select,
.modal .field textarea,
.payment-confirm-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #cfe1d7;
  border-radius: 11px;
  background: #fff;
  color: #17382a;
  font: inherit;
}

.modal .field input:not([type="checkbox"]):not([type="radio"]):focus,
.modal .field select:focus,
.modal .field textarea:focus,
.payment-confirm-form input:focus {
  border-color: var(--eco-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--eco-focus);
}

/* Checkbox/radio trong popup phải luôn là control gọn; vùng bấm nằm ở label. */
.modal input[type="checkbox"],
.modal input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  box-sizing: border-box !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  accent-color: var(--eco-primary);
  cursor: pointer;
}

.modal .checks label,
.modal .promo-check-list label,
.modal .ch-rank-checks label,
.modal label.check {
  min-height: 42px;
  cursor: pointer;
}

.modal .btn,
.payment-confirm-form .btn {
  min-height: 44px;
  border-radius: 11px;
  white-space: normal;
}

.payment-confirm-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.payment-confirm-summary {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1px solid #d8ecde;
  border-radius: 14px;
  background: #f5fbf6;
  color: #274638;
}

.payment-confirm-summary p { margin: 0 0 6px; line-height: 1.5; }
.payment-confirm-summary strong { color: #06763a; font-size: 1.05rem; }

.payment-confirm-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #344d40;
  font-size: .9rem;
  font-weight: 700;
}

.payment-confirm-form label span { line-height: 1.35; }
.payment-confirm-account { grid-column: 1 / -1; }

.payment-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
}

.payment-confirm-actions small { color: var(--eco-muted); line-height: 1.45; }
.payment-confirm-actions .btn { flex: 0 0 auto; padding-inline: 18px; background: var(--eco-primary); }
.payment-confirm-actions .btn:hover { background: var(--eco-primary-dark); }
.payment-confirm-actions .btn.is-loading { opacity: .78; cursor: wait; transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18); }

.order-invoice-request {
  border: 1px solid #d8ecde;
  border-radius: 14px;
  background: #f7fcf8;
  padding: 14px 16px;
}

.order-invoice-request .invoice-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: #244435;
  font-weight: 750;
  cursor: pointer;
}

.order-invoice-request .invoice-check input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  flex: 0 0 20px;
  box-sizing: border-box;
  width: 20px !important;
  max-width: 20px !important;
  min-width: 20px;
  height: 20px;
  max-height: 20px !important;
  min-height: 20px !important;
  margin: 0;
  padding: 0;
  accent-color: var(--eco-primary);
  transform: none !important;
  border-radius: 4px !important;
}

.order-invoice-request .invoice-check span { color: #6a7e73; font-size: .88rem; font-weight: 600; }
.order-invoice-request .invoice-fields { margin-top: 14px; }

.debt-collect-confirm { display: grid; gap: 10px; color: #294537; }
.debt-collect-confirm p { margin: 0; line-height: 1.55; }
.debt-collect-confirm strong { color: #087a40; font-size: 1.25rem; }
.debt-collect-confirm small { color: var(--eco-muted); line-height: 1.5; }
.debt-collect-confirm label { display:grid; gap:7px; margin-top:4px; font-weight:750; color:#315442; }
.debt-collect-confirm input { width:100%; min-height:44px; border:1px solid #cfe4d6; border-radius:10px; padding:9px 12px; font:inherit; }
.debt-collect-grid { display:grid; grid-template-columns:1fr auto; gap:8px 18px; padding:13px; border:1px solid #d8ecde; border-radius:12px; background:#f7fcf8; }
.debt-collect-grid span { color:#6a7e73; }.debt-collect-grid b,.debt-collect-grid strong { text-align:right; }.debt-collect-grid strong { color:#087a40; font-size:1.1rem; }
.debt-hero-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 22px; width:100%; margin:16px 0; padding:18px 22px; border:0; border-radius:18px; text-align:left; color:#fff; cursor:pointer; background:linear-gradient(115deg,#075d38,#0ca55b); box-shadow:0 12px 25px rgba(4,103,57,.18); }
.debt-hero-card span { font-size:.78rem; font-weight:850; letter-spacing:.07em; }.debt-hero-card strong { font-size:1.55rem; }.debt-hero-card small { opacity:.92; }.debt-hero-card i { font-style:normal; font-weight:800; white-space:nowrap; }
.debt-modal-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }.debt-modal-summary div { padding:12px; border-radius:12px; background:#f3faf5; }.debt-modal-summary span { display:block; font-size:.78rem; color:#60796b; }.debt-modal-summary b { display:block; margin-top:5px; color:#087a40; }.debt-modal-summary .overdue b { color:#c64d1a; }
.debt-list-filter { display:flex; gap:8px; margin-bottom:12px; }.debt-list-filter input,.debt-list-filter select { min-width:0; min-height:40px; border:1px solid #d5e5da; border-radius:10px; padding:0 10px; font:inherit; }.debt-list-filter input { flex:1; }
.debt-row { display:grid; grid-template-columns:minmax(0,1fr) 150px auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e3eee6; }.debt-row b,.debt-row span { display:block; }.debt-row span,.debt-row small { color:#6a7e73; font-size:.84rem; }.debt-row strong { color:#087a40; }.debt-row.overdue strong,.debt-row.overdue em { color:#c64d1a; }.debt-row em { font-style:normal; font-size:.8rem; font-weight:800; }
.crm-debt-line { grid-column:1 / -1; display:flex; justify-content:space-between; padding-top:8px; margin-top:2px; border-top:1px dashed #d8e8dc; color:#8a5917; }.crm-debt-line b { color:#b85b14; }

.payment-confirm-simple .payment-confirm-actions {
  padding-top: 0;
}

@media (max-width: 640px) {
  .modal-bg { padding: 12px; align-items: flex-end; }
  .modal { width: 100%; max-height: calc(100vh - 24px); border-radius: 20px 20px 14px 14px; }
  .modal-head { min-height: 64px; padding: 16px 18px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 13px 18px; }
  .modal-foot > * { flex: 1 1 0; }
  .payment-confirm-form { grid-template-columns: 1fr; gap: 14px; }
  .payment-confirm-account { grid-column: auto; }
  .payment-confirm-actions { grid-column: auto; display: grid; }
  .payment-confirm-actions .btn { width: 100%; }
  .order-invoice-request { padding: 13px; }
  .order-invoice-request .invoice-check { align-items: flex-start; }
  .debt-hero-card { grid-template-columns:1fr auto; padding:16px; }.debt-hero-card small { grid-column:1 / -1; }.debt-modal-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.debt-list-filter { display:grid; grid-template-columns:1fr 1fr; }.debt-list-filter button { grid-column:1 / -1; }.debt-row { grid-template-columns:1fr auto; }.debt-row > div:last-child { grid-column:1 / -1; display:flex; gap:8px; align-items:center; }.debt-row > div:last-child .btn { flex:1; }
}