/*
 * Corrections that bring the Elementor pages in line with the Figma "Daplace Website 26".
 * Element-level values live in Elementor; this file holds what Elementor can't express.
 */

/* The designer's custom CSS uses font-weight 800/900 meaning Futura "Heavy" (his notes:
   "800 = Heavy"); the Elementor custom font maps Heavy to 600 and Bold to 700, so those
   texts came out Bold. Weights 800–900 now use the Heavy face, as intended. */
@font-face {
	font-family: 'FuturaStd';
	font-style: normal;
	font-weight: 800 900;
	font-display: swap;
	src: url('../fonts/FuturaStdHeavy.woff') format('woff'),
		url('../fonts/FuturaStdHeavy.ttf') format('truetype');
}

/* Underlined links (phone, email…). The site's Additional CSS has
   `a { text-decoration: none !important }`: one class more wins over it. */
a.dp-underline {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* Same artwork as the header logo, white on the navy menu. */
.dp-logo-white img {
	filter: brightness(0) invert(1);
}

/* Menu accordion: Elementor draws a line above each item; the Figma also closes the list. */
.elementor-element-c403b68 .e-n-accordion-item:last-child {
	border-bottom: 4px solid #fff;
}

/* Home "Perchè sceglierci" tabs: plain text titles with an underline on the active one.
   Elementor 4.3 paints the active/hover title from these variables (kit accent by default),
   with a selector stronger than the element's own background setting. */
.elementor-element.elementor-element-1b4b42c {
	--n-tabs-title-background-color-active: transparent !important;
	--n-tabs-title-background-color-hover: transparent !important;
}

/* Premium list cards on phones (Figma Frame 10): 231px photo on the left, address and text
   top right, the two buttons bottom right with "vedi i dettagli" ending level with the
   photo and "prenota ora" 16px below it. The Elementor row is photo | text | buttons,
   where the buttons box (100% wide) would otherwise wrap below the photo. The text keeps
   42px clear above the buttons, so a longer text pushes them down instead of under it. */
@media (max-width: 767px) {
	.e-con.dp-card-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		column-gap: 24px;
		row-gap: 0;
		align-items: start;
	}

	.e-con.dp-card-grid > .e-con {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.e-con.dp-card-grid > .e-con:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.e-con.dp-card-grid > .e-con:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
		padding-bottom: 42px !important;
	}

	.e-con.dp-card-grid > .e-con:nth-child(3) {
		grid-column: 2;
		grid-row: 2;
		margin-top: -30px !important;
		flex-direction: column !important;
		gap: 16px !important;
	}

	.e-con.dp-card-grid > .e-con:nth-child(3) .elementor-widget-button {
		width: 100% !important;
		max-width: 100% !important;
	}

	.e-con.dp-card-grid > .e-con:nth-child(1) img {
		height: 231px;
		object-fit: cover;
	}
}

/* Menu pills ("gestisci prenotazione", "check-in online"): text on the left as in the Figma. */
.dp-pill-left .elementor-button-content-wrapper {
	justify-content: flex-start;
}

/* Carousels (class dp-carousel on an Elementor container; arrows, dots, drag and autoplay
   come from figma-fixes.js): one row of cards that scrolls sideways and stops on each card.
   The scrollbar is hidden: the cards cut at the edge and the dots show there is more. */
.e-con.dp-carousel {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.e-con.dp-carousel::-webkit-scrollbar {
	display: none;
}

.e-con.dp-carousel > * {
	flex: 0 0 auto !important;
	scroll-snap-align: start;
}

.e-con.dp-carousel--center > * {
	scroll-snap-align: center;
}

@media (hover: hover) and (pointer: fine) {
	.e-con.dp-carousel {
		cursor: grab;
	}
}

.e-con.dp-carousel.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

/* Arrows and dots under the row. Astra and the Elementor kit style every <button>,
   hence the body prefix (one class more than `.elementor-kit-7 button:hover`). */
.dp-carousel-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 0 8px;
	color: #17384c;
}

.dp-carousel-nav[hidden] {
	display: none;
}

body .dp-carousel-nav button.dp-carousel-arrow,
body .dp-carousel-nav button.dp-carousel-arrow:hover,
body .dp-carousel-nav button.dp-carousel-arrow:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	box-shadow: none;
	cursor: pointer;
}

body .dp-carousel-nav button.dp-carousel-arrow:hover {
	background: #17384c;
	color: #eae6dd;
}

body .dp-carousel-nav button.dp-carousel-arrow:disabled {
	opacity: 0.3;
	background: transparent;
	color: inherit;
	cursor: default;
}

.dp-carousel-arrow::before {
	content: '';
	width: 9px;
	height: 9px;
	margin-left: 4px;
	border: solid currentColor;
	border-width: 0 0 1.5px 1.5px;
	transform: rotate(45deg);
}

.dp-carousel-next::before {
	margin: 0 4px 0 0;
	transform: rotate(-135deg);
}

.dp-carousel-dots {
	display: flex;
	gap: 10px;
}

body .dp-carousel-nav .dp-carousel-dots button,
body .dp-carousel-nav .dp-carousel-dots button:hover,
body .dp-carousel-nav .dp-carousel-dots button:focus {
	width: 8px;
	height: 8px;
	min-height: 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	box-shadow: none;
	cursor: pointer;
}

body .dp-carousel-nav .dp-carousel-dots button[aria-current='true'] {
	background: currentColor;
}

@media (max-width: 1024px) {
	.dp-carousel-arrow {
		display: none !important;
	}
}

/* Home "Scegli la destinazione" (Figma Home): photo 185 × 278 per city, cards 51px apart;
   even cards start with the text and so sit lower, as in the Figma's staggered row.
   On desktop the cards grow and the row runs out to the right edge of the window. */
.e-con.dp-dest {
	--dp-card: 185px;
	align-items: flex-start !important;
	gap: 51px !important;
	padding: 0 24px !important;
	scroll-padding-inline: 24px;
}

.dp-dest .dp-dest-card {
	width: var(--dp-card) !important;
	max-width: none;
	color: inherit;
	text-decoration: none;
}

.dp-dest .dp-dest-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	-webkit-user-drag: none;
}

.dp-dest .dp-dest-text {
	position: relative;
	padding-right: 22px !important;
	margin-top: 16px;
}

.dp-dest .dp-dest-text:first-child {
	margin-bottom: 22px;
}

.dp-dest .dp-dest-text .elementor-widget-heading {
	margin-bottom: 12px;
}

.dp-dest .dp-dest-text p {
	margin: 0;
}

/* The "+" of the Figma, at the end of the text. */
.dp-dest .dp-dest-text::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 3px;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(#17384c, #17384c) center / 100% 1.5px no-repeat,
		linear-gradient(#17384c, #17384c) center / 1.5px 100% no-repeat;
}

.dp-dest .dp-dest-card:hover .dp-dest-img img {
	opacity: 0.9;
}

.dp-dest + .dp-carousel-nav {
	padding-left: 24px;
}

@media (min-width: 768px) {
	.e-con.dp-dest {
		--dp-card: 220px;
		gap: 48px !important;
	}
}

@media (min-width: 1025px) {
	.e-con.dp-dest {
		--dp-card: 250px;
		gap: 50px !important;
		/* From the content's left edge to the window's right edge. */
		width: calc(50% + 50vw) !important;
		max-width: none !important;
		padding: 0 24px 0 0 !important;
		scroll-padding-inline: 0;
	}

	.dp-dest + .dp-carousel-nav {
		padding-left: 0;
	}
}

/* Home "Commenti e recensioni" (Figma Home): cards 329px wide, 13px apart, the current one
   centred with its neighbours showing at both edges. */
.e-con.dp-reviews {
	gap: 13px !important;
	padding: 0 calc(50% - 164.5px) !important;
}

.dp-reviews > .e-con {
	width: 329px !important;
}

.dp-reviews + .dp-carousel-nav {
	justify-content: center;
	padding: 0;
}

/* Buttons from tablet up: the Figma is a phone design (15px text in 30px pills), which
   looked undersized on a large screen. From 768px they get the usual 44px touch/click
   target (17px text); the lowercase wording and pill shapes stay as in the Figma.
   !important because each button also has its own Elementor typography/padding. */
@media (min-width: 768px) {
	.elementor-widget-button .elementor-button {
		padding: 10px 28px !important;
		font-size: 17px !important;
		line-height: 1.4 !important;
		white-space: nowrap;
	}

	/* The text span carries its own 15px/16px from the page typography. */
	.elementor-widget-button .elementor-button .elementor-button-text {
		font-size: inherit !important;
		line-height: inherit !important;
	}
}

/* Home "Scopri i nostri hotels / Strutture premium / Tutte le nostre accomodations"
   tiles. Their titles are 36px uppercase and "ACCOMMODATIONS" is one long word:
   three tiles in a row can't hold it on a tablet (it ran ~150px out of a 224px tile),
   so tablets stack them full width as the Figma phone layout does; on desktop the
   title scales a little with the window so the word fits its tile (it was 15px over
   even at 1440px). */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Boxed container: the tiles' row is its .e-con-inner. */
	.elementor-element-34e1200 > .e-con-inner {
		flex-wrap: wrap !important;
		row-gap: 16px !important;
	}

	.elementor-element-34e1200 > .e-con-inner > .e-con {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* The buttons' tablet padding-left is 7% of their own width: small in a narrow
	   tile, 46-58px in a full-width one, so they sat right of their titles. */
	.elementor-element-34e1200 .elementor-widget-button {
		padding-left: 0 !important;
	}

	/* "Commenti e recensioni" and "condividi la tua opinione" on the other sections'
	   7% inset (Elementor gives them a fixed 32px, right for phones only). */
	.elementor-element.elementor-element-dpr0001,
	.elementor-element.elementor-element-dpr0003 {
		margin-left: 7% !important;
	}
}

@media (min-width: 1025px) {
	.elementor-element-34e1200 .elementor-heading-title {
		font-size: clamp(28px, 2.3vw, 36px) !important;
	}
}

/* Desktop: centring one card (the phone layout above) left a ~600px empty strip
   before the first review. The row starts with the first three cards centred under
   the heading (3 × 329px + 2 × 13px = 1013px), the next one showing at the right. */
@media (min-width: 1025px) {
	.e-con.dp-reviews {
		padding: 0 max(24px, calc(50% - 506.5px)) !important;
		scroll-padding-left: max(24px, calc(50% - 506.5px));
	}

	.e-con.dp-reviews > * {
		scroll-snap-align: start;
	}
}

/* Home "Prenota direttamente": the subtitle and the advantage boxes end with their text
   (no paragraph margin under the last line), so the boxes centre it as in the Figma. */
.elementor-element-6d6efc2 .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Footer on phones (Figma Home): spacing is set on the Elementor elements, so paragraphs
   add none; the partner links are three equal columns split by a short "|" as in the
   Figma (the Elementor borders ran the full height of the two-line labels). */
@media (max-width: 767px) {
	.elementor-11052 .elementor-widget-text-editor p:last-child {
		margin-bottom: 0;
	}

	/* "Prenota ora" and "Pagine" side by side as in the Figma: at their Elementor widths
	   (238px + 107px) they wrapped, and "Pagine" sat right under the email with no gap. */
	.elementor-11052 .elementor-element.elementor-element-a34dc25 {
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		gap: 24px !important;
	}

	.elementor-11052 .elementor-element-a34dc25 > .elementor-element-13a1967,
	.elementor-11052 .elementor-element-a34dc25 > .elementor-element-51e2c69 {
		width: auto !important;
		flex: 0 1 auto !important;
	}

	.elementor-11052 .elementor-element.elementor-element-8d61898 {
		background:
			linear-gradient(#21394d, #21394d) 33.333% 9px / 1.5px 14px no-repeat,
			linear-gradient(#21394d, #21394d) 66.667% 9px / 1.5px 14px no-repeat;
	}
}

/* Home hero from tablet up: the wide photo is light where the title sits; a soft navy
   shade from the left keeps the title readable (phones show the Figma crop, darker
   there). Tablets get it too: the white title sat on the light headboard there. */
@media (min-width: 768px) {
	.elementor-element.elementor-element-562946d::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(23, 56, 76, 0.7) 0%, rgba(23, 56, 76, 0.4) 40%, rgba(23, 56, 76, 0) 70%);
		pointer-events: none;
	}

	.elementor-element.elementor-element-562946d > * {
		position: relative;
		z-index: 1;
	}
}

/* Premium property pages (Figma Frame 14 / 149): the address under the type is underlined;
   the description shows four lines closed by "…" and a plain bold "+ leggi di più" on the
   right (the Royal "Unfold" widget draws a framed button and cuts the text mid-line). */
.dp-premium-address p:last-child {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dp-unfold .wpr-unfold-data:not(.active) {
	height: auto !important;
}

.dp-unfold .wpr-unfold-data:not(.active) .wpr-unfold-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.dp-unfold .wpr-unfold-data:not(.active) .wpr-unfold-content p {
	display: inline;
}

.dp-unfold .wpr-unfold-btn,
.dp-unfold .wpr-unfold-btn:hover,
.dp-unfold .wpr-unfold-btn:focus {
	display: block;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: right;
}

/* ── Text pages (Partner, Proprietari, Agenzie, Termini, Privacy, Our Story) ─────────
   No Figma frame of their own: built with the Figma components (see the script
   correzioni/pagine-testo.php). Sections of one readable column on the 1140px grid,
   divided by the gold rule; gold label + Baskervville title; Futura text; white cards;
   navy testimonial cards; forms in the lilac panel; navy pill buttons. */
.e-con.dp-tp-section {
	--dp-tp-gold: #bda46e;
	--dp-tp-navy: #21394d;
	gap: 16px !important;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto !important;
	padding: 48px 24px !important;
	border-top: 1px solid var(--dp-tp-gold);
	color: var(--dp-tp-navy);
	font-family: 'FuturaStd', sans-serif;
	font-size: 17px;
	line-height: 26px;
}

.e-con.dp-tp-section.dp-tp-intro {
	padding-top: 40px !important;
	border-top: 0;
}

.dp-tp-section > .elementor-widget,
.dp-tp-section .e-con {
	max-width: 760px;
}

.dp-tp-section .dp-tp-cards,
.dp-tp-section .dp-tp-media {
	max-width: none;
}

.dp-tp-section .elementor-widget-text-editor p {
	margin: 0 0 12px;
}

.dp-tp-section .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.dp-tp-section .elementor-widget-text-editor,
.dp-tp-section .elementor-widget-text-editor p,
.dp-tp-section .elementor-icon-list-text {
	color: var(--dp-tp-navy) !important;
	font-family: 'FuturaStd', sans-serif;
	font-size: 17px;
	line-height: 26px;
}

/* Label over the title (gold, Futura Heavy, uppercase) */
.dp-tp-section .dp-tp-label p,
.dp-tp-section .dp-tp-kicker .elementor-heading-title {
	color: var(--dp-tp-gold) !important;
	font-family: 'FuturaStd', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 18px !important;
	letter-spacing: 0;
	text-transform: uppercase;
}

.dp-tp-section .dp-tp-title .elementor-heading-title {
	color: var(--dp-tp-navy);
	font-family: 'Baskervville', serif !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 44px !important;
	text-transform: none;
}

.dp-tp-section .dp-tp-h2 .elementor-heading-title {
	color: var(--dp-tp-navy);
	font-family: 'Baskervville', serif !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 34px !important;
	text-transform: none;
}

.dp-tp-section .dp-tp-h3 .elementor-heading-title,
.dp-tp-section .elementor-icon-box-title,
.dp-tp-section .elementor-icon-box-title a {
	color: var(--dp-tp-navy);
	font-family: 'FuturaStd', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 22px !important;
	text-transform: none;
}

/* Cards: features, steps, team */
.dp-tp-section .e-con.dp-tp-cards {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 16px !important;
	width: 100%;
}

.dp-tp-section .e-con.dp-tp-card {
	gap: 8px !important;
	padding: 24px !important;
	border-radius: 20px;
	background: #fff;
}

.dp-tp-section .elementor-icon-box-wrapper {
	text-align: left;
}

.dp-tp-section .elementor-icon-box-icon .elementor-icon {
	color: var(--dp-tp-gold);
	fill: var(--dp-tp-gold);
	font-size: 32px;
}

.dp-tp-section .elementor-icon-box-description {
	margin-top: 6px;
	color: var(--dp-tp-navy);
	font-size: 16px;
	line-height: 24px;
}

.dp-tp-section .dp-tp-person img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 12px;
}

/* Photo + text */
.dp-tp-section .e-con.dp-tp-media {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100%;
}

.dp-tp-section .e-con.dp-tp-col {
	gap: 16px !important;
}

.dp-tp-section .elementor-widget-image img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

/* Lists */
.dp-tp-section .elementor-icon-list-icon i,
.dp-tp-section .elementor-icon-list-icon svg {
	color: var(--dp-tp-gold) !important;
	fill: var(--dp-tp-gold) !important;
}

/* Buttons: navy pill (as "richiedi il tuo soggiorno lungo") */
.dp-tp-section .elementor-widget-button .elementor-button,
.dp-tp-section .elementor-field-type-submit .elementor-button {
	padding: 10px 24px !important;
	border: 0 !important;
	border-radius: 32px !important;
	background: var(--dp-tp-navy) !important;
	color: #fff !important;
	font-family: 'FuturaStd', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	text-transform: lowercase;
}

.dp-tp-section .elementor-widget-button .elementor-button:hover,
.dp-tp-section .elementor-field-type-submit .elementor-button:hover {
	background: #17384c;
	color: #eae6dd;
}

/* Owners' testimonials: navy cards (as the Home reviews) */
.e-con.dp-tp-section.dp-tp-quote {
	border-top: 0;
	padding-top: 0 !important;
}

.dp-tp-section.dp-tp-quote > .elementor-widget,
.dp-tp-section.dp-tp-quote > .e-con {
	max-width: 760px;
}

.e-con.dp-tp-section.dp-tp-quote {
	gap: 0 !important;
}

.dp-tp-section.dp-tp-quote > * {
	padding: 0 22px;
	background: #21394d;
}

.dp-tp-section.dp-tp-quote > :first-child {
	padding-top: 22px;
	border-radius: 12px 12px 0 0;
}

.dp-tp-section.dp-tp-quote > :last-child {
	padding-bottom: 22px;
	border-radius: 0 0 12px 12px;
}

.dp-tp-section.dp-tp-quote .elementor-heading-title,
.dp-tp-section.dp-tp-quote p {
	color: #fff !important;
}

.dp-tp-section.dp-tp-quote .dp-tp-h2 .elementor-heading-title {
	font-size: 24px !important;
	line-height: 28px !important;
}

.dp-tp-section.dp-tp-quote .elementor-star-rating i::before {
	color: #eae6dd;
}

/* Forms: lilac panel, white pill fields */
.e-con.dp-tp-section.dp-tp-formsec {
	padding: 32px 24px !important;
	border-radius: 20px;
	border-top: 0;
	background: #d9c5d4;
}

.dp-tp-section .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.dp-tp-section .elementor-field-group .elementor-select-wrapper select,
.dp-tp-section .elementor-field-group textarea {
	min-height: 44px;
	padding: 10px 18px;
	border: 0 !important;
	border-radius: 24px !important;
	background: #fff !important;
	color: #21394d;
	font-family: 'FuturaStd', sans-serif;
	font-size: 16px;
}

.dp-tp-section .elementor-field-group textarea {
	border-radius: 18px !important;
}

.dp-tp-section .elementor-field-label {
	color: #21394d;
	font-family: 'FuturaStd', sans-serif;
	font-size: 14px;
	font-weight: 600;
}

@media (min-width: 768px) {
	.dp-tp-section .e-con.dp-tp-cards {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	.dp-tp-section .e-con.dp-tp-media {
		flex-direction: row !important;
		align-items: center;
	}

	.dp-tp-section .e-con.dp-tp-media > .e-con {
		flex: 1 1 0;
	}
}

@media (min-width: 1025px) {
	.e-con.dp-tp-section {
		padding: 72px 10px !important;
	}

	.dp-tp-section .dp-tp-title .elementor-heading-title {
		font-size: 64px !important;
		line-height: 66px !important;
	}

	.dp-tp-section .dp-tp-h2 .elementor-heading-title {
		font-size: 40px !important;
		line-height: 44px !important;
	}

	.e-con.dp-tp-section.dp-tp-formsec {
		padding: 48px !important;
	}
}

.dp-tp-section .e-con.dp-tp-col,
.dp-tp-section .e-con.dp-tp-media {
	padding: 0 !important;
}

/* Titles written inside long texts (Termini e condizioni) */
.dp-tp-section .elementor-widget-text-editor h1,
.dp-tp-section .elementor-widget-text-editor h2 {
	margin: 32px 0 12px;
	color: #21394d;
	font-family: 'Baskervville', serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 32px;
}

.dp-tp-section .elementor-widget-text-editor h3,
.dp-tp-section .elementor-widget-text-editor h4 {
	margin: 24px 0 8px;
	color: #21394d;
	font-family: 'FuturaStd', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

/* Text pages sit on the Figma beige, like the Home (the theme's page background is white). */
body:has(.dp-tp-section),
body:has(.dp-tp-section) .site-content,
body:has(.dp-tp-section) .ast-container {
	background-color: #eae6dd;
}