/* ==========================================================================
   Bulk Variation Order — Premium UI v1.2
   Sticky header + scrollable body (10 rows) + sticky footer
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────── */
.bvo-wrap {
	--bvo-accent:      #0d7a6b;
	--bvo-accent-dk:   #095c50;
	--bvo-text:        #111827;
	--bvo-muted:       #6b7280;
	--bvo-border:      #e2e8f0;
	--bvo-bg:          #ffffff;
	--bvo-bg-head:     #f4f6f8;
	--bvo-bg-footer:   #f4f6f8;
	--bvo-row-hover:   #f0faf9;
	--bvo-row-active:  #e6f4f2;
	--bvo-radius:      10px;
	--bvo-radius-sm:   7px;
	--bvo-shadow:      0 2px 8px rgba(0,0,0,.07), 0 6px 24px rgba(0,0,0,.05);
	--bvo-font:        'DM Sans', sans-serif;
	--bvo-tr:          0.15s ease;
	/* row height × 10 rows for the scroll area */
	--bvo-row-h:       54px;
	--bvo-scroll-h:    calc(var(--bvo-row-h) * 10);
}

/* ── Wrap ───────────────────────────────────────────────────────────────── */
.bvo-wrap {
	font-family: var(--bvo-font);
	color: var(--bvo-text);
}

/* ── Outer card ─────────────────────────────────────────────────────────── */
.bvo-table-wrapper {
	border: 1px solid var(--bvo-border);
	border-radius: var(--bvo-radius);
	box-shadow: var(--bvo-shadow);
	overflow: hidden;
	background: var(--bvo-bg);
	display: flex;
	flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY HEADER (div-based, not <thead>)
   ═══════════════════════════════════════════════════════════════════════════ */
.bvo-thead {
	flex-shrink: 0;
	background: var(--bvo-bg-head);
	border-bottom: 2px solid var(--bvo-border);
	position: sticky;          /* sticky inside the card */
	top: 0;
	z-index: 2;
}

.bvo-thead-row {
	display: flex;
	align-items: center;
	padding: 0 16px;
	height: 40px;
}

.bvo-thead .bvo-col-model,
.bvo-thead .bvo-col-qty {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bvo-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLABLE BODY
   ═══════════════════════════════════════════════════════════════════════════ */
.bvo-tbody {
	overflow-y: auto;
	max-height: var(--bvo-scroll-h);
	overscroll-behavior: contain;
	/* Thin custom scrollbar */
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.bvo-tbody::-webkit-scrollbar        { width: 5px; }
.bvo-tbody::-webkit-scrollbar-track  { background: transparent; }
.bvo-tbody::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 99px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROWS (div-based)
   ═══════════════════════════════════════════════════════════════════════════ */
.bvo-row {
	display: flex;
	align-items: center;
	padding: 0 16px;
	min-height: var(--bvo-row-h);
	border-bottom: 1px solid var(--bvo-border);
	transition: background var(--bvo-tr);
}

.bvo-row:last-child {
	border-bottom: none;
}

.bvo-row:hover:not(.bvo-out-of-stock) {
	background: var(--bvo-row-hover);
}

.bvo-row.bvo-has-qty {
	background: var(--bvo-row-active);
}

.bvo-row.bvo-out-of-stock {
	opacity: 0.4;
}

/* ── Columns (shared between header and rows) ───────────────────────────── */
.bvo-col-model {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-right: 12px;
	overflow: hidden;
}

.bvo-col-qty {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* header qty col — right-align text */
.bvo-thead .bvo-col-qty {
	min-width: 130px;
	justify-content: flex-end;
}

/* ── Variation image ────────────────────────────────────────────────────── */
.bvo-variation-img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--bvo-border);
	flex-shrink: 0;
	display: block;
	background: #f8fafc;
	cursor: zoom-in;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.bvo-variation-img:hover {
	opacity: 0.88;
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.bvo-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0,0,0,.78);
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.bvo-lightbox.bvo-lb-open {
	display: flex;
}

.bvo-lightbox-img {
	max-width: min(90vw, 700px);
	max-height: 90vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
	animation: bvo-lb-in 0.2s ease;
}

@keyframes bvo-lb-in {
	from { opacity: 0; transform: scale(0.93); }
	to   { opacity: 1; transform: scale(1); }
}

.bvo-lightbox-close {
	position: fixed;
	top: 18px;
	right: 22px;
	background: rgba(255,255,255,.15);
	border: none;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.bvo-lightbox-close:hover {
	background: rgba(255,255,255,.3);
}

/* ── Variation name ─────────────────────────────────────────────────────── */
.bvo-variation-name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bvo-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Out-of-stock badge (only "Hết hàng" remains) ──────────────────────── */
.bvo-stock-badge {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 99px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.bvo-stock-badge.bvo-out { background: #fee2e2; color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUANTITY STEPPER — compact, clear, 3-digit safe
   ═══════════════════════════════════════════════════════════════════════════ */
.bvo-qty-wrap {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 36px;
	background: transparent;
	border: none;
	padding: 0;
}

.bvo-qty-wrap:focus-within .bvo-qty-input {
	border-color: var(--bvo-accent);
	box-shadow: 0 0 0 3px rgba(13,122,107,.14);
}

.bvo-row.bvo-has-qty .bvo-qty-input {
	border-color: var(--bvo-accent);
}

.bvo-qty-btn {
	background: var(--bvo-bg-head);
	border: 1.5px solid var(--bvo-border);
	cursor: pointer;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--bvo-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--bvo-tr), color var(--bvo-tr), border-color var(--bvo-tr);
	user-select: none;
}

.bvo-qty-btn:hover  { background: var(--bvo-accent); color: #fff; border-color: var(--bvo-accent); }
.bvo-qty-btn:active { background: var(--bvo-accent-dk); color: #fff; border-color: var(--bvo-accent-dk); }

/* Input: fixed 52px — fits 3 digits comfortably at 0.95rem */
.bvo-qty-input {
	width: 52px;
	flex-shrink: 0;
	border: 1.5px solid var(--bvo-border);
	border-radius: var(--bvo-radius-sm);
	text-align: center;
	font-family: var(--bvo-font);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bvo-text);
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
	background: #fff;
	padding: 0 2px;
	box-sizing: border-box;
	height: 32px;
	transition: border-color var(--bvo-tr), box-shadow var(--bvo-tr);
}

.bvo-qty-input::-webkit-inner-spin-button,
.bvo-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bvo-qty-input:focus { background: #f6fffe; }

.bvo-unavailable { color: #d1d5db; font-size: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.bvo-footer {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: var(--bvo-bg-footer);
	border-top: 1.5px solid var(--bvo-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	gap: 12px;
	flex-wrap: wrap;
	/* detach from wrapper — sit below the card */
	margin-top: 0;
	border-radius: 0 0 var(--bvo-radius) var(--bvo-radius);
}

/* ── Summary ────────────────────────────────────────────────────────────── */
.bvo-summary {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: 0.82rem;
	color: var(--bvo-muted);
	font-weight: 500;
}

.bvo-item-count {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--bvo-accent);
	line-height: 1;
}

.bvo-summary-unit {
	font-size: 0.78rem;
}

/* ── Add to cart button ─────────────────────────────────────────────────── */
.bvo-add-to-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bvo-accent);
	color: #fff;
	border: none;
	border-radius: var(--bvo-radius-sm);
	padding: 10px 22px;
	font-family: var(--bvo-font);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--bvo-tr), transform 0.1s, box-shadow var(--bvo-tr);
	box-shadow: 0 2px 8px rgba(13,122,107,.26);
	white-space: nowrap;
}

.bvo-add-to-cart-btn:hover {
	background: var(--bvo-accent-dk);
	box-shadow: 0 4px 14px rgba(13,122,107,.36);
	transform: translateY(-1px);
}

.bvo-add-to-cart-btn:active {
	transform: scale(0.98);
	box-shadow: none;
}

.bvo-add-to-cart-btn:disabled,
.bvo-add-to-cart-btn.bvo-loading {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ── Message ────────────────────────────────────────────────────────────── */
.bvo-message {
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: var(--bvo-radius-sm);
	font-size: 0.85rem;
	font-weight: 500;
}

.bvo-message.bvo-success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.bvo-message.bvo-error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.bvo-message a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ── Scroll hint shadow (shows more rows below) ─────────────────────────── */
.bvo-tbody-wrap {
	position: relative;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.bvo-wrap {
		--bvo-row-h: 50px;
	}

	.bvo-variation-img { width: 34px; height: 34px; }

	.bvo-qty-btn   { width: 28px; font-size: 1rem; }
	.bvo-qty-input { width: 44px; font-size: 0.9rem; }
	.bvo-qty-wrap  { height: 32px; }

	.bvo-footer { flex-direction: column; align-items: stretch; }

	.bvo-add-to-cart-btn {
		width: 100%;
		justify-content: center;
	}

	.bvo-summary { justify-content: center; }

	.bvo-thead .bvo-col-qty { min-width: 112px; }
}

/* ── Override theme global input width ──────────────────────────────────── */
.bvo-qty-input {
	width: 52px !important;
}