/* Popup mua nhanh — bố cục theo ui/popup-mua-ngay.png */

/*
 * Bien mau --bioseed-primary / --bioseed-secondary duoc khai bao trong
 * assets/css/shop.css — file do nap o moi trang nen luon co san khi file nay
 * chay. Khong khai bao lai o day de doi mau chi phai sua mot cho.
 */

.bioseed-qb-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	/* Modal cao co dinh 80vh nen khong bao gio vuot khung nhin — can giua duoc
	   an toan, khoang tren va duoi bang nhau. Truoc day modal cao theo noi dung
	   nen phai dung flex-start de khong bi cat mat phan dau. */
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .55);
}
.bioseed-qb-overlay[hidden] { display: none; }

.bioseed-qb-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 960px;
	/* Dung 80% chieu cao man hinh. Phan noi dung tu cuon ben trong. */
	height: 80vh;
	padding: 24px 28px;
	overflow: hidden;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);

	/* Flatsome ap text-transform: uppercase len nut va vai phan tu chu.
	   Mau thiet ke dung chu thuong ("Tam tinh:", "Huy bo") nen chan lai o day. */
	text-transform: none;
}
.bioseed-qb-modal button,
.bioseed-qb-modal .bioseed-qb-totals dt,
.bioseed-qb-modal .bioseed-qb-totals dd,
.bioseed-qb-modal label {
	text-transform: none;
}

.bioseed-qb-close {
	position: absolute;
	top: 14px;
	right: 18px;
	z-index: 1;
	padding: 0;
	border: 0;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: #666;
	cursor: pointer;
}
.bioseed-qb-close:hover { color: #111; }

.bioseed-qb-heading {
	flex: 0 0 auto;
	margin: 0 0 6px;
	padding-right: 40px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .4px;
	color: #1a1a1a;
}
.bioseed-qb-heading-rule {
	flex: 0 0 auto;
	display: block;
	width: 100px;
	height: 3px;
	margin-bottom: 18px;
	background: #1e7145;
}

.bioseed-qb-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	/* Vung noi dung la phan cuon duoc. min-height:0 la bat buoc: mac dinh
	   phan tu flex khong co nho hon noi dung nen se tran ra ngoai thay vi cuon. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Cot trai: form */
.bioseed-qb-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
	align-content: start;
	/* min-width:0 chan loi tran ngang: phan tu luoi mac dinh min-width:auto nen
	   khong co lai duoc, day luoi rong hon khung cha va lam popup lech khoi man hinh. */
	min-width: 0;
}
.bioseed-qb-field { min-width: 0; }
.bioseed-qb-field--full { grid-column: 1 / -1; }

.bioseed-qb-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #222;
}
.bioseed-qb-req { color: #e03131; }

.bioseed-qb-field input,
.bioseed-qb-field select,
.bioseed-qb-field textarea {
	width: 100%;
	max-width: 100%;
	height: 38px;
	padding: 0 11px;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	background: #f7f8fa;
	box-shadow: none;
	font-size: 13px;
	color: #222;
}
.bioseed-qb-field textarea {
	height: auto;
	min-height: 92px;
	padding: 9px 11px;
	resize: vertical;
}
.bioseed-qb-field select:disabled { color: #999; cursor: not-allowed; }
.bioseed-qb-field input:focus,
.bioseed-qb-field select:focus,
.bioseed-qb-field textarea:focus {
	border-color: #1e7145;
	background: #fff;
	outline: none;
}

.bioseed-qb-field.is-invalid input,
.bioseed-qb-field.is-invalid select,
.bioseed-qb-field.is-invalid textarea { border-color: #e03131; }

.bioseed-qb-error {
	display: none;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.35;
	color: #e03131;
}
.bioseed-qb-field.is-invalid .bioseed-qb-error { display: block; }

/* Cot phai: tom tat */
.bioseed-qb-summary {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bioseed-qb-product {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 14px;
	margin-bottom: 16px;
}
.bioseed-qb-product img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	object-fit: cover;
}
.bioseed-qb-product-info { min-width: 0; }
.bioseed-qb-product-info h3 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	overflow-wrap: anywhere;
}
.bioseed-qb-product-info p {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #777;
	overflow-wrap: anywhere;
}
.bioseed-qb-unit {
	font-size: 15px !important;
	font-weight: 700;
	color: var(--bioseed-secondary) !important;
}

.bioseed-qb-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #222;
}
.bioseed-qb-minus,
.bioseed-qb-plus {
	/* Nut tron bi bop meo boi HAI nguyen nhan, phai chan ca hai:
	   - flex:0 0 auto — thieu no thi flex co nut lai theo chieu ngang;
	   - min-width/min-height — Flatsome dat min-height:40px cho moi the <button>,
	     ma min-height luon thang height nen nut cao 40 trong khi rong 32. */
	flex: 0 0 auto;
	width: 26px;
	min-width: 26px;
	height: 26px;
	min-height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #1e7145;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}
/* Day ca cum nut+o vao sat le phai, nhan "So luong:" giu nguyen ben trai —
   margin-left:auto tren phan tu dau tien cua nhom con lai (nut tru) chiem het
   khoang trong con thua tren hang flex, khong can boc them the nao trong HTML.
   margin:0 o tren la bat buoc: nut la <button> nen khop luon quy tac chung
   ".button, button, ...{margin-right:1em}" cua Flatsome, khong reset thi
   khoang cach minus↔input va input↔plus lech nhau (22px vs 8px). */
.bioseed-qb-minus { margin-left: auto; }
.bioseed-qb-minus:hover,
.bioseed-qb-plus:hover { background: #155734; }
#bioseed-qb-qty {
	flex: 0 0 auto;
	width: 48px;
	height: 26px;
	/*
	 * margin:0 la bat buoc de o nhap ngang hang voi hai nut. Flatsome dat
	 * margin-bottom:1em cho moi <input>; hang flex can giua theo HOP LE (da tinh
	 * ca margin) nen o nhap cao 26px + 13px margin duoi = hop le 39px duoc can
	 * giua, keo phan nhin thay cua no len cao hon hai nut dung 6,5px. Do that:
	 * nut o top 314,2 con o nhap o top 307,7 du ca ba deu cao 26px.
	 */
	margin: 0;
	padding: 0;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	background: #f7f8fa;
	box-shadow: none;
	text-align: center;
	font-size: 13px;
}

.bioseed-qb-totals { margin: 0 0 10px; }
.bioseed-qb-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 14px;
}
.bioseed-qb-totals dt { color: #555; font-weight: 400; }
.bioseed-qb-totals dd { margin: 0; font-weight: 700; color: #1a1a1a; white-space: nowrap; }

.bioseed-qb-note {
	margin: 0 0 14px;
	padding: 10px 12px;
	background: #fdf4e3;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: #c8842a;
}

.bioseed-qb-grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid #eee;
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
}
.bioseed-qb-grand strong { color: var(--bioseed-secondary); white-space: nowrap; }

.bioseed-qb-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: auto;
}
.bioseed-qb-actions button {
	height: 44px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.bioseed-qb-cancel {
	border: 1px solid #1e7145;
	background: #fff;
	color: #1a1a1a;
}
.bioseed-qb-cancel:hover { background: #f3f8f5; }
#bioseed-qb-submit {
	border: 0;
	background: #1e7145;
	color: #fff;
}
#bioseed-qb-submit:hover { background: #155734; }
#bioseed-qb-submit[disabled] { opacity: .6; cursor: wait; }

/* Toast */
.bioseed-qb-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 100001;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: calc(100vw - 32px);
	transform: translateX(-50%);
	padding: 12px 22px;
	border-radius: 6px;
	background: #1e7145;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
.bioseed-qb-toast[hidden] { display: none; }
.bioseed-qb-toast i { flex: 0 0 auto; font-size: 16px; }
.bioseed-qb-toast--error { background: #c92a2a; }

@media (max-width: 849px) {
	.bioseed-qb-overlay { padding: 12px; }
	.bioseed-qb-modal {
		height: 80vh;
		padding: 20px 16px;
	}
	.bioseed-qb-body { grid-template-columns: 1fr; gap: 20px; }
	.bioseed-qb-heading { font-size: 18px; }
	.bioseed-qb-product { grid-template-columns: 84px 1fr; gap: 12px; }
	.bioseed-qb-field textarea { min-height: 76px; }
	.bioseed-qb-actions { margin-top: 4px; }
}

@media (max-width: 549px) {
	.bioseed-qb-form { grid-template-columns: 1fr; }
	.bioseed-qb-actions { grid-template-columns: 1fr; gap: 10px; }
}