/* 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 ── */
@keyframes topToBottom { from { transform: translate(0, 0); } to { transform: translate(0, 20px); } }
.add-to-home {
	width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; text-align: center; color: #fff;
	padding: 10vh 5vw; box-sizing: border-box; z-index: 999999999999; background-color: rgba(0, 0, 0, .75);
}
.addiphone, .addchrome, .addchrome2, .addfirefox { display: none; }
.add-to-home .browser-preview { margin: -45px 0 40px; text-decoration: underline; opacity: .8; text-align: right; cursor: pointer; }
.add-to-home .logo-name-container {
	background-repeat: no-repeat; background-position: center 0; padding-top: 130px;
	margin: 15vh 45px 0; background-size: 120px; font-size: 24px;
}
.addiphone .homescreen-text { padding-top: 10vh; line-height: 1.5; font-size: 18px; }
.addchrome .homescreen-text, .addchrome2 .homescreen-text, .addfirefox .homescreen-text { padding-top: 3vh; line-height: 1.5; font-size: 18px; }
.addiphone .icon-addToHome {
	vertical-align: text-bottom; width: 35px; height: 35px; display: inline-block;
	background-size: cover; background-image: url('../img/mobile-browser-icons.png');
}
.add-to-home .icon-homePointer {
	margin-top: 5vh; background: url('../img/mobile-browser-icons.png') no-repeat top left;
	background-position: center -40px; width: 100%; height: 50px; background-size: 40px;
	animation: topToBottom .5s infinite alternate;
}
.addchrome2 .icon-homePointer { margin-top: -8vh; margin-left: 12px; background-position: right -344px; background-size: 40px; }
.addchrome2 .icon-addToHome {
	vertical-align: text-bottom; width: 35px; height: 35px; display: inline-block;
	background-size: cover; background-image: url('../img/mobile-browser-icons.png'); background-position: center -113px;
}
.addchrome2 .browser-preview, .addfirefox .browser-preview { margin-top: 55px; text-align: center; }
.addfirefox .icon-homePointer { margin-top: -8vh; background-position: right -344px; width: 77%; background-size: 40px; }
.addfirefox .icon-addToHome {
	vertical-align: text-bottom; width: 47px; height: 27px; display: inline-block;
	background-size: cover; background-image: url('../img/mobile-browser-icons.png'); background-position: center 33px;
}
.addchrome #button-addtohome {
	background-color: transparent; margin: 5vh auto; display: inline-block; font-weight: 600; color: #fff;
	border: 2px solid #fff; padding: 10px 16px; font-size: 16px; border-radius: 6px; cursor: pointer;
}
.addchrome #button-addtohome:hover { background-color: rgba(255, 255, 255, .05); }

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