/* ========================================
:root Variables (پالت رنگی اصلی)
======================================== */
:root {
	/* پس‌زمینه */
	--color-bg-main: #f5e8d3; /* پس‌زمینه اصلی */
	--color-bg-card: #e6d5b8; /* پس‌زمینه کارت‌ها / باکس‌ها */
	--color-bg-card-hover: #f0e0c0; /*  پس زمینه دکمه هنگام هاور  کارت‌ها / باکس‌ها */
	--color-bg-button: #d4b998; /* پس‌زمینه دکمه‌ها */

	/* متن */
	--color-text-main: #3e2c1c; /* متن اصلی */
	--color-text-secondary: #fff4e1; /* متن ثانویه / placeholder */

	/* لینک‌ها و جزئیات */
	--color-accent: #75492f; /* لینک‌ها و برجسته‌سازی */

	/* خطوط و سایه */
	--color-border: #c1a882; /* خطوط جداکننده و سایه کارت‌ها */
}
/* ========================================
Font Faces
======================================== */
@font-face {
	font-family: "laleh";
	src: url("../fonts/lalehzar/Lalezar-Regular.ttf") format("truetype");
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "shabnam";
	src: url("../fonts/shabnam/ttf/Shabnam-Bold.ttf") format("truetype"),
		url("../fonts/shabnam/woff2/Shabnam-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "vazir";
	src: url("../fonts/vazir/ttf/Vazirmatn-Regular.ttf") format("truetype"),
		url("../fonts/vazir/woff2/Vazirmatn-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/* ========================================
Body & Global Styles
======================================== */
body {
	font-family: "vazir", sans-serif;
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
}
/* Remove focus outline on buttons for cleaner UI */
button:focus,
button:active,
button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
/* ========================================
Buttons
======================================== */
.btn {
	background-color: var(--color-bg-button);
	box-shadow: 0 2px 4px var(--color-border);
}
.btn:hover {
	background-color: var(--color-accent);
	color: var(--color-text-secondary);
}
/* ========================================
Gallery & Product Cursor
======================================== */
.gallery-wrapper-img,
.product {
	cursor: pointer;
}
/* ========================================
Header
======================================== */
.header-custom {
	background-color: var(--color-bg-card);
	box-shadow: 0 4px 12px var(--color-border);
}

.brand-custom,
.nav-title {
	font-family: "laleh";
}

.navbar-menu,
.dropdown-item-header,
.btn,
.section__title,
.hero-title,
.nav-tabs-custom,
.product-title {
	font-family: "shabnam";
}
.dropdown-menu-header {
	background-color: var(--color-bg-main);
}
.nav-link-header:active,
.dropdown-item-header:active,
.dropdown-item-header.active {
	background-color: var(--color-accent) !important;
	color: var(--color-text-secondary) !important;
}
.nav-link-header,
.dropdown-item-header {
	color: var(--color-text-main);
}

.navbar-custom .nav-link-header.active {
	color: var(--color-accent);
}

/* ========================================
Modal Section
======================================== */
.modal-content {
	background-color: var(--color-bg-card);
	color: var(--color-text-main);
	border: 2px solid var(--color-border);
}
.modal .btn-close {
	filter: invert(25%) sepia(10%) saturate(500%) hue-rotate(10deg);
}
.modal-text {
	font-family: "shabnam";
}
.modal-footer {
	border-top-color: var(--color-border);
}
/* ========================================
Hero Section
======================================== */

.hero {
	position: relative;
	min-height: 87vh;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(62, 44, 28, 0.3);
	z-index: 2;
}
.hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 3;
	color: #fff;
	padding-top: 40px;
}
/* ========================================
Products Section
======================================== */
.nav-tabs-custom {
	border-bottom: none;
}
.nav-tabs .nav-link {
	border: none;
	color: var(--color-text-main);
}
.nav-tabs .nav-link.active {
	border-bottom: 3px solid var(--color-accent);
}

.product {
	background-color: var(--color-bg-card);
	box-shadow: 0 4px 12px var(--color-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease,
		background-color 0.3s ease;
}
.product:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	background-color: var(--color-bg-card-hover);
}
.product-image {
	object-fit: cover;
	height: 18rem;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.product-title {
	color: var(--color-text-main);
}
.product-text {
	color: var(--color-border);
	min-height: 50px;
	overflow: hidden;
}
.product-price {
	color: var(--color-accent);
}

/* ========================================
Gallery Section
======================================== */

.gallery-wrapper-img {
	overflow: hidden;
	border-radius: 0.5rem;
}
.gallery-img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.gallery-wrapper-img:hover .gallery-img {
	transform: scale(1.03);
}

/* ========================================
Footer
======================================== */
.footer {
	background-color: var(--color-bg-card);
	box-shadow: 0 -4px 20px var(--color-border);
}
.footer a {
	text-decoration: none;
}
.brand-footer,
.footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-title,
.footer-phone,
.footer-social {
	color: var(--color-text-main);
}
.footer-title {
	margin-bottom: 1rem;
}
.footer-menu__link {
	color: var(--color-accent);
	transition: color 0.3s ease;
}
.footer-menu__link:hover {
	color: var(--color-text-main);
}
.footer-social {
	text-align: center;
	font-weight: 500;
}
/* ========================================
Media Queries
======================================== */
@media (min-width: 992px) {
	.nav-link-header:hover {
		color: var(--color-accent);
	}
	.dropdown-menu-header {
		background-color: var(--color-bg-card);
	}
	.nav-link-header:active,
	.dropdown-item-header:active {
		background-color: transparent;
		color: inherit;
	}
	.hero-content {
		padding-top: 50px;
	}
	.brand-footer,
	.footer-social {
		justify-content: start;
	}
}
@media (min-width: 768px) {
	.about-us__img {
		border-bottom-right-radius: 0 !important;
		border-top-right-radius: 0 !important;
		border-bottom-left-radius: 0.5rem !important;
	}
}