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

body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    background: #fff;
}

a { color: #2980b9; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Header ── */
#header {
    background: #fff;
    border-bottom: 2px solid #333;
    padding: 18px 0;
}

#header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.site-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.site-title a { color: #333; }
.site-title a:hover { text-decoration: none; color: #555; }

.site-desc {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

/* ── Navigation ── */
#nav {
    background: #333;
}

#nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

#nav ul li a {
    display: block;
    padding: 11px 18px;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.15s;
}

#nav ul li a:hover {
    background: #555;
    text-decoration: none;
}

#nav .user-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #aaa;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    gap: 12px;
}

#nav .user-info a {
    color: #ccc;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Main content ── */
#main {
    min-height: 500px;
    padding: 48px 0;
}

/* ── Homepage two-column layout ── */
.home-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 36px 0;
}

.home-main {
    flex: 1;
    min-width: 0;
}

.home-main h2 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.3;
}

.hero-desc {
    font-size: 15px;
    color: #444;
    border-left: 3px solid #e5e5e5;
    padding-left: 16px;
    line-height: 1.7;
}

.hero-desc ul {
    margin: 10px 0 0 0;
    padding-left: 18px;
}

.hero-desc ul li {
    margin-bottom: 6px;
}

/* ── Sidebar ── */
.home-sidebar {
    width: 200px;
    flex-shrink: 0;
}

.widget {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fafafa;
}

.widget-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Language selector ── */
.lang-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lang-widget ul li {
    margin: 5px 0;
}

.lang-widget ul li a {
    font-size: 14px;
    color: #2980b9;
}

.lang-widget ul li.active a {
    font-weight: bold;
    color: #333;
    text-decoration: none;
    pointer-events: none;
}

/* ── Google sign-in button ── */
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #444;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 10px 14px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: box-shadow 0.2s, background 0.2s;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.btn-google:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    background: #f8f9fa;
    text-decoration: none;
    color: #444;
}

.btn-google svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* ── Welcome (logged in) ── */
.home-main p {
    color: #555;
    font-size: 15px;
}

.blipmaps-hint {
    margin-top: 14px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    color: #444;
}

/* ── App badges ── */
.app-badges {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #333;
    color: #fff;
    border-radius: 6px;
    padding: 8px 16px 8px 12px;
    text-decoration: none;
    transition: background 0.15s;
    min-width: 150px;
}

.app-badge:hover {
    background: #555;
    text-decoration: none;
    color: #fff;
}

.app-badge-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.app-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.app-badge-sub {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 10px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-badge-name {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

/* ── Footer ── */
#footer {
    background: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    padding: 20px 0;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    color: #999;
}

/* ── Blipmaps iframe layout ── */
body.blipmaps-page #main {
    padding: 0;
}

.iframe-wrap {
    width: 1020px;
    margin: 0 auto;
    overflow: visible;
}

.iframe-wrap iframe {
    display: block;
    width: 1020px;
    border: none;
}

/* ── Help page ── */
.help-content {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    max-width: 820px;
}

.help-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #333;
}

.help-content h2:first-child {
    margin-top: 0;
}

.help-content p {
    margin-bottom: 12px;
}

.help-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px auto;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.help-img-float {
    float: left;
    margin: 0 20px 12px 0;
    max-height: 120px;
    width: auto;
}

.help-content ol,
.help-content ul {
    padding-left: 22px;
    margin-bottom: 12px;
}

.help-content ol li,
.help-content ul li {
    margin-bottom: 8px;
}

.help-symbols {
    counter-reset: none;
}

.help-symbols > li {
    margin-bottom: 10px;
}

.help-symbols ul {
    margin-top: 6px;
}

.help-contact {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
    font-size: 13px;
    color: #777;
}

/* ── Pricing page ── */
.prices-page {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    max-width: 760px;
}

.prices-page h2 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 14px;
}

.prices-intro {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #555;
    margin-bottom: 28px;
    line-height: 1.7;
    border-left: 3px solid #e5e5e5;
    padding-left: 16px;
}

table.price-table {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-radius: 4px;
    overflow: hidden;
}

table.price-table thead tr {
    background: #333;
    color: #fff;
}

table.price-table th {
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    border: none;
}

table.price-table th:first-child {
    text-align: left;
    width: 130px;
}

table.price-table td {
    padding: 11px 16px;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
}

table.price-table td:first-child {
    text-align: left;
    font-weight: 600;
}

table.price-table tbody tr:last-child td {
    border-bottom: none;
}

table.price-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

table.price-table tbody tr:hover {
    background: #f0f4f8;
}

.price-free {
    color: #27ae60;
    font-weight: 600;
}

.price-amount {
    color: #2980b9;
    font-weight: 600;
}

/* ── Parameters page ── */
.params-page {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    max-width: 900px;
}

.params-page h2 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.params-intro {
    font-size: 14px;
    color: #666;
    margin-bottom: 32px;
}

.params-group {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: #333;
    padding: 8px 16px;
    margin: 32px 0 0 0;
    border-radius: 4px 4px 0 0;
}

table.params-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    color: #333;
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

table.params-table thead tr {
    background: #555;
    color: #fff;
}

table.params-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table.params-table td {
    padding: 12px 16px;
    vertical-align: top;
    border-bottom: 1px solid #ebebeb;
}

table.params-table tbody tr:last-child td {
    border-bottom: none;
}

table.params-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

table.params-table tbody tr:hover {
    background: #f0f4f8;
}

td.param-name {
    font-weight: 700;
    width: 200px;
    white-space: nowrap;
    color: #2980b9;
}

td.param-desc h3 {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin: 0 0 4px 0;
}

td.param-desc p {
    font-size: 13px;
    color: #555;
    margin: 0 0 6px 0;
    line-height: 1.55;
}

td.param-desc p:last-child {
    margin-bottom: 0;
}

/* ── Contact page ── */
.contact-page {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    max-width: 600px;
}

.contact-page h2 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.contact-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 28px;
}

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

.contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.contact-form select,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
}

.contact-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.contact-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41,128,185,.12);
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-form input:disabled {
    background: #f5f5f5;
    color: #888;
    cursor: default;
    border-color: #e0e0e0;
}

.contact-form .btn-submit {
    display: inline-block;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 11px 28px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: background 0.15s;
}

.contact-form .btn-submit:hover {
    background: #555;
}

.contact-msg {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 20px;
}

.contact-msg.success {
    background: #eafaf1;
    border: 1px solid #27ae60;
    color: #1e8449;
}

.contact-msg.error {
    background: #fdf2f2;
    border: 1px solid #c0392b;
    color: #922b21;
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .site-title { font-size: 20px; }
    #nav ul { flex-direction: column; }
    #nav .user-info { padding: 10px 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
    .home-layout { flex-direction: column; }
    .home-sidebar { width: 100%; }
    .home-main h2 { font-size: 22px; }
}

/* --- Migrazione dai siti legacy (home) -----------------------------------------
   I due pulsanti stanno su una griglia a due colonne uguali: stessa larghezza e
   stessa altezza qualunque sia la lunghezza dell'etichetta, che altrimenti li
   farebbe di misure diverse. */
.migra { margin-top: 14px; }
.migra .btn-migra {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #f4f6f9;
    color: #234;
    border: 1px solid #c3cddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.migra .btn-migra:hover { background: #e8eefb; }
.migra .btn-migra.attivo { background: #dbe7ff; border-color: #6b8fd6; }

.migra-pannello { display: none; margin-top: 10px; }
.migra-pannello.aperto { display: block; }
.migra-pannello[hidden] { display: none; }   /* l'attributo vince comunque */
.migra-pannello label { display: block; font-size: 13px; font-weight: 600; color: #234; }
.migra-pannello input[type=text] {
    width: 100%;
    margin: 4px 0 8px;
    padding: 8px;
    border: 1px solid #c3cddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}
.migra-pannello .btn-collega {
    width: 100%;
    padding: 10px 12px;
    background: #1c4fa1;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.migra-pannello .btn-collega:hover { background: #17418a; }
.migra-pannello .btn-annulla {
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    background: #fff;
    color: #445;
    border: 1px solid #c3cddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.migra-pannello .btn-annulla:hover { background: #f4f6f9; }
.migra .aiuto { font-size: 12px; color: #666; margin: 4px 0 6px; line-height: 1.35; }
/* Scelta del sito di provenienza: le etichette dei radio non sono titoli di campo, quindi
   non prendono il grassetto in blocco degli altri label del pannello. */
.migra-siti { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 8px; }
.migra-siti label { display: inline-flex; align-items: center; gap: 5px;
                    font-weight: 400; font-size: 13px; color: #234; cursor: pointer; }
.migra-siti input[type=radio] { margin: 0; }
/* esito della ricerca del conto: verde se trovato, rosso se no o se non ha funzionato */
.migra .aiuto.ok { color: #16663a; font-weight: 600; }
.migra .aiuto.ko { color: #a3341f; }

/* Il pulsante della migrazione lampeggia in giallo finche' non lo si apre: quasi tutti
   quelli che arrivano qui vengono da FIVL o dal Pulcino e devono passare di li', ma un
   pulsante azzurro fra gli altri azzurri non lo vede nessuno. Smette al primo clic - ha
   gia' fatto il suo lavoro - e sta fermo per chi ha chiesto di ridurre le animazioni. */
@keyframes migra-lampeggio {
    0%, 100% { background: #ffe272; border-color: #d9a400; }
    50%      { background: #fff9e0; border-color: #f3c73c; }
}
.migra .btn-migra.lampeggia {
    background: #ffe272;
    border-color: #d9a400;
    color: #4a3600;
    font-weight: 700;
    animation: migra-lampeggio 1.2s ease-in-out infinite;
}
.migra .btn-migra.lampeggia:hover { background: #ffd84a; }
@media (prefers-reduced-motion: reduce) {
    .migra .btn-migra.lampeggia { animation: none; }
}

/* Fumetto d'invito sotto il pulsante della migrazione: spiega a cosa serve quel pulsante,
   che da solo non lo dice. Stesso giallo dei fumetti della pagina mappe, cosi' chi passa da
   una pagina all'altra riconosce che e' la stessa voce che parla. */
.migra-invito {
    position: relative;
    margin: 10px 0 4px;
    padding: 9px 11px 10px;
    background: #fff8d0;
    border: 1px solid #e0c65a;
    border-radius: 6px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #3a3000;
}
.migra-invito[hidden] { display: none; }
/* la punta indica in su, verso il pulsante che il fumetto sta spiegando */
.migra-invito::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    background: #fff8d0;
    border-left: 1px solid #e0c65a;
    border-top: 1px solid #e0c65a;
    transform: rotate(45deg);
}
.migra-invito b { display: block; margin-bottom: 3px; }
#migra-invito-ok {
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid #b9a94e;
    border-radius: 4px;
    background: #fff;
    color: #5a4c10;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
#migra-invito-ok:hover { background: #fdf6dc; }

/* Passi intermedi (manda il codice, conferma il codice): sono azioni, non l'azione
   finale, quindi restano piu' leggeri del pulsante blu che chiude l'operazione. */
.migra-pannello .btn-passo {
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px solid #6b8fd6;
    border-radius: 4px;
    background: #eef3fd;
    color: #1c4fa1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.migra-pannello .btn-passo:hover:not(:disabled) { background: #dbe7ff; }
.migra-pannello .btn-passo:disabled,
.migra-pannello .btn-collega:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Quattro cifre da ricopiare da una e-mail: larghe e distanziate, si sbaglia meno. */
.migra-pannello input.codice {
    width: 6em;
    letter-spacing: .4em;
    text-align: center;
    font-size: 17px;
}
.esito-collega { font-size: 14px; line-height: 1.45; }

/* Avviso temporaneo in cima alla home (guasto alla migrazione del credito, 01/09/2026).
   Verde e non rosso: la notizia e' che il difetto e' rientrato, non che c'e' un guasto in
   corso; il rosso allarmerebbe chi non ha mai avuto il problema. Sparisce da solo alla
   scadenza fissata in index.php. */
.avviso-guasto {
    margin: 0 0 18px;
    padding: 11px 14px;
    background: #eef8ee;
    border: 1px solid #9bc79b;
    border-left-width: 4px;
    border-radius: 5px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1f4620;
}
.avviso-guasto b { display: block; margin-bottom: 3px; }