/**
 * Bootstrap 5 overrides for DC Configurator
 * Theme already loads Bootstrap CSS in header.twig BEFORE motif styles.
 * This file only remaps BS tokens for the configurator and fixes modals.
 *
 * Button / token styles are scoped to #configurator (+ configurator modals)
 * so they do not leak into the theme slide cart (#header-cart).
 */

#configurator,
#cart-success-modal,
#info-modal,
#preview-zoom-modal {
	--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);

	--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 (only inside configurator) ---------- */
#configurator .btn {
	font-size: 16px;
	font-weight: 600;
	border-radius: var(--cfg-radius-sm);
	padding: 0.65rem 1.25rem;
}

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

#configurator .btn-primary,
#configurator .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;
}

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

#configurator .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;
}

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

#configurator .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;
}

#configurator .btn.cfg-btn-gold,
#cart-success-modal .btn.cfg-btn-gold,
#info-modal .btn.cfg-btn-gold {
	background: var(--cfg-gold, #c8a84b) !important;
	border-color: var(--cfg-gold, #c8a84b) !important;
	color: #fff !important;
	font-weight: 700;
}

#configurator .btn.cfg-btn-gold:hover,
#configurator .btn.cfg-btn-gold:focus,
#cart-success-modal .btn.cfg-btn-gold:hover,
#cart-success-modal .btn.cfg-btn-gold:focus,
#info-modal .btn.cfg-btn-gold:hover,
#info-modal .btn.cfg-btn-gold:focus {
	background: var(--cfg-gold-hover, #b8943d) !important;
	border-color: var(--cfg-gold-hover, #b8943d) !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 rules do not target #header-cart.
 */
.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, #1a1a1a);
}

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

#cart-success-modal .modal-header .btn-close,
#info-modal .modal-header .btn-close,
#preview-zoom-modal .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, 12px);
	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;
}

/*
 * Theme Bootstrap 5 .btn-close uses SVG background — keep FA icon in slide cart.
 */
#header-cart .btn-close {
	background-image: none !important;
	background-color: transparent !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	opacity: 1 !important;
	box-shadow: none !important;
	border: 0 !important;
	font-size: inherit;
}