@charset "UTF-8";
/*!
Theme Name: Villagio Child
Theme URI: https://motopress.com/products/villagio/
Author: MotoPress
Author URI: https://motopress.com/
Description: WordPress photography theme.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villagio
Tags:one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Template: villagio
*/

/* =============================================================================
   Typography — Airbnb style (Nunito Sans + Airbnb parameters)
   ============================================================================= */

:root {
	--font-primary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--color-text: #222222;
	--color-text-secondary: #717171;
}

/* --- Base body ------------------------------------------------------------ */
body,
body.custom-background {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- Headings ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title,
.widget-title {
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.15;
}

h1, .entry-title { font-size: 26px; line-height: 30px; }
h2 { font-size: 22px; line-height: 26px; }
h3 { font-size: 16px; line-height: 20px; }
h4 { font-size: 16px; line-height: 20px; }
h5 { font-size: 14px; line-height: 18px; }
h6 { font-size: 12px; line-height: 16px; }

@media screen and (min-width: 768px) {
	h1, .entry-title { font-size: 26px; line-height: 30px; }
	h2 { font-size: 22px; line-height: 26px; }
}

/* --- Inputs, buttons, selects — font + rounded corners -------------------- */
input,
textarea,
select,
button,
.button,
input[type="submit"],
input[type="button"],
.mphb-book-button,
.mphb_sc_search-submit-button-wrapper .mphb-reserve-btn {
	font-family: var(--font-primary);
	border-radius: 8px;
}

/* Datepicker inputs — nadpisanie specyficznego selektora z Hotel Booking */
input[type="text"].mphb-datepick.is-datepick,
input.mphb_datepicker {
	border-radius: 8px !important;
}

button,
.button,
input[type="submit"],
input[type="button"],
.mphb-book-button,
.mphb_sc_search-submit-button-wrapper .mphb-reserve-btn {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	border-radius: 8px;
}

/* --- Hotel Booking specific — font only ----------------------------------- */
.mphb-room-type-title,
.mphb-service-title {
	font-family: var(--font-primary);
	font-weight: 600;
}

.mphb-price,
.mphb-regular-price,
.mphb-price-period {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
}

.mphb-room-type-description,
.mphb-single-room-type-attributes {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 24px;
}

/* --- Small metadata text -------------------------------------------------- */
.entry-meta,
.entry-footer,
.comment-metadata,
.posted-on,
.byline,
.cat-links,
.tags-links,
.comments-link,
.edit-link,
.nav-links {
	font-size: 14px;
	line-height: 18px;
	color: var(--color-text-secondary);
}

/* --- Navigation / menus --------------------------------------------------- */
.main-navigation,
.main-navigation a,
.main-navigation .menu-item a {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer,
.site-footer a {
	font-family: var(--font-primary);
}

/* --- Widget areas --------------------------------------------------------- */
.widget,
.widget a {
	font-family: var(--font-primary);
}

.widget-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

/* --- Override any remaining Lato declarations ------------------------------ */
.site-header,
.site-header a,
.site-branding,
.entry-content,
.comment-content,
.post-navigation,
blockquote {
	font-family: var(--font-primary);
}

/* =============================================================================
   Facilities / Amenities — Airbnb-style: large clean icons, no chrome
   Paleta marki: #013748 (granat) / #cce8ee (akcent) / #1eb8c2 (hover)
   ============================================================================= */

/* Single page — pełna lista z labelami (grid 2 kolumny na desktop) */
.mad-facilities--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 32px;
	margin: 24px 0;
}

.mad-facilities--grid .mad-facility-item {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--color-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	transition: color 0.2s;
}

.mad-facilities--grid .mad-facility-item:hover {
	background: transparent;
	color: #1eb8c2;
	text-decoration: none;
}

.mad-facilities--grid .mad-facility-item:hover .facility-icon {
	color: #1eb8c2;
}

.mad-facilities--grid .facility-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	color: #013748;
	transition: color 0.2s;
}

/* Compact mode — inline w tekście */
.mad-facilities--compact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 10px 0;
}

.mad-facilities--compact .mad-facility-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: 14px;
	line-height: 18px;
}

.mad-facilities--compact .mad-facility-item:hover {
	color: #1eb8c2;
	text-decoration: none;
}

.mad-facilities--compact .facility-icon {
	flex-shrink: 0;
}

/* Icons-only mode — kafelki strony głównej (sama ikona + tooltip) */
.mad-facilities--icons-only {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 12px 0;
}

.mad-facilities--icons-only .mad-facility-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 2px;
	border-radius: 0;
	background: transparent;
	border: 0;
	cursor: default;
	position: relative;
	color: #013748;
	transition: color 0.2s;
}

.mad-facilities--icons-only .mad-facility-icon .facility-icon {
	width: 38px;
	height: 38px;
}

.mad-facilities--icons-only .mad-facility-icon:hover {
	background: transparent;
	color: #1eb8c2;
}

/* Tooltip on hover */
.mad-facilities--icons-only .mad-facility-icon::after {
	content: attr(title);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #011f26;
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	padding: 5px 9px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
	z-index: 10;
}

.mad-facilities--icons-only .mad-facility-icon:hover::after {
	opacity: 1;
}

@media screen and (max-width: 767px) {
	.mad-facilities--icons-only {
		gap: 14px;
	}
	.mad-facilities--icons-only .mad-facility-icon .facility-icon {
		width: 32px;
		height: 32px;
	}
	.mad-facilities--grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.mad-facilities--grid .facility-icon {
		width: 30px;
		height: 30px;
	}
	.mad-facilities--grid .mad-facility-item {
		font-size: 14px;
		gap: 14px;
	}
}

.mphb-room-type-facilities .mphb-attribute-value > span + span::before {
	content: none;
}

/* =============================================================================
   Hero Slider — Airbnb-style full-width na stronie głównej (Swiper.js)
   9 zdjęć Martyniki, fade transition, autoplay 5s, dots + arrows
   ============================================================================= */

.mad-hero-slider-wrap {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto 32px;
	overflow: hidden;
	background: #011f26;
}

.mad-hero-slider {
	width: 100%;
	aspect-ratio: 1920 / 800;
	max-height: 800px;
}

.mad-hero-slider .swiper-slide {
	overflow: hidden;
}

.mad-hero-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Pagination (dots) — eleganckie, na dole */
.mad-hero-slider .mad-hero-pagination {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
}

.mad-hero-slider .mad-hero-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.3s, transform 0.3s, width 0.3s;
	margin: 0;
}

.mad-hero-slider .mad-hero-pagination .swiper-pagination-bullet-active {
	background: #fff;
	width: 30px;
	border-radius: 5px;
}

/* Navigation (arrows) — subtelne, hidden na mobile */
.mad-hero-slider .swiper-button-prev,
.mad-hero-slider .swiper-button-next {
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 0;
	border-radius: 50%;
	color: #fff;
	transition: background 0.2s;
	cursor: pointer;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
}

.mad-hero-slider .swiper-button-prev {
	left: 32px;
}

.mad-hero-slider .swiper-button-next {
	right: 32px;
}

.mad-hero-slider .swiper-button-prev:hover,
.mad-hero-slider .swiper-button-next:hover {
	background: rgba(255, 255, 255, 0.35);
}

.mad-hero-slider .swiper-button-prev::after,
.mad-hero-slider .swiper-button-next::after {
	font-size: 18px;
	font-weight: 700;
}

/* Mobile: kwadrat 1:1 zamiast płaskiego 1920×800 ("znaczek pocztowy").
   Poziome zdjęcia są przycinane przez object-fit:cover do środka kadru. */
@media screen and (max-width: 767px) {
	.mad-hero-slider {
		aspect-ratio: 1 / 1;
		max-height: none;
	}
	.mad-hero-slider .swiper-button-prev,
	.mad-hero-slider .swiper-button-next {
		display: none;
	}
	.mad-hero-slider .mad-hero-pagination {
		bottom: 12px;
	}
	.mad-hero-slider-wrap {
		margin-bottom: 20px;
	}
}

/* =============================================================================
   Highlights Bar — Airbnb-style summary pod tytułem (loop card)
   ============================================================================= */

.mad-highlights-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin: 12px 0 16px;
	padding: 10px 0;
	border-bottom: 1px solid #e8eaed;
}

.mad-highlight-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #013748;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.mad-highlight-item .facility-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: #013748;
}

.mad-highlight-label {
	white-space: nowrap;
}

@media screen and (max-width: 767px) {
	.mad-highlights-bar {
		gap: 10px 16px;
		padding: 10px 0;
	}
	.mad-highlight-item {
		font-size: 13px;
	}
	.mad-highlight-item .facility-icon {
		width: 22px;
		height: 22px;
	}
}

/* Ukryj Villagio FontAwesome :before na WSZYSTKICH wariantach loop attributes */
.mphb-loop-room-type-attributes li:before,
.mphb-loop-room-type-attributes li:after {
	content: none !important;
	display: none !important;
	padding-right: 0 !important;
	width: 0 !important;
	border: 0 !important;
}

/* W loop card NIC nie pokazujemy z mphb-loop-room-type-attributes —
   highlights bar pod zdjęciem ma wszystko co potrzebne, pełna lista amenities
   dostępna dopiero na single page (selektor .mphb-single-room-type-attributes). */
.mphb-loop-room-type-attributes {
	display: none !important;
}

/* Wyłącz villagio flex/border hack dla mphb-loop-room-type-attributes */
.mphb_sc_rooms-wrapper.grid-view .mphb-loop-room-type-attributes:first-of-type,
.mphb_sc_rooms-wrapper.is-style-grid .mphb-loop-room-type-attributes:first-of-type {
	display: block !important;
	border-bottom: 0 !important;
}

/* =============================================================================
   Hover Wipe Effect — background slides in from left on title links
   ============================================================================= */

.entry-title a,
.mphb-room-type-title a,
.mphb-room-type-title,
.page-title a,
.widget-title a,
h2.entry-title a,
h1.entry-title a {
	display: inline;
	padding: 2px 6px;
	margin: -2px -6px;
	background-image: linear-gradient(#cce8ee, #cce8ee);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left center;
	transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none;
	border-radius: 3px;
}

.entry-title a:hover,
.mphb-room-type-title a:hover,
.mphb-room-type-title:hover,
.page-title a:hover,
.widget-title a:hover,
h2.entry-title a:hover,
h1.entry-title a:hover {
	background-size: 100% 100%;
	text-decoration: none;
}

/* Front page title — wipe effect on non-link heading */
.front-wrapper .entry-header {
	text-align: center;
}

.front-wrapper h1.entry-title {
	display: inline;
	padding: 2px 8px;
	margin: 0;
	background-image: linear-gradient(#cce8ee, #cce8ee);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left center;
	transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border-radius: 3px;
	cursor: default;
}

.front-wrapper h1.entry-title:hover {
	background-size: 100% 100%;
}

/* Reset on mouse leave — wipe retracts to left */
.entry-title a:not(:hover),
.mphb-room-type-title a:not(:hover),
.mphb-room-type-title:not(:hover),
.page-title a:not(:hover),
.widget-title a:not(:hover) {
	transition: background-size 0.5s cubic-bezier(0.55, 0.09, 0.68, 0.53);
}

/* =============================================================================
   Attribute Icons — SVG icons before existing MPHB detail labels
   ============================================================================= */

.mphb-single-room-type-attributes .mphb-attribute-title::before,
.mad-house-rule .mad-rule-label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: -3px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Adults */
.mphb-adults-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Children */
.mphb-children-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
}

/* Bed type */
.mphb-bed-type-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4v16'/%3E%3Cpath d='M2 8h18a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M2 17h20'/%3E%3Cpath d='M6 8v9'/%3E%3C/svg%3E");
}

/* Size */
.mphb-size-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}

/* View */
.mphb-view-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Categories */
.mphb-room-type-categories .mphb-attribute-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Facilities / Équipements */
.mphb-facilities-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E");
}

/* Total capacity */
.mphb-total-capacity-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* --- House rules icons (used via class on .mad-rule-label) --- */
.mad-rule-checkin .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.mad-rule-checkout .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.mad-rule-cancellation .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='10' y1='14' x2='14' y2='18'/%3E%3Cline x1='14' y1='14' x2='10' y2='18'/%3E%3C/svg%3E");
}

.mad-rule-deposit .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 12 15 16 10'/%3E%3C/svg%3E");
}

.mad-rule-children .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
}

.mad-rule-age .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='16 11 18 13 22 9'/%3E%3C/svg%3E");
}

.mad-rule-smoking .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3Cpath d='M18 12H6'/%3E%3C/svg%3E");
}

.mad-rule-pets .mad-rule-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013748' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E");
}

/* --- House rules list items styling --- */
.mad-house-rule {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.mad-rule-label {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
	color: var(--color-text);
}

.mad-rule-value {
	font-weight: 400;
}

/* =============================================================================
   Map — Leaflet / OpenStreetMap
   ============================================================================= */

.mad-map {
	width: 100%;
	min-height: 300px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	z-index: 1;
}

.mad-map-section {
	margin: 48px 0 16px;
}

.mad-map-heading {
	margin-bottom: 16px;
}

.mad-map-popup {
	font-family: var(--font-primary);
	max-width: 220px;
	line-height: 1.4;
}

.mad-map-popup-img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 8px;
}

.mad-map-popup-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 4px;
}

.mad-map-popup-link {
	display: inline-block;
	font-size: 13px;
	color: #1eb8c2;
	text-decoration: none;
	font-weight: 600;
	margin-top: 4px;
}

.mad-map-popup-link:hover {
	text-decoration: underline;
}

.mad-map .leaflet-control-attribution {
	font-size: 10px;
	opacity: 0.7;
}

@media screen and (max-width: 767px) {
	.mad-map {
		min-height: 250px;
		border-radius: 8px;
	}
}

/* =============================================================================
   Uniform image aspect ratio — grid/listing views
   Forces all accommodation thumbnails to the same 3:2 ratio
   ============================================================================= */

/* Front page + grid — uniform image height via fixed height on slides */
.page-template-template-front-page .mphb-room-type .flexslider .slides img,
.page-template-template-front-page .mphb-room-type .mphb-flexslider .slides img,
.page-template-template-front-page .mphb_room_type_featured_image_wrapper img,
.mphb_sc_rooms-wrapper .mphb-room-type .flexslider .slides img,
.mphb_sc_rooms-wrapper .mphb-room-type .mphb-flexslider .slides img,
.mphb_sc_rooms-wrapper .mphb_room_type_featured_image_wrapper img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center center;
	display: block;
}

@media screen and (min-width: 48em) {
	.page-template-template-front-page .mphb-room-type .flexslider .slides img,
	.page-template-template-front-page .mphb-room-type .mphb-flexslider .slides img,
	.page-template-template-front-page .mphb_room_type_featured_image_wrapper img,
	.mphb_sc_rooms-wrapper .mphb-room-type .flexslider .slides img,
	.mphb_sc_rooms-wrapper .mphb-room-type .mphb-flexslider .slides img,
	.mphb_sc_rooms-wrapper .mphb_room_type_featured_image_wrapper img {
		height: 300px;
	}
}

/* =============================================================================
   Image Hover Zoom — subtle scale on all images
   ============================================================================= */

.mphb-room-type-images,
.mphb-gallery,
.mphb-single-room-type-thumbnail,
.post-thumbnail,
.entry-thumbnail,
.wp-post-image-wrapper,
article .entry-content .wp-block-image,
.mphb-loop-room-type-thumbnail,
.flexslider .slides li,
.mphb-flexslider .slides li {
	overflow: hidden;
	border-radius: 12px;
}

/* Slider container — round outer corners, override hotel-booking + parent theme reset */
.flexslider,
.mphb-flexslider,
.mphb_room_type_featured_image_wrapper {
	border-radius: 12px !important;
	border: none !important;
	overflow: hidden;
}

/* Flex-viewport — wewnętrzny kontener slidera, musi też mieć zaokrąglenie */
.flex-viewport {
	border-radius: 12px;
	overflow: hidden;
}

/* Zdjęcia wewnątrz sliderów — zaokrąglenie na wszystkich rogach */
.flexslider .slides img,
.mphb-flexslider .slides img,
.mphb_room_type_featured_image_wrapper img {
	border-radius: 12px;
}

/* Miniaturki galerii na stronie apartamentu */
.mphb-gallery-thumbnail-img,
.attachment-villagio-thumb-small,
.mphb-room-type-images a img,
.mphb-gallery a img {
	border-radius: 12px;
}

/* Airbnb-style image enhancement — subtle brightness/contrast/saturation boost */
.mphb-room-type-images img,
.mphb-gallery img,
.mphb-single-room-type-thumbnail img,
.mphb-loop-room-type-thumbnail img,
.mphb_room_type_featured_image_wrapper img,
.post-thumbnail img,
.entry-thumbnail img,
article .wp-post-image,
article .entry-content .wp-block-image img,
.flexslider .slides img,
.mphb-flexslider .slides img {
	filter: brightness(1.03) contrast(1.06) saturate(1.12);
}

.mphb-room-type-images img,
.mphb-gallery img,
.mphb-single-room-type-thumbnail img,
.post-thumbnail img,
.entry-thumbnail img,
article .wp-post-image,
article .entry-content .wp-block-image img,
.mphb-loop-room-type-thumbnail img,
.flexslider .slides img,
.mphb-flexslider .slides img {
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.mphb-room-type-images:hover img,
.mphb-gallery:hover img,
.mphb-single-room-type-thumbnail:hover img,
.post-thumbnail:hover img,
.entry-thumbnail:hover img,
article:hover .wp-post-image,
article .entry-content .wp-block-image:hover img,
.mphb-loop-room-type-thumbnail:hover img,
.flexslider .slides li:hover img,
.mphb-flexslider .slides li:hover img {
	transform: scale(1.05);
}

.mad-map-popup img,
.leaflet-popup img {
	transition: none;
}
.mad-map-popup:hover img,
.leaflet-popup:hover img {
	transform: none;
}

/* =============================================================================
   Smooth scrolling
   ============================================================================= */

html {
	scroll-behavior: smooth;
}


/* Remove dark overlay from Getwid post slider */
.wp-block-getwid-post-slider__post-overlay {
	background-color: transparent !important;
	opacity: 0 !important;
}

/* =============================================================================
   Post Slider — content repositioned to bottom-left, Airbnb style
   ============================================================================= */

/* Content wrapper — bottom-left instead of centered */
.wp-block-getwid-post-slider__post-content-wrapper {
	position: absolute !important;
	bottom: 24px !important;
	left: 24px !important;
	right: auto !important;
	top: auto !important;
	max-width: 70% !important;
	text-align: left !important;
	z-index: 2;
}

/* Title — large, with hover wipe background */
.wp-block-getwid-post-slider .wp-block-getwid-post-slider__post-title {
	font-family: var(--font-primary) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin: 0 0 8px !important;
	color: #222222 !important;
}

.wp-block-getwid-post-slider .wp-block-getwid-post-slider__post-title a {
	color: #222222 !important;
	text-decoration: none !important;
	display: inline;
	padding: 4px 10px;
	background-color: #cce8ee;
	border-radius: 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Excerpt — permanent background, always readable on photo */
.wp-block-getwid-post-slider__post-excerpt {
	color: #222222 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	margin: 0 !important;
}

.wp-block-getwid-post-slider__post-excerpt p {
	display: inline;
	padding: 3px 8px;
	background-color: #cce8ee;
	border-radius: 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Responsive */
@media screen and (max-width: 767px) {
	.wp-block-getwid-post-slider__post-content-wrapper {
		bottom: 16px !important;
		left: 16px !important;
		max-width: 85% !important;
	}

	.wp-block-getwid-post-slider .wp-block-getwid-post-slider__post-title {
		font-size: 20px !important;
	}

	.wp-block-getwid-post-slider__post-excerpt {
		font-size: 13px !important;
	}
}

/* =============================================================================
   Header image — remove dark overlay from parent theme
   ============================================================================= */

body.single .site-content > .entry-header:before,
body.page .site-content > .entry-header:before {
	background: transparent !important;
}

/* =============================================================================
   Availability Calendar — Airbnb style (exact dimensions from Airbnb source)
   Cells: 42×42px, border-spacing: 0 2px, no borders/lines anywhere
   ============================================================================= */

/* --- Main container — full width, no border ------------------------------ */
.mphb-calendar.mphb-datepick {
	width: 100% !important;
	max-width: 100%;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--font-primary);
	box-shadow: none !important;
	overflow: visible;
}

.mphb-calendar .datepick,
.mphb-calendar.mphb-datepick .datepick {
	width: 100% !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* --- Navigation — prev/next arrows, no "today" link ---------------------- */
.mphb-calendar .datepick-nav,
.mphb-calendar .datepick-nav {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	padding: 0 4px 20px !important;
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
}

.mphb-calendar .datepick-nav a,
.mphb-calendar .datepick-nav a:link,
.mphb-calendar .datepick-nav a:visited {
	color: var(--color-text) !important;
	text-decoration: none !important;
	font-size: 14px;
	background: transparent !important;
}

.mphb-calendar .datepick-nav a.datepick-disabled {
	color: #b0b0b0 !important;
	opacity: 0.5;
}

/* Hide "Aujourd'hui" link */
.mphb-calendar .datepick-ctrl {
	display: none !important;
}

/* Arrow buttons — 32px circle, hover gray bg */
.mphb-calendar a.datepick-cmd,
.mphb-calendar .datepick-cmd-prev,
.mphb-calendar .datepick-cmd-next {
	background: transparent !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	cursor: pointer;
	padding: 0 !important;
}

.mphb-calendar .datepick-cmd-prev:hover,
.mphb-calendar .datepick-cmd-next:hover {
	background: #f0f0f0 !important;
}

.mphb-calendar .datepick-cmd-prev:before,
.mphb-calendar .datepick-cmd-next:before {
	font-size: 12px !important;
	color: var(--color-text) !important;
}

.mphb-calendar .datepick-nav a.datepick-disabled:before {
	color: #b0b0b0 !important;
}

/* --- Month row — 2 months, flex, gap ------------------------------------- */
.mphb-calendar .datepick-month-row {
	display: flex !important;
	gap: 26px;
	width: 100% !important;
}

.mphb-calendar .datepick-month {
	flex: 1 !important;
	padding: 0 13px !important;
	border: none !important;
	background: transparent !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}

.mphb-calendar .datepick-month + .datepick-month {
	border-left: none !important;
	margin-left: 0 !important;
}

.mphb-calendar .datepick-month.last {
	margin-right: 0 !important;
}

.mphb-calendar .datepick-month.first {
	margin-left: 0 !important;
}

/* --- Month header — centered, semi-bold ---------------------------------- */
.mphb-calendar .datepick-month-header,
.mphb-calendar .datepick-month-header select,
.mphb-calendar .datepick-month-header input {
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--color-text) !important;
	text-align: center !important;
	background: transparent !important;
	border: none !important;
	padding: 0 0 12px !important;
}

/* Hide month/year separators and other UI */
.mphb-calendar .datepick-month-header + .datepick-month-header {
	border: none !important;
}

/* --- Day of week headers (L, M, M, J, V, S, D) -------------------------- */
.mphb-calendar .datepick-month th,
.mphb-calendar .datepick-month th a {
	font-family: var(--font-primary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--color-text-secondary) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0 0 8px !important;
	text-align: center !important;
	background: transparent !important;
	border: none !important;
	width: calc(100% / 7);
}

/* --- Table — no borders, spacing like Airbnb ----------------------------- */
.mphb-calendar .datepick-month table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 2px !important;
	border: none !important;
	table-layout: fixed;
}

.mphb-calendar .datepick-month tbody {
	border: none !important;
}

/* --- Day cells — 42×42px like Airbnb ------------------------------------- */
.mphb-calendar .datepick-month td {
	padding: 0 !important;
	text-align: center !important;
	vertical-align: middle !important;
	border: none !important;
	background: transparent !important;
	width: calc(100% / 7);
}

.mphb-calendar .datepick-month td > a,
.mphb-calendar .datepick-month td > span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	margin: 0 auto !important;
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	border-radius: 50% !important;
	transition: background 0.15s, color 0.15s;
	text-decoration: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* --- Available dates — black, semi-bold ---------------------------------- */
.mphb-calendar.mphb-datepick .datepick-month td a,
.mphb-calendar.mphb-datepick .datepick-month td a:link {
	color: var(--color-text) !important;
	background: transparent !important;
	font-weight: 600 !important;
}

.mphb-calendar.mphb-datepick .datepick-month td a:hover {
	background: #f0f0f0 !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
}

.mphb-calendar.mphb-datepick .datepick-month td .mphb-available-date {
	color: var(--color-text) !important;
	font-weight: 600 !important;
	background: transparent !important;
}

.mphb-calendar.mphb-datepick .datepick-month td .mphb-available-date:hover {
	background: #f0f0f0 !important;
}

/* --- Past / blocked / booked dates — light gray, no strikethrough -------- */
.mphb-calendar.mphb-datepick .datepick-month td .mphb-past-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-earlier-min-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-later-max-date {
	color: #b0b0b0 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	background: transparent !important;
}

.mphb-calendar.mphb-datepick .datepick-month td .mphb-booked-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-not-available-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-mark-as-unavailable--check-in,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-mark-as-unavailable--check-out {
	color: #b0b0b0 !important;
	text-decoration: line-through !important;
	font-weight: 400 !important;
	background: transparent !important;
}

/* Disabled span (non-clickable dates) */
.mphb-calendar .datepick-month td span {
	color: #b0b0b0 !important;
	font-weight: 400 !important;
	background: transparent !important;
	cursor: default;
}

/* --- Weekend — same as weekday, no highlight ----------------------------- */
.mphb-calendar .datepick-month td .datepick-weekend,
.mphb-calendar .datepick-month td a.datepick-weekend {
	color: inherit !important;
	background: transparent !important;
}

/* --- Today — border circle ----------------------------------------------- */
.mphb-calendar .datepick-month td .datepick-today {
	font-weight: 700 !important;
	border: 2px solid var(--color-text) !important;
	border-radius: 50% !important;
	background: transparent !important;
}

/* --- Selected / highlighted — solid dark circle, white text -------------- */
.mphb-calendar .datepick-month td .datepick-selected,
.mphb-calendar .datepick-month td a.datepick-highlight {
	background: var(--color-text) !important;
	color: #fff !important;
	border-radius: 50% !important;
	font-weight: 600 !important;
}

/* --- Responsive — single column on mobile -------------------------------- */
@media screen and (max-width: 767px) {
	.mphb-calendar .datepick-month-row {
		flex-direction: column !important;
		gap: 24px;
	}

	.mphb-calendar .datepick-month td > a,
	.mphb-calendar .datepick-month td > span {
		width: 38px !important;
		height: 38px !important;
		font-size: 13px !important;
	}
}

/* =============================================================================
   Airbnb-style review carousel — [mad_reviews]
   ============================================================================= */

.page-template-template-front-page .mad-reviews-section {
	margin: 48px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

.mad-reviews-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 24px !important;
}

.mad-reviews-title {
	font-size: 22px !important;
	font-weight: 600 !important;
	margin: 0 !important;
}

.mad-reviews-nav {
	display: flex !important;
	gap: 8px !important;
}

.mad-reviews-prev,
.mad-reviews-next {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	border-radius: 50% !important;
	border: 1px solid #222 !important;
	background: #fff !important;
	font-size: 18px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: opacity 0.2s, background 0.2s !important;
}

.mad-reviews-prev:hover,
.mad-reviews-next:hover {
	background: #f7f7f7 !important;
}

.mad-reviews-viewport {
	overflow: hidden !important;
	width: 100% !important;
}

.mad-reviews-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.mad-review-card {
	min-width: calc((100% - 48px) / 3) !important;
	max-width: calc((100% - 48px) / 3) !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 12px !important;
	padding: 24px !important;
	background: #fff !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.mad-review-top {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
}

.mad-review-avatar {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	max-width: 48px !important;
	max-height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: #222 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.mad-review-avatar img {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	max-width: 48px !important;
	max-height: 48px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	filter: none !important;
	transform: none !important;
	transition: none !important;
}

.mad-review-avatar img:hover {
	transform: none !important;
}

.mad-review-initials {
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 600 !important;
}

.mad-review-meta {
	display: flex !important;
	flex-direction: column !important;
}

.mad-review-name {
	font-weight: 600 !important;
	font-size: 16px !important;
	color: var(--color-text) !important;
}

.mad-review-location {
	font-size: 14px !important;
	color: var(--color-text-secondary) !important;
}

.mad-review-rating {
	margin-bottom: 12px !important;
	font-size: 14px !important;
}

.mad-review-stars {
	color: var(--color-text) !important;
	letter-spacing: 1px !important;
}

.mad-review-date {
	color: var(--color-text-secondary) !important;
}

.mad-review-text {
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--color-text) !important;
	margin: 0 !important;
}

.mad-review-expand {
	display: inline !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	color: var(--color-text) !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.5 !important;
}

.mad-review-expand:hover {
	color: #000 !important;
}

.mad-reviews-source {
	text-align: center !important;
	font-size: 13px !important;
	color: var(--color-text-secondary) !important;
	margin-top: 16px !important;
	font-style: italic !important;
}

@media screen and (max-width: 1023px) {
	.mad-review-card {
		min-width: calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
}

@media screen and (max-width: 767px) {
	.mad-review-card {
		min-width: 100% !important;
		max-width: 100% !important;
	}
	.mad-reviews-viewport {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
	}
	.mad-review-card {
		scroll-snap-align: start;
	}
}