/**
 * Property Form V2
 * DS Theme
 */

/* ==========================================================
   Hero Banner
========================================================== */

.post-property-hero {
	position: relative;
	overflow: hidden;
	padding: 50px 30px;
	border-radius: 18px;
	background: linear-gradient(135deg, #0d6efd 0%, #0b3d91 100%);
	color: #fff;
}

.post-property-hero h1 {
	position: relative;
	z-index: 2;
	color: #fff;
	font-weight: 700;
}

.post-property-hero p {
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, .85);
	font-size: 16px;
}

.post-property-hero__icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	font-size: 130px;
	color: rgba(255, 255, 255, .12);
	pointer-events: none;
}

.post-property-hero__icon--left {
	left: 30px;
}

.post-property-hero__icon--right {
	right: 30px;
}

@media (max-width: 767px) {

	.post-property-hero {
		padding: 35px 20px;
	}

	.post-property-hero__icon {
		font-size: 70px;
	}

	.post-property-hero__icon--left {
		left: 10px;
	}

	.post-property-hero__icon--right {
		right: 10px;
	}

}

/* ==========================================================
   Card
========================================================== */

.property-form__card {
	background: #ffffff;
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 30px;
	border: 1px solid #e9ecef;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.property-form__header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f1f1f1;
}

.property-form__title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.property-form__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0d6efd;
	font-size: 24px;
	line-height: 1;
}

.property-form__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #212529;
}

.property-form__title small {
	font-size: 15px;
}

.property-form__subtitle {
	margin-top: 8px;
	color: #6c757d;
	font-size: 15px;
	line-height: 1.6;
}

/* ==========================================================
   Form Controls
========================================================== */

.form-label {
	font-weight: 600;
	color: #212529;
	margin-bottom: 8px;
}

.form-control,
.form-select {

	display: block;

	width: 100%;

	min-height: 52px;

	padding: 10px 14px;

	border-radius: 10px;

	border: 1px solid #ced4da;

	background-color: #fff;

	box-shadow: none;

	transition: all .25s ease;

}

.form-control:focus,
.form-select:focus {

	border-color: #0d6efd;

	box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);

}

/* The theme's global style.css has a same-specificity-or-higher rule
   (input[type="text"], input[type="email"], etc. + textarea) that forces
   border-radius: 0, which can win over our plain .form-control class.
   Re-assert the radius explicitly on every input type we actually use. */
.property-form input[type="text"],
.property-form input[type="email"],
.property-form input[type="tel"],
.property-form input[type="search"],
.property-form input[type="password"],
.property-form input[type="number"],
.property-form input[type="date"],
.property-form input[type="url"],
.property-form select,
.property-form textarea {

	border-radius: 10px !important;

}

textarea.form-control {

	min-height: 140px;

	resize: vertical;

}

/* ==========================================================
   Required
========================================================== */

.text-danger {

	font-weight: 700;

}

/* ==========================================================
   Validation
========================================================== */

.is-invalid {

	border-color: #dc3545 !important;

}

.is-invalid:focus {

	box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);

}

/* ==========================================================
   Property Features
========================================================== */

.property-feature-item {

	display: flex;

	align-items: center;

	gap: 10px;

	padding: 8px 0;

	border: none;

	background: transparent;

	transition: color .2s ease;

	cursor: pointer;

}

.property-feature-item:hover {

	color: #0d6efd;

}

.property-feature-item .form-check-input {

	position: static;

	float: none;

	margin: 0;

	flex-shrink: 0;

	width: 18px;

	height: 18px;

	cursor: pointer;

}

.property-feature-item .form-check-label {

	padding-left: 0;

	margin: 0;

	cursor: pointer;

	font-weight: 500;

}

.property-radio-group {

	column-gap: 30px;

	row-gap: 10px;

}

.property-radio-item {

	display: flex;

	align-items: center;

	gap: 8px;

	padding: 0;

	border: none;

	background: transparent;

	cursor: pointer;

}

.property-radio-item .form-check-input {

	position: static;

	float: none;

	margin: 0;

	flex-shrink: 0;

	width: 18px;

	height: 18px;

	cursor: pointer;

}

.property-radio-item .form-check-label {

	padding-left: 0;

	margin: 0;

	cursor: pointer;

	font-weight: 500;

}

/* ==========================================================
   Progress Bar
========================================================== */

.property-progress {

	background: #e9ecef;

	height: 8px;

	border-radius: 50px;

	overflow: hidden;

	margin-bottom: 30px;

}

.property-progress-bar {

	width: 0;

	height: 100%;

	background: linear-gradient(90deg, #0d6efd, #198754);

	transition: width .35s ease;

}

/* ==========================================================
   Step Indicators
========================================================== */

.property-steps {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 35px;

	flex-wrap: wrap;

	gap: 15px;

}

.property-step-indicator {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	width: 60px;

	transition: all .3s ease;

}

.property-step-indicator .step-number {

	width: 42px;

	height: 42px;

	border-radius: 50%;

	background: #dee2e6;

	color: #495057;

	display: flex;

	align-items: center;

	justify-content: center;

	font-weight: 700;

	margin-bottom: 8px;

	transition: all .3s ease;

}

.property-step-indicator .step-title {

	font-size: 13px;

	text-align: center;

	color: #6c757d;

	line-height: 1.4;

}

.property-step-indicator.active .step-number {

	background: #0d6efd;

	color: #fff;

}

.property-step-indicator.completed .step-number {

	background: #198754;

	color: #fff;

}

.property-step-indicator.active .step-title,

.property-step-indicator.completed .step-title {

	color: #212529;

	font-weight: 600;

}

/* ==========================================================
   Sidebar
========================================================== */

.property-sidebar {

	position: sticky;

	top: 30px;

}

.property-sidebar .card {

	border: 1px solid #e9ecef;

	border-radius: 16px;

	box-shadow: 0 5px 20px rgba(0,0,0,.05);

}

.property-sidebar .card-header {

	background: #fff;

	border-bottom: 1px solid #f1f1f1;

	font-weight: 700;

}

.property-sidebar .list-group-item {

	border: none;

	padding: 12px 20px;

}

/* ==========================================================
   Buttons
========================================================== */

.btn-next,

.btn-previous,

.btn-submit {

	min-width: 170px;

	height: 50px;

	border-radius: 10px;

	font-weight: 600;

}

.btn-submit:disabled {

	cursor: not-allowed;

	opacity: .75;

}

/* ==========================================================
   Form Action Buttons (override theme's generic .btn styles)
========================================================== */

.property-form-actions .btn-submit,
.property-form-actions .btn-reset {

	text-transform: none !important;

	border-radius: 10px !important;

	min-width: 190px;

	width: auto !important;

	height: 52px;

	font-weight: 600;

	font-size: 16px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	transition: all .2s ease;

}

.property-form-actions .btn-submit {

	background-color: #0d6efd !important;

	border: 1px solid #0d6efd !important;

	color: #fff !important;

}

.property-form-actions .btn-submit:hover,
.property-form-actions .btn-submit:focus {

	background-color: #0b5ed7 !important;

	border-color: #0b5ed7 !important;

	color: #fff !important;

}

.property-form-actions .btn-reset {

	background-color: #fff !important;

	border: 1px solid #ced4da !important;

	color: #495057 !important;

}

.property-form-actions .btn-reset:hover,
.property-form-actions .btn-reset:focus {

	background-color: #f1f3f5 !important;

	border-color: #adb5bd !important;

	color: #212529 !important;

}

/* ==========================================================
   Accordion (native details/summary — no Bootstrap JS needed)
========================================================== */

.property-accordion__item {
	border: 1px solid #e9ecef;
	border-radius: 12px;
	margin-bottom: 15px;
	overflow: hidden;
}

.property-accordion__summary {
	font-weight: 600;
	padding: 18px 20px;
	background: #fff;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #212529;
}

.property-accordion__summary::-webkit-details-marker {
	display: none;
}

.property-accordion__summary::after {
	content: '\f078';
	font-family: 'FontAwesome';
	font-weight: normal;
	font-size: 14px;
	color: #6c757d;
	transition: transform .2s ease;
}

.property-accordion__item[open] .property-accordion__summary {
	background: #f8fbff;
	color: #0d6efd;
	border-bottom: 1px solid #e9ecef;
}

.property-accordion__item[open] .property-accordion__summary::after {
	transform: rotate(180deg);
}

.property-accordion__body {
	padding: 25px;
}

/* Static (always-open, non-collapsible) accordion variant —
   Office Details / Commercial Details use this so they can't be
   collapsed shut, unlike the click-to-toggle Key Information one. */

.property-accordion__item--static .property-accordion__summary {
	cursor: default;
	background: #f8fbff;
	color: #0d6efd;
	border-bottom: 1px solid #e9ecef;
}

.property-accordion__item--static .property-accordion__summary::after {
	display: none;
}

/* ==========================================================
   Upload Boxes
========================================================== */

.upload-box {

	position: relative;

	height: 100%;

	display: flex;

	flex-direction: column;

	border: 2px dashed #ced4da;

	border-radius: 14px;

	background: #fafafa;

	transition: all .3s ease;

	overflow: hidden;

}

.upload-box:hover {

	border-color: #0d6efd;

	background: #f8fbff;

}

.upload-box.dragover {

	border-color: #198754;

	background: #f0fff5;

}

.upload-dropzone {

	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: center;

	flex: 1 0 auto;

	height: 130px;

	margin: 0;

	padding: 16px;

	text-align: center;

	cursor: pointer;

}

.upload-input {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	cursor: pointer;

	z-index: 2;

}

.upload-placeholder {

	display: block;

	color: #6c757d;

	pointer-events: none;

}

.upload-placeholder i {

	display: block;

	font-size: 26px;

	color: #0d6efd;

	margin-bottom: 8px;

}

.upload-placeholder__title {

	display: block;

	font-weight: 600;

	color: #212529;

	margin-bottom: 4px;

}

.upload-placeholder__hint,
.upload-placeholder__meta {

	display: block;

	font-size: 13px;

	color: #6c757d;

}

/* ==========================================================
   Thumbnail Preview
========================================================== */

#thumbnailPreview,
#galleryPreview {

	padding: 0 20px 20px;

}

#thumbnailPreview img {

	max-width: 100%;

	max-height: 260px;

	border-radius: 12px;

	border: 1px solid #dee2e6;

	object-fit: cover;

	display: block;

	margin: auto;

}

/* ==========================================================
   Gallery Preview
========================================================== */

.gallery-preview-item {

	position: relative;

	border-radius: 12px;

	overflow: hidden;

	background: #fff;

	border: 1px solid #dee2e6;

	box-shadow: 0 3px 12px rgba(0,0,0,.08);

	transition: all .25s ease;

}

.gallery-preview-item:hover {

	transform: translateY(-4px);

	box-shadow: 0 8px 20px rgba(0,0,0,.12);

}

.gallery-preview-item img {

	width: 100%;

	height: 180px;

	object-fit: cover;

	display: block;

}

/* Optional remove button (future support) */

.gallery-preview-item .remove-image {

	position: absolute;

	top: 8px;

	right: 8px;

	width: 32px;

	height: 32px;

	border: none;

	border-radius: 50%;

	background: rgba(220,53,69,.9);

	color: #fff;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 14px;

	transition: all .2s ease;

}

.gallery-preview-item .remove-image:hover {

	background: #dc3545;

	transform: scale(1.08);

}

/* ==========================================================
   YouTube Preview
========================================================== */

#youtubePreview {

	border-radius: 12px;

	overflow: hidden;

	background: #f8f9fa;

	border: 1px solid #dee2e6;

}

#youtubePreview iframe {

	width: 100%;

	height: 100%;

	min-height: 220px;

	border: 0;

}

/* ==========================================================
   Alerts
========================================================== */

.alert {

	border-radius: 12px;

	border: none;

}

.alert-info {

	background: #eef7ff;

	color: #0c5460;

}

.alert-warning {

	background: #fff8e5;

	color: #856404;

}

.alert-success {

	background: #edf9f0;

	color: #155724;

}

.alert-danger {

	background: #fdecec;

	color: #721c24;

}

.alert-dismissible {

	position: relative;

	padding-right: 45px;

}

.alert-dismissible .btn-close {

	position: absolute;

	top: 50%;

	right: 15px;

	transform: translateY(-50%);

	width: 26px;

	height: 26px;

	border: none;

	background: transparent;

	font-size: 20px;

	line-height: 1;

	color: inherit;

	opacity: .6;

	cursor: pointer;

}

.alert-dismissible .btn-close:hover {

	opacity: 1;

}

/* ==========================================================
   Spinner
========================================================== */

.spinner-border-sm {

	vertical-align: middle;

}
/* ==========================================================
   Form Navigation
========================================================== */

.property-form-navigation {

	display: flex;

	justify-content: space-between;

	align-items: center;

	gap: 15px;

	margin-top: 40px;

	padding-top: 25px;

	border-top: 1px solid #e9ecef;

	flex-wrap: wrap;

}

/* ==========================================================
   Step Sections
========================================================== */

.property-step {

	display: none;

	animation: fadeIn .35s ease-in-out;

}

.property-step.active {

	display: block;

}

/* ==========================================================
   Fade Animation
========================================================== */

@keyframes fadeIn {

	from {

		opacity: 0;

		transform: translateY(15px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 991px) {

	.property-sidebar {

		position: static;

		margin-top: 30px;

	}

	.property-form__card {

		padding: 24px;

	}

	.property-steps {

		justify-content: center;

	}

	#property-media .col-lg-6 {

		margin-bottom: 45px !important;

	}

	#property-media .col-lg-6:last-child {

		margin-bottom: 0 !important;

	}

}

@media (max-width: 767px) {

	.property-form__card {

		padding: 20px;

		border-radius: 12px;

	}

	.property-form__title {

		font-size: 22px;

	}

	.property-form__subtitle {

		font-size: 14px;

	}

	.property-form-actions {

		flex-direction: column;

		align-items: stretch;

		gap: 12px;

		padding: 20px;

	}

	.property-form-actions .btn-reset,
	.property-form-actions .btn-submit {

		width: 100% !important;

		min-width: 0;

	}

	.property-step-indicator {

		width: calc(33.333% - 10px);

	}

	.property-step-indicator .step-title {

		font-size: 12px;

	}

	.gallery-preview-item img {

		height: 140px;

	}

	.upload-box {

		padding: 20px;

	}

}

@media (max-width: 575px) {

	.property-step-indicator {

		width: calc(50% - 10px);

	}

	.property-progress {

		margin-bottom: 20px;

	}

	.property-accordion__body {

		padding: 18px;

	}

	.form-control,
	.form-select {

		min-height: 48px;

	}

}

/* ==========================================================
   Utility Classes
========================================================== */

.cursor-pointer {

	cursor: pointer;

}

.shadow-hover {

	transition: box-shadow .25s ease;

}

.shadow-hover:hover {

	box-shadow: 0 8px 24px rgba(0,0,0,.12);

}

.rounded-xl {

	border-radius: 16px;

}

.border-dashed {

	border-style: dashed !important;

}

.property-form{

	width:100%;

}

.property-form > .row{

	align-items:flex-start;

}

.property-form section{

	margin-bottom:30px;

}

.property-sidebar{

	position:sticky;

	top:25px;

}

.property-form-actions{

	padding:30px;

	background:#fff;

	border:1px solid #eee;

	border-radius:16px;

	box-shadow:0 3px 15px rgba(0,0,0,.05);

}

@media(max-width:991px){

	.property-sidebar{

		position:relative;

		top:0;

		margin-top:40px;

	}

}