/* tk-pwa 2 - frontend */

/* ── Splash (preloader) ── */
@keyframes tkpwa-loadbounce { to { transform: scale(1.07); } }
#splashscreen {
	display: flex; justify-content: center; align-items: center;
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	z-index: 999999999999;
	transition: opacity .6s ease;
	animation: tkpwa-loadbounce .4s infinite alternate;
}
#splashscreen.tkpwa-hide { opacity: 0; pointer-events: none; }
#splashicon { width: 150px; height: 150px; background-repeat: no-repeat; background-position: center; background-size: contain; }

/* ── Transizioni pagina (solo CSS: nessuno script deve rimuoverle) ── */
body.tk-pwa-tr { transition: filter 1s ease-out, opacity 1s ease-out; }
@keyframes tkpwa-in-brightness { 0%, 50% { filter: brightness(4000%); } 100% { filter: none; } }
@keyframes tkpwa-in-contrast   { 0%, 50% { filter: contrast(1000%); } 100% { filter: none; } }
@keyframes tkpwa-in-opacity    { 0%, 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tkpwa-in-grayscale  { 0%, 50% { filter: grayscale(1); } 100% { filter: none; } }
@keyframes tkpwa-in-invert     { 0%, 50% { filter: invert(1); } 100% { filter: none; } }
@keyframes tkpwa-in-blur       { 0%, 50% { filter: blur(400px); } 100% { filter: none; } }
body.tk-pwa-tr-brightness { animation: tkpwa-in-brightness 2s ease-out; }
body.tk-pwa-tr-contrast   { animation: tkpwa-in-contrast 2s ease-out; }
body.tk-pwa-tr-opacity    { animation: tkpwa-in-opacity 2s ease-out; }
body.tk-pwa-tr-grayscale  { animation: tkpwa-in-grayscale 2s ease-out; }
body.tk-pwa-tr-invert     { animation: tkpwa-in-invert 2s ease-out; }
body.tk-pwa-tr-blur       { animation: tkpwa-in-blur 2s ease-out; }
body.tk-pwa-tr-out-brightness { filter: brightness(4000%); }
body.tk-pwa-tr-out-contrast   { filter: contrast(1000%); }
body.tk-pwa-tr-out-opacity    { opacity: 0; }
body.tk-pwa-tr-out-grayscale  { filter: grayscale(1); }
body.tk-pwa-tr-out-invert     { filter: invert(1); }
body.tk-pwa-tr-out-blur       { filter: blur(400px); }
@media (prefers-reduced-motion: reduce) {
	body.tk-pwa-tr { animation: none !important; transition: none !important; }
}

/* ── Feedback al tocco (sostituisce FastClick) ── */
html.tk-pwa-reactify a, html.tk-pwa-reactify button, html.tk-pwa-reactify input,
html.tk-pwa-reactify select, html.tk-pwa-reactify textarea, html.tk-pwa-reactify label,
html.tk-pwa-reactify [role="button"] { touch-action: manipulation; }

/* ── Toast ── */
#toast-div {
	position: fixed; left: 0; width: 100%; bottom: 50px; z-index: 999999;
	text-align: center; font-size: 18px; pointer-events: none;
	opacity: 0; transition: opacity .2s ease;
}
#toast-div.tkpwa-show { opacity: 1; }
#toast-content {
	display: inline-block; max-width: calc(100% - 32px); box-sizing: border-box;
	padding: 8px 14px; min-height: 20px; line-height: 20px;
	background-color: rgba(0, 0, 0, .7); color: #fff; border-radius: 15px;
}

/* ── Pulsante notifiche ── */
@keyframes tkpwa-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.notification-button {
	transform: scale(0, 0); display: none; outline: none; border: none;
	width: 1em; height: 1em; padding: 0; margin: 0;
	background-color: transparent; position: relative; cursor: pointer;
	transition: transform .2s ease;
}
.notification-button__icon {
	display: none; width: 1em; height: 1em; position: absolute;
	top: 50%; left: 50%; margin-top: -.5em; margin-left: -.5em;
}
.notification-button__icon svg { display: block; width: 100%; height: 100%; }
.notification-button__icon--spinner {
	border: .12em solid currentColor; border-top-color: transparent; border-right-color: transparent;
	width: .8em; height: .8em; margin-top: -.4em; margin-left: -.4em;
	box-sizing: border-box; border-radius: 50%;
	animation: tkpwa-spin .65s infinite linear;
}
body.pwa-notification .notification-button { transform: scale(1, 1); display: block; }
body.pwa-notification .notification-button__icon--off { display: block; }
body.pwa-notification.pwa-notification--on .notification-button__icon--off,
body.pwa-notification.pwa-notification--on .notification-button__icon--spinner { display: none; }
body.pwa-notification.pwa-notification--on .notification-button__icon--on { display: block; }
body.pwa-notification.pwa-notification--loader .notification-button__icon--off,
body.pwa-notification.pwa-notification--loader .notification-button__icon--on { display: none; }
body.pwa-notification.pwa-notification--loader .notification-button__icon--spinner { display: block; }
.notification-button--fixedfooter {
	position: fixed; width: 1.8em; height: 1.8em; font-size: 25px; z-index: 99999; border-radius: 50%;
}
.notification-button--fixedfooter .notification-button__icon { width: .6em; height: .6em; margin-top: -.3em; margin-left: -.3em; }

/* ── Avviso rotazione ── */
@keyframes tkpwa-rotate { 0% { transform: rotate(0deg); } 50%, 100% { transform: rotate(-90deg); } }
.rotateNotice {
	display: none; justify-content: center; align-items: center; flex-direction: column;
	position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 2147483000;
}
.rotatePhone { height: 50px; width: 100px; border: 3px solid #fff; border-radius: 10px; animation: tkpwa-rotate 1.5s ease-in-out infinite alternate; }
.rotateMessage { color: #fff; font-size: 1em; margin-top: 40px; }

/* ── Banner installazione (2.0.5: un solo pannello per tutti i browser) ── */
.tkpwa-inst {
	position: fixed; inset: 0; z-index: 2147483600; display: none;
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tkpwa-bg: #ffffff; --tkpwa-fg: #1d1d1f; --tkpwa-mut: #6e6e73; --tkpwa-line: #e5e5ea; --tkpwa-step: #f2f2f7;
}
.tkpwa-inst-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); animation: tkpwa-fade .25s ease; }
.tkpwa-inst-card {
	position: absolute; left: 12px; right: 12px; bottom: 56px; max-width: 440px; margin: 0 auto;
	box-sizing: border-box; padding: 20px 20px 16px; border-radius: 18px;
	background: var(--tkpwa-bg); color: var(--tkpwa-fg); text-align: left;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28); animation: tkpwa-up .3s cubic-bezier(.2, .8, .2, 1);
	max-height: calc(100% - 80px); overflow-y: auto;
}
.tkpwa-inst--top .tkpwa-inst-card { top: 56px; bottom: auto; animation-name: tkpwa-down; }
.tkpwa-inst--prompt .tkpwa-inst-card { bottom: 16px; }
.tkpwa-inst-x {
	position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
	background: var(--tkpwa-step); color: var(--tkpwa-mut); font-size: 20px; line-height: 32px; text-align: center;
	cursor: pointer; padding: 0;
}
.tkpwa-inst-head { display: flex; align-items: center; gap: 14px; padding-right: 32px; margin-bottom: 14px; }
.tkpwa-inst-icon {
	flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: var(--tkpwa-step) center / cover no-repeat;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.tkpwa-inst-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--tkpwa-fg); }
.tkpwa-inst-sub { margin: 3px 0 0; font-size: 13px; color: var(--tkpwa-mut); }
.tkpwa-inst-steps { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: tkpwa; }
.tkpwa-inst-steps li {
	counter-increment: tkpwa; position: relative; margin: 0 0 8px; padding: 10px 12px 10px 46px;
	background: var(--tkpwa-step); border-radius: 12px; font-size: 15px; color: var(--tkpwa-fg);
}
.tkpwa-inst-steps li::before {
	content: counter(tkpwa); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--tkpwa-acc, #111111); color: var(--tkpwa-acc-fg, #ffffff); font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}
.tkpwa-inst-steps small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tkpwa-mut); }
.tkpwa-ico {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: -6px;
	min-width: 26px; height: 26px; padding: 0 4px; margin: 0 2px; box-sizing: border-box;
	border-radius: 7px; background: var(--tkpwa-bg); color: #007aff; box-shadow: 0 0 0 1px var(--tkpwa-line);
	font-weight: 700; font-size: 15px; line-height: 1;
}
.tkpwa-ico svg { width: 18px; height: 18px; display: block; }
.tkpwa-inst-btns { display: flex; flex-direction: column; gap: 8px; }
.tkpwa-inst-btn {
	display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 13px 16px; margin: 0;
	background: var(--tkpwa-acc, #111111); color: var(--tkpwa-acc-fg, #ffffff); font: inherit; font-weight: 700; font-size: 16px;
	text-align: center; cursor: pointer;
}
.tkpwa-inst-btn--sec { background: transparent; color: var(--tkpwa-mut); font-weight: 600; font-size: 15px; padding: 8px 16px; }
.tkpwa-inst-arrow {
	position: absolute; bottom: 6px; width: 40px; height: 44px; margin-left: -20px; color: #fff; display: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); animation: tkpwa-bob .7s ease-in-out infinite alternate;
}
.tkpwa-inst-arrow svg { width: 40px; height: 44px; display: block; }
.tkpwa-inst--top .tkpwa-inst-arrow { top: 6px; bottom: auto; transform: rotate(180deg); animation-name: tkpwa-bob-up; }
.tkpwa-inst--a-center .tkpwa-inst-arrow { display: block; left: 50%; }
.tkpwa-inst--a-right .tkpwa-inst-arrow { display: block; left: auto; right: 14px; margin-left: 0; }
@keyframes tkpwa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tkpwa-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes tkpwa-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes tkpwa-bob { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes tkpwa-bob-up { from { transform: rotate(180deg) translateY(0); } to { transform: rotate(180deg) translateY(8px); } }
@media (prefers-color-scheme: dark) {
	.tkpwa-inst { --tkpwa-bg: #1c1c1e; --tkpwa-fg: #f5f5f7; --tkpwa-mut: #a1a1a6; --tkpwa-line: #3a3a3c; --tkpwa-step: #2c2c2e; }
	.tkpwa-ico { color: #0a84ff; }
}
@media (prefers-reduced-motion: reduce) {
	.tkpwa-inst-back, .tkpwa-inst-card, .tkpwa-inst-arrow { animation: none; }
}

/* Pulsante "Installa l'app" (shortcode / voce di menu): visibile solo dove si può installare */
html:not(.tkpwa-can-install) .tk-pwa-install-btn, html:not(.tkpwa-can-install) .tkpwa-install-item { display: none !important; }
.tk-pwa-install-btn {
	display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer;
	background: var(--tkpwa-acc, #111111); color: var(--tkpwa-acc-fg, #ffffff); font: inherit; font-weight: 700; line-height: 1.2;
}

/* ── Ripristino sessione iOS ── */
.iosmodal-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .4); z-index: 10600; display: none; }
.iosmodal { width: 270px; position: fixed; z-index: 99999999999999; left: 50%; margin-left: -135px; top: 35%; text-align: center; border-radius: 7px; color: #000; }
.iosmodal-inner { padding: 15px; border-radius: 7px 7px 0 0; position: relative; background: #e8e8e8; border-bottom: 1px solid #b5b5b5; }
.iosmodal-title { font-weight: 500; font-size: 18px; text-align: center; line-height: 1.5; }
.iosmodal-title + .iosmodal-text { margin-top: 5px; }
.iosmodal-buttons { height: 44px; overflow: hidden; display: flex; justify-content: center; }
.iosmodal-button {
	width: 100%; padding: 0 5px; height: 44px; font-size: 17px; line-height: 44px; text-align: center;
	color: #007aff; background: #e8e8e8; display: block; position: relative; white-space: nowrap;
	text-overflow: ellipsis; overflow: hidden; cursor: pointer; box-sizing: border-box; flex: 1;
}
.iosmodal-button:first-child { border-radius: 0 0 0 7px; border-right: 1px solid #b5b5b5; }
.iosmodal-button:last-child { border-radius: 0 0 7px 0; }
.iosmodal-button.iosmodal-button-bold { font-weight: 500; }

/* ── Indicatore offline ── */
@keyframes tkpwa-dropin { from { transform: translateY(-120%); } to { transform: translateY(0); } }
@keyframes tkpwa-dropout { from { transform: translateY(0); } to { transform: translateY(-120%); } }
.offline-ui {
	position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 2147482000;
	width: 38em; max-width: 100%; box-sizing: border-box; padding: 1em 1em 1em 3em;
	background: #f6f6f6; color: #444; font: 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 0 1em rgba(0, 0, 0, .3);
	animation: tkpwa-dropin .5s;
}
.offline-ui::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 1em; margin: auto;
	width: 1em; height: 1em; border-radius: 50%; background: #ec8787;
}
.offline-ui.offline-ui-up::before { background: #80d580; }
.offline-ui.offline-ui-up { animation: tkpwa-dropout .5s 2s forwards; }
@media (max-width: 782px) { .offline-ui { width: 100%; } }

/* ── Tira per navigare ── */
#share-wrap {
	background: #9E8DDA; pointer-events: none; top: 0; height: 0; min-height: 0; text-align: center;
	width: 100%; overflow: hidden; display: flex; align-items: flex-end;
}
#share-wrap.container--reset { transition: min-height .5s; }
#share-wrap .share {
	height: 90px; width: 270px; margin: 0 auto; z-index: 1; position: relative;
	display: flex; justify-content: space-around; align-items: center;
}
#share-wrap .share__item {
	position: relative; text-align: center; flex: 1 1 auto; line-height: 60px;
	width: 60px; height: 60px; z-index: 100; color: #fff; display: flex; align-items: center; justify-content: center;
}
#share-wrap .share__item svg { width: 20px; height: 20px; fill: #fff; }
#share-wrap .share::before {
	content: ""; position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -30px;
	background: rgba(0, 0, 0, .25); width: 60px; height: 60px; border-radius: 50%; z-index: -1;
	opacity: 0; transform: scale3d(.1, .1, 1); transition: transform .3s, opacity .3s;
}
#share-wrap .share--select-1::before { transform: translate3d(-90px, 0, 0) scale3d(.1, .1, 1); }
#share-wrap .share--select-3::before { transform: translate3d(90px, 0, 0) scale3d(.1, .1, 1); }
.container--active #share-wrap .share::before { opacity: 1; }
.container--active #share-wrap .share--select-1::before { transform: translate3d(-90px, 0, 0); }
.container--active #share-wrap .share--select-2::before { transform: translate3d(0, 0, 0); }
.container--active #share-wrap .share--select-3::before { transform: translate3d(90px, 0, 0); }
.container--share #share-wrap .share::before { opacity: 0; transition: transform .5s, opacity .5s; }
.container--share #share-wrap .share--select-1::before { transform: translate3d(-90px, 0, 0) scale3d(20, 20, 1); }
.container--share #share-wrap .share--select-2::before { transform: scale3d(20, 20, 1); }
.container--share #share-wrap .share--select-3::before { transform: translate3d(90px, 0, 0) scale3d(20, 20, 1); }