/* ========================================
   REALESTATE FORM STYLES
   Modern CSS for Data Investment Realestate Form
   ======================================== */

/* ========================================
   1. FONTS & GLOBAL STYLES
   ======================================== */

/* Import Montserrat Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

body {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #ffffff url(https://www.datainvestment.rs/wp-content/uploads/2014/06/bodybg.jpg) top left repeat scroll;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color: #2c3e50;
}

h1 { font-size: 28px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

h1.page-title { color: #888; }
h3.service-title { color: #ffffff; }

p {
	text-align: justify;
	font-family: 'Montserrat', sans-serif;
}

label {
	font-family: 'Montserrat', sans-serif;
	display: block;
	margin-top: 10px;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
	transition: color 0.3s ease;
	line-height: 1.2;
}

/* ========================================
   2. LAYOUT & CONTAINERS
   ======================================== */

.main-wrapper-inner {
	padding: 20px 0;
}

.main-content {
	width: 100%;
}

.container {
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
	max-width: 1200px;
}

.container:before,
.container:after {
	display: table;
	content: " ";
}

.container:after {
	clear: both;
}

.row {
	margin-right: -15px;
	margin-left: -15px;
	display: flex;
	flex-wrap: wrap;
	/* gap: 15px; */
}

.row:before,
.row:after {
	display: table;
	content: " ";
}

.row:after {
	clear: both;
}

/* Page Title Styling */
.main-wrapper-inner h1,
.main-wrapper-inner h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 3px solid #AA1519;
	position: relative;
}

.main-wrapper-inner h1::after,
.main-wrapper-inner h2::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 80px;
	height: 3px;
	background: linear-gradient(135deg, #AA1519 0%, #8a1115 100%);
}

/* Modern Form Wrapper */
.wrap-primary {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	padding: 40px 40px 40px 50px !important;
	margin-bottom: 30px;
	border-left: 96px solid #AA1519;
	position: relative;
	overflow: visible;
}

.wrap-primary::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(170, 21, 25, 0.03) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(50%, -50%);
	pointer-events: none;
}

/* ========================================
   3. FORM ELEMENTS
   ======================================== */

button,
input,
select,
textarea {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 100%;
}

.form-group {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 24px;
	font-size: 14px;
}

.form-group-new {
	margin-left: 0;
	margin-top: 0;
}

.nepokretnosti-group {
	margin-bottom: 20px;
}

.nepokretnosti-input {
	min-width: 160px;
}

/* Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
select {
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-family: 'Montserrat', sans-serif;
	transition: all 0.3s ease;
	background: #ffffff !important;
	min-height: 44px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
	border-color: #AA1519 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(170, 21, 25, 0.1) !important;
}

/* Select Styles */
select {
	font-family: 'Montserrat', sans-serif;
	min-height: 44px;
	font-size: 14px;
	padding: 10px 14px;
	background-color: #FFF !important;
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px;
	margin-bottom: 0;
	transition: all 0.3s ease;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AA1519' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 18px !important;
	padding-right: 40px;
	width: 100%;
	box-sizing: border-box;
}

select:focus {
	border-color: #AA1519 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(170, 21, 25, 0.1) !important;
}

/* Textarea Styles */
textarea {
	width: 100%;
	min-height: 200px;
	resize: vertical;
	overflow: auto;
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px;
	padding: 12px;
	font-family: 'Montserrat', sans-serif;
	transition: all 0.3s ease;
	background: #ffffff !important;
	box-sizing: border-box;
}

textarea:focus {
	border-color: #AA1519 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(170, 21, 25, 0.1) !important;
}

textarea.comm {
	min-height: 200px;
	width: 100%;
	max-width: 100%;
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
	color: #999;
	font-style: italic;
	opacity: 1;
}

input:focus::placeholder,
textarea:focus::placeholder {
	color: #bbb;
}

/* File Input Styling */
input[type="file"] {
	border: 2px dashed #e0e0e0;
	border-radius: 8px;
	padding: 20px 14px;
	width: 100%;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #f8f9fa;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: #555;
}

input[type="file"]:hover {
	border-color: #AA1519;
	background: #fff;
}

input[type="file"]:focus {
	outline: none;
	border-color: #AA1519;
	box-shadow: 0 0 0 3px rgba(170, 21, 25, 0.1);
}

/* ========================================
   4. BUTTONS
   ======================================== */

.nepokretnosti-buttons {
	margin-top: 0;
	display: flex;
	gap: 12px;
	align-items: center;
}

/* Modern Button Styles */
.btn-default,
a.btn-default {
	font-family: 'Montserrat', sans-serif;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #AA1519 0%, #8a1115 100%);
	color: #ffffff;
	box-shadow: 0 4px 15px rgba(170, 21, 25, 0.3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: #AA1519;
}

.btn-default:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(170, 21, 25, 0.4);
	background: linear-gradient(135deg, #8a1115 0%, #AA1519 100%);
}

.btn-default:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(170, 21, 25, 0.3);
}

.btn-default[disabled] {
	background: linear-gradient(135deg, #cccccc 0%, #999999 100%) !important;
	cursor: not-allowed !important;
	opacity: 0.6;
	box-shadow: none !important;
	transform: none !important;
}

input[type="reset"].btn-default {
	background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
	box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

input[type="reset"].btn-default:hover {
	background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%);
	box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

/* Loading State */
.btn-default.loading {
	position: relative;
	pointer-events: none;
}

.btn-default.loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	right: 12px;
	margin-top: -8px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

/* ========================================
   5. VALIDATION & MESSAGES
   ======================================== */

/* Required Field Indicator */
.required label:after {
	content: " *";
	color: #AA1519;
	font-weight: 700;
	margin-left: 4px;
}

/* Validation States - disabled by default, can be enabled via JS */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
	border-color: #dc3545 !important;
}

input.is-valid,
select.is-valid,
textarea.is-valid {
	border-color: #28a745 !important;
}

/* Success/Error Messages */
p[style*="color:red"] {
	background: linear-gradient(135deg, #AA1519 0%, #8a1115 100%);
	color: white !important;
	padding: 18px 24px;
	border-radius: 10px;
	font-weight: 600;
	box-shadow: 0 4px 20px rgba(170, 21, 25, 0.35);
	margin: 24px 0;
	text-align: center;
	font-size: 15px;
	letter-spacing: 0.3px;
	animation: slideInDown 0.4s ease-out;
}

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

/* ========================================
   6. MAP & SPECIAL COMPONENTS
   ======================================== */

map {
	width: 500px;
	height: 200px;
	display: block;
}

#map {
	width: 300px;
	height: 200px;
	position: relative;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	margin: 20px auto;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ========================================
   7. WORDPRESS & PLUGIN OVERRIDES
   ======================================== */

/* Override WordPress Contact Form 7 styles */
.wpcf7-form-control {
	width: 100% !important;
	max-width: 100% !important;
}

.wpcf7-text {
	border: 2px solid #e0e0e0 !important;
	background: #ffffff !important;
}

/* WordPress Emoji */
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}

/* ========================================
   8. HELPER CLASSES & UTILITIES
   ======================================== */

/* Input Width Classes */
.input-standard,
.input-medium,
.input-large {
	width: 100%;
	max-width: 100%;
}

/* Pull Right Override */
.pull-right {
	float: none;
}

/* Hover Effects */
.form-group:hover label {
	color: #AA1519;
}

/* Focus Within */
.form-group:focus-within label {
	color: #AA1519;
	font-weight: 700;
}

/* Smooth Animations - samo za form elemente */
input, select, textarea, button, .btn-default {
	transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

/* ========================================
   9. THEME SPECIFIC STYLES
   ======================================== */

#megaMenu #menuMobile .no-megamenu ul,
#megaMenu #megaST .no-megamenu ul,
.header-wrapper,
.main-nav-outer-wrapper .slideMenu .menu ul,
#primary-nav-mobile-id > li > ul.sub-menu,
#megaMenu #megaST li.menu-item-depth-0 .nav-dd,
body .st-cart-icon .cart-content .widget_shopping_cart_content,
#megaMenu #menuMobile .nav-dd {
	background: #f7f7f7;
}

.panel-default .panel-heading .acc-title a.collapsed,
.panel-default .panel-heading .acc-title a.collapsed i,
a {
	color: #AA1519;
	text-decoration: none;
	transition: all 0.3s ease;
}

.sidebar .menu li.current-menu-item > a,
a:hover {
	color: #8a1115;
}

.main-nav-outer-wrapper {
	background: linear-gradient(135deg, #AA1519 0%, #8a1115 100%);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#megaMenu #menuMobile li.menu-item-depth-0 .nav-dd .icon-menu a:hover,
#megaMenu #megaST li.menu-item-depth-0 .nav-dd .icon-menu a:hover,
#megaMenu #menuMobile .nav-dd ul.nav-tabs li.active a,
#megaMenu #megaST .nav-dd ul.nav-tabs li.active a,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.box-style-2 a,
.widget_tag_cloud a:hover,
.btn-color:hover,
#megaMenu #megaST li.menu-item-depth-0 .nav-dd a.btn-color:hover,
#megaMenu #megaST li.menu-item-depth-0 .nav-dd a.btn-default,
#respond #submit,
#commentform #submit,
.panel-default .panel-heading .acc-title a,
.panel-default .panel-heading .acc-title a:hover,
.st-testimonial-slider.carousel .carousel-indicators li.active,
.carousel-indicators .active,
ul.submenu-col li.active a {
	background-color: #AA1519;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle {
	background: #AA1519 !important;
}

.woocommerce .products .star-rating,
.woocommerce-page .products .star-rating,
.color-icon,
.text-color,
.carousel-control .icon-prev,
.carousel-control .icon-next {
	color: #AA1519;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
	border-color: #AA1519;
}

.box-style-2 a {
	background: linear-gradient(135deg, #AA1519 0%, #8a1115 100%);
	box-shadow: 0 4px 15px rgba(170, 21, 25, 0.3);
	transition: all 0.3s ease;
}

.box-style-2 a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(170, 21, 25, 0.4);
}

#phone {
	color: #000;
	background: url("/wp-content/themes/Edu/assets/images/telefon.png") no-repeat scroll right center rgba(0, 0, 0, 0);
}

#phone strong {
	color: #990000;
}

#megaMenu #megaST .no-megamenu .menu-row li:hover > a,
#megaMenu #megaST .no-megamenu .menu-row li.active > a,
#megaMenu #megaST .no-megamenu .menu-row li a:hover {
	color: #000;
}

.feat h3 {
	text-shadow: 0px 0px 0 #FFFFFF;
}

footer {
	padding-top: 10px;
}

.main-wrapper .list-post .post,
.main-wrapper .list-post .course,
.main-wrapper .list-post .event,
.main-wrapper .list-post .page {
	padding-bottom: 10px;
}

.search .product,
.post {
	margin-bottom: 5px;
}

.st-il-content {
	text-align: justify;
}

/* ========================================
   10. COMMENT FORM STYLES
   ======================================== */

#respond .form-line .input-group-addon {
	min-width: 95px;
}

.form-line textarea {
	margin-bottom: 20px;
}

#comments input#submit {
	height: auto;
}

#respond h3#reply-title {
	padding-left: 0;
}

p.comment-notes {
	margin-bottom: 25px;
}

#commentform input,
#commentform textarea {
	width: 100%;
}

#respond #submit {
	width: auto;
	height: auto;
	font-size: 14px;
	-moz-user-select: none;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.form-allowed-tags code,
.form-allowed-tags pre {
	white-space: pre-wrap;
}

/* ========================================
   11. RESPONSIVE STYLES
   ======================================== */

/* Desktop & Above (768px+) */
@media (min-width: 768px) {
	.form-inline .row {
		display: flex;
		flex-wrap: wrap;
		/* gap: 20px; */
		align-items: flex-start;
	}

	.form-inline .form-group {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
		flex: 1 1 calc(33.333% - 14px);
		min-width: 200px;
	}

	.form-inline .form-control {
		width: 100%;
	}

	/* Input width classes overrides */
	.form-inline .input-standard,
	.form-inline .input-medium,
	.form-inline .input-large {
		width: 100%;
	}

	/* Textarea i file input preko cele širine */
	.form-inline .row .form-group:has(textarea),
	.form-inline .row .form-group:has(input[type="file"]) {
		flex: 1 1 100%;
	}

	/* Map preko cele širine */
	.form-inline .row .form-group-new {
		flex: 1 1 100%;
	}

	/* Buttons u desnom uglu */
	.form-inline .row .nepokretnosti-buttons {
		flex: 1 1 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.form-inline .radio,
	.form-inline .checkbox {
		display: inline-block;
		padding-left: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	.form-inline .radio input[type="radio"],
	.form-inline .checkbox input[type="checkbox"] {
		float: none;
		margin-left: 0;
	}

	.form-group-new {
		display: inline-block;
		margin-bottom: 0;
		vertical-align: middle;
	}

	#map {
		width: 300px;
		height: 200px;
		position: relative;
		border: 2px solid #e0e0e0;
		border-radius: 12px;
		margin: 20px auto;
		overflow: hidden;
		box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	}

	/* reCAPTCHA Container */
	.form-inline .row > div:has(.g-recaptcha) {
		grid-column: 1 / -1;
		display: flex;
		justify-content: center;
		margin: 20px 0;
	}

	/* Error Messages for reCAPTCHA */
	.form-inline p[style*="color:red"] {
		grid-column: 1 / -1;
	}
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.form-inline .form-group {
		flex: 1 1 calc(50% - 10px);
	}
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
	.form-inline .row {
		display: flex;
		flex-direction: column;
		/* gap: 15px; */
	}

	.nepokretnosti-buttons {
		width: 100%;
		flex-direction: column;
		margin-top: 10px;
	}

	.btn-default {
		width: 100%;
	}

	#map {
		width: 100%;
		height: 250px;
		border: 2px solid #e0e0e0;
		border-radius: 12px;
		margin: 20px 0;
	}

	.wrap-primary {
		padding: 25px 20px 25px 30px; 
	}

	.main-wrapper-inner h1,
	.main-wrapper-inner h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}
}

/* ========================================
   12. PRINT STYLES
   ======================================== */

@media print {
	.nepokretnosti-buttons,
	input[type="file"],
	#map {
		display: none;
	}
}