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

	MercatinoTicino - stile (senza librerie)

	@copyright: IPELWEB
	@author: Ilario Pellandini
	@updated: 2026-11-03

	FONT
	VARIABILI
	BASE
	GRIGLIA
	UTILITY
	FORM
	BOTTONI
	ICONE
	MENU
	MEGA MENU
	DROPDOWN
	MENU PAGE
	HEADER CON LA FOTO
	PAGE
	SEZIONI (riquadro bianco, titoli, invito, testo)
	CATEGORIE
	BOX ANNUNCI
	CAROUSEL
	BROWSE (cerca)
	FAQ PAGE
	ACCOUNT
	SIDEBAR PAGE
	FINESTRE
	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, adminDEV.css, dashboardDEV.css, errorDEV.css, favoritesDEV.css, loginDEV.css (anche registrati), profileDEV.css, singleDEV.css, statisticsDEV.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: #0a3a6b;
	--iw-blue-dark: #002d5b;
	--iw-blue-light: #1557a0;
	--iw-text: #10213a;
	--iw-muted: #5d6b7e;
	--iw-border: #e2e8f0;
	--iw-input: #ced4da;
	--iw-bg: #f3f5f8; /* sfondo della pagina */
	--iw-light: #eaf1f9;
	--iw-yellow: #ffc94d;
	--iw-pink: #ed4e6e;
	--iw-red: #880000;
	--iw-green: #00c34d;
	--iw-dark: #232323;
	--iw-darker: #181818;
	--iw-navy: #0b1d33; /* footer e cookie */
	--iw-footer-text: #b9c4d4;

	/* 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: 14px;
	--iw-radius-lg: 24px;
	--iw-shadow: 0 6px 18px rgba(16, 33, 58, .08);
	--iw-shadow-lg: 0 18px 44px rgba(16, 33, 58, .12);
	--iw-gutter: 1.5rem;
	--iw-menu-h: 76px; /* altezza menu fisso */
	--iw-item-h: 380px; /* altezza di tutti i box annuncio */
	--iw-rise: 64px; /* quanto salgono i riquadri bianchi sopra la foto */
}

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

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

@media ( max-width: 575.98px ) {
	:root {
		--iw-item-h: 320px;
	}
}

/************************************
	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: var(--iw-bg);
	-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 {
	position: relative; /* l'aiuto (i) dell'etichetta si apre dentro il campo (.iw_tip) */
	margin-bottom: 20px;
}

.form-label {
	display: inline-block;
	margin-bottom: 4px;
	font: 600 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: .8rem 1.1rem;
	font-size: 16px;
	line-height: 1.5;
	color: var(--iw-text);
	background-color: #fbfcfe;
	border: 1.5px solid var(--iw-border);
	border-radius: var(--iw-radius);
	appearance: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
	background-color: #fff;
	border-color: var(--iw-blue-light);
	outline: 0;
	box-shadow: 0 0 0 4px rgba(21, 87, 160, .12);
}

/* 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-select {
	padding-right: 2.5rem;
	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, gratis, ricordami): come i campi (sfondo, bordo, blu quando la usi), spuntata blu con il segno bianco */

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

.form-check-input {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	background: #fbfcfe center / 14px no-repeat;
	border: 1.5px solid var(--iw-border);
	border-radius: 6px;
	appearance: none;
	cursor: pointer;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s;
}

.form-check-input:hover {
	border-color: var(--iw-blue-light);
}

.form-check-input:focus-visible {
	border-color: var(--iw-blue-light);
	outline: 0;
	box-shadow: 0 0 0 4px rgba(21, 87, 160, .12);
}

.form-check-input:checked {
	background-color: var(--iw-blue);
	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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8.5l3.5 3.5 6.5-7.5'/%3e%3c/svg%3e");
	border-color: var(--iw-blue);
}

.form-check-input:user-invalid {
	border-color: #dc3545;
}

.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);
}

/* password con l'occhio a destra per vederla (accedi, registrati; js in layoutDEV.js) */

.iw_pass {
	position: relative;
}

.iw_pass .form-control {
	padding-right: 48px;
}

.iw_pass .form-control::-ms-reveal {
	display: none; /* edge ha il suo occhio: ne basta uno */
}

.iw_pass_eye {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 100%;
	padding: 0;
	font-size: 20px;
	color: var(--iw-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.iw_pass_eye:hover,
.iw_pass_eye[aria-pressed="true"] {
	color: var(--iw-blue);
}

/* 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): per ora solo le specifiche in inserisci (addDEV.css ne mette al massimo 2) */

.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: 999px;
	cursor: pointer;
	transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}

.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;
}

.btn-primary,
.iw_btn {
	padding: .8rem 1.6rem;
	font: 600 16px/1.2 var(--iw-font);
	color: #fff;
	background: var(--iw-blue);
	border-color: var(--iw-blue);
	box-shadow: 0 8px 20px rgba(10, 58, 107, .25);
}

.btn-primary:hover,
.iw_btn:hover {
	color: #fff;
	background: var(--iw-blue-light);
	border-color: var(--iw-blue-light);
	transform: translateY( -1px );
}

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

.iw_btn {
	margin-top: 1.5rem;
}

/* 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 2px;
	padding: .55rem 1rem;
	font: 500 16px var(--iw-font);
	text-decoration: none;
	color: var(--iw-text);
	border-radius: 999px;
	transition: background-color .2s, color .2s;
}

#iw_menu_desktop .nav-link:hover,
#iw_menu_desktop .nav-link.active {
	color: var(--iw-blue);
	background: var(--iw-light);
}

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

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

/* 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, grigio come lei (color) */




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

.burger span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 12px;
	background-color: currentColor;
	transition: background-color .5s ease-in-out;
}

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

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

.burger span::after {
	margin-top: -2px;
	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: #aaa;
	cursor: pointer;
	background: transparent;
	border: none;
}

#iw_menu_user .iw_icon {
	stroke-width: 1.5; /* 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;
	}
}

/* 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 #ccc;
	border-radius: 18px;
	box-shadow: var(--iw-shadow-lg);
}

.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);
}

/* messaggi non letti: numero rosa (tendina account, conversazioni), nel menu un pallino sull'icona utente (telefono e desktop) */

.iw_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 6px;
	padding: 0 6px;
	font: 700 12px/1 var(--iw-font);
	color: #fff;
	background: var(--iw-pink);
	border-radius: 10px;
}

#iw_menu_user .dropdown-toggle,
#iw_menu_desktop .dropdown-toggle {
	position: relative;
}

.iw_badge_dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 10px;
	height: 10px;
	background: var(--iw-pink);
	border: 2px solid #fff;
	border-radius: 50%;
}

/* desktop: l'icona e all'inizio del link "account", il pallino sul suo angolo in alto a destra */

#iw_menu_desktop .iw_badge_dot {
	top: 8px;
	right: auto;
	left: 10px;
}

/* badge pro (account premium), solo testo: accanto al nome dell'azienda (pagina annuncio, pagina azienda) e alla sezione azienda del profilo */

.iw_badge_pro {
	display: inline-block;
	padding: 3px 9px;
	font: 700 11px/1.3 var(--iw-font-title);
	letter-spacing: .08em;
	white-space: nowrap;
	vertical-align: middle;
	color: #fff;
	background: var(--iw-blue);
	border-radius: 20px;
}

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

#iw_menu_page {
	position: relative;
	z-index: 200;
	padding: 4px 0 16px;
	background: #fff;
	box-shadow: 0 10px 24px -18px rgba(16, 33, 58, .35);
}

/* campo e lente in un'unica pillola, con il bordo blu quando scrivi */

#iw_menu_page_search .input-group {
	background: #fff;
	border: 1.5px solid var(--iw-border);
	border-radius: 999px;
	transition: border-color .2s, box-shadow .2s;
}

#iw_menu_page_search .input-group:focus-within {
	border-color: var(--iw-blue-light);
	box-shadow: 0 0 0 4px rgba(21, 87, 160, .12);
}

#iw_menu_page_search .form-control {
	padding: .5rem 1rem .5rem 1.4rem;
	font: 300 18px var(--iw-font);
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}

#iw_menu_page_search .btn {
	padding: .5rem 1.5rem;
	color: #aaa;
	background: transparent;
	border: 0;
	border-radius: 999px;
}

#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 {
		padding: .5rem 1rem .45rem 1.4rem;
	}
	#iw_menu_page_search .btn {
		padding: .5rem 1rem .45rem;
	}
	#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 CON LA FOTO (foto piena con zoom lento, cambia da sola)

	<body class="iw_onhero"> solo nella home: la barra cerca/inserisci compare scorrendo (nelle altre pagine resta sempre visibile)
	<section class="iw_hero"> (iw_hero_small: piu bassa)
		<div class="iw_hero_slide iw_active"></div> <div class="iw_hero_slide"></div> <div class="iw_hero_slide"></div> (le foto sono qui sotto)
		<div class="container iw_hero_content"> titolo h1 (.iw_hero_title) e sottotitolo h2 (.iw_hero_sub); nella home badge h1 (.iw_kicker), titolo h2 e ricerca rotonda (data-iw-ref) </div>
		<button class="iw_hero_credit"> Image credits: apre la finestra con i crediti delle foto (#iw_credits in footer.php) </button>
	</section>
************************************/

/* la barra cerca/inserisci compare (iw_is_search dal js) quando la ricerca o il titolo della foto passano sotto il menu: mai due ricerche insieme */

.iw_onhero #iw_menu_page {
	display: none;
}

@media ( min-height: 500px ) {
	.iw_onhero #iw_menu_page {
		display: block;
		position: fixed;
		top: var(--iw-menu-h);
		right: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		transform: translateY( -12px );
		transition: opacity .25s, transform .25s, visibility .25s;
	}
	.iw_onhero.iw_is_search #iw_menu_page {
		visibility: visible;
		opacity: 1;
		transform: none;
	}
}

.iw_hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp( 520px, 68vh, 760px ); /* poco piu del testo: le categorie si vedono subito */
	min-height: clamp( 520px, 68svh, 760px );
	padding: 88px 0 152px; /* sopra: lo spazio tra il menu e il badge; sotto: lo stesso piu il riquadro che sale sulla foto */
	overflow: hidden;
	color: #fff;
	background: #0b2440;
}

.iw_hero_small {
	min-height: clamp( 340px, 44vh, 480px );
	padding-top: 111px; /* le pagine non hanno il badge: il suo spazio resta sopra il titolo */
}

/* le foto sono sempre in movimento (zoom avanti e indietro), anche mentre spariscono: cambiando foto niente scatti */

.iw_hero_slide {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	opacity: 0;
	transform: scale( 1.04 );
	transition: opacity 1.8s ease;
	animation: iw_zoom 16s ease-in-out infinite alternate;
}

.iw_hero_slide:nth-child(1) { background-image: url("../img/header1.jpg"); }
.iw_hero_slide:nth-child(2) { background-image: url("../img/header2.jpg"); animation-name: iw_zoom2; }
.iw_hero_slide:nth-child(3) { background-image: url("../img/header3.jpg"); animation-name: iw_zoom3; }

.iw_hero_slide.iw_active {
	opacity: 1;
}

@keyframes iw_zoom {
	from { transform: scale( 1.04 ); }
	to { transform: scale( 1.18 ) translate( -1.5%, -1% ); }
}

@keyframes iw_zoom2 {
	from { transform: scale( 1.18 ) translate( 1.5%, 0 ); }
	to { transform: scale( 1.04 ); }
}

@keyframes iw_zoom3 {
	from { transform: scale( 1.04 ); }
	to { transform: scale( 1.16 ) translate( 1.5%, -1.5% ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.iw_hero_slide {
		animation: none;
	}
}

/* velo scuro, piu forte a sinistra dove c'e il testo: si legge su ogni foto */

.iw_hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, rgba(5, 16, 32, .7) 0%, rgba(5, 16, 32, .38) 52%, rgba(5, 16, 32, 0) 82% ),
		linear-gradient( 180deg, rgba(5, 16, 32, .2) 0%, rgba(5, 16, 32, 0) 40%, rgba(5, 16, 32, .45) 100% );
}

.iw_hero_content {
	position: relative;
	z-index: 2;
}

.iw_kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 7px 14px;
	font: 600 13px/1 var(--iw-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	backdrop-filter: blur( 8px );
}

.iw_hero_title {
	max-width: 900px;
	margin: 0 0 18px;
	font: 700 clamp( 40px, 6vw, 80px )/1.03 var(--iw-font-title);
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.iw_hero_small .iw_hero_title {
	font-size: clamp( 34px, 4.6vw, 60px );
}

.iw_hero_sub {
	max-width: 640px;
	margin: 0;
	font: 400 clamp( 17px, 1.5vw, 21px )/1.55 var(--iw-font);
	color: rgba(255, 255, 255, .95);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

/* ricerca rotonda e grande sopra la foto */

.iw_search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 680px;
	margin-top: 34px;
	padding: 7px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.iw_search > .iw_icon {
	position: absolute;
	left: 26px;
	font-size: 22px;
	color: #8a96a8;
	pointer-events: none;
}

.iw_search input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 16px 0 52px;
	font: 400 18px var(--iw-font);
	color: var(--iw-text);
	background: transparent;
	border: 0;
	outline: none;
}

.iw_search .btn {
	height: 52px;
	padding: 0 30px;
	font: 600 16px var(--iw-font);
	color: #fff;
	background: var(--iw-blue);
	border: 0;
}

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

/* pulsanti sotto la ricerca: vetro chiaro */

.iw_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 29px;
}

.iw_chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font: 500 15px/1 var(--iw-font);
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	backdrop-filter: blur( 8px );
	transition: background-color .2s, color .2s;
}

.iw_chip:hover {
	color: var(--iw-text);
	background: #fff;
}

/* crediti delle foto (licenze CC BY-SA): "Image credits" apre la finestra #iw_credits (footer.php)
   in basso al centro, nascosto sotto il riquadro bianco; sugli schermi larghi (dove accanto al riquadro c e posto) in basso a destra della foto */

.iw_hero_credit {
	position: absolute;
	bottom: 12px;
	left: 50%;
	z-index: 1;
	padding: 0;
	font: 400 12px/1.4 var(--iw-font);
	color: rgba(255, 255, 255, .7);
	text-decoration: underline;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	background: none;
	border: 0;
	transform: translateX( -50% );
}

.iw_hero_credit:hover {
	color: #fff;
}

@media ( min-width: 1360px ) {
	.iw_hero_credit {
		right: 16px;
		left: auto;
		transform: none;
	}
}

@media ( max-width: 767.98px ) {
	.iw_hero {
		min-height: clamp( 420px, 62svh, 620px );
		padding: 56px 0 96px;
	}
	.iw_hero_small {
		min-height: clamp( 300px, 40svh, 420px );
		padding-top: 95px;
	}
	.iw_hero::after {
		background: linear-gradient( 180deg, rgba(5, 16, 32, .3) 0%, rgba(5, 16, 32, .48) 50%, rgba(5, 16, 32, .55) 100% );
	}
	.iw_search {
		padding: 5px;
	}
	.iw_search input {
		height: 48px;
		padding-left: 46px;
		font-size: 16px;
	}
	.iw_search > .iw_icon {
		left: 20px;
	}
	.iw_search .btn {
		height: 48px;
		padding: 0 20px;
	}
	.iw_chips {
		flex-wrap: nowrap;
		margin-right: calc( var(--iw-gutter) * -.5 );
		padding-bottom: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.iw_chip {
		flex-shrink: 0;
	}
}

/* spazio sopra il contenuto (categorie: i riquadri salgono comunque sopra la foto, categoriesDEV.css) */
.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: 400 18px/1.7 var(--iw-font);
	color: var(--iw-text);
}

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

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


/* 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: 400 18px/1.7 var(--iw-font);
	color: var(--iw-text);
}

.iw_page_page #iw_page li::marker {
	color: var(--iw-blue-light);
}

.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 18px/1.3 var(--iw-font-title);
	letter-spacing: -.01em;
	color: var(--iw-text);
}

.iw_page_page #iw_page h4 {
	margin: 2.4rem 0 .8rem;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.iw_page_page #iw_page a:not( .btn ) {
	font-weight: 500;
	color: var(--iw-blue-light);
}

/* 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 {
		font-size: 22px;
	}
}

/************************************
	SEZIONI
************************************/

/* riquadro bianco che sale sopra la foto */

.iw_float {
	position: relative;
	z-index: 3;
	margin-top: calc( var(--iw-rise) * -1 );
	margin-bottom: 70px;
	padding: 26px 28px;
	background: #fff;
	border-radius: var(--iw-radius-lg);
	box-shadow: var(--iw-shadow-lg);
}

.iw_label {
	display: block;
	margin: 0 0 18px;
	font: 600 13px/1 var(--iw-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--iw-muted);
}

.iw_section {
	margin-bottom: 80px;
}

.iw_section_head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 26px;
}

.iw_section_head h2 {
	margin: 0;
	font: 700 clamp( 28px, 3vw, 40px )/1.1 var(--iw-font-title);
	letter-spacing: -.015em;
	color: var(--iw-text);
}

.iw_section_head p {
	margin: 8px 0 0;
	font: 400 17px/1.5 var(--iw-font);
	color: var(--iw-muted);
}

.iw_btn_more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font: 600 15px/1 var(--iw-font);
	text-decoration: none;
	color: #fff;
	border: 1.5px solid var(--iw-border);
	border-radius: 999px;
	transition: border-color .2s, background-color .2s;
	background: var(--iw-blue);
}

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

/* niente da mostrare */

.iw_empty {
	padding: 60px 20px;
	font-size: 18px;
	text-align: center;
	background: #fff;
	border-radius: var(--iw-radius-lg);
}

/* invito a inserire: fascia blu con le montagne */

.iw_cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: 80px;
	padding: 44px 48px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient( 120deg, #0a3a6b 0%, #1557a0 100% );
	border-radius: var(--iw-radius-lg);
	box-shadow: var(--iw-shadow-lg);
}

.iw_cta::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 380px;
	height: 200px;
	background: url("../img/mountains.svg") right bottom / cover;
	border-radius: 50% 50% 0 0;
	opacity: .18;
}

.iw_cta h2 {
	margin: 0 0 6px;
	font: 700 clamp( 26px, 2.6vw, 34px )/1.15 var(--iw-font-title);
	color: #fff;
}

.iw_cta p {
	margin: 0;
	font-size: 18px;
	opacity: .9;
}

.iw_cta .btn {
	position: relative;
	z-index: 1;
	padding: .95rem 1.8rem;
	font: 700 17px/1 var(--iw-font);
	color: var(--iw-blue);
	background: #fff;
	border: 0;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.iw_cta .btn:hover {
	color: var(--iw-blue);
	background: var(--iw-yellow);
}

/* testo in un riquadro: titolo a sinistra, testo a destra */

.iw_about {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 24px 60px;
	margin-bottom: 0;
	padding: 52px;
	background: #fff;
	border-radius: var(--iw-radius-lg);
	box-shadow: var(--iw-shadow);
}

.iw_about h2 {
	margin: 0;
	font: 700 clamp( 30px, 3.4vw, 46px )/1.08 var(--iw-font-title);
	letter-spacing: -.02em;
}

.iw_about p {
	margin: 0 0 22px;
	font: 400 18px/1.7 var(--iw-font);
	color: var(--iw-muted);
}

@media ( max-width: 767.98px ) {
	.iw_float {
		padding: 22px 18px;
	}
	.iw_cta,
	.iw_about {
		grid-template-columns: 1fr;
		padding: 32px 24px;
	}
}

/* riquadro come ultimo blocco della pagina (poco spazio prima degli sponsor): .iw_box a tutta larghezza (i miei annunci, preferiti, messaggi...),
   .iw_split diviso, contenuto a sinistra e sidebar (inc/tpl/sidebar_page.php) a destra; sotto i 992px la sidebar va sotto */

.iw_box,
.iw_split {
	margin-bottom: 0;
	padding: 40px;
}

.iw_split {
	display: grid;
	grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
	gap: 40px;
}

.iw_split .form-group {
	margin-bottom: 18px;
}

.iw_split .iw_btn {
	margin-top: 6px;
}

/* la sidebar segue mentre si scorre (sotto menu e barra cerca) */

.iw_split_side {
	align-self: start;
}

@media ( min-width: 992px ) {
	.iw_split_side {
		position: sticky;
		top: calc( var(--iw-menu-h) + 96px );
	}
}

@media ( max-width: 991.98px ) {
	.iw_box,
	.iw_split {
		padding: 26px 20px;
	}
	.iw_split {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* telefono: niente sidebar (gli stessi link sono nel footer; l'html resta, per google non cambia nulla) */

@media ( max-width: 767.98px ) {
	.iw_split_side {
		display: none;
	}
}

/* pagine di testo (page.php: termini, privacy, faq, chi siamo...): sotto l'etichetta con il titolo, il testo parte senza spazio sopra */

.iw_article #iw_page > :first-child,
.iw_article #iw_page > .iw_label + * {
	margin-top: 0;
}

/************************************
	CATEGORIE (riquadri con l'icona grande, senza cerchio)
************************************/

.iw_cat_icons {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
	gap: 10px;
}

.iw_cat_icons a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 8px 14px;
	font: 500 15px/1.25 var(--iw-font);
	text-align: center;
	text-decoration: none;
	color: var(--iw-text);
	border-radius: 18px;
	transition: background-color .2s, transform .2s;
}

.iw_cat_icons a:hover {
	background: var(--iw-light);
	transform: translateY( -2px );
}

.iw_cat_icons .iw_icon {
	width: 46px;
	height: 46px;
	color: var(--iw-blue);
	stroke-width: 1.3;
	transition: color .2s, transform .2s;
}

.iw_cat_icons a:hover .iw_icon {
	color: var(--iw-blue-light);
	transform: scale( 1.08 );
}

@media ( max-width: 991.98px ) {
	.iw_cat_icons {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767.98px ) {
	.iw_cat_icons {
		display: flex;
		gap: 4px;
		margin: 0 -18px;
		padding: 0 10px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.iw_cat_icons a {
		flex: 0 0 96px;
		padding: 10px 4px;
		font-size: 14px;
		scroll-snap-align: start;
	}
	.iw_cat_icons .iw_icon {
		width: 40px;
		height: 40px;
	}
}

/************************************
	BOX ANNUNCI (foto piena, tutti alti uguali; in basso la categoria, il titolo, poi il distretto e a destra il prezzo)

	inc/tpl/browse.php: <a class="iw_item">, in una griglia (.iw_grid) o in un carosello
************************************/

.iw_item {
	position: relative;
	display: block;
	height: var(--iw-item-h);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: #1d2b3a;
	border-radius: 22px;
	box-shadow: var(--iw-shadow);
	isolation: isolate;
	transition: box-shadow .3s, transform .3s;
}

.iw_item:hover {
	color: #fff;
	box-shadow: var(--iw-shadow-lg);
	transform: translateY( -3px );
}

.iw_item img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}

.iw_item:hover img {
	transform: scale( 1.06 );
}

/* scuro in basso, la foto resta chiara sopra */

.iw_item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 180deg, rgba(4, 12, 24, 0) 34%, rgba(4, 12, 24, .55) 62%, rgba(4, 12, 24, .9) 100% );
}

.iw_item_body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px 20px 18px;
}

/* categoria: vetro chiaro come il badge dell'header */

.iw_item_cat {
	display: inline-block;
	padding: 6px 11px;
	font: 600 11.5px/1 var(--iw-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
}

.iw_item_title {
	display: -webkit-box;
	margin: 12px 0 14px;
	overflow: hidden;
	font: 700 22px/1.15 var(--iw-font-title);
	letter-spacing: -.01em;
	color: #fff;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* riga in fondo: distretto a sinistra, prezzo a destra */

.iw_item_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.iw_item_place {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font: 500 14px/1.2 var(--iw-font);
	color: rgba(255, 255, 255, .88);
}

.iw_item_price {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	font: 700 15px/1.2 var(--iw-font-title);
	white-space: nowrap;
	color: #fff;
}

/* in vetrina: in alto */

.iw_item_star {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 7px 12px;
	font: 700 12px/1 var(--iw-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--iw-text);
	background: var(--iw-yellow);
	border-radius: 999px;
}

/* griglia: 3 per riga (la stessa colonna del carosello della vetrina) */

.iw_grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
}

@media ( max-width: 991.98px ) {
	.iw_grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 575.98px ) {
	.iw_grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}
}

/************************************
	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: 3 / 2 / 1 per riga, stessa colonna della griglia; il padding lascia spazio all'ombra, il margine lo riprende (gli annunci simili della pagina annuncio: singleDEV.css) */

#iw_featured_carousel {
	margin: -4px -10px -24px;
}

#iw_featured_carousel > * {
	width: 33.333333%;
	padding: 4px 10px 24px;
}

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

/* telefono: si vede un pezzo del prossimo annuncio, fino al bordo dello schermo (si capisce che scorre) */

@media ( max-width: 575.98px ) {
	#iw_featured_carousel {
		margin-right: calc( ( 100% - 100vw ) / 2 );
	}
	#iw_featured_carousel > * {
		width: 88%;
	}
}

/************************************
	BROWSE (annunci: ricerca e filtri nel riquadro bianco, poi i box; i successivi arrivano da soli scorrendo, .iw_more)
************************************/

/* ricerca, categoria, distretto e ordine sulla stessa riga (su telefono uno per riga) */

.iw_filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.iw_float .iw_label + .iw_filters {
	margin-top: -4px;
}

.iw_filters .form-select {
	flex: 1 1 180px;
	width: auto;
	height: 50px;
	border-radius: 999px;
}

/* campo cerca con la lente dentro */

.iw_filters_search {
	position: relative;
	flex: 2 1 260px;
}

.iw_filters_search .form-control {
	height: 50px;
	padding-right: 52px;
	border-radius: 999px;
}

.iw_filters_search .btn {
	position: absolute;
	top: 0;
	right: 4px;
	height: 50px;
	padding: 0 16px;
	font-size: 18px;
	color: var(--iw-muted);
}

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

/* quanti annunci (per ora spento in browse.php) */

.iw_filters .iw_count {
	margin-left: auto;
	padding-left: 6px;
	font: 600 16px var(--iw-font);
	white-space: nowrap;
	color: var(--iw-muted);
}

@media ( max-width: 767.98px ) {
	.iw_filters_search,
	.iw_filters .form-select {
		flex-basis: 100%;
	}
	.iw_filters .form-select,
	.iw_filters_search .form-control,
	.iw_filters_search .btn {
		height: 48px;
	}
}

/* sotto i box: mostra altri (le prime volte arrivano da soli scorrendo, layoutDEV.js); prima degli sponsor lo stesso spazio delle altre pagine */

.iw_page_browse .iw_more_wrap {
	margin-top: 40px;
}

/************************************
	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;
}

/* riquadri tondi, piu chiari quando sono aperti */

.iw_faq details {
	margin-bottom: 10px;
	padding: 0 20px;
	background: var(--iw-bg);
	border-radius: 16px;
	transition: background-color .2s;
}

.iw_faq details[open] {
	padding-bottom: 20px; /* spazio sotto la risposta, dentro il riquadro */
	background: var(--iw-light);
}

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

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

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

/* 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: -4px 0 14px;
}

#iw_page .iw_faq details > :last-child {
	margin-bottom: 0;
}


/************************************
	ACCOUNT (i miei annunci, preferiti, statistiche, moderazione: tabella nel riquadro bianco .iw_float.iw_box)
************************************/

/* schede dell'account (inc/tpl/menu_account.php): salgono sopra la foto al posto del riquadro; quella aperta e bianca e si unisce al riquadro, le altre di vetro come la categoria nei box */
/* z-index sopra il riquadro: la sua ombra non sporca la scheda aperta */

.iw_tabs {
	position: relative;
	z-index: 4;
	display: flex;
	gap: 6px;
	margin-top: calc( ( var(--iw-rise) + 52px ) * -1 );
}

.iw_tabs a {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding: 0 24px;
	font: 600 16px var(--iw-font);
	white-space: nowrap;
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	border-radius: 18px 18px 0 0;
	backdrop-filter: blur(8px);
	transition: background-color .2s;
}

.iw_tabs a:hover {
	color: #fff;
	background: rgba(255, 255, 255, .3);
}

.iw_tabs a.active {
	color: var(--iw-text);
	background: #fff;
}

/* il riquadro parte subito sotto le schede (a salire sono loro), dritto in alto a sinistra sotto la prima */

.iw_tabs + .iw_float {
	margin-top: 0;
	border-top-left-radius: 0;
}

/* telefono: le schede scorrono di lato, tagliate a destra dove inizia la curva del riquadro (non finiscono sopra l'angolo tondo; la aperta va al centro: layoutDEV.js) */

@media ( max-width: 767.98px ) {
	.iw_tabs {
		gap: 4px;
		margin-top: calc( ( var(--iw-rise) + 46px ) * -1 );
		margin-right: var(--iw-radius-lg);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.iw_tabs::-webkit-scrollbar {
		display: none;
	}
	.iw_tabs a {
		height: 46px;
		padding: 0 16px;
		font-size: 15px;
		border-radius: 14px 14px 0 0;
	}
}

/* in alto nel riquadro: l'etichetta (o le tendine) a sinistra, i bottoni a destra */

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

.iw_dash_head .iw_label {
	margin: 0;
}

/* niente ancora (nessun annuncio, preferito o messaggio): due righe e il bottone */

#iw_page .iw_dash_none {
	margin: 0 0 6px;
}

.iw_dash_none + p {
	color: var(--iw-muted);
}

/* 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);
}

.iw_dash tr:last-child > * {
	border-bottom: 0; /* l'ultima riga senza riga sotto: c'e gia il bordo del riquadro */
}

/* 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 dell'annuncio (in revisione, online...): in dashboardDEV.css */

/* 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) */
/* si apre sopra l'etichetta, largo al massimo come il campo (.form-group o il titolo con position relative): con etichette lunghe non esce dallo schermo */

.iw_tip {
	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;
	bottom: calc( 100% + 6px ); /* sopra l'etichetta */
	left: 0;
	z-index: 10;
	width: max-content;
	max-width: min( 320px, 100% );
	padding: 8px 12px;
	font: 400 14px/1.4 var(--iw-font);
	text-align: left;
	text-transform: none; /* anche dentro un titolo in maiuscolo (FOTO in inserisci) */
	letter-spacing: normal;
	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: 400 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);
}

/* "per 3 mesi" accanto al prezzo, piu piccolo e rosa */

.iw_promote_price span {
	margin-left: 6px;
	font: 600 18px var(--iw-font);
	color: var(--iw-pink);
}

/* il suo annuncio (con l'id): foto e titolo in un riquadro, anche in cima alla pagina grazie (thanks.php) */

.iw_promote_ad {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 30px;
	padding: 14px;
	text-decoration: none;
	color: var(--iw-text);
	background: var(--iw-bg);
	border-radius: 18px;
}

.iw_promote_ad img {
	flex-shrink: 0;
	width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--iw-radius);
}

.iw_promote_ad span {
	min-width: 0;
}

.iw_promote_ad strong {
	display: block;
	font: 700 18px/1.3 var(--iw-font-title);
}

.iw_promote_ad small {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--iw-muted);
}

@media ( max-width: 575.98px ) {
	.iw_promote_ad img {
		width: 90px;
		height: 60px;
	}
}

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

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

/* condividi: bottoni dei social con i loro colori (pagina grazie e pagina annuncio) */

.iw_share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.iw_share .btn {
	gap: 8px;
	color: #fff;
	background: #555;
}

.iw_share .btn .iw_icon {
	margin-right: 0;
}

.iw_share .iw_share_wa { background: #1fa855; }
.iw_share .iw_share_fb { background: #1877f2; }
.iw_share .iw_share_x { background: #000; }

.iw_share .btn:hover {
	color: #fff;
	opacity: .9;
}

/* 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;
}

/* telefono: ogni annuncio su 2 righe con la foto a sinistra (alta come le due righe): sopra titolo e prezzo, sotto stato e azioni */
/* niente intestazioni, scadenza e visite (i miei annunci, preferiti, moderazione) */

@media ( max-width: 767.98px ) {
	.iw_dash,
	.iw_dash tbody {
		display: block;
	}
	.iw_dash tr {
		display: grid;
		grid-template-columns: 90px minmax( 0, 1fr ) auto;
		align-items: center;
		gap: 8px 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--iw-border);
	}
	.iw_dash tr:last-child {
		border-bottom: 0;
	}
	.iw_dash tr:has( th ),
	.iw_dash .iw_dash_sm:not( :first-child ) {
		display: none;
	}
	.iw_dash td {
		width: auto !important; /* le colonne all'1% del computer qui no */
		padding: 0;
		border: 0;
	}
	.iw_dash td:first-child {
		grid-row: span 2;
		align-self: start;
	}
	.iw_dash td:nth-child( 2 ),
	.iw_dash td.iw_dash_actions:nth-child( 3 ) { /* titolo, e le azioni subito dopo (preferiti, moderazione): tutta la larghezza accanto alla foto */
		grid-column: 2 / -1;
	}
	.iw_dash img {
		width: 90px;
		height: 60px;
	}
	.iw_dash_actions {
		white-space: normal;
	}
	.iw_dash_actions .btn {
		margin: 2px 0;
	}
}

/************************************
	SIDEBAR PAGE (inc/tpl/sidebar_page.php)
************************************/

/* aiuto: riquadri grigi con l'icona nel cerchio bianco, poi i social */

.iw_sidebar_wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.iw_sidebar_wrap .iw_label {
	margin-bottom: 4px;
}

.iw_sidebar_wrap .iw_label:not( :first-child ) {
	margin-top: 14px;
}

.iw_help {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	font: 400 16px/1.5 var(--iw-font);
	text-decoration: none;
	color: var(--iw-text);
	background: var(--iw-bg);
	border-radius: 18px;
	transition: background-color .2s, transform .2s;
}

.iw_help:hover {
	color: var(--iw-text);
	background: var(--iw-light);
	transform: translateX( 3px );
}

/* cerchio bianco disegnato come sfondo: con border-radius il browser taglia in tondo anche l'icona (gli angoli di busta e casa) */

.iw_help .iw_icon {
	box-sizing: content-box;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 12px;
	color: var(--iw-blue);
	background: radial-gradient( circle closest-side, #fff 97%, transparent 100% );
}

.iw_help strong {
	display: block;
	font: 700 17px/1.3 var(--iw-font-title);
}

.iw_help span {
	font-size: 15px;
	color: var(--iw-muted);
}

#iw_sidebar_social {
	margin-top: 6px;
}

#iw_sidebar_social a {
	width: 46px;
	height: 46px;
	font-size: 18px;
	color: var(--iw-blue);
	background: var(--iw-light);
	transition: background-color .2s, color .2s;
}

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

/************************************
	FINESTRE (dialog: contatta, nuova lista...)
************************************/

/* si chiudono con esc, la x o cliccando fuori (layoutDEV.js) */

.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;
}

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

#iw_sponsor {
	padding: 0 0 1px;
}

/* titolo con riga ai lati: h2 come i titoli delle sezioni (un h5 dopo un h2 salta dei livelli), grigio scuro abbastanza da leggersi bene (contrasto) */

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

#iw_sponsor h2::before,
#iw_sponsor h2::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; sotto, spazio per l'ombra */

#iw_sponsor_carousel {
	margin: 0 -10px 20px;
}

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

/* logo al centro di un riquadro bianco, tutti alti uguali */

#iw_sponsor_carousel a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	padding: 15px;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--iw-shadow);
}

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

/* meno di 4 sponsor: "il tuo logo qui" (porta a /premium) */

#iw_sponsor_carousel .iw_sponsor_you {
	font: 600 15px var(--iw-font);
	text-align: center;
	text-decoration: none;
	color: var(--iw-muted);
}

#iw_sponsor_carousel .iw_sponsor_you:hover {
	color: var(--iw-blue);
}

@media ( max-width: 991.98px ) {
	#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 {
	margin-top: 20px;
	padding: 70px 0 20px;
	font: 300 16px var(--iw-font);
	color: var(--iw-footer-text);
	background: var(--iw-navy);
}

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

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

#iw_footer_menu h2 {
	margin-bottom: 22px;
	color: #fff;
}

/* 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: #fff;
	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: 70px 0 0;
	}
	#iw_footer_menu h2 {
		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: #8c9ab0;
	background: #081628;
}

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

#iw_footer_about a {
	text-decoration: none;
	color: #8c9ab0;
}

#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;
}

/* link e bottone "Categorie" (apre la lista: bottone, i link javascript: google non li segue) uguali */

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

#iw_offcanvas > button {
	width: 100%;
	font: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

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

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

#iw_offcanvas > button .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: 46px;
	height: 46px;
	font-size: 20px;
	color: #fff;
	background: var(--iw-blue);
	border-radius: 50%;
	box-shadow: var(--iw-shadow);
	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;
	}
}

/* computer: grandi, al centro sotto la barra cerca/inserisci (4 + 42 + 16 = 62px sotto il menu, poi un po di spazio), colorati ma trasparenti con lo sfondo sfocato */
/* piu messaggi insieme: uno sotto l'altro (il contenitore e fisso, i messaggi no) */

@media ( min-width: 992px ) {
	#iw_msg_wrap {
		position: fixed;
		top: calc( var(--iw-menu-h) + 62px + 28px );
		right: 0;
		left: 0;
		z-index: 199; /* sotto la barra cerca (200) e il menu */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 0 20px;
		pointer-events: none; /* fuori dai messaggi si clicca la pagina sotto */
	}
	#iw_msg_wrap .iw_msg {
		position: static;
		width: auto;
		max-width: 720px;
		padding: 20px 36px;
		font: 500 18px/1.45 var(--iw-font);
		text-align: center;
		border-radius: 18px;
		box-shadow: var(--iw-shadow-lg);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		pointer-events: auto;
	}
	#iw_msg_wrap .iw_error {
		background: rgba(136, 0, 0, .8);
	}
	#iw_msg_wrap .iw_success {
		background: rgba(0, 100, 45, .8); /* verde piu scuro: il testo bianco si legge anche sopra il bianco della pagina */
	}
}

/************************************
	COOKIE BAR (riquadro scuro sospeso in basso)
************************************/

#iw_cookiebar {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 16;
	max-width: 820px;
	margin: 0 auto;
	padding: 14px 6px;
	font: 300 14px/1.5 var(--iw-font);
	color: #fff;
	background: var(--iw-navy);
	border-radius: 20px;
	box-shadow: var(--iw-shadow-lg);
}

#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: 999px;
}

#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;
	}
}