/* ==========================================================
   CHIRALA RESORTS
   HIVEPRESS ADD LISTING PAGE
   File: assets/css/listing-submit.css
========================================================== */

/* ----------------------------------------------------------
   Page foundation
---------------------------------------------------------- */

body:has(.hp-form--listing-submit),
body:has(form[data-model="listing"]) {
	background:
		radial-gradient(
			circle at 10% 10%,
			rgba(18, 111, 104, 0.08),
			transparent 34%
		),
		linear-gradient(180deg, #f3f8fa 0%, #edf5f8 100%);
}

body:has(.hp-form--listing-submit) .site-content,
body:has(form[data-model="listing"]) .site-content {
	padding-top: 55px;
	padding-bottom: 90px;
	background: transparent;
}

/* Main page width */

body:has(.hp-form--listing-submit) .content-area,
body:has(form[data-model="listing"]) .content-area {
	width: min(100% - 40px, 1120px);
	max-width: 1120px;
	margin-right: auto;
	margin-left: auto;
	float: none;
}

/* Remove unnecessary sidebar space */

body:has(.hp-form--listing-submit) .widget-area,
body:has(form[data-model="listing"]) .widget-area {
	display: none;
}

/* ----------------------------------------------------------
   Main form card
---------------------------------------------------------- */

.hp-form--listing-submit,
form[data-model="listing"] {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 46px 48px 50px;

	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(210, 224, 230, 0.95);
	border-radius: 26px;

	box-shadow:
		0 24px 65px rgba(24, 52, 68, 0.11),
		0 5px 18px rgba(24, 52, 68, 0.05);
}

/* Decorative top line */

.hp-form--listing-submit::before,
form[data-model="listing"]::before {
	position: absolute;
	top: 0;
	left: 48px;

	width: 72px;
	height: 4px;

	content: "";
	background: linear-gradient(
		90deg,
		#126f68,
		#41b5a9
	);

	border-radius: 0 0 5px 5px;
}

/* ----------------------------------------------------------
   Page heading
---------------------------------------------------------- */

body:has(.hp-form--listing-submit) .entry-header,
body:has(form[data-model="listing"]) .entry-header {
	margin-bottom: 28px;
}

body:has(.hp-form--listing-submit) .entry-title,
body:has(form[data-model="listing"]) .entry-title,
.hp-form--listing-submit + *,
form[data-model="listing"] + * {
	color: var(--cr-color-heading, #15243a);
}

body:has(.hp-form--listing-submit) .entry-title,
body:has(form[data-model="listing"]) .entry-title {
	margin: 0;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.04em;
}

/* HivePress title inside page */

.hp-page__title {
	margin-bottom: 30px;
	color: #15243a;
	font-size: clamp(31px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.hp-page__title::before {
	display: block;
	width: 50px;
	height: 4px;
	margin-bottom: 18px;

	content: "";
	background: #126f68;
	border-radius: 99px;
}

/* ----------------------------------------------------------
   Form field grid
---------------------------------------------------------- */

.hp-form--listing-submit .hp-form__fields,
form[data-model="listing"] .hp-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 26px;
	row-gap: 22px;
}

/* Every field */

.hp-form--listing-submit .hp-form__field,
form[data-model="listing"] .hp-form__field {
	min-width: 0;
	margin: 0;
}

/* Full-width fields */

.hp-form--listing-submit .hp-form__field--select:first-child,
.hp-form--listing-submit .hp-form__field--attachment-upload,
.hp-form--listing-submit .hp-form__field[data-name="title"],
.hp-form--listing-submit .hp-form__field[data-name="description"],
.hp-form--listing-submit .hp-form__field[data-name="images"],
.hp-form--listing-submit .hp-form__field[data-name="price"],
.hp-form--listing-submit .hp-form__field[data-name="address"],
.hp-form--listing-submit .hp-form__field[data-name="location"],
form[data-model="listing"] .hp-form__field[data-name="title"],
form[data-model="listing"] .hp-form__field[data-name="description"],
form[data-model="listing"] .hp-form__field[data-name="images"],
form[data-model="listing"] .hp-form__field[data-name="price"],
form[data-model="listing"] .hp-form__field[data-name="address"],
form[data-model="listing"] .hp-form__field[data-name="location"] {
	grid-column: 1 / -1;
}

/* Fallback targeting based on field names */

.hp-form--listing-submit [name="title"],
.hp-form--listing-submit [name="description"],
.hp-form--listing-submit [name="images"],
.hp-form--listing-submit [name="price"] {
	width: 100%;
}

/* ----------------------------------------------------------
   Labels
---------------------------------------------------------- */

.hp-form--listing-submit label,
form[data-model="listing"] label {
	display: inline-flex;
	align-items: center;
	gap: 4px;

	margin-bottom: 8px;

	color: #334458;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.hp-form--listing-submit label small,
.hp-form--listing-submit .hp-form__label small,
form[data-model="listing"] label small {
	color: #8a98a8;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.04em;
}

/* Required mark */

.hp-form--listing-submit label span,
form[data-model="listing"] label span {
	color: #00257c;
}

/* ----------------------------------------------------------
   Inputs
---------------------------------------------------------- */

.hp-form--listing-submit input[type="text"],
.hp-form--listing-submit input[type="email"],
.hp-form--listing-submit input[type="tel"],
.hp-form--listing-submit input[type="number"],
.hp-form--listing-submit input[type="url"],
.hp-form--listing-submit input[type="password"],
.hp-form--listing-submit select,
.hp-form--listing-submit textarea,
form[data-model="listing"] input[type="text"],
form[data-model="listing"] input[type="email"],
form[data-model="listing"] input[type="tel"],
form[data-model="listing"] input[type="number"],
form[data-model="listing"] input[type="url"],
form[data-model="listing"] select,
form[data-model="listing"] textarea {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 15px;

	color: #1c2d40;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;

	background: #fbfdfe;
	border: 1px solid #a7afb3;
	border-radius: 11px;

	box-shadow: inset 0 1px 2px rgba(26, 46, 58, 0.025);

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.hp-form--listing-submit textarea,
form[data-model="listing"] textarea {
	min-height: 160px;
	padding-top: 14px;
	resize: vertical;
}

.hp-form--listing-submit input::placeholder,
.hp-form--listing-submit textarea::placeholder {
	color: #a0acb8;
}

.hp-form--listing-submit input:focus,
.hp-form--listing-submit select:focus,
.hp-form--listing-submit textarea:focus,
form[data-model="listing"] input:focus,
form[data-model="listing"] select:focus,
form[data-model="listing"] textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: #29958b;
	box-shadow:
		0 0 0 4px rgba(41, 149, 139, 0.12),
		0 5px 14px rgba(24, 55, 68, 0.05);
}

/* Select arrow space */

.hp-form--listing-submit select,
form[data-model="listing"] select {
	padding-right: 42px;
	cursor: pointer;
}

/* ----------------------------------------------------------
   Image upload
---------------------------------------------------------- */

.hp-form--listing-submit .hp-form__field--attachment-upload,
form[data-model="listing"] .hp-form__field--attachment-upload {
	padding: 22px;

	background: #f6fafb;
	border: 1px dashed #bdd4da;
	border-radius: 14px;
}

.hp-form--listing-submit .hp-form__field--attachment-upload:hover,
form[data-model="listing"] .hp-form__field--attachment-upload:hover {
	background: #f0f8f8;
	border-color: #62ada6;
}

.hp-form--listing-submit .hp-field--attachment-upload,
form[data-model="listing"] .hp-field--attachment-upload {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Select Images button */

.hp-form--listing-submit .hp-field--attachment-upload button,
.hp-form--listing-submit .hp-field--attachment-upload .button,
form[data-model="listing"] .hp-field--attachment-upload button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 17px;

	color: #126f68;
	font-family: inherit;
	font-size: 13px;
	font-weight: 750;

	cursor: pointer;
	background: #ffffff;
	border: 1px solid #a9cfcb;
	border-radius: 10px;

	box-shadow: 0 5px 14px rgba(18, 111, 104, 0.08);
}

.hp-form--listing-submit .hp-field--attachment-upload button:hover,
.hp-form--listing-submit .hp-field--attachment-upload .button:hover {
	color: #ffffff;
	background: #126f68;
	border-color: #126f68;
}

/* ----------------------------------------------------------
   Checkboxes
---------------------------------------------------------- */

.hp-form--listing-submit .hp-form__field--checkbox,
form[data-model="listing"] .hp-form__field--checkbox {
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 13px 15px;

	background: #f8fbfc;
	border: 1px solid #dce6e9;
	border-radius: 11px;
}

.hp-form--listing-submit .hp-form__field--checkbox label,
form[data-model="listing"] .hp-form__field--checkbox label {
	margin: 0;
	color: #35475a;
	font-size: 13px;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.hp-form--listing-submit input[type="checkbox"],
form[data-model="listing"] input[type="checkbox"] {
	width: 19px;
	height: 19px;
	margin: 0 9px 0 0;

	cursor: pointer;
	accent-color: #126f68;
}

/* ----------------------------------------------------------
   Form footer and submit button
---------------------------------------------------------- */

.hp-form--listing-submit .hp-form__footer,
form[data-model="listing"] .hp-form__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 34px;
	padding-top: 27px;
	border-top: 1px solid #e5ecef;
}

.hp-form--listing-submit button[type="submit"],
.hp-form--listing-submit input[type="submit"],
form[data-model="listing"] button[type="submit"],
form[data-model="listing"] input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-width: 190px;
	min-height: 52px;
	padding: 13px 24px;

	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;

	cursor: pointer;
	background: linear-gradient(
		135deg,
		#126f68,
		#16877e
	);

	border: 1px solid #126f68;
	border-radius: 11px;

	box-shadow:
		0 12px 25px rgba(18, 111, 104, 0.22);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.hp-form--listing-submit button[type="submit"]::after,
form[data-model="listing"] button[type="submit"]::after {
	content: "→";
	font-size: 18px;
	line-height: 1;
}

.hp-form--listing-submit button[type="submit"]:hover,
.hp-form--listing-submit input[type="submit"]:hover,
form[data-model="listing"] button[type="submit"]:hover,
form[data-model="listing"] input[type="submit"]:hover {
	transform: translateY(-2px);
	background: linear-gradient(
		135deg,
		#0e5d57,
		#126f68
	);
	box-shadow:
		0 16px 30px rgba(18, 111, 104, 0.28);
}

/* ----------------------------------------------------------
   Validation and help text
---------------------------------------------------------- */

.hp-form--listing-submit .hp-form__description,
.hp-form--listing-submit small,
form[data-model="listing"] .hp-form__description {
	display: block;
	margin-top: 6px;
	color: #82909d;
	font-size: 11px;
	line-height: 1.5;
}

.hp-form--listing-submit .has-error input,
.hp-form--listing-submit .has-error select,
.hp-form--listing-submit .has-error textarea {
	border-color: #d95b5b;
	box-shadow: 0 0 0 4px rgba(217, 91, 91, 0.1);
}

/* ----------------------------------------------------------
   Tablet
---------------------------------------------------------- */

@media (max-width: 900px) {

	body:has(.hp-form--listing-submit) .content-area,
	body:has(form[data-model="listing"]) .content-area {
		width: min(100% - 30px, 760px);
	}

	.hp-form--listing-submit,
	form[data-model="listing"] {
		padding: 38px 32px 42px;
	}

	.hp-form--listing-submit::before,
	form[data-model="listing"]::before {
		left: 32px;
	}

	.hp-form--listing-submit .hp-form__fields,
	form[data-model="listing"] .hp-form__fields {
		column-gap: 20px;
		row-gap: 20px;
	}

}

/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 650px) {

	body:has(.hp-form--listing-submit) .site-content,
	body:has(form[data-model="listing"]) .site-content {
		padding-top: 30px;
		padding-bottom: 55px;
	}

	body:has(.hp-form--listing-submit) .content-area,
	body:has(form[data-model="listing"]) .content-area {
		width: min(100% - 22px, 520px);
	}

	.hp-form--listing-submit,
	form[data-model="listing"] {
		padding: 30px 20px 32px;
		border-radius: 19px;
	}

	.hp-form--listing-submit::before,
	form[data-model="listing"]::before {
		left: 20px;
		width: 55px;
	}

	.hp-form--listing-submit .hp-form__fields,
	form[data-model="listing"] .hp-form__fields {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.hp-form--listing-submit .hp-form__field,
	form[data-model="listing"] .hp-form__field {
		grid-column: 1 !important;
	}

	.hp-form--listing-submit .hp-form__footer,
	form[data-model="listing"] .hp-form__footer {
		display: block;
		margin-top: 27px;
		padding-top: 23px;
	}

	.hp-form--listing-submit button[type="submit"],
	.hp-form--listing-submit input[type="submit"],
	form[data-model="listing"] button[type="submit"],
	form[data-model="listing"] input[type="submit"] {
		width: 100%;
	}

}

/* ==========================================================
   LISTING IMAGE THUMBNAIL PREVIEW
   Keeps HivePress upload/save behaviour intact.
========================================================== */

.hp-form--listing-submit .hp-form__field--attachment-upload,
form[data-model="listing"] .hp-form__field--attachment-upload {
	position: relative;
	overflow: visible;
}

.hp-form--listing-submit .hp-field--attachment-upload,
form[data-model="listing"] .hp-field--attachment-upload {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

/* Thumbnail collection */
.hp-form--listing-submit .hp-field__attachments,
.hp-form--listing-submit [data-component="file-list"],
form[data-model="listing"] .hp-field__attachments,
form[data-model="listing"] [data-component="file-list"] {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Individual thumbnail */
.hp-form--listing-submit .crms-listing-image-card,
form[data-model="listing"] .crms-listing-image-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 116px;
	overflow: hidden;
	border: 1px solid #d5e1e6;
	border-radius: 12px;
	background:
		linear-gradient(135deg, #eaf3f5, #f7fafb);
	box-shadow: 0 8px 18px rgba(24, 55, 68, 0.08);
}

.hp-form--listing-submit .crms-listing-image-card img,
form[data-model="listing"] .crms-listing-image-card img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center;
	opacity: 1 !important;
	visibility: visible !important;
	transition: transform 0.3s ease;
}

.hp-form--listing-submit .crms-listing-image-card:hover img,
form[data-model="listing"] .crms-listing-image-card:hover img {
	transform: scale(1.035);
}

/* Primary image badge */
.hp-form--listing-submit .crms-listing-image-card:first-child::after,
form[data-model="listing"] .crms-listing-image-card:first-child::after {
	position: absolute;
	right: 9px;
	bottom: 9px;
	z-index: 2;
	padding: 4px 7px;
	border-radius: 999px;
	background: rgba(7, 47, 62, 0.82);
	color: #ffffff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	content: "Featured";
	backdrop-filter: blur(5px);
}

/* Custom trash button */
.hp-form--listing-submit .crms-listing-image-delete,
form[data-model="listing"] .crms-listing-image-delete {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	min-width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	border-radius: 50% !important;
	background: rgba(183, 40, 40, 0.94) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: 0 5px 13px rgba(107, 20, 20, 0.28) !important;
	opacity: 0;
	transform: translateY(-3px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		background-color 0.2s ease;
}

.hp-form--listing-submit .crms-listing-image-card:hover .crms-listing-image-delete,
.hp-form--listing-submit .crms-listing-image-delete:focus-visible,
form[data-model="listing"] .crms-listing-image-card:hover .crms-listing-image-delete,
form[data-model="listing"] .crms-listing-image-delete:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.hp-form--listing-submit .crms-listing-image-delete:hover,
form[data-model="listing"] .crms-listing-image-delete:hover {
	background: #951f1f !important;
}

/* Hide HivePress's old floating X after custom trash is installed */
.hp-form--listing-submit .crms-native-image-remove,
form[data-model="listing"] .crms-native-image-remove {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Uploader button appears beneath previews */
.hp-form--listing-submit .hp-field--attachment-upload > button,
.hp-form--listing-submit .hp-field--attachment-upload > .button,
form[data-model="listing"] .hp-field--attachment-upload > button,
form[data-model="listing"] .hp-field--attachment-upload > .button {
	align-self: flex-start;
}

/* Empty uploader remains centred */
.hp-form--listing-submit
.hp-field--attachment-upload:not(.crms-has-image-preview),
form[data-model="listing"]
.hp-field--attachment-upload:not(.crms-has-image-preview) {
	align-items: center;
	justify-content: center;
	min-height: 90px;
}

/* Upload helper added by JavaScript */
.crms-listing-image-help {
	display: block;
	width: 100%;
	margin: 0;
	color: #7b8a97;
	font-size: 10px;
	line-height: 1.45;
}

@media (max-width: 700px) {
	.hp-form--listing-submit .hp-field__attachments,
	.hp-form--listing-submit [data-component="file-list"],
	form[data-model="listing"] .hp-field__attachments,
	form[data-model="listing"] [data-component="file-list"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hp-form--listing-submit .crms-listing-image-delete,
	form[data-model="listing"] .crms-listing-image-delete {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 440px) {
	.hp-form--listing-submit .hp-field__attachments,
	.hp-form--listing-submit [data-component="file-list"],
	form[data-model="listing"] .hp-field__attachments,
	form[data-model="listing"] [data-component="file-list"] {
		grid-template-columns: 1fr;
	}
}