/* =========================================================
   nr-order -- dat hang nhanh (30/09/2026)
   Template: cart_default/cart.twig, cart_default/empty_cart.twig,
             components/nr_order_dialog.twig, components/nr_order_form.twig
   JS: assets/frontend/js/order.js (data-js / data-action)

   So huu: bo cuc trang gio, dong san pham, tom tat tien, khung Mua ngay,
   man hinh dat thanh cong, thanh dat hang day man hinh dien thoai.
   O nhap + nut gui la cua nr-lead (lead.css) -- file nay KHONG ve lai.
   Tu du tren trang Bootstrap: chi can tokens + button + svg-icon + lead.
   ========================================================= */

/* ---- Trang gio ---------------------------------------- */
.nr-order-page {
  --nr-order-gutter: var(--nr-space-3);
  --nr-order-cols: minmax(0, 1fr);
  --nr-order-areas: "items" "form" "trust";
  --nr-order-rows: auto;
  --nr-order-card-pad: var(--nr-space-4);

  padding-block: var(--nr-space-5) var(--nr-space-12);
  background: var(--nr-page-bg);
  color: var(--nr-text);
}

.nr-order-wrap {
  width: min(100% - 2 * var(--nr-order-gutter), var(--nr-container));
  margin-inline: auto;
}

.nr-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nr-space-2) var(--nr-space-4);
  margin-bottom: var(--nr-space-4);
}
.nr-order-title {
  margin: 0;
  font-size: var(--nr-text-2xl);
  font-weight: var(--nr-weight-bold);
  line-height: var(--nr-leading-tight);
  color: var(--nr-text);
}
.nr-order-count {
  margin-left: var(--nr-space-2);
  font-size: var(--nr-text-base);
  font-weight: var(--nr-weight-normal);
  color: var(--nr-text-muted);
}
.nr-order-back {
  display: inline-flex;
  align-items: center;
  gap: var(--nr-space-1);
  min-height: var(--nr-control-h);
  color: var(--nr-text);
  font-size: var(--nr-text-sm);
  font-weight: var(--nr-weight-semibold);
  text-decoration: none;
}
.nr-order-back:hover { color: var(--nr-primary-text); }
.nr-order-back > .nr-svg { font-size: var(--nr-text-lg); }

.nr-order-grid {
  display: grid;
  grid-template-columns: var(--nr-order-cols);
  grid-template-areas: var(--nr-order-areas);
  grid-template-rows: var(--nr-order-rows); /* >=901: hang 1 = the san pham, hang 2 (1fr) an phan con lai cua cot form */
  gap: var(--nr-space-4);
  align-items: start;
}
.nr-order-grid > .nr-order-card { grid-area: items; }
.nr-order-grid > .nr-order-card.nr-order-card--form { grid-area: form; }
.nr-order-trust { grid-area: trust; min-width: 0; container-type: inline-size; }

.nr-order-card {
  min-width: 0;
  padding: var(--nr-order-card-pad);
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-lg);
  box-shadow: var(--nr-shadow-sm);
}
.nr-order-card-title {
  margin: 0 0 var(--nr-space-4);
  font-size: var(--nr-text-lg);
  font-weight: var(--nr-weight-bold);
  line-height: var(--nr-leading-snug);
  color: var(--nr-text);
}

/* ---- Dong san pham (trang gio + khung Mua ngay) -------- */
.nr-order-lines { display: grid; margin: 0; padding: 0; list-style: none; }

.nr-order-line {
  --nr-order-thumb: 64px;
  --nr-order-line-cols: var(--nr-order-thumb) minmax(0, 1fr);
  --nr-order-line-areas: "thumb info" "thumb ctrl";
  --nr-order-name-size: var(--nr-text-base);
  --nr-order-price-size: var(--nr-text-base);
  --nr-order-ctrl-dir: row;
  --nr-order-ctrl-align: center;

  display: grid;
  grid-template-columns: var(--nr-order-line-cols);
  grid-template-areas: var(--nr-order-line-areas);
  gap: var(--nr-space-2) var(--nr-space-4);
  align-items: center;
  padding-block: var(--nr-space-4);
  border-top: 1px solid var(--nr-border);
}
.nr-order-line:first-child { padding-top: 0; border-top: 0; }
.nr-order-line:last-child { padding-bottom: 0; }

.nr-order-thumb { grid-area: thumb; align-self: start; display: block; }
.nr-order-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-sm);
}

.nr-order-info { grid-area: info; min-width: 0; }
.nr-order-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--nr-text);
  font-size: var(--nr-order-name-size);
  font-weight: var(--nr-weight-semibold);
  line-height: var(--nr-leading-snug);
  text-decoration: none;
}
a.nr-order-name:hover { color: var(--nr-primary-text); }
.nr-order-meta { margin: var(--nr-space-1) 0 0; font-size: var(--nr-text-xs); color: var(--nr-text-muted); }
.nr-order-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--nr-space-2);
  margin: var(--nr-space-1) 0 0;
  white-space: nowrap;
}
.nr-order-price > strong { font-size: var(--nr-order-price-size); font-weight: var(--nr-weight-bold); color: var(--nr-primary-text); }
.nr-order-price > s { font-size: var(--nr-text-sm); color: var(--nr-text-muted); }
.nr-order-price > span { font-size: var(--nr-text-sm); color: var(--nr-text-muted); }

.nr-order-ctrl {
  grid-area: ctrl;
  display: flex;
  flex-direction: var(--nr-order-ctrl-dir);
  align-items: var(--nr-order-ctrl-align);
  justify-content: space-between;
  gap: var(--nr-space-3);
}

.nr-order-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nr-border-strong);
  border-radius: var(--nr-radius-md);
  background: var(--nr-surface);
}
.nr-order-qty-btn {
  display: grid;
  place-items: center;
  width: var(--nr-control-h);
  height: var(--nr-control-h);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nr-text);
  font-size: var(--nr-text-lg);
  cursor: pointer;
}
.nr-order-qty-btn:hover { color: var(--nr-primary-text); }
.nr-order-qty-btn[disabled] { color: var(--nr-border-strong); cursor: default; }
/* input.* (0,1,1): css_used.css cu dat input[type=number] (0,1,1) vien/cao tren trang Bootstrap */
input.nr-order-qty-input {
  width: var(--nr-space-10);
  height: var(--nr-control-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nr-text);
  font: inherit;
  font-size: var(--nr-text-base);
  font-weight: var(--nr-weight-semibold);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
input.nr-order-qty-input::-webkit-inner-spin-button,
input.nr-order-qty-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

.nr-order-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--nr-space-1);
  min-height: var(--nr-control-h);
  padding: 0 var(--nr-space-2);
  border: 0;
  border-radius: var(--nr-radius-sm);
  background: transparent;
  color: var(--nr-text-muted);
  font: inherit;
  font-size: var(--nr-text-sm);
  cursor: pointer;
}
.nr-order-remove:hover { color: var(--nr-primary-text); background: var(--nr-soft); }
.nr-order-remove > .nr-svg { font-size: var(--nr-text-lg); }

.nr-order-line[data-state="busy"] { opacity: .55; pointer-events: none; }

/* ---- Tom tat tien ------------------------------------- */
.nr-order-sum {
  display: grid;
  gap: var(--nr-space-2);
  margin-bottom: var(--nr-space-5);
  padding: var(--nr-space-4);
  background: var(--nr-surface-sunken);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-md);
}
.nr-order-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nr-space-3);
  font-size: var(--nr-text-sm);
  color: var(--nr-text-muted);
}
.nr-order-sum-row > :last-child { color: var(--nr-text); text-align: right; }
.nr-order-sum-row.nr-order-sum-row--total {
  padding-top: var(--nr-space-3);
  border-top: 1px dashed var(--nr-border-strong);
  font-size: var(--nr-text-base);
  font-weight: var(--nr-weight-semibold);
  color: var(--nr-text);
}
.nr-order-sum-row--total > strong {
  font-size: var(--nr-text-xl);
  font-weight: var(--nr-weight-bold);
  color: var(--nr-primary-text);
  white-space: nowrap;
}
.nr-order-sum-row--total small { font-size: var(--nr-text-sm); font-weight: var(--nr-weight-normal); color: var(--nr-text-muted); }

/* ---- Form (bo cuc quanh o nhap nr-lead) ---------------- */
/* Nut gui luon het hang: form dat hang chi co 1 hanh dong. Chi doi bien cua nr-lead. */
.nr-lead-form.nr-order-form { --nr-lead-submit-w: 100%; }
/* Xung ho: 2 lua chon ngan -> 2 o nho, rieng 1 hang */
.nr-lead-choice.nr-order-salute { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 120px)); }
.nr-order-status { grid-column: 1 / -1; }
.nr-order-status:empty { display: none; }

.nr-order-assure {
  display: grid;
  gap: var(--nr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-column: 1 / -1;
  font-size: var(--nr-text-xs);
  line-height: var(--nr-leading-snug);
  color: var(--nr-text-muted);
}
.nr-order-assure > li { display: flex; align-items: center; gap: var(--nr-space-2); }
.nr-order-assure .nr-svg { flex: none; font-size: var(--nr-text-base); color: var(--nr-success); }

/* ---- Cam ket duoi trang gio --------------------------- */
.nr-order-perks {
  display: grid;
  grid-template-columns: var(--nr-order-perks-cols, minmax(0, 1fr));
  gap: var(--nr-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nr-order-perks > li {
  display: flex;
  align-items: center;
  gap: var(--nr-space-3);
  padding: var(--nr-space-3) var(--nr-space-4);
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-md);
  font-size: var(--nr-text-xs);
  color: var(--nr-text-muted);
}
.nr-order-perks strong { display: block; font-size: var(--nr-text-sm); font-weight: var(--nr-weight-semibold); color: var(--nr-text); }
.nr-order-perks a { color: var(--nr-primary-text); font-weight: var(--nr-weight-bold); text-decoration: none; }
.nr-order-perk-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--nr-space-10);
  height: var(--nr-space-10);
  border-radius: 50%;
  background: var(--nr-soft);
  color: var(--nr-primary-text);
  font-size: var(--nr-text-xl);
}

/* ---- Thanh dat hang day man hinh (dien thoai) ---------- */
.nr-order-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(var(--nr-z-modal) - 1); /* tren noi dung trang, duoi khung Mua ngay */
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--nr-space-4);
  padding: var(--nr-space-3) var(--nr-order-gutter, var(--nr-space-3)) calc(var(--nr-space-3) + env(safe-area-inset-bottom));
  background: var(--nr-surface);
  border-top: 1px solid var(--nr-border);
  box-shadow: 0 calc(-1 * var(--nr-space-1)) var(--nr-space-4) color-mix(in srgb, var(--nr-surface-dark) 8%, transparent); /* bong huong len: tach thanh khoi noi dung dang cuon */
}
.nr-order-bar[data-state="hidden"] { display: none; }
.nr-order-bar-sum { display: grid; line-height: var(--nr-leading-tight); }
.nr-order-bar-sum > small { font-size: var(--nr-text-xs); color: var(--nr-text-muted); }
.nr-order-bar-sum > strong { font-size: var(--nr-text-lg); font-weight: var(--nr-weight-bold); color: var(--nr-primary-text); }
.nr-order-bar > .nr-btn { flex: 0 1 200px; }

/* ---- Khung "Dat hang nhanh" (nut Mua ngay) -------------- */
.nr-order-dialog {
  width: min(100% - 2 * var(--nr-space-4), 560px);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--nr-space-6));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--nr-radius-lg);
  background: var(--nr-surface);
  color: var(--nr-text);
  box-shadow: 0 var(--nr-space-3) var(--nr-space-10) color-mix(in srgb, var(--nr-surface-dark) 35%, transparent); /* lop noi can bong de tach nen -- cung cach nr-modal-box */
}
.nr-order-dialog[open] { display: flex; flex-direction: column; }
.nr-order-dialog::backdrop { background: color-mix(in srgb, var(--nr-surface-dark) 60%, transparent); }

.nr-order-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nr-space-3);
  padding: var(--nr-space-3) var(--nr-space-3) var(--nr-space-3) var(--nr-space-5);
  border-bottom: 1px solid var(--nr-border);
}
.nr-order-dialog-title { margin: 0; font-size: var(--nr-text-lg); font-weight: var(--nr-weight-bold); color: var(--nr-text); }
.nr-order-close {
  display: grid;
  place-items: center;
  width: var(--nr-control-h);
  height: var(--nr-control-h);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nr-text);
  font-size: var(--nr-text-xl);
  cursor: pointer;
}
.nr-order-close:hover { background: var(--nr-soft); }

.nr-order-dialog-body {
  display: grid;
  gap: var(--nr-space-5);
  padding: var(--nr-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nr-order-dialog-body[hidden] { display: none; }

.nr-order-summary {
  display: grid;
  gap: var(--nr-space-3);
  padding: var(--nr-space-4);
  background: var(--nr-surface-sunken);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-md);
}
/* Dong gon (khung Mua ngay): khong co o so luong -- chi doi bien */
.nr-order-line.nr-order-line--compact {
  --nr-order-thumb: 56px;
  --nr-order-line-cols: var(--nr-order-thumb) minmax(0, 1fr);
  --nr-order-line-areas: "thumb info";
  --nr-order-name-size: var(--nr-text-sm);
  --nr-order-price-size: var(--nr-text-sm);
}
.nr-order-link {
  justify-self: start;
  color: var(--nr-link);
  font-size: var(--nr-text-sm);
  font-weight: var(--nr-weight-semibold);
  text-decoration: none;
}
.nr-order-link[hidden] { display: none; }
.nr-order-link:hover { text-decoration: underline; }

/* ---- Dat thanh cong / gio trong ------------------------ */
.nr-order-done {
  display: grid;
  justify-items: center;
  gap: var(--nr-space-2);
  padding: var(--nr-space-8) var(--nr-space-5);
  text-align: center;
}
.nr-order-done[hidden] { display: none; }
.nr-order-done-ico {
  display: grid;
  place-items: center;
  width: var(--nr-space-14);
  height: var(--nr-space-14);
  margin-bottom: var(--nr-space-2);
  border-radius: 50%;
  background: var(--nr-call-soft);
  color: var(--nr-success);
  font-size: var(--nr-text-3xl);
}
.nr-order-done-title { margin: 0; font-size: var(--nr-text-xl); font-weight: var(--nr-weight-bold); color: var(--nr-text); }
.nr-order-done-code { margin: 0; font-size: var(--nr-text-sm); color: var(--nr-text-muted); }
.nr-order-done-code > strong { color: var(--nr-text); letter-spacing: .02em; }
.nr-order-done-desc { max-width: 42ch; margin: 0; font-size: var(--nr-text-sm); line-height: var(--nr-leading-normal); color: var(--nr-text-muted); }
.nr-order-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nr-space-3); margin-top: var(--nr-space-4); }
.nr-order-card.nr-order-empty { display: grid; justify-items: center; gap: var(--nr-space-2); padding-block: var(--nr-space-12); text-align: center; }

/* ---- Moc man hinh -------------------------------------- */
@media (width <= 900px) {
  .nr-order-bar { display: flex; }
  .nr-order-page { padding-bottom: calc(var(--nr-space-14) + var(--nr-space-10)); } /* chua cho thanh dat hang dinh day */
}

@media (width <= 600px) {
  /* Dien thoai: khung Mua ngay thanh tam truot tu day len (bottom sheet) */
  .nr-order-dialog {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--nr-radius-lg) var(--nr-radius-lg) 0 0;
  }
  .nr-order-dialog-body { padding: var(--nr-space-4); padding-bottom: calc(var(--nr-space-4) + env(safe-area-inset-bottom)); }
}

@media (width >= 601px) {
  .nr-order-page { --nr-order-gutter: var(--nr-space-6); --nr-order-card-pad: var(--nr-space-6); }
  .nr-order-line:not(.nr-order-line--compact) { --nr-order-thumb: 80px; --nr-order-line-cols: var(--nr-order-thumb) minmax(0, 1fr) auto; --nr-order-line-areas: "thumb info ctrl"; --nr-order-ctrl-dir: column; --nr-order-ctrl-align: flex-end; }
  .nr-order-title { font-size: var(--nr-text-3xl); }
}

@media (width >= 901px) {
  .nr-order-page { --nr-order-cols: minmax(0, 1fr) 380px; --nr-order-areas: "items form" "trust form"; --nr-order-rows: auto 1fr; padding-top: var(--nr-space-8); }
}

/* Form dinh khi cuon chi tu 1200px: header site o 992-1199 cao 131-154 (menu 2 dong), --nr-sticky-top
   chi dung cho header 95px o >=1200 -- duoi moc do form truot xuong duoi header. */
@media (width >= 1200px) {
  .nr-order-card.nr-order-card--form { position: sticky; top: var(--nr-sticky-top); }
}

@media (width >= 1101px) {
  .nr-order-page { --nr-order-cols: minmax(0, 1fr) 420px; }
  .nr-order-grid { gap: var(--nr-space-6); }
}

/* Cam ket: 3 cot khi CHINH cot chua du rong (cot trai trang gio o >=1280, hoac ca hang o 761-900) */
@container (min-width: 720px) {
  .nr-order-perks { --nr-order-perks-cols: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .nr-order-dialog[open] { animation: nr-order-in var(--nr-duration) var(--nr-ease); }
}
@keyframes nr-order-in {
  from { opacity: 0; transform: translateY(var(--nr-space-4)); }
  to { opacity: 1; transform: none; }
}