* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-color: #f7f6f4;
	color: #333;
	line-height: 1.5;
	padding-top: 220px;
	margin-top: 220px;
}

/* Naslov info sekcije */
.kalkulator-info {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 30px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	text-align: center;
	animation: fadeIn 1.5s ease;
	margin-bottom: 40px;
	margin-top: 220px;
}

.kalkulator-info h1 {
	color: #4b2e1d;
	font-size: 36px;
	margin-bottom: 15px;
}

.kalkulator-info p {
	color: #666;
	font-size: 16px;
	line-height: 1.7;
}

/* Kalkulator forma glavna sekcija */
.calculator-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 30px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	animation: slideDown 1.5s ease;
}

/* Naslov */
h1 {
	text-align: center;
	color: #4b2e1d;
	font-size: 36px;
	margin-bottom: 30px;
}

/* Podsekcije u formi */
.form-section {
	margin-bottom: 30px;
}

.form-section h2 {
	font-size: 20px;
	color: #4b2e1d;
	margin-bottom: 10px;
	border-left: 4px solid #a0794c;
	padding-left: 15px;
}

/* Label i inputi */
label {
	display: inline-block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 16px;
	color: #555;
}

select,
input[type="text"],
input[type="number"],
input[type="email"] {
	width: 100%;
	padding: 12px 15px;
	margin-top: 8px;
	border: 1px solid #ccc;
	border-radius: 12px;
	font-size: 16px;
	background-color: #fafafa;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: border-color 0.3s ease;
}

select:focus,
input:focus {
	border-color: #4b2e1d;
}

/* Ukupno cena */
.ukupno-polje {
	background: #f4f1ee;
	border: 2px dashed #a0794c;
	padding: 16px;
	font-size: 20px;
	text-align: center;
	border-radius: 12px;
	color: #4b2e1d;
	font-weight: bold;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Dugme za slanje */
button {
	display: inline-block;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(45deg, #4b2e1d, #a0794c);
	color: white;
	border: none;
	border-radius: 30px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s ease;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	margin-top: 20px;
}

button:hover {
	background: linear-gradient(45deg, #7a5130, #d9b480);
	transform: scale(1.03);
}

/* Animacije */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Telefoni vrlo mali (do 375px) */
@media (max-width: 375px) {
	.kalkulator-info,
	.calculator-container {
		margin: 100px auto 80px auto;
		padding: 12px;
		width: 92%;
	}
	.kalkulator-info h1,
	.calculator-container h1 {
		font-size: 1.2rem;
	}
	.kalkulator-info p {
		font-size: 0.9rem;
	}
	.form-section h2 {
		font-size: 0.9rem;
		padding-left: 8px;
	}
	label {
		display: block;
		margin-bottom: 6px;
		font-size: 0.85rem;
	}
	select,
	input[type="text"],
	input[type="number"],
	input[type="email"] {
		font-size: 0.85rem;
		padding: 7px;
	}
	.ukupno-polje {
		font-size: 0.95rem;
		padding: 8px;
	}
	button {
		font-size: 0.9rem;
		padding: 8px;
	}
}

/* Telefoni standardni (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) {
	.kalkulator-info,
	.calculator-container {
		margin: 110px auto 90px auto;
		padding: 14px;
		width: 92%;
	}
	.kalkulator-info h1,
	.calculator-container h1 {
		font-size: 1.3rem;
	}
	.kalkulator-info p {
		font-size: 0.92rem;
	}
	.form-section h2 {
		font-size: 0.92rem;
		padding-left: 8px;
	}
	label {
		display: block;
		margin-bottom: 7px;
		font-size: 0.9rem;
	}
	select,
	input[type="text"],
	input[type="number"],
	input[type="email"] {
		font-size: 0.9rem;
		padding: 8px;
	}
	.ukupno-polje {
		font-size: 1rem;
		padding: 9px;
	}
	button {
		font-size: 0.95rem;
		padding: 9px;
	}
}

/* Telefoni veći (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
	.kalkulator-info,
	.calculator-container {
		margin: 120px auto 100px auto;
		padding: 15px;
		width: 90%;
	}
	.kalkulator-info h1,
	.calculator-container h1 {
		font-size: 1.4rem;
	}
	.kalkulator-info p {
		font-size: 0.95rem;
	}
	.form-section h2 {
		font-size: 0.95rem;
		padding-left: 8px;
	}
	label {
		display: block;
		margin-bottom: 8px;
		font-size: 0.95rem;
	}
	select,
	input[type="text"],
	input[type="number"],
	input[type="email"] {
		font-size: 0.9rem;
		padding: 8px;
	}
	.ukupno-polje {
		font-size: 1rem;
		padding: 10px;
	}
	button {
		font-size: 1rem;
		padding: 10px;
	}
}

/* Tableti (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.kalkulator-info,
	.calculator-container {
		margin: 130px auto 110px auto;
		padding: 20px;
		width: 85%;
	}
	.kalkulator-info h1,
	.calculator-container h1 {
		font-size: 1.5rem;
	}
	.kalkulator-info p {
		font-size: 1rem;
	}
	.form-section h2 {
		font-size: 1rem;
		padding-left: 10px;
	}
	label {
		display: inline-block;
		margin-right: 15px;
		font-size: 0.95rem;
	}
	select,
	input[type="text"],
	input[type="number"],
	input[type="email"] {
		font-size: 1rem;
		padding: 8px;
	}
	.ukupno-polje {
		font-size: 1.05rem;
		padding: 10px;
	}
	button {
		font-size: 1.05rem;
		padding: 10px;
	}
}

/* Desktop (1025px i više) */
@media (min-width: 1025px) {
	.kalkulator-info,
	.calculator-container {
		margin-left: 418px;
		width: 700px;
	}
}
