/* checkout.css — style tách riêng cho block đặt hàng Ladi */

/* ==== 1. Spinner số lượng (mượt, dễ bấm) ==== */
.ladi-form-checkout-payment-quantity {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Ẩn spinner mặc định, chừa chỗ cho nút ▲ ▼ */
.ladi-form-checkout-payment-quantity input[type="number"] {
  padding-right: 28px;
  -moz-appearance: textfield;
}
.ladi-form-checkout-payment-quantity input[type="number"]::-webkit-outer-spin-button,
.ladi-form-checkout-payment-quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Nút ▲ ▼ — bắt click tốt, có hover/active nhẹ */
.ladi-form-checkout-payment-quantity .up,
.ladi-form-checkout-payment-quantity .down {
  position: absolute;
  right: 6px;
  width: 24px;
  height: calc(50% - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 2;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color .15s ease, transform .05s ease;
}
.ladi-form-checkout-payment-quantity .up   { top: 2px;    }
.ladi-form-checkout-payment-quantity .down { bottom: 2px; }
.ladi-form-checkout-payment-quantity .up:hover,
.ladi-form-checkout-payment-quantity .down:hover { background: rgba(0,0,0,.06); }
.ladi-form-checkout-payment-quantity .up:active,
.ladi-form-checkout-payment-quantity .down:active { transform: translateY(1px); }

/* Tránh lăn chuột vô tình đổi số trên desktop */
.ladi-form-checkout-payment-quantity input[type="number"] {
  overscroll-behavior: contain;
}

/* ==== 2. Click cả dòng sản phẩm (trừ ô nhập) ==== */
.ladi-form-checkout-payment-item {
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .15s ease;
}
.ladi-form-checkout-payment-item:hover { background: rgba(0,0,0,.02); }
/* Khu vực nhập thì trả con trỏ về mặc định */
.ladi-form-checkout-payment-item .ladi-form-checkout-payment-quantity,
.ladi-form-checkout-payment-item input,
.ladi-form-checkout-payment-item select,
.ladi-form-checkout-payment-item textarea,
.ladi-form-checkout-payment-item button,
.ladi-form-checkout-payment-item a {
  cursor: auto;
}

/* ==== 3. Checkbox “span” tuỳ biến (fallback nếu theme không style) ==== */
.ladi-form-checkout-product-check {
  width: 18px; height: 18px;
  border: 1.5px solid #cfd3d8;
  border-radius: 4px;
  display: inline-block;
  flex: 0 0 18px;
  margin: 8px 10px 8px 0;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ladi-form-checkout-product-check.checked {
  background: #1852fa;
  border-color: #1852fa;
}
.ladi-form-checkout-product-check.checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}

/* ==== 4. Focus ring để dùng bàn phím (Space/Enter) ==== */
.ladi-form-checkout-payment-item:focus {
  outline: 2px solid #3b82f6;    /* xanh dương nhẹ */
  outline-offset: 2px;
}

/* ==== 5. Vặt vãnh hữu ích ==== */
.ladi-form-checkout-product-content img {
  max-height: 36px; border-radius: 4px;
}
.price .small { opacity: .6; }


/* Viền đỏ khi lỗi (không chèn text -> không vỡ layout) */
.input-error { border-color:#ef4444 !important; box-shadow:0 0 0 1px #ef4444 inset !important; }

/* Lỗi khối sản phẩm */
.block-error { outline:2px dashed #ef4444; outline-offset:6px; }
#product-error-msg { color:#ef4444; font-size:13px; margin:8px 0 0; }