/* HostFaddy Custom Property Fields — Image field (Featured Badge).
   Two areas, both fully namespaced so nothing here touches a WP Rentals
   element: (1) the Media Library selector shown in the admin meta box and the
   WP Rentals submit/edit form, and (2) the small square badge shown above the
   property description on the front end.
   Brand: navy #14213D, red #E63946, cream #F7F7F5. */

/* ---------------------------------------------------------------------
 * SELECTOR (admin meta box + injected submit-form control)
 *
 * The selector sits inside the plugin's standard .hf-wprcf-field wrapper, so
 * its label, column width and vertical spacing already match the surrounding
 * WP Rentals fields (label_adjust label on top, control beneath). These rules
 * only style the media-specific parts: the preview thumbnail and the buttons.
 * ------------------------------------------------------------------- */

.hostfaddy-featured-badge-field {
	margin-top: 2px;
}

.hostfaddy-featured-badge-preview {
	margin: 0 0 10px;
}

.hostfaddy-featured-badge-preview-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 160px;
	object-fit: contain;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 4px;
	background: #fff;
}

.hostfaddy-featured-badge-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Keep the media buttons visually in step with WP Rentals / WP admin buttons
   without overriding their theme — only the Remove button gets a red accent. */
.hostfaddy-featured-badge-buttons .button {
	cursor: pointer;
}

.hostfaddy-featured-badge-remove {
	color: #E63946;
	border-color: #E63946;
}

/* On narrow screens let the buttons stack full width so they never overflow
   the submission form column. */
@media ( max-width: 480px ) {
	.hostfaddy-featured-badge-preview-img {
		max-width: 140px;
		max-height: 140px;
	}
	.hostfaddy-featured-badge-buttons .button {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------
 * FRONT-END DISPLAY — small badge above the property description
 *
 * The full image is shown, never cropped. Badges will be different shapes
 * (square, landscape, portrait), so instead of forcing a square we cap the
 * badge inside a small box and let the image scale down to fit within it,
 * keeping its natural aspect ratio. max-width/height keep it small and inside
 * the content column on every device; width/height:auto preserve proportions.
 * ------------------------------------------------------------------- */

.hostfaddy-featured-badge {
	margin: 0 0 18px;
	line-height: 0; /* remove inline-image descender gap */
}

.hostfaddy-featured-badge-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 180px;
	object-fit: contain;
	border-radius: 8px;
}

@media ( max-width: 600px ) {
	.hostfaddy-featured-badge-image {
		max-width: 150px;
		max-height: 150px;
	}
}