/**
 * Single listing — section / chrome rules.
 *
 * The three styles share the same HTML; only the CSS differs. Each
 * style is scoped under a body class added by class-front-templates
 * (single_listing_body_class), so changing the Single Listing Style
 * setting flips the look without touching templates.
 *
 *   Style 1 — Classic (default, accent bar headings, soft shadow)
 *   Style 2 — Card Stack (raised cards, chip-style headings,
 *             coloured left border)
 *   Style 3 — Minimal (no card chrome, thin top dividers between
 *             sections, condensed type)
 *
 * Variable references (--ucl-card-bg, --ucl-card-border, ...) come
 * from assets/css/styles.php so the admin colour pickers and dark
 * mode work across all three.
 *
 * Rules that are universal (seller info card, contact-seller form
 * widgets) live at the bottom outside the per-style blocks.
 */

/* ============================================================
   STYLE 1 — Classic (default)
   ============================================================ */
.ucl-listing-style-1 .uclwp-section {
	display: block;
	background: var(--ucl-card-bg, #fff);
	padding: 24px 30px 28px 30px;
	box-shadow: 0px 20px 60px 0px rgb(0 0 0 / 10%);
	border-radius: var(--ucl-card-radius, 10px);
	margin-bottom: 30px;
}
.ucl-listing-style-1 .uclwp-section h2 {
	font-size: 22px;
	line-height: 30px;
	font-weight: 800;
	margin: 0 0 14px 0;
	color: var(--ucl-heading, #0d1927);
}
.ucl-listing-style-1 .uclwp-section h2:before {
	display: none;
}

/* ============================================================
   STYLE 2 — Card Stack
   Each section is a softer raised card with a coloured left rail and
   a chip-style heading. Modern e-commerce / property-listing feel.
   ============================================================ */
.ucl-listing-style-2 .uclwp-section {
	background: var(--ucl-card-bg, #fff);
	padding: 22px 28px 26px;
	margin-bottom: 22px;
	border-radius: calc(var(--ucl-card-radius, 10px) + 2px);
	border: 1px solid var(--ucl-card-border, #eceef1);
	border-left: 4px solid var(--ucl-primary, #f85c70);
	box-shadow: 0 6px 18px -8px rgb(13 25 39 / 14%);
}
.ucl-listing-style-2 .uclwp-section h2 {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ucl-primary, #f85c70);
	background: color-mix(in srgb, var(--ucl-primary, #f85c70) 12%, transparent);
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 16px 0;
}

/* ============================================================
   STYLE 3 — Minimal
   No card chrome; sections separated by a thin top divider; tighter
   type and a slimmer rhythm. Looks intentional next to long content.
   ============================================================ */
.ucl-listing-style-3 .uclwp-section {
	background: transparent;
	padding: 24px 0 12px;
	margin-bottom: 16px;
	border-radius: 0;
	border-top: 1px solid var(--ucl-card-border, #eceef1);
	box-shadow: none;
}
.ucl-listing-style-3 .uclwp-section:first-of-type {
	border-top: none;
	padding-top: 8px;
}
.ucl-listing-style-3 .uclwp-section h2 {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ucl-heading, #0d1927);
	margin: 0 0 12px 0;
	letter-spacing: -.005em;
}

/* ============================================================
   Universal section internals (apply across all three styles)
   ============================================================ */
.uclwp-section .listing-content p {
	line-height: 28px;
	margin: 0 0 28px;
	color: var(--ucl-text, #848484);
	transition: all 500ms ease;
}
.uclwp-section p:last-child {
	margin-bottom: 0;
}

.uclwp-section .uclwp-tags {
	list-style: none;
	padding: 0;
	margin: 0;
}
.uclwp-section .uclwp-tags li {
	position: relative;
	display: inline-block;
	margin: 0 10px 0 0;
}
.uclwp-section .uclwp-tags li a {
	display: inline-block;
	font-size: 15px;
	line-height: 26px;
	color: #808080;
	border: 1px solid var(--ucl-card-border, #e5e7ec);
	border-radius: 25px;
	padding: 8.5px 20px;
	text-decoration: none;
	transition: all 500ms ease;
	text-transform: uppercase;
}
.uclwp-section .uclwp-tags li a:hover {
	color: var(--ucl-button-text, #fff);
	box-shadow: 0px 10px 30px 0px rgba(248, 92, 112, .4);
	background-color: var(--ucl-primary, #F97C8C);
}

.uclwp-section iframe {
	width: 100%;
}

.uclwp-section .ucl-features {
	list-style: none;
	margin: 0;
	padding: 0;
}
.uclwp-section .ucl-features li {
	position: relative;
	display: inline-block;
	float: left;
	width: 50%;
	margin: 0 0 8px 0;
	font-size: 15px;
	padding-left: 35px;
}
.uclwp-section .ucl-features li:before {
	position: absolute;
	content: "\f633";
	font-family: bootstrap-icons !important;
	font-size: 15px;
	background-color: var(--ucl-primary, #f85c70);
	color: var(--ucl-button-text, #fff);
	width: 15px;
	height: 15px;
	line-height: 14px;
	text-align: center;
	border-radius: 50%;
	left: 5px;
	top: 5px;
	box-shadow: 0px 0px 0px 3px rgba(248, 92, 112, .3);
}

.uclwp-section #map-canvas {
	height: 300px;
}

.section-details h2 {
	margin-bottom: 0;
}

.ucl-sending-email {
	display: none;
}
.ucl-sending-email div {
	font-size: 15px;
	line-height: 26px;
	border: 1px solid var(--ucl-card-border, #e5e7ec);
	border-radius: 25px;
	padding: 8.5px 20px;
	margin-bottom: 20px;
}
.ucl-sending-email div i {
	color: #0ba3ca;
}

.uclwp-section .seller-info .seller-image img {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	display: block;
}
.uclwp-section .seller-info .seller-name {
	position: relative;
	font-size: 20px;
	line-height: 50px;
	font-weight: 700;
	margin: 0;
	text-align: center;
}

.seller-info .seller-contact {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}
.seller-info .seller-contact li {
	margin: 0;
	border: 1px solid var(--ucl-card-border, #e5e7ec);
	border-radius: 6px;
	padding: 6.5px 10px 6.5px 50px;
	position: relative;
	margin-bottom: 15px;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.seller-info .seller-contact i {
	position: absolute;
	left: 15px;
	border-right: 1px solid var(--ucl-card-border, #e5e7ec);
	padding-right: 13px;
}

.contact-seller-form .title-contact-seller {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 20px;
}

.ucl-single-field .ucl-before-text,
.ucl-single-field .ucl-after-text {
	color: #808288;
	font-size: 13px;
}