/* ══ Common — loaded on all pages (async) ══ */

/* ── Footer ── */

.hts-footer {
	background-color: var(--color-cream);
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-lg);
	color: var(--color-dark);
}

.hts-footer a {
	color: var(--color-dark);
	transition: color var(--transition-fast);
}

.hts-footer a:hover {
	color: var(--color-accent);
}

.hts-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-inline: var(--space-lg);
}

.hts-footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
}

.hts-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.hts-footer__brand img {
	max-width: 200px;
	height: auto;
}

.hts-footer__brand p {
	font-size: var(--text-p-sm);
	line-height: 1.6;
}

.hts-footer__contact {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-p-sm);
}

.hts-footer__contact:hover {
	color: var(--color-accent);
}

.hts-footer__contact svg {
	width: 22px;
	height: 22px;
	color: var(--color-dark);
	fill: var(--color-dark);
}

.hts-footer svg {
	color: var(--color-dark);
	fill: var(--color-dark);
}

.hts-footer__nav-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-dark-warm);
	margin-bottom: var(--space-xs);
}

.hts-footer__nav-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	text-align: left;
}

.hts-footer__nav-col p {
	font-size: var(--text-p-sm);
	line-height: 1.6;
}

.hts-footer__nav-col ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.hts-footer__nav-col ul li a {
	font-size: var(--text-p-sm);
}

.hts-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-gold);
}

.hts-footer__legal {
	font-size: 13px;
}

.hts-footer__legal-links {
	display: flex;
	gap: var(--space-md);
}

.hts-footer__legal-links a {
	font-size: 13px;
}

@media (max-width: 1024px) {
	.hts-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.hts-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.hts-footer__top {
		grid-template-columns: 1fr;
	}

	.hts-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}
}

/* ── Shared Section ── */

.hts-section {
	margin-top: 20px;
	margin-bottom: 20px;
	min-height: 80svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Contact Section (shared: home + apartment) ── */

.hts-contact {
	margin-top: 0px !important;
	margin-bottom: 150px !important;
	overflow-x: hidden;
}

@media (max-width:768px) {
	#contact-heading {
		font-size: 25px;
	}
}

.hts-contact__header {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.hts-contact__header h2 {
	color: var(--color-accent);
}

.hts-contact__subtitle {
	font-size: var(--text-p-sm);
	color: var(--color-gray-500);
	max-width: 700px;
	margin-inline: auto;
	line-height: 1.65;
	margin-top: var(--space-sm);
}

.hts-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--space-sm);
	align-items: start;
}

.hts-contact__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.hts-contact__info-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background-color: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
}

.hts-contact__info-card svg {
	color: var(--color-accent);
	margin-bottom: 4px;
}

.hts-contact__info-label {
	font-size: var(--text-p-sm);
	font-weight: 700;
}

.hts-contact__info-value {
	font-size: var(--text-p-sm);
	color: var(--color-dark);
	line-height: var(--lh-body);
}

.hts-contact__info-value a {
	color: var(--color-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.hts-contact__info-value a:hover {
	color: var(--color-accent);
}

.hts-contact__form-wrap {
	background-color: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.hts-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.hts-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.hts-form__field {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-p-base);
	color: var(--color-dark);
	background-color: var(--color-white);
	transition: border-color var(--transition-fast);
	outline: none;
}

.hts-form__field:focus {
	border-color: var(--color-accent);
}

textarea.hts-form__field {
	resize: vertical;
	min-height: 120px;
}

.hts-form__privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: var(--text-p-sm);
	color: var(--color-gray-500);
	cursor: pointer;
	line-height: 1.5;
}

.hts-form__privacy input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--color-accent);
}

.hts-form__submit {
	width: 100%;
	padding: 14px;
	background-color: var(--color-accent);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-btn);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.hts-form__submit:hover {
	opacity: 0.9;
}

.hts-contact__form-note {
	font-size: var(--text-p-sm);
	color: var(--color-gray-500);
	margin-bottom: var(--space-sm);
}

.hts-contact__form-intro {
	margin-bottom: var(--space-lg);
	font-size: var(--text-p-sm);
	font-weight: 600;
	line-height: 1.6;
}

.hts-contact__form-placeholder {
	opacity: .6;
	text-align: center;
	padding: var(--space-xl) 0;
}

/* ── Forminator form overrides (homepage + apartment contact section) ── */

.forminator-custom-form {
	display: block !important;
}

.forminator-custom-form .forminator-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--space-sm) !important;
	margin: 0 0 var(--space-sm) 0 !important;
	padding: 0 !important;
}

.forminator-custom-form .forminator-row:last-child {
	margin-bottom: 0 !important;
}

.forminator-custom-form .forminator-col {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.forminator-custom-form .forminator-field,
.forminator-custom-form .forminator-field--inner {
	margin: 0 !important;
	padding: 0 !important;
}

.forminator-custom-form .forminator-label {
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
}

.forminator-custom-form:empty,
.forminator-custom-form:not(:has(.forminator-row)) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Always show date field labels */
.forminator-custom-form .forminator-field--date .forminator-label,
.forminator-custom-form .forminator-date .forminator-label,
.forminator-custom-form [class*="date"] .forminator-label {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	transform: none !important;
	font-size: var(--text-p-sm);
	font-weight: 600;
	color: var(--color-dark);
	margin-bottom: 4px;
}

/* Forminator field styling — lighter borders, rounded, white bg */
.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form .forminator-select,
.forminator-custom-form select,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="number"],
.forminator-custom-form input[type="date"] {
	border: 1px solid var(--color-gray-light) !important;
	border-radius: 8px !important;
	background-color: var(--color-white) !important;
	padding: 12px 16px !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-p-base) !important;
	color: var(--color-dark) !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease !important;
}

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus,
.forminator-custom-form .forminator-select:focus,
.forminator-custom-form select:focus,
.forminator-custom-form input:focus {
	border-color: var(--color-accent) !important;
}

.forminator-custom-form .forminator-textarea {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Select / number field — remove Forminator's inner wrapper styling */
.forminator-custom-form .forminator-select-wrap,
.forminator-custom-form .forminator-field .forminator-input--wrap,
.forminator-custom-form .forminator-number--wrap,
.forminator-custom-form .forminator-multiselect .forminator-option {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Remove the inner double-border on the <select> element */
.forminator-custom-form .forminator-select-wrap select,
.forminator-custom-form select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-shadow: none !important;
	border: 1px solid var(--color-gray-light) !important;
	border-radius: 8px !important;
	background-color: var(--color-white) !important;
	padding: 12px 40px 12px 16px !important;
	width: 100% !important;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
}

/* ── Select2 (Guests dropdown) — flatten the double-box ── */
/* Outer container: strip the duplicate input styling */
.forminator-custom-form .select2-container.forminator-select {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	height: auto !important;
}

/* Inner selection box: make it look like every other input */
.forminator-custom-form .select2-container .select2-selection--single {
	border: 1px solid var(--color-gray-light) !important;
	border-radius: 8px !important;
	background-color: var(--color-white) !important;
	padding: 12px 16px !important;
	height: auto !important;
	min-height: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color 0.2s ease !important;
}

.forminator-custom-form .select2-container .select2-selection--single:focus,
.forminator-custom-form .select2-container--focus .select2-selection--single {
	border-color: var(--color-accent) !important;
}

/* Rendered text inside the select2 box */
.forminator-custom-form .select2-container .select2-selection__rendered {
	padding: 0 !important;
	line-height: inherit !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-p-base) !important;
	color: var(--color-dark) !important;
}

/* Dropdown arrow — keep right-aligned */
.forminator-custom-form .select2-container .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 8px !important;
}

/* Forminator datepicker — replace blue with theme accent */
.forminator-custom-form .forminator-date-container .pika-button:hover,
.forminator-custom-form .forminator-date-container .is-selected .pika-button,
.forminator-custom-form .forminator-date-container .pika-button.is-selected {
	background: var(--color-accent) !important;
}

.forminator-custom-form .forminator-date-container .pika-prev,
.forminator-custom-form .forminator-date-container .pika-next,
.forminator-custom-form .forminator-date-container .pika-prev:hover,
.forminator-custom-form .forminator-date-container .pika-next:hover {
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
	opacity: 1 !important;
	border-radius: 6px !important;
}

/* jQuery UI datepicker fallback */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	background: var(--color-accent) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
	color: var(--color-white) !important;
}

#ui-datepicker-div .ui-state-active,
#ui-datepicker-div .ui-state-hover {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: var(--color-white) !important;
}

/* Forminator's own date widget arrows (button variant) */
.forminator-custom-form .forminator-date--icon,
.forminator-custom-form .forminator-date-nav button {
	color: var(--color-accent) !important;
}

.forminator-custom-form .forminator-date-nav button:hover {
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
}

/* Submit button — full width, orange bg, white text */
.forminator-custom-form .forminator-button-submit {
	display: block !important;
	width: 100% !important;
	padding: 10px 22px !important;
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-btn) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
	text-align: center !important;
}

.forminator-custom-form .forminator-button-submit:hover {
	opacity: 0.9 !important;
	transform: scale(1.02) !important;
}

/* jQuery UI Datepicker z-index */
#ui-datepicker-div {
	display: none;
	z-index: 9999 !important;
}

@media (max-width: 1024px) {
	.hts-contact__inner {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.hts-contact__info {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-sm);
		width: 100%;
	}

	.hts-contact__form-wrap {
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 640px) {
	.hts-form__row {
		grid-template-columns: 1fr;
	}

	.hts-contact__form-wrap {
		padding: var(--space-lg);
	}
}

/* ── FAQ Section (shared: home + apartment) ── */

.hts-faq {
	padding-block: var(--space-3xl);
}

.hts-faq__header {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.hts-faq__header h2 {
	color: var(--color-accent);
	margin-top: var(--space-md);
}

.hts-faq__list {
	max-width: 860px;
	margin-inline: auto;
}

.hts-faq__item {
	border-bottom: 1px solid var(--color-border);
}

.hts-faq__question {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-lg) 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	line-height: 1.4;
	transition: color var(--transition-fast);
}

.hts-faq__question-text {
	flex: 1;
}

.hts-faq__question:hover {
	color: var(--color-accent);
}

.hts-faq__item.is-open .hts-faq__question {
	color: var(--color-accent);
}

.hts-faq__chevron {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	border-right: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.hts-faq__item.is-open .hts-faq__chevron {
	transform: rotate(-135deg);
}

.hts-faq__answer {
	display: none;
	padding-bottom: var(--space-lg);
}

.hts-faq__answer p,
.hts-faq__answer li {
	font-size: var(--text-body);
	color: var(--color-text);
	line-height: 1.7;
}

.hts-faq__answer ul,
.hts-faq__answer ol {
	padding-left: 1.4em;
	margin: 0.5em 0;
}

.hts-faq__answer ul {
	list-style: disc;
}

.hts-faq__answer ol {
	list-style: decimal;
}

.hts-faq__answer a {
	color: var(--color-accent);
}

.hts-faq__item.is-open .hts-faq__answer {
	display: block;
}

/* ── Shared body overrides ── */

.hts-testimonial__body,
.hts-gallery__subtitle,
.hts-contact__subtitle {
	font-size: var(--text-p-base);
	line-height: var(--lh-body);
	color: var(--color-dark);
}

/* ── Inline content links (shared across home, apartment, blog) ── */
.hts-south-coast__subtitle a,
.hts-location-card__desc a,
.hts-detail__desc a,
.hts-detail__section a,
.hts-amenities-grid a,
.hts-detail__loc-block a,
.art-intro a,
.art-item-text a,
.home-amen-text a {
	color: var(--color-text-muted);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hts-south-coast__subtitle a:hover,
.hts-location-card__desc a:hover,
.hts-detail__desc a:hover,
.hts-detail__section a:hover,
.hts-amenities-grid a:hover,
.hts-detail__loc-block a:hover,
.art-intro a:hover,
.art-item-text a:hover,
.home-amen-text a:hover {
	color: var(--color-accent);
}

.hts-article a {
	color: var(--color-text-muted);
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s ease;
}

.hts-article a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

/* ── Book Card popup — base visibility (header is on all pages) ── */
.hts-book-card {
	display: none;
	position: fixed;
	top: calc(var(--header-height) + 8px);
	right: 24px;
	z-index: 9998;
	width: 340px;
	padding: 36px 28px 20px;
	background: var(--color-accent);
	border-radius: 20px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
	text-align: center;
	transform: translateY(-12px) scale(0.96);
	opacity: 0;
	transition: transform var(--transition-base), opacity var(--transition-base);
	pointer-events: none;
	flex-direction: column;
}
.hts-book-card.is-open {
	display: flex;
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
	animation: hts-card-in 0.3s ease forwards;
}
@keyframes hts-card-in {
	from { transform: translateY(-12px) scale(0.96); opacity: 0; }
	to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Mobile CTA: hidden on desktop, shown on mobile instead of popup trigger */
.hts-header__cta--mobile {
	display: none;
}
@media (max-width: 640px) {
	.hts-book-card { display: none !important; }
	#hts-book-toggle { display: none; }
	.hts-header__cta--mobile { display: flex; }
}

/* ── Book Card sub-components (header.php → presente su tutte le pagine) ── */
.hts-book-card__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-dark);
	color: var(--color-white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	transition: background var(--transition-fast);
}
.hts-book-card__close:hover { background: var(--color-dark); opacity: 0.85; }

.hts-book-card__heading {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-dark);
	margin: 0 0 20px;
}

.hts-book-card__phone {
	display: block;
	font-size: 22px;
	font-weight: 600;
	color: var(--color-white) !important;
	text-decoration: none;
	margin-bottom: 16px;
	letter-spacing: 0.5px;
	transition: opacity var(--transition-fast);
}
.hts-book-card__phone:hover { opacity: 0.75; }

.hts-book-card__qr-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 0;
}
.hts-book-card__qr-row .hts-book-card__qr-link { margin: 0; flex-shrink: 0; order: 2; }
.hts-book-card__qr-row .hts-book-card__bottom { order: 1; }

.hts-book-card__bottom {
	font-size: 14px;
	color: var(--color-white) !important;
	margin: 0;
	line-height: 1.4;
	opacity: 0.8;
	text-align: center;
}

.hts-book-card__qr-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 220px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: 16px;
	padding: 16px;
	transition: box-shadow var(--transition-fast);
}
.hts-book-card__qr-link:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

.hts-book-card__qr { width: 100%; height: 100%; object-fit: contain; }

.hts-book-card__footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--color-cream-soft);
}

.hts-book-card__form-link {
	display: block;
	font-size: 14px;
	color: var(--color-dark) !important;
	text-align: center;
	transition: opacity var(--transition-fast);
}
.hts-book-card__form-link:hover { opacity: 0.75; }

/* ── Phone link (section-contact.php + header mobile menu) — popolato da JS =─ */
.hts-phone-link {
	color: inherit;
	text-decoration: none;
}
.hts-phone-link:hover { opacity: 0.8; }
.hts-phone-number { font-variant-numeric: tabular-nums; }