/**
 * 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;
}

/* ---------------------------------------------------------------------
 * Social sharing (v2.2) — uses the shared .uclwp-section box chrome so it
 * matches the other single-listing sections; only the button row is styled.
 * ------------------------------------------------------------------- */
.uclwp-share-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.uclwp-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ucl-card-bg, #fff);
	border: 1px solid var(--ucl-card-border, #e5e7eb);
	color: var(--ucl-text, #4b5563);
	font-size: 16px;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.uclwp-share-btn:hover {
	transform: translateY(-2px);
	background: var(--ucl-primary, #2c6bed);
	border-color: var(--ucl-primary, #2c6bed);
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Related listings (v2.2)
 * Uses the shared .uclwp-section chrome so it matches the other boxes.
 * Inner cards are flattened so a soft-shadow section doesn't wrap
 * soft-shadow cards (box-in-box).
 * ------------------------------------------------------------------- */
.section-related .uclwp-box-inner {
	box-shadow: none;
	border: 1px solid var(--ucl-card-border, #eceef1);
}
.uclwp-related-listings .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -12px;
	margin-left: -12px;
}
.uclwp-related-listings .row > [class*="col-"] {
	padding: 0 12px;
	margin-bottom: 24px;
}
.uclwp-related-listings .row > [class*="col-"]:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
 * Featured badge — single listing (v2.3)
 * ------------------------------------------------------------------- */
.uclwp-featured-single { margin: 0 0 14px; }
.uclwp-featured-badge.is-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ucl-badge-text, #1a1400);
	background: var(--ucl-badge-bg, #ffc107);
}

/* ---------------------------------------------------------------------
 * Ratings & Reviews (v2.5)
 * The section itself uses the shared .uclwp-section chrome so it matches
 * the other single-listing boxes (and the style 1/2/3 variants). Only the
 * internals are styled here.
 * ------------------------------------------------------------------- */
.ucl-stars { display: inline-flex; gap: 2px; color: #f5a623; font-size: 15px; line-height: 1; }
.ucl-stars .bi-star { color: #cfd4dc; }

.ucl-reviews-summary { margin-bottom: 18px; }
.ucl-reviews-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ucl-reviews-avg { font-size: 30px; font-weight: 800; color: var(--ucl-heading, #22262b); line-height: 1; }
.ucl-reviews-score .ucl-stars { font-size: 20px; }
.ucl-reviews-count { color: var(--ucl-text-muted, #6b7280); font-size: 14px; }
.ucl-reviews-empty { color: var(--ucl-text-muted, #6b7280); font-size: 14px; }

.ucl-reviews-list { list-style: none; margin: 0 0 24px; padding: 0; }
.ucl-review { padding: 14px 0; border-bottom: 1px solid var(--ucl-card-border, #eef0f3); }
.ucl-reviews-list .ucl-review:last-child { border-bottom: 0; }
.ucl-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ucl-review-author { font-weight: 600; color: var(--ucl-heading, #22262b); }
.ucl-review-date { color: var(--ucl-text-muted, #9aa1ab); font-size: 12px; margin-left: auto; }
.ucl-review-body { color: var(--ucl-text, #4b5563); font-size: 14px; line-height: 1.6; white-space: pre-line; }

.ucl-review-form-wrap {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--ucl-card-border, #eef0f3);
}
.ucl-review-form-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: var(--ucl-heading, #22262b); }
.ucl-review-field { margin-bottom: 14px; }
.ucl-review-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ucl-review-row .ucl-review-field { flex: 1 1 180px; }
.ucl-review-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ucl-heading, #22262b); }
.ucl-review-label .req { color: #d33; }
.ucl-review-input {
	width: 100%; padding: 9px 12px; font-size: 14px;
	border: 1px solid var(--ucl-card-border, #d5d9e0); border-radius: 6px;
	background: var(--ucl-page-bg, #fff); color: var(--ucl-text, #222);
}
.ucl-review-input:focus { outline: 2px solid var(--ucl-primary, #2c6bed); outline-offset: 1px; border-color: transparent; }

/* Accessible reversed-radio star input */
.ucl-star-input { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.ucl-star-input input {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ucl-star-input label { color: #cfd4dc; font-size: 26px; line-height: 1; cursor: pointer; transition: color .12s ease; }
.ucl-star-input input:checked ~ label { color: #f5a623; }
.ucl-star-input:hover input:checked ~ label { color: #cfd4dc; }
.ucl-star-input label:hover,
.ucl-star-input label:hover ~ label { color: #f5b942; }
.ucl-star-input input:focus-visible + label { outline: 2px solid var(--ucl-primary, #2c6bed); outline-offset: 2px; border-radius: 3px; }

.ucl-review-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ucl-review-status { font-size: 13px; margin: 8px 0; min-height: 18px; }
.ucl-review-status[data-state="error"] { color: #d33; }
.ucl-review-status[data-state="success"] { color: #1f9d63; }
.ucl-review-status[data-state="info"] { color: var(--ucl-text-muted, #6b7280); }
.ucl-review-submit {
	display: inline-block; padding: 10px 22px; font-size: 14px; font-weight: 600;
	color: #fff; background: var(--ucl-primary, #2c6bed); border: 0; border-radius: 6px; cursor: pointer;
}
.ucl-review-submit:hover { background: var(--ucl-primary-hover, #2258c9); }
.ucl-review-submit[disabled] { opacity: .6; cursor: default; }
@media (max-width: 480px) { .ucl-review-date { margin-left: 0; } }