/* ==========================================================================
   fservices · portale clienti
   Si appoggia a fservices-theme/tokens.css (stessi colori dell'hub).
   Struttura: 1 base · 2 barre · 3 contenuto · 4 pulsanti e campi · 5 ticket ·
   6 knowledge base · 7 editor e campi avanzati · 8 piede
   ========================================================================== */

/* ---------- 1. Base ---------- */
html { background: transparent !important; }
body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-height: 100vh;
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
    color: var(--fs-text) !important;
    background-image: none;
}
body {
    background:
        radial-gradient(900px 480px at 88% -8%, rgba(213, 16, 22, var(--fs-glow-red)), transparent 60%),
        radial-gradient(800px 520px at -8% 6%, rgba(90, 169, 230, var(--fs-glow-blue)), transparent 60%),
        var(--fs-bg) !important;
    background-attachment: fixed !important;
}
#container {
    flex: 1 0 auto;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
    max-width: 1240px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
h1, h2, h3, h4 {
    font-family: 'Lemon Milk Pro Bold', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .015em;
    color: var(--fs-heading) !important;
    line-height: 1.35 !important;
}
#content a:not(.btn):not(.button) { color: var(--fs-link); }
#content a:not(.btn):not(.button):hover { color: var(--fs-link-hover); }
hr { border-color: var(--fs-line) !important; background-color: var(--fs-line) !important; }
.faded { color: var(--fs-muted) !important; }

/* ---------- 2. Barre (sempre navy, come nell'hub) ---------- */
#header.fs-chrome, #nav.fs-chrome, #footer.fs-chrome { position: relative; isolation: isolate; }
#header.fs-chrome::before, #nav.fs-chrome::before, #footer.fs-chrome::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: var(--fs-chrome-bg);
    pointer-events: none;
}
#nav.fs-chrome::before { box-shadow: inset 0 1px 0 var(--fs-line); }
#header.fs-chrome {
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 84px;
    padding: 12px 24px !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
}
#header .clear { display: none; }
#header .pull-right { float: none !important; order: 2; width: auto !important; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
#header .pull-right p { margin: 0; width: auto !important; }
#header .pull-right p + p:not(:has(a)) { display: none; }
#header .pull-right p:first-child {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    padding: 6px 8px 6px 18px;
    background: rgb(var(--fs-ink-rgb) / .06);
    border: 1px solid var(--fs-line);
    border-radius: 999px;
    font-size: 14px;
    color: var(--fs-muted) !important;
}
#header p, #header p a { color: var(--fs-text) !important; }
#header p a { text-decoration: none; padding: 4px 6px; border-radius: 999px; opacity: .85; }
#header p a:hover { opacity: 1; background: rgb(var(--fs-ink-rgb) / .1); color: var(--fs-heading) !important; }
#header p b { color: var(--fs-heading); }
#header .fs-theme-toggle { margin-left: 4px; }
#logo {
    order: 1;
    float: none !important;
    flex: 0 0 auto;
    display: block !important;
    height: 64px !important;
    width: 240px;
    margin: 0 !important;
    background: url("../fservices-theme/brand/fservices-logo-white.png") no-repeat left center / contain !important;
}
#logo img { visibility: hidden; }

#nav.fs-chrome {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2px;
    margin: 0 !important;
    padding: 0 24px !important;
    height: auto !important;
    line-height: normal !important;
    white-space: normal !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
#nav.fs-chrome::after {
    content: '';
    position: absolute;
    left: -100vmax;
    right: -100vmax;
    bottom: 0;
    height: 1px;
    background: var(--fs-line-strong);
    pointer-events: none;
}
#nav li { float: none !important; }
#nav li a {
    position: relative;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    line-height: normal !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em;
    color: var(--fs-muted) !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
#nav li a:hover { color: var(--fs-heading) !important; background: rgb(var(--fs-ink-rgb) / .07) !important; }
#nav li a.active {
    color: var(--fs-heading) !important;
    background: linear-gradient(180deg, transparent, rgba(213, 16, 22, .16)) !important;
    box-shadow: inset 0 -3px 0 var(--fs-red);
}

/* ---------- 3. Contenuto e messaggi ---------- */
#content {
    margin-top: 24px;
    padding: 28px 32px !important;
    color: var(--fs-text);
    background: var(--fs-card) !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 20px;
    box-shadow: var(--fs-shadow) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#content p { font-size: 16px; line-height: 1.6; }
#content p, #content li, #content label, #content span, #content td, #content th { color: var(--fs-text); }
#content .faded, #content .faded span { color: var(--fs-muted); }
#content h1, #content h2, #content h3, #content h4 { color: var(--fs-heading); }

#msg_notice, .notice_bar, #msg_warning, .warning_bar, .warning-banner, #msg_error, .error_bar, #msg_info {
    position: relative;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 12px 16px 12px 44px !important;
    line-height: 1.5 !important;
    background-color: var(--fs-surface) !important;
    background-image: none !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 12px;
    color: var(--fs-text) !important;
}
#msg_notice::before, .notice_bar::before, #msg_warning::before, .warning_bar::before, .warning-banner::before,
#msg_error::before, .error_bar::before, #msg_info::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent);
}
#msg_notice, .notice_bar { --c: var(--fs-ok); border-left: 3px solid var(--fs-ok) !important; }
#msg_warning, .warning_bar, .warning-banner { --c: var(--fs-warn); border-left: 3px solid var(--fs-warn) !important; }
#msg_error, .error_bar { --c: var(--fs-crit); border-left: 3px solid var(--fs-crit) !important; }
#msg_info { --c: var(--fs-info); border-left: 3px solid var(--fs-info) !important; }
#content #msg_info a, #content #msg_warning a { text-decoration: underline; }

.login-box, form#clientLogin { box-shadow: none !important; background-color: transparent !important; }
#clientLogin, #ticketForm div input, #clientLogin div input { background-image: none; }
.sidebar .content, .sidebar { background: var(--fs-surface) !important; border-radius: 14px; }
.warning { background: rgba(240, 168, 59, .14) !important; color: var(--fs-text) !important; }

/* ---------- 4. Pulsanti e campi ---------- */
.btn, .button, input[type="submit"], button[type="submit"] {
    background: var(--fs-btn-grad) !important;
    background-image: var(--fs-btn-grad) !important;
    border: none !important;
    border-radius: 100px !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    box-shadow: var(--fs-btn-shadow) !important;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.btn:hover, .button:hover, input[type="submit"]:hover, button[type="submit"]:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff !important;
}
input[type="reset"], input[type="button"], .action-button {
    background: var(--fs-surface) !important;
    background-image: none !important;
    border: 1px solid var(--fs-line-strong) !important;
    border-radius: 100px !important;
    color: var(--fs-text) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    box-shadow: none !important;
    cursor: pointer;
}
input[type="reset"]:hover, input[type="button"]:hover, .action-button:hover { background: var(--fs-surface-strong) !important; color: var(--fs-heading) !important; }
.action-button { padding: 6px 14px !important; font-size: 13px; }

#content input[type="text"], #content input[type="email"], #content input[type="password"],
#content input[type="tel"], #content input[type="number"], #content input[type="url"],
#content textarea, #content select,
#ticketForm div input, #clientLogin div input, #ticketForm div textarea, #clientLogin div textarea,
#reply input[type=text], #reply #response_options textarea, .search input[type=text] {
    background-color: var(--fs-field) !important;
    color: var(--fs-text) !important;
    border: 1px solid var(--fs-field-border) !important;
    border-radius: 10px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#content input:hover, #content textarea:hover, #content select:hover { border-color: var(--fs-field-border-hover) !important; }
#content input[type="text"]:focus, #content input[type="email"]:focus, #content input[type="password"]:focus,
#content input[type="tel"]:focus, #content input[type="number"]:focus, #content textarea:focus, #content select:focus {
    background-color: var(--fs-field-focus) !important;
    border-color: rgba(213, 16, 22, .7) !important;
    box-shadow: var(--fs-ring) !important;
    outline: none !important;
}
#content input::placeholder, #content textarea::placeholder { color: var(--fs-faint); opacity: 1; }
select option { background-color: var(--fs-popover); color: var(--fs-popover-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fs-red); }

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    background-color: var(--fs-field) !important;
    border: 1px solid var(--fs-field-border) !important;
    border-radius: 10px !important;
}
.select2-selection__rendered, .select2-selection { color: var(--fs-text) !important; }
.select2-selection__placeholder { color: var(--fs-faint) !important; }
.select2-dropdown {
    background: var(--fs-popover) !important;
    border: 1px solid var(--fs-line-strong) !important;
    border-radius: 12px;
    color: var(--fs-popover-text) !important;
}
.select2-results__option { color: var(--fs-popover-text) !important; }
.select2-search__field { background: var(--fs-field) !important; color: var(--fs-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--fs-btn-grad) !important; color: #fff !important; }

/* selettore data (jQuery UI) */
.ui-datepicker, .ui-widget-content {
    background: var(--fs-popover) !important;
    color: var(--fs-popover-text) !important;
    border: 1px solid var(--fs-line-strong) !important;
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
}
.ui-datepicker .ui-datepicker-header, .ui-widget-header { background: var(--fs-th-bg) !important; border: none !important; color: var(--fs-heading) !important; border-radius: 10px; }
.ui-state-default, .ui-widget-content .ui-state-default { background: transparent !important; border: 1px solid transparent !important; color: var(--fs-popover-text) !important; border-radius: 8px; }
.ui-state-hover, .ui-widget-content .ui-state-hover { background: var(--fs-surface-strong) !important; color: var(--fs-heading) !important; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-state-highlight, .ui-widget-content .ui-state-highlight { background: var(--fs-btn-grad) !important; color: #fff !important; border-color: transparent !important; }

/* ---------- 5. Ticket ---------- */
.search.well {
    background: var(--fs-surface) !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 14px !important;
    margin: 0 0 16px !important;
}
.states a.state { color: var(--fs-muted) !important; }
.states a.state.active, .states a.state:hover { color: var(--fs-heading) !important; }

#ticketTable {
    width: 100% !important;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    overflow: hidden;
}
#ticketTable caption {
    background-color: var(--fs-raised) !important;
    color: var(--fs-heading) !important;
    border: 1px solid var(--fs-line) !important;
    border-bottom: none !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 16px !important;
    font-weight: 700;
}
#ticketTable th {
    height: auto !important;
    line-height: normal !important;
    background-color: var(--fs-th-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--fs-line) !important;
    color: var(--fs-faint) !important;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    font-weight: 700;
    padding: 11px 16px !important;
}
#ticketTable th a { color: var(--fs-faint) !important; }
#ticketTable td {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--fs-line) !important;
    color: var(--fs-text) !important;
    padding: 14px 16px !important;
}
#ticketTable tr:last-child td { border-bottom: none !important; }
#ticketTable tr.alt td { background-color: var(--fs-row-alt) !important; }
#ticketTable tbody tr:hover td { background-color: var(--fs-row-hover) !important; }
#ticketTable a { color: var(--fs-text) !important; }
#ticketTable a:hover { color: var(--fs-red-text) !important; }
#ticketTable + div {
    background: var(--fs-raised) !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    margin: 10px 0 24px !important;
    color: var(--fs-muted) !important;
    font-size: 12px !important;
}
#ticketTable + div a { color: var(--fs-muted) !important; }

.infoTable, table.custom-data {
    background: var(--fs-surface) !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 12px;
}
.infoTable .headline, table.custom-data .headline, table .headline {
    background-color: var(--fs-raised) !important;
    color: var(--fs-heading) !important;
    border-bottom: 1px solid var(--fs-line) !important;
}
.infoTable th, table.custom-data th {
    background-color: transparent !important;
    color: var(--fs-muted) !important;
    font-weight: 600;
    width: 150px !important;
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: top;
}
.infoTable td, table.custom-data td { background-color: transparent !important; color: var(--fs-text) !important; }
#ticketInfo { width: 100% !important; }
#ticketInfo h1 { border-bottom-color: var(--fs-line-strong) !important; }
#ticketInfo > tbody > tr:nth-child(2) > td:first-child { padding-right: 12px !important; }
#ticketInfo > tbody > tr:nth-child(2) > td:last-child { padding-left: 12px !important; }

#ticketThread::before { display: none !important; }
#ticketThread .thread-entry, .thread-entry {
    border: 1px solid var(--fs-line) !important;
    border-radius: 14px !important;
    overflow: hidden;
}
.thread-entry.avatar .header:before, .thread-entry.avatar .header:after { display: none !important; }
.thread-entry .header { border: none !important; border-radius: 0 !important; color: var(--fs-text) !important; }
.thread-entry.message .header  { background: rgba(90, 169, 230, .16) !important; }
.thread-entry.response .header { background: rgba(213, 16, 22, .14) !important; }
.thread-entry .header time, .thread-entry .header .faded.title { color: var(--fs-muted) !important; }
/* .thread-body mostra qualunque HTML salvato (messaggi, FAQ): sfondo e testo del tema */
.thread-body {
    background-color: var(--fs-surface) !important;
    color: var(--fs-text) !important;
    border: none !important;
    border-radius: 0 !important;
}
.thread-body * { color: inherit !important; background-color: transparent !important; border-color: var(--fs-line) !important; }
.thread-body a { color: var(--fs-link) !important; }
.thread-body .attachments { background-color: var(--fs-surface) !important; }
.thread-body pre { background: var(--fs-surface-strong) !important; }
#content .thread-body p { font-size: revert; line-height: revert; }
#landing_page .thread-body { background-color: transparent !important; }
#landing_page .thread-body, #landing_page .thread-body p, #landing_page .thread-body li, #landing_page .thread-body span { color: var(--fs-text) !important; }
#landing_page .thread-body p { font-size: 16px !important; line-height: 1.6 !important; }
#landing_page .thread-body h1 { color: var(--fs-heading) !important; }

#reply {
    background: var(--fs-surface) !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 14px;
}
#reply h2 { border-bottom-color: var(--fs-line-strong) !important; }
.type-icon, .freetext-files { background-color: var(--fs-surface) !important; color: var(--fs-text) !important; border-color: var(--fs-line) !important; }
.thread-entry::before, .thread-entry::after { border-color: transparent !important; }
.thread-event .type-icon::after { display: none !important; }
.type-icon.dark { background-color: var(--fs-surface-strong) !important; border-color: var(--fs-line-strong) !important; }

/* ---------- 6. Knowledge base ---------- */
#kb > li { background: transparent !important; border-bottom: 1px solid var(--fs-line) !important; }
#kb > li > i { filter: var(--fs-icon-filter); }
#kb li .faded { color: var(--fs-muted) !important; }
#faq ol li a { color: var(--fs-text); }
#faq ol li:hover, #faq ol li a:hover { background-color: var(--fs-row-hover) !important; }
#faq .article-meta { background: var(--fs-surface) !important; border-radius: 10px; color: var(--fs-text); }

/* ---------- 7. Editor e campi avanzati ---------- */
.redactor-box { background: var(--fs-field) !important; border: 1px solid var(--fs-field-border) !important; border-radius: 12px; overflow: hidden; }
.redactor-box.redactor-focus, .redactor-box:focus-within { border-color: rgba(213, 16, 22, .6) !important; box-shadow: var(--fs-ring); }
.redactor-toolbar-wrapper, .redactor-toolbar { background: var(--fs-th-bg) !important; border: none !important; border-bottom: 1px solid var(--fs-line) !important; }
.redactor-toolbar .re-button { background: transparent !important; color: var(--fs-muted) !important; border-radius: 8px; }
.redactor-toolbar .re-button:hover { background: var(--fs-surface-strong) !important; color: var(--fs-heading) !important; }
.redactor-toolbar .re-button-icon:before { filter: var(--fs-icon-filter); }
.redactor-in { background: transparent !important; color: var(--fs-text) !important; }
.redactor-in p, .redactor-in span, .redactor-in div { color: inherit !important; }
.redactor-placeholder:before { color: var(--fs-faint) !important; }
.redactor-statusbar { background: var(--fs-th-bg) !important; color: var(--fs-faint) !important; border: none !important; border-top: 1px solid var(--fs-line) !important; }
.redactor-statusbar li, .redactor-statusbar a { color: var(--fs-faint) !important; }
.redactor-dropzone { background: var(--fs-surface) !important; color: var(--fs-muted) !important; border-color: var(--fs-line-strong) !important; border-radius: 10px; }
.redactor-dropzone a { color: var(--fs-link) !important; }
.redactor-dropdown, .re-dropdown { background: var(--fs-popover) !important; border: 1px solid var(--fs-line-strong) !important; border-radius: 12px; }
.redactor-dropdown a, .re-dropdown a { color: var(--fs-popover-text) !important; }

/* popup "Attendere!" durante l'invio di un form */
#loading {
    background: var(--fs-popover) !important;
    border: 1px solid var(--fs-line-strong) !important;
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6) !important;
    color: var(--fs-popover-text) !important;
}
#loading h4 { color: var(--fs-heading) !important; }
#loading p { color: var(--fs-muted) !important; }
#overlay { background: rgba(8, 12, 30, .66) !important; }

/* ---------- 8. Piede (sempre navy) ---------- */
#footer.fs-chrome {
    width: 90% !important;
    max-width: 1240px !important;
    margin: 28px auto 0 !important;
    padding: 24px 0 !important;
    background: transparent !important;
    border: none !important;
    text-align: center;
    color: var(--fs-muted) !important;
}
#footer .brand-footer-logo { content: url("../fservices-theme/brand/fservices-mark-white.png"); display: block; margin: 0 auto; max-height: 50px; width: auto; }
#footer .brand-footer-wordmark { display: block; margin: 6px auto 0; max-height: 22px; width: auto; }
#footer .brand-footer-motto { display: block; color: var(--fs-text); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
#footer .brand-footer-address { display: block; color: var(--fs-muted); font-size: 12.5px; margin-top: 4px; }
#footer #poweredBy { display: none !important; }

/* Pulsante «Menu» (visibile solo su telefono, con JavaScript attivo) */
.fs-menu-toggle {
    display: none;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    font: 700 13px/1.2 'Roboto', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fs-heading);
    text-align: left;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line-strong, var(--fs-line));
    border-radius: 14px;
    cursor: pointer;
}
.fs-menu-toggle:focus-visible { outline: 3px solid var(--fs-red); outline-offset: 2px; }
.fs-menu-icon, .fs-menu-icon::before, .fs-menu-icon::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; content: '';
}
.fs-menu-icon { position: relative; flex: 0 0 20px; }
.fs-menu-icon::before { position: absolute; top: -6px; }
.fs-menu-icon::after { position: absolute; top: 6px; }
.fs-menu-label { flex: 0 0 auto; }
.fs-menu-current { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fs-muted); font-weight: 500; letter-spacing: .04em; }
.fs-menu-chevron { flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; margin-top: -4px; }
.fs-menu-open .fs-menu-chevron { transform: rotate(-135deg); margin-top: 4px; }

/* ---------- 9. Schermi stretti (telefono) ---------- */
@media (max-width: 720px) {
    #container { width: calc(100% - 24px) !important; }
    #header.fs-chrome { padding: 10px 14px !important; min-height: 0; }
    /* logo a sinistra, «Ospite | Accedi» e interruttore del tema a destra sulla stessa riga */
    #logo { width: 128px; height: 42px !important; }
    #header .pull-right { order: 2; flex: 0 1 auto; width: auto !important; margin-left: auto; justify-content: flex-end; max-width: 100%; }
    #header .pull-right p:first-child { border-radius: 18px; padding: 4px 6px 4px 12px; max-width: 100%; font-size: 12.5px; }
    /* Menu a tendina: con JavaScript l'elenco sta chiuso dietro al pulsante «Menu»; senza, resta a colonna */
    #nav.fs-chrome { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 6px 12px 10px !important; }
    #nav.fs-chrome li { width: 100%; }
    #nav li a { text-align: left; padding: 15px 14px !important; font-size: 13px !important; border-radius: 10px !important; border-bottom: 1px solid var(--fs-line) !important; }
    #nav li:last-child a { border-bottom: none !important; }
    #nav li a.active { box-shadow: inset 4px 0 0 var(--fs-red) !important; background: rgba(213, 16, 22, .14) !important; }
    .fs-js #nav.fs-chrome { display: none; }
    .fs-js.fs-menu-open #nav.fs-chrome { display: flex; }
    .fs-js .fs-menu-toggle { display: flex; }
    #content { margin-top: 16px; padding: 18px 14px !important; border-radius: 16px; overflow-x: auto; }
    #content p { font-size: 15px; }
    #ticketInfo, #ticketInfo > tbody, #ticketInfo > tbody > tr, #ticketInfo > tbody > tr > td { display: block; width: 100% !important; }
    #ticketInfo > tbody > tr:nth-child(2) > td:first-child { padding: 0 0 12px !important; }
    #ticketInfo > tbody > tr:nth-child(2) > td:last-child { padding: 0 !important; }
    #ticketTable { min-width: 560px; }
    .search.well { padding: 10px !important; }
    .search.well .pull-right { float: none !important; margin-top: 8px; }
    #footer.fs-chrome { width: 100% !important; }
}

/* ---------- 9b. Telefono e tablet stretti: il tema di osTicket ha larghezze fisse (565px, 295px, 600px...) ---------- */
@media (max-width: 900px) {
    html, body { overflow-x: hidden; }
    #content { margin-left: 0 !important; margin-right: 0 !important; }
    #landing_page, .main-content, #landing_page .main-content, .search-form, .sidebar, .thread-body, #faq, .row, .span8, .span4,
    #landing_page #new_ticket, #landing_page #check_status, #clientLogin, .login-box, .sidebar .content {
        width: auto !important; max-width: 100% !important; float: none !important;
        margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box;
    }
    .sidebar { margin-top: 20px; background: transparent !important; }
    .front-page-button p { margin: 0 0 12px; }
    .front-page-button .button { display: block; width: 100% !important; box-sizing: border-box; text-align: center; }
    .search-form form { display: flex; gap: 8px; }
    .search-form input.search { flex: 1 1 auto; min-width: 0; width: auto !important; }
    .search-form .button { flex: 0 0 auto; }
    #ticketForm div input, #ticketForm div textarea, #ticketForm div select, #ticketForm td textarea, #ticketForm td input, #ticketForm td select,
    #clientLogin div input, #clientLogin div textarea, #clientLogin td textarea {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box;
    }
    #ticketForm > table, #ticketForm > table td, #ticketForm > table td + td { display: block; width: 100% !important; }
    #ticketForm div label, #clientLogin div label { display: block; width: auto !important; float: none !important; }
    #ticketForm div select { float: none !important; width: 100% !important; }
    #content img, #content iframe, #content video, #content pre { max-width: 100%; }
    #content pre, .thread-body { overflow-x: auto; word-break: break-word; }
    #clientLogin > div, #clientLogin div[style*="table-cell"], #clientLogin .instructions { display: block !important; padding-left: 0 !important; padding-right: 0 !important; }
    #clientLogin div[style*="table-cell"] { padding-top: 12px !important; padding-bottom: 0 !important; }
    .fs-remote { padding: 18px 16px; }
    .fs-remote .fs-remote-buttons .button { display: block; margin: 0 0 10px; text-align: center; }
    #ticketForm p:last-of-type .button, #ticketForm .button, #ticketForm input[type="submit"], #ticketForm input[type="reset"], #ticketForm input[type="button"] { margin: 0 6px 8px 0; }
    #footer.fs-chrome { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 480px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 17px !important; }
}

/* Assistenza remota (LiveLet / LiveCare) nella pagina iniziale */
.fs-remote { margin-top: 24px; padding: 22px 24px; background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: 14px; }
.fs-remote h3 { margin: 0 0 8px; color: var(--fs-heading); font-size: 18px; }
.fs-remote h3 + p + p + h3, .fs-remote .fs-remote-buttons + h3 { margin-top: 20px; }
.fs-remote p { margin: 0 0 14px; color: var(--fs-text); line-height: 1.6; }
.fs-remote .fs-remote-buttons .button { display: inline-block; margin: 0 8px 8px 0; }
.fs-remote .fs-remote-links a { display: block; margin: 0 0 6px; }

/* ---------- 10. Revisione grafica: gerarchia dei pulsanti, blocco iniziale, contatti ---------- */
/* Il rosso pieno resta solo per l'azione principale; le altre sono a contorno */
.button.fs-ghost, .green.button, .search-form .button {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fs-line-strong) !important;
    box-shadow: none !important;
    color: var(--fs-heading) !important;
}
.button.fs-ghost:hover, .green.button:hover, .search-form .button:hover {
    background: var(--fs-surface-strong) !important;
    filter: none;
}
#content label { font-size: 15px; }
#content .fs-form-hint { color: var(--fs-muted); }
#content .fs-form-hint a { font-weight: 700; }

/* Blocco iniziale della pagina iniziale */
#landing_page .fs-hero { padding: 6px 4px 30px; }
#landing_page .fs-eyebrow { margin: 0 0 14px; font: 700 13px/1 'Roboto', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fs-red-text); }
#landing_page .fs-hero h1 { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 46px) !important; line-height: 1.1 !important; max-width: 18ch; }
#content #landing_page .fs-lead { margin: 0 0 26px; max-width: 58ch; font-size: 19px; line-height: 1.55; }
#landing_page .fs-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
#landing_page .fs-hero-cta .button { padding: 14px 32px !important; font-size: 17px !important; }
#content #landing_page .fs-urgent { margin: 0; font-size: 15px; color: var(--fs-muted); }
#landing_page .fs-urgent a { font-weight: 700; color: var(--fs-heading) !important; text-decoration: underline; text-underline-offset: 3px; }
#landing_page .fs-trust { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; padding: 20px 6px; background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: 16px; }
#landing_page .fs-trust div { padding: 2px 10px; text-align: center; }
#landing_page .fs-trust div + div { border-left: 1px solid var(--fs-line); }
#landing_page .fs-trust b { display: block; font: 900 clamp(24px, 3.4vw, 34px)/1.1 'Roboto', sans-serif; color: var(--fs-red-text); }
#landing_page .fs-trust span { font-size: 14px; color: var(--fs-muted); }
.main-content.fs-wide { width: auto !important; max-width: none; }
.fs-remote .fs-remote-buttons .button { padding: 10px 22px !important; }

/* «Registrati» in fondo a destra, meno in vista delle voci principali */
#nav li:has(a.register) { margin-left: auto; }
#nav li a.register { opacity: .8; }

/* Verifica stato: riquadro nello stesso stile delle card, campi a tutta larghezza */
#clientLogin { border: 1px solid var(--fs-line-strong) !important; border-radius: 16px !important; background: var(--fs-surface) !important; }
#clientLogin input[type="text"], #clientLogin input[type="password"] { width: 100% !important; min-width: 260px; box-sizing: border-box; font-size: 16px; }

/* Piè di pagina: contatti e informativa */
#footer .brand-footer-contact, #footer .brand-footer-links { display: block; margin-top: 8px; font-size: 13.5px; color: var(--fs-muted); }
#footer .brand-footer-contact a { color: var(--fs-text) !important; font-weight: 600; text-decoration: none; }
#footer .brand-footer-links { font-size: 12.5px; }
#footer .brand-footer-links a { color: var(--fs-muted) !important; text-decoration: underline; text-underline-offset: 2px; }

/* Articoli della knowledge base in evidenza (pagina iniziale): colonne comode e testo leggibile */
#landing_page .featured-category { width: 100%; margin-top: 18px; }
#landing_page .featured-category .category-name { font-size: 18px; font-weight: 700; color: var(--fs-heading); }
#landing_page .article-headline { margin: 10px 0 0 34px; }
#landing_page .article-title a { font-size: 16px; font-weight: 600; }
#content #landing_page .article-teaser, #landing_page .article-teaser { height: auto; font-size: 14px; line-height: 1.55; color: var(--fs-muted); margin-top: 2px; }
@media (min-width: 900px) {
    #landing_page .featured-category { width: 49.4%; }
    #landing_page .featured-category .article-headline { padding-right: 18px; }
}
@media (max-width: 720px) {
    #landing_page .article-headline { margin-left: 0; }
}

/* Barra «Chiama / WhatsApp» fissa in basso, solo su telefono */
.fs-callbar { display: none; }
@media (max-width: 720px) {
    .fs-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--fs-card-solid); border-top: 1px solid var(--fs-line-strong); }
    .fs-callbar a { flex: 1; padding: 13px 10px; text-align: center; font: 700 16px/1 'Roboto', sans-serif; border-radius: 999px; text-decoration: none; color: var(--fs-heading) !important; border: 1px solid var(--fs-line-strong); }
    .fs-callbar a:first-child { background: var(--fs-red); border-color: var(--fs-red); color: #fff !important; }
    body { padding-bottom: 72px; }
    #landing_page .fs-hero-cta .button { width: 100%; text-align: center; box-sizing: border-box; }
    #landing_page .fs-trust { grid-template-columns: 1fr 1fr; row-gap: 16px; }
    #landing_page .fs-trust div:nth-child(3) { border-left: none; }
    #content input[type="text"], #content input[type="email"], #content input[type="tel"], #content input[type="password"], #content textarea, #content select { font-size: 16px !important; }
    #nav li:has(a.register) { margin-left: 0; }
}