/**
 * Bootstrap 5 overrides for Roletovo / DC Configurator
 * Load AFTER bootstrap.min.css — maps BS tokens to theme colors
 * and fixes BS3+BS5 modal conflicts (backdrop above dialog).
 */

:root {
	/* Align with roletovo.css + configurators.css */
	--cfg-black: var(--rv-black, #1a1a1a);
	--cfg-black-soft: #3a3a3a;
	--cfg-gold: #c8a84b;
	--cfg-gold-hover: #b8943d;
	--cfg-gray-50: var(--rv-gray-50, #f9fafb);
	--cfg-gray-100: #f3f4f6;
	--cfg-gray-200: #e5e7eb;
	--cfg-gray-500: var(--rv-gray, #6b6b6b);
	--cfg-radius: var(--rv-radius-lg, 12px);
	--cfg-radius-sm: var(--rv-radius, 8px);

	/* Bootstrap 5 CSS variables */
	--bs-primary: var(--cfg-black);
	--bs-primary-rgb: 26, 26, 26;
	--bs-secondary: var(--cfg-gray-500);
	--bs-secondary-rgb: 107, 107, 107;
	--bs-success: var(--cfg-black);
	--bs-success-rgb: 26, 26, 26;
	--bs-warning: var(--cfg-gold);
	--bs-warning-rgb: 200, 168, 75;
	--bs-info: var(--cfg-gray-500);
	--bs-danger: #b42318;
	--bs-dark: var(--cfg-black);
	--bs-body-font-size: 16px;
	--bs-body-color: var(--cfg-black);
	--bs-border-radius: var(--cfg-radius-sm);
	--bs-link-color: var(--cfg-black);
	--bs-link-hover-color: var(--cfg-gold-hover);
}

/* ---------- Buttons (beat default blue/green) ---------- */
.btn {
	font-size: 16px;
	font-weight: 600;
	border-radius: var(--cfg-radius-sm);
	padding: 0.65rem 1.25rem;
}

.btn-lg {
	font-size: 17px;
	padding: 0.85rem 1.6rem;
}

.btn-primary,
.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--cfg-black);
	--bs-btn-border-color: var(--cfg-black);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--cfg-black-soft);
	--bs-btn-hover-border-color: var(--cfg-black-soft);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #000;
	--bs-btn-active-border-color: #000;
	--bs-btn-disabled-bg: var(--cfg-black);
	--bs-btn-disabled-border-color: var(--cfg-black);
	background-color: var(--cfg-black) !important;
	border-color: var(--cfg-black) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
	background-color: var(--cfg-black-soft) !important;
	border-color: var(--cfg-black-soft) !important;
	color: #fff !important;
}

.btn-warning {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--cfg-gold);
	--bs-btn-border-color: var(--cfg-gold);
	--bs-btn-hover-bg: var(--cfg-gold-hover);
	--bs-btn-hover-border-color: var(--cfg-gold-hover);
	background-color: var(--cfg-gold) !important;
	border-color: var(--cfg-gold) !important;
	color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus {
	background-color: var(--cfg-gold-hover) !important;
	border-color: var(--cfg-gold-hover) !important;
	color: #fff !important;
}

.btn-outline-primary {
	--bs-btn-color: var(--cfg-black);
	--bs-btn-border-color: var(--cfg-gray-200);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: var(--cfg-gold);
	--bs-btn-hover-color: var(--cfg-gold-hover);
	background: transparent !important;
	border-color: var(--cfg-gray-200) !important;
	color: var(--cfg-black) !important;
}

.btn.cfg-btn-gold {
	background: var(--cfg-gold) !important;
	border-color: var(--cfg-gold) !important;
	color: #fff !important;
	font-weight: 700;
}

.btn.cfg-btn-gold:hover,
.btn.cfg-btn-gold:focus {
	background: var(--cfg-gold-hover) !important;
	border-color: var(--cfg-gold-hover) !important;
	color: #fff !important;
}

/* ---------- Modals: BS3 CSS + BS5 JS conflict ---------- */
/*
 * BS3: .modal.fade { opacity:0 } until .in
 * BS5: adds .show (not .in) → dialog invisible, backdrop visible
 * Also body.modal-open .modal-backdrop was 1060 while plain .modal is ~1050
 * → dialog under backdrop (can't click Close).
 */
.modal.fade.show {
	opacity: 1;
	display: block;
}

.modal.show .modal-dialog {
	transform: none;
}

.modal {
	z-index: 1080 !important;
}

body.modal-open .modal-backdrop,
.modal-backdrop {
	z-index: 1070 !important;
}

.modal-dialog {
	font-size: 16px;
}

.modal-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: inherit;
}

.modal-body {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cfg-black);
}

.modal-header.bg-success,
.modal-header.bg-primary {
	background: var(--cfg-black) !important;
	border-bottom-color: transparent;
}

.modal-header .btn-close {
	font-size: 1rem;
}

#cart-success-modal .modal-content,
#info-modal .modal-content,
#preview-zoom-modal .modal-content {
	border: none;
	border-radius: var(--cfg-radius);
	box-shadow: var(--rv-shadow-lg, 0 20px 25px -5px rgba(0, 0, 0, 0.15));
}

#cart-success-modal .modal-footer .btn,
#info-modal .modal-footer .btn {
	min-width: 7rem;
}