.lucide {
	width: 1em;
	height: 1em;
	stroke-width: 1.75;
	vertical-align: -0.125em;
}

:root,
[data-bs-theme="light"] {
	--bs-font-sans-serif: "Geist", Inter, Helvetica, sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-font-display: "Fraunces", Georgia, serif;
	--bs-primary: #12454B;
	--bs-primary-rgb: 18, 69, 75;
	--bs-primary-active: #0c3035;
	--bs-primary-light: #D8F3DC;
	--bs-primary-inverse: #ffffff;
	--bs-text-primary: #12454B;
	--bs-component-active-bg: #12454B;
	--bs-component-hover-color: #12454B;
	--bs-secondary: #D8F3DC;
	--bs-secondary-rgb: 216, 243, 220;
	--bs-secondary-active: #c4e9cb;
	--bs-secondary-inverse: #12454B;
	--bs-link-color: #12454B;
	--bs-link-color-rgb: 18, 69, 75;
	--bs-link-hover-color: #0c3035;
	--bs-link-hover-color-rgb: 12, 48, 53;
}

[data-bs-theme="dark"] {
	--bs-font-sans-serif: "Geist", Inter, Helvetica, sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-font-display: "Fraunces", Georgia, serif;
	--bs-primary: #12454B;
	--bs-primary-rgb: 18, 69, 75;
	--bs-primary-active: #0c3035;
	--bs-primary-light: #D8F3DC;
	--bs-primary-inverse: #ffffff;
	--bs-text-primary: #12454B;
	--bs-component-active-bg: #12454B;
	--bs-component-hover-color: #12454B;
	--bs-secondary: #D8F3DC;
	--bs-secondary-rgb: 216, 243, 220;
	--bs-secondary-active: #c4e9cb;
	--bs-secondary-inverse: #12454B;
}

#kt_aside {
	background-color: #12454B;
	transition: width .2s ease, min-width .2s ease;
}

body,
html {
	font-family: var(--bs-font-sans-serif);
}

.page-title h1 {
	font-family: var(--bs-font-display);
	font-weight: 600;
}

.plan-heading {
	font-family: var(--bs-font-display);
}

#kt_aside .aside-logo .fs-2,
#kt_aside #kt_aside_menu .menu-link,
#kt_aside #kt_aside_menu .menu-title,
#kt_aside #kt_aside_menu .menu-icon,
#kt_aside #kt_aside_menu .lucide,
#kt_aside #kt_aside_footer .text-gray-800,
#kt_aside #kt_aside_footer .text-muted,
#kt_aside #kt_aside_footer > .d-flex .lucide {
	color: #ffffff !important;
}

#kt_aside #kt_aside_menu .menu-link.active,
#kt_aside #kt_aside_menu .menu-link:hover {
	background-color: rgba(255, 255, 255, .14);
}

#kt_aside #kt_aside_menu .menu-link.active .menu-title,
#kt_aside #kt_aside_menu .menu-link:hover .menu-title,
#kt_aside #kt_aside_menu .menu-link.active .lucide,
#kt_aside #kt_aside_menu .menu-link:hover .lucide {
	color: #ffffff !important;
}

#kt_aside .aside-collapse-toggle {
	color: #ffffff;
	background-color: rgba(255, 255, 255, .12);
}

#kt_aside .aside-collapse-toggle:hover {
	color: #ffffff;
	background-color: rgba(255, 255, 255, .2);
}

#kt_aside .aside-collapse-toggle svg {
	transition: transform .2s ease;
}

#kt_aside .aside-brand-short {
	display: none;
}

@media (min-width: 992px) {
	#kt_wrapper {
		transition: padding-left .2s ease;
	}

	body.aside-collapsed #kt_aside {
		width: 84px !important;
		min-width: 84px !important;
	}

	body.aside-collapsed #kt_wrapper {
		padding-left: 134px !important;
	}

	body.aside-collapsed #kt_aside .aside-logo {
		justify-content: center !important;
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}

	body.aside-collapsed #kt_aside .aside-brand-full,
	body.aside-collapsed #kt_aside #kt_aside_menu .menu-title {
		display: none !important;
	}

	body.aside-collapsed #kt_aside #kt_aside_footer > .d-flex.flex-stack > .d-flex.align-items-center {
		display: none !important;
	}

	body.aside-collapsed #kt_aside #kt_aside_footer > .d-flex.flex-stack > .ms-2 {
		margin-left: 0 !important;
	}

	body.aside-collapsed #kt_aside #kt_aside_footer > .d-flex.flex-stack > .ms-2 > .btn {
		margin-right: 0 !important;
	}

	body.aside-collapsed #kt_aside .aside-brand-short {
		display: inline-block;
	}

	body.aside-collapsed #kt_aside #kt_aside_menu {
		padding-right: .75rem !important;
		padding-left: .75rem !important;
	}

	body.aside-collapsed #kt_aside #kt_aside_menu_wrapper {
		justify-content: center;
		padding-right: 0 !important;
	}

	body.aside-collapsed #kt_aside #kt_aside_menu .menu {
		width: 100%;
	}

	body.aside-collapsed #kt_aside #kt_aside_menu .menu-link {
		justify-content: center;
		padding-right: 0;
		padding-left: 0;
	}

	body.aside-collapsed #kt_aside #kt_aside_menu .menu-icon {
		margin-right: 0 !important;
	}

	body.aside-collapsed #kt_aside #kt_aside_footer {
		display: flex;
		justify-content: center;
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}

	body.aside-collapsed #kt_aside .aside-collapse-toggle svg {
		transform: rotate(180deg);
	}
}

.form-check-input:checked {
	background-color: #12454B;
	border-color: #12454B;
}

.form-check-input:focus {
	border-color: #12454B;
	box-shadow: 0 0 0 .25rem rgba(18, 69, 75, .18);
}

.form-check.form-check-solid .form-check-input:checked {
	background-color: #12454B;
	border-color: #12454B;
}

.form-range::-webkit-slider-runnable-track {
	background-color: #D8F3DC;
}

.form-range::-moz-range-track {
	background-color: #D8F3DC;
}

.form-range::-webkit-slider-thumb {
	background-color: #12454B;
}

.form-range::-webkit-slider-thumb:active {
	background-color: #0c3035;
}

.form-range::-moz-range-thumb {
	background-color: #12454B;
}

.form-range::-moz-range-thumb:active {
	background-color: #0c3035;
}

.form-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(18, 69, 75, .25);
}

.form-range:focus::-moz-range-thumb {
	box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(18, 69, 75, .25);
}

.btn-check + .btn .accommodation-option-icon {
	color: #A1A5B7;
	transition: color .2s ease;
}

.btn-check:checked + .btn .accommodation-option-icon {
	color: #12454B;
}

#kt_create_accommodation_form_creation_type_airbnb:checked + label.btn.btn-outline.btn-outline-dashed.btn-active-light-primary {
	background: #FF385C !important;
	background-color: #FF385C !important;
	border-color: #FF385C !important;
	color: #ffffff;
}

#kt_create_accommodation_form_creation_type_airbnb:checked + .btn .accommodation-option-icon,
#kt_create_accommodation_form_creation_type_airbnb:checked + .btn .text-dark,
#kt_create_accommodation_form_creation_type_airbnb:checked + .btn .text-muted {
	color: #ffffff !important;
}

.accommodation-confetti {
	position: fixed;
	inset: 0;
	z-index: 1080;
	pointer-events: none;
	overflow: hidden;
}

.accommodation-confetti span {
	position: absolute;
	width: 8px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	animation-timing-function: cubic-bezier(.13, .74, .28, 1);
	animation-fill-mode: forwards;
}

.accommodation-confetti span.wide {
	width: 12px;
	height: 8px;
}

.accommodation-confetti span.from-left {
	left: -18px;
	animation-name: accommodation-confetti-left;
}

.accommodation-confetti span.from-right {
	right: -18px;
	animation-name: accommodation-confetti-right;
}

@keyframes accommodation-confetti-left {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	10% {
		opacity: .95;
	}
	70% {
		opacity: .9;
	}
	100% {
		opacity: 0;
		transform: translate3d(var(--confetti-x), var(--confetti-y), 0) rotate(var(--confetti-r));
	}
}

@keyframes accommodation-confetti-right {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	10% {
		opacity: .95;
	}
	70% {
		opacity: .9;
	}
	100% {
		opacity: 0;
		transform: translate3d(var(--confetti-x), var(--confetti-y), 0) rotate(var(--confetti-r));
	}
}

.website-create-layout {
	--website-create-card-min-height: calc(100vh - 220px);
	flex: 1 1 auto;
	min-width: 100%;
}

.website-preview-card {
	position: sticky;
	top: 105px;
}

.website-question-card,
.website-preview-card {
	min-height: var(--website-create-card-min-height);
}

.website-question-card .card-body,
.website-preview-card .card-body {
	display: flex;
	flex-direction: column;
	min-height: var(--website-create-card-min-height);
}

#kt_create_website_form,
#kt_create_accommodation_form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

#kt_create_website_form > [data-kt-stepper-element="content"].current,
#kt_create_accommodation_form > [data-kt-stepper-element="content"].current {
	flex: 1 1 auto;
}

#kt_create_website_form > .d-flex.flex-stack,
#kt_create_accommodation_form > .d-flex.flex-stack {
	margin-top: auto;
}

#kt_create_website_form .select2-container,
#kt_create_accommodation_form .select2-container {
	width: 100% !important;
}

.website-template-preview {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--bs-gray-200);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.website-template-preview.is-placeholder {
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: var(--bs-gray-100);
}

.website-template-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 720px);
}

.website-scope-preview {
	display: flex;
	width: 100%;
	gap: 18px;
	align-items: stretch;
	justify-content: center;
}

.website-scope-preview-card {
	flex: 1 1 0;
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--bs-gray-200);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
	opacity: .72;
	transform: translateY(0);
	overflow: hidden;
	will-change: transform;
	transition: border-color .3s ease, box-shadow .35s ease, opacity .3s ease, transform .3s ease;
}

.website-scope-preview-card.active {
	border-color: rgba(18, 69, 75, .38);
	box-shadow: 0 16px 38px rgba(18, 69, 75, .16);
	opacity: 1;
	transform: translateY(-2px);
}

.website-scope-preview.is-scope-focused .website-scope-preview-card {
	flex: 0 1 340px;
}

.website-scope-preview.is-scope-focused {
	gap: 0;
}

.website-scope-preview.is-scope-focused .website-scope-preview-card:not(.active) {
	display: none;
}

.website-scope-preview.is-scope-focused .website-scope-preview-card.active {
	max-width: min(100%, 340px);
	transform: translateX(0);
}

.website-scope-preview.is-scope-focused.scope-single .website-scope-preview-card.active {
	animation: scopeSingleToCenter 2s cubic-bezier(.16, 1, .3, 1) both;
}

.website-scope-preview.is-scope-focused.scope-multi .website-scope-preview-card.active {
	animation: scopeMultiToCenter 2s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes scopeSingleToCenter {
	from {
		transform: translateX(calc(-50% - 9px));
	}

	to {
		transform: translateX(0);
	}
}

@keyframes scopeMultiToCenter {
	from {
		transform: translateX(calc(50% + 9px));
	}

	to {
		transform: translateX(0);
	}
}

.website-scope-browser {
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f8fafc;
}

.website-scope-browser-top {
	display: flex;
	gap: 5px;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-bottom: 1px solid #e5e7eb;
	background: #ffffff;
}

.website-scope-browser-top span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #cbd5e1;
}

.website-hero-iframe-browser {
	background: #111827;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.website-hero-preview-viewport {
	--hero-preview-width: 1280px;
	--hero-preview-height: 720px;
	--hero-preview-scale: .34;
	position: relative;
	width: 100%;
	height: calc(var(--hero-preview-height) * var(--hero-preview-scale));
	overflow: hidden;
	background: #111827;
}

.website-hero-preview-frame {
	display: block;
	width: var(--hero-preview-width);
	height: var(--hero-preview-height);
	border: 0;
	background: #111827;
	opacity: 1;
	transform: scale(var(--hero-preview-scale));
	transform-origin: top left;
}

.website-hero-preview-frame.is-loading {
	opacity: 0;
}

.website-editor-preview-card {
	margin-bottom: 1.75rem;
}

.hero-photo-carousel-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-photo-carousel-arrow {
	flex: 0 0 auto;
}

.hero-photo-carousel {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	padding: 4px 2px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.hero-photo-carousel::-webkit-scrollbar {
	display: none;
}

.hero-photo-carousel-item {
	position: relative;
	flex: 0 0 auto;
	width: 110px;
	height: 78px;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--bs-gray-300);
	border-radius: 8px;
	background: none;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.hero-photo-carousel-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-photo-carousel-item:hover {
	border-color: rgba(18, 69, 75, .45);
}

.hero-photo-carousel-item.is-selected {
	border-color: #12454B;
	box-shadow: 0 8px 20px rgba(18, 69, 75, .22);
}

.hero-photo-carousel-item.is-selected:after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #ffffff;
	border-radius: 6px;
	pointer-events: none;
}

.website-section-iframe-browser {
	background: #ffffff;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.website-section-preview-viewport {
	--section-preview-width: 1280px;
	--section-preview-height: 720px;
	--section-preview-scale: .34;
	position: relative;
	width: 100%;
	height: calc(var(--section-preview-height) * var(--section-preview-scale));
	overflow: hidden;
	background: #ffffff;
}

.website-section-preview-frame {
	display: block;
	width: var(--section-preview-width);
	height: var(--section-preview-height);
	border: 0;
	background: #ffffff;
	opacity: 1;
	transform: scale(var(--section-preview-scale));
	transform-origin: top left;
}

.website-section-preview-frame.is-loading {
	opacity: 0;
}

.website-video-iframe-browser {
	background: #111827;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.website-video-preview-viewport {
	--video-preview-width: 1280px;
	--video-preview-height: 720px;
	--video-preview-scale: .34;
	position: relative;
	width: 100%;
	height: calc(var(--video-preview-height) * var(--video-preview-scale));
	overflow: hidden;
	background: #111827;
}

.website-video-preview-frame {
	display: block;
	width: var(--video-preview-width);
	height: var(--video-preview-height);
	border: 0;
	background: #111827;
	opacity: 1;
	transform: scale(var(--video-preview-scale));
	transform-origin: top left;
}

.website-video-preview-frame.is-loading {
	opacity: 0;
}

.website-gallery-iframe-browser {
	background: #ffffff;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.website-gallery-preview-viewport {
	--gallery-preview-width: 1280px;
	--gallery-preview-height: 820px;
	--gallery-preview-scale: .34;
	position: relative;
	width: 100%;
	height: calc(var(--gallery-preview-height) * var(--gallery-preview-scale));
	overflow: hidden;
	background: #ffffff;
}

.website-gallery-preview-frame {
	display: block;
	width: var(--gallery-preview-width);
	height: var(--gallery-preview-height);
	border: 0;
	background: #ffffff;
	opacity: 1;
	transform: scale(var(--gallery-preview-scale));
	transform-origin: top left;
}

.website-gallery-preview-frame.is-loading {
	opacity: 0;
}

.website-scope-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 174px;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(135deg, #d8f3dc, #ffffff 58%, #e8f7f7);
}

.website-scope-hero.single {
	position: relative;
}

.website-scope-roof {
	position: absolute;
	top: 36px;
	width: 94px;
	height: 54px;
	border-radius: 10px 10px 0 0;
	background: #12454B;
	clip-path: polygon(50% 0, 100% 48%, 100% 100%, 0 100%, 0 48%);
}

.website-scope-house {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	width: 82px;
	height: 58px;
	margin-top: 42px;
	padding: 12px;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 12px 30px rgba(18, 69, 75, .18);
}

.website-scope-house span,
.website-scope-mini-house span {
	border-radius: 3px;
	background: #d8f3dc;
}

.website-scope-hero.multi {
	gap: 10px;
}

.website-scope-mini-house {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	width: 62px;
	height: 72px;
	padding: 11px;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 12px 24px rgba(18, 69, 75, .12);
}

.website-scope-mini-house:nth-child(2) {
	transform: translateY(-12px);
	background: #12454B;
}

.website-scope-mini-house:nth-child(2) span {
	background: rgba(255, 255, 255, .72);
}

.website-scope-preview-title {
	margin-top: 14px;
	color: #1f2937;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
}

.website-template-snapshot {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #f8f6f1;
	color: #191919;
	font-family: "Inter", sans-serif;
	pointer-events: none;
	transform-origin: center center;
	backface-visibility: hidden;
}

.website-template-snapshot.is-template-maximizing {
	will-change: transform, opacity;
	animation: templateBrowserMaximize 1.35s cubic-bezier(.16, 1, .3, 1) both;
}

.website-template-snapshot.is-template-primed {
	will-change: transform, opacity;
	transform: translateZ(0);
}

.website-template-browser-top {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-bottom: 1px solid #e5e7eb;
	background: #ffffff;
}

.website-template-browser-top span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
}

.website-template-browser-content {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

@keyframes templateBrowserMaximize {
	from {
		opacity: .96;
		transform: translate3d(0, -2px, 0) scale(.52);
	}

	55% {
		transform: translate3d(0, 0, 0) scale(.84);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.theme-illustration {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

.theme-illustration-nav {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 64px;
	padding: 0 28px;
}

.theme-illustration-logo {
	min-width: 0;
	font-size: 17px;
	font-weight: 800;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.theme-illustration-reserve {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 18px;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.theme-illustration-hero {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	padding: 32px;
}

.theme-illustration-badge,
.theme-illustration-eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
}

.theme-illustration-heading {
	margin: 12px 0 0;
	font-size: clamp(20px, 3vw, 32px);
	line-height: 1.16;
}

.theme-illustration-divider {
	display: block;
	width: 48px;
	height: 2px;
	margin: 18px 0;
}

.theme-illustration-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
}

.theme-illustration-pin {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.theme-illustration-cta {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	margin-top: 22px;
	padding: 10px 22px;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.theme-illustration-form {
	position: absolute;
	z-index: 2;
	right: 32px;
	bottom: 24px;
	left: 32px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	align-items: stretch;
	padding: 12px;
	border-radius: 18px;
	box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
}

.theme-illustration-form div,
.theme-illustration-form button {
	min-width: 0;
	border-radius: 13px;
}

.theme-illustration-form div {
	padding: 8px 10px;
}

.theme-illustration-form span {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
}

.theme-illustration-form strong {
	display: block;
	font-size: 13px;
	font-weight: 900;
}

.theme-illustration-form button {
	padding: 0 12px;
	font-size: 12px;
	font-weight: 900;
}

/* Classico: clean neutral sans-serif, dark hero gradient, pill accents, booking bar */
.theme-illustration--classico {
	background: linear-gradient(160deg, #0f172a, #1f2937 55%, #334155);
	color: #ffffff;
	font-family: "Inter", sans-serif;
}

.theme-illustration--classico .theme-illustration-nav {
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
}

.theme-illustration--classico .theme-illustration-logo {
	color: #111827;
}

.theme-illustration--classico .theme-illustration-reserve {
	border-radius: 999px;
	background: #111827;
	color: #ffffff;
}

.theme-illustration--classico .theme-illustration-hero {
	padding-bottom: 134px;
}

.theme-illustration--classico .theme-illustration-badge {
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 6px 14px;
}

.theme-illustration--classico .theme-illustration-heading {
	max-width: 320px;
	color: #ffffff;
	font-weight: 800;
}

.theme-illustration--classico .theme-illustration-meta {
	color: rgba(255, 255, 255, .85);
}

.theme-illustration--classico .theme-illustration-pin {
	background: #ffffff;
}

.theme-illustration--classico .theme-illustration-cta {
	border-radius: 999px;
	background: #ffffff;
	color: #111827;
}

.theme-illustration--classico .theme-illustration-form {
	border: 2px solid #ffffff;
	background: #ffffff;
}

.theme-illustration--classico .theme-illustration-form div,
.theme-illustration--classico .theme-illustration-form button {
	border: 1px solid #eef2f7;
	background: #f8fafc;
}

.theme-illustration--classico .theme-illustration-form span {
	color: #6b7280;
}

.theme-illustration--classico .theme-illustration-form strong {
	color: #111827;
}

.theme-illustration--classico .theme-illustration-form button {
	border: 0;
	background: #12454B;
	color: #ffffff;
}

/* Vintage & Luxuoso: dark noir + gold, centered serif hero, hairline accents */
.theme-illustration--vintage {
	background: linear-gradient(160deg, #1c1b19, #262420 55%, #332f29);
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
}

.theme-illustration--vintage .theme-illustration-nav {
	background: #1c1b19;
	border-bottom: 1px solid rgba(198, 161, 91, .25);
}

.theme-illustration--vintage .theme-illustration-logo {
	color: #ffffff;
	font-weight: 600;
	letter-spacing: .03em;
}

.theme-illustration--vintage .theme-illustration-reserve {
	border: 1px solid #c6a15b;
	border-radius: 2px;
	background: transparent;
	color: #ffffff;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.theme-illustration--vintage .theme-illustration-hero {
	align-items: center;
	justify-content: center;
	padding: 36px 28px;
	text-align: center;
}

.theme-illustration--vintage .theme-illustration-eyebrow {
	margin: 0 auto;
	color: #d8c08a;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .28em;
}

.theme-illustration--vintage .theme-illustration-heading {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	color: #ffffff;
	font-weight: 600;
}

.theme-illustration--vintage .theme-illustration-divider {
	margin: 16px auto;
	background: #c6a15b;
}

.theme-illustration--vintage .theme-illustration-meta {
	justify-content: center;
	color: rgba(255, 255, 255, .8);
	font-style: italic;
}

.theme-illustration--vintage .theme-illustration-pin {
	background: #d8c08a;
}

.theme-illustration--vintage .theme-illustration-cta {
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #c6a15b;
	background: transparent;
	color: #ffffff;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .18em;
}

/* Rural: warm terracotta + olive, rounded pill accents, leaf badge */
.theme-illustration--rural {
	background: linear-gradient(160deg, #3e2e22, #4a3728 55%, #5b6b3f);
	color: #ffffff;
	font-family: Georgia, serif;
}

.theme-illustration--rural .theme-illustration-nav {
	background: #fbf6ec;
	border-bottom: 1px solid #ebddc0;
}

.theme-illustration--rural .theme-illustration-logo {
	color: #3e2e22;
	font-weight: 700;
}

.theme-illustration--rural .theme-illustration-reserve {
	border-radius: 999px;
	background: #b56b3f;
	color: #ffffff;
}

.theme-illustration--rural .theme-illustration-badge--leaf {
	border-radius: 999px;
	background: #fbf6ec;
	color: #9c5a34;
	font-size: 11px;
	font-weight: 800;
	padding: 6px 14px;
}

.theme-illustration--rural .theme-illustration-heading {
	max-width: 320px;
	color: #ffffff;
	font-weight: 700;
}

.theme-illustration--rural .theme-illustration-meta {
	color: rgba(255, 255, 255, .9);
	font-weight: 700;
}

.theme-illustration--rural .theme-illustration-pin {
	background: #ffffff;
}

.theme-illustration--rural .theme-illustration-cta {
	border-radius: 999px;
	background: #b56b3f;
	color: #ffffff;
}

@media (max-width: 1199.98px) {
	.theme-illustration--classico .theme-illustration-hero {
		padding-bottom: 158px;
	}

	.theme-illustration--classico .theme-illustration-form {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.theme-illustration--classico .theme-illustration-form button {
		grid-column: 1 / -1;
		min-height: 42px;
	}
}

.website-create-progress .progress,
.accommodation-create-progress .progress {
	border-radius: 999px;
	overflow: hidden;
}

.website-create-progress .progress-bar,
.accommodation-create-progress .progress-bar {
	border-radius: inherit;
	transition: width .25s ease;
}

.accommodation-stepper-nav-card {
	position: absolute !important;
	width: 1px !important;
	min-width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.accommodation-import-spinner-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
}

.accommodation-import-spinner-ring {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--bs-gray-300);
	border-top-color: #FF385C;
	animation: accommodationImportSpin 1.1s linear infinite;
}

.accommodation-import-progress {
	width: 100%;
	max-width: 220px;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--bs-gray-200);
}

.accommodation-import-progress-bar {
	width: 0%;
	height: 100%;
	border-radius: inherit;
	background: #FF385C;
	transition: width 1.9s ease-in-out;
}

@keyframes accommodationImportSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 991.98px) {
	.website-question-card,
	.website-preview-card,
	.website-question-card .card-body,
	.website-preview-card .card-body {
		min-height: auto;
	}

	.website-preview-card {
		position: static;
	}

	.website-template-preview {
		min-height: 520px;
	}

}

@media (max-width: 575.98px) {
	.website-scope-preview {
		flex-direction: column;
	}

	.theme-illustration-nav {
		padding: 0 18px;
	}

	.theme-illustration-reserve {
		display: none;
	}

	.theme-illustration-hero {
		padding: 24px 20px;
	}

	.theme-illustration--classico .theme-illustration-hero {
		padding: 24px 20px 188px;
	}

	.theme-illustration--classico .theme-illustration-form {
		right: 22px;
		left: 22px;
		grid-template-columns: 1fr;
	}
}

.accommodation-edit-page .card {
	border-radius: 8px;
}

.accommodation-edit-surface {
	display: flex;
	flex-direction: column;
}

.accommodation-calendar-card .fc {
	--fc-border-color: #eef2f7;
	--fc-today-bg-color: #f8fbff;
}

.accommodation-calendar-card .fc .fc-toolbar-title {
	color: #071437;
	font-size: 1.25rem;
	font-weight: 800;
	text-transform: capitalize;
}

.accommodation-calendar-card .fc .fc-button {
	border: 0;
	border-radius: 6px;
	background: #f1f5f9;
	color: #4b5675;
	font-weight: 700;
	text-transform: capitalize;
	box-shadow: none;
}

.accommodation-calendar-card .fc .fc-button:hover,
.accommodation-calendar-card .fc .fc-button-primary:not(:disabled).fc-button-active {
	background: #12454B;
	color: #ffffff;
}

.accommodation-calendar-card .fc .fc-col-header-cell {
	padding: 10px 0;
	background: #f8fafc;
}

.accommodation-calendar-card .fc .fc-col-header-cell-cushion {
	color: #78829d;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.accommodation-calendar-card .fc .fc-daygrid-day {
	background: #ffffff;
}

.publish-carousel {
	position: relative;
	overflow: hidden;
}

.publish-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .4s ease;
	pointer-events: none;
}

.publish-slide.publish-slide-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.publish-slide.publish-slide-prev {
	opacity: 0;
	transform: translateX(-100%);
}

.publish-slide-caption {
	position: relative;
	display: inline-block;
	color: var(--bs-gray-800);
}

.publish-slide-caption::before {
	content: attr(data-shimmer-text);
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		transparent 0%,
		transparent 35%,
		rgba(255, 255, 255, .95) 50%,
		transparent 65%,
		transparent 100%
	);
	background-size: 200% auto;
	background-position: 0% 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: publish-caption-shimmer 2s linear infinite;
	pointer-events: none;
}

@keyframes publish-caption-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.reservation-status-select {
	border: none;
	border-radius: 999px;
	padding: 0.7rem 2.25rem 0.7rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	min-width: 140px;
	transition: background-color .2s ease, color .2s ease;
}

.reservation-status-select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(18, 69, 75, .15);
}

.reservation-status-select:disabled {
	opacity: .65;
	cursor: not-allowed;
}

.reservation-status-select-request {
	color: var(--bs-warning);
	background-color: var(--bs-warning-light);
}

.reservation-status-select-confirmed {
	color: var(--bs-success);
	background-color: var(--bs-success-light);
}

.reservation-status-select-rejected {
	color: var(--bs-dark);
	background-color: var(--bs-dark-light);
}

.reservation-status-select-cancelled {
	color: var(--bs-danger);
	background-color: var(--bs-danger-light);
}

/* Pills coloridos pequenos usados na LISTA aberta do Select2 (templateResult
   em manage-reservations.js) - aqui e so texto solto dentro de cada opcao,
   nao ha caixa/seta do Select2 em jogo. */
.reservation-status-pill {
	display: inline-block;
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
}

.reservation-status-pill-request {
	color: var(--bs-warning);
	background-color: var(--bs-warning-light);
}

.reservation-status-pill-confirmed {
	color: var(--bs-success);
	background-color: var(--bs-success-light);
}

.reservation-status-pill-rejected {
	color: var(--bs-dark);
	background-color: var(--bs-dark-light);
}

.reservation-status-pill-cancelled {
	color: var(--bs-danger);
	background-color: var(--bs-danger-light);
}

/* Caixa FECHADA do Select2 (.select2-selection--single) - a cor e aplicada
   aqui via JS (applyReservationStatusBoxColor), que adiciona a classe de
   estado diretamente a este elemento sempre que o valor muda.
   A tentativa anterior de aumentar a altura partiu a seta e a reabertura do
   dropdown - mas isso foi antes de percebermos que o bundle do Metronic ja
   aplica "display:flex;align-items:center" a este elemento (centra o texto
   automaticamente, sem depender de line-height) e que a seta desenhada a CSS
   abaixo usa "top:50%" (relativo a altura da caixa, nao um valor fixo em
   px) - por isso um "height" explicito aqui deve escalar os dois em
   conjunto sem os desalinhar. Ainda assim, qualquer alteracao aqui tem de
   ser confirmada visualmente num browser real (seta + reabertura do
   dropdown), porque o ambiente onde isto foi escrito nao tem screenshot.
*/
/* selectionCssClass do Select2 pode aplicar a classe diretamente ao elemento
   .select2-selection--single OU a um wrapper a volta dele consoante a versao
   - os dois seletores (composto e descendente) cobrem ambos os casos. */
.select2-selection--single.reservation-status-select2,
.reservation-status-select2 .select2-selection--single {
	position: relative;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 600;
	height: 38px !important;
	padding-right: 1.85rem !important;
}

.select2-selection--single.reservation-status-select2 .select2-selection__rendered,
.reservation-status-select2 .select2-selection--single .select2-selection__rendered {
	padding-left: 1rem !important;
}

/* Seta propria, desenhada a CSS (triangulo via border) - a seta nativa do
   Select2 (.select2-selection__arrow/<b>) nao estava a aparecer aqui por
   motivo nao identificado (CSS/versao do bundle), mesmo sem lhe tocarmos
   diretamente. Desenhar a nossa da-nos controlo total e independencia desse
   comportamento. "currentColor" acompanha a cor de texto definida abaixo por
   estado, e pointer-events:none garante que nunca bloqueia o clique. */
.select2-selection--single.reservation-status-select2::after,
.reservation-status-select2 .select2-selection--single::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .55;
	transform: translateY(-35%);
	pointer-events: none;
}

.select2-selection--single.reservation-status-select2.reservation-status-select-request,
.reservation-status-select2 .select2-selection--single.reservation-status-select-request {
	background-color: var(--bs-warning-light);
	color: var(--bs-warning);
}

.select2-selection--single.reservation-status-select2.reservation-status-select-confirmed,
.reservation-status-select2 .select2-selection--single.reservation-status-select-confirmed {
	background-color: var(--bs-success-light);
	color: var(--bs-success);
}

.select2-selection--single.reservation-status-select2.reservation-status-select-rejected,
.reservation-status-select2 .select2-selection--single.reservation-status-select-rejected {
	background-color: var(--bs-dark-light);
	color: var(--bs-dark);
}

.select2-selection--single.reservation-status-select2.reservation-status-select-cancelled,
.reservation-status-select2 .select2-selection--single.reservation-status-select-cancelled {
	background-color: var(--bs-danger-light);
	color: var(--bs-danger);
}

/* O tema base do Select2 poe "color:#444" diretamente no .select2-selection__
   rendered (especificidade de 3 classes), o que ganha a heranca do "color" do
   pai acima - por isso a cor do texto tem de ser reafirmada aqui explicita-
   mente, com !important para nao depender de ordem/especificidade. */
.select2-selection--single.reservation-status-select2.reservation-status-select-request .select2-selection__rendered,
.reservation-status-select2 .select2-selection--single.reservation-status-select-request .select2-selection__rendered {
	color: var(--bs-warning) !important;
}

.select2-selection--single.reservation-status-select2.reservation-status-select-confirmed .select2-selection__rendered,
.reservation-status-select2 .select2-selection--single.reservation-status-select-confirmed .select2-selection__rendered {
	color: var(--bs-success) !important;
}

.select2-selection--single.reservation-status-select2.reservation-status-select-rejected .select2-selection__rendered,
.reservation-status-select2 .select2-selection--single.reservation-status-select-rejected .select2-selection__rendered {
	color: var(--bs-dark) !important;
}

.select2-selection--single.reservation-status-select2.reservation-status-select-cancelled .select2-selection__rendered,
.reservation-status-select2 .select2-selection--single.reservation-status-select-cancelled .select2-selection__rendered {
	color: var(--bs-danger) !important;
}

.accommodation-calendar-card .fc .fc-daygrid-day:hover {
	background: #fbfdff;
}

.accommodation-calendar-card .fc .fc-daygrid-day-frame {
	position: relative;
	min-height: 82px;
	padding: 6px;
}

.accommodation-calendar-card .fc .fc-daygrid-day-number {
	color: #4b5675;
	font-weight: 800;
}

.accommodation-calendar-card .fc .fc-daygrid-event-harness {
	margin-top: 20px;
}

.accommodation-calendar-card .fc .fc-event.fc-channel-block {
	border: 0;
	border-radius: 999px;
	padding: 3px 10px;
	box-shadow: none;
}

.accommodation-calendar-card .fc-channel-airbnb {
	background: #FF385C;
	color: #ffffff;
}

.accommodation-calendar-card .fc-channel-booking {
	background: #003B95;
	color: #ffffff;
}

.accommodation-calendar-card .fc-channel-manual {
	background: #4b5675;
	color: #ffffff;
}

.calendar-channel-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.45;
}

.calendar-day-rate {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 1;
	color: #071437;
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.calendar-day-rate.is-special {
	color: #12454B;
}

.accommodation-calendar-card .fc .fc-daygrid-day.is-channel-blocked {
	background: #fffafb;
}

.rate-dot {
	display: inline-flex;
	width: 10px;
	height: 10px;
	border-radius: 999px;
}

.calendar-channel-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.channel-line {
	display: inline-flex;
	width: 38px;
	height: 8px;
	border-radius: 999px;
}

.channel-line-airbnb {
	background: #FF385C;
}

.channel-line-booking {
	background: #003B95;
}

.ical-source-row {
	background: #ffffff;
}

.dashboard-timeline {
	min-height: 200px;
	border: 1px solid #eff2f5;
	border-radius: 0.775rem;
	overflow: hidden;
}

.dashboard-timeline .vis-panel.vis-left {
	border-right: 1px solid #eff2f5;
}

.dashboard-timeline .vis-labelset .vis-label {
	border-bottom: 1px solid #f5f8fa;
}

.dashboard-timeline .vis-group,
.dashboard-timeline .vis-labelset .vis-label {
	height: 56px !important;
}

.dashboard-timeline .vis-item.vis-range {
	border-radius: .95rem !important;
	border-width: 0 !important;
	box-shadow: none;
	top: 12px !important;
}

.dashboard-timeline .vis-item .vis-item-content,
.dashboard-timeline .vis-item .vis-item-overflow {
	height: 100%;
	width: 100%;
	padding: 0;
}

.dashboard-timeline .vis-current-time {
	background-color: #17c653;
	width: 2px;
}

.dashboard-timeline .vis-time-axis .vis-grid.vis-vertical {
	border-left: 1px dashed #e4e6ef;
}

.dashboard-timeline .vis-time-axis .vis-text {
	color: #99a1b7;
	font-size: 11px;
	font-weight: 700;
}

.accommodation-gallery-item {
	height: 210px;
	transition: box-shadow .2s ease, transform .2s ease;
}

.accommodation-gallery-item img,
.accommodation-create-gallery-item img {
	height: 100%;
	object-fit: cover;
}

.accommodation-create-gallery-item {
	aspect-ratio: 16 / 9;
	height: auto;
	transition: box-shadow .2s ease, transform .2s ease;
}

.accommodation-gallery-item.is-primary,
.accommodation-create-gallery-item.is-primary {
	box-shadow: 0 18px 36px rgba(18, 69, 75, .24) !important;
}

@media (max-width: 575.98px) {
	.accommodation-gallery-item {
		height: 190px;
	}

	.accommodation-create-gallery-item {
		height: auto;
	}
}

[data-photo-id].is-dragging {
	opacity: .55;
}

.website-gallery-layout-option {
	min-height: 118px;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.website-gallery-layout-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: #f1f5f9;
	color: #12454B;
}

.btn-check:checked + .website-gallery-layout-option {
	border-color: #12454B !important;
	background: rgba(18, 69, 75, .06);
	box-shadow: 0 14px 30px rgba(18, 69, 75, .12);
}

.btn-check:checked + .website-gallery-layout-option .website-gallery-layout-icon {
	background: rgba(18, 69, 75, .08);
	color: #12454B;
}

.website-video-preview {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background: #111827;
}

.website-video-preview video,
.website-video-preview iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.website-video-preview iframe {
	width: 120%;
	height: 120%;
	transform: translate(-8%, -8%);
}

.website-video-preview-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, .35);
	pointer-events: none;
}

.website-video-preview-title {
	position: relative;
	z-index: 2;
	max-width: 80%;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(28px, 5vw, 54px);
	font-weight: 600;
	line-height: 1.08;
	text-align: center;
	text-shadow: 0 12px 32px rgba(0, 0, 0, .42);
	pointer-events: none;
}

.website-video-preview-placeholder {
	position: relative;
	z-index: 2;
	padding: 24px;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 767.98px) {
	.accommodation-calendar-card .fc .fc-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.accommodation-calendar-card .fc .fc-daygrid-day-frame {
		min-height: 72px;
		padding: 4px;
	}

	.accommodation-calendar-card .fc .fc-event {
		padding: 4px;
		font-size: 11px;
	}
}