/* ─── Global Application Styles ──────────────────────────────── */

[data-bs-theme="dark"] {
	--bs-body-bg: var(--coal);
	--bs-body-color: var(--ivory);
	--bs-card-bg: var(--graphite);
	--bs-card-color: var(--ivory);
}

body {
	font-family:
		"Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ivory);
	background-color: var(--coal);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Montserrat", "Poppins", sans-serif;
}

body > .body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > .body > .main {
	flex: 1;
}

/* ─── Header ─────────────────────────────────────────────────── */
.header {
	background: var(--obsidian);
}

.header-body {
	border-color: var(--ash) !important;
	position: relative;
}

.header .nav-link {
	color: var(--sandstone);
	font-weight: 500;
	font-size: 0.95rem;
	transition: color 0.2s;
}

.header .nav-link:hover {
	color: var(--conifer);
}

.header .nav-link.active {
	color: var(--buttercup);
}

/* ─── Page Header ────────────────────────────────────────────── */
.page-header {
	background: #191919 !important;
	border-bottom-color: var(--ash) !important;
}

.page-header-title {
	font-family: "Montserrat", "Poppins", sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--buttercup);
}

.cta-title {
	font-family: "Montserrat", "Poppins", sans-serif;
	font-weight: 700;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-primary {
	background-color: var(--buttercup) !important;
	border-color: var(--buttercup) !important;
	color: var(--obsidian) !important;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--buttercup-hover) !important;
	border-color: var(--buttercup-hover) !important;
	color: var(--obsidian) !important;
}

.btn-outline-primary {
	color: var(--buttercup);
	border-color: var(--buttercup);
}

.btn-outline-primary:hover {
	background-color: var(--buttercup);
	border-color: var(--buttercup);
	color: var(--obsidian) !important;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
	border: 1px solid var(--ash);
	border-radius: 0.5rem;
	background-color: var(--graphite);
}

.card-header {
	background-color: var(--obsidian);
	border-bottom: 1px solid var(--ash);
	font-family: "Montserrat", "Poppins", sans-serif;
	font-weight: 600;
	color: var(--conifer);
}

.card-title {
	font-family: "Montserrat", "Poppins", sans-serif;
}

.card-footer {
	background-color: var(--graphite);
	border-top: 1px solid var(--ash);
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table {
	color: var(--ivory);
	--bs-table-bg: var(--graphite);
	--bs-table-border-color: var(--ash);
}

.table th,
.table td {
	vertical-align: middle;
}

.table th {
	font-weight: 600;
	color: var(--conifer);
	background-color: var(--ash);
	white-space: nowrap;
}

.table-hover > tbody > tr:hover {
	--bs-table-hover-bg: var(--slate);
	color: var(--ivory);
}

.table-striped > tbody > tr:nth-of-type(odd) {
	--bs-table-striped-bg: var(--graphite);
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-control,
.form-select {
	background-color: var(--graphite);
	border-color: var(--ash);
	color: var(--ivory);
}

.form-control:focus,
.form-select:focus {
	background-color: var(--graphite);
	border-color: var(--conifer);
	color: var(--ivory);
	box-shadow: 0 0 0 0.2rem rgba(91, 141, 175, 0.2);
}

.form-control::placeholder {
	color: var(--sandstone);
}

.form-label {
	color: var(--conifer);
}

.form-text {
	color: var(--sandstone);
}

.form-check-input {
	background-color: var(--graphite);
	border-color: var(--ash);
}

.form-check-input:checked {
	background-color: var(--buttercup);
	border-color: var(--buttercup);
}

.input-group-text {
	background-color: var(--obsidian);
	border-color: var(--ash);
	color: var(--sandstone);
}

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
	font-weight: 500;
	font-size: 0.8em;
}

/* ─── Status Badges ──────────────────────────────────────────── */
.status-badge {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.8em;
	font-weight: 500;
	border-radius: 0.375rem;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
	margin-top: auto;
	background-color: var(--obsidian) !important;
}

.footer h5 {
	font-family: "Montserrat", "Poppins", sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	color: var(--buttercup);
}

.footer-copyright {
	background-color: rgba(0, 0, 0, 0.3) !important;
	padding: 0;
}

.copyright-text {
	font-size: 0.65rem !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 300;
	line-height: 1;
}

/* Scroll to Top */
.scroll-to-top-btn {
	position: fixed;
	bottom: 0;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 9px;
	padding: 10px 10px 35px;
	background-color: #404040;
	color: var(--sandstone);
	border-radius: 4px 4px 0 0;
	text-decoration: none !important;
	opacity: 0;
	transition:
		opacity 0.3s,
		background-color 0.2s,
		color 0.2s;
	z-index: 1040;
}

.scroll-to-top-btn.visible {
	opacity: 0.75;
}

.scroll-to-top-btn:hover {
	opacity: 1;
	background-color: var(--buttercup);
	color: var(--obsidian);
}

/* ─── Product Cards ──────────────────────────────────────────── */
.product-card {
	transition:
		transform 0.2s,
		box-shadow 0.2s;
}

.product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.product-card .card-img-top {
	height: 220px;
	object-fit: cover;
	border-bottom: 1px solid var(--ash);
}

/* ─── Product Detail Title ───────────────────────────────────── */
.product-detail-title {
	font-family: "Montserrat", "Poppins", sans-serif;
}

/* ─── Price Display ──────────────────────────────────────────── */
.price {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--buttercup);
}

.price-small {
	font-size: 1rem;
	font-weight: 600;
	color: var(--buttercup);
}

/* ─── Heading Hierarchy ─────────────────────────────────────── */
h1,
.h1 {
	color: var(--buttercup);
}

h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	color: var(--conifer);
}

/* Override: footer h5 stays gold */
.footer h5 {
	color: var(--buttercup);
}

/* ─── Bootstrap Dark Overrides ───────────────────────────────── */

/* Navbar toggler */
.navbar-toggler {
	color: var(--sandstone);
	border-color: var(--ash);
}

/* Dropdowns */
.dropdown-menu {
	background-color: var(--graphite);
	border-color: var(--ash);
}

.dropdown-item {
	color: var(--ivory);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--slate);
	color: #ffffff;
}

.dropdown-divider {
	border-color: var(--ash);
}

/* Modals */
.modal-content {
	background-color: var(--graphite);
	border-color: var(--ash);
	color: var(--ivory);
}

.modal-header {
	border-bottom-color: var(--ash);
}

.modal-footer {
	border-top-color: var(--ash);
}

/* Accordion (FAQ) */
.accordion-item {
	background-color: var(--graphite);
	border-color: var(--ash);
}

.accordion-button {
	background-color: var(--graphite);
	color: var(--ivory);
}

.accordion-button:not(.collapsed) {
	background-color: var(--slate);
	color: var(--conifer);
	box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
		var(--ash);
}

.accordion-button::after {
	filter: invert(1);
}

.accordion-body {
	color: var(--ivory);
}

/* Pagination */
.page-link {
	background-color: var(--graphite);
	border-color: var(--ash);
	color: var(--ivory);
}

.page-link:hover {
	background-color: var(--slate);
	border-color: var(--ash);
	color: #ffffff;
}

.page-item.active .page-link {
	background-color: var(--buttercup);
	border-color: var(--buttercup);
	color: var(--obsidian);
}

.page-item.disabled .page-link {
	background-color: var(--obsidian);
	border-color: var(--ash);
	color: var(--pewter);
}

/* Breadcrumb */
.breadcrumb {
	--bs-breadcrumb-divider-color: var(--sandstone);
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--sandstone);
}

.breadcrumb-item.active {
	color: var(--sandstone);
}

/* List groups */
.list-group-item {
	background-color: var(--graphite);
	border-color: var(--ash);
	color: var(--ivory);
}

.list-group-item.active {
	background-color: var(--buttercup);
	border-color: var(--buttercup);
	color: var(--obsidian);
}

/* Nav tabs / pills */
.nav-tabs {
	border-bottom-color: var(--ash);
}

.nav-tabs .nav-link {
	color: var(--sandstone);
}

.nav-tabs .nav-link:hover {
	border-color: var(--ash);
	color: var(--conifer);
}

.nav-tabs .nav-link.active {
	background-color: var(--graphite);
	border-color: var(--ash) var(--ash) var(--graphite);
	color: var(--conifer);
}

/* Alerts — keep Bootstrap defaults but ensure readability */
.alert a {
	color: inherit;
	font-weight: 600;
}

/* Close button for dark backgrounds */
.btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* Horizontal rules */
hr {
	border-color: var(--ash);
	opacity: 1;
}

/* ─── Container Width ────────────────────────────────────────── */
@media (min-width: 1440px) {
	.container-xl-custom {
		max-width: 1440px;
	}
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.header .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--obsidian);
		border-bottom: 1px solid var(--ash);
		padding: 1rem;
		z-index: 1000;
	}

	.header .navbar-nav {
		flex-direction: column !important;
	}

	.header .nav-link {
		padding: 0.5rem 0 !important;
	}
}