.dropcap-mini {
	float: left;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	margin: 5px 15px 0 0;
}

.dropcap-text {
	padding: 10px;
	white-space: nowrap;
	font-size: 14px;
}

.box {
	max-width: 720px;
	padding: 0 70px !important;
}

/* Villa Uhland CSS */

.vu-year {
	margin: 1px;
}

.vu-magnifier {
	position: absolute;
	background: white;
	padding: 18px 18px;
	margin: 1px;
	border: thin;
}

.vu-responsive-img {
	width: 100%;
	height: auto;
	display: block;
}

.vu-img-mobile { padding: 50px 0px; }
.vu-mobile-only { display: none; }

.vu-box-banner-img { width: 700px; }

.vu-flag {
	width: 20px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.08);
	object-fit: cover;
}

/* Phone numbers must never break to a second line, anywhere. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Keep the contact strip pinned to the top while the page scrolls.
   We use position:fixed (instead of sticky) because body has
   display:flex / height:100% in skin-red.css, which can disable
   CSS sticky. body gets an initial padding-top here so content is
   never hidden under the topBar before main.js fine-tunes it. */
body {
	padding-top: 42px;
}

.topBar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1031;
	/* Promote to its own compositor layer so MIUI/Android Chrome
	   don't repaint the bar each scroll tick while the URL bar
	   collapses — without this, the bar jiggles on Xiaomi devices. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.topBar ul.topBarNav li ul.w-150 li a {
	white-space: nowrap;
	padding-left: 12px;
	padding-right: 12px;
}

/* Feature list: icon + text rows that align on every viewport */
.vu-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
}

.vu-feature {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	line-height: 1.4;
}

.vu-feature .dropcap-mini {
	float: none;
	flex: 0 0 30px;
	margin: 0 14px 0 0;
}

.vu-feature .dropcap-text {
	flex: 1;
	padding: 0;
	white-space: normal;
	font-size: 14px;
}

@media screen and (max-width: 991px) {

	.breadcrumbs,
	.vu-desktop-only {
		display: none !important;
	}

	.topBar .vu-contact-info {
		float: left;
		margin: 0;
	}

	.topBar .vu-contact-info > li {
		display: inline-block;
		padding: 0 8px 0 0;
		font-size: 12px;
		line-height: 38px;
	}

	.topBar .vu-contact-info > li a {
		display: inline !important;
	}

	.vu-mobile-only { display: block; }
	.vu-box { padding: 70px 20px 100px !important; }

	.vu-box-banner-img { width: 347px; }

	/* On mobile the Swiper carousel is converted to a plain stacked list.
	   Fighting Swiper's flex/transform layout was unreliable; stacking is
	   simpler and gives a better mobile UX. */
	.swiper-container.swiper-coverflow {
		height: auto !important;
		overflow: visible !important;
	}

	.swiper-container.swiper-coverflow .swiper-wrapper {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-slide {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		flex-shrink: 1 !important;
		margin: 0 0 8px !important;
		text-align: left !important;
		position: relative !important;
		left: 0 !important;
	}

	.swiper-container.swiper-coverflow .slider-content {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 20px 0 24px !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box:not(.vu-desktop-only) {
		display: block !important;
		width: 100% !important;
		max-width: 640px !important;
		margin: 0 auto !important;
		padding: 4px 22px !important;
		text-align: left !important;
		vertical-align: baseline !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box.vu-desktop-only {
		display: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-button-prev,
	.swiper-container.swiper-coverflow .swiper-button-next,
	.swiper-container.swiper-coverflow .swiper-pagination {
		display: none !important;
	}

	.swiper-container.swiper-coverflow h2.thin {
		margin-top: 0;
	}

	.swiper-container.swiper-coverflow .meta-info {
		margin: 4px 0 14px;
	}

	.swiper-container.swiper-coverflow .btn {
		margin-top: 8px;
	}

	.vu-img-mobile {
		padding: 18px 0 8px;
		max-width: 100%;
	}

	.vu-img-mobile .vu-responsive-img {
		max-width: 100%;
		height: auto;
	}

	.vu-img-mobile .vu-magnifier {
		display: none;
	}

	.vu-feature {
		margin-bottom: 8px;
	}
}

@media screen and (max-width: 480px) {

	.swiper-container .swiper-slide .slider-content .box {
		padding: 8px 16px !important;
	}

	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}

	.vu-feature .dropcap-mini {
		flex: 0 0 28px;
		height: 28px;
		width: 28px;
		line-height: 28px;
		margin-right: 12px;
	}

	.vu-feature .dropcap-text {
		font-size: 13px;
	}

	.topBar .vu-contact-info > li {
		font-size: 11px;
		padding-right: 6px;
		line-height: 36px;
	}
}

/* Swiper slide content (left text-box + right photo-box) has top/bottom padding of 0 in the skin,
   so the photo on the right side touches the top and bottom edges of the slider. Add vertical
   breathing room on desktop. */
@media (min-width: 767px) {
	.swiper-container .swiper-slide .slider-content .box {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* skin-red.css makes <body> a fixed-height flex column (html, body { height: 100% } +
   display: flex). A direct body child with overflow: hidden — the Swiper container — has no
   automatic flex minimum size, so the browser crushes it to 0 px to make the column fit the
   viewport, and the whole slider disappears. Content children of body must never flex-shrink;
   the page scrolls instead. */
body > * {
	flex-shrink: 0;
}

/* The skin hardcodes .swiper-container { height: 700px }, which clips content on small monitors
   and after we made the slide taller (new See Photos button + vertical padding). Make the slider
   grow with content: 600px minimum on the slide itself, no upper cap. Paired with autoHeight:true
   in the Swiper init so slide positions recompute when heights change.

   The min-height sits on the SLIDE (not the container) so the slide's flex centering
   (align-items: center, already from the skin) has a frame to vertically centre its content within
   when the content is shorter than 600px. Putting min-height on the container would let the slide
   shrink to content and the slide content would slide to the top of the container instead. */
.swiper-container {
	height: auto !important;
	background-color: #e1e6e6;
}
.swiper-container .swiper-slide {
	height: auto !important;
	min-height: 600px;
}
.swiper-container .swiper-slide .slider-content {
	height: auto !important;
}

/* The slider's grey band stays full-bleed, but the CONTENT inside the slides must line up with
   the same centered column as header, text sections and footer (Bootstrap .container widths).
   The skin used fixed paddings instead, and the global `.box { padding: 0 70px !important }`
   above forces 70px — so the paddings here need !important too.
   The photo cell gets the larger share (55%) so the picture stays prominent inside the column,
   and the prev/next arrows sit right next to the content column instead of at the screen edge. */
@media (min-width: 768px) {
	.swiper-container .swiper-slide .slider-content {
		width: 750px;
		margin-left: auto;
		margin-right: auto;
	}
	.swiper-container .swiper-slide .slider-content .box {
		padding: 40px 15px !important;
	}
	.swiper-container .swiper-slide .slider-content .box.vu-desktop-only {
		width: 55%;
	}
	.swiper-container .swiper-button-prev { left: max(10px, calc(50% - 435px)); }
	.swiper-container .swiper-button-next { right: max(10px, calc(50% - 435px)); }
}
@media (min-width: 992px) {
	.swiper-container .swiper-slide .slider-content {
		width: 970px;
	}
	.swiper-container .swiper-button-prev { left: calc(50% - 545px); }
	.swiper-container .swiper-button-next { right: calc(50% - 545px); }
}
@media (min-width: 1200px) {
	.swiper-container .swiper-slide .slider-content {
		width: 1170px;
	}
	.swiper-container .swiper-button-prev { left: calc(50% - 645px); }
	.swiper-container .swiper-button-next { right: calc(50% - 645px); }
}

/* "See Photos" secondary button on apartment slides — sits next to the primary "Make a reservation"
   button. Add a small left gap so the two buttons don't touch, and stack vertically on small screens. */
.vu-btn-photos {
	margin-left: 8px;
}
@media (max-width: 480px) {
	.vu-btn-photos {
		margin-left: 0;
		margin-top: 8px;
		display: inline-block;
	}
}

/* Footer partner link: give it a visible dotted underline so it reads as a
   link against the dark footer (the skin renders footer links without one). */
.vu-partner-link {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.vu-partner-link:hover,
.vu-partner-link:focus {
	text-decoration: underline solid;
}

/* Desktop: give the Apartments mega-dropdown more vertical breathing room
   so the two stacked sections (Photos + Apartments at Airbnb) don't feel cramped. */
@media (min-width: 767px) {
	.yamm li .dropdown-menu .yamm-content {
		padding-top: 45px !important;
		padding-bottom: 45px !important;
		min-height: 480px;
	}
	.yamm li .dropdown-menu .yamm-content ul li a {
		padding: 11px 0 !important;
	}
	.yamm li .dropdown-menu .yamm-content ul li.title {
		margin: 12px 0 !important;
	}
}

/* FAQ page: native <details>/<summary> accordion (replaces the old Bootstrap
   collapse markup that needed JS). Multiple items may stay open at once.
   Mirrors the skin's .accordion.style1 look: a FontAwesome plus-circle marker
   (grey, closed) that flips to a minus-circle (red, open) and the heading text
   that brightens when expanded. */
.faq-accordion {
	margin-bottom: 20px;
}

/* Section separators (faq.h4.1 … faq.h4.5) between question groups. */
.faq-accordion .faq-group {
	margin: 28px 0 6px;
}

.faq-item {
	border: none;
	margin: 0;
}

.faq-item > summary {
	display: block; /* also suppresses the native disclosure triangle in most browsers */
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 5px 0 5px 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #878c94; /* closed */
	outline: 0;
}

/* WebKit/Blink legacy marker. */
.faq-item > summary::-webkit-details-marker {
	display: none;
}

.faq-item > summary::before {
	font-family: FontAwesome;
	content: "\f055"; /* plus-circle, closed */
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 24px;
	line-height: 1;
	color: #878c94;
}

.faq-item[open] > summary {
	color: #35404f; /* open */
}

.faq-item[open] > summary::before {
	content: "\f056"; /* minus-circle, open */
	color: #e63e2d;
}

.faq-item .faq-body {
	padding: 5px 0 12px 30px; /* align body under the question text */
}

/* Villa Uhland logo at the foot of the FAQ page (below the accordion), on its own
   line and right-aligned. display:block + margin-left:auto right-aligns it without
   floating. Original size (width="400") on desktop; scales down only when the
   screen is narrower than the image. */
.vu-faq-logo {
	display: block;
	margin: 0 0 14px auto;
	max-width: 100%;
	height: auto;
}

/* Footer: align column content flush with the headings above it. The skin gives
   .social-icons li a a 10px left margin (spacing between icons) which also pushes
   the first icon off the edge, and .list/.alt-list indent the link list ~27px. */
.footer .social-icons li:first-child a {
	margin-left: 0;
}
.footer ul.list.alt-list {
	padding-left: 10px; /* angle icons sit at li -18px; 10 + 8 - 18 = 0 = heading edge */
}

/* The footer's top row uses .icon-boxes.style1: an icon at the column's left edge with
   the text pushed 70px to the right (.box-content margin-left). The second row has no
   icon, so its text would start 70px further left and not line up with the row above.
   Indent the second row's content by the same 70px so both rows' text align vertically. */
.footer .vu-footer-indent > *:not(.icon-boxes) {
	margin-left: 70px;
}

/* Address row: a big location pin in the 70px left gutter, vertically centered on the
   address, with the text starting at 70px like the other footer columns. The skin's
   icon-box positions the icon absolutely (top-aligned, finicky for a single line), so
   here we override it with flexbox — align-items:center reliably centers the pin on the
   address whether it is one line or two. Scoped to .vu-address-box so the multi-line
   icon-boxes in the row above keep their original layout. */
.footer .vu-address-box {
	display: flex;
	align-items: center;
}
.footer .vu-address-box .icon {
	position: static;
	flex: 0 0 70px;
	display: flex;
	align-items: center;
	padding-left: 8px;
	transform: none;
	-webkit-transform: none;
}
/* Restore the skin's "jump up on hover" — the skin does it with top:-5px, which no longer
   works now the icon is position:static; use a transform instead (the skin's transition
   on .icon animates it). */
.footer .vu-address-box:hover .icon {
	transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
}
.footer .vu-address-box .box-content {
	margin-left: 0;
	flex: 1;
}
.footer .vu-address-box .box-content p {
	margin-bottom: 0;
}