/* IDU Listings - single listing page (gallery, buybox, seller card, panels), scoped under .idu-single. */

.idu-single {
	--idu-listings-accent: var(--idu-listings-primary);
	--idu-listings-ink: var(--idu-listings-primary-ink);
	--idu-listings-muted: #626262;
	--idu-listings-line: #e5e7eb;
	--idu-listings-radius: var(--idu-listings-radius-sm);
    --idu-listings-radius-lg: 16px;

	max-width: var(--idu-listings-container);
	margin: 0 auto;
	padding: 30px 0 80px;
	box-sizing: border-box;
	color: var(--idu-listings-ink);
}

@media (max-width: 600px) {
    .idu-single {
        padding: 16px 0 32px !important;
    }
}

.idu-single .idu-icon,
.idu-single .idu-ico {
	width: 18px;
	height: 18px;
}

.idu-single .idu-ico {
	color: var(--idu-listings-accent);
	flex-shrink: 0;
}

.idu-single .idu-single-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--idu-spacing-3);
}

@media ( min-width: 900px ) {
	.idu-single .idu-single-grid {
		grid-template-columns: 1.1fr 1fr;
		align-items: start;
	}
}

.idu-single .idu-gallery-main {
	position: relative;
	border-radius: var(--idu-listings-radius-lg);
	overflow: hidden;
	background: #f1f2f4;
}

.idu-single .idu-gallery-track {
	display: flex;
	transition: transform 0.4s ease;
}

.idu-single .idu-gallery-img {
	flex: 0 0 100%;
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
}

.idu-single .idu-gallery-main:hover .idu-gallery-img.is-active {
	transform: scale( 1.04 );
}

.idu-single .idu-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 35px;
	height: 35px;
	border: none;
	border-radius: var(--idu-listings-radius-pill);
    border: 1px solid var(--idu-listings-white);
    background: rgba(0, 0, 0, 0.20);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease;
}

.idu-single .idu-gallery-nav:hover {
	background: rgba( 0, 0, 0, 0.65 );
}

.idu-single .idu-gallery-nav .idu-ico {
	color: #fff;
	width: 18px;
	height: 18px;
}

.idu-single .idu-gallery-prev {
	left: var(--idu-spacing);
}

.idu-single .idu-gallery-next {
	right: var(--idu-spacing);
}

.idu-single .idu-gallery-noimg {
	aspect-ratio: 4 / 3;
	border-radius: var(--idu-listings-radius);
	height: 100%;
	object-fit: cover;
}

/* Thumbnail strip as a horizontal-scroll carousel showing */
.idu-single .idu-gallery-thumbs {
	--idu-gallery-thumbs-gap: var( --idu-spacing-3 );
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: var( --idu-gallery-thumbs-gap );
	margin-top: var(--idu-spacing-3);
}

.idu-single .idu-gallery-thumbs::-webkit-scrollbar {
	display: none;
}

.idu-single .idu-gallery-thumb-btn {
	flex: 0 0 calc( ( 100% - ( var( --idu-gallery-thumbs-per-view, 4 ) - 1 ) * var( --idu-gallery-thumbs-gap ) ) / var( --idu-gallery-thumbs-per-view, 4 ) );
	scroll-snap-align: start;
	padding: 0;
	line-height: 0;
	border: 2px solid transparent;
	border-radius: var(--idu-listings-radius-lg);
	background: none;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.rs ease, transform 0.5s ease;
}

.idu-single .idu-gallery-thumb-btn:hover {
    transform: scale(1.04);
}

.idu-single .idu-gallery-thumb-btn.is-active {
	border-color: var(--idu-listings-accent);
}

.idu-single .idu-gallery-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 110 / 90;
	object-fit: cover;
	display: block;
	border-radius: var(--idu-listings-radius-lg);
}

@media ( max-width: 600px ) {
	.idu-single .idu-gallery-thumbs {
		--idu-gallery-thumbs-gap: 8px;
		margin-top: var(--idu-spacing-2);
	}
}

.idu-single .idu-gallery-thumbs-wrap {
	position: relative;
}

.idu-single .idu-gallery-thumbs-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 28px;
	height: 28px;
	border: 1px solid var(--idu-listings-white);
	border-radius: var(--idu-listings-radius-pill);
	background: rgba( 0, 0, 0, 0.35 );
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 1;
	transition: background-color 0.15s ease;
}


.idu-single .idu-gallery-thumbs-nav[hidden] {
	display: none;
}

.idu-single .idu-gallery-thumbs-nav:hover {
	background: rgba( 0, 0, 0, 0.65 );
}

.idu-single .idu-gallery-thumbs-nav .idu-ico {
	color: #fff;
	width: 14px;
	height: 14px;
}

.idu-single .idu-gallery-thumbs-prev {
	left: 4px;
}

.idu-single .idu-gallery-thumbs-next {
	right: 4px;
}


.idu-single .idu-single-title {
	margin: 0;
	font-size: var(--idu-listings-h3);
	line-height: normal;
    letter-spacing: -0.6px;
    max-width: 12ch;
    color: var(--idu-listings-ink);
}

.idu-single .idu-price {
	font-size: var(--idu-listings-h2);
	font-weight: 500;
    line-height: normal;
    letter-spacing: -0.72px;
	color: var(--idu-listings-accent);
	white-space: nowrap;
}

.idu-single .idu-price .idu-per {
	font-weight: 500;
	color: var(--idu-listings-muted);
	font-size: 0.82rem;
}

@media (max-width: 600px) {
    .idu-single .idu-price {
        font-size: 28px;
    }
}

/* Single layout columns */
.idu-single .idu-main {
	min-width: 0;
}

.idu-single .idu-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--idu-spacing-3);
}


/* Buybox + seller card + share row share one white card; the description
   and location panels below stay as their own separate white cards. */
.idu-single .idu-sidebar-top {
	background: #fff;
	border: 1px solid var(--idu-listings-line);
	border-radius: var(--idu-listings-radius);
	overflow: hidden;
    padding: var(--idu-spacing);
}

@media ( min-width: 900px ) {
	.idu-single .idu-sidebar {
		position: sticky;
		top: 90px;
	}
}

@media (max-width: 600px) {
    .idu-single .idu-sidebar-top {
        padding: var(--idu-spacing-3);
    }
}

/* Theme's overflow-x:hidden breaks position:sticky - overflow-x:clip stops scroll without breaking sticky. */
.site {
	overflow-x: clip !important;
}

#content.site-content,
#content .container,
.bb-grid.site-content-grid {
	overflow: visible !important;
}

.idu-single .idu-buybox-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

/* Key facts pills */
.idu-single .idu-keyfacts {
	list-style: none;
	margin: var(--idu-spacing) 0 0;
	padding: var(--idu-spacing) 0 0;
	border-top: 1px solid var(--idu-listings-line-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--idu-spacing-2);
}

.idu-single .idu-keyfact {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	background: transparent;
	border: 1px solid var(--idu-listings-cream);
	padding: 10px 20px;
	border-radius: var(--idu-listings-radius-pill);
	font-size: 14px;
    font-weight: 500;
    /* line-height: 123.725%;  */
    letter-spacing: -0.14px;
	color: var(--idu-listings-muted);
}

@media (max-width: 600px) {
    .idu-single .idu-keyfacts {
        display: flex;
        flex-wrap: wrap;
        margin: var(--idu-spacing-3) -15px 0;
        gap: 0;
    }
    .idu-single .idu-keyfact {
        padding: 5px 15px;
        gap: var(--idu-spacing-2);
        border: none;
    }
}

/* Seller card */
.idu-single .idu-seller-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--idu-spacing-2);
    margin-top: var(--idu-spacing);
    border-radius: var(--idu-listings-radius);
    border: 1px solid var(--idu-listings-line);
    background: rgba(217, 219, 210, 0.15);
    padding: var(--idu-spacing);
}

.idu-single .idu-seller-head {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1 1 auto;
	min-width: 0;
}

.idu-single .idu-seller-card .idu-message-login {
	flex: 0 0 auto;
}

.idu-single .idu-seller-card .idu-message-seller {
	flex: 1 1 100%;
    margin-block: 0;
}

.idu-single .idu-seller-avatar img {
	width: 56px;
	height: 56px;
	border-radius: var(--idu-listings-radius-pill);
	object-fit: cover;
	display: block;
}

.idu-single .idu-seller-meta {
	display: flex;
	flex-direction: column;
}

.idu-single .idu-seller-label {
    font-size: 14px;
    line-height: 22px; /* 157.143% */
    letter-spacing: -0.14px;
	color: var(--idu-listings-ink);
}

.idu-single .idu-seller-name {
	color: var(--idu-listings-ink);
	text-decoration: none;
	font-size: 16px;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.16px;
}

.idu-single .idu-seller-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.idu-single .idu-seller-name-row .idu-verified-ico {
	width: 16px;
	height: 16px;
}

@media (max-width: 600px) {
    .idu-single .idu-seller-card {
        padding: var(--idu-spacing-3);
    }
    .idu-single .idu-seller-card {
        gap: var(--idu-spacing-3);
    }


    .idu-single .idu-seller-head {
        gap: 15px;
    }
    .idu-single .idu-seller-avatar img {
        width: 50px;
        height: 50px;
    }
}

/* Social share row - third section of .idu-sidebar-top, below the seller card */
.idu-single .idu-share-card {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
    margin-top: var(--idu-spacing);
}

.idu-single .idu-share-title {
	display: block;
	font-size: 16px;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.16px;
	color: var(--idu-listings-green);
}

.idu-single .idu-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.idu-single .idu-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: var(--idu-listings-radius-pill);
	border: 1px solid var(--idu-listings-line);
	/* background: #95ada4; */
	color: var(--idu-listings-ink);
	cursor: pointer;
	text-decoration: none;
    transition: transform 0.4s ease;
}

.idu-single .idu-share:hover {
	background: var(--idu-listings-accent);
	border-color: var(--idu-listings-accent);
    transform: scale(1.1);
}

.idu-single .idu-share .idu-ico {
	color: inherit;
    width: 23px;
    height: 23px;
}


.idu-single .idu-panel {
	background: var(--idu-listings-white);
	border: 1px solid var(--idu-listings-line);
	border-radius: var(--idu-listings-radius);
	padding: var(--idu-spacing);
}

@media ( max-width: 600px ) {
	.idu-single .idu-panel {
		padding: var(--idu-spacing-3);
	}
}

/* Section title */
.idu-single .idu-section-title {
	margin: 28px 0 12px;
	font-size: var(--idu-listings-h4);
    font-weight: 500;
    line-height: 33px; /* 143.478% */
    letter-spacing: -0.23px;
    color: var(--idu-listings-ink);
    margin-bottom: var(--idu-spacing);
}

.idu-single .idu-panel .idu-section-title:first-child {
	margin-top: 0;
}
.idu-single .idu-panel  .idu-section-title:not(:first-child) {
    margin-bottom: 10px;
}

.idu-single .idu-desc {
	font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    color: var(--idu-listings-ink-2);
    padding-block: var(--idu-spacing-2);
    border-top: 1px solid var(--idu-listings-line-4);
}
.idu-single .idu-desc p {
    margin-bottom: 0;
}

.idu-single .idu-specs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.idu-single .idu-specs li {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 0;
	border-bottom: 1px solid var(--idu-listings-line-4);
	font-size: 14px;
    font-weight: 400;
    line-height: 123.725%; /* 17.321px */
    letter-spacing: -0.14px;
}
.idu-single .idu-specs li:last-child {
    border-bottom: none;
}

.idu-single .idu-spec-label {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	color: var(--idu-listings-muted);
}

.idu-single .idu-spec-value {
	text-align: right;
    font-size: 16px;
    font-weight: 500;
    line-height: 123.725%; /* 19.796px */
    letter-spacing: -0.16px;
    color: var(--idu-listings-ink);
}

.idu-single .idu-specs .idu-ico {
	color: var(--idu-listings-accent);
}

/* Property features checklist (room listings) */
.idu-single .idu-features {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px 20px;
}

@media ( min-width: 600px ) {
	.idu-single .idu-features {
		grid-template-columns: repeat( 3, 1fr );
	}
    .idu-single .idu-panel .idu-section-title {
        margin-bottom: 15px;
    }
}

.idu-single .idu-feature {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.95rem;
}

.idu-single .idu-feature .idu-ico {
	color: var(--idu-listings-accent);
	flex-shrink: 0;
}

.idu-single .idu-feature span {
	color: var(--idu-listings-ink);
}

.idu-single .idu-map {
	border-radius: var(--idu-listings-radius);
	overflow: hidden;
	border: 1px solid var(--idu-listings-line);
	line-height: 0;
}

.idu-single .idu-map iframe {
	display: block;
	width: 100%;
}

/* Related listings ("More Cars" etc - the card grid itself is shared, see idu-listings.css) */
.idu-single .idu-related {
	margin-top: var(--idu-spacing);
	border-top: 1px solid var(--idu-listings-line);
	padding: 40px;
    background: var(--idu-listings-white);
    border: 1px solid var(--idu-listings-line);
    border-radius: var(--idu-listings-radius);
}

.idu-single .idu-related-title {
	margin: 0 0 var(--idu-spacing);
	font-size: var(--idu-listings-h2);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.72px;
}

@media (max-width: 600px) {
    .idu-single .idu-related {
        padding: var(--idu-spacing) var(--idu-spacing-3);
    }
}

/* Breadcrumbs */
.idu-single .idu-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 16px;
    font-weight: 400;
    line-height: 123.725%; /* 19.796px */
    letter-spacing: -0.16px;
	color: var(--idu-listings-ink-2);
	margin-bottom: var(--idu-spacing);
}

.idu-single .idu-breadcrumbs a {
	color: var(--idu-listings-muted);
	text-decoration: none;
}

.idu-single .idu-breadcrumbs a:hover {
	color: var(--idu-listings-accent);
}

.idu-single .idu-bc-sep {
	color: #dadcdb;
}

.idu-single .idu-bc-current {
	color: var(--idu-listings-ink-2);
	font-weight: 500;
}

@media (max-width: 600px) {
    .idu-single .idu-breadcrumbs {
        font-size: 12px;
        letter-spacing: -0.16px;
        margin-bottom: 16px;
    }
}

/* Message-seller inline form */
.idu-single .idu-message-seller { 
    display: flex; 
    flex-direction: column; 
    gap: var(--idu-spacing-2); 
    margin-top: 6px; 
}
.idu-single .idu-message-label { 
    color: var(--idu-listings-ink);
	font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.32px;
    margin-bottom: 0;
}
.idu-single .idu-message-text { 
    width: 100%; 
    min-height: 88px; 
    padding: 12px 20px;
	border: 1px solid var(--idu-listings-line);
	border-radius: var(--idu-listings-radius);
	background: var(--idu-listings-white);
    font-size: 14px; 
    line-height: 22px; /* 157.143% */
    letter-spacing: -0.14px;
    resize: vertical; 
    box-sizing: border-box; 
}
.idu-single .idu-message-text:focus { 
    outline: 0;
    background-color: var(--bb-content-background-color);
    box-shadow: var(--bb-input-focus-shadow);
    border-color: var(--bb-input-focus-border-color);
}
.idu-single .idu-message-text:disabled { 
    background: #f5f6f7; 
}
.idu-single .idu-message-send.idu-btn { 
    width: 100%; 
    justify-content: center; 
    padding: 14px 23px;
}
.idu-single .idu-message-status {
    margin: 0; 
    font-size: 13px; 
    line-height: 1.5; 
}
.idu-single .idu-message-status:empty { 
    display: none; 
}
.idu-single .idu-message-status.is-sending { 
    color: var(--bb-alternate-text-color, #787f86); 
}
.idu-single .idu-message-status.is-success { 
    color: #1a7f5a; 
}
.idu-single .idu-message-status.is-success a { 
    color: var(--bb-primary-color); 
    font-weight: 600; 
}
.idu-single .idu-message-status.is-error { 
    color: #c0392b; 
}
.idu-single .idu-message-seller.is-sent .idu-message-send {
    opacity: .6; 
    pointer-events: none; 
}

/* Message-seller T&C checkbox */
.idu-single .idu-message-terms { 
    display: flex; 
    align-items: flex-start; 
    gap: 15px; 
    font-size: 13px; 
    line-height: normal;
    color: var(--idu-listings-muted); 
    cursor: pointer; 
}
.idu-single .idu-message-terms-cb {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--idu-listings-line);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.idu-single .idu-message-terms-cb:checked {
	background-color: var(--idu-listings-accent);
	border-color: var(--idu-listings-accent);
}

.idu-single .idu-message-terms-cb:checked::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 11px;
	height: 11px;
	background-color: var(--idu-listings-ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.idu-single .idu-message-terms a { 
    color: var(--idu-listings-accent); 
    font-weight: 500; 
    transition: color 0.15s ease;
}
.idu-single .idu-message-terms a:hover { 
    color: var(--idu-listings-ink); 
}

@media (max-width: 600px) {
    .idu-single .idu-message-seller {
        gap: var(--idu-spacing-3);
    }
}