/* ===== FILE: assets/css/style.css ===== */
/* ===== RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
a { color: inherit; text-decoration: none; transition: color .3s; }
html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
background: var(--color-bg-primary);
color: var(--color-text-primary);
overflow-x: hidden;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
.main-content {
flex: 1 0 auto;
min-height: calc(100vh - var(--header-h));
display: block;
}
/* ===== THEMES ===== */
:root, .dark-theme{
--color-bg-primary:#141414;--color-bg-secondary:#222;--color-bg-header-footer:#1a1a1a;--color-bg-input:#333;
--color-text-primary:#f0f0f0;--color-text-secondary:#a0a0a0;--color-accent:#FF8800;--color-shadow:rgba(255,136,0,.7);
--color-border:#333;--color-link:#f0f0f0;--color-hover:#444;--color-primary:var(--color-accent);
--color-primary-soft:rgba(255,136,0,.7);--color-background:var(--color-bg-secondary);--color-background-dark:var(--color-bg-header-footer);
--color-text:var(--color-text-primary);--color-white:var(--color-text-primary);--color-danger:#e74c3c;
--color-primary-rgb:255,136,0;--color-background-light:#1e1e1e;
}
/* ============================================================
TEMA CHIARO (Light Mode) - OVERRIDE TOTALE "GHIACCIO"
============================================================ */
.light-theme {
/* Variabili colori per il tema chiaro */
--color-bg-primary: #E3F2FD; /* Celeste Ghiaccio */
--color-text-primary: #0D47A1; /* Blu Notte (per contrasto) */
--color-text-secondary: #546E7A; /* Grigio Bluastro */
--color-accent: #00B0FF; /* Azzurro Elettrico */
--color-border: #BBDEFB; /* Bordi celesti */
}
/* 1. SFONDO GENERALE (Via l'immagine scura) */
.light-theme body {
background: linear-gradient(135deg, #E3F2FD 0%, #F1F8E9 100%) !important;
color: var(--color-text-primary) !important;
}
/* 2. HEADER E NAVIGAZIONE (Trasformazione in vetro bianco) */
.light-theme .header {
background: rgba(255, 255, 255, 0.85) !important; /* Bianco semitrasparente */
border-bottom: 1px solid #FFFFFF !important;
box-shadow: 0 4px 20px rgba(135, 206, 250, 0.3) !important; /* Ombra azzurra */
}
.light-theme .main-nav a {
color: #455A64 !important; /* Testo menu scuro */
}
.light-theme .main-nav a:hover,
.light-theme .main-nav a.active {
background: #E1F5FE !important;
color: #0277BD !important;
}
/* 3. IL "MONOLITE" CENTRALE (Index) */
.light-theme .master-glass-panel {
background: rgba(255, 255, 255, 0.8) !important; /* Via il nero! */
border: 1px solid #FFFFFF !important;
box-shadow: 0 10px 40px rgba(33, 150, 243, 0.15) !important; /* Alone celeste */
}
/* 4. MENU PROFILO (Dropdown) */
.light-theme #profile-menu {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #90CAF9 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
.light-theme #profile-menu a {
color: #37474F !important;
}
.light-theme #profile-menu a:hover {
background: #E3F2FD !important;
color: #0277BD !important;
}
/* 5. BOX INTERNI E CAROUSEL */
.light-theme .glass-box,
.light-theme .twitch-glass-box,
.light-theme .details-user-band,
.light-theme .details-comments-band,
.light-theme .anime-info,
.light-theme .stats-box,
.light-theme .correlati-box {
background: rgba(255, 255, 255, 0.6) !important;
border: 1px solid #E1F5FE !important;
color: #333 !important;
}
/* Frecce Carousel (Via il nero) */
.light-theme .scroll-button {
background: #FFFFFF !important;
color: #0288D1 !important;
border: 1px solid #B3E5FC !important;
box-shadow: 0 4px 8px rgba(0, 176, 255, 0.2) !important;
}
.light-theme .scroll-button:hover {
background: #E1F5FE !important;
transform: translateY(-50%) scale(1.1) !important;
}
/* 6. TESTI E TITOLI (Devono essere scuri su sfondo chiaro) */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme .welcome-text,
.light-theme .section-header h2,
.light-theme .card-title-main,
.light-theme .footer-logo-text {
color: #01579B !important; /* Blu scuro */
text-shadow: none !important;
}
.light-theme p,
.light-theme span,
.light-theme .meta-label,
.light-theme .synopsis-text {
color: #37474F !important; /* Grigio scuro */
}
.light-theme .section-separator {
background: linear-gradient(90deg, transparent, #81D4FA, transparent) !important;
}
/* 7. INPUT E CAMPI DI RICERCA */
.light-theme input,
.light-theme textarea,
.light-theme select,
.light-theme .search-input {
background: #FFFFFF !important;
border: 1px solid #81D4FA !important;
color: #333 !important;
}
.light-theme .search-input::placeholder {
color: #90A4AE !important;
}
/* 8. FOOTER */
.light-theme .footer {
background: rgba(255, 255, 255, 0.9) !important;
border-top: 1px solid #B3E5FC !important;
color: #455A64 !important;
}
.light-theme .footer-link-item {
color: #546E7A !important;
}
.vibrant-theme{
--color-bg-primary:#2a0a38;--color-bg-secondary:#4d2d60;--color-bg-header-footer:#381c4a;--color-bg-input:#5a3d6f;
--color-text-primary:#ffe0f0;--color-text-secondary:#c99dd6;--color-accent:#ff4081;--color-shadow:rgba(255,64,129,.7);
--color-border:#5a3d6f;--color-link:#ffe0f0;--color-hover:#6a4d7f;--color-primary:var(--color-accent);
--color-primary-soft:rgba(255,64,129,.7);--color-background:var(--color-bg-secondary);--color-background-dark:var(--color-bg-header-footer);
--color-text:var(--color-text-primary);--color-white:var(--color-text-primary);--color-danger:#c0392b;
--color-primary-rgb:255,64,129;--color-background-light:#5a3d6f;
}
.cosmic-theme{
--color-bg-primary:#120a2e;--color-bg-secondary:#281a4d;--color-bg-header-footer:#1a0f3d;--color-bg-input:#3a2a63;
--color-text-primary:#f0f8ff;--color-text-secondary:#a996d9;--color-accent-celeste:#00dfff;--color-accent-rosso:#ff4545;
--color-accent-giallo:#ffc800;--color-shadow:rgba(0,223,255,.5);--color-border:#3a2a63;--color-link:var(--color-accent-celeste);
--color-hover:#4d3c6c;--color-primary:var(--color-accent-celeste);--color-primary-soft:rgba(0,223,255,.3);
--color-background:var(--color-bg-secondary);--color-background-dark:var(--color-bg-header-footer);
--color-text:var(--color-text-primary);--color-white:var(--color-text-primary);--color-danger:var(--color-accent-rosso);
--color-primary-rgb:0,223,255;--color-background-light:#281a4d;
}
/* ===== HEADER & NAV ===== */
:root {
--header-h: 60px;
}
.header {
width: 100%;
background: var(--color-bg-header-footer);
border-bottom: 2px solid var(--color-accent);
box-shadow: 0 4px 12px rgba(0,0,0,.4);
position: sticky;
top: 0;
z-index: 10000;
min-height: 100px;
padding: 10px 20px;
}
.header-inner{
max-width:2600px;
margin:0 auto;
padding:8px 18px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
column-gap:32px;
box-sizing:border-box;
}
.main-nav{
display:flex;
align-items:center;
gap:12px;
justify-self:center;
}
.logo{
display:flex;
align-items:center;
font-size:0;
flex:0 0 auto;
}
.logo img{
width:180px;
height:auto;
}
.user-area{
display:flex;
align-items:center;
gap:16px;
position:relative;
z-index:1002;
flex:1 0 auto;
justify-content:flex-end;
}
.btn-auth{
background:transparent;
color:var(--color-accent);
border:2px solid var(--color-accent);
padding:8px 15px;
border-radius:20px;
font-size:.9em;
font-weight:700;
margin-left:10px;
display:flex;
align-items:center;
gap:8px;
transition:.3s;
}
.btn-auth:hover{
background:var(--color-accent);
color:var(--color-bg-primary);
}
.profile-controls-container{
position:relative;
margin-left:15px;
display:flex;
align-items:center;
}
.welcome-message{
font-size:.9em;
color:var(--color-text-secondary);
margin-right:10px;
}
.btn-profile{
background:none;
border:none;
padding:0;
cursor:pointer;
line-height:1;
}
.profile-avatar,
.profile-avatar-icon{
width:35px;
height:35px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--color-accent);
display:block;
transition:border-color .3s,transform .3s;
}
.profile-avatar-icon{
font-size:35px;
color:var(--color-text-primary);
border:none;
}
.btn-profile:hover .profile-avatar,
.btn-profile:hover .profile-avatar-icon{
border-color:var(--color-text-primary);
transform:scale(1.05);
}
.main-nav a{
font-size:.95rem;
font-weight:500;
}
/* ===== PROFILE MENU ===== */
#profile-menu{
position:absolute;top:45px;right:0;width:250px;background:var(--color-bg-header-footer);border:1px solid var(--color-border);
border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.4);padding:10px;z-index:99999;opacity:0;visibility:hidden;transform:translateY(-5px);
transition:opacity .2s ease,transform .2s ease,visibility .2s ease .2s;
}
#profile-menu.active{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;}
.profile-menu .profile-info{padding:8px 10px;border-bottom:1px solid var(--color-border);margin-bottom:10px;color:var(--color-text-secondary);font-size:.9em;display:flex;flex-direction:column;align-items:center;}
.profile-menu .profile-info strong{font-weight:700;}
.profile-menu a{display:block;padding:10px 10px;color:var(--color-text-primary);font-size:.95em;border-radius:4px;transition:background-color .2s,color .2s;}
.profile-menu a:hover{background:var(--color-bg-secondary);color:var(--color-accent);}
.profile-menu .logout-link{color:var(--color-danger);font-weight:700;margin-top:5px;}
.profile-menu .logout-link:hover{background:var(--color-danger);color:var(--color-white);}
.user-role-badge-menu{max-height:40px;width:auto;display:block;object-fit:contain;margin:5px 0;}
.role-color-Admin{color:#FF5555;font-weight:700}
.role-color-Mod{color:#55FFFF;font-weight:700}
.role-color-Kamisama{color:#FFD700;font-weight:700}
.role-color-Ichiban{color:#FFAC33;font-weight:700}
.role-color-Kenshin{color:#8A2BE2;font-weight:700}
.role-color-Senpai{color:#50FA7B;font-weight:700}
.role-color-Otaku{color:#88BBDD}
.role-color-Kohai,.role-color-Hikikomori{color:#D3D3D3}
.role-color-Guest{color:var(--color-text-secondary)}
/* ===== SEARCH BAR ===== */
#main-search-form {
position: relative;
display: flex;
align-items: center;
margin-right: 15px;
}
#main-search-form .search-form-container {
position: relative;
display: flex;
align-items: center;
/* Sfondo e Bordo base */
background: var(--color-bg-input);
border: 1px solid var(--color-border);
/* LA PARTE IMPORTANTE: Arrotondamento massimo (Pillola) */
border-radius: 30px;
padding: 5px 15px; /* Spaziatura interna */
transition: all 0.3s ease;
}
/* Effetto quando clicchi per scrivere (Focus) */
#main-search-form .search-form-container:focus-within {
border-color: var(--color-accent);
box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3);
background: rgba(0,0,0,0.2);
}
.search-input {
flex-grow: 1;
border: none !important;
background: transparent !important;
padding: 8px 0 !important;
color: var(--color-text-primary) !important;
font-size: 1em;
/* --- QUESTE SONO LE RIGHE CHE ELIMINANO IL RETTANGOLO --- */
outline: none !important; /* Toglie la linea di contorno */
box-shadow: none !important; /* Toglie eventuali ombre interne */
/* -------------------------------------------------------- */
width: auto !important;
margin-right: 0 !important;
transition: none !important;
}
/* AGGIUNGI ANCHE QUESTO SUBITO SOTTO PER SICUREZZA ASSOLUTA */
.search-input:focus,
.search-input:active,
.search-input:focus-visible {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.btn-search-submit {
background: transparent;
border: none;
color: var(--color-text-primary);
cursor: pointer;
padding: 5px;
font-size: 1.1em;
transition: color .2s;
}
.btn-search-submit:hover {
color: var(--color-accent);
}
#advanced-search-toggle, .btn-advanced-search-toggle {
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 5px 8px;
font-size: 1.1em;
transition: color .2s;
}
#advanced-search-toggle:hover,
#advanced-search-toggle.active,
.btn-advanced-search-toggle:hover,
.btn-advanced-search-toggle.active {
color: var(--color-accent);
}
/* ===== AUTOCOMPLETE ===== */
.search-suggestions-dropdown{
position:absolute;top:100%;left:0;width:350px;max-width:90vw;max-height:350px;overflow-y:auto;background:var(--color-bg-secondary);
border:1px solid var(--color-accent);border-top:none;border-radius:0 0 6px 6px;box-shadow:0 8px 15px rgba(0,0,0,.7);z-index:2000;padding:0;margin:0;
}
.search-suggestions-dropdown .cover-image-container{width:50px;height:75px;flex-shrink:0;overflow:hidden;margin-right:12px;border-radius:4px;}
.search-suggestions-dropdown .autocomplete-cover{width:100%;height:100%;object-fit:cover;display:block;}
.autocomplete-item.detailed{display:flex;align-items:center;padding:10px 12px;cursor:pointer;color:var(--color-text-primary);border-bottom:1px solid var(--color-border);transition:background-color .2s,color .2s;}
.autocomplete-item.detailed:hover,.autocomplete-item.detailed.active-suggestion{background:var(--color-hover);color:var(--color-text-primary);}
.autocomplete-item.detailed:hover .autocomplete-title{color:var(--color-accent);}
.autocomplete-item.detailed.active-suggestion{background:var(--color-accent);color:var(--color-bg-primary);}
.autocomplete-item.detailed.active-suggestion .autocomplete-meta{color:var(--color-bg-primary);}
.autocomplete-cover{width:50px!important;height:75px!important;object-fit:cover;margin-right:12px;border-radius:4px;flex-shrink:0;}
.autocomplete-details{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;}
.autocomplete-title{font-weight:700;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-primary);margin-bottom:2px;}
.autocomplete-meta{font-size:.75em;color:var(--color-text-secondary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;}
.autocomplete-item.no-results{padding:12px;text-align:center;color:var(--color-text-secondary);font-style:italic;cursor:default;border-bottom:none;}
.autocomplete-item.no-results:hover{background:transparent}
/* ===== ADVANCED SEARCH PANEL ===== */
#advanced-search-panel,.advanced-search-panel{
position:absolute;top:100%;right:0;z-index:1003;width:300px;max-width:90%;background:var(--color-bg-header-footer);border:1px solid var(--color-border);
border-top:none;padding:20px;box-shadow:0 4px 10px rgba(0,0,0,.5);border-radius:0 0 8px 8px;opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .3s,transform .3s,visibility .3s;
}
#advanced-search-panel:not(.hidden-panel),.advanced-search-panel:not(.hidden-panel){opacity:1;visibility:visible;transform:translateY(0);}
.advanced-search-panel label{display:block;margin:15px 0 5px;font-size:.9em;color:var(--color-text-primary);font-weight:700;}
.advanced-search-panel select{
width:100%;padding:8px 10px;background:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:4px;appearance:none;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;
}
.advanced-search-panel .btn-primary{display:block;width:100%;padding:10px;margin-top:20px;background:var(--color-accent);color:var(--color-bg-primary);border:none;border-radius:4px;font-weight:700;cursor:pointer;transition:filter .2s;}
.advanced-search-panel .btn-primary:hover{filter:brightness(1.1);}
.btn-menu{display:none;background:none;border:none;color:var(--color-text-primary);font-size:1.5rem;cursor:pointer;padding:5px;margin-right:15px;}
/* ===== THEME SWITCHER ===== */
.theme-controls-container{position:relative;display:flex;align-items:center;margin-right:15px;}
.btn-theme-toggle{background:none;border:none;color:var(--color-text-primary);font-size:1.5rem;cursor:pointer;padding:5px;line-height:1;transition:color .3s;}
.btn-theme-toggle:hover{color:var(--color-accent);}
#theme-menu{
position:absolute;top:100%;right:0;width:150px;background:var(--color-bg-header-footer);border:1px solid var(--color-border);
border-radius:5px;padding:5px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 8px rgba(0,0,0,.4);z-index:1010;
opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .2s,transform .2s,visibility .2s;
}
#theme-menu:not(.theme-menu-hidden){opacity:1;visibility:visible;transform:translateY(0);}
.theme-menu-hidden{display:none;}
.theme-option{background:transparent;color:var(--color-text-primary);border:none;padding:8px;text-align:left;cursor:pointer;border-radius:3px;transition:background-color .2s;}
.theme-option:hover{background:var(--color-bg-secondary);color:var(--color-accent);}
/* ===== MOBILE NAV STATES ===== */
.main-nav.active{
display:flex;flex-direction:column;position:absolute;left:0;width:100%;background:var(--color-bg-header-footer);
box-shadow:0 4px 8px rgba(0,0,0,.5);padding:10px 0;z-index:900;
}
.main-nav.active a{margin-left:0;padding:12px 15px;width:100%;text-align:center;border-bottom:1px solid var(--color-border);font-size:1.1rem;}
.main-nav.active a:last-child{border-bottom:none;}
.mobile-nav-bar{display:none!important;}
/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar{
display:flex;justify-content:center;align-items:center;width:100%;padding:12px 3rem;background:var(--color-accent);color:var(--color-bg-header-footer);
text-align:center;font-size:1.1rem;font-weight:700;position:relative;top:0;z-index:999;transition:background-color .3s,filter .3s;cursor:pointer;margin:0;
}
.announcement-bar:hover{filter:brightness(1.2);}
.announcement-bar strong{color:var(--color-bg-primary);text-decoration:underline;}
.announcement-bar .close-btn{margin-left:30px;font-size:1.5rem;cursor:pointer;line-height:1;color:var(--color-bg-header-footer);opacity:.8;transition:opacity .2s;}
.announcement-bar .close-btn:hover{opacity:1;}
/* ===== HERO (HOME CAROUSEL) ===== */
.hero-carousel-container{
position:relative;width:100%;height:450px;margin-top:0;overflow:hidden;border-bottom:2px solid var(--color-accent);z-index:50;
}
.hero-carousel{position:relative;width:100%;height:100%;}
.hero-slide{
position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out;z-index:10;display:flex;align-items:center;padding:0 5%;
}
.hero-slide.active{opacity:1;z-index:20;}
.hero-slide .hero-content{max-width:50%;color:#fff;z-index:30;text-align:left;padding-left:20px;}
.hero-slide h1{font-size:3em;margin-bottom:10px;line-height:1.1;text-shadow:2px 2px 5px rgba(0,0,0,.7);}
.hero-slide .hero-description{font-size:1em;margin-bottom:20px;max-width:90%;color:#ccc;}
.hero-slide .btn-watch-now,.hero-slide .btn-secondary-details{display:inline-flex;align-items:center;padding:10px 20px;margin-right:15px;border-radius:25px;font-weight:700;text-transform:uppercase;transition:background-color .2s;}
.hero-slide .btn-watch-now{background:var(--color-accent);color:var(--color-bg-primary);}
.hero-slide .btn-secondary-details{background:rgba(255,255,255,.2);color:var(--color-white);border:1px solid rgba(255,255,255,.5);}
.hero-dots{
position:absolute;top:30px;left:8%;z-index:50;display:flex;gap:8px;padding:5px;background:rgba(0,0,0,.2);border-radius:15px;
}
.hero-dot{width:10px;height:10px;background:rgba(255,255,255,.5);border-radius:50%;cursor:pointer;transition:background-color .3s,transform .3s;}
.hero-dot.active{background:var(--color-accent);transform:scale(1.2);}
.hero-logo-small{max-width:250px;height:auto;margin-bottom:10px;}
/* ===== HOME CAROUSELS ===== */
.anime-row-section{
padding:0 3rem;margin:3rem 0;position:relative;box-shadow:0 8px 16px rgba(0,0,0,.6);transition:box-shadow .3s;z-index:5;
}
.anime-row-section:hover{box-shadow:0 12px 25px rgba(0,0,0,.8);}
.anime-row-section h2{
font-size:1.5rem;margin:.8rem auto 0;display:block;width:fit-content;text-align:center;padding:8px 25px;border-radius:50px;
background:var(--color-bg-secondary);color:var(--color-accent);border:2px solid var(--color-accent);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
}
.carousel-box{
position:relative;background:rgba(34,34,34,.9);backdrop-filter:blur(8px) saturate(180%);border-radius:10px;padding:10px 15px;
box-shadow:0 4px 12px rgba(0,0,0,.5);border:1px solid var(--color-border);
}
.scroll-container{position:relative;}
.carousel,.scroll-content.carousel{
display:flex;overflow-x:auto;overflow-y:hidden;gap:15px;padding:10px 0;flex-wrap:nowrap;scroll-behavior:smooth;
-ms-overflow-style:none;scrollbar-width:none;will-change:transform,scroll-position;transform:translateZ(0);
}
.carousel::-webkit-scrollbar{display:none;}
.scroll-button{
position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,.7);color:var(--color-accent);
border:2px solid var(--color-accent);border-radius:50%;cursor:pointer;z-index:20;display:flex;justify-content:center;align-items:center;font-size:1.5rem;
transition:background-color .3s,color .3s;box-shadow:0 0 10px rgba(0,0,0,.5);
}
.scroll-button:hover{background:var(--color-accent);color:var(--color-bg-primary);}
.scroll-button.left{left:5px;}
.scroll-button.right{right:5px;}
.card{
flex:0 0 180px;width:180px;height:270px;will-change:transform;transform:translateZ(0);background:var(--color-bg-secondary);border-radius:4px;overflow:hidden;
position:relative;cursor:pointer;border:2px solid transparent;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:scale(1.05) translateZ(0);box-shadow:0 0 10px var(--color-shadow);z-index:10;border-color:var(--color-accent);}
.card img{width:100%;height:100%;object-fit:cover;}
.card-title{
position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 100%);
color:var(--color-white);padding:10px 8px 5px;font-size:.9rem;font-weight:700;text-align:left;line-height:1.2;z-index:2;
}
.card-title .info-secondary{display:block;font-size:.75rem;font-weight:400;color:var(--color-text-secondary);}
.card-badge{
position:absolute;top:5px;right:5px;background:var(--color-accent);color:var(--color-bg-header-footer);padding:2px 6px;border-radius:3px;font-size:.7rem;font-weight:700;z-index:3;text-transform:uppercase;
}
/* ===== FOOTER ===== */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
background: var(--color-bg-header-footer);
border-top: 1px solid var(--color-border);
position: relative;
min-height: 60px;
}
.footer-chibi{position:absolute;right:30px;bottom:0;cursor:pointer;height:100%;display:flex;align-items:flex-end;z-index:10;}
.footer-chibi img{height:100px;width:auto;transition:transform .2s;}
.footer-chibi img:hover{transform:scale(1.05);}
.footer-left-controls{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-bottom:10px;z-index:20;}
.footer-content-center{flex-grow:1;text-align:center;margin:0 150px 0 10px;color:var(--color-text-secondary);}
.footer-content-center p{margin-top:10px;font-size:.85em;color:var(--color-text-secondary);}
.social-links{margin-bottom:10px;display:flex;justify-content:center;gap:15px;}
.social-btn{background:transparent;border:none;font-size:1.5rem;color:var(--color-text-primary);transition:color .3s;}
.social-btn:hover{color:var(--color-accent);}
main, .main-content, .details-page {
flex: 1 0 auto;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main, .main-content, .details-page {
flex: 1 0 auto;
min-height: 0;
}
/* ===== DIVIDER ===== */
.section-divider{padding:0 3rem;display:flex;align-items:center;justify-content:center;width:100%;}
.divider-line{flex-grow:1;height:2px;background:var(--color-accent);opacity:.8;transition:background-color .4s,opacity .4s;}
.divider-text{display:none}
/* ===== HOVER PREVIEW ===== */
.hover-preview{
position:absolute;z-index:1500;width:300px;background:var(--color-bg-secondary);color:var(--color-text-primary);border-radius:8px;padding:15px;
box-shadow:0 10px 20px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);animation:fadeInSlide .3s forwards;border:1px solid var(--color-accent);
}
@keyframes fadeInSlide{to{opacity:1;transform:translateY(0)}}
.hover-preview h3{font-size:1.4rem;color:var(--color-accent);margin-bottom:8px;line-height:1.2;}
.preview-synopsis{font-size:.95rem;color:var(--color-text-secondary);margin-bottom:12px;}
.preview-meta{display:flex;gap:15px;font-size:.85rem;margin-bottom:15px;}
.meta-item{padding:3px 8px;background:var(--color-bg-primary);border-radius:4px;color:var(--color-text-primary);font-weight:700;}
.btn-preview-action{
display:block;width:100%;padding:10px 15px;border:none;border-radius:4px;background:var(--color-accent);color:var(--color-bg-primary);
font-size:1rem;font-weight:700;cursor:pointer;text-align:center;transition:background-color .2s,filter .2s;
}
.btn-preview-action:hover{filter:brightness(1.2)}
/* ===== ARCHIVE PAGE ===== */
.archive-page{padding:0 3rem 40px;max-width:1400px;margin:0 auto;}
.archive-page .archive-main-title{margin-top:0!important;font-size:2.5rem;color:var(--color-accent);margin-bottom:5px;}
.archive-page>*{margin-top:0;padding-top:0;}
.result-count{margin:0;padding:5px 0 15px;font-size:1.1rem;color:var(--color-text-secondary);}
.filter-summary{font-size:1.1rem;color:var(--color-text-secondary);margin-bottom:30px;padding-bottom:10px;border-bottom:1px solid var(--color-border);}
.loading-spinner{text-align:center;padding:50px;font-size:1.2rem;color:var(--color-text-secondary);}
.loading-spinner i{color:var(--color-accent);margin-right:10px;}
.archive-main-content{min-width:0;display:block;}
.archive-layout-wrapper{display:flex;gap:30px;margin-top:20px;}
.sidebar-ricerca{
width:280px;flex-shrink:0;padding:20px;background:var(--color-background-light);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);height:fit-content;
}
.sidebar-ricerca h2{font-size:1.2em;margin:0 0 20px;border-bottom:1px solid var(--color-border);padding-bottom:10px;color:var(--color-text-primary);}
.filter-group{margin-bottom:15px;}
.filter-group label{display:block;color:var(--color-text-primary);font-weight:700;margin-bottom:5px;}
.filter-group select,.filter-group input[type="text"],.filter-group input[type="number"]{
width:100%;padding:8px;border:1px solid var(--color-border);border-radius:4px;box-sizing:border-box;color:var(--color-text-primary);background:var(--color-bg-input);
}
.sidebar-ricerca .btn-primary{display:block;width:100%;padding:10px;background:var(--color-primary);color:var(--color-bg-primary);border:none;border-radius:4px;cursor:pointer;font-size:1em;margin-top:20px;transition:filter .2s;text-transform:uppercase;font-weight:700;}
.sidebar-ricerca .btn-primary:hover{filter:brightness(1.1);}
/* ===== A-Z FILTER ===== */
.alphabet-filter-container{margin-bottom:20px;padding:15px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:8px;clear:both;}
.alphabet-filter-container p{font-weight:700;margin:0 0 10px;text-transform:uppercase;font-size:.9em;color:var(--color-text-secondary);}
.alphabet-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:5px;justify-content:flex-start;}
.alphabet-btn{
padding:5px 8px;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-primary);font-size:.9em;transition:background-color .15s,color .15s,border-color .15s;
min-width:30px;text-align:center;flex-shrink:0;white-space:nowrap;
}
.alphabet-btn:hover{background:var(--color-hover);color:var(--color-accent);}
.alphabet-btn.active{background:var(--color-primary);color:var(--color-bg-primary);border-color:var(--color-primary);font-weight:700;}
/* ===== ARCHIVE GRID ===== */
.results-box{
background:var(--color-bg-secondary);border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.5);padding:20px 25px;border:1px solid var(--color-border);flex-grow:1;
}
.results-box .result-count{font-size:1.2rem;color:var(--color-text-secondary);font-weight:700;text-align:left;margin:0 0 15px;padding-bottom:5px;border-bottom:2px solid var(--color-border);}
.anime-grid {
display: grid;
gap: 20px;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
#anime-grid-container.anime-grid{padding:20px 0;min-height:auto;}
.anime-card{width:100%;height:auto;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s,border-color .2s;background:var(--color-bg-header-footer);border:1px solid transparent;display:flex;flex-direction:column;}
.anime-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px var(--color-shadow);border-color:var(--color-accent);}
.anime-card-new-layout .card-link-wrapper{display:block;position:relative;}
.anime-card-new-layout .card-cover,.anime-card .card-cover{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-bottom:1px solid var(--color-border);}
.anime-card-new-layout .card-info{padding:10px;text-align:left;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;}
.anime-card-new-layout .card-info a{color:var(--color-text-primary);display:block;}
.anime-card-new-layout .card-info a:hover{color:var(--color-accent);}
.anime-card-new-layout .card-title-text{
font-size:1em;font-weight:700;line-height:1.3;margin-bottom:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;text-overflow:ellipsis;line-clamp:2;
}
.anime-card-new-layout .card-meta-episodes{font-size:.85em;color:var(--color-text-secondary);margin:5px 0 0;}
.anime-card-new-layout .card-meta-episodes strong{color:var(--color-text-primary);font-weight:700;}
.anime-card-new-layout .card-meta{font-size:.8em;color:var(--color-text-secondary);margin:0 0 5px;display:block;}
.anime-card-new-layout .card-title-overlay{display:none;}
.anime-card .card-badges{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;z-index:5;}
.anime-card .badge{background:var(--color-accent);color:var(--color-bg-header-footer);padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:700;}
.no-results-message{grid-column:1/-1;text-align:center;padding:50px;font-size:1.3rem;color:var(--color-text-secondary);}
/* ===== BUTTONS ===== */
.btn-primary,.auth-box input[type="submit"]{
background:var(--color-primary);color:var(--color-bg-primary);border:none;padding:12px 20px;border-radius:20px;font-size:1.1em;font-weight:700;cursor:pointer;text-align:center;
transition:all .3s;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 10px rgba(var(--color-primary-rgb),.4);
}
.btn-primary:hover,.auth-box input[type="submit"]:hover{background:var(--color-accent);box-shadow:0 6px 15px rgba(var(--color-primary-rgb),.6);transform:translateY(-2px);}
.btn-full-width{width:100%;margin-top:20px;}
.btn-secondary-styled{
background:transparent;color:var(--color-accent);border:2px solid var(--color-accent);padding:10px 18px;border-radius:20px;font-size:1em;font-weight:700;cursor:pointer;text-align:center;
transition:all .3s;text-transform:uppercase;flex-shrink:0;max-width:250px;display:flex;justify-content:center;align-items:center;gap:10px;
}
.btn-secondary-styled:hover{background:var(--color-accent);color:var(--color-bg-primary);transform:translateY(-2px);}
.btn-danger-styled{
background:var(--color-danger);color:var(--color-white);border:none;padding:12px 20px;border-radius:20px;font-size:1.1em;font-weight:700;cursor:pointer;text-align:center;
transition:all .3s;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 10px rgba(231,76,60,.4);flex-shrink:0;max-width:250px;display:flex;justify-content:center;align-items:center;gap:10px;
}
.btn-danger-styled:hover{filter:brightness(1.2);box-shadow:0 6px 15px rgba(231,76,60,.6);transform:translateY(-2px);}
/* ===== AUTH PAGES ===== */
.auth-page-wrapper{
display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:100px 20px 150px;background-image:url('../images/background.png');
background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
}
.registration-area-container{max-width:450px;width:100%;text-align:center;filter:drop-shadow(0 0 20px rgba(0,0,0,.9));}
.auth-box{background:var(--color-background-dark);padding:30px;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.3);border:1px solid var(--color-border);}
.auth-box h1{color:var(--color-primary);margin-bottom:25px;font-size:1.8em;}
.auth-box .form-group{text-align:left;margin-bottom:15px;}
.auth-box label{display:block;margin-bottom:5px;color:var(--color-text);font-weight:700;}
.auth-box label i{margin-right:8px;color:var(--color-primary-soft);}
.auth-box input[type="text"],.auth-box input[type="email"],.auth-box input[type="password"]{
width:100%;padding:12px;border:1px solid var(--color-border);border-radius:5px;background:var(--color-background);color:var(--color-text);box-sizing:border-box;transition:border-color .2s;
}
.auth-box input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 5px rgba(var(--color-primary-rgb),.5);}
/* ===== USER DASHBOARD ===== */
.profile-center-wrapper{display:flex;justify-content:center;padding:40px 20px;}
.user-dashboard-main-wrapper{
display:flex;width:100%;max-width:1100px;background:var(--color-bg-secondary);border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.5);
border:1px solid var(--color-border);overflow:hidden;
}
.dashboard-sidebar{
flex:0 0 250px;padding:20px;background:var(--color-bg-header-footer);border-right:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;text-align:center;
}
.current-avatar-section{margin-bottom:20px;text-align:center;padding-bottom:20px;border-bottom:1px solid var(--color-border);}
.profile-avatar-large{
width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--color-accent);box-shadow:0 0 10px var(--color-shadow);
margin-bottom:15px;transition:border-color .3s;
}
.user-role-badge-sidebar{max-width:150px;height:auto;margin:10px auto;display:block;object-fit:contain;}
.profile-title{font-size:1.5em;margin-bottom:5px;color:var(--color-text-primary);}
.profile-role{font-size:.9em;padding:4px 10px;border-radius:15px;color:var(--color-bg-primary);font-weight:700;display:inline-block;}
.dashboard-nav{width:100%;display:flex;flex-direction:column;gap:5px;}
.dashboard-nav a{padding:10px 15px;border-radius:8px;transition:background-color .2s,color .2s;color:var(--color-text-secondary);display:flex;align-items:center;gap:10px;}
.dashboard-nav a:hover{background:var(--color-bg-input);color:var(--color-text-primary);}
.dashboard-nav a.active{background:var(--color-accent);color:var(--color-bg-primary);font-weight:700;}
.dashboard-nav .mini-badge{display:none;min-width:18px;height:18px;padding:0 5px;margin-left:8px;background:var(--color-danger);color:var(--color-white);font-size:11px;font-weight:700;text-align:center;line-height:1.2;border-radius:9px;pointer-events:none;justify-content:center;align-items:center;}
.dashboard-content{flex-grow:1;padding:30px;}
.setting-card{background:var(--color-bg-primary);padding:25px;border-radius:10px;margin-bottom:30px;border:1px solid var(--color-border);}
.setting-card h3{font-size:1.4em;margin-bottom:20px;border-bottom:2px solid var(--color-accent);padding-bottom:5px;color:var(--color-text-primary);}
.setting-card .form-group{margin-bottom:15px;}
.setting-card label{display:block;margin-bottom:5px;color:var(--color-text-secondary);font-weight:700;}
.setting-card label i{margin-right:8px;color:var(--color-accent);}
.setting-card input[type="text"],.setting-card input[type="email"],.setting-card input[type="number"],.setting-card input[type="password"]{
width:100%;padding:10px;border:1px solid var(--color-border);border-radius:5px;background:var(--color-bg-input);color:var(--color-text-primary);
}
.actions-section{padding-top:20px;border-top:1px solid var(--color-border);display:flex;justify-content:flex-start;gap:20px;align-items:center;flex-wrap:wrap;}
.actions-section h3{border-bottom:none;margin:0;flex-shrink:0;}
/* ===== MODALS ===== */
.modal-overlay{
display:none;position:fixed;z-index:1000;inset:0;overflow:auto;background:rgba(0,0,0,.8);justify-content:center;align-items:center;
}
.modal-content{
background:var(--color-bg-secondary);padding:30px;border:1px solid var(--color-border);border-radius:10px;width:90%;max-width:450px;
box-shadow:0 5px 15px rgba(0,0,0,.5);position:relative;animation:fadeIn .3s ease-out;
}
.close-btn-modal{color:var(--color-text-secondary);position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;cursor:pointer;transition:color .3s;}
.close-btn-modal:hover,.close-btn-modal:focus{color:var(--color-text-primary);text-decoration:none;}
.modal-content h3{color:var(--color-text-primary);border-bottom:2px solid var(--color-border);padding-bottom:10px;margin-bottom:20px;text-align:center;}
@keyframes fadeIn{from{opacity:0;transform:scale(.95) translateY(-50px)}to{opacity:1;transform:scale(1) translateY(0)}}
.btn-small-styled{padding:8px 15px;font-size:14px;border:none;border-radius:5px;cursor:pointer;background:var(--color-bg-input);color:var(--color-text-primary);transition:background-color .3s;}
.btn-small-styled:hover{background:var(--color-hover)}
/* ===== MESSAGES ===== */
.message-container{max-width:1000px;margin:50px auto;padding:0 20px;}
.message-layout-wrapper{display:flex;box-shadow:0 0 15px rgba(0,0,0,.5);border-radius:8px;overflow:hidden;height:70vh;background:var(--color-bg-secondary);}
.inbox-sidebar{flex:0 0 300px;background:var(--color-bg-header-footer);border-right:1px solid var(--color-border);overflow-y:auto;padding:15px 0;}
.inbox-sidebar h3{padding:0 15px 10px;border-bottom:1px solid var(--color-border);margin-bottom:10px;color:var(--color-accent);}
.user-search-wrapper{position:relative;padding:0 15px 15px;}
#user-search-input{width:100%;padding:8px 10px;padding-left: 35px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg-input);color:var(--color-text-primary);}
.user-search-results{
position:absolute;width:calc(100% - 30px);background:var(--color-bg-secondary);border:1px solid var(--color-accent);border-top:none;z-index:50;max-height:200px;overflow-y:auto;left:15px;
box-shadow:0 4px 8px rgba(0,0,0,.3);
}
.user-search-item{display:flex;align-items:center;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--color-border);}
.user-search-item:hover{background:var(--color-hover);}
.search-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-right:10px;}
.no-results-text,.loading-text{padding:10px;text-align:center;color:var(--color-text-secondary);}
.conversation-list{padding:0 10px;}
.conversation-item{
padding:10px 15px;margin-bottom:5px;border-radius:4px;cursor:pointer;background:var(--color-bg-secondary);transition:background-color .2s;border-left:3px solid transparent;
}
.conversation-item:hover{background:var(--color-hover);}
.conversation-item.active{background:var(--color-accent);color:var(--color-bg-primary);border-left:5px solid var(--color-primary-soft);font-weight:700;}
.conversation-item.unread{background:rgba(var(--color-primary-rgb),.1);border-left-color:var(--color-danger);font-weight:700;}
.conversation-item.active .conv-preview,.conversation-item.active .conv-time{color:var(--color-bg-primary);}
.conv-name{font-weight:700;display:flex;justify-content:space-between;align-items:center;}
.conv-preview,.conv-time{display:block;font-size:.8em;color:var(--color-text-secondary);}
.chat-area{flex-grow:1;display:flex;flex-direction:column;background:var(--color-bg-primary);}
.chat-header{padding:15px 20px;border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);}
.chat-messages-log{flex-grow:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:15px;}
.message-bubble{max-width:70%;padding:10px 15px;border-radius:15px;}
.message-bubble.sent{align-self:flex-end;background:var(--color-accent);color:var(--color-bg-primary);border-bottom-right-radius:3px;}
.message-bubble.received{align-self:flex-start;background:var(--color-bg-secondary);color:var(--color-text-primary);border-bottom-left-radius:3px;}
.chat-input-area{padding:15px 20px;border-top:1px solid var(--color-border);background:var(--color-bg-secondary);}
#message-send-form{display:flex;gap:10px;align-items:flex-end;}
#message-content{flex-grow:1;resize:none;height:40px;padding:10px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg-input);color:var(--color-text-primary);}
#message-send-form button{padding:10px 15px;flex-shrink:0;}
.profile-menu-toggle{position:relative;cursor:pointer;}
.notification-badge{
position:absolute;top:-5px;right:-5px;background:var(--color-danger);color:var(--color-white);border-radius:50%;padding:3px 6px;font-size:.7em;font-weight:700;
min-width:18px;text-align:center;line-height:1.2;box-shadow:0 0 5px rgba(0,0,0,.5);
}
/* ===== WATCHLIST ===== */
.watchlist-wrapper{display:flex;justify-content:center;width:100%;padding:20px;}
.watchlist-container{
width:100%;max-width:1200px;background:var(--color-bg-secondary);border-radius:10px;padding:30px;box-shadow:0 0 20px rgba(0,0,0,.5);
color:var(--color-text-primary);border:1px solid var(--color-border);
}
.watchlist-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:40px;}
.watchlist-header h1{font-size:2em;margin-bottom:5px;color:var(--color-accent);}
.section-title{position:relative;text-align:center;margin:40px 0 20px;}
.section-title hr{border:0;height:1px;background:var(--color-border);margin:0;}
.section-title h2{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-bg-secondary);padding:0 20px;font-size:1.5em;font-weight:700;color:var(--color-accent);white-space:nowrap;
}
.back-to-profile-footer{text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--color-border);}
.btn-back-to-profile{white-space:nowrap;padding:10px 15px;}
.anime-mini-card-container{display:flex;gap:20px;overflow-x:auto;padding-bottom:15px;margin-bottom:30px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}
.anime-mini-card-container::-webkit-scrollbar{display:none}
.mini-anime-card{
flex:0 0 180px;background:var(--color-bg-header-footer);border-radius:8px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,.4);transition:transform .2s;position:relative;z-index:1;border:1px solid transparent;
}
.mini-anime-card:hover{transform:translateY(-5px);box-shadow:0 8px 15px var(--color-shadow);border-color:var(--color-accent);}
.mini-anime-card img{width:100%;height:120px;object-fit:cover;}
.mini-card-info{padding:10px 10px 15px;position:relative;z-index:10;}
.mini-card-info h4{font-size:1em;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-card-info p{font-size:.8em;color:var(--color-text-secondary);margin-bottom:8px;}
.progress-bar-wrapper{background:var(--color-bg-input);height:5px;border-radius:3px;overflow:hidden;margin-bottom:8px;}
.progress-bar{height:100%;background:var(--color-accent);transition:width .3s;}
.anime-card-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px;margin-top:20px;}
.anime-card.watchlist{border-radius:8px;background:var(--color-bg-header-footer);box-shadow:0 4px 8px rgba(0,0,0,.4);position:relative;z-index:1;border:1px solid transparent;}
.anime-card.watchlist:hover{transform:translateY(-5px);box-shadow:0 8px 20px var(--color-shadow);border-color:var(--color-accent);}
.anime-card.watchlist .card-cover{width:100%;height:300px;object-fit:cover;}
.anime-card .card-title-overlay{padding:10px;text-align:center;}
.anime-card .card-actions-wrapper{padding:10px;position:relative;z-index:10;}
.btn-danger-small{
background:var(--color-danger);color:var(--color-white);border:none;border-radius:4px;padding:6px 10px;cursor:pointer;transition:background-color .2s;font-size:.9em;position:relative;z-index:20;
}
.btn-danger-small:hover{background:#c0392b;}
.anime-card a,.mini-anime-card a{position:relative;z-index:5}
/* ===== NOTIFICATIONS ===== */
.notifications-wrapper{display:flex;justify-content:center;padding:20px;}
.notification-wrapper{
max-width:900px;margin:20px auto 50px;padding-top:120px;box-sizing:border-box;overflow-x:hidden;background:var(--color-background-dark);
border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.4);border:1px solid var(--color-border);
}
.notification-wrapper h1{margin-top:0;font-size:1.8em;}
.notifications-container{width:100%;padding-top:120px;color:var(--color-text-primary);box-shadow:none;}
.notifications-container h1{border-bottom:2px solid var(--color-accent);padding-bottom:15px;margin-bottom:20px;color:var(--color-text-primary);}
.notifications-status{color:var(--color-accent);font-weight:700;margin-bottom:30px;}
.notification-list{display:flex;flex-direction:column;gap:10px;}
.notification-item,.notification-item a{
display:flex;align-items:center;padding:15px;background:var(--color-bg-secondary);border-radius:8px;text-decoration:none;color:inherit;transition:background-color .2s;border-left:5px solid transparent;
}
.notification-item a{width:100%}
.notification-item.unread{background:var(--color-bg-input);border-left-color:var(--color-accent);}
.notification-item a:hover{background:var(--color-hover);}
.notification-icon{font-size:1.5rem;color:var(--color-accent);width:30px;text-align:center;margin-right:15px;}
.notification-content{flex-grow:1;}
.notification-content .message{margin:0;font-size:1em;font-weight:500;}
.notification-content .timestamp{display:block;font-size:.8em;color:var(--color-text-secondary);margin-top:5px;}
.action-arrow{color:var(--color-accent);margin-left:10px;}
.notification-item-empty{text-align:center;padding:40px;background:var(--color-bg-secondary);border-radius:8px;}
/* ===== INFO CLOUD (REGISTER) ===== */
.info-box-styled-cloud{
background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:0 4px 6px rgba(0,0,0,.2);color:#ccc;font-size:.95em;text-align:left;
}
.info-box-styled-cloud h4{color:#00bcd4;font-size:1.1em;margin:0 0 10px;display:flex;align-items:center;}
.info-box-styled-cloud h4 i{margin-right:8px;font-size:1.2em;}
.info-box-styled-cloud ul{list-style:none;padding:0;margin:0;}
.info-box-styled-cloud ul li{display:grid;grid-template-columns:30px 1fr;gap:5px;margin-bottom:15px;line-height:1.4;}
.icon-bubble{font-size:1.2em;flex-shrink:0;align-self:start;}
/* ===== NEWS LAYOUT ===== */
.news-feed-container{
max-width:1200px;
margin:40px auto 60px;
padding:32px 40px 40px;
background:var(--color-bg-secondary);
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.8);
border:1px solid var(--color-border);
backdrop-filter:blur(6px);
}
.news-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:20px;
}
.news-header-main{
flex:1 1 auto;
}
.news-header h1{
margin:0 0 6px;
font-size:2.2rem;
color:var(--color-text-primary);
}
.news-subtitle{
margin:0;
font-size:1rem;
color:var(--color-text-secondary);
max-width:620px;
}
.posts-list-grid{
margin-top:30px;
display:flex;
flex-direction:column;
gap:24px;
}
/* ===== NEWS CARDS ===== */
.post-preview-card{
display:grid;
grid-template-columns:minmax(240px,320px) 1fr;
gap:24px;
background:var(--color-bg-header-footer);
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 10px rgba(0,0,0,.6);
text-decoration:none;
transition:transform .25s,box-shadow .25s;
}
.post-preview-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 18px var(--color-shadow);
}
.post-cover-image{
width:100%;
height:100%;
max-height:220px;
object-fit:cover;
display:block;
}
.post-content-summary{
padding:18px 22px 20px;
display:flex;
flex-direction:column;
}
.post-content-summary h2{
margin:0 0 6px;
font-size:1.6rem;
color:var(--color-text-primary);
transition:color .25s;
}
.post-preview-card:hover .post-content-summary h2{
color:var(--color-accent);
}
.post-meta{
margin:0 0 10px;
font-size:.9rem;
color:var(--color-text-secondary);
}
.post-excerpt{
margin:0 0 12px;
font-size:.98rem;
color:var(--color-text-secondary);
flex-grow:1;
}
.read-more-link{
font-size:.9rem;
font-weight:700;
color:var(--color-accent);
}
/* ===== PAGINAZIONE NEWS ===== */
.pagination-controls{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:30px;
padding:20px 0 0;
}
.btn-pagination{
background:var(--color-bg-secondary);
color:var(--color-text-primary);
padding:10px 15px;
border-radius:5px;
transition:background-color .3s,color .3s;
}
.btn-pagination:hover{
background:var(--color-accent);
color:var(--color-bg-primary);
}
.page-info{
color:var(--color-text-secondary);
font-size:.9rem;
}
/* ===== RESPONSIVE NEWS ===== */
@media (max-width:1024px){
.news-feed-container{
margin:30px auto 50px;
padding:24px 22px 30px;
}
}
.post-preview-card{
grid-template-columns:minmax(220px,280px) 1fr;
gap:18px;
}
@media (max-width:768px){
.news-feed-container{
margin:20px auto 40px;
padding:20px 15px 25px;
}
.news-header{
flex-direction:column;
align-items:flex-start;
}
.post-preview-card{
display:flex;
flex-direction:column;
}
.post-cover-image{
max-height:200px;
}
.post-content-summary h2{
font-size:1.4rem;
}
.pagination-controls{
gap:10px;
margin-top:25px;
}
.btn-pagination{
padding:8px 12px;
}
}
/* ===== SINGLE POST ===== */
.single-post-container{max-width:1200px;margin:0 auto;padding:120px 30px 50px;}
.back-to-news-link{display:block;margin-bottom:20px;color:var(--color-accent);font-size:1.1em;font-weight:700;}
.blog-article{background:var(--color-bg-secondary);border-radius:12px;overflow:hidden;box-shadow:0 6px 15px rgba(0,0,0,.5);padding-bottom:30px;}
.article-header{padding:30px 40px 0;}
.article-header h1{font-size:3em;line-height:1.1;margin-bottom:20px;color:var(--color-text-primary);}
.post-meta-details{display:flex;gap:25px;margin-bottom:20px;font-size:.9em;color:var(--color-text-secondary);}
.post-meta-details strong{color:var(--color-text-primary);font-weight:400;}
.post-cover-large{width:calc(100% + 80px);max-height:350px;object-fit:cover;margin:30px -40px 40px;display:block;}
.article-content{padding:0 40px;line-height:1.7;font-size:1.1em;color:var(--color-text-primary);max-width:auto;overflow-x:visible;box-sizing:border-box;}
.article-content img{max-width:100%;height:auto;}
.article-content p{margin-bottom:1.5em;}
.article-content h2,.article-content h3{color:var(--color-accent);margin-top:1.5em;margin-bottom:.5em;padding-bottom:5px;border-bottom:1px dashed var(--color-bg-primary);}
.article-content ul,.article-content ol{margin-left:20px;margin-bottom:1.5em;}
.article-not-found{text-align:center;padding:60px;background:var(--color-bg-secondary);border-radius:12px;}
@media (max-width:768px){
.single-post-container{padding:0 15px;padding-top:20px}
.article-header,.article-content{padding-left:15px;padding-right:15px}
.article-header h1{font-size:2em}
.post-meta-details{flex-direction:column;gap:5px;font-size:.85em}
.post-cover-large{width:calc(100% + 30px);margin:20px -15px 30px}
}
/* ===== LIGHTBOX ===== */
#lightbox-overlay{
position:fixed;inset:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:100000;display:block;overflow:hidden;padding:20px;transition:opacity .3s;
}
#lightbox-image{max-width:100%;max-height:100%;object-fit:initial;display:block;position:relative;margin:0 auto;}
#lightbox-close{position:fixed;top:20px;right:30px;color:#fff;font-size:40px;font-weight:700;cursor:pointer;opacity:.8;transition:opacity .2s;z-index:100001;}
#lightbox-close:hover{opacity:1;}
.btn-zoom-image{position:relative;display:block;cursor:pointer;overflow:hidden;}
.btn-zoom-image .zoom-overlay-text{
position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;font-size:1.2em;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;opacity:0;transition:opacity .3s;z-index:5;
}
.btn-zoom-image:hover .zoom-overlay-text{opacity:1;}
/* ===== WATCH PARTY HUB ===== */
.page-container{max-width:1200px;margin:40px auto;padding:0 20px;color:var(--color-text-primary);}
.page-main-title{color:var(--color-accent);font-size:2.5rem;margin-bottom:5px;}
.watchparty-header p{color:var(--color-text-secondary);margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--color-border);}
.action-bar{display:flex;justify-content:flex-start;align-items:center;margin-bottom:30px;}
.login-prompt a{color:var(--color-accent);font-weight:700;text-decoration:underline;}
.active-parties-section h2{font-size:1.8rem;color:var(--color-text-primary);margin-bottom:20px;padding-bottom:5px;border-bottom:2px solid var(--color-accent);}
.parties-grid{display:grid;grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));gap:20px;margin-top:20px;}
.party-card{
background:var(--color-bg-secondary);padding:20px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.3);border:1px solid var(--color-border);
transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;justify-content:space-between;
}
.party-card:hover{transform:translateY(-3px);box-shadow:0 6px 12px var(--color-shadow);}
.party-card h3{font-size:1.2rem;color:var(--color-accent);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.party-card p{font-size:.95rem;color:var(--color-text-secondary);margin-bottom:5px;}
.join-party-btn{margin-top:15px;width:100%;padding:10px;font-weight:700;border-radius:4px;cursor:pointer;transition:background-color .2s;}
.btn-success{background:#27ae60;color:#fff;border:none;}
.btn-danger{background:#c0392b;color:#fff;border:none;cursor:not-allowed;}
.modal{position:fixed;z-index:10000;inset:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;}
.modal-content{background:var(--color-bg-primary);padding:30px;border-radius:10px;width:90%;max-width:500px;box-shadow:0 5px 20px rgba(0,0,0,.7);position:relative;color:var(--color-text-primary);}
.close-modal-btn{color:var(--color-text-secondary);position:absolute;top:10px;right:20px;font-size:30px;font-weight:700;cursor:pointer;}
.modal-content h2{color:var(--color-accent);margin-bottom:20px;border-bottom:2px solid var(--color-border);padding-bottom:10px;}
.form-group{margin-bottom:15px;}
.form-group label{display:block;margin-bottom:5px;font-weight:700;color:var(--color-text-primary);}
.modal-content input[type="text"],.modal-content select{
width:100%;padding:10px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg-input);color:var(--color-text-primary);box-sizing:border-box;
}
#submit-party-btn{width:100%;margin-top:20px}
/* ===== RESPONSIVE NEWS FEED ===== */
@media (max-width:768px){
.top-dashboard-flex{flex-direction:column;padding:0 1.2rem}
}
/* ===== PAGINAZIONE ARCHIVIO ===== */
#pagination-controls,
.pagination-controls.archive-pagination {
display: flex !important;
justify-content: center;
margin-top: 40px;
width: 100%;
}
/* Box interno */
.pagination-inner {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 22px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(6px);
border: 1px solid var(--color-border, #444);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
/* bottoni Precedente / Successivo */
.pagination-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
background: var(--color-bg-secondary, #281a40);
border: 1px solid var(--color-border, #3a2a55);
font-size: .92rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
color: var(--color-text-primary, #fff);
transition: all .22s ease;
}
.pagination-btn:hover {
background: var(--color-accent, #ff6b00);
color: var(--color-bg-primary, #1a0f25);
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pagination-btn.disabled {
opacity: .35;
cursor: default;
pointer-events: none;
transform: none;
}
/* testo "Pagina X di Y" */
.pagination-info {
padding: 8px 18px;
border-radius: 999px;
background: var(--color-bg-header-footer, #1e132e);
border: 1px solid var(--color-border, #3a2a55);
font-size: .88rem;
color: var(--color-text-secondary, #bbb);
font-weight: 500;
}
/* Stile per il pulsante delle notifiche Push */
.btn-notification-toggle {
/* Eredita lo stile base di .btn-profile se presente */
/* Assicurati che abbia la stessa dimensione e padding dei pulsanti circostanti */
padding: 10px;
border: none;
background: transparent;
cursor: pointer;
font-size: 1.2rem;
color: var(--color-text-primary); /* Colore del testo predefinito */
transition: color 0.2s, transform 0.2s;
}
/* Stile per l'icona della campana */
.btn-notification-toggle i {
font-size: 1.2rem;
}
/* Effetto al passaggio del mouse */
.btn-notification-toggle:hover {
color: var(--color-accent); /* Esempio: colora l'icona di accento al passaggio */
transform: scale(1.05);
}
/* Stile per indicare che le notifiche sono attive (gestito da JS in linea, ma utile come fallback) */
/* Nel tuo JS abbiamo usato .style.color = 'var(--color-accent)'; */
.btn-notification-toggle.active {
color: var(--color-success) !important; /* Colore verde o accento per indicare che è attivo */
}
/* Assicurati che il contenitore dei controlli usi Flexbox per un allineamento corretto */
.profile-controls-container {
display: flex;
align-items: center;
gap: 15px; /* Spazio tra i vari controlli (welcome message, campana, avatar) */
}
/* ===================================== */
/* STILI FOOTER LINKS (Nuovo Look) */
/* ===================================== */
.footer-links-col {
/* Assicurati che non ci sia padding in eccesso dovuto ad altre classi */
padding: 0 15px;
}
.footer-col-title {
/* Sovrascrivi il colore del titolo H4 */
font-size: 1.1rem !important; /* Rende la dimensione più gestibile */
font-weight: 700 !important;
color: var(--color-accent, #FF8800) !important; /* Usa il tuo arancione principale */
margin-bottom: 12px;
padding-bottom: 5px;
border-bottom: 1px solid var(--color-border, #333);
text-align: left; /* Forza l'allineamento a sinistra per schermi grandi */
}
.footer-nav-links {
/* Nasconde i punti elenco se la classe list-unstyled non li elimina */
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column; /* I link uno sotto l'altro */
gap: 5px; /* Spazio tra i link */
}
/* Applica gli stili ai tag interni */
.footer-link-item {
color: var(--color-text-secondary, #aaa) !important; /* Grigio chiaro per il testo */
font-size: 0.95rem;
text-decoration: none !important; /* Rimuove la sottolineatura */
padding: 2px 0;
display: block; /* Rende cliccabile l'intera riga */
transition: color 0.15s, transform 0.15s;
text-align: left; /* Forza l'allineamento a sinistra */
}
.footer-link-item:hover {
color: var(--color-text-primary, #fff) !important; /* Bianco luminoso all'hover */
transform: translateX(4px); /* Animazione a destra */
}
/* ===== NEWS LAYOUT (MODIFICHE PER DUE COLONNE) ===== */
/* Contenitore principale a due colonne */
.news-two-column-layout {
display: flex;
gap: 30px;
margin-top: 30px;
}
/* Stile per ciascuna colonna */
.news-column {
flex: 1 1 50%;
display: flex;
flex-direction: column;
}
/* Contenitore delle liste scrollabili */
.posts-list-scrollable {
flex-grow: 1;
min-height: 500px;
max-height: 500px;
padding: 24px 0;
position: relative;
}
/* ⭐ Regole Scroll Verticale NATIVO (Applicabile a ENTRAMBE le colonne) ⭐ */
.posts-list-scrollable.scrollable-content-v {
overflow-y: auto !important;
padding-right: 15px;
scrollbar-width: thin;
scrollbar-color: var(--color-accent) var(--color-bg-header-footer);
}
/* Webkit scrollbar (Chrome, Safari) */
.scrollable-content-v::-webkit-scrollbar {
width: 8px;
}
.scrollable-content-v::-webkit-scrollbar-track {
background: var(--color-bg-header-footer);
border-radius: 10px;
}
.scrollable-content-v::-webkit-scrollbar-thumb {
background: var(--color-accent);
border-radius: 10px;
}
/* Stile per le card all'interno della colonna News */
.news-carousel-content {
display: flex;
flex-direction: column;
gap: 24px;
transition: none;
}
/* Stili per le frecce di paginazione/carosello (Nascoste) */
.scroll-button {
display: none !important;
}
/* Rendi le card News più strette per adattarsi */
.news-column .post-preview-card {
display: flex;
flex-direction: column;
}
.news-column .post-preview-card .post-cover-image {
max-height: 150px;
width: 100%;
height: auto;
}
.news-column .post-preview-card .post-content-summary {
flex-grow: 1;
}
/* Responsive: layout a singola colonna su schermi piccoli */
@media (max-width: 1024px) {
.news-two-column-layout {
flex-direction: column;
gap: 40px;
}
.posts-list-scrollable {
max-height: none !important;
min-height: auto;
overflow-y: visible !important;
padding-right: 0;
}
.news-column-anime .carousel-prev-btn,
.news-column-anime .carousel-next-btn {
display: none !important;
}
/* Ripristina la larghezza delle card per la singola colonna */
.news-column .post-preview-card {
display: grid;
grid-template-columns: minmax(180px, 240px) 1fr;
gap: 18px;
}
.news-column .post-preview-card .post-cover-image {
max-height: 100%;
height: auto;
}
}
/* ===== USER LIST PAGE STYLES (utenti_online.php) - FIX DEFINITIVO E AGGRESSIVO ===== */
/* --- Contenitore Principale --- */
.user-list-container {
max-width: 1100px;
margin: 40px auto;
padding: 30px;
background: var(--color-bg-secondary);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
border: 1px solid var(--color-border);
position: relative;
z-index: 50;
}
/* --- Controlli Header --- */
.header-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-accent);
}
.header-controls h1 {
margin: 0;
padding: 0;
flex-grow: 1;
font-size: 2.2rem;
color: var(--color-text-primary);
}
/* --- AUTOCOMPLETE SPECIFICO LISTA UTENTI --- */
.search-container {
position: relative;
width: 350px;
max-width: 40%;
min-width: 250px;
z-index: 100;
}
#autocomplete-search-input {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--color-border) !important;
border-radius: 20px;
background: var(--color-bg-input) !important;
color: var(--color-text-primary) !important;
outline: none;
transition: border-color 0.2s;
}
#autocomplete-search-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 8px var(--color-shadow);
}
.autocomplete-results {
position: absolute;
top: 45px;
left: 0;
width: 100%;
max-height: 250px;
overflow-y: auto;
background: var(--color-bg-header-footer);
border: 1px solid var(--color-accent);
border-top: none;
border-radius: 0 0 10px 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
z-index: 99;
}
.autocomplete-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
cursor: pointer;
border-bottom: 1px solid var(--color-border);
transition: background-color 0.2s;
font-size: 0.95rem;
}
.autocomplete-item:hover {
background: var(--color-hover);
}
/* --- TABELLA E RIGHE --- */
#users-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: var(--color-bg-header-footer);
border-radius: 8px;
overflow: hidden;
table-layout: fixed;
}
#users-table th {
background: var(--color-bg-primary);
color: var(--color-accent);
font-weight: 700;
text-transform: uppercase;
font-size: 0.95rem;
}
#users-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
height: auto !important;
max-height: none !important;
overflow: visible !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
#users-table tbody tr:hover {
background: var(--color-bg-secondary);
}
/* Larghezze delle Colonne per layout fixed */
#users-table th:nth-child(2),
#users-table td:nth-child(2) {
width: 15%;
text-align: center;
}
/* --- STILI PER LE TARGHETTE (Immagini Ruolo - FIX RADICALE) --- */
/* 1. Contenitore della targhetta (TD) - RESETS AGGRESSIVI */
#users-table td.role-cell-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 5px !important;
/* RESETS AGGRESSIVI PER CANCELLARE TUTTI GLI SFONDI CARD/ANIME */
background: none !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
height: 60px !important;
}
/* 2. Wrapper interno (Contiene l'immagine e il testo) */
.role-badge-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 100px;
height: 40px;
background: none !important;
border: none !important;
}
/* 3. Immagine della targhetta (IMG) - FIX DIMENSIONI E DISPLAY */
.role-badge-table-img {
display: block !important;
height: 40px !important;
max-height: 40px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
margin: 0 !important;
/* CANCELLA TUTTI GLI STILI ESTERNI */
border: none !important;
padding: 0 !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
transition: none !important;
opacity: 1 !important;
filter: none !important;
}
/* 4. Stile del testo di fallback (Visibile per default, nascosto da JS se IMG carica) */
.role-badge-text {
font-weight: 700;
font-size: 0.95em;
text-transform: uppercase;
white-space: nowrap;
line-height: 40px;
margin: 0;
}
/* --- Altri Stili Elementi Tabella --- */
.status-online {
color: #50fa7b;
font-weight: 700;
}
.status-offline {
color: var(--color-text-secondary);
font-style: italic;
}
.user-details-cell a.user-avatar-link {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-text-primary);
text-decoration: none;
width: 100%;
height: 100%;
}
.user-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-accent);
transition: border-color 0.2s;
flex-shrink: 0;
}
.user-avatar-link:hover .user-avatar {
border-color: var(--color-primary-soft);
}
.user-name {
font-weight: 700;
font-size: 1.05rem;
}
.btn-message {
background: var(--color-accent);
color: var(--color-bg-primary);
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: background-color 0.2s, transform 0.2s;
}
.btn-message:hover {
background: var(--color-text-primary);
color: var(--color-bg-header-footer);
transform: translateY(-1px);
}
/* Stili Colori Ruolo */
.role-color-admin { color: #FF5555; font-weight: 700; }
.role-color-mod { color: #55FFFF; font-weight: 700; }
.role-color-kamisama { color: #FFD700; font-weight: 700; }
.role-color-ichiban { color: #FFAC33; font-weight: 700; }
.role-color-kenshin { color: #8A2BE2; font-weight: 700; }
.role-color-senpai { color: #50FA7B; font-weight: 700; }
.role-color-otaku { color: #88BBDD; }
.role-color-kohai { color: #D3D3D3; }
.role-color-hikikomori { color: var(--color-text-secondary); }
.role-color-sospeso { color: var(--color-danger, #e74c3c); font-weight: 700; }
/* FIX GLOBALE SAFE */
.blog-comments-section .comments-list-container {
background: transparent !important;
border: none !important;
}
/* ========================================================= */
/* ⭐ SCROLLBAR PERSONALIZZATA (STILE NEWS ARANCIONE) ⭐ */
/* ========================================================= */
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: var(--color-accent) var(--color-bg-primary);
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
width: 12px; /* Un po' più larga per essere comoda */
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-primary); /* Sfondo scuro come il sito */
border-left: 1px solid var(--color-border);
}
::-webkit-scrollbar-thumb {
background: var(--color-accent); /* ARANCIONE */
border-radius: 10px;
border: 3px solid var(--color-bg-primary); /* Crea spazio intorno per effetto 'pillola' */
}
::-webkit-scrollbar-thumb:hover {
background: #ff9933; /* Arancione più chiaro al passaggio */
}
/* Stile per la barra di scorrimento orizzontale */
.carousel.scroll-content {
overflow-x: auto; /* Abilita lo scroll orizzontale */
padding-bottom: 10px; /* Spazio per la barra */
scrollbar-width: thin; /* Per Firefox: barra sottile */
scrollbar-color: #ff7e00 #202020; /* Per Firefox: Arancione su sfondo scuro */
}
/* Per Chrome, Edge, Safari */
.carousel.scroll-content::-webkit-scrollbar {
height: 8px; /* Altezza della barra orizzontale */
}
.carousel.scroll-content::-webkit-scrollbar-track {
background: #202020; /* Colore sfondo della barra */
border-radius: 4px;
}
.carousel.scroll-content::-webkit-scrollbar-thumb {
background-color: #ff7e00; /* COLORE ARANCIONE */
border-radius: 4px;
border: 1px solid #202020; /* Piccolo bordo per stacco */
}
.carousel.scroll-content::-webkit-scrollbar-thumb:hover {
background-color: #e06c00; /* Arancione più scuro al passaggio del mouse */
}
/* =========================================================
📺 TV & KEYBOARD NAVIGATION (Netflix Style)
=========================================================
Rende il sito navigabile con le frecce del telecomando
o il tasto TAB, evidenziando l'elemento selezionato.
*/
/* 1. Disabilita l'outline standard brutto del browser */
:focus {
outline: none !important;
}
/* 2. EFFETTO FOCUS VISIBILE (Solo per Tastiera/TV) */
/* Usa :focus-visible per non disturbare chi usa il mouse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.card:focus-visible, /* Per le locandine anime */
.mini-anime-card:focus-visible,
.btn-primary:focus-visible,
.btn-secondary-styled:focus-visible,
.anime-card:focus-visible {
/* A. Ingrandimento leggero (Pop-up effect) */
transform: scale(1.05);
/* B. Bordo Luminoso e Ombra (Stile Netflix) */
/* Usa il tuo colore accent (#FF8800) per coerenza */
box-shadow:
0 0 0 3px var(--color-bg-primary), /* Spazio nero tra oggetto e bordo */
0 0 0 6px var(--color-accent), /* Bordo Arancione */
0 0 25px rgba(255, 136, 0, 0.6); /* Alone luminoso */
/* C. Porta in primo piano */
z-index: 9999;
position: relative;
/* D. Sfondo scuro per coprire elementi sotto (se trasparenti) */
background-color: var(--color-bg-secondary);
/* E. Animazione fluida */
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
}
/* 3. CORREZIONI SPECIFICHE PER ELEMENTI COMPLESSI */
/* Le card degli anime hanno bisogno di un bordo radius coerente */
.card:focus-visible, .anime-card:focus-visible {
border-radius: 8px; /* O quello che usi per le card */
}
/* I link nel menu header devono rimanere al loro posto */
.main-nav a:focus-visible {
transform: none; /* Niente zoom per i link di testo */
background: transparent;
box-shadow: 0 2px 0 0 var(--color-accent); /* Sottolineatura invece del box */
}
/* I campi di input non devono ingrandirsi troppo */
input:focus-visible, select:focus-visible, textarea:focus-visible {
transform: scale(1.02);
background-color: var(--color-bg-input);
}
/* Impedisce la selezione di testo e immagini */
body {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
/* Consenti la selezione solo nei campi input/form */
input, textarea {
-webkit-user-select: text;
user-select: text;
}
/* Animazione Pulsante Hentai */
@keyframes neonPulse {
0% {
box-shadow: 0 0 5px #ff0055, 0 0 10px #ff0055;
border-color: #ff0055;
}
50% {
box-shadow: 0 0 15px #ff00de, 0 0 25px #ff00de;
border-color: #ff00de;
}
100% {
box-shadow: 0 0 5px #ff0055, 0 0 10px #ff0055;
border-color: #ff0055;
}
}
/* Classe speciale che verrà aggiunta via JS */
.anime-card.is-hentai {
position: relative;
border: 1px solid #ff0055;
animation: neonPulse 2s infinite alternate; /* Pulsazione continua */
transition: transform 0.3s ease;
}
/* Effetto Hover potenziato per queste card */
.anime-card.is-hentai:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 0 20px #ff00de, 0 0 40px #ff00de !important; /* Glow più forte all'hover */
z-index: 10;
}
.anime-card.is-hentai::after {
content: "18+";
position: absolute;
/* Lo posizioniamo A FILO interno, non fuori */
top: 0;
right: 0;
background: #ff0055; /* Sfondo Rosa */
color: #fff;
font-size: 0.75rem;
font-weight: 800;
padding: 4px 8px;
/* Arrotondiamo solo l'angolo in basso a sinistra per stile */
border-bottom-left-radius: 10px;
/* Ombra interna per staccarlo dall'immagine */
box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
z-index: 20; /* Sopra tutto */
pointer-events: none; /* Così se ci passi sopra il mouse clicchi comunque la card */
}
/* =========================================
CHIBI CHAT - FIX LAYOUT & STYLE
========================================= */
/* 1. Il Contenitore Padre (Fisso in basso a sinistra) */
.footer-chibi {
position: fixed;
bottom: 20px;
left: 20px; /* Se lo vuoi a destra cambia 'left' con 'right' */
z-index: 99999; /* Altissimo per stare sopra a tutto */
display: flex;
flex-direction: column;
align-items: flex-start; /* Allinea a sinistra */
width: auto; /* Non deve occupare tutto lo schermo */
}
/* 2. La Finestra della Chat (Il Box "Glass") */
.glass-chat {
display: none; /* Nascosto di default, JS lo cambia in flex */
flex-direction: column !important; /* FORZA la colonna verticale */
/* Posizionamento e Dimensioni */
position: absolute;
bottom: 110px; /* Lo spinge sopra la testa della Chibi */
left: -300px;
width: 320px;
height: 420px;
pointer-events: auto !important; /* Forza il mouse a funzionare qui */
cursor: default; /* Evita che erediti il cursore "manina" dalla mascotte */
z-index: 100000; /* Assicura che sia sopra a tutto, anche al footer */
/* Stile Vetro Scuro (Più solido per coprire il testo sotto) */
background: #111 !important; /* Fallback colore solido */
background: rgba(15, 15, 15, 0.95) !important; /* Quasi opaco */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
overflow: hidden;
animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
from { opacity: 0; transform: scale(0.9) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* 3. Header della Chat */
.chat-header {
background: rgba(255, 255, 255, 0.08);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0; /* Impedisce che si schiacci */
}
.chat-title { color: #fff; font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.close-chat-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; }
/* 4. Corpo dei Messaggi */
.chat-body {
flex-grow: 1; /* Occupa tutto lo spazio disponibile */
padding: 15px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
}
/* Bolle Messaggi */
.bot-msg {
align-self: flex-start;
background: rgba(255, 255, 255, 0.15);
color: #eee;
padding: 10px 14px;
border-radius: 12px;
border-bottom-left-radius: 2px;
max-width: 85%;
font-size: 0.9rem;
line-height: 1.4;
}
.user-msg {
align-self: flex-end;
background: var(--color-accent, #ff8800);
color: #111;
font-weight: 700;
padding: 10px 14px;
border-radius: 12px;
border-bottom-right-radius: 2px;
max-width: 85%;
font-size: 0.9rem;
}
/* 5. Area Input (FIX BORDO DOPPIO) */
.chat-input-area {
padding: 12px;
background: rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0; /* Impedisce che sparisca */
}
/* Input Text FIX */
.chat-input-area input {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 50px;
padding: 10px 15px;
color: #fff;
font-size: 0.9rem;
/* RIMUOVE GLI ALONI */
outline: none !important;
box-shadow: none !important;
}
/* Input Focus State */
.chat-input-area input:focus {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-accent, #ff8800) !important;
}
/* Bottone Invio */
#send-btn {
background: var(--color-accent, #ff8800);
border: none;
width: 40px; height: 40px;
border-radius: 50%;
color: #111;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform 0.2s;
font-size: 1rem;
}
#send-btn:hover { transform: scale(1.1); }
/* 6. Immagine Mascotte (Trigger) */
.chibi-trigger-container {
position: relative;
cursor: pointer;
transition: transform 0.3s;
margin-top: 10px; /* Spazio se serve */
}
.chibi-trigger-container:hover { transform: scale(1.05); }
.chibi-img {
width: 100px; /* Dimensione fissa */
height: auto;
display: block;
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}
.chat-badge {
position: absolute; top: 0; right: 0;
background: #ff0055; color: white;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: bold;
border: 2px solid #fff;
animation: bounce 2s infinite;
}
@keyframes bounce { 0%, 100% {transform:translateY(0);} 50% {transform:translateY(-5px);} }