/****************************************

	MercatinoTicino - stile (senza librerie)

	@copyright: IPELWEB
	@author: Ilario Pellandini
	@updated: 2026-10-24

	FONT
	VARIABILI
	BASE
	GRIGLIA
	UTILITY
	FORM
	BOTTONI
	ICONE
	MENU
	MEGA MENU
	DROPDOWN
	MENU PAGE
	HEADER HOME
	HEADER PAGE
	PAGE
	HOMEPAGE
	LISTINGS
	CAROUSEL
	BROWSE (cerca)
	FAQ PAGE
	LOGIN
	ACCOUNT
	SIDEBAR PAGE
	SIDEBAR CATEGORIES
	SINGLE (pagina annuncio)
	SPONSOR
	FOOTER MENU
	FOOTER ABOUT
	OFFCANVAS MENU
	BACK TO TOP
	MSG
	COOKIE BAR

	breakpoint (come bootstrap):
	sm 576px - md 768px - lg 992px - xl 1200px

	pagine con il loro css (solo in quella pagina, dopo questo): addDEV.css, errorDEV.css, favoritesDEV.css

****************************************/

/************************************
	FONT (ospitati sul server, licenza SIL OFL)
************************************/

@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 300 700; /* variabile: un solo file per tutti i pesi */
	font-display: swap;
	src: url("../fonts/karla.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-700.woff2") format("woff2");
}

/************************************
	VARIABILI
************************************/

:root {
	/* colori */
	--iw-blue: #036;
	--iw-blue-dark: #002d5b;
	--iw-text: #212529;
	--iw-muted: #6c757d;
	--iw-border: #dee2e6;
	--iw-input: #ced4da;
	--iw-light: #f8f9fa;
	--iw-yellow: #f2b636;
	--iw-pink: #ed4e6e;
	--iw-red: #880000;
	--iw-green: #00c34d;
	--iw-dark: #232323;
	--iw-darker: #181818;
	--iw-footer-text: #dadada;

	/* font */
	--iw-font: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--iw-font-title: "Poppins", "Karla", system-ui, sans-serif;

	/* misure */
	--iw-radius: .3rem;
	--iw-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
	--iw-gutter: 1.5rem;
	--iw-menu-h: 76px; /* altezza menu fisso */
}

@media ( max-width: 991.98px ) {
	:root {
		--iw-menu-h: 74px;
	}
}

@media ( max-width: 767.98px ) {
	:root {
		--iw-menu-h: 71px;
	}
}

/************************************
	BASE
************************************/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font: 400 16px/1.5 var(--iw-font);
	color: var(--iw-text);
	background: #fff;
	-webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5rem;
	font-weight: 500;
	line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
	margin: 0 0 1rem;
}

ul,
ol {
	margin: 0 0 1rem;
	padding-left: 2rem;
}

b,
strong {
	font-weight: 700;
}

a {
	color: var(--iw-blue);
}

a:hover {
	color: var(--iw-blue-dark);
}

img,
svg {
	vertical-align: middle;
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	margin: 1rem 0;
	border: 0;
	border-top: 1px solid var(--iw-border);
}

button,
input,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--iw-blue);
	outline-offset: 2px;
}

/************************************
	GRIGLIA (stessi nomi di bootstrap)
************************************/

.container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 calc( var(--iw-gutter) / 2 );
}

@media ( min-width: 768px ) and ( max-width: 991.98px ) {
	.container {
		max-width: 720px;
	}
}

@media ( min-width: 992px ) and ( max-width: 1199.98px ) {
	.container {
		max-width: 960px;
	}
}

/* mobile only */

@media ( max-width: 767.98px ) {
	.container {
		padding-left: 6%;
		padding-right: 6%;
	}
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc( var(--iw-gutter) / -2 );
	margin-right: calc( var(--iw-gutter) / -2 );
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-left: calc( var(--iw-gutter) / 2 );
	padding-right: calc( var(--iw-gutter) / 2 );
}

.g-0 { --iw-gutter: 0; }
.g-3 { --iw-gutter: 1rem; }

.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }

/* colonne */

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media ( min-width: 768px ) {
	.col-md { flex: 1 0 0%; }
	.col-md-auto { flex: 0 0 auto; width: auto; }
	.col-md-1 { flex: 0 0 auto; width: 8.333333%; }
	.col-md-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-md-3 { flex: 0 0 auto; width: 25%; }
	.col-md-4 { flex: 0 0 auto; width: 33.333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.666667%; }
	.col-md-9 { flex: 0 0 auto; width: 75%; }
	.col-md-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
	.offset-md-1 { margin-left: 8.333333%; }
	.g-md-4 { --iw-gutter: 1.5rem; }
}

@media ( min-width: 992px ) {
	.col-lg { flex: 1 0 0%; }
	.col-lg-auto { flex: 0 0 auto; width: auto; }
	.col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
	.col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
	.col-lg-9 { flex: 0 0 auto; width: 75%; }
	.col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-lg-12 { flex: 0 0 auto; width: 100%; }
	.offset-lg-0 { margin-left: 0; }
	.offset-lg-1 { margin-left: 8.333333%; }
}

@media ( min-width: 1200px ) {
	.col-xl { flex: 1 0 0%; }
	.col-xl-auto { flex: 0 0 auto; width: auto; }
	.col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
	.col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-xl-3 { flex: 0 0 auto; width: 25%; }
	.col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
	.col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
	.col-xl-6 { flex: 0 0 auto; width: 50%; }
	.col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
	.col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
	.col-xl-9 { flex: 0 0 auto; width: 75%; }
	.col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-xl-12 { flex: 0 0 auto; width: 100%; }
	.offset-xl-1 { margin-left: 8.333333%; }
}

/************************************
	UTILITY (solo quelle che usiamo)
************************************/

.d-none { display: none !important; }
.d-block { display: block !important; }

@media ( min-width: 768px ) {
	.d-md-none { display: none !important; }
	.d-md-block { display: block !important; }
}

@media ( min-width: 992px ) {
	.d-lg-none { display: none !important; }
	.d-lg-block { display: block !important; }
}

.img-fluid { max-width: 100%; height: auto; }
.list-unstyled { padding-left: 0; list-style: none; }
.clearfix::after { display: block; clear: both; content: ""; }
.float-end { float: right; }
.w-100 { width: 100%; }

.text-center { text-align: center; }
.text-end { text-align: right; }
.text-muted { color: var(--iw-muted); }

@media ( min-width: 768px ) {
	.text-md-start { text-align: left; }
}

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* nascosto ma letto dagli screen reader */

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/************************************
	FORM
************************************/

.form-group {
	margin-bottom: 20px;
}

.form-label {
	display: inline-block;
	margin-bottom: 4px;
	font: 400 18px var(--iw-font);
}

.form-label span {
	color: var(--iw-yellow);
	font-weight: 700;
	margin-left: 12px;
}

.form-control,
.form-select {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--iw-text);
	background-color: #fff;
	border: 1px solid var(--iw-input);
	border-radius: .25rem;
	appearance: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
	border-color: #6688aa;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0, 51, 102, .15);
}

/* errore solo dopo che l'utente ha toccato il campo */

.form-control:user-invalid,
.form-select:user-invalid {
	border-color: #dc3545;
}

.form-control::placeholder {
	color: var(--iw-muted);
	opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
	background-color: #e9ecef;
}

textarea.form-control {
	min-height: calc( 1.5em + .75rem + 2px );
	resize: vertical;
}

.form-control-lg {
	padding: .5rem 1rem;
	font-size: 1.25rem;
	border-radius: var(--iw-radius);
}

.form-select {
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
}

/* campo + bottone attaccati (ricerca) */

.input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.input-group > .form-control {
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* antispam: campo trappola invisibile per le persone */

.iw_hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.iw_form_note {
	margin: 0;
	color: var(--iw-muted);
	font-size: 15px;
}

.iw_form_note span {
	color: var(--iw-yellow);
	font-weight: 700;
}

/* aiuto sotto un campo (#iw_page: piu forte dei testi delle pagine) */

.form-text,
#iw_page .form-text {
	margin: 6px 0 0;
	font: 300 14px/1.4 var(--iw-font);
	color: var(--iw-muted);
}

/* casella da spuntare (accetto i termini) */

.form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
}

.form-check-input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	accent-color: var(--iw-blue);
}

.form-check-label {
	font: 300 17px/1.5 var(--iw-font);
}

/* bottone e link sulla stessa riga (accedi + password dimenticata) */

.iw_form_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-top: 1.5rem;
}

.iw_form_actions .iw_btn {
	margin-top: 0;
}

.iw_form_actions a:not(.btn) {
	color: var(--iw-muted);
}

/* accedi / registrati in fondo al modulo (solo mobile, la sidebar e nascosta) */

#iw_page .iw_form_switch {
	margin: 2.5rem 0 0;
	padding-top: 2rem;
	text-align: center;
	border-top: 1px solid var(--iw-border);
}

.iw_form_switch a {
	text-decoration: none;
	color: var(--iw-muted);
}

.iw_form_switch strong {
	text-decoration: underline;
}

/* avviso per lo sviluppo (solo con IW_DEV) */

.iw_dev_note {
	padding: 10px 14px;
	font-size: 14px;
	color: #6b4e00;
	background: #fff8e1;
	border: 1px dashed var(--iw-yellow);
	border-radius: 3px;
}

/* recaptcha: box di google ritagliato (lo spazio e riservato anche prima che si carichi) */

.g-recaptcha-outer {
	display: inline-block;
	max-width: 100%;
	padding-left: 12px;
	overflow: hidden;
	text-align: left;
	background: #f9f9f9;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.g-recaptcha-inner {
	width: 290px;
	height: 74px;
	margin: 0 20px 0 0;
	overflow: hidden;
}

.g-recaptcha {
	position: relative;
	top: -1px;
	left: -2px;
}

@media ( max-width: 767.98px ) {
	.g-recaptcha-outer {
		display: block;
	}
}

/* campi corti affiancati (quanti ce ne stanno, su telefono uno per riga): inserisci, registrati, profilo */

.iw_form_cols {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	column-gap: 20px;
}

/************************************
	BOTTONI
************************************/

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 1rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--iw-text);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	user-select: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: .25rem;
	cursor: pointer;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn .iw_icon {
	margin-right: 10px;
}

/* bottone con sola icona (ha aria-label) */

.btn[aria-label] .iw_icon {
	margin-right: 0;
}

.btn-lg {
	padding: .625rem 1.25rem;
	font-size: 1.25rem;
	border-radius: var(--iw-radius);
}

.btn-primary {
	color: #fff;
	background-color: var(--iw-blue);
	border-color: var(--iw-blue);
}

.btn-primary:hover {
	color: #fff;
	background-color: var(--iw-blue-dark);
	border-color: var(--iw-blue-dark);
}

/* bordo bianco su sfondo scuro (nastro della home) */

.btn-outline-light {
	color: #fff;
	border-color: #fff;
}

.btn-outline-light:hover {
	color: var(--iw-blue-dark);
	background-color: #fff;
}

.btn:disabled,
.btn.disabled {
	opacity: .65;
	pointer-events: none;
}

.iw_btn {
	padding: .7rem 1.75rem;
	margin-top: 1.5rem;
	font: 400 17px var(--iw-font);
	color: #fff;
	background-color: var(--iw-blue);
	border-color: var(--iw-blue);
}

.iw_btn:hover {
	color: #fff;
	background-color: var(--iw-blue-dark);
}

/* paging */

.pagination {
	display: flex;
	justify-content: center;
	padding-left: 0;
	list-style: none;
}

.pagination .page-link {
	display: block;
	padding: .375rem .75rem;
	margin-left: -1px;
	color: #666;
	text-decoration: none;
	border: 1px solid var(--iw-border);
}

.pagination .page-item:first-child .page-link {
	border-radius: .25rem 0 0 .25rem;
}

.pagination .page-item:last-child .page-link {
	border-radius: 0 .25rem .25rem 0;
}

.pagination .page-item.active .page-link {
	color: #fff;
	background: var(--iw-blue);
	border-color: var(--iw-blue);
}

/************************************
	ICONE (inc/img/icons.svg)
************************************/

.iw_icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* freccia che gira quando il menu e aperto */

.iw_arrow {
	transition: transform 200ms ease-in-out;
}

.iw_opened .iw_arrow {
	transform: rotate( -180deg );
}

/* bottoni social tondi */

.iw_social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.iw_social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	background: var(--iw-blue);
	text-decoration: none;
	transition: background-color .15s, opacity .15s;
}

.iw_social a:hover {
	color: #fff;
	background: var(--iw-blue-dark);
}

.iw_social .iw_icon {
	width: 18px;
	height: 18px;
}

/************************************
	MENU
************************************/

#iw_menu {
	position: relative;
	z-index: 300;
	height: var(--iw-menu-h);
	background: #fff;
}

#iw_menu > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

#iw_menu_logo {
	max-width: 300px;
}

#iw_menu_logo a,
#iw_menu_logo img {
	display: block;
}

#iw_menu_toggle,
#iw_menu_user {
	display: none;
}

#iw_menu_desktop .nav {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

#iw_menu_desktop .nav-link {
	display: flex;
	align-items: center;
	margin: 0 18px;
	padding: .5rem 0;
	font: 400 18px var(--iw-font);
	text-transform: uppercase;
	text-decoration: none;
	color: #444;
}

#iw_menu_desktop .nav-link:hover,
#iw_menu_desktop .nav-link.active {
	color: #000;
}

#iw_menu_desktop .nav-item:last-child > .nav-link {
	margin-right: 0;
}

#iw_menu_desktop .nav-link .iw_icon {
	margin-right: 10px;
}

/* tablet e mobile */

@media ( max-width: 991.98px ) {
	#iw_menu_logo {
		max-width: 60%;
	}
	#iw_menu_toggle {
		display: inline-flex;
		margin-left: -8px; /* il tasto e piu grande del disegno (da toccare col dito), cosi il burger resta allineato al bordo */
	}
	#iw_menu_user {
		display: block;
		margin-right: -8px;
	}
	#iw_menu_desktop {
		display: none;
	}
}

/* burger animato (telefono, diventa x con .active dal js): linee di 3px e alto 21px come l'icona utente */

.burger {
	display: inline-flex;
	appearance: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: none;
}

.burger span {
	display: block;
	width: 24px;
	height: 3px;
	border-radius: 12px;
	background-color: var(--iw-blue);
	transition: background-color .5s ease-in-out;
}

.burger span::before,
.burger span::after {
	display: block;
	width: 100%;
	height: 3px;
	content: "";
	border-radius: 12px;
	background-color: var(--iw-blue);
	transition: all .5s ease-in-out;
}

.burger span::before {
	transform: translateY(-9px);
}

.burger span::after {
	margin-top: -3px;
	transform: translateY(9px);
}

.burger.active span {
	background-color: transparent;
}

.burger.active span::before {
	transform: rotateZ(45deg) translateY(0);
}

.burger.active span::after {
	transform: rotateZ(-45deg) translateY(0);
}

/* icona utente (telefono, tasto grande come il burger cosi il logo resta al centro) */

#iw_menu_user .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 24px;
	color: var(--iw-blue);
	cursor: pointer;
	background: transparent;
	border: none;
}

#iw_menu_user .iw_icon {
	stroke-width: 3; /* 3px come le linee del burger */
}

#iw_menu_user .dropdown-toggle::after {
	display: none;
}

#iw_menu_user .dropdown-menu {
	margin-top: calc( var(--iw-menu-h) / 2 - 20px ); /* la tendina parte da sotto la barra */
}

/* tablet only */

@media ( min-width: 992px ) and ( max-width: 1199.98px ) {
	#iw_menu_logo {
		max-width: 262px;
	}
	#iw_menu_desktop .nav-link {
		margin: 0 12px;
	}
}

/* menu fisso (non su telefoni in orizzontale) */

@media ( min-height: 500px ) {
	#iw_menu {
		position: sticky;
		top: 0;
	}
}

/************************************
	MEGA MENU (categorie)
************************************/

#iw_megamenu_btn > .nav-link::after {
	display: inline-block;
	margin-left: .4em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}

#iw_megamenu_cat {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 3;
	width: 100%;
	padding: 30px 0;
	background: #fff;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}

#iw_megamenu_btn.iw_open #iw_megamenu_cat {
	display: block;
	animation: iw_fadein .1s linear;
}

/* freccia sotto "categorie" (posizione calcolata dal js) */

#iw_megamenu_cat::before,
#iw_megamenu_cat::after {
	content: "";
	position: absolute;
	left: var(--iw-arrow, 64%);
	transform: translateX(-50%);
	border-right: 17px solid transparent;
	border-left: 17px solid transparent;
}

#iw_megamenu_cat::before {
	top: -15px;
	z-index: 10;
	border-bottom: 15px solid #fff;
}

#iw_megamenu_cat::after {
	top: -17px;
	z-index: 8;
	border-right-width: 19px;
	border-left-width: 19px;
	border-bottom: 17px solid #ccc;
}

#iw_megamenu_cat p {
	margin-bottom: 1rem;
	font: 700 24px var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

#iw_megamenu_cat .row a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
	font: 300 16px var(--iw-font);
	text-decoration: none;
	color: var(--iw-text);
}

#iw_megamenu_cat .row a .iw_icon {
	color: var(--iw-blue);
	stroke-width: 1.75;
}

#iw_megamenu_cat .row a:hover {
	color: #000;
	font-weight: 400;
}

@keyframes iw_fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

/************************************
	DROPDOWN (menu account)
************************************/

.dropdown {
	position: relative;
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: .4em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}

.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1000;
	min-width: 12rem;
	margin: .5rem 0 0;
	padding: .5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
}

.dropdown.iw_open .dropdown-menu {
	display: block;
	animation: iw_fadein .1s linear;
}

.dropdown-item {
	display: block;
	width: 100%;
	padding: .35rem 1rem;
	font: 300 16px/24px var(--iw-font);
	white-space: nowrap;
	text-decoration: none;
	color: var(--iw-text);
}

.dropdown-item:hover {
	color: #000;
	background: var(--iw-light);
}

.dropdown-divider {
	height: 0;
	margin: .5rem 0;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .15);
}

/************************************
	MENU PAGE (ricerca + inserisci annuncio)
************************************/

#iw_menu_page {
	position: relative;
	z-index: 200;
	padding: 0 0 20px;
	background: #fff;
	/* border-bottom: 1px solid #ccc; */
	box-shadow: 0 2px 5px rgba(0,0,0,0.075);
}

#iw_menu_page_search .form-control {
	padding: .5rem 1rem;
	font: 300 18px var(--iw-font);
	border-color: #aaa;
	border-right: 0;
	box-shadow: none;
}

#iw_menu_page_search .btn {
	padding: .5rem 1.5rem;
	color: #aaa;
	background: #fff;
	border-color: #aaa;
	border-left: 0;
}

/* bordo blu su tutto il campo quando scrivi */

#iw_menu_page_search .input-group:focus-within .form-control,
#iw_menu_page_search .input-group:focus-within .btn {
	border-color: var(--iw-blue);
}

#iw_menu_page_search .btn:hover {
	color: var(--iw-blue);
}

#iw_menu_page_add {
	display: flex;
}

#iw_menu_page_add .btn {
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
	font: 400 18px/1 var(--iw-font);
}

/* stessa altezza per campo cerca, lente e inserisci annuncio */

@media ( min-width: 768px ) {
	#iw_menu_page_search .form-control,
	#iw_menu_page_search .btn,
	#iw_menu_page_add .btn {
		height: 42px;
	}
}

/* desktop only */

@media ( min-width: 992px ) {
	#iw_menu_page_add {
		padding-left: 0;
	}
}

/* mobile only */

@media ( max-width: 767.98px ) {
	#iw_menu_page_search .form-control,
	#iw_menu_page_search .btn {
		padding: .3rem 1rem .25rem;
	}
	#iw_menu_page_add {
		display: none;
	}
}

/* menu fisso sotto il menu principale */

@media ( min-height: 500px ) {
	#iw_menu_page {
		position: sticky;
		top: var(--iw-menu-h);
	}
}

/************************************
	HEADER HOME
************************************/

#iw_header_home {
	position: relative;
	margin-bottom: 65px;
	padding: 65px 0 121px; /* sotto: spazio per il nastro (56px) */
	color: #fff;
	text-align: center;
	background: var(--iw-blue) url("https://www.lunediacolazione.it/wp-content/uploads/2025/03/locarno-in-un-giorno-5.jpg") bottom / cover;
	background: var(--iw-blue) url("https://cloudfront-us-east-1.images.arcpublishing.com/christies/P3OVMB26HREEVDNOQXUOYBJLVY.jpg") center -520px;
}

/* testo leggibile sulla foto: velo scuro (piu scuro al centro, dietro al testo) e ombra sotto le lettere */

#iw_header_home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse 60% 70% at 50% 45%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .15) );
	pointer-events: none;
}

#iw_header_home > .container {
	position: relative; /* sopra il velo */
}

#iw_header_home h1,
#iw_header_home h2 {
	text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

#iw_header_home_wrap {
	max-width: 550px;
	margin: auto;
}

#iw_header_home h1 {
	margin-bottom: 12px;
	font: 700 28px/1.15 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

#iw_header_home h2 {
	margin-bottom: 35px;
	font: 400 21px/1.45 var(--iw-font); /* 400: il 300 e troppo sottile sulla foto */
}

/* campo cerca (.input-group: cosi non tocca il bottone del nastro) */

#iw_header_home .input-group .form-control,
#iw_header_home .input-group .btn {
	height: 50px;
}

#iw_header_home .input-group .form-control {
	padding: .5rem 1rem;
	font: 300 18px var(--iw-font);
	border-color: #aaa;
	border-right: 0;
}

#iw_header_home .input-group .btn {
	padding: .5rem 1.5rem;
	color: #aaa;
	background: #fff;
	border-color: #aaa;
	border-left: 0;
}

#iw_header_home .input-group .btn:hover {
	color: var(--iw-blue);
}

@media ( max-width: 767.98px ) {
	#iw_header_home {
		margin-bottom: 45px;
		padding: 45px 0 88px;
	}
	#iw_header_home h1 {
		font-size: 23px;
	}
	#iw_header_home h2 {
		margin-bottom: 25px;
		font-size: 18px;
	}
	#iw_header_home .input-group .form-control,
	#iw_header_home .input-group .btn {
		height: 46px;
	}
}

/* home: la barra cerca/inserisci in alto compare solo dopo l'header (che ha gia la ricerca) */

.iw_home #iw_menu_page {
	display: none;
}

@media ( min-height: 500px ) {
	.iw_home #iw_menu_page {
		display: block;
		position: fixed;
		top: var(--iw-menu-h);
		left: 0;
		width: 100%;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.iw_home #iw_menu_page.iw_show {
		visibility: visible;
		opacity: 1;
		transform: none;
	}
}

/* nastro "inserisci annuncio": in fondo all'header, sopra la foto, nero trasparente (come l'effetto commentato in v3)
   per l'effetto bianco: background rgba(255, 255, 255, .2) */

#iw_header_home2 {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 8px 0;
	font: 400 16px/40px var(--iw-font);
	color: #fff;
	background: rgba(0, 0, 0, .35);
	border-top: 1px solid rgba(255, 255, 255, .15);
	backdrop-filter: blur(4px); /* vetro smerigliato, dove il browser lo supporta */
}

/* nastro PROVA 2: blu pieno sotto la foto, come in v3 (il -65px lo attacca alla foto, che ha 65px di margine sotto)
   tenendo solo questo: togliere #iw_header_home2 (html e css) e il padding sotto dell'header torna 65px (mobile 45px) */

#iw_header_home3 {
	margin: -65px 0 65px;
	padding: 8px 0;
	font: 400 16px/40px var(--iw-font);
	color: #fff;
	background: var(--iw-blue-dark);
}

#iw_header_home2 .container,
#iw_header_home3 .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#iw_header_home2 a:first-child,
#iw_header_home3 a:first-child {
	color: #fff;
	text-decoration: none;
}

#iw_header_home2 a.btn,
#iw_header_home3 a.btn {
	padding: 10px 25px;
	font: 400 16px var(--iw-font);
}

/* mobile only */

@media ( max-width: 767.98px ) {
	#iw_header_home2,
	#iw_header_home3 {
		padding: 11px 0;
		line-height: 1.3;
		text-align: center;
	}
	#iw_header_home3 {
		margin: -45px 0 45px;
	}
	#iw_header_home2 .container,
	#iw_header_home3 .container {
		justify-content: center;
	}
	#iw_header_home2 a.btn,
	#iw_header_home3 a.btn {
		display: none;
	}
}

/************************************
	HEADER PAGE
************************************/

#iw_header_page {
	margin-bottom: 65px;
	padding: 50px 0;
	color: #fff;
	background: var(--iw-blue) url("https://media.myswitzerland.com/image/fetch/c_lfill,g_auto,w_3200,h_1800/f_auto,q_80,fl_keep_iptc/https://www.myswitzerland.com/-/media/celum%20connect/2022/06/08/11/50/32/lugano-monte-san-salvatore.jpg") center / cover;
}

#iw_header_page h1 {
	margin-bottom: 12px;
	font: 700 28px/1.15 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* slogan (nelle pagine: la prima frase del testo) */

#iw_header_page h2 {
	max-width: 760px;
	margin: 0;
	font: 300 21px/1.45 var(--iw-font);
}

/* mobile only */

@media ( max-width: 767.98px ) {
	#iw_header_page {
		margin-bottom: 40px;
		padding: 35px 0;
	}
	#iw_header_page h1 {
		font-size: 23px;
	}
	#iw_header_page h2 {
		font-size: 18px;
	}
}

/* header senza sfondo */

#iw_header_page2 {
	margin-bottom: 30px;
	padding: 40px 0 0;
	color: var(--iw-text);
}

#iw_header_page2 h1 {
	margin-bottom: 0;
	font: 700 24px/1.1 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

@media ( max-width: 767.98px ) {
	#iw_header_page2 {
		padding-top: 35px;
	}
}

/* pagina senza header */
.iw_page_space { margin-top: 65px; }
@media ( max-width: 767.98px ) {
	.iw_page_space {
		margin-top: 40px;
	}
}

/************************************
	PAGE
************************************/

#iw_page_wrap {
	padding-bottom: 2rem;
}

/* testi: piu grandi e piu spaziati */

#iw_page p {
	margin-bottom: 1.25rem;
	font: 300 18px/1.7 var(--iw-font);
	color: var(--iw-text);
}

#iw_page p b,
#iw_page p strong {
	font-weight: 700;
}

#iw_page h3,
.iw_title {
	margin-bottom: 35px;
	font: 700 28px/1.15 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.iw_subtitle {
	margin-top: -25px;
	margin-bottom: 38px;
	font: 300 18px/1.7 var(--iw-font);
	color: var(--iw-text);
}

.iw_title_space {
	height: 67px; /* altezza di un h3: allinea la sidebar alla colonna accanto */
}

/* testo delle pagine (page.php: termini, privacy, faq...): elenchi e titoli */

.iw_page_page #iw_page ul,
.iw_page_page #iw_page ol {
	margin-bottom: 1.25rem;
	padding-left: 1.5rem;
}

.iw_page_page #iw_page li {
	margin-bottom: .4rem;
	font: 300 18px/1.7 var(--iw-font);
}

.iw_page_page #iw_page li strong {
	font-weight: 700;
}

.iw_page_page #iw_page h4,
.iw_page_page #iw_page h5 {
	margin: 2.5rem 0 .75rem;
	font: 700 21px/1.3 var(--iw-font-title);
	letter-spacing: .3px;
	color: var(--iw-text);
}

.iw_page_page #iw_page h5 {
	font-size: 18px;
}

/* subito sotto il titolo della pagina: niente spazio doppio */

.iw_page_page #iw_page h3 + h4,
.iw_page_page #iw_page h3 + h5 {
	margin-top: 0;
}

@media ( max-width: 991.98px ) {
	#iw_page p,
	.iw_page_page #iw_page li {
		font-size: 17px;
	}
	#iw_page h3,
	.iw_title {
		font-size: 22px;
	}
	.iw_page_page #iw_page h4 {
		font-size: 19px;
	}
	.iw_title_space {
		height: 60px;
	}
}

/************************************
	HOMEPAGE
************************************/

/* categorie con icona (scorrono in orizzontale) */

#iw_home_categories {
	display: flex;
	gap: 10px;
	margin-bottom: 45px;
	padding-bottom: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

#iw_home_categories a {
	flex: 1 0 120px; /* poche categorie: si allargano su tutta la riga; tante: 120px e la riga scorre */
	text-align: center;
	text-decoration: none;
	color: var(--iw-text);
	scroll-snap-align: start;
}

/* icona: stessa linea e stesso colore per tutte, in un cerchio chiaro (al passaggio del mouse blu pieno) */

#iw_home_categories .iw_cat_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 10px;
	color: var(--iw-blue);
	background: #edf2f7;
	border-radius: 50%;
	transition: background-color .15s, color .15s;
}

#iw_home_categories .iw_cat_icon .iw_icon {
	width: 30px;
	height: 30px;
	stroke-width: 1.6;
}

#iw_home_categories a:hover .iw_cat_icon {
	color: #fff;
	background: var(--iw-blue);
}

#iw_home_categories span {
	display: block;
	font: 300 16px/20px var(--iw-font);
	hyphens: auto; /* parole lunghe (elettrodomestici) vanno a capo in italiano */
}

#iw_home_categories a:hover span {
	color: #000;
	font-weight: 400;
}

/* chi siamo */

#iw_home_about {
	margin-top: 3.5rem;
}

#iw_home_about h3 {
	margin-bottom: 1rem;
}

#iw_home_about p {
	margin-bottom: 0;
}

/************************************
	LISTINGS (box annunci)
************************************/

.iw_listings {
	margin-bottom: 10px;
}

.iw_listings .iw_listings_wrap {
	margin-bottom: 25px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	box-shadow: var(--iw-shadow);
}

.iw_listings .iw_listings_img {
	text-align: center;
	border-bottom: 1px solid #ccc;
}

.iw_listings .iw_listings_img img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.iw_listings .iw_listings_text,
.iw_listings .iw_listings_foot {
	padding: 0 1.5rem;
}

.iw_listings .iw_listings_text h4 {
	margin: 21px 0 4px;
}

.iw_listings .iw_listings_text h4 a {
	display: block;
	overflow: hidden;
	font: 600 18px/22px var(--iw-font);
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	color: var(--iw-text);
}

.iw_listings .iw_listings_text p,
#iw_page .iw_listings_text p { /* #iw_page: piu forte dei testi delle pagine */
	margin-bottom: 7px;
	font: 300 16px/20px var(--iw-font);
}

/* descrizione: massimo 2 righe */

.iw_listings .iw_listings_text p a {
	display: -webkit-box;
	height: 40px;
	overflow: hidden;
	line-height: 20px;
	text-decoration: none;
	color: var(--iw-text);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.iw_listings .iw_listings_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 23px;
}

.iw_listings .iw_listings_read {
	font-weight: 600;
	text-decoration: underline;
}

/* prezzo al posto delle stelle di v3 */

.iw_listings .iw_listings_price {
	font-weight: 700;
	color: var(--iw-blue);
}

/************************************
	CAROUSEL (sostituisce flickity)

	<div class="iw_carousel_wrap">
		<div class="iw_carousel" data-autoplay="4000"> ...celle... </div>
		<button class="iw_carousel_prev"> <button class="iw_carousel_next">
	</div>
************************************/

.iw_carousel_wrap {
	position: relative;
}

.iw_carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.iw_carousel::-webkit-scrollbar {
	display: none;
}

.iw_carousel > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.iw_carousel_prev,
.iw_carousel_next {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 20px;
	color: #999;
	background: rgba(255, 255, 255, .9);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	transform: translateY(-50%);
}

.iw_carousel_prev:hover,
.iw_carousel_next:hover {
	color: var(--iw-text);
}

/* frecce sul bordo dei box (fuori dal contenitore solo se c'e spazio, altrimenti la pagina scorre di lato) */

.iw_carousel_prev {
	left: -12px;
}

.iw_carousel_next {
	right: -12px;
}

@media ( min-width: 1240px ) {
	.iw_carousel_prev {
		left: -45px;
	}
	.iw_carousel_next {
		right: -45px;
	}
}

/* annunci in vetrina e correlati: 3 / 2 / 1 per riga */

#iw_featured_carousel,
#iw_related_carousel {
	margin: 0 calc( var(--iw-gutter) / -2 ) 2rem;
}

#iw_featured_carousel > *,
#iw_related_carousel > * {
	width: 33.333333%;
	padding: 0 calc( var(--iw-gutter) / 2 );
}

@media ( max-width: 991.98px ) {
	#iw_featured_carousel > *,
	#iw_related_carousel > * {
		width: 50%;
	}
}

/* telefono: si vede un pezzo del prossimo annuncio (si capisce che scorre) */

@media ( max-width: 575.98px ) {
	#iw_featured_carousel > *,
	#iw_related_carousel > * {
		width: 88%;
	}
}

/************************************
	BROWSE (cerca)
************************************/

/* filtri: categoria, distretto, ordine */

#iw_browse_filters {
	padding: 12px 0;
	background: #fff;
	border-bottom: 1px solid #ccc;
}

#iw_browse_filters form {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 10px;
}

/* mobile: categoria su tutta la riga, distretto e ordine sotto */

@media ( max-width: 767.98px ) {
	#iw_browse_filters form {
		grid-template-columns: 1fr 1fr;
	}
	#iw_browse_filters .form-select:first-of-type {
		grid-column: 1 / -1;
	}
}

/************************************
	FAQ PAGE
	INSERISCI ANNUNCIO
	ACCOUNT
************************************/

/* domande e risposte con <details><summary>: si aprono senza javascript

	<div class="iw_faq">
	<details><summary>Domanda?</summary><p>Risposta</p></details>
	</div>
*/

.iw_faq {
	margin-bottom: 1rem;
	border-top: 1px solid var(--iw-border);
}

.iw_faq details {
	border-bottom: 1px solid var(--iw-border);
}

.iw_faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 20px 0;
	font: 600 19px/1.4 var(--iw-font);
	color: var(--iw-text);
	list-style: none;
	cursor: pointer;
}

@media ( max-width: 991.98px ) {
	.iw_faq summary {
		padding: 17px 0;
		font-size: 18px;
	}
}

.iw_faq summary::-webkit-details-marker {
	display: none;
}

.iw_faq summary:hover {
	color: var(--iw-blue);
}

/* freccia */

.iw_faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	margin: -4px 4px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform .2s ease-in-out;
}

.iw_faq details[open] summary::after {
	margin-top: 4px;
	transform: rotate( -135deg );
}

#iw_page .iw_faq details p {
	margin: -6px 0 22px;
}

/************************************
	LOGIN (la pagina errore e in errorDEV.css)
************************************/

/* mobile: l'header e nascosto, un po di spazio sotto il menu */

@media ( max-width: 767.98px ) {
	.iw_page_login {
		padding-top: 35px;
	}
}

/************************************
	ACCOUNT (dashboard.php)
************************************/

/* titolo e bottone inserisci sulla stessa riga */

.iw_dash_head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 25px;
}

#iw_page .iw_dash_head h3 {
	margin-bottom: 0;
}

/* tabella annunci */

.iw_dash {
	width: 100%;
	border-collapse: collapse;
	font: 300 16px/1.4 var(--iw-font);
}

.iw_dash th,
.iw_dash td {
	padding: 12px 8px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--iw-border);
}

/* colonne foto e azioni strette: il testo dell'annuncio sta subito accanto alla foto */

.iw_dash .iw_dash_sm:first-child,
.iw_dash .iw_dash_actions {
	width: 1%;
}

.iw_dash th {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--iw-muted);
}

.iw_dash img {
	display: block;
	width: 90px;
	max-width: none; /* colonna all'1%: con max-width 100% la foto sparirebbe */
	height: 64px;
	object-fit: cover;
	border-radius: var(--iw-radius);
}

.iw_dash td > a {
	font-weight: 700;
	text-decoration: none;
	color: var(--iw-text);
}

.iw_dash td > a:hover {
	text-decoration: underline;
}

.iw_dash small {
	display: block;
	font-size: 14px;
	color: var(--iw-muted);
}

/* stato: grigio in attesa, verde online, giallo in vetrina, rosso scaduto */

.iw_status {
	display: inline-block;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
	background: var(--iw-muted);
	border-radius: 20px;
}

.iw_status_on { background: var(--iw-green); }
.iw_status_feat { color: var(--iw-text); background: var(--iw-yellow); }
.iw_status_off { background: var(--iw-red); }

/* azioni: rinnova, vetrina, elimina */

.iw_dash_actions {
	text-align: right !important;
	white-space: nowrap;
}

.iw_dash_actions form {
	display: inline;
}

.iw_dash_actions .btn {
	padding: .25rem .6rem;
	font-size: 14px;
}

.iw_dash_actions .btn:not(.btn-primary) {
	background: #eee;
}

.iw_dash_actions .iw_btn_del {
	color: var(--iw-red);
}

/* aiuto con la (i) accanto a un'etichetta: al passaggio del mouse o al tocco (telefono) */

.iw_tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 6px;
	padding: 0;
	vertical-align: 1px;
	font-size: 17px;
	color: var(--iw-muted);
	background: none;
	border: 0;
	cursor: help;
}

.iw_tip::after {
	content: attr(data-tip);
	position: absolute;
	top: calc( 100% + 6px ); /* sotto: sopra finirebbe sotto il menu fisso */
	left: 0;
	z-index: 10;
	width: max-content;
	max-width: 220px; /* telefono: resta dentro lo schermo */
	padding: 8px 12px;
	font: 400 14px/1.4 var(--iw-font);
	text-align: left;
	color: #fff;
	background: var(--iw-dark);
	border-radius: var(--iw-radius);
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s, visibility .15s;
	pointer-events: none;
}

.iw_tip:hover,
.iw_tip.iw_open {
	color: var(--iw-blue);
}

.iw_tip:hover::after,
.iw_tip:focus-visible::after,
.iw_tip.iw_open::after {
	visibility: visible;
	opacity: 1;
}

/* promuovi: cosa comprende e prezzo */

#iw_page .iw_promote_list {
	margin: 0 0 20px;
	padding-left: 1.2rem;
	font: 300 18px/1.8 var(--iw-font);
}

#iw_page .iw_promote_price {
	margin-bottom: 20px;
	font: 700 32px var(--iw-font-title);
	color: var(--iw-blue);
}

#iw_page .iw_promote_skip {
	margin-top: 2.5rem;
	font-size: 16px;
}

.iw_promote_skip a {
	color: var(--iw-muted);
}

/* moderazione: vetrina per numero, testo dell'annuncio, motivo e rifiuta sulla stessa riga */

.iw_moderate_vetrina {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
	padding: 15px;
	background: var(--iw-light);
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
}

.iw_moderate_vetrina .form-label {
	margin: 0;
	font-size: 16px;
}

.iw_moderate_vetrina .form-control {
	width: 110px;
}

#iw_page .iw_moderate_text {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.iw_page_moderate .iw_dash_actions form {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin-bottom: 6px;
}

.iw_page_moderate .iw_dash_actions .form-select {
	width: auto;
	max-width: 220px;
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 14px;
}

/* preferiti: il resto e in favoritesDEV.css (si carica solo in quella pagina) */

/* mostra altri sotto la tabella */

.iw_more_wrap {
	margin-top: 25px;
	text-align: center;
}

.iw_more.iw_loading {
	opacity: .5;
	pointer-events: none;
}

/* cuore pieno: annuncio gia nei preferiti */

.iw_single_actions .iw_fav_on,
#iw_menu_single .iw_fav_on {
	color: var(--iw-pink);
}

.iw_fav_on .iw_icon {
	fill: currentColor;
}

/* profilo: dati, e-mail e password in 3 moduli separati da una riga */

.iw_page_profile #iw_page form + form {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--iw-border);
}

#iw_page .iw_profile_delete {
	margin: 3rem 0 0;
	font-size: 15px;
}

.iw_profile_delete a {
	color: var(--iw-muted);
}

/* telefono: niente foto, scadenza e visite; le azioni vanno a capo */

@media ( max-width: 767.98px ) {
	.iw_dash .iw_dash_sm {
		display: none;
	}
	.iw_dash_actions {
		white-space: normal;
	}
	.iw_dash_actions .btn {
		margin: 2px 0;
	}
}

/************************************
	SIDEBAR PAGE
************************************/

#iw_sidebar_page {
	padding-left: 6rem;
	border-left: 1px solid var(--iw-border);
	font: 300 18px/26px var(--iw-font);
}

.iw_sidebar_wrap h4 {
	margin-bottom: 25px;
	font: 700 24px/1.1 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.iw_sidebar_wrap h4:not(:first-child) {
	margin-top: 45px;
}

.iw_sidebar_wrap p a {
	text-decoration: none;
}

#iw_sidebar_page .list-unstyled li {
	margin-bottom: 5px;
}

#iw_sidebar_page .list-unstyled li a {
	text-decoration: none;
	color: var(--iw-text);
}

#iw_sidebar_page .list-unstyled li a:hover {
	color: #000;
	text-decoration: underline;
}

/* tablet: colonna stretta */

@media ( max-width: 991.98px ) {
	#iw_sidebar_page {
		padding-left: 2rem;
	}
	.iw_sidebar_wrap h4 {
		font-size: 20px;
	}
}

/* mobile: sotto il contenuto */

@media ( max-width: 767.98px ) {
	#iw_sidebar_page {
		padding-left: calc( var(--iw-gutter) / 2 );
		border-left: 0;
	}
	#iw_sidebar_page .iw_sidebar_wrap {
		margin-top: 30px;
		padding-top: 35px;
		border-top: 1px solid var(--iw-border);
	}
}

/************************************
	SIDEBAR CATEGORIES
************************************/

#iw_sidebar_cat .iw_sidebar_wrap {
	padding: 50px 50px 35px;
	background: #fff;
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	box-shadow: var(--iw-shadow);
}

#iw_sidebar_cat .iw_sidebar_wrap h4 {
	margin-bottom: 28px;
}

#iw_sidebar_cat .list-unstyled li a {
	display: block;
	padding: 3px 0;
	font: 300 18px/26px var(--iw-font);
	text-decoration: none;
	color: var(--iw-text);
}

#iw_sidebar_cat .list-unstyled li a:hover {
	color: #000;
	font-weight: 400;
}

@media ( max-width: 991.98px ) {
	#iw_sidebar_cat {
		display: none;
	}
}

/************************************
	SINGLE (pagina annuncio)
************************************/

/* titolo dell'annuncio (sotto le foto) */

.iw_page_single #iw_page h1 {
	margin: 0 0 14px;
	font: 700 34px/1.2 var(--iw-font-title);
	letter-spacing: -.3px;
	color: var(--iw-text);
}

@media ( max-width: 767.98px ) {
	.iw_page_single #iw_page h1 {
		font-size: 25px;
	}
}

/* categoria sotto il titolo: etichetta con icona */

.iw_single_cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 30px;
	padding: 5px 14px 5px 6px;
	font: 400 15px var(--iw-font);
	text-decoration: none;
	color: var(--iw-text);
	background: var(--iw-light);
	border: 1px solid var(--iw-border);
	border-radius: 30px;
}

.iw_single_cat:hover {
	border-color: #bbb;
}

.iw_single_cat .iw_icon {
	width: 22px;
	height: 22px;
	padding: 3px;
	color: #fff;
	background: var(--iw-blue);
	border-radius: 50%;
	stroke-width: 2;
}

/* foto: sopra, larghe quanto la pagina, intere su sfondo sfocato della stessa foto */

.iw_single_gallery {
	margin-bottom: 60px;
	overflow: hidden;
	background: #222;
}

.iw_single_gallery .iw_carousel > a {
	position: relative;
	display: block;
	width: 100%;
	height: 450px;
	overflow: hidden;
}

.iw_single_gallery .iw_carousel > a::before {
	content: "";
	position: absolute;
	inset: -20px;
	background: var(--iw-img) center / cover;
	filter: blur(18px);
	opacity: .6;
}

.iw_single_gallery img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.iw_single_gallery .iw_carousel_prev {
	left: 20px;
}

.iw_single_gallery .iw_carousel_next {
	right: 20px;
}

@media ( max-width: 767.98px ) {
	.iw_single_gallery {
		margin-bottom: 25px;
	}
	.iw_single_gallery .iw_carousel > a {
		height: 280px;
	}
	.iw_single_gallery .iw_carousel_prev {
		left: 10px;
	}
	.iw_single_gallery .iw_carousel_next {
		right: 10px;
	}
}

.iw_page_single #iw_page h4 {
	margin: 2.5rem 0 1rem;
	font: 700 21px/1.3 var(--iw-font-title);
}

/* tabella dettagli */

.iw_table {
	width: 100%;
	border-collapse: collapse;
	font: 300 17px var(--iw-font);
}

.iw_table th,
.iw_table td {
	padding: 12px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--iw-border);
}

/* ultima riga senza bordo: anche th (l'etichetta a sinistra), non solo td */

.iw_table tr:last-child th,
.iw_table tr:last-child td {
	border-bottom: 0;
}

.iw_table th {
	width: 40%;
	font-weight: 300;
	color: var(--iw-muted);
}

.iw_table td {
	font-weight: 600;
}

/* sidebar: scheda con prezzo e contatta (resta ferma mentre si scorre) */

.iw_card {
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	box-shadow: var(--iw-shadow);
	font: 300 17px/1.6 var(--iw-font);
}

/* prezzo a sinistra, visite a destra (se non c'e spazio le visite vanno sotto, sempre a destra) */

.iw_card_price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin-bottom: .5rem;
	font: 700 28px var(--iw-font-title);
	white-space: nowrap; /* "CHF 1'800.-" mai spezzato */
	color: var(--iw-blue);
}

.iw_card_price span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font: 300 15px var(--iw-font);
	color: var(--iw-muted);
}

/* telefono: sotto contatta, solo bordo */

.iw_btn_phone {
	margin-top: 10px;
	color: var(--iw-blue);
	border: 1px solid var(--iw-blue);
}

.iw_btn_phone:hover {
	color: #fff;
	background: var(--iw-blue);
}

/* solo telefono: pieno come il bottone contatta */

.iw_btn_phone.btn-primary {
	margin-top: 0;
	color: #fff;
}

.iw_single_actions {
	display: flex;
	gap: 10px;
	margin: 12px 0 18px;
}

.iw_single_actions .btn {
	flex: 1;
	padding: .6rem;
	font-size: 20px;
	color: #333;
	background: #eee;
}

.iw_single_actions .btn:hover {
	background: #e2e2e2;
}

.iw_link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 15px;
	text-decoration: none;
	color: var(--iw-muted);
}

.iw_link:hover {
	text-decoration: underline;
	color: var(--iw-text);
}

@media ( min-width: 992px ) {
	.iw_card {
		position: sticky;
		top: calc( var(--iw-menu-h) + 90px ); /* sotto menu e barra cerca */
	}
}

/* annunci simili */

#iw_related {
	padding: 45px 0 20px;
	border-top: 1px solid var(--iw-border);
}

/* finestra contatta (dialog: si chiude con esc, la x o cliccando fuori) */

.iw_dialog {
	width: min( 600px, calc( 100% - 32px ) );
	padding: 0;
	border: 0;
	border-radius: var(--iw-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.iw_dialog::backdrop {
	background: rgba(0, 0, 0, .5);
}

.iw_dialog form {
	position: relative;
	padding: 2rem;
}

.iw_dialog h3 {
	margin-bottom: 1rem;
	font: 700 22px/1.2 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.iw_dialog_close {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 6px;
	font-size: 22px;
	color: var(--iw-muted);
	background: none;
	border: 0;
}

/* barra in basso (solo mobile): indietro, preferiti, condividi, contatta */

#iw_menu_single {
	display: none;
}

@media ( max-width: 767.98px ) {
	#iw_menu_single {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 250;
		padding: 10px 0;
		background: #fff;
		border-top: 1px solid #ccc;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
	}
	#iw_menu_single .container {
		display: flex;
		gap: 8px;
	}
	#iw_menu_single .btn {
		padding: .55rem .9rem;
		font-size: 20px;
		color: #333;
		background: #eee;
	}
	#iw_menu_single .btn-primary {
		flex: 1;
		font-size: 17px;
		color: #fff;
		background: var(--iw-blue);
	}
	.iw_single {
		padding-bottom: 66px; /* il footer non finisce sotto la barra */
	}
	.iw_single #iw_backtop {
		bottom: 82px;
	}
}

/************************************
	SPONSOR
************************************/

#iw_sponsor {
	padding: 50px 0 35px;
	background: #fff;
}

/* titolo con riga ai lati */

#iw_sponsor h5 {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 10px 0 30px;
	font: 600 16px var(--iw-font);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #bbb;
}

#iw_sponsor h5::before,
#iw_sponsor h5::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--iw-border);
}

/* le celle hanno 10px ai lati: con -10px il primo e l'ultimo box toccano i bordi della pagina */

#iw_sponsor_carousel {
	margin: 0 -10px;
}

#iw_sponsor_carousel > * {
	width: 25%;
	padding: 0 10px;
}

/* logo al centro di un box con bordo grigio, tutti alti uguali */

#iw_sponsor_carousel a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	padding: 15px;
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	transition: border-color .15s;
}

#iw_sponsor_carousel a:hover {
	border-color: #bbb;
}

#iw_sponsor_carousel img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 60px;
}

@media ( max-width: 991.98px ) {
	#iw_sponsor {
		padding: 30px 0;
	}
	#iw_sponsor_carousel > * {
		width: 33.333333%;
	}
}

@media ( max-width: 575.98px ) {
	#iw_sponsor_carousel > * {
		width: 50%;
	}
	#iw_sponsor_carousel a {
		height: 80px;
	}
}

/************************************
	FOOTER MENU
************************************/

#iw_footer_menu {
	padding: 60px 0 20px;
	font: 300 16px var(--iw-font);
	color: var(--iw-footer-text);
	background: var(--iw-dark);
}

#iw_footer_menu a {
	text-decoration: none;
	color: var(--iw-footer-text);
}

#iw_footer_menu a:hover {
	color: #fff;
}

#iw_footer_menu h5 {
	margin-bottom: 22px;
}

/* titolo: su desktop e solo testo, su mobile apre la lista */

.iw_footer_toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	font: 700 18px/1 var(--iw-font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
	color: var(--iw-footer-text);
	background: none;
	border: 0;
	cursor: default;
}

.iw_footer_toggle .iw_icon {
	display: none;
	transition: transform 200ms ease-in-out;
}

#iw_footer_menu ul.list-unstyled {
	margin-bottom: 30px;
}

#iw_footer_menu ul.list-unstyled li {
	padding-bottom: 14px;
}

/* a destra: powered by ipelweb e social */

#iw_footer_last {
	text-align: right;
}

.iw_footer_label {
	margin: 0 0 10px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #999;
}

#iw_footer_last img {
	width: 130px;
	height: auto;
	margin-bottom: 30px;
	opacity: .9;
}

#iw_footer_last a:hover img {
	opacity: 1;
}

#iw_footer_social {
	justify-content: flex-end;
	margin-bottom: 20px;
}

#iw_footer_social a {
	background: transparent;
	border: 1px solid #555;
}

#iw_footer_social a:hover {
	background: #333;
}

#iw_footer_social .iw_icon {
	width: 20px;
	height: 20px;
}

/* tablet: powered by sotto le voci, a sinistra */

@media ( max-width: 991.98px ) {
	#iw_footer_last {
		text-align: left;
	}
	#iw_footer_social {
		justify-content: flex-start;
	}
}

/* mobile only: fisarmonica, powered by al centro */

@media ( max-width: 767.98px ) {
	#iw_footer_menu {
		padding: 45px 0 0;
	}
	#iw_footer_menu h5 {
		margin-bottom: 0;
		border-bottom: 1px solid #333;
	}
	.iw_footer_toggle {
		padding: 16px 0;
		font-size: 17px;
		cursor: pointer;
	}
	.iw_footer_toggle .iw_icon {
		display: block;
	}
	.iw_footer_toggle.iw_opened .iw_icon {
		transform: rotate( -180deg );
	}
	#iw_footer_menu ul.list-unstyled {
		display: none;
		margin: 0;
		padding-top: 15px;
	}
	#iw_footer_menu ul.list-unstyled.iw_open {
		display: block;
	}
	#iw_footer_last {
		margin-top: 35px;
		text-align: center;
	}
	#iw_footer_social {
		justify-content: center;
	}
}

/************************************
	FOOTER ABOUT (copyright e torna su)
************************************/

#iw_footer_about {
	padding: 20px 0;
	color: var(--iw-footer-text);
	background: var(--iw-darker);
}

#iw_footer_about .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

#iw_footer_about a {
	text-decoration: none;
	color: var(--iw-footer-text);
}

#iw_footer_about a:hover {
	color: #fff;
}

#iw_footer_copyright {
	font: 300 16px/32px var(--iw-font);
}

.iw_totop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 300 16px/32px var(--iw-font);
}

/* spazio per il bottone torna su fisso (in basso a destra) */

@media ( min-width: 768px ) {
	.iw_totop {
		margin-right: 45px;
	}
}

@media ( max-width: 767.98px ) {
	#iw_footer_about .container {
		flex-direction: column-reverse;
		gap: 5px;
	}
	#iw_footer_copyright {
		line-height: 24px;
		text-align: center;
	}
	#iw_footer_copyright span {
		display: none;
	}
}

/************************************
	OFFCANVAS MENU (menu mobile laterale)
************************************/

/* parte sotto la barra del menu (z-index 300) cosi logo, burger e utente restano visibili sopra */

#iw_offcanvas_modal {
	position: fixed;
	inset: var(--iw-menu-h) 0 0;
	z-index: 298;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s, visibility .4s;
}

#iw_offcanvas {
	position: fixed;
	top: var(--iw-menu-h);
	left: 0;
	z-index: 299;
	width: 80%;
	max-width: 300px;
	height: calc( 100% - var(--iw-menu-h) );
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
	overflow-y: auto;
	overscroll-behavior: contain;
	font: 300 18px var(--iw-font);
	background: #fff;
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform .4s ease, visibility .4s;
}

/* aperto (classe sul body, dal js) */

.iw_offcanvas_open {
	overflow: hidden;
}

.iw_offcanvas_open #iw_menu {
	position: sticky; /* anche sui telefoni in orizzontale, se no la barra sopra il menu non si vede */
	top: 0;
}

.iw_offcanvas_open #iw_offcanvas {
	visibility: visible;
	transform: none;
}

.iw_offcanvas_open #iw_offcanvas_modal {
	opacity: 1;
	visibility: visible;
}

#iw_offcanvas a {
	display: flex;
	align-items: center;
	padding: 8px 9% 8px 8%;
	text-decoration: none;
	color: #818181;
	transition: color .3s;
}

#iw_offcanvas a:hover {
	color: var(--iw-darker);
}

#iw_offcanvas a .iw_icon:first-child {
	margin-right: 12px;
}

#iw_offcanvas a .iw_arrow {
	margin-left: 10px;
}

#iw_offcanvas a.iw_offcanvas_sub {
	padding-left: calc( 8% + 30px );
	font-size: 16px;
}

#iw_offcanvas .iw_btn {
	display: flex;
	margin: 30px 9% 30px 8%;
	padding: .7rem 1rem;
	color: #fff;
}

#iw_offcanvas .iw_btn:hover {
	color: #fff;
}

#iw_offcanvas .iw_btn .iw_icon:first-child {
	margin-right: 10px;
}

/************************************
	BACK TO TOP
************************************/

#iw_backtop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 20px;
	color: #fff;
	background: rgba(0, 51, 102, .85);
	border-radius: 7px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

#iw_backtop.iw_show {
	opacity: 1;
	visibility: visible;
}

#iw_backtop:hover {
	color: #fff;
	background: var(--iw-blue);
}

/************************************
	MSG
************************************/

#iw_msg_wrap .iw_msg {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 11;
	width: 320px;
	padding: 25px;
	font: 400 15px/1.4 var(--iw-font);
	text-align: left;
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
	animation: iw_fadein .3s linear;
	transition: opacity .3s;
}

#iw_msg_wrap .iw_msg.iw_hide {
	opacity: 0;
}

#iw_msg_wrap .iw_error {
	background: rgba(136, 0, 0, .85);
}

#iw_msg_wrap .iw_success {
	background: rgba(0, 195, 77, .85);
}

@media ( max-width: 991.98px ) {
	#iw_msg_wrap .iw_msg {
		left: 20px;
		width: auto;
		padding: 20px;
	}
}

/************************************
	COOKIE BAR
************************************/

#iw_cookiebar {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 16;
	padding: 14px 0;
	font: 300 14px/1.5 var(--iw-font);
	color: #fff;
	background: rgba(0, 0, 0, .85);
}

#iw_cookiebar.iw_show {
	display: block;
}

#iw_cookiebar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

#iw_cookiebar p {
	margin: 0;
}

#iw_cookiebar a {
	font-weight: 600;
	color: #fff;
}

#iw_cookiebar .btn {
	padding: 8px 22px;
	font: 400 16px/14px var(--iw-font);
	font-weight: 700;
	color: #000;
	background: #e7e7e7;
	border-radius: 3px;
}

#iw_cookiebar .btn:hover {
	background: #fff;
}

@media ( max-width: 767.98px ) {
	#iw_cookiebar {
		font-size: 13px;
	}
	#iw_cookiebar .container {
		flex-direction: column;
		align-items: stretch;
		gap: 9px;
	}
	#iw_cookiebar .btn {
		display: block;
	}
}

/************************************
	MENO ANIMAZIONI (se l'utente lo chiede nel sistema)
************************************/

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}