:root {
	--bg-light: #f9f1e3;
	--text-dark: #3b2b23;
	--brown-primary: #8b4b2b;
	--brown-secondary: #f0cfb4;
	--accent: #e07a48;
	--success-green: #22c55e;
}

html {
	scroll-behavior: smooth;
}

section[id] {
	scroll-margin-top: 80px;
}

body.menu-open {
	overflow: hidden;
}

/* Hamburger menu */

.bar {
	width: 24px;
	height: 2px;
	background-color: var(--brown-primary);
	margin: 4px 0;
	transition: all 0.3s ease-in-out;
	border-radius: 2px;
}

#menu-toggle.open .top {
	transform: rotate(45deg) translateY(6px) translateX(8px);
}

#menu-toggle.open .middle {
	transform: translateX(16px);
	opacity: 0;
}

#menu-toggle.open .bottom {
	transform: rotate(-45deg) translateY(-6px) translateX(8px);
}

/* Reviews Slider */
.reviews-slider-container {
	width: 100%;
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
}

.reviews-slider {
	display: flex;
	animation: slide 40s linear infinite;
	will-change: transform;

	@media (max-width: 768px) {
		animation: slide 80s linear infinite;
	}
}

.reviews-slider.paused {
	animation-play-state: paused;
}

.review-item {
	position: relative;
	width: 300px;
	height: 400px;
	flex-shrink: 0;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	background: white;
}

.review-item:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.review-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.review-item:hover img {
	transform: scale(1.08);
}

.review-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.4),
		rgba(0, 0, 0, 0.8)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.125rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 12px;
	pointer-events: none;
	backdrop-filter: blur(2px);
}

.review-overlay::before {
	content: '👁️';
	margin-right: 8px;
	font-size: 1.25rem;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.review-item:hover .review-overlay {
	opacity: 1;
	transform: translateY(0);
}

.review-item:hover .review-overlay::before {
	opacity: 1;
	transform: scale(1);
}

@keyframes slide {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-300px * 15)); /* -4500px */
	}
}

/* Lightbox */
.lightbox {
	cursor: pointer;
}

.lightbox img {
	cursor: default;
}

.lightbox.hidden {
	display: none;
}

.lightbox-close {
	cursor: pointer;
	transition: color 0.3s ease;
}

@media (max-width: 768px) {
	.review-item {
		width: 250px;
		height: 350px;
	}

	.review-overlay {
		font-size: 1rem;
	}
}

/* Contact Form Styles */
#contact-form input,
#contact-form select {
	transition: all 0.3s ease;
}

#contact-form input:focus,
#contact-form select:focus {
	box-shadow: 0 0 0 3px rgba(139, 75, 43, 0.1);
}

#contact-form button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#dodatni-nozevi {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}