* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bgmain:url('/imgs/base/marble.webp');
--bgmaincol: 249,246,241;
--bgcolor:255,255,255;
--bg:244,247,249;
--text:0,0,0;
--textb:179,138,62;
--textc:179,138,62;
--textd:179,138,62;
--bgsubmit:url('/imgs/base/marbleinput.webp');
--bgsubmitb:url('/imgs/base/marbleinput.webp');
--bgmenu:url('/imgs/base/marbleinput.webp');
--bgselect:url('/imgs/base/citydawn.webp');
--texte:225,220,155;
--azione:0,0,0;
--tag:200,50,50;
--nome:165,80,205;
--testochat: 0,0,0;
--nomichat: 0,0,0;
--sms-on-page-bg:212,244,221;
--sms-on-bg:235,247,238;
--sms-on-textb:60,142,84;
--sms-on-textc:60,142,84;
--sms-on-textd:60,142,84;
--sms-on-texte:88,164,105;
--sms-on-tag:38,138,78;
--sms-on-bgsubmit:linear-gradient(135deg, rgba(108,190,128,0.95), rgba(42,128,76,0.95));
--sms-on-bgsubmitb:linear-gradient(135deg, rgba(124,205,142,0.95), rgba(50,142,86,0.95));
--sms-on-bgmenu:linear-gradient(135deg, rgba(237,249,240,1), rgba(211,238,218,1));
--sms-on-bgselect:linear-gradient(135deg, rgba(225,246,230,1), rgba(186,225,198,1));
}

html.skin-ny, body.skin-ny {
--bgmain:url('/imgs/base/city.webp');
--bgmaincol: 22,42,62;
--bgcolor:15,23,42;
--bg:58,124,172;
--text:255,255,255;
--textb:159,197,227;
--textc:255,255,255;
--textd:115, 155, 230;
--bgsubmit:rgba(33,88,143,0.8);
--bgsubmitb:url('/imgs/base/cityblue.webp');
--bgmenu:url('/imgs/base/city.webp');
--bgselect:url('/imgs/base/marbleblue.webp');
--texte:159,197,227;
--azione:200,225,240;
--tag:115,230,135;
--nome:200,150,235;
--testochat: 255,255,195;
--nomichat:130,190,255;
--sms-on-page-bg:13,46,32;
--sms-on-bg:34,95,61;
--sms-on-textb:154,220,170;
--sms-on-textc:236,255,241;
--sms-on-textd:86,188,116;
--sms-on-texte:154,220,170;
--sms-on-tag:135,235,155;
--sms-on-bgsubmit:rgba(28,105,65,0.86);
--sms-on-bgsubmitb:linear-gradient(135deg, rgba(36,128,78,0.95), rgba(20,78,50,0.95));
--sms-on-bgmenu:linear-gradient(135deg, rgba(18,70,46,1), rgba(12,48,34,1));
--sms-on-bgselect:linear-gradient(135deg, rgba(30,98,62,1), rgba(14,56,38,1));
}

.sms-on-theme,
html.sms-on-theme,
body.sms-on-theme {
--bg:var(--sms-on-bg);
--textb:var(--sms-on-textb);
--textc:var(--sms-on-textc);
--textd:var(--sms-on-textd);
--texte:var(--sms-on-texte);
--tag:var(--sms-on-tag);
--bgsubmit:var(--sms-on-bgsubmit);
--bgsubmitb:var(--sms-on-bgsubmitb);
--bgmenu:var(--sms-on-bgmenu);
--bgselect:var(--sms-on-bgselect);
background-color:rgba(var(--sms-on-page-bg),1);
}

.ph-bootstrap-fallback::before {
    vertical-align: middle;
}

.ph-fallback-spin {
    display: inline-block;
    animation: phFallbackSpin 1s linear infinite;
}

.ph-fallback-flip-horizontal {
    display: inline-block;
    transform: scaleX(-1);
}

@keyframes phFallbackSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ph,
.ph-fill,
.ph-bold,
.ph-duotone,
.ph-light,
.ph-regular,
.ph-thin {
  line-height: inherit !important;
  transform-origin: center center !important;
}
.testochat{color: rgba(var(--testochat), 1);}
.nomichat{color: rgba(var(--nomichat), 1);}
/*
:where(a, a:link, a:visited, a:hover, a:active) {
    text-decoration: inherit !important;
    color: inherit;
    font-weight: inherit !important;
}
*/
:where(a, a:link, a:visited, a:hover, a:active) {
    text-decoration: inherit;
    color: inherit;
    font-weight: inherit;
}
/* =========================================
   CUSTOM SCROLLBARS (Webkit & Firefox)
   ========================================= */
/* --- FIX SWEETALERT (Sopra le modali) --- */
.swal2-container {
    z-index: 99999 !important;
}

/* --- Firefox --- */
* {
    scrollbar-width: thin; /* Barra sottile */
    scrollbar-color: rgba(var(--textb), 0.6) rgba(var(--bgcolor), 0.1); /* Colore maniglia / Colore sfondo */
}

/* --- Chrome, Edge, Safari (Webkit) --- */

/* Larghezza della barra */
::-webkit-scrollbar {
    width: 8px;  /* Verticale */
    height: 8px; /* Orizzontale (es. per la taskbar) */
}

/* Sfondo della barra (Track) */
::-webkit-scrollbar-track {
    background: rgba(var(--bgcolor), 0.1); 
    border-radius: 4px;
}

/* La parte che si muove (Thumb) */
::-webkit-scrollbar-thumb {
    background-color: rgba(var(--textb), 0.6); /* Usa il colore 'textb' (oro/azzurro) */
    border-radius: 4px; /* Arrotondata */
    border: 1px solid rgba(var(--bgcolor), 0.2); /* Un leggero bordo per stacco */
}

/* Quando passi il mouse sopra la barra */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--textb), 1); /* Diventa colore pieno */
    cursor: pointer;
}

/* Angolino (incrocio tra scrollbar vert e orizz) */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- Specifico per la Taskbar (Barra in basso) --- */
/* La rendiamo ancora più sottile per non essere invasiva */
#taskbar-container::-webkit-scrollbar {
    height: 4px;
}
#taskbar-container::-webkit-scrollbar-thumb {
    background-color: rgba(var(--textb), 0.4);
}
#taskbar-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(var(--textb), 0.8);
}
/* =========================================
   INTERACTIVITY & CURSORS (Richiesta specifica)
   ========================================= */
.cursauto        { cursor: auto; }
.default     { cursor: default; }
.pointer     { cursor: pointer; }
.wait        { cursor: wait; }
.curstext        { cursor: text; }
.move        { cursor: move; }
.help        { cursor: help; }
.noallo { cursor: not-allowed; }
.crosshair   { cursor: crosshair; }
.grab        { cursor: grab; }
.grabbing    { cursor: grabbing; }
.nocurs        { cursor: none; }
.colres  { cursor: col-resize; }
.rowres  { cursor: row-resize; }

.noevents { pointer-events: none; }
.pointauto { pointer-events: auto; }

.noresize        { resize: none; }
.resizexy        { resize: both; }
.resizex           { resize: horizontal; }
.resizey           { resize: vertical; }

.noselect        { user-select: none; }
.seltext        { user-select: text; }
.selall         { user-select: all; }
.selauto        { user-select: auto; }

/* =========================================
   DISPLAY & FLOW
   ========================================= */
.block              { display: block; }
.inblock       { display: inline-block; }
.inline             { display: inline; }
.flex               { display: flex; }
.inflex        { display: inline-flex; }
.grid               { display: grid; }
.ingrid        { display: inline-grid; }
.table              { display: table; }
.trow          { display: table-row; }
.tcell         { display: table-cell; }
.hidden             { display: none; }

/* Floats & Clear */
.flosx         { float: left; }
.flodx        { float: right; }
.noflo         { float: none; }
.clearsx         { clear: left; }
.cleardx        { clear: right; }
.clearxx         { clear: both; }
.noclear         { clear: none; }

/* Visibility */
.visible            { visibility: visible; }
.invisible          { visibility: hidden; }
.collapse           { visibility: collapse; }

/* =========================================
   POSITIONING & INSET
   ========================================= */
.static             { position: static; }
.fixed              { position: fixed; }
.absolute           { position: absolute; }
.relative           { position: relative; }
.sticky             { position: sticky; }

/* Top / Right / Bottom / Left */
.top              { top: 0; }
.top10              { top: 10px; }
.top20{top:20px;}
.top75{top:75px;}
.top50pm100 { top: calc(50% - 100px); }
.top50p             { top: 50%; }
.top100p            { top: 100%; }

.rightm70{right:-70px;}
.right            { right: 0!important; }
.right10            { right: 10px; }
.right20 {right:20px;}
.right50p           { right: 50%; }
.right100p          { right: 100%; }
.rightm100vw{right:-100vw;}
.rightm100p{right:-100%;}

.bot           { bottom: 0; }
.bot10           { bottom: 10px; }
.bot50 {bottom:50px;}
.bot50p          { bottom: 50%; }
.bot100p         { bottom: 100%; }

.left             { left: 0; }
.left10             { left: 10px; }
.left20 {left:20px;}
.left50p            { left: 50%; }
.left100p           { left: 100%; }

/* Inset (shorthand per top/right/bottom/left) */
.ins            { top: 0; right: 0; bottom: 0; left: 0; }
.insauto         { top: auto; right: auto; bottom: auto; left: auto; }

/* Z-Index */
.zindex                { z-index: 0; }
.zindex1                { z-index: 1; }
.zindex999               { z-index: 999; }
.zindex998               { z-index: 998; }
.zindex100              { z-index: 100; }
.zindexauto             { z-index: auto; }

/* =========================================
   SIZING (WIDTH / HEIGHT)
   ========================================= */
/* Width */
.w                { width: 0; }
.w10               { width: 10px; }
.w40{width:40px;}
.w50p               { width: 50%; }
.w100p              { width: 100%; }
.wauto             { width: auto; }
.wscreen           { width: 100vw; }

/* Min-Width */
.minw            { min-width: 0; }
.minw100            { min-width: 100px; }
.minw50p           { min-width: 50%; }
.minw100p          { min-width: 100%; }

/* Max-Width */
.maxw            { max-width: 0; }
.maxw100            { max-width: 100px; }
.maxw450         { max-width: 450px; }
.maxw50p           { max-width: 50%; }
.maxw100p          { max-width: 100%; }
.nomaxw         { max-width: none; }

/* Height */
.h                { height: 0; }
.h10              { height: 10px; }
.h20                { height: 20px; }
.h40 {height:40px;}
.h50                { height: 50px; }
.h75 {height:75px;}
.h100 {height:100px;}
.h120             { height: 120px; }
.h50p               { height: 50%; }
.h100p              { height: 100%; }
.hauto             { height: auto; }
.hscreen           { height: 100vh; }
.height100pm125 { height: calc(100% - 125px); }

/* Min-Height */
.minh            { min-height: 0; }
.minh1            { min-height: 1px; }
.minh50p           { min-height: 50%; }
.minh100p          { min-height: 100%; }

/* Max-Height */
.maxh            { max-height: 0; }
.maxh1            { max-height: 1px; }
.maxh50p           { max-height: 50%; }
.maxh100p          { max-height: 100%; }

/* =========================================
   SPACING (MARGIN & PADDING)
   ========================================= */
/* Margin */
.nom    { margin: 0; }
.m1    { margin: 1px; }
.m50p   { margin: 50%; }
.m100  { margin: 100px; }
.m15{margin:15px;}
.mauto { margin: auto; }

.mtopm100{margin-top:-100px;}
.mtopm5{margin-top:-5px;}
.mtopm1{margin-top:-1px;}
.mtop   { margin-top: 0; }
.mtop1   { margin-top: 1px; }
.mtop5   { margin-top: 5px; }
.mtop15   { margin-top: 15px; }
.mtop50  { margin-top: 50px; }
.mtop75{margin-top:75px;}
.mtop100 { margin-top: 100px; }

.mright   { margin-right: 0; }
.mright1   { margin-right: 1px; }
.mright5   { margin-right: 5px; }
.mright10   { margin-right: 10px; }
.mright20   { margin-right: 20px; }
.mright50  { margin-right: 50px; }
.mright100 { margin-right: 100px; }

.mbot   { margin-bottom: 0; }
.mbot1   { margin-bottom: 1px; }
.mbot50  { margin-bottom: 50px; }
.mbot100 { margin-bottom: 100px; }

.mleft   { margin-left: 0; }
.mleft1   { margin-left: 1px; }
.mleft5{margin-left:5px;}
.mleft40{margin-left:40px;}
.mleft50  { margin-left: 50px; }
.mleft100 { margin-left: 100px; }

/* Padding */
.p    { padding: 0; }
.p1    { padding: 1px; }
.p3{padding:3px;}
.p8{padding:8px;}
.p12{padding:12px;}
.p18{padding:18px;}
.p24{padding:24px;}
.p30    { padding:30px; }
.p50p   { padding: 50%; }
.p100  { padding: 100px; }

.ptop   { padding-top: 0; }
.ptop1   { padding-top: 1px; }
.ptop5   { padding-top: 5px; }
.ptop50  { padding-top: 50px; }
.ptop100 { padding-top: 100px; }

.pright   { padding-right: 0; }
.pright1   { padding-right: 1px; }
.pright12{padding-right:12px;}
.pright18{padding-right:18px;}
.pright24{padding-right:24px;}
.pright50  { padding-right: 50px; }
.pright100 { padding-right: 100px; }

.pbot   { padding-bottom: 0; }
.pbot1   { padding-bottom: 1px; }
.pbot50  { padding-bottom: 50px; }
.pbot100 { padding-bottom: 100px; }

.pleft   { padding-left: 0; }
.pleft1   { padding-left: 1px; }
.pleft12{padding-left:12px;}
.pleft50  { padding-left: 50px; }
.pleft100 { padding-left: 100px; }

/* =========================================
   TYPOGRAPHY
   ========================================= */
/* Color */
.nero         { color: black; }
.bianco        { color: white; }
.trasparente   { color: transparent; }
.text{color:rgba(var(--text),1);}
.text0v8{color:rgba(var(--text),0.8);}
.text0v6{color:rgba(var(--text),0.6);}
.textb{color:rgba(var(--textb),1);}
.textc{color:rgba(var(--textc),1);}
.antitext{color:rgba(var(--bgcolor),1);}

/* Font Family (Generic) */
.font-sans          { font-family: sans-serif; }
.font-serif         { font-family: serif; }
.font-mono          { font-family: monospace; }
.mont{font-family: 'Montserrat', sans-serif;  font-optical-sizing: auto;}
.cinzel{    font-family: 'Cinzel', serif;  font-optical-sizing: auto;}
.swal2-popup {
    font-family: 'Montserrat', sans-serif !important;
}
.swal2-title {
    font-family: 'Cinzel', serif;
}
.swal-booking-btn {
    font-size: 0.8rem !important;
}

/* SweetAlert tema City (skin-ny): applicazione globale coerente */
html.skin-ny .swal2-popup,
body.skin-ny .swal2-popup {
    background: rgba(var(--bgcolor), 1);
    color: rgba(var(--text), 1);
    border: 1px solid rgba(var(--textb), 0.35);
}

html.skin-ny .swal2-title,
body.skin-ny .swal2-title,
html.skin-ny .swal2-html-container,
body.skin-ny .swal2-html-container {
    color: rgba(var(--text), 1);
}

html.skin-ny .swal2-confirm,
body.skin-ny .swal2-confirm {
    background: rgba(var(--textb), 0.25);
    color: rgba(var(--text), 1);
    border: 1px solid rgba(var(--textb), 0.45);
}

html.skin-ny .swal2-cancel,
body.skin-ny .swal2-cancel {
    background: rgba(var(--bg), 0.45);
    color: rgba(var(--text), 1);
    border: 1px solid rgba(var(--textb), 0.3);
}
.lex {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
}
.noto {
  font-family: "Noto Emoji", sans-serif;
  font-optical-sizing: auto;
}
.merri{
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
}
.lora {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
}
.crim {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
}
.libre{
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
}
.indie {font-family:'Indie Flower', sans-serif;  font-optical-sizing: auto;}
/* Font Size */
.size               { font-size: 0; }
.size0v65rem               { font-size: 0.65rem; }
.size0v8rem               { font-size: 0.8rem; }
.size0v9rem               { font-size: 0.9rem; }
.size1rem               { font-size: 1rem; }
.size1v2rem               { font-size: 1.2rem; }
.size1v5rem               { font-size: 1.5rem; }
.size2rem               { font-size: 2rem; }
.size3rem               { font-size: 3rem; }
.size50              { font-size: 50px; }
.size10             { font-size: 10px; }

/* Font Weight */
.thin             { font-weight: 100; }
.grassetto           { font-weight: 700; }
.light          { font-weight: 300; }
.grossetto {font-weight:950;}
.normale          { font-weight: 400; }

/* Font Style */
.italic             { font-style: italic; }
.noitalic         { font-style: normal; }

/* Alignment */
.sx          { text-align: left; }
.centro        { text-align: center; }
.dx         { text-align: right; }
.giustificato       { text-align: justify; }

/* Decoration */
.sottolineato          { text-decoration: underline; }
.sbarrato       { text-decoration: line-through; }
.nosottolineato       { text-decoration: none; }
.barranera   { text-decoration-color: black; }
.barrabianca   { text-decoration-color: white; }

/* Transform */
.maiuscolo          { text-transform: uppercase; }
.minuscolo          { text-transform: lowercase; }
.cap         { text-transform: capitalize; }
.case        { text-transform: none; }

/* Line Height */
.lh1base               { line-height: 1; }
.lh10              { line-height: 10px; }
.lh2v5rem{line-height:2.5rem;}

/* Letter Spacing */
.nospazio         { letter-spacing: 0; }
.spazio1         { letter-spacing: 1px; }
.spazio3        { letter-spacing: 3px; }
.spazio5        { letter-spacing: 5px; }

/* White Space */
.acapo  { white-space: normal; }
.nonacapo  { white-space: nowrap; }
.caposorgente     { white-space: pre; }

/* Word Break */
.nonspezzaparole       { overflow-wrap: normal; word-break: normal; }
.spezzaparole        { overflow-wrap: break-word; }
.spezzafrasi          { word-break: break-all; }

/* Vertical Align */
.valignbase     { vertical-align: baseline; }
.valigntop          { vertical-align: top; }
.valignmid       { vertical-align: middle; }
.valignbot       { vertical-align: bottom; }
.valignttop     { vertical-align: text-top; }
.valigntbot  { vertical-align: text-bottom; }

/* =========================================
   BACKGROUNDS
   ========================================= */
.bgnero           { background-color: black; }
.bgnero0v6           { background-color: rgba(0,0,0,0.6); }
.bgbianco           { background-color: white; }
.bgtrasparente     { background-color: transparent; }
.nobg            { background-image: none; }
.bgcolor{background-color: rgba(var(--bgcolor),0.85);}
.bgcolor1{background-color: rgba(var(--bgcolor),1);}
.bgcolor0v5{background-color: rgba(var(--bgcolor),0.5);}
.bgcolor0v65{background-color: rgba(var(--bgcolor),0.65);}
.bgmodale{background-color: rgba(var(--bgcolor),1);}
.bginput{background-color: rgba(244,247,249,1);}
.bg{background-color: rgba(var(--bg),1);}
.bgimg{ background: rgba(var(--bgmaincol),1) var(--bgmain) no-repeat center center fixed; background-size: cover;}
.bgmenu{
    background: var(--bgmenu) no-repeat center center;
    background-size: cover;
    background-attachment: scroll;
}
.bgsubmit{background: var(--bgsubmit) no-repeat center center fixed; background-size: cover;}
.bgsubmitb{background: var(--bgsubmitb) no-repeat center center fixed; background-size: cover;}
.bgselect{background: var(--bgselect) no-repeat center center fixed; background-size: cover;}
.bgverde{background-color:rgba(115,230,135,1);}
.bggiallo{background-color:rgba(230,230,115,1);}
.bgarancio{background-color:rgba(230,190,120,1);}
.bgrosso{background-color:rgba(230,120,120,1);}
.bgverdescuro{background-color:rgba(45,205,75,1);}
.bggialloscuro{background-color:rgba(205,205,50,1);}
.bgarancioscuro{background-color:rgba(205,145,50,1);}
.bgrossoscuro{background-color: rgba(200,50,50,1);}
.bgmana{background-color:rgba(115, 155, 230,1);}
.bglilla{background-color:rgba(200,160,230,1);}

/* Background Attachment */
.bgfix           { background-attachment: fixed; }
.bgloc           { background-attachment: local; }
.bgscr          { background-attachment: scroll; }

/* Background Position */
.bgcentro          { background-position: center; }
.bgtop             { background-position: top; }
.bgbot          { background-position: bottom; }
.bgleft            { background-position: left; }
.bgright           { background-position: right; }

/* Background Repeat */
.rep          { background-repeat: repeat; }
.norep       { background-repeat: no-repeat; }
.repx        { background-repeat: repeat-x; }
.repy        { background-repeat: repeat-y; }

/* Background Size */
.bgauto            { background-size: auto; }
.bgmenu.bgauto {
    background-size: cover;
    background-position: center center;
}
.cover           { background-size: cover; }
.contain         { background-size: contain; }

/* =========================================
   BORDERS & OUTLINES
   ========================================= */
/* Border Width */
.nob           { border-width: 0; }
.b1           { border-width: 1px; }
.b50          { border-width: 50px; }
.b100         { border-width: 100px; }

/* Border Style */
.solid       { border-style: solid; }
.dash      { border-style: dashed; }
.dot      { border-style: dotted; }
.double      { border-style: double; }
.noborder        { border-style: none; }

/* Border Color */
.bcnero       { border-color: black; }
.bcbianco       { border-color: white; }
.bctrasparente { border-color: transparent; }
.bctext       { border-color: rgba(var(--text),1); }
.bctextb       { border-color: rgba(var(--textb),1); }
.bctext0v3      { border-color: rgba(var(--text),0.3); }
.bctextb0v3      { border-color: rgba(var(--textb),0.3); }
.bleft1base{border-left:1px solid rgba(var(--text),0.5);}
.bnero0v5{border:1px solid rgba(0,0,0,0.5);}
.btop1base{border-top:1px solid rgba(var(--text),0.5);}

/* Border Radius */
.noradius          { border-radius: 0; }
.radius1          { border-radius: 1px; }
.radius12{border-radius:12px;}
.radius16{border-radius:16px;}
.radius20{border-radius:20px;}
.radius30{border-radius:30px;}
.radius50p         { border-radius: 50%; }
.radius100p        { border-radius: 100%; }
.radiusall       { border-radius: 9999px; }
.radius20e20e0e0{border-radius: 20px 20px 0 0;}
.radius0e0e20e20{border-radius: 0 0 20px 20px;}
.radius0e0e0e20{border-radius: 0 0 0 20px;}
.radius0e0e20e0{border-radius: 0 0 20px 0;}

/* Outline */
.noout          { outline-width: 0; }
.out1          { outline-width: 1px; }
.outnero      { outline-color: black; }
.outbianco      { outline-color: white; }
.outsolid      { outline-style: solid; }
.outdot     { outline-style: dotted; }

/* =========================================
   FLEXBOX & GRID
   ========================================= */
/* Direction */
.row           { flex-direction: row; }
.rowrev   { flex-direction: row-reverse; }
.col           { flex-direction: column; }
.colrev   { flex-direction: column-reverse; }

/* Wrap */
.wrap          { flex-wrap: wrap; }
.wraprev  { flex-wrap: wrap-reverse; }
.nowrap        { flex-wrap: nowrap; }

/* Align Items */
.istart        { align-items: flex-start; }
.iend          { align-items: flex-end; }
.ic       { align-items: center; }
.ib     { align-items: baseline; }
.is      { align-items: stretch; }

/* Align Content */
.cstart      { align-content: flex-start; }
.cend        { align-content: flex-end; }
.cc     { align-content: center; }
.cb    { align-content: space-between; }
.ca    { align-content: space-around; }

/* Align Self */
.sa          { align-self: auto; }
.sstart         { align-self: flex-start; }
.send           { align-self: flex-end; }
.sc        { align-self: center; }
.ss       { align-self: stretch; }

/* Justify Content */
.jstart      { justify-content: flex-start; }
.jend        { justify-content: flex-end; }
.jc     { justify-content: center; }
.jb    { justify-content: space-between; }
.ja     { justify-content: space-around; }
.jeven     { justify-content: space-evenly; }

/* Flex Grow/Shrink */
.flex1             { flex: 1 1 0%; }
.flex-auto          { flex: 1 1 auto; }
.noflex          { flex: none; }
.nogrow             { flex-grow: 0; }
.grow1             { flex-grow: 1; }
.noshrink          { flex-shrink: 0; }
.shrink1           { flex-shrink: 1; }

/* Order */
.order0            { order: 0; }
.order1            { order: 1; }
.order50           { order: 50; }
.order100          { order: 100; }
.orderfirst        { order: -9999; }
.orderlast         { order: 9999; }

/* Grid Gap */
.nogap              { gap: 0; }
.gap1              { gap: 1px; }
.gap20             { gap: 20px; }
.gap50             { gap: 50px; }
.gap100            { gap: 100px; }

/* =========================================
   EFFECTS & FILTERS
   ========================================= */
/* Opacity */
.noop          { opacity: 0; }
.op0v01          { opacity: 0.01; }
.op0v5         { opacity: 0.5; }
.op1        { opacity: 1; }

/* Box Shadow */
.nobshadow        { box-shadow: none; }
.shadownero0e0e30em10        { box-shadow: 0 0px 30px -10px rgba(0, 0, 0, 1); }
.shadownero0e1e2e0           { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1); }
.shadownero0e10e15em3          { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 1); }
.shadownero0e25e50em12         { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 1); }
.tsanti{text-shadow: 0px 0px 15px rgba(var(--bgcolor), 1);}
.ts{text-shadow: 0px 0px 15px rgba(var(--bg), 1);}
.tsnero{text-shadow: 0px 0px 15px rgba(0,0,0, 1);}

/* =========================================
   TRANSFORMS (Rotate, Scale, Translate)
   ========================================= */
.norotate           { transform: rotate(0deg); }
.rotate45           { transform: rotate(45deg); }
.rotate90           { transform: rotate(90deg); }
.rotate135           { transform: rotate(135deg); }
.rotate180           { transform: rotate(180deg); }
.rotate225           { transform: rotate(225deg); }
.rotate270           { transform: rotate(270deg); }
.rotate315           { transform: rotate(315deg); }
.rotate360          { transform: rotate(360deg); }

.noscale            { transform: scale(0); }
.scale1            { transform: scale(1); }
.scale0v5           { transform: scale(0.5); }
.scale1v1          { transform: scale(1.1); }
.scale1v5          { transform: scale(1.5); }
.scale2          { transform: scale(2); }

.notransx      { transform: translateX(0); }
.transx10p      { transform: translateX(10%); }
.transx50p     { transform: translateX(50%); }
.transx100p    { transform: translateX(100%); }

.notransy      { transform: translateY(0); }
.transy10p      { transform: translateY(10%); }
.transy50p     { transform: translateY(50%); }
.transy100p    { transform: translateY(100%); }

.orcenter      { transform-origin: center; }
.ortop         { transform-origin: top; }
.orbot      { transform-origin: bottom; }
.orleft        { transform-origin: left; }
.orright       { transform-origin: right; }

/* =========================================
   LISTS & TABLES
   ========================================= */
/* List Style Type */
.nolist          { list-style-type: none; }
.listdisc          { list-style-type: disc; }
.listdeci       { list-style-type: decimal; }

/* List Position */
.listin        { list-style-position: inside; }
.listout       { list-style-position: outside; }

/* Table Layout */
.tableauto         { table-layout: auto; }
.tablefix        { table-layout: fixed; }

/* Border Collapse */
.bcollapse    { border-collapse: collapse; }
.bseparate    { border-collapse: separate; }

/* =========================================
   MISCELLANEOUS / SVG
   ========================================= */
/* Overflow */
.scrollauto      { overflow: auto; }
.noscroll    { overflow: hidden; }
.visscroll   { overflow: visible; }
.scroll    { overflow: scroll; }

.scrollxauto    { overflow-x: auto; }
.noscrollx  { overflow-x: hidden; }
.scrollyauto    { overflow-y: auto; }
.noscrolly  { overflow-y: hidden; }

/* Object Fit */
.objectcontain     { object-fit: contain; }
.objectcover       { object-fit: cover; }
.objectfill        { object-fit: fill; }
.objectnone        { object-fit: none; }
.objectscaledown  { object-fit: scale-down; }

/* Object Position */
.objectcenter      { object-position: center; }
.objecttop         { object-position: top; }
.objectbot      { object-position: bottom; }

.weather-widget {
    height: 60px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    color: white;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
    background-size: 200% 200%;
}

/* Canvas per le animazioni nitide */
#weather-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.weather-info {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Gradienti Sfondi */
.w-alba     { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.w-giorno   { background: linear-gradient(135deg, #97B0CC 0%, #5894D6 100%); }
.w-tramonto { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.w-notte    { background: linear-gradient(135deg, #0f172a 0%, #334155 100%); }
/* Sfondi desaturati per maltempo */
.w-maltempo-giorno { background: linear-gradient(135deg, #708090 0%, #95a5a6 100%) !important; }
.w-maltempo-alba   { background: linear-gradient(135deg, #a88a8b 0%, #cfb1c4 100%) !important; }
.w-maltempo-tramonto { background: linear-gradient(135deg, #9e7a7a 0%, #b8a978 100%) !important; }
@keyframes lightning-flash {
    0% { filter: brightness(1); }
    5% { filter: brightness(4) white; }
    10% { filter: brightness(1); }
    15% { filter: brightness(3); }
    25% { filter: brightness(1); }
}
.flash-anim {
    animation: lightning-flash 0.7s ease-out;
}
@keyframes lampeggi {
    0% { transform: scale(1) rotate(-45deg); }
    25% { transform: scale(1.1) rotate(0deg);}
    50% { transform: scale(1) rotate(45deg);}
    75% { transform: scale(1.1) rotate(0deg);}
    100% { transform: scale(1) rotate(-45deg);}
}
.lampeggia{
	animation: lampeggi 4s ease-out 1s infinite;
}
@keyframes lampeggi2 {
    0% {  color: rgba(var(--text),1); }
    50% {  color: rgba(var(--textb),1); }
    100% { color: rgba(var(--text),1); }
}
.lampeggia2{
	animation: lampeggi2 1s ease-out 1s infinite;
}
/*Mobile*/
/* Nascondi elementi "pc-only" quando lo schermo è piccolo (Mobile) */
@media only screen and (max-width: 1023px) {
    .pc-only { display: none !important; }
    .wmenu {width:100%;}
    .hnews{height:70px; border-radius:20px !important; margin-top:5px;}
    .hmenu {height:100%;}
}

/* Nascondi elementi "mobile-only" quando lo schermo è grande (PC) */
@media only screen and (min-width: 1024px){
    .mobile-only { display: none !important; }
    .wmenu {
        width: max-content;
        min-width: 20vw;
    }
    .hnews,
    .hnews * {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .hnews{height:120px;}
    .hmenu{height:calc(100% - 75px);}
}

.blur5 { backdrop-filter: blur(5px); }

/* Hover / focus utilities */
.fakefocus:hover { background: rgba(255,255,255,1); border: 1px solid rgba(var(--textb),1); outline: 1px solid rgba(var(--textb),1); }
.focus:focus { background: rgba(255,255,255,1); border: 1px solid rgba(var(--textb),1); outline: 1px solid rgba(var(--textb),1); }
.focuscolor:focus { background: rgba(var(--bgcolor),1); border: 1px solid rgba(var(--textb),1); outline: 1px solid rgba(var(--textb),1); transition: all 0.3s ease; }
.hop1:hover { opacity: 1; }
.hrotate15:hover { transform: rotate(15deg); }
.hscale1v1:hover { transform: scale(1.1); }
.hschiarisci:hover { color: rgba(var(--text),1); }
.hschiariscib:hover { color: rgba(var(--textb),1); }
.hschiariscisubmit:hover { filter: brightness(120%); }
.htransym2:hover { transform: translateY(-2px); }

/* Filters / transitions / transforms */
.bianconero { filter: grayscale(1); }
.flip {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
}
.op0v85 { opacity: 0.85; }
.scale0v85 { transform: scale(0.85); }
.schiariscimedio { filter: brightness(130%); }
.schiariscipoco { filter: brightness(110%); }
.transition { transition: all 0.3s ease; }
.transition0v5 { transition: all 0.5s ease; }
.transition1 { transition: all 1s ease; }

/* Aspect ratio */
.aspect1v1 { aspect-ratio: 1 / 1; }
.aspect3v2 { aspect-ratio: 3 / 2; }
.aspect3v4 { aspect-ratio: 3 / 4; }
.aspect5v1 { aspect-ratio: 5 / 1; }
.aspect5v8 { aspect-ratio: 5 / 8; }

/* Border utilities */
.bbot1base { border-bottom: 1px solid rgba(var(--text),0.5); }
.bbot1baseb { border-bottom: 1px solid rgba(var(--textb),1); }
.bcrossoscuro { border-color: rgba(200,50,50,1); }
.bctext0v5 { border-color: rgba(var(--text),0.5); }
.bctextb1 { border-color: rgba(var(--textb),1); }
.bleft1baseb { border-left: 1px solid rgba(var(--textb),1); }
.bright1base { border-right: 1px solid rgba(var(--text),0.5); }
.bright1baseb { border-right: 1px solid rgba(var(--textb),1); }
.btop1baseb { border-top: 1px solid rgba(var(--textb),1); }

/* Radius utilities */
.radius0e0e8e8 { border-radius: 0 0 8px 8px; }
.radius0e20e0e0 { border-radius: 0 20px 0 0; }
.radius0e20e0e20 { border-radius: 0 20px 0 20px; }
.radius0e20e20e0 { border-radius: 0 20px 20px 0; }
.radius100pe100pe0e100p { border-radius: 100% 100% 0 100%; }
.radius20e0e0e0 { border-radius: 20px 0 0 0; }
.radius20e0e0e20 { border-radius: 20px 0 0 20px; }
.radius20e0e20e0 { border-radius: 20px 0 20px 0; }
.radius40pe0e0e40p { border-radius: 40% 0 0 40%; }
.radius8e8e0e0 { border-radius: 8px 8px 0 0; }

/* Color utilities */
.arancio { color: rgba(230,190,120,1); }
.arancioscuro { color: rgba(205,145,50,1); }
.azione { color: rgba(var(--azione),1); }
.azione0v5 { color: rgba(var(--azione),0.5); }
.azione0v8 { color: rgba(var(--azione),0.8); }
.giallo { color: rgba(230,230,115,1); }
.gialloscuro { color: rgba(205,205,50,1); }
.lilla { color: rgba(200,160,230,1); }
.mana { color: rgba(115,155,230,1); }
.nomee { color: rgba(var(--nome),1); }
.nomee0v5 { color: rgba(var(--nome),0.5); }
.nomee0v8 { color: rgba(var(--nome),0.8); }
.chat-mention {
    display: inline;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.08em;
    text-decoration-skip-ink: none;
}
.rosso { color: rgba(230,120,120,1); }
.rossoscuro { color: rgba(200,50,50,1); }
.tagg { color: rgba(var(--tag),1); }
.tagg0v5 { color: rgba(var(--tag),0.5); }
.tagg0v8 { color: rgba(var(--tag),0.8); }
.textb0v3 { color: rgba(var(--textb),0.3); }
.textd0v3 { color: rgba(var(--textd),0.3); }
.verde { color: rgba(115,230,135,1); }
.verdescuro { color: rgba(45,205,75,1); }

/* Background color utilities */
.bgtext0v5 { background-color: rgba(var(--text),0.5); }
.bgtext0v7 { background-color: rgba(var(--text),0.7); }
.bgtextb0v3 { background-color: rgba(var(--textb),0.3); }
.bgtextb0v5 { background-color: rgba(var(--textb),0.5); }
.bgtextb0v7 { background-color: rgba(var(--textb),0.7); }
.bgtextb1 { background-color: rgba(var(--textb),1); }
.bgtextc0v3 { background-color: rgba(var(--textc),0.3); }
.bgtextc0v5 { background-color: rgba(var(--textc),0.5); }
.bgtextc0v7 { background-color: rgba(var(--textc),0.7); }
.bgtextc1 { background-color: rgba(var(--textc),1); }
.bgtextd0v3 { background-color: rgba(var(--textd),0.3); }
.bgtextd0v5 { background-color: rgba(var(--textd),0.5); }
.bgtextd0v7 { background-color: rgba(var(--textd),0.7); }
.bgtextd1 { background-color: rgba(var(--textd),1); }
.bgtexte0v1 { background-color: rgba(var(--texte),0.1); }
.bgtexte0v2 { background-color: rgba(var(--texte),0.2); }
.bgtexte0v3 { background-color: rgba(var(--texte),0.3); }
.bgtexte0v5 { background-color: rgba(var(--texte),0.5); }
.bgtexte0v7 { background-color: rgba(var(--texte),0.7); }
.bgtexte1 { background-color: rgba(var(--texte),1); }

/* Spacing utilities */
.m5 { margin: 5px; }
.mbot5 { margin-bottom: 5px; }
.mbot8 { margin-bottom: 8px; }
.mbot10 { margin-bottom: 10px; }
.mbot15 { margin-bottom: 15px; }
.mbot30 { margin-bottom: 30px; }
.mbotm5 { margin-bottom: -5px; }
.mleft10 { margin-left: 10px; }
.mleft15 { margin-left: 15px; }
.mleft20 { margin-left: 20px; }
.mleftm1 { margin-left: -1px; }
.mleftm12 { margin-left: -12px; }
.mright15 { margin-right: 15px; }
.mright25 { margin-right: 25px; }
.mrightm5 { margin-right: -5px; }
.mtop25 { margin-top: 25px; }
.mtopm10 { margin-top: -10px; }
.mtopm35 { margin-top: -35px; }
.pbot5 { padding-bottom: 5px; }
.pbot15 { padding-bottom: 15px; }
.pbot40 { padding-bottom: 40px; }
.pleft4 { padding-left: 4px; }
.pleft8 { padding-left: 8px; }
.pleft24 { padding-left: 24px; }

/* Typography utilities */
.lh0v8 { line-height: 0.8; }
.lh1v5rem { line-height: 1.5rem; }
.size2v5rem { font-size: 2.5rem; }

/* Layout utilities */
.botm12 { bottom: -12px; }
.gap5 { gap: 5px; }
.h30 { height: 30px; }
.h60 { height: 60px; }
.h80p { height: 80%; }
.h100vhm50 { height: calc(100vh - 50px); }
.h100pm50 { height: calc(100% - 50px); }
.h160p { height: 160%; }
.h220 { height: 220px; }
.maxh400 { max-height: 400px; }
.maxh300 { max-height: 300px; }
.maxw80p { max-width: 80%; }
.minh100 { min-height: 100px; }
.minw25p { min-width: 25%; }
.minw40p { min-width: 40%; }
.minw200 { min-width: 200px; }
.w10p { width: 10%; }
.w15p { width: 15%; }
.w20p { width: 20%; }
.w25 { width: 25px; }
.w25p { width: 25%; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w160p { width: 160%; }
.w220 { width: 220px; }
.w100pm24 { width: calc(100% - 24px); }
#storiesScroll {
   /* overflow-x: auto;
    overflow-y: hidden;*/
    -webkit-overflow-scrolling: touch; /* iOS momentum */
    touch-action: pan-x; /* solo swipe orizzontale */
}
.mleft65{margin-left:65px;}