.bb-order-panel {
	--bb-primary: #B23A48;
	--bb-primary-dark: #8f2e3a;
	--bb-bg: #fbf6f1;
	--bb-border: #f0e6df;
	--bb-text: #3a2a28;
	--bb-muted: #9c8b86;
	font-family: "Mikhak", Tahoma, sans-serif;
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: 20px;
	padding: 20px;
	box-sizing: border-box;
	max-width: 340px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.bb-order-panel * { box-sizing: border-box; }

/* ریست مستقیم و قطعی هر دکمه؛ چون قالب سایت روی button/svg استایل
   عمومی تحمیل می‌کند، از !important استفاده می‌کنیم تا مطمئن باشیم
   همیشه استایل خودمان برنده می‌شود، فارغ از ترتیب بارگذاری فایل‌ها. */
.bb-order-panel svg {
	display: block !important;
	flex-shrink: 0 !important;
}

.bb-order-panel h3 {
	display: flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 700; color: var(--bb-text);
	margin: 0 0 16px; flex-shrink: 0;
}
.bb-order-panel h3 svg { width: 18px !important; height: 18px !important; color: var(--bb-text) !important; }

.bb-order-section-label {
	font-size: 12px; color: var(--bb-muted); font-weight: 700;
	margin: 0 0 8px; flex-shrink: 0;
}

.bb-order-vase-box {
	background: var(--bb-bg);
	border: 1px solid var(--bb-border);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 16px;
	flex-shrink: 0;
}
.bb-order-vase-empty { font-size: 12px; color: #b3a6a1; margin: 0; text-align: center; padding: 6px 0; }

/* این بخش اسکرول می‌شود؛ بقیه‌ی پنل (عنوان، جمع کل، دکمه) ثابت می‌ماند */
.bb-order-items { flex: 1 1 auto; overflow-y: auto; margin-bottom: 8px; padding-left: 4px; }
.bb-order-items::-webkit-scrollbar { width: 6px; }
.bb-order-items::-webkit-scrollbar-thumb { background: var(--bb-border); border-radius: 999px; }
.bb-order-empty { font-size: 12px; color: #b3a6a1; text-align: center; padding: 24px 0; margin: 0; }

.bb-order-item {
	display: flex; align-items: center; justify-content: flex-start; gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bb-border);
}
.bb-order-item:last-child { border-bottom: none; }

.bb-order-item-text { display: flex; flex-direction: column; gap: 4px; }
.bb-order-item-name { font-size: 13px; font-weight: 700; color: var(--bb-text); margin: 0; }
.bb-order-item-price { font-size: 11px; color: var(--bb-muted); margin: 0; }

.bb-order-item-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }

.bb-order-item-controls {
	display: flex; align-items: center; gap: 10px;
	background: var(--bb-bg);
	border-radius: 8px;
	padding: 4px 6px;
	width: fit-content;
}
.bb-order-qty-btn {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 18px !important; height: 18px !important;
	font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important;
	color: var(--bb-text) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-family: inherit;
}
.bb-order-qty-btn:hover { color: var(--bb-primary) !important; }
.bb-order-qty-value { font-size: 13px; font-weight: 700; width: 14px; text-align: center; display: inline-block; color: var(--bb-text); }

.bb-order-remove {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 20px !important; height: 20px !important;
	color: var(--bb-primary) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 16px !important; line-height: 1 !important; flex-shrink: 0;
	cursor: pointer;
	font-family: inherit;
}
.bb-order-remove:hover { color: var(--bb-primary-dark) !important; }

.bb-order-footer { border-top: 1px solid var(--bb-border); padding-top: 16px; flex-shrink: 0; }
.bb-order-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.bb-order-total-label { font-size: 13px; color: var(--bb-muted); }
.bb-order-total-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bb-order-currency { font-size: 11px; color: var(--bb-muted); }
.bb-order-total-value { font-size: 22px; font-weight: 800; color: var(--bb-primary); }

.bb-order-checkout-btn {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	background: var(--bb-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 13px !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-family: inherit;
}
.bb-order-checkout-btn span { color: #fff !important; }
.bb-order-checkout-btn svg { width: 18px !important; height: 18px !important; color: #fff !important; stroke: #fff !important; }
.bb-order-checkout-btn:hover { background: var(--bb-primary-dark) !important; }
.bb-order-checkout-btn:disabled { opacity: .6; cursor: not-allowed; }

.bb-order-message { font-size: 12px; text-align: center; margin-top: 8px; margin-bottom: 0; color: var(--bb-muted); }
.bb-order-message.success { color: #2e7d32; }
.bb-order-message.error { color: var(--bb-primary); }

/* دکمه‌ی + داخل کارت محصول (JetEngine/Elementor Loop) — همیشه قرمز، بدون تغییر رنگ در هاور */
.bb-add-to-order-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	background: #B23A48 !important;
	color: #fff !important;
	border: 1px solid #B23A48 !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-family: "Mikhak", Tahoma, sans-serif;
}
.bb-add-to-order-btn:hover { background: #B23A48 !important; color: #fff !important; }
.bb-add-to-order-btn.bb-pulse { transform: scale(0.85); }

/* پیش‌نمایش زنده‌ی دسته گل */
.bb-live-preview {
	font-family: "Mikhak", Tahoma, sans-serif;
	max-width: 340px;
}
.bb-preview-canvas {
	position: relative;
	width: 100%;
	height: 320px;
	background: #fbf6f1;
	border: 1px solid #f0e6df;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 16px;
}
.bb-preview-empty {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	color: #b3a6a1;
	text-align: center;
	width: 80%;
	margin: 0;
}
.bb-preview-vase-img {
	max-height: 42%;
	max-width: 55%;
	object-fit: contain;
	position: relative;
	z-index: 1;
}
.bb-preview-flowers { position: absolute; inset: 0; }
.bb-preview-sticker {
	position: absolute;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.bb-preview-clear-btn {
	all: unset;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin-top: 12px !important;
	background: #fff !important;
	color: #B23A48 !important;
	border: 1px solid #B23A48 !important;
	border-radius: 12px !important;
	padding: 10px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer;
	font-family: inherit;
}
.bb-preview-clear-btn:hover { background: #fdf0f1 !important; }

/* انتخاب شعبه */
.bb-branch-selector {
	display: inline-flex;
	gap: 8px;
	background: #fbf6f1;
	border: 1px solid #f0e6df;
	border-radius: 999px;
	padding: 4px;
	font-family: "Mikhak", Tahoma, sans-serif;
}
.bb-branch-btn {
	all: unset;
	box-sizing: border-box;
	padding: 8px 22px !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #6b5b57 !important;
	cursor: pointer;
	font-family: inherit;
	transition: background-color .15s ease, color .15s ease;
}
.bb-branch-btn.active {
	background: #B23A48 !important;
	color: #fff !important;
}

/* پاپ‌آپ اجباری انتخاب شعبه */
.bb-branch-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(58, 42, 40, 0.55);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: "Mikhak", Tahoma, sans-serif;
}
.bb-branch-popup-box {
	background: #fff;
	border-radius: 24px;
	padding: 36px 28px;
	max-width: 360px;
	width: 100%;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.bb-branch-popup-icon { font-size: 32px; margin: 0 0 12px; }
.bb-branch-popup-box h3 { font-size: 18px; font-weight: 800; color: #3a2a28; margin: 0 0 8px; }
.bb-branch-popup-desc { font-size: 13px; color: #9c8b86; margin: 0 0 24px; line-height: 1.8; }
.bb-branch-popup-buttons { display: flex; gap: 12px; }
.bb-branch-popup-btn {
	all: unset;
	box-sizing: border-box;
	flex: 1;
	text-align: center;
	padding: 14px 0 !important;
	border-radius: 14px !important;
	background: #fbf6f1 !important;
	color: #3a2a28 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border: 1px solid #f0e6df !important;
	cursor: pointer;
	font-family: inherit;
	transition: background-color .15s ease, color .15s ease;
}
.bb-branch-popup-btn:hover {
	background: #B23A48 !important;
	color: #fff !important;
	border-color: #B23A48 !important;
}