/**
 * SantaMusica Catalog - Stile FlipperMusic
 * @version 3.0.0
 */

/* ==========================================
   TEMA DARK (Default)
   ========================================== */
:root {
    --sm-bg-dark: #1a1a1a;
    --sm-bg-darker: #121212;
    --sm-bg-card: #242424;
    --sm-bg-hover: #2d2d2d;
    --sm-bg-row-alt: #1e1e1e;
    --sm-primary: #f5c518;
    --sm-primary-hover: #e6b800;
    --sm-text: #ffffff;
    --sm-text-secondary: #b3b3b3;
    --sm-text-muted: #777777;
    --sm-border: #333333;
    --sm-success: #1db954;
    --sm-danger: #e74c3c;
    --sm-radius: 4px;
    --sm-radius-lg: 8px;
    --sm-shadow: 0 4px 12px rgba(0,0,0,0.5);
    --sm-transition: all 0.2s ease;
    --sm-sidebar-width: 195px;
    
    /* Aspetto Grafico (valori di default, sovrascrivibili dalle impostazioni) */
    --sm-cover-size: 45px;
    --sm-font-title: 14px;
    --sm-font-secondary: 12px;
    
    /* Variabili aggiuntive per Light Mode */
    --sm-input-bg: #2a2a2a;
    --sm-input-border: #444;
    --sm-overlay-bg: rgba(0,0,0,0.8);
    --sm-card-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* ==========================================
   TEMA LIGHT
   ========================================== */
body.light-mode,
.light-mode {
    --sm-bg-dark: #f5f5f5;
    --sm-bg-darker: #ffffff;
    --sm-bg-card: #ffffff;
    --sm-bg-hover: #e8e8e8;
    --sm-bg-row-alt: #fafafa;
    --sm-primary: #d77792;
    --sm-primary-hover: #c46680;
    --sm-text: #1a1a1a;
    --sm-text-secondary: #555555;
    --sm-text-muted: #888888;
    --sm-border: #dddddd;
    --sm-success: #1db954;
    --sm-danger: #e74c3c;
    --sm-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --sm-input-bg: #ffffff;
    --sm-input-border: #cccccc;
    --sm-overlay-bg: rgba(0,0,0,0.5);
    --sm-card-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Light Mode - Override specifici */
body.light-mode .sm-catalog-wrapper,
body.light-mode .sm-search-container,
body.light-mode .sm-player,
body.light-mode .sm-sidebar {
    background: var(--sm-bg-dark);
    color: var(--sm-text);
}

body.light-mode .sm-track-item,
body.light-mode .sm-track-row {
    background: var(--sm-bg-card);
    border-color: var(--sm-border);
}

body.light-mode .sm-track-item:hover,
body.light-mode .sm-track-row:hover {
    background: var(--sm-bg-hover);
}

body.light-mode .sm-search-input,
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="search"],
body.light-mode textarea,
body.light-mode select {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #cccccc !important;
}

body.light-mode .sm-search-input::placeholder,
body.light-mode input::placeholder {
    color: #888888 !important;
}

/* Fix ultra-specifico per search input in light mode */
body.light-mode .sm-catalog-wrapper .sm-search-input,
body.light-mode .sm-search-bar .sm-search-input,
body.light-mode .sm-search-input-wrap .sm-search-input,
body.light-mode .sm-search-input-wrap input,
body.light-mode input.sm-search-input {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #cccccc !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

body.light-mode .sm-modal-content,
body.light-mode .sm-flyout-menu {
    background: var(--sm-bg-card);
    box-shadow: var(--sm-card-shadow);
    border: 1px solid var(--sm-border);
}

body.light-mode .sm-sidebar-section,
body.light-mode .sm-filter-section {
    background: var(--sm-bg-card);
    border-color: var(--sm-border);
}

body.light-mode .sm-sidebar-submenu-item:hover,
body.light-mode .sm-filter-item:hover {
    background: var(--sm-bg-hover);
}

body.light-mode .sm-tag,
body.light-mode .sm-filter-tag {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
    border-color: var(--sm-border);
}

body.light-mode .sm-btn-primary {
    background: var(--sm-primary);
    color: #ffffff;
}

body.light-mode .sm-btn-secondary {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
    border-color: var(--sm-border);
}

/* Light Mode - Player */
body.light-mode .sm-player {
    background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
    border-top: 1px solid var(--sm-border);
}

body.light-mode .sm-player .sm-track-title,
body.light-mode .sm-player .sm-track-artist {
    color: var(--sm-text);
}

/* Light Mode - Tabs */
body.light-mode .sm-tabs-nav .sm-tab-btn {
    color: var(--sm-text-secondary);
}

body.light-mode .sm-tabs-nav .sm-tab-btn.active {
    color: var(--sm-primary);
    border-color: var(--sm-primary);
}

/* Light Mode - Cards Dashboard */
body.light-mode .sm-dashboard-card,
body.light-mode .sm-stat-card {
    background: var(--sm-bg-card);
    border: 1px solid var(--sm-border);
    box-shadow: var(--sm-card-shadow);
}

/* Light Mode - Tabelle */
body.light-mode table,
body.light-mode .sm-table {
    background: var(--sm-bg-card);
}

body.light-mode th {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
}

body.light-mode td {
    border-color: var(--sm-border);
}

body.light-mode tr:nth-child(even) {
    background: var(--sm-bg-row-alt);
}

/* Light Mode - Scrollbar */
body.light-mode ::-webkit-scrollbar-track {
    background: var(--sm-bg-dark);
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: var(--sm-border);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--sm-text-muted);
}

/* Light Mode - Toast/Notifiche */
body.light-mode .sm-toast {
    background: var(--sm-bg-card);
    color: var(--sm-text);
    box-shadow: var(--sm-card-shadow);
    border: 1px solid var(--sm-border);
}

/* Light Mode - WooCommerce */
body.light-mode .woocommerce-cart,
body.light-mode .woocommerce-checkout,
body.light-mode .woocommerce-account {
    background: var(--sm-bg-dark);
    color: var(--sm-text);
}

body.light-mode .woocommerce table.shop_table {
    background: var(--sm-bg-card);
    border-color: var(--sm-border);
}

body.light-mode .woocommerce table.shop_table th,
body.light-mode .woocommerce table.shop_table td {
    border-color: var(--sm-border);
    color: var(--sm-text);
}

/* Base */
.sm-catalog-wrapper {
    background: var(--sm-bg-dark);
    color: var(--sm-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Override per DIVI - forza altezza automatica */
.et_pb_section .sm-catalog-wrapper,
#main-content .sm-catalog-wrapper,
.entry-content .sm-catalog-wrapper {
    min-height: auto !important;
    height: auto !important;
}

.sm-catalog-wrapper *, .sm-catalog-wrapper *::before, .sm-catalog-wrapper *::after {
    box-sizing: border-box;
}

.sm-catalog-wrapper a {
    color: var(--sm-text);
    text-decoration: none;
}

.sm-catalog-wrapper a:hover {
    color: var(--sm-primary);
}

/* Layout */
.sm-main-layout {
    display: flex;
}

.sm-content-area {
    flex: 1;
    padding: 20px 30px 40px;
    margin-left: var(--sm-sidebar-width);
    min-height: calc(100vh - 140px); /* Altezza minima = viewport - header, così il footer sta sotto la sidebar */
}

/* Footer del tema - spostato a destra quando c'è la sidebar del catalogo */
/* Questo fa sì che il footer scorra insieme al contenuto e non si sovrapponga alla sidebar */
body:has(.sm-sidebar) #main-footer,
body:has(.sm-sidebar) .et-l--footer,
body:has(.sm-sidebar) footer#colophon,
body:has(.sm-sidebar) footer.site-footer,
body:has(.sm-sidebar) .footer-wrap,
body:has(.sm-sidebar) #footer,
body:has(.sm-sidebar) .site-footer {
    margin-left: var(--sm-sidebar-width);
    width: calc(100% - var(--sm-sidebar-width));
}

/* Responsive: su mobile il footer torna a larghezza piena */
@media (max-width: 768px) {
    body:has(.sm-sidebar) #main-footer,
    body:has(.sm-sidebar) .et-l--footer,
    body:has(.sm-sidebar) footer#colophon,
    body:has(.sm-sidebar) footer.site-footer,
    body:has(.sm-sidebar) .footer-wrap,
    body:has(.sm-sidebar) #footer,
    body:has(.sm-sidebar) .site-footer {
        margin-left: 0;
        width: 100%;
    }
}

/* Sidebar */
.sm-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sm-sidebar-width);
    background: var(--sm-bg-darker);
    border-right: 1px solid var(--sm-border);
    overflow-y: auto;
    overflow-x: visible;
    z-index: 100;
    padding-top: 140px; /* Spazio per header del tema */
}

/* Sidebar nella pagina album - parte da sotto l'header */
.sm-sidebar.sm-sidebar-album {
    top: 140px;
    padding-top: 0;
}

.sm-sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* FORZA VISIBILITÀ TUTTI I FILTRI - Override Divi e altri temi */
.sm-sidebar .sm-sidebar-item,
.sm-sidebar-nav .sm-sidebar-item,
.sm-sidebar-item[data-filter],
.sm-sidebar-item[data-filter="genere"],
.sm-sidebar-item[data-filter="mood"],
.sm-sidebar-item[data-filter="strumenti"],
.sm-sidebar-item[data-filter="vocals"],
.sm-sidebar-item[data-filter="musica_per"],
.sm-sidebar-item[data-filter="lingua"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
}

.sm-sidebar-item {
    border-bottom: 1px solid var(--sm-border);
}

.sm-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--sm-text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--sm-transition);
    cursor: pointer;
}

.sm-sidebar-link:hover, 
.sm-sidebar-link.active,
.sm-sidebar-item.open .sm-sidebar-link {
    background: var(--sm-bg-hover);
    color: var(--sm-primary);
}

/* Sidebar Toggle Item (es. Instrumental) */
.sm-sidebar-toggle-item .sm-sidebar-link {
    cursor: pointer;
}

.sm-sidebar-toggle-item.active .sm-sidebar-link {
    background: var(--sm-bg-hover);
    color: var(--sm-primary);
}

.sm-sidebar-toggle-item.active .sm-sidebar-icon {
    opacity: 1;
    color: var(--sm-primary);
}

/* Indicatore toggle (pallino) */
.sm-toggle-indicator {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--sm-text-muted);
    transition: var(--sm-transition);
}

.sm-sidebar-toggle-item.active .sm-toggle-indicator {
    background: var(--sm-primary);
    border-color: var(--sm-primary);
}

.sm-sidebar-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Icona PNG chiave di violino */
img.sm-icon-classica {
    width: 24px;
    height: 24px;
    filter: invert(1) opacity(0.7);
    object-fit: contain;
    margin-left: -2px;
}

.sm-sidebar-link:hover img.sm-icon-classica,
.sm-sidebar-item.open .sm-sidebar-link img.sm-icon-classica {
    /* Filtro per colore giallo dorato (#f5a623) */
    filter: brightness(0) saturate(100%) invert(67%) sepia(54%) saturate(1000%) hue-rotate(3deg) brightness(103%) contrast(101%);
}

/* Icona SVG SantaMusica (croce) */
.sm-icon-santamusica {
    width: 22px;
    height: 22px;
    margin-left: -1px;
}

.sm-sidebar-link:hover .sm-icon-santamusica,
.sm-sidebar-item.open .sm-sidebar-link .sm-icon-santamusica {
    color: var(--sm-primary);
    opacity: 1;
}

.sm-sidebar-link:hover .sm-sidebar-icon,
.sm-sidebar-item.open .sm-sidebar-link .sm-sidebar-icon {
    opacity: 1;
    color: var(--sm-primary);
}

.sm-sidebar-arrow {
    margin-left: auto;
    transition: transform 0.2s;
}

/* Nascondi vecchio submenu - ora usiamo flyout */
.sm-sidebar-submenu,
.sm-flyout-content {
    display: none !important;
}

/* ========================================
   FLYOUT PANEL - Tendina laterale
   ======================================== */
.sm-flyout-panel {
    position: fixed;
    left: var(--sm-sidebar-width);
    width: 280px;
    max-height: 70vh;
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    z-index: 9999;
    transform: translateX(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    pointer-events: auto;
    overflow: hidden;
}

.sm-flyout-panel.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.sm-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #252525;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
}

.sm-flyout-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sm-primary);
}

.sm-flyout-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--sm-text-secondary);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.sm-flyout-close:hover {
    color: var(--sm-text);
    background: rgba(255,255,255,0.1);
}

.sm-flyout-close svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.sm-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    position: relative;
}

/* Scrollbar stilizzata per il flyout */
.sm-flyout-body::-webkit-scrollbar {
    width: 6px;
}

.sm-flyout-body::-webkit-scrollbar-track {
    background: transparent;
}

.sm-flyout-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.sm-flyout-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Items dentro il flyout */
.sm-flyout-body .sm-sidebar-submenu-item {
    display: block;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--sm-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sm-flyout-body .sm-sidebar-submenu-item:hover {
    color: var(--sm-text);
    background: rgba(255,255,255,0.06);
}

.sm-flyout-body .sm-sidebar-submenu-item.active {
    color: var(--sm-primary);
    background: rgba(245, 197, 24, 0.1);
}

/* Assicura che elementi interni non blocchino il click */
.sm-flyout-body .sm-sidebar-submenu-item * {
    pointer-events: none;
}

.sm-flyout-body .sm-sidebar-submenu-item .sm-term-name {
    pointer-events: none;
}

.sm-flyout-body .sm-sidebar-submenu-item .sm-expand-arrow {
    pointer-events: none;
    float: right;
    margin-top: 2px;
    opacity: 0.5;
    transition: transform 0.2s, opacity 0.2s;
}

.sm-flyout-body .sm-sidebar-submenu-item:hover .sm-expand-arrow {
    opacity: 0.8;
}

.sm-flyout-body .sm-sidebar-submenu-item.open .sm-expand-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

/* Freccia per items con figli */
.sm-flyout-body .sm-sidebar-submenu-item.sm-has-children {
    padding-right: 36px;
    position: relative;
}

.sm-flyout-body .sm-sidebar-submenu-item.sm-has-children .sm-expand-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
}

.sm-flyout-body .sm-sidebar-submenu-item.sm-has-children.open .sm-expand-arrow {
    transform: translateY(-50%) rotate(90deg);
}

/* Figli nel flyout */
.sm-flyout-body .sm-sidebar-children {
    display: none;
    background: rgba(0,0,0,0.15);
    border-left: 2px solid var(--sm-primary);
    margin-left: 12px;
}

.sm-flyout-body .sm-sidebar-children .sm-sidebar-submenu-item {
    padding-left: 20px;
    font-size: 12px;
}

/* Nipoti */
.sm-flyout-body .sm-sidebar-children .sm-sidebar-children .sm-sidebar-submenu-item {
    padding-left: 32px;
    font-size: 11px;
}

/* Adatta il layout principale quando flyout è aperto */
.sm-catalog-wrapper.flyout-open .sm-main-layout {
    /* Nessun effetto - la tendina è piccola */
}

/* Responsive Flyout - Mobile */
@media (max-width: 768px) {
    .sm-flyout-panel {
        left: 10px;
        right: 10px;
        width: auto;
        max-height: 60vh;
        border-radius: 12px;
    }
}

.sm-sidebar-divider {
    height: 1px;
    background: var(--sm-border);
    margin: 10px 0;
}

/* + Filtri Toggle */
.sm-more-filters-toggle .sm-sidebar-link {
    cursor: pointer;
}

.sm-more-filters-toggle.open .sm-sidebar-arrow {
    transform: rotate(90deg);
}

.sm-more-filters-toggle .sm-sidebar-link:hover,
.sm-more-filters-toggle.open .sm-sidebar-link {
    color: var(--sm-primary);
}

/* Sezione Filtri Avanzati */
.sm-advanced-filters {
    border-top: 1px solid var(--sm-border);
    padding-top: 5px;
    margin-top: 5px;
}

.sm-advanced-filters .sm-sidebar-item {
    padding-left: 10px;
}

/* Toggle Filters (Instrumental Solo, Vocals Solo, A Cappella Solo) */
.sm-toggle-filters {
    padding: 10px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
}

.sm-toggle-filter {
    display: block;
    font-size: 13px;
    color: var(--sm-text);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    padding: 6px 12px;
    border: 1px solid var(--sm-border);
    border-radius: 20px;
    text-align: center;
    white-space: nowrap;
}

.sm-toggle-filter:hover {
    color: var(--sm-primary);
    border-color: var(--sm-primary);
}

.sm-toggle-filter.active {
    color: var(--sm-primary);
    border-color: var(--sm-primary);
    font-weight: 500;
}

/* BPM Range Filter */
.sm-bpm-filter .sm-bpm-link {
    cursor: default;
}

.sm-bpm-range-container {
    padding: 10px 15px 15px 15px;
}

.sm-bpm-values {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sm-primary);
}

.sm-bpm-value-separator {
    color: var(--sm-text-secondary);
}

.sm-bpm-slider-wrapper {
    position: relative;
    height: 20px;
    margin: 15px 0;
}

.sm-bpm-slider {
    position: absolute;
    width: 100%;
    height: 5px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    top: 50%;
    transform: translateY(-50%);
}

.sm-bpm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--sm-primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--sm-bg-darker);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.sm-bpm-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--sm-primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--sm-bg-darker);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.sm-bpm-slider-track {
    position: absolute;
    width: 100%;
    height: 5px;
    background: var(--sm-border);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.sm-bpm-slider-range {
    position: absolute;
    height: 5px;
    background: var(--sm-primary);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.sm-bpm-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--sm-text-muted);
    margin-bottom: 10px;
}

.sm-bpm-apply {
    width: 100%;
    padding: 8px 12px;
    background: var(--sm-primary);
    color: var(--sm-bg-dark);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sm-bpm-apply:hover {
    background: #d77792;
}

/* Duration Range Filter */
.sm-duration-filter .sm-duration-link {
    cursor: default;
}

.sm-duration-range-container {
    padding: 10px 15px 15px 15px;
}

.sm-duration-values {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sm-primary);
}

.sm-duration-value-separator {
    color: var(--sm-text-secondary);
}

.sm-duration-slider-wrapper {
    position: relative;
    height: 20px;
    margin: 15px 0;
}

.sm-duration-slider {
    position: absolute;
    width: 100%;
    height: 5px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    top: 50%;
    transform: translateY(-50%);
}

.sm-duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--sm-primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--sm-bg-darker);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.sm-duration-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--sm-primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--sm-bg-darker);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.sm-duration-slider-track {
    position: absolute;
    width: 100%;
    height: 5px;
    background: var(--sm-border);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.sm-duration-slider-range {
    position: absolute;
    height: 5px;
    background: var(--sm-primary);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.sm-duration-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--sm-text-muted);
    margin-bottom: 10px;
}

.sm-duration-apply {
    width: 100%;
    padding: 8px 12px;
    background: var(--sm-primary);
    color: var(--sm-bg-dark);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sm-duration-apply:hover {
    background: #d77792;
}

/* Meta item style */
.sm-meta-item {
    cursor: pointer;
}

.sm-meta-item:hover {
    color: var(--sm-primary);
}

/* Sidebar Auth Buttons */
.sm-sidebar-auth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
}

.sm-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: var(--sm-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--sm-transition);
}

.sm-auth-icon {
    width: 16px;
    height: 16px;
}

.sm-auth-login {
    background: transparent;
    border: 1px solid var(--sm-primary);
    color: var(--sm-primary);
}

.sm-auth-login:hover {
    background: var(--sm-primary);
    color: #000;
}

.sm-auth-register {
    background: var(--sm-primary);
    border: 1px solid var(--sm-primary);
    color: #000;
}

.sm-auth-register:hover {
    background: #e0b015;
    border-color: #e0b015;
}

/* Search Bar */
.sm-search-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    margin-bottom: 25px;
}

.sm-search-input-wrap {
    flex: 1;
    position: relative;
}

.sm-search-input {
    width: 100%;
    padding: 18px 55px 18px 20px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 17px;
    transition: var(--sm-transition);
}

.sm-search-input::placeholder {
    color: var(--sm-text-muted);
}

.sm-search-input:focus {
    outline: none;
    border-color: var(--sm-primary);
}

.sm-search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sm-text-muted);
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.sm-search-select {
    padding: 12px 15px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 14px;
    cursor: pointer;
}

/* Search Clear Button */
.sm-search-clear {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--sm-text-muted);
    display: none;
    transition: var(--sm-transition);
}

.sm-search-clear:hover {
    color: var(--sm-text);
}

.sm-search-clear svg {
    width: 18px;
    height: 18px;
}

.sm-search-input:not(:placeholder-shown) ~ .sm-search-clear {
    display: block;
}

/* Autocomplete Dropdown */
.sm-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sm-bg-card);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    margin-top: 5px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.sm-autocomplete.active {
    display: block;
}

.sm-autocomplete-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--sm-border);
}

.sm-autocomplete-section:last-child {
    border-bottom: none;
}

.sm-autocomplete-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: var(--sm-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 193, 7, 0.1);
}

.sm-autocomplete-header svg {
    width: 16px;
    height: 16px;
}

.sm-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-autocomplete-item:hover {
    background: var(--sm-bg-hover);
}

.sm-autocomplete-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--sm-bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sm-autocomplete-item-icon svg {
    width: 16px;
    height: 16px;
    color: var(--sm-text-muted);
}

.sm-autocomplete-item-content {
    flex: 1;
    min-width: 0;
}

.sm-autocomplete-item-title {
    color: var(--sm-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-autocomplete-item-title strong {
    color: var(--sm-primary);
}

.sm-autocomplete-item-subtitle {
    color: var(--sm-text-muted);
    font-size: 12px;
}

.sm-autocomplete-item-badge {
    background: var(--sm-primary);
    color: var(--sm-bg-dark);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.sm-autocomplete-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    cursor: pointer;
    transition: var(--sm-transition);
    color: var(--sm-primary);
}

.sm-autocomplete-action:hover {
    background: rgba(255, 193, 7, 0.1);
}

.sm-autocomplete-action svg {
    width: 16px;
    height: 16px;
}

.sm-autocomplete-action strong {
    font-size: 15px;
}

/* Filtri Attivi */
.sm-active-filters {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sm-active-filters.visible {
    display: flex;
}

/* Contatore risultati */
.sm-results-count {
    display: none;
    padding: 10px 15px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius);
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--sm-text-secondary);
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.sm-results-count.visible {
    display: flex;
}

.sm-results-count .sm-results-number {
    font-weight: 700;
    color: var(--sm-primary);
    font-size: 16px;
}

/* Bottone Aggiungi risultati a playlist */
.sm-add-results-to-playlist {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--sm-primary);
    color: var(--sm-bg-dark);
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sm-add-results-to-playlist:hover {
    background: var(--sm-primary-hover, #e6c200);
    transform: scale(1.02);
}

.sm-add-results-to-playlist svg {
    flex-shrink: 0;
}

/* Mostra il bottone quando display:block viene impostato da JS */
.sm-add-results-to-playlist[style*="display: inline"],
.sm-add-results-to-playlist[style*="display: flex"],
.sm-add-results-to-playlist[style*="display: block"] {
    display: inline-flex !important;
}

/* Responsive: su mobile il testo diventa più corto */
@media (max-width: 600px) {
    .sm-results-count {
        flex-wrap: wrap;
    }
    
    .sm-add-results-to-playlist span {
        display: none;
    }
    
    .sm-add-results-to-playlist {
        padding: 8px 10px;
    }
    
    .sm-add-results-to-playlist::after {
        content: "Progetto";
    }
}

.sm-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.sm-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--sm-primary);
    color: var(--sm-bg-dark);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.sm-filter-tag-label {
    color: rgba(0,0,0,0.6);
    font-size: 11px;
    text-transform: uppercase;
}

.sm-filter-tag-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--sm-bg-dark);
    opacity: 0.7;
    transition: var(--sm-transition);
}

.sm-filter-tag-remove:hover {
    opacity: 1;
}

.sm-filter-tag-remove svg {
    width: 14px;
    height: 14px;
}

.sm-clear-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 2px solid var(--sm-primary);
    border-radius: var(--sm-radius);
    color: var(--sm-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sm-transition);
    white-space: nowrap;
}

.sm-clear-filters:hover {
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
}

.sm-clear-filters svg {
    width: 14px;
    height: 14px;
}

/* Tracks List */
.sm-tracks-list {
    display: flex;
    flex-direction: column;
}

.sm-track-item {
    border-bottom: 1px solid var(--sm-border);
}

.sm-track-item:nth-child(even) {
    background: var(--sm-bg-row-alt);
}

.sm-track-item:hover {
    background: var(--sm-bg-hover);
}

.sm-track-item.expanded {
    background: var(--sm-bg-card);
}

.sm-track-row {
    display: grid;
    grid-template-columns: 40px 50px 40px 1fr 100px 70px 80px 100px auto;
    gap: 12px;
    padding: 12px 15px;
    align-items: center;
}

.sm-track-num {
    color: var(--sm-text-muted);
    font-size: 13px;
    text-align: center;
}

.sm-track-artwork {
    width: var(--sm-cover-size, 45px);
    height: var(--sm-cover-size, 45px);
    border-radius: 4px;
    overflow: hidden;
    background: var(--sm-bg-darker);
    flex-shrink: 0;
}

.sm-track-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-track-artwork .sm-artwork-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sm-text-muted);
}

.sm-track-artwork .sm-artwork-placeholder svg {
    width: 24px;
    height: 24px;
}

.sm-track-play {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--sm-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sm-transition);
}

.sm-track-play:hover {
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
    transform: scale(1.1);
}

.sm-track-play.playing {
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
}

/* Traccia caricata ma in pausa - bordo giallo pulsante */
.sm-track-play.loaded {
    background: transparent;
    border: 2px solid var(--sm-primary);
    color: var(--sm-primary);
    animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 197, 24, 0);
    }
}

.sm-track-play svg {
    width: 16px;
    height: 16px;
}

/* Play/Pause icon toggle */
.sm-track-play .pause-icon {
    display: none;
}

.sm-track-play.playing .play-icon {
    display: none;
}

.sm-track-play.playing .pause-icon {
    display: block;
}

.sm-track-info {
    min-width: 0;
}

.sm-track-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-track-title {
    font-weight: 600;
    font-size: var(--sm-font-title, 14px);
    color: var(--sm-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Badge Explicit */
.sm-explicit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #b91c1c !important;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
}

/* Badge verde per Cristiana Esplicita */
.sm-cristiana-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 3px;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 9px;
    font-weight: 700;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
}

.sm-track-title-row .sm-expand-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    opacity: 0.5;
}

.sm-track-title-row .sm-expand-btn:hover {
    opacity: 1;
}

.sm-track-title-row .sm-expand-btn svg {
    width: 14px;
    height: 14px;
}

.sm-track-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sm-font-secondary, 12px);
    color: var(--sm-text-secondary);
    margin-top: 4px;
}

.sm-track-album-link {
    color: var(--sm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-track-album-link:hover {
    color: var(--sm-primary);
}

.sm-track-separator {
    color: var(--sm-text-muted);
}

.sm-track-artist {
    color: var(--sm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-track-versions {
    text-align: center;
}

.sm-versions-badge {
    display: inline-flex;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--sm-border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--sm-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.sm-versions-badge:hover {
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

.sm-track-duration {
    font-size: 13px;
    color: var(--sm-text-secondary);
    font-family: monospace;
    text-align: center;
}

.sm-track-time-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sm-track-bpm {
    font-size: 10px;
    color: var(--sm-text-muted);
    font-family: monospace;
    text-align: center;
}

.sm-track-library-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    max-width: 120px;
    gap: 2px;
}

.sm-track-library-info .sm-library-logo {
    max-width: 60px;
    max-height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.sm-track-item:hover .sm-library-logo {
    opacity: 1;
}

.sm-track-library-info .sm-library-name {
    font-size: 10px;
    color: var(--sm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.2;
    max-width: 100px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sm-track-code-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

.sm-code-album {
    color: var(--sm-text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

a.sm-code-album:hover {
    color: var(--sm-primary);
}

.sm-code-track {
    color: var(--sm-text-muted);
}

.sm-track-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.sm-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--sm-radius);
    background: transparent;
    color: var(--sm-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sm-transition);
}

.sm-action-btn:hover {
    background: var(--sm-bg-card);
    color: var(--sm-text);
}

.sm-action-btn.favorite:hover, .sm-action-btn.favorite.active {
    color: var(--sm-danger);
}

.sm-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Actions Dropdown Menu */
.sm-actions-menu {
    position: relative;
}

.sm-actions-trigger {
    position: relative;
}

.sm-actions-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background: var(--sm-bg-card);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    min-width: 180px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    overflow: hidden;
}

.sm-actions-menu.open .sm-actions-dropdown {
    display: block;
}

.sm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    background: transparent;
    border: none;
    color: var(--sm-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--sm-transition);
    text-align: left;
}

.sm-dropdown-item:hover {
    background: var(--sm-bg-darker);
    color: var(--sm-text);
}

.sm-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sm-dropdown-item span {
    flex: 1;
}

/* Download WAV per abbonati - verde */
.sm-dropdown-item.download-wav,
.sm-dropdown-item.sm-subscription-download {
    color: #22c55e;
}

.sm-dropdown-item.download-wav:hover,
.sm-dropdown-item.sm-subscription-download:hover {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.sm-dropdown-item.download-wav svg,
.sm-dropdown-item.sm-subscription-download svg {
    color: #22c55e;
}

.sm-expand-btn {
    transition: transform 0.2s;
}

.sm-track-item.expanded .sm-expand-btn {
    transform: rotate(180deg);
}

.sm-track-item.expanded .sm-track-title-row .sm-expand-btn {
    opacity: 1;
}

.sm-similar-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text-secondary);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.sm-similar-btn:hover {
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

/* Expanded Content */
.sm-track-expanded {
    display: none;
    padding: 0 15px 20px 15px;
    margin-left: 92px;
    border-top: 1px solid var(--sm-border);
}

.sm-track-item.expanded .sm-track-expanded {
    display: block;
}

/* Tabs */
.sm-track-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--sm-border);
}

.sm-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--sm-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-tab-btn:hover {
    color: var(--sm-text);
}

.sm-tab-btn.active {
    color: var(--sm-text);
    border-bottom-color: var(--sm-primary);
}

.sm-tab-content {
    display: none;
}

.sm-tab-content.active {
    display: block;
}

/* Versions List */
.sm-versions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-version-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: var(--sm-bg-dark);
    border-radius: var(--sm-radius);
}

.sm-version-play {
    width: 32px;
    height: 32px;
}

.sm-version-play svg {
    width: 14px;
    height: 14px;
}

.sm-version-name {
    flex: 1;
    font-size: 13px;
    color: var(--sm-text);
}

.sm-version-duration {
    font-size: 12px;
    color: var(--sm-text-muted);
    font-family: monospace;
    margin-right: 20px;
}

.sm-version-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sm-version-actions .sm-similar-btn {
    font-size: 9px;
    padding: 4px 10px;
}

.sm-version-actions .sm-action-btn {
    width: 28px;
    height: 28px;
}

.sm-version-actions .sm-action-btn svg {
    width: 14px;
    height: 14px;
}

.sm-no-versions, .sm-no-keywords {
    color: var(--sm-text-muted);
    font-size: 13px;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* Info Grid */
.sm-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.sm-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 15px;
    background: var(--sm-bg-dark);
    border-radius: var(--sm-radius);
}

.sm-info-row.sm-info-full {
    grid-column: 1 / -1;
}

.sm-info-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sm-text-muted);
    font-weight: 600;
}

.sm-info-value {
    font-size: 13px;
    color: var(--sm-text);
}

.sm-info-link {
    color: var(--sm-primary);
    text-decoration: none;
    transition: var(--sm-transition);
}

.sm-info-link:hover {
    color: var(--sm-text);
    text-decoration: underline;
}

/* Keywords */
.sm-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.sm-keyword-tag {
    display: inline-flex;
    padding: 6px 14px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--sm-text-secondary);
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-keyword-tag:hover {
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

/* Taxonomy Section in Expanded Track */
.sm-taxonomy-section {
    padding: 15px 0;
}

.sm-taxonomy-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sm-border);
}

.sm-taxonomy-row:last-child {
    border-bottom: none;
}

.sm-taxonomy-label {
    min-width: 120px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sm-text-secondary);
    padding-top: 6px;
}

.sm-taxonomy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.sm-tag {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    cursor: default;
    transition: var(--sm-transition);
}

/* Colori diversi per tipo di tassonomia */
.sm-tag-genre {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}

.sm-tag-mood {
    background: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

.sm-tag-instruments {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.sm-tag-musicfor {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.sm-tag-vocals {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

.sm-tag-language {
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid rgba(20, 184, 166, 0.3);
    color: #2dd4bf;
}

.sm-tag-keyword {
    background: rgba(245, 197, 24, 0.2);
    border: 1px solid var(--sm-primary);
    color: var(--sm-primary);
}

.sm-tag-clickable {
    cursor: pointer;
    text-decoration: none;
}

.sm-tag-clickable:hover {
    filter: brightness(1.3);
    transform: scale(1.05);
}

/* ========================================
   SINGLE ALBUM PAGE
   ======================================== */

.sm-album-single {
    background: var(--sm-bg-dark);
}

.sm-album-header {
    display: flex;
    gap: 30px;
    padding: 40px;
    background: linear-gradient(180deg, var(--sm-bg-darker) 0%, var(--sm-bg-dark) 100%);
}

.sm-album-cover {
    width: 200px;
    height: 200px;
    border-radius: var(--sm-radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--sm-shadow);
}

.sm-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-album-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #333, #222);
    color: var(--sm-text-muted);
}

.sm-album-cover-placeholder svg {
    width: 60px;
    height: 60px;
}

.sm-album-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sm-album-header-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.sm-album-catalog-link {
    text-decoration: none;
    transition: var(--sm-transition);
}

.sm-album-catalog-link:hover .sm-album-catalog-name {
    color: var(--sm-primary);
}

.sm-album-catalog-name {
    font-size: 14px;
    color: var(--sm-text-secondary);
    transition: var(--sm-transition);
}

.sm-album-code-badge {
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
    padding: 2px 8px;
    border-radius: var(--sm-radius);
    font-size: 12px;
    font-weight: 700;
}

.sm-album-share-btn {
    background: transparent;
    border: none;
    color: var(--sm-text-muted);
    cursor: pointer;
    padding: 5px;
}

.sm-album-share-btn:hover {
    color: var(--sm-text);
}

.sm-album-main-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--sm-text);
    margin: 0 0 15px 0;
}

.sm-album-meta-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

.sm-album-meta-label {
    color: var(--sm-text-muted);
}

.sm-album-meta-value {
    color: var(--sm-text);
}

.sm-album-description {
    color: var(--sm-primary);
    font-size: 18px;
    font-weight: 400;
    margin: 8px 0 0 0;
    max-width: 700px;
    line-height: 1.4;
}

.sm-album-library-logo {
    width: 150px;
    height: auto;
    margin-left: auto;
    align-self: flex-start;
}

.sm-album-library-logo a {
    display: block;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.sm-album-library-logo a:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.sm-album-library-logo img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}

.sm-library-name-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--sm-bg-card);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    min-height: 80px;
}

.sm-library-name-box span {
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-text-secondary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sm-album-library-logo a:hover .sm-library-name-box {
    border-color: var(--sm-primary);
}

.sm-album-library-logo a:hover .sm-library-name-box span {
    color: var(--sm-primary);
}

.sm-album-tracks-section {
    padding: 20px 40px;
}

.sm-album-tracks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sm-border);
}

.sm-album-tracks-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sm-text);
    margin: 0;
}

.sm-album-tracks-count {
    color: var(--sm-text-muted);
    font-size: 14px;
}

/* Responsive Album Page */
@media (max-width: 768px) {
    .sm-album-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .sm-album-cover {
        width: 150px;
        height: 150px;
    }
    
    .sm-album-main-title {
        font-size: 24px;
    }
    
    .sm-album-meta-row {
        flex-direction: column;
        gap: 5px;
    }
    
    .sm-album-library-logo {
        margin: 20px auto 0;
    }
    
    .sm-album-tracks-section {
        padding: 20px;
    }
}

/* Player */
.sm-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sm-bg-darker);
    border-top: 1px solid var(--sm-border);
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 15px;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.sm-player.active {
    transform: translateY(0);
}

.sm-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-player-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--sm-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sm-transition);
}

.sm-player-btn:hover {
    color: var(--sm-primary);
}

.sm-player-btn.play-pause {
    width: 44px;
    height: 44px;
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
}

.sm-player-btn.play-pause:hover {
    background: var(--sm-primary-hover);
    transform: scale(1.05);
}

.sm-player-artwork {
    width: 50px;
    height: 50px;
    border-radius: var(--sm-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.sm-player-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-player-info {
    min-width: 120px;
}

.sm-player-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--sm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-player-album {
    font-size: 11px;
    color: var(--sm-text-secondary);
}

.sm-player-time-start, .sm-player-time-end {
    font-size: 12px;
    color: var(--sm-text-muted);
    font-family: monospace;
    min-width: 45px;
}

.sm-player-time-end {
    text-align: right;
}

.sm-player-waveform-container {
    flex: 1;
    max-width: 600px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#sm-waveform {
    width: 100%;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Override stili wavesurfer per uniformare */
#sm-waveform wave {
    overflow: hidden !important;
}

/* Vecchi stili progress bar (mantenuti per compatibilità) */
.sm-player-progress {
    flex: 1;
    max-width: 500px;
    display: none; /* Nascosto, usiamo waveform */
}

.sm-player-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--sm-border);
    border-radius: 3px;
    cursor: pointer;
}

.sm-player-progress-fill {
    height: 100%;
    background: var(--sm-primary);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
}

.sm-player-volume {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-player-volume svg {
    width: 18px;
    height: 18px;
    color: var(--sm-text-muted);
}

.sm-player-volume input[type="range"] {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    background: var(--sm-border);
    border-radius: 2px;
    cursor: pointer;
}

.sm-player-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sm-primary);
}

/* No Results */
.sm-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--sm-text-muted);
}

.sm-no-results-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    opacity: 0.3;
}

/* Load More */
.sm-load-more-wrap {
    text-align: center;
    padding: 30px 0;
}

.sm-load-more {
    padding: 12px 40px;
    background: transparent;
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 14px;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-load-more:hover {
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

/* Filtro Ordinamento */
.sm-sort-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 15px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius);
}

.sm-sort-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: var(--sm-transition);
}

.sm-sort-btn:hover {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
    border-color: var(--sm-text-secondary);
}

.sm-sort-btn.active {
    background: var(--sm-primary);
    border-color: var(--sm-primary);
    color: #000;
}

/* Container filtri catalogo */
.sm-catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
    margin-bottom: 25px;
}

.sm-catalog-filters .sm-alpha-filter {
    flex: 1;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

/* Pulsante Classica standalone (fuori dal box lettere) */
.sm-catalog-filters > .sm-genre-btn {
    margin-left: 0;
    height: auto;
    padding: 12px 20px;
    align-self: stretch;
}

/* Filtro Ordinamento */
.sm-sort-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    flex-shrink: 0;
    align-self: stretch;
}

.sm-sort-filter label {
    color: var(--sm-text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.sm-sort-filter select {
    padding: 8px 30px 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.sm-sort-filter select option {
    background: #2a2a2a;
    color: #ffffff !important;
}

.sm-sort-filter select:focus {
    outline: none;
    border-color: var(--sm-primary);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.sm-sort-filter select:active,
.sm-sort-filter select:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.sm-sort-filter select:hover {
    border-color: var(--sm-text-secondary);
}

/* Filtro Alfabetico */
.sm-alpha-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 25px;
    padding: 15px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
}

.sm-alpha-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-alpha-btn:hover {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
    border-color: var(--sm-text-secondary);
}

.sm-alpha-btn.active {
    background: var(--sm-primary);
    border-color: var(--sm-primary);
    color: #000;
}

/* Pulsante filtro genere (Classica) */
.sm-alpha-btn.sm-genre-btn {
    margin-left: 0;
    padding: 0 15px;
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

.sm-alpha-btn.sm-genre-btn:hover {
    background: rgba(245, 197, 24, 0.1);
}

.sm-alpha-btn.sm-genre-btn.active {
    background: var(--sm-primary);
    color: #000;
}

/* Wrapper per pulsanti genere (Classica, Religiosa) */
.sm-genre-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-genre-buttons .sm-genre-btn {
    height: 36px;
    white-space: nowrap;
}

.sm-album-card.hidden {
    display: none;
}

/* Albums Grid */
.sm-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.sm-album-card {
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    overflow: hidden;
    transition: var(--sm-transition);
}

.sm-album-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sm-shadow);
}

.sm-album-artwork {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    display: block;
}

.sm-album-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-album-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--sm-transition);
}

.sm-album-card:hover .sm-album-play-overlay {
    opacity: 1;
}

.sm-album-play-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-album-info {
    padding: 15px;
}

.sm-album-code {
    display: inline-block;
    padding: 3px 8px;
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--sm-radius);
    margin-bottom: 8px;
}

.sm-album-title {
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    color: var(--sm-text);
}

/* Loading */
.sm-tracks-container.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
    min-height: 200px;
}

/* Spinner di caricamento - overlay fisso */
.sm-tracks-container.loading::before {
    content: '';
    position: fixed;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #f5a623;
    border-radius: 50%;
    animation: sm-spinner 0.8s linear infinite;
    z-index: 1000;
}

.sm-tracks-container.loading::after {
    content: 'Ricerca in corso...';
    position: fixed;
    top: 260px;
    left: 50%;
    transform: translateX(-50%);
    color: #888;
    font-size: 14px;
    z-index: 1000;
}

@keyframes sm-spinner {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Spinner per search bar */
.sm-search-loading {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #f5a623;
    border-radius: 50%;
    animation: sm-spinner-small 0.6s linear infinite;
    display: none;
}

.sm-search-loading.active {
    display: block;
}

@keyframes sm-spinner-small {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .sm-track-row {
        grid-template-columns: 40px 45px 40px 1fr 80px 60px 70px auto;
    }
    .sm-track-code-info {
        display: none;
    }
}

@media (max-width: 1024px) {
    .sm-track-row {
        grid-template-columns: 40px 45px 40px 1fr 80px 60px auto;
    }
    .sm-track-library-info, .sm-track-code-info {
        display: none;
    }
}

@media (max-width: 992px) {
    .sm-sidebar {
        transform: translateX(-100%);
    }
    .sm-sidebar.open {
        transform: translateX(0);
    }
    .sm-content-area {
        margin-left: 0;
    }
    .sm-track-expanded {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    /* Track row mobile - layout 2 righe stile FlipperMusic */
    .sm-track-row {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 6px;
        align-items: center;
    }
    
    /* Nascondi elementi non essenziali */
    .sm-track-artwork,
    .sm-track-versions, 
    .sm-track-duration, 
    .sm-track-library-info, 
    .sm-track-code-info,
    .sm-similar-btn,
    .sm-track-meta,
    .sm-track-num {
        display: none !important;
    }
    
    /* RIGA 1: Play + Titolo + Expand */
    .sm-track-play {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
    }
    
    .sm-track-play svg {
        width: 18px;
        height: 18px;
    }
    
    .sm-track-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    .sm-track-title-row {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    
    .sm-track-title {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* NON flex:1, così la freccia sta subito dopo */
    }
    
    /* Pulsante espandi - subito dopo il titolo */
    .sm-expand-btn {
        display: flex !important;
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        background: transparent;
        border: none;
        color: var(--sm-text-muted);
        margin-right: auto; /* Spinge tutto il resto a destra */
    }
    
    .sm-expand-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* RIGA 2: Azioni - forza nuova riga, allineate a sinistra */
    .sm-track-actions {
        flex-basis: 100%;
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: flex-start;
        padding-left: 40px; /* Allineato sotto il titolo */
    }
    
    .sm-action-btn {
        width: 28px;
        height: 28px;
    }
    
    .sm-action-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Search bar mobile - più compatta */
    .sm-search-bar {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .sm-search-input-wrap {
        width: 100%;
    }
    
    .sm-search-input-wrap input {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .sm-orderby-wrap {
        width: auto;
        align-self: flex-start;
    }
    
    .sm-orderby-wrap select {
        font-size: 12px;
        padding: 8px 10px;
        min-width: 120px;
    }
    
    /* Sezione espansa su mobile */
    .sm-track-expanded {
        margin-left: 0;
        padding: 10px 12px 15px;
    }
    
    .sm-track-tabs {
        gap: 5px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    
    .sm-track-tab {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .sm-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .sm-info-item {
        padding: 10px;
    }
    
    .sm-info-label {
        font-size: 9px;
    }
    
    .sm-info-value {
        font-size: 12px;
    }
    
    /* Versioni su mobile */
    .sm-version-row {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }
    
    .sm-version-play {
        width: 28px;
        height: 28px;
    }
    
    .sm-version-name {
        flex: 1;
        min-width: 0;
        font-size: 12px;
    }
    
    .sm-version-duration {
        font-size: 11px;
        margin-right: 0;
    }
    
    .sm-version-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 8px;
        padding-left: 36px;
    }
    
    .sm-version-actions .sm-action-btn {
        width: 26px;
        height: 26px;
    }
    
    /* Player mobile */
    .sm-player {
        padding: 8px 12px;
        gap: 8px;
    }
    
    .sm-player-info, 
    .sm-player-volume {
        display: none;
    }
    
    /* Sidebar mobile - nascosta */
    .sm-sidebar {
        display: none;
    }
    
    .sm-main-content,
    .sm-main-layout {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Header album mobile */
    .sm-album-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
        gap: 15px;
    }
    
    .sm-album-cover {
        width: 120px;
        height: 120px;
    }
    
    .sm-album-library-logo {
        display: none;
    }
    
    .sm-album-main-title {
        font-size: 20px;
    }
    
    .sm-album-header-title {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .sm-album-description {
        font-size: 16px;
    }
    
    /* Active filters mobile */
    .sm-active-filters {
        flex-wrap: wrap;
        padding: 10px;
    }
    
    .sm-filter-tag {
        font-size: 11px;
    }
    
    .sm-clear-filters {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
        font-size: 12px;
    }
    
    /* Content area mobile */
    .sm-content-area {
        padding: 0;
    }
}

/* ========================================
   FAVORITES & ACTIONS
   ======================================== */

/* Pulsante preferito attivo */
.sm-action-btn.favorite.active {
    color: #e74c3c;
}

.sm-action-btn.favorite.active svg {
    fill: #e74c3c;
}

/* Loading state */
.sm-action-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.sm-action-btn.loading svg {
    animation: sm-spin 1s linear infinite;
}

@keyframes sm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Toast Notifications */
.sm-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--sm-bg-card);
    color: var(--sm-text);
    padding: 12px 20px;
    border-radius: var(--sm-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid var(--sm-border);
}

.sm-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sm-toast svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sm-toast-success {
    border-color: var(--sm-success);
}

.sm-toast-success svg {
    color: var(--sm-success);
}

.sm-toast-error {
    border-color: #e74c3c;
}

.sm-toast-error svg {
    color: #e74c3c;
}

.sm-toast-warning {
    border-color: #f39c12;
}

.sm-toast-warning svg {
    color: #f39c12;
}

.sm-toast-info {
    border-color: var(--sm-primary);
}

.sm-toast-info svg {
    color: var(--sm-primary);
}

/* ========================================
   FAVORITES PAGE
   ======================================== */

.sm-favorites-page {
    padding: 30px;
}

.sm-favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sm-border);
}

.sm-favorites-header h2 {
    margin: 0;
    font-size: 28px;
    color: var(--sm-text);
}

.sm-favorites-count {
    color: var(--sm-text-muted);
    font-size: 14px;
}

.sm-no-favorites {
    text-align: center;
    padding: 60px 20px;
}

.sm-no-favorites svg {
    width: 60px;
    height: 60px;
    color: var(--sm-text-muted);
    margin-bottom: 20px;
}

.sm-no-favorites p {
    color: var(--sm-text-muted);
    margin-bottom: 20px;
}

.sm-btn-primary {
    display: inline-block;
    padding: 12px 24px;
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
    text-decoration: none;
    border-radius: var(--sm-radius);
    font-weight: 600;
    transition: var(--sm-transition);
}

.sm-btn-primary:hover {
    background: #f0c14b;
    transform: translateY(-2px);
}

/* ========================================
   DASHBOARD
   ======================================== */

.sm-dashboard {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--sm-bg-darker);
    min-height: 100vh;
}

.sm-dashboard-header {
    margin-bottom: 30px;
}

.sm-dashboard-header h1 {
    font-size: 32px;
    margin: 0 0 10px 0;
    color: var(--sm-text);
}

.sm-welcome {
    color: var(--sm-text-muted);
    margin: 0;
}

.sm-welcome a {
    color: var(--sm-primary);
}

/* Stats Cards */
.sm-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.sm-stat-card {
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--sm-border);
    transition: var(--sm-transition);
}

.sm-stat-card:hover {
    border-color: var(--sm-primary);
    transform: translateY(-2px);
}

.sm-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(225, 180, 69, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sm-stat-icon svg {
    width: 24px;
    height: 24px;
    color: var(--sm-primary);
}

.sm-stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sm-stat-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--sm-text);
    line-height: 1;
}

.sm-stat-label {
    font-size: 13px;
    color: var(--sm-text-muted);
    margin-top: 4px;
}

/* Dashboard Grid */
.sm-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.sm-dashboard-section {
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius);
    padding: 20px;
    border: 1px solid var(--sm-border);
    overflow: hidden;
}

.sm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sm-border);
}

.sm-section-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin: 0;
    color: var(--sm-text);
}

.sm-section-header h2 svg {
    width: 18px;
    height: 18px;
    color: var(--sm-primary);
    flex-shrink: 0;
}

.sm-view-all {
    color: var(--sm-primary);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.sm-view-all:hover {
    text-decoration: underline;
}

/* Empty State */
.sm-empty-state {
    text-align: center;
    padding: 30px 15px;
    color: var(--sm-text-muted);
}

.sm-empty-state p {
    margin: 0 0 15px 0;
    font-size: 14px;
}

.sm-btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    color: var(--sm-primary);
    border: 1px solid var(--sm-primary);
    text-decoration: none;
    border-radius: var(--sm-radius);
    font-size: 14px;
    transition: var(--sm-transition);
}

.sm-btn-secondary:hover {
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
}

/* Compact Track List in Dashboard */
.sm-dashboard-favorites .sm-tracks-list {
    max-height: 400px;
    overflow-y: auto;
}

.sm-dashboard-favorites .sm-track-item {
    border-bottom: 1px solid var(--sm-border);
}

.sm-dashboard-favorites .sm-track-item:last-child {
    border-bottom: none;
}

.sm-dashboard-favorites .sm-track-row {
    grid-template-columns: 30px 40px 32px 1fr auto auto;
    gap: 8px;
    padding: 10px 5px;
}

.sm-dashboard-favorites .sm-track-artwork {
    width: 40px;
    height: 40px;
}

.sm-dashboard-favorites .sm-track-info {
    min-width: 0;
    overflow: hidden;
}

.sm-dashboard-favorites .sm-track-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-dashboard-favorites .sm-track-meta {
    display: none;
}

.sm-dashboard-favorites .sm-track-actions,
.sm-dashboard-favorites .sm-similar-btn,
.sm-dashboard-favorites .sm-track-code-info {
    display: none;
}

.sm-dashboard-favorites .sm-track-versions {
    font-size: 11px;
    padding: 3px 8px;
}

.sm-dashboard-favorites .sm-track-duration {
    font-size: 12px;
}

/* Downloads List */
.sm-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.sm-download-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--sm-bg-darker);
    border-radius: var(--sm-radius);
}

.sm-download-artwork {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.sm-download-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-download-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sm-download-title {
    font-weight: 500;
    font-size: 13px;
    color: var(--sm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-download-date {
    font-size: 11px;
    color: var(--sm-text-muted);
}

/* Licenses List */
.sm-licenses-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.sm-license-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: var(--sm-bg-darker);
    border-radius: var(--sm-radius);
    flex-wrap: wrap;
}

.sm-license-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sm-license-title {
    font-weight: 500;
    font-size: 13px;
    color: var(--sm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-license-type {
    font-size: 12px;
    color: var(--sm-primary);
}

.sm-license-date {
    font-size: 11px;
    color: var(--sm-text-muted);
}

.sm-license-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.sm-btn-small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
    border: none;
    border-radius: var(--sm-radius);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-btn-small:hover {
    background: #f0c14b;
}

.sm-btn-small svg {
    width: 12px;
    height: 12px;
}

.sm-btn-small.sm-btn-outline {
    background: transparent;
    border: 1px solid var(--sm-border);
    color: var(--sm-text);
}

.sm-btn-small.sm-btn-outline:hover {
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

/* Dashboard Responsive */
@media (max-width: 1200px) {
    .sm-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sm-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .sm-dashboard-licenses {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .sm-dashboard {
        padding: 15px;
    }
    
    .sm-dashboard-header h1 {
        font-size: 24px;
    }
    
    .sm-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .sm-stat-card {
        padding: 15px;
    }
    
    .sm-stat-number {
        font-size: 22px;
    }
    
    .sm-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .sm-dashboard-licenses {
        grid-column: span 1;
    }
    
    .sm-license-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sm-license-actions {
        width: 100%;
        margin-top: 10px;
    }
    
    .sm-btn-small {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   CATALOGO LIBRERIE
   ======================================== */

/* Link library nella riga brano */
.sm-library-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    transition: var(--sm-transition);
}

.sm-library-link:hover {
    opacity: 0.8;
}

.sm-library-link:hover .sm-library-name {
    color: var(--sm-primary);
}

/* Griglia librerie */
.sm-libraries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.sm-library-card {
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    overflow: hidden;
    transition: var(--sm-transition);
}

.sm-library-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sm-shadow);
}

.sm-library-artwork {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.sm-library-artwork img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.sm-library-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sm-bg-darker);
}

.sm-library-placeholder svg {
    width: 60px;
    height: 60px;
    color: var(--sm-text-muted);
}

.sm-library-info {
    padding: 15px;
    text-align: center;
}

.sm-library-title {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 5px 0;
    color: var(--sm-text-primary);
}

.sm-library-count {
    font-size: 12px;
    color: var(--sm-text-muted);
}

/* ========================================
   PLAYLIST PUBBLICHE GRID
   ======================================== */
.sm-playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.sm-playlist-card {
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    overflow: hidden;
    transition: var(--sm-transition);
}

.sm-playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sm-shadow);
}

.sm-playlist-artwork {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    display: block;
}

.sm-playlist-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-playlist-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sm-bg-darker) 0%, #2a2a2a 100%);
}

.sm-playlist-placeholder svg {
    width: 60px;
    height: 60px;
    color: var(--sm-text-muted);
}

.sm-playlist-play-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
    background: var(--sm-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sm-playlist-play-overlay svg {
    width: 20px;
    height: 20px;
    color: #000;
    margin-left: 3px;
}

.sm-playlist-card:hover .sm-playlist-play-overlay {
    opacity: 1;
    transform: translateY(0);
}

.sm-playlist-info {
    padding: 15px;
}

.sm-playlist-title {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 5px 0;
    color: var(--sm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-playlist-title a {
    color: inherit;
    text-decoration: none;
}

.sm-playlist-title a:hover {
    color: var(--sm-primary);
}

.sm-playlist-meta {
    font-size: 12px;
    color: var(--sm-text-muted);
}

/* Header pagina dettaglio library */
.sm-library-header {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
    padding: 30px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
}

.sm-library-header-logo {
    flex-shrink: 0;
}

.sm-library-header-logo img {
    max-width: 200px;
    max-height: 140px;
    object-fit: contain;
}

.sm-library-header-info {
    flex: 1;
}

.sm-library-header-info h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    color: var(--sm-text-primary);
}

.sm-library-stats {
    color: var(--sm-text-secondary);
    font-size: 14px;
    margin: 0 0 10px 0;
}

.sm-library-stats .sm-separator {
    margin: 0 10px;
    color: var(--sm-text-muted);
}

.sm-library-description {
    color: var(--sm-primary);
    font-size: 18px;
    font-weight: 400;
    margin: 8px 0 0 0;
    line-height: 1.4;
}

.sm-tracks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sm-tracks-header h2 {
    margin: 0;
    color: var(--sm-text-primary);
    font-size: 20px;
}

.sm-tracks-count {
    color: var(--sm-text-muted);
    font-size: 14px;
}

/* Responsive librerie */
@media (max-width: 768px) {
    .sm-libraries-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .sm-library-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .sm-library-header-info h1 {
        font-size: 22px;
    }
    
    .sm-playlists-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .sm-playlist-play-overlay {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================
   SHARE MODAL
   ======================================== */

.sm-share-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.sm-share-modal.active {
    display: flex;
}

.sm-share-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.sm-share-modal-content {
    position: relative;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    padding: 30px 50px;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sm-share-modal-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--sm-text-muted);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.sm-share-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sm-text);
    margin-bottom: 25px;
}

.sm-share-copy-btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--sm-primary);
    border: 2px solid var(--sm-primary);
    border-radius: 25px;
    color: var(--sm-bg-darker);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-share-copy-btn:hover {
    background: #d77792;
    border-color: #d77792;
    color: var(--sm-bg-darker);
}

/* ========================================
   LYRICS MODAL
   ======================================== */

.sm-lyrics-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.sm-lyrics-modal.active {
    display: flex;
}

.sm-lyrics-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.sm-lyrics-modal-content {
    position: relative;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    padding: 30px 40px;
    text-align: center;
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sm-lyrics-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--sm-text-muted);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.sm-lyrics-modal-close:hover {
    color: var(--sm-text);
}

.sm-lyrics-modal-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--sm-text-muted);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.sm-lyrics-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sm-primary);
    margin-bottom: 20px;
}

.sm-lyrics-modal-text {
    flex: 1;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sm-text);
    padding: 20px;
    background: var(--sm-bg-darker);
    border-radius: var(--sm-radius);
    margin-bottom: 20px;
    max-height: 400px;
    white-space: pre-wrap;
}

.sm-lyrics-copy-btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--sm-primary);
    border: 2px solid var(--sm-primary);
    border-radius: 25px;
    color: var(--sm-bg-darker);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-lyrics-copy-btn:hover {
    background: #d77792;
    border-color: #d77792;
}

/* ========================================
   LOGIN MODAL
   ======================================== */

.sm-login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.sm-login-modal.active {
    display: flex;
}

.sm-login-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.sm-login-modal-content {
    position: relative;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    padding: 30px 40px;
    text-align: center;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sm-login-message {
    font-size: 16px;
    color: var(--sm-text);
    margin-bottom: 25px;
    line-height: 1.5;
}

.sm-login-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.sm-login-btn {
    padding: 12px 30px;
    border-radius: var(--sm-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sm-transition);
    text-decoration: none;
    border: none;
}

.sm-btn-login {
    background: var(--sm-primary);
    color: #000;
}

.sm-btn-login:hover {
    background: #e0b015;
}

.sm-btn-cancel {
    background: transparent;
    border: 1px solid var(--sm-border);
    color: var(--sm-text-secondary);
}

.sm-btn-cancel:hover {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
}

/* ========================================
   AUTH FORMS (Login/Register)
   ======================================== */

.sm-auth-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
}

.sm-auth-logged-in {
    text-align: center;
}

.sm-auth-logged-in p {
    color: var(--sm-text);
    margin-bottom: 20px;
}

.sm-auth-error p {
    color: #ff6b6b;
}

.sm-form-group {
    margin-bottom: 20px;
}

.sm-form-group label {
    display: block;
    color: var(--sm-text-secondary);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sm-form-group input[type="text"],
.sm-form-group input[type="email"],
.sm-form-group input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 15px;
    transition: var(--sm-transition);
}

.sm-form-group input:focus {
    outline: none;
    border-color: var(--sm-primary);
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.2);
}

.sm-form-group input::placeholder {
    color: var(--sm-text-muted);
}

.sm-password-wrap {
    position: relative;
}

.sm-password-wrap input {
    padding-right: 50px;
}

.sm-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--sm-text-muted);
    transition: var(--sm-transition);
}

.sm-toggle-password:hover {
    color: var(--sm-text);
}

.sm-toggle-password svg {
    width: 20px;
    height: 20px;
}

.sm-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sm-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.sm-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--sm-text-secondary);
}

.sm-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--sm-primary);
    cursor: pointer;
}

.sm-checkbox-label span {
    flex: 1;
    line-height: 1.4;
}

.sm-checkbox-label a {
    color: var(--sm-primary);
    text-decoration: none;
}

.sm-checkbox-label a:hover {
    text-decoration: underline;
}

.sm-forgot-link {
    color: var(--sm-text-muted);
    font-size: 13px;
    text-decoration: none;
    transition: var(--sm-transition);
}

.sm-forgot-link:hover {
    color: var(--sm-primary);
}

.sm-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--sm-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sm-transition);
    text-decoration: none;
    border: none;
}

.sm-btn-primary {
    background: var(--sm-primary);
    color: #000;
}

.sm-btn-primary:hover {
    background: #e0b015;
}

.sm-btn-secondary {
    background: transparent;
    border: 1px solid var(--sm-border);
    color: var(--sm-text-secondary);
}

.sm-btn-secondary:hover {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
}

.sm-btn-full {
    width: 100%;
    margin-top: 10px;
}

.sm-auth-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--sm-border);
    text-align: center;
}

.sm-auth-footer p {
    color: var(--sm-text-secondary);
    font-size: 14px;
    margin: 0;
}

.sm-auth-footer a {
    color: var(--sm-primary);
    text-decoration: none;
    font-weight: 500;
}

.sm-auth-footer a:hover {
    text-decoration: underline;
}

.sm-form-message {
    padding: 12px 16px;
    border-radius: var(--sm-radius);
    margin-bottom: 15px;
    font-size: 14px;
}

.sm-form-message.success {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid #28a745;
    color: #28a745;
}

.sm-form-message.error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid #dc3545;
    color: #dc3545;
}

.sm-form-message a {
    color: inherit;
    text-decoration: underline;
}

/* ========================================
   FORM REGISTRAZIONE ESTESO
   ======================================== */

.sm-register-extended {
    max-width: 700px;
}

.sm-form-section {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--sm-border);
}

.sm-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.sm-section-title {
    color: var(--sm-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Selettore Tipo Utente */
.sm-user-type-selector {
    display: flex;
    gap: 20px;
}

.sm-user-type-option {
    flex: 1;
    cursor: pointer;
}

.sm-user-type-option input {
    display: none;
}

.sm-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 25px 20px;
    background: var(--sm-bg-dark);
    border: 2px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    transition: var(--sm-transition);
}

.sm-type-card svg {
    width: 40px;
    height: 40px;
    color: var(--sm-text-muted);
    transition: var(--sm-transition);
}

.sm-type-card strong {
    font-size: 15px;
    color: var(--sm-text-secondary);
    transition: var(--sm-transition);
}

.sm-user-type-option input:checked + .sm-type-card {
    border-color: var(--sm-primary);
    background: rgba(245, 197, 24, 0.1);
}

.sm-user-type-option input:checked + .sm-type-card svg {
    color: var(--sm-primary);
}

.sm-user-type-option input:checked + .sm-type-card strong {
    color: var(--sm-primary);
}

.sm-user-type-option:hover .sm-type-card {
    border-color: var(--sm-text-muted);
}

/* Form Row 3 colonne */
.sm-form-row-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
}

/* Select */
.sm-form-group select {
    width: 100%;
    padding: 14px 16px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 15px;
    transition: var(--sm-transition);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 45px;
}

.sm-form-group select:focus {
    outline: none;
    border-color: var(--sm-primary);
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.2);
}

.sm-form-group select option {
    background: var(--sm-bg-dark);
    color: var(--sm-text);
}

/* Textarea */
.sm-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: var(--sm-transition);
}

.sm-form-group textarea:focus {
    outline: none;
    border-color: var(--sm-primary);
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.2);
}

.sm-form-group textarea::placeholder {
    color: var(--sm-text-muted);
}

/* Input tel e url */
.sm-form-group input[type="tel"],
.sm-form-group input[type="url"] {
    width: 100%;
    padding: 14px 16px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 15px;
    transition: var(--sm-transition);
}

.sm-form-group input[type="tel"]:focus,
.sm-form-group input[type="url"]:focus {
    outline: none;
    border-color: var(--sm-primary);
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.2);
}

/* Checkbox Grid per Settori */
.sm-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.sm-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-checkbox-item:hover {
    border-color: var(--sm-text-muted);
}

.sm-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sm-primary);
    cursor: pointer;
}

.sm-checkbox-item span {
    color: var(--sm-text-secondary);
    font-size: 14px;
}

.sm-checkbox-item:has(input:checked) {
    border-color: var(--sm-primary);
    background: rgba(245, 197, 24, 0.1);
}

.sm-checkbox-item:has(input:checked) span {
    color: var(--sm-text);
}

/* Radio Group */
.sm-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sm-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    cursor: pointer;
    transition: var(--sm-transition);
}

.sm-radio-item:hover {
    border-color: var(--sm-text-muted);
}

.sm-radio-item input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sm-primary);
    cursor: pointer;
}

.sm-radio-item span {
    color: var(--sm-text-secondary);
    font-size: 14px;
}

.sm-radio-item:has(input:checked) {
    border-color: var(--sm-primary);
    background: rgba(245, 197, 24, 0.1);
}

.sm-radio-item:has(input:checked) span {
    color: var(--sm-text);
}

/* Errori di validazione */
.sm-input-error {
    border-color: var(--sm-danger) !important;
}

.sm-field-error {
    display: block;
    color: var(--sm-danger);
    font-size: 12px;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .sm-register-extended {
        max-width: 100%;
        padding: 25px 20px;
    }
    
    .sm-user-type-selector {
        flex-direction: column;
        gap: 15px;
    }
    
    .sm-form-row-3 {
        grid-template-columns: 1fr;
    }
    
    .sm-checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .sm-radio-group {
        flex-direction: column;
    }
}

/* Checkbox per form registrazione (nativi visibili) */
.sm-reg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--sm-text-secondary);
    line-height: 1.5;
}

.sm-reg-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    accent-color: var(--sm-primary);
    cursor: pointer;
}

.sm-reg-checkbox span {
    flex: 1;
}

.sm-reg-checkbox a {
    color: var(--sm-primary);
}

.sm-reg-checkbox a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px) {
    .sm-auth-form {
        padding: 25px 20px;
    }
    
    .sm-form-row-2 {
        grid-template-columns: 1fr;
    }
    
    .sm-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Stile pulsante share nell header album */
.sm-album-share-btn {
    background: transparent;
    border: none;
    color: var(--sm-text-muted);
    cursor: pointer;
    padding: 5px;
    transition: var(--sm-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-album-share-btn:hover {
    color: var(--sm-primary);
    transform: scale(1.1);
}

.sm-album-share-btn svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   BULK DOWNLOAD ZIP BUTTON
   ======================================== */
.sm-bulk-download-btn {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: var(--sm-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sm-bulk-download-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.sm-bulk-download-btn:active {
    transform: translateY(0);
}

.sm-bulk-download-btn svg {
    width: 16px;
    height: 16px;
}

.sm-bulk-download-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.sm-bulk-download-btn.loading svg {
    animation: sm-spin 1s linear infinite;
}

@keyframes sm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulsante nella ricerca */
.sm-bulk-download-search {
    margin-left: 10px;
}

/* Pulsante più piccolo nell'header */
.sm-playlist-header-title .sm-bulk-download-btn,
.sm-album-header-title .sm-bulk-download-btn {
    padding: 5px 10px;
    font-size: 11px;
}

/* Tooltip/feedback */
.sm-bulk-download-feedback {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5, 150, 105, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: sm-slideUp 0.3s ease;
}

.sm-bulk-download-feedback.error {
    background: rgba(220, 38, 38, 0.95);
}

@keyframes sm-slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   MODAL - AGGIUNGI A PLAYLIST
   ======================================== */
.sm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.sm-modal.active,
.sm-modal[style*="display: block"],
.sm-modal[style*="display:block"] {
    display: flex !important;
}

.sm-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.sm-modal-content {
    position: relative;
    background: #2a2a2a;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.sm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--sm-text);
}

.sm-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--sm-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.sm-modal-close:hover {
    color: var(--sm-text);
}

.sm-modal-body {
    padding: 24px;
}

.sm-modal-track-name {
    font-weight: 600;
    color: var(--sm-text);
    margin: 0 0 20px 0;
    font-size: 16px;
}

.sm-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    cursor: pointer;
    color: var(--sm-text-secondary);
}

.sm-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sm-primary);
}

.sm-modal-section {
    margin-bottom: 20px;
}

.sm-modal-section label {
    display: block;
    margin-bottom: 8px;
    color: var(--sm-text-secondary);
    font-size: 14px;
}

.sm-modal-section select,
.sm-modal-section input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff !important;
    font-size: 14px;
    margin-bottom: 12px;
    -webkit-text-fill-color: #ffffff;
}

.sm-modal-section input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.sm-modal-section select:focus,
.sm-modal-section input[type="text"]:focus {
    outline: none;
    border-color: var(--sm-primary);
    color: #ffffff !important;
}

/* Modal piccolo per condivisione */
.sm-modal-content.sm-modal-small {
    max-width: 360px;
}

.sm-share-playlist-name {
    font-size: 16px;
    color: var(--sm-text);
    margin: 0 0 16px 0;
    text-align: center;
}

.sm-share-url-container {
    margin-bottom: 0;
}

.sm-share-url-container input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}

#sm-share-playlist-modal .sm-modal-footer {
    text-align: center;
}

#sm-copy-link-btn {
    min-width: 120px;
}

.sm-modal-divider {
    text-align: center;
    color: var(--sm-text-muted);
    font-size: 13px;
    margin: 20px 0;
    position: relative;
}

.sm-modal-divider::before,
.sm-modal-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.sm-modal-divider::before {
    left: 0;
}

.sm-modal-divider::after {
    right: 0;
}

.sm-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.sm-btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.sm-btn-primary {
    background: var(--sm-primary);
    color: var(--sm-bg-darker);
}

.sm-btn-primary:hover {
    background: #e0b400;
}

.sm-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sm-text-secondary);
}

.sm-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--sm-text);
}

.sm-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

/* Modal Modifica Playlist */
#sm-edit-playlist-modal .sm-modal-content {
    max-width: 450px;
}

#sm-edit-playlist-modal .sm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    text-align: right;
}

#sm-edit-playlist-modal .sm-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
}

#sm-edit-playlist-modal .sm-checkbox-custom {
    display: inline-block !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
}

.sm-form-group {
    margin-bottom: 20px;
}

.sm-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--sm-text);
    margin-bottom: 8px;
}

.sm-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-size: 14px;
    transition: border-color 0.2s;
}

.sm-input:focus {
    outline: none;
    border-color: var(--sm-primary);
}

.sm-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

/* Area upload copertina */
.sm-cover-upload-area {
    cursor: pointer;
    transition: opacity 0.2s;
}

.sm-cover-upload-area:hover {
    opacity: 0.8;
}

#sm-edit-cover-preview {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

#sm-edit-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--sm-text-muted);
}

.sm-cover-placeholder svg {
    opacity: 0.5;
}

.sm-cover-placeholder span {
    font-size: 12px;
}

/* Checkbox custom */
.sm-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: normal !important;
    font-size: 14px;
    color: var(--sm-text);
}

.sm-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sm-checkbox-custom {
    display: inline-block;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    border: 2px solid #666;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    box-sizing: border-box;
}

.sm-checkbox-label:hover .sm-checkbox-custom {
    border-color: #999;
}

.sm-checkbox-label input[type="checkbox"]:checked + .sm-checkbox-custom {
    background: var(--sm-primary);
    border-color: var(--sm-primary);
}

.sm-checkbox-label input[type="checkbox"]:checked + .sm-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #000;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.sm-help-text {
    font-size: 12px;
    color: var(--sm-text-muted);
    margin-top: 6px;
}

/* Toggle Switch */
.sm-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sm-toggle-label {
    font-size: 14px;
    color: var(--sm-text);
}

.sm-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.sm-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sm-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    transition: 0.3s;
    border-radius: 26px;
}

.sm-toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

.sm-toggle-switch input:checked + .sm-toggle-slider {
    background-color: var(--sm-primary);
}

.sm-toggle-switch input:checked + .sm-toggle-slider::before {
    transform: translateX(24px);
    background-color: #000;
}

.sm-toggle-switch:hover .sm-toggle-slider {
    background-color: #555;
}

.sm-toggle-switch input:checked:hover + .sm-toggle-slider {
    background-color: #e0b400;
}

/* Badge pubblico nella card playlist */
.sm-public-badge {
    margin-left: 6px;
    font-size: 12px;
}

/* Autore playlist nel catalogo */
.sm-playlist-author {
    display: block;
    font-size: 12px;
    color: var(--sm-text-muted);
    margin-top: 3px;
}

/* Card playlist con copertina */
.sm-playlist-card-icon.has-cover {
    background: none;
    padding: 0;
}

.sm-playlist-card-icon.has-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Toast notification */
.sm-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 14px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s;
}

.sm-toast.show {
    opacity: 1;
}

.sm-toast.success {
    background: #2e7d32;
}

.sm-toast.error {
    background: #c62828;
}

/* ========================================
   PAGINA PLAYLIST
   ======================================== */
.sm-playlist-header {
    display: flex;
    gap: 30px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(245, 197, 24, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 12px;
    margin-bottom: 30px;
}

.sm-playlist-icon {
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, var(--sm-primary) 0%, #b8960a 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sm-playlist-icon.has-cover {
    background: none;
}

.sm-playlist-icon.has-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-playlist-icon svg {
    color: var(--sm-bg-darker);
}

.sm-playlist-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sm-playlist-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sm-playlist-type {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sm-text-muted);
}

.sm-playlist-author {
    font-size: 13px;
    color: var(--sm-text-secondary);
}

.sm-playlist-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--sm-text);
    margin: 0 0 8px 0;
}

.sm-playlist-description {
    color: var(--sm-primary);
    font-size: 18px;
    font-weight: 400;
    margin: 8px 0 12px 0;
    max-width: 700px;
    line-height: 1.4;
}

.sm-playlist-meta {
    color: var(--sm-text-secondary);
    font-size: 14px;
}

.sm-playlist-share-btn,
.sm-playlist-delete-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--sm-text-secondary);
    transition: all 0.2s;
}

.sm-playlist-share-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--sm-text);
}

.sm-playlist-delete-btn:hover {
    background: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.sm-playlist-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sm-text-muted);
    font-size: 16px;
}

/* Bottone rimuovi da playlist */
.sm-remove-from-playlist {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--sm-text-muted);
    border-radius: 4px;
    transition: all 0.2s;
}

.sm-remove-from-playlist:hover {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* Dashboard - Sezione Playlist */
.sm-dashboard-playlists {
    margin-top: 30px;
}

.sm-dashboard-playlists h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sm-text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-dashboard-playlists h3 svg {
    color: var(--sm-primary);
}

.sm-playlist-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.sm-playlist-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.sm-playlist-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--sm-primary) 0%, #b8960a 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sm-playlist-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--sm-bg-darker);
}

.sm-playlist-card-info {
    flex: 1;
    min-width: 0;
}

.sm-playlist-card-title {
    font-weight: 600;
    color: var(--sm-text);
    margin-bottom: 4px;
}

.sm-playlist-card-title a {
    color: inherit;
    text-decoration: none;
}

.sm-playlist-card-title a:hover {
    color: var(--sm-primary);
}

.sm-playlist-card-meta {
    font-size: 13px;
    color: var(--sm-text-muted);
}

.sm-playlist-card-actions {
    display: flex;
    gap: 8px;
}

.sm-playlist-card-actions button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--sm-text-secondary);
    transition: all 0.2s;
}

.sm-playlist-card-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--sm-text);
}

.sm-playlist-card-actions .delete-btn:hover {
    background: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.sm-no-playlists {
    text-align: center;
    padding: 40px;
    color: var(--sm-text-muted);
}

/* Responsive playlist */
@media (max-width: 768px) {
    .sm-playlist-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
    }
    
    .sm-playlist-icon {
        width: 120px;
        height: 120px;
    }
    
    .sm-playlist-title {
        font-size: 24px;
    }
    
    .sm-playlist-header-title {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   TRACK INFO MODAL
   ======================================== */
.sm-trackinfo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.sm-trackinfo-modal.active {
    display: flex;
}

.sm-trackinfo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.sm-trackinfo-content {
    position: relative;
    background: var(--sm-bg-card, #1a1a1a);
    border-radius: 16px;
    padding: 30px 40px;
    min-width: 480px;
    max-width: 620px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-trackinfo-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #888;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.sm-trackinfo-close:hover {
    color: var(--sm-primary, #f5c518);
}

.sm-trackinfo-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sm-primary, #f5c518);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sm-trackinfo-body {
    flex: 1;
    overflow-y: auto;
    max-height: 50vh;
    margin-bottom: 20px;
}

.sm-trackinfo-loading {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 15px;
}

.sm-trackinfo-error {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
    font-size: 15px;
}

.sm-trackinfo-table {
    width: 100%;
    border-collapse: collapse;
}

.sm-trackinfo-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sm-trackinfo-table tr:last-child {
    border-bottom: none;
}

.sm-trackinfo-label {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 10px 8px 0;
    vertical-align: top;
    white-space: nowrap;
    width: 35%;
}

.sm-trackinfo-value {
    font-size: 16px;
    color: #fff;
    padding: 8px 0;
    vertical-align: top;
    word-break: break-word;
}

.sm-trackinfo-value a {
    color: var(--sm-primary, #f5c518);
    text-decoration: underline;
}

.sm-trackinfo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-trackinfo-btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.sm-trackinfo-csv {
    background: var(--sm-primary, #f5c518);
    border: 2px solid var(--sm-primary, #f5c518);
    color: #000;
}

.sm-trackinfo-csv:hover {
    background: var(--sm-primary-hover, #e6b800);
    border-color: var(--sm-primary-hover, #e6b800);
}

.sm-trackinfo-view-lyrics,
.sm-trackinfo-download-lyrics {
    background: transparent;
    border: 2px solid var(--sm-primary, #f5c518);
    color: var(--sm-primary, #f5c518);
}

.sm-trackinfo-view-lyrics:hover,
.sm-trackinfo-download-lyrics:hover {
    background: var(--sm-primary, #f5c518);
    color: #000;
}

/* Responsive TrackInfo Modal */
@media (max-width: 600px) {
    .sm-trackinfo-content {
        min-width: auto;
        width: 95%;
        max-width: none;
        padding: 25px 20px;
        margin: 10px;
    }
    
    .sm-trackinfo-title {
        font-size: 16px;
        padding-right: 30px;
    }
    
    .sm-trackinfo-table {
        display: block;
    }
    
    .sm-trackinfo-table tr {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
    }
    
    .sm-trackinfo-label {
        width: 100%;
        padding: 0 0 4px 0;
        font-size: 11px;
    }
    
    .sm-trackinfo-value {
        padding: 0;
        font-size: 13px;
    }
    
    .sm-trackinfo-actions {
        flex-direction: column;
    }
    
    .sm-trackinfo-btn {
        min-width: auto;
        width: 100%;
    }
}

/* ========================================
   LICENSE MODAL
   ======================================== */

#sm-license-modal .sm-modal-content {
    max-width: 550px;
    padding: 0;
}

.sm-license-header {
    padding: 25px 30px 20px;
    border-bottom: 1px solid var(--sm-border);
}

.sm-license-header h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--sm-text);
}

.sm-license-track-name {
    margin: 0;
    font-size: 15px;
    color: var(--sm-primary);
    font-weight: 500;
}

.sm-license-body {
    padding: 20px 30px;
    max-height: 400px;
    overflow-y: auto;
}

.sm-license-subtitle {
    margin: 0 0 15px;
    font-size: 14px;
    color: var(--sm-text-secondary);
}

.sm-license-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sm-license-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--sm-bg-dark);
    border: 1px solid var(--sm-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.sm-license-option:hover {
    border-color: var(--sm-primary);
    background: rgba(245, 197, 24, 0.05);
}

.sm-license-option.selected {
    border-color: var(--sm-primary);
    background: rgba(245, 197, 24, 0.1);
}

.sm-license-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sm-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sm-license-info {
    flex: 1;
    min-width: 0;
}

.sm-license-name {
    display: block;
    font-weight: 600;
    color: var(--sm-text);
    font-size: 14px;
    margin-bottom: 3px;
}

.sm-license-desc {
    display: block;
    font-size: 12px;
    color: var(--sm-text-secondary);
    line-height: 1.3;
}

.sm-license-price {
    text-align: right;
    flex-shrink: 0;
}

.sm-license-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--sm-primary);
}

.sm-license-contact {
    display: inline-block;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--sm-text-secondary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--sm-text-secondary);
    font-weight: 500;
}

/* Contact only option - no radio, different style */
.sm-license-option.sm-license-contact-only {
    opacity: 0.8;
    cursor: default;
}

.sm-license-option.sm-license-contact-only:hover {
    border-color: var(--sm-text-secondary);
    background: var(--sm-bg-dark);
}

.sm-license-option.sm-license-contact-only .sm-license-contact {
    cursor: pointer;
    transition: all 0.2s;
}

.sm-license-option.sm-license-contact-only .sm-license-contact:hover {
    border-color: var(--sm-primary);
    color: var(--sm-primary);
}

.sm-license-contact-info {
    margin-top: 20px;
    padding: 15px;
    background: rgba(245, 197, 24, 0.1);
    border-radius: 8px;
    text-align: center;
}

.sm-license-contact-info p {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--sm-text);
}

.sm-btn-contact {
    display: inline-block;
    padding: 10px 20px;
    background: var(--sm-primary);
    color: #000;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.sm-btn-contact:hover {
    background: #e5b700;
    color: #000;
}

.sm-license-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: var(--sm-bg-dark);
    border-top: 1px solid var(--sm-border);
}

.sm-license-total {
    font-size: 14px;
    color: var(--sm-text-secondary);
}

.sm-license-total-price {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--sm-primary);
    margin-top: 2px;
}

.sm-btn-add-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--sm-primary);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sm-btn-add-to-cart:hover:not(:disabled) {
    background: #e5b700;
    transform: translateY(-1px);
}

.sm-btn-add-to-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sm-btn-add-to-cart svg {
    width: 20px;
    height: 20px;
}

.sm-btn-add-to-cart.loading {
    pointer-events: none;
}

.sm-btn-add-to-cart.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================
   SEZIONE ABBONAMENTO NEL MODAL
   ========================================== */
.sm-subscription-section {
    padding: 0 30px 20px;
}

.sm-subscription-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: var(--sm-text-muted);
    font-size: 13px;
}

.sm-subscription-divider::before,
.sm-subscription-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sm-border);
}

.sm-subscription-divider span {
    padding: 0 15px;
}

/* Abbonamento Attivo */
.sm-subscription-active {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.sm-subscription-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.sm-subscription-badge svg {
    color: #34d399;
}

.sm-subscription-expiry {
    color: #a7f3d0;
    font-size: 13px;
    margin: 0 0 8px;
}

.sm-subscription-hint {
    color: #6ee7b7;
    font-size: 12px;
    margin: 0;
    opacity: 0.9;
}

/* Promo Abbonamento */
.sm-subscription-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s;
}

.sm-subscription-promo:hover {
    border-color: #60a5fa;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.sm-subscription-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-subscription-title {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.sm-subscription-desc {
    color: #93c5fd;
    font-size: 13px;
}

.sm-subscription-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.sm-subscription-price {
    color: #fbbf24;
    font-size: 18px;
    font-weight: 700;
}

.sm-btn-subscription {
    padding: 10px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sm-btn-subscription:hover {
    background: #2563eb;
    transform: scale(1.05);
}

.sm-btn-subscription:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive Abbonamento */
@media (max-width: 500px) {
    .sm-subscription-promo {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .sm-subscription-action {
        align-items: center;
    }
}

/* ========================================
   DASHBOARD SUBSCRIPTION CARD
   ======================================== */

.sm-dashboard-subscription .sm-subscription-card {
    border-radius: 12px;
    overflow: hidden;
}

.sm-dashboard-subscription .sm-subscription-card.sm-subscription-active {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    padding: 24px;
    text-align: left;
}

.sm-subscription-status {
    margin-bottom: 16px;
}

.sm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.sm-status-badge.sm-status-active {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}

.sm-subscription-details h3.sm-subscription-name {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
}

.sm-subscription-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.sm-subscription-meta-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
}

.sm-subscription-meta-item .sm-meta-label {
    display: block;
    color: #a7f3d0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.sm-subscription-meta-item .sm-meta-value {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.sm-subscription-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6ee7b7;
    font-size: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sm-subscription-benefit svg {
    flex-shrink: 0;
    color: #34d399;
}

/* Dashboard Subscription Promo */
.sm-dashboard-subscription .sm-subscription-promo {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.sm-subscription-promo-content h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
}

.sm-subscription-promo-content p {
    color: #93c5fd;
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.sm-subscription-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sm-subscription-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e0e7ff;
    font-size: 13px;
}

.sm-subscription-features li svg {
    color: #34d399;
    flex-shrink: 0;
}

.sm-subscription-promo-action {
    display: flex;
    justify-content: center;
}

.sm-btn-subscription-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

.sm-btn-subscription-cta:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    color: #fff;
}

/* Responsive Dashboard Subscription */
@media (max-width: 600px) {
    .sm-subscription-meta {
        grid-template-columns: 1fr;
    }
    
    .sm-dashboard-subscription .sm-subscription-card.sm-subscription-active {
        padding: 20px;
    }
}

/* Responsive License Modal */
@media (max-width: 600px) {
    #sm-license-modal .sm-modal-content {
        max-width: none;
        width: 95%;
        margin: 20px auto;
    }
    
    .sm-license-header,
    .sm-license-body,
    .sm-license-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .sm-license-option {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .sm-license-info {
        flex: 1 1 calc(100% - 40px);
    }
    
    .sm-license-price {
        flex: 1 1 100%;
        text-align: left;
        padding-left: 33px;
    }
    
    .sm-license-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .sm-btn-add-to-cart {
        width: 100%;
        justify-content: center;
    }
}
}

/* ========================================
   WOOCOMMERCE - TEMA SCURO SANTAMUSICA
   ======================================== */

/* Variabili di base già definite nel plugin */

/* ----------------------------------------
   ICONA CARRELLO HEADER
   ---------------------------------------- */
.sm-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #fff;
    transition: color 0.2s;
    text-decoration: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.sm-cart-icon:hover {
    color: var(--sm-primary, #f5c518);
}

.sm-cart-icon svg {
    width: 24px;
    height: 24px;
    stroke: #fff !important;
    fill: none;
    flex-shrink: 0;
}

.sm-cart-icon:hover svg {
    stroke: var(--sm-primary, #f5c518) !important;
}

.sm-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sm-primary, #f5c518);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    pointer-events: none;
}

.sm-cart-count:empty,
.sm-cart-count.hidden {
    display: none;
}

/* ----------------------------------------
   PAGINA CARRELLO
   ---------------------------------------- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    background: var(--sm-bg-dark, #1a1a1a);
    color: var(--sm-text, #fff);
    padding: 30px;
    border-radius: 12px;
    margin: 20px 0;
}

/* Tabella carrello */
.woocommerce table.shop_table {
    background: var(--sm-bg-card, #2a2a2a);
    border: 1px solid var(--sm-border, #333);
    border-radius: 8px;
    overflow: hidden;
}

/* Immagine prodotto nel carrello - più grande */
.woocommerce table.shop_table .product-thumbnail {
    width: 120px;
    min-width: 120px;
}

.woocommerce table.shop_table .product-thumbnail img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.woocommerce table.shop_table th {
    background: var(--sm-bg-dark, #1a1a1a);
    color: var(--sm-text, #fff);
    font-weight: 600;
    padding: 15px 12px;
    border-bottom: 1px solid var(--sm-border, #333);
}

.woocommerce table.shop_table td {
    background: var(--sm-bg-card, #2a2a2a);
    color: var(--sm-text, #fff);
    padding: 15px 12px;
    border-bottom: 1px solid var(--sm-border, #333);
}

.woocommerce table.shop_table tbody tr:hover td {
    background: rgba(245, 197, 24, 0.05);
}

/* Nome prodotto nel carrello */
.woocommerce-cart-form__cart-item .product-name a {
    color: var(--sm-primary, #f5c518) !important;
    text-decoration: none;
    font-weight: 500;
}

.woocommerce-cart-form__cart-item .product-name a:hover {
    text-decoration: underline;
}

/* Dettagli licenza nel carrello */
.woocommerce-cart-form__cart-item .product-name strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.woocommerce-cart-form__cart-item .product-name small {
    color: var(--sm-text-secondary, #888);
    font-size: 13px;
}

/* Variazioni/meta del prodotto */
.woocommerce table.shop_table .variation,
.woocommerce table.shop_table dl.variation {
    margin: 8px 0 0;
    padding: 0;
}

.woocommerce table.shop_table dl.variation dt {
    color: var(--sm-text-secondary, #888);
    font-weight: 400;
    float: left;
    clear: left;
    margin-right: 5px;
}

.woocommerce table.shop_table dl.variation dd {
    color: var(--sm-text, #fff);
    margin: 0 0 5px;
}

/* Prezzo */
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
    color: var(--sm-primary, #f5c518);
    font-weight: 600;
    font-size: 16px;
}

/* Quantità */
.woocommerce .quantity .qty {
    background: var(--sm-bg-dark, #1a1a1a);
    border: 1px solid var(--sm-border, #333);
    color: var(--sm-text, #fff);
    border-radius: 6px;
    padding: 8px 12px;
    width: 70px;
    text-align: center;
}

.woocommerce .quantity .qty:focus {
    border-color: var(--sm-primary, #f5c518);
    outline: none;
}

/* Rimuovi prodotto */
.woocommerce a.remove {
    color: #ff4444 !important;
    font-size: 20px;
    font-weight: 700;
    background: rgba(255, 68, 68, 0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    display: inline-block;
}

.woocommerce a.remove:hover {
    background: #ff4444;
    color: #fff !important;
}

/* Coupon */
.woocommerce .coupon {
    display: flex;
    gap: 10px;
    align-items: center;
}

.woocommerce .coupon #coupon_code {
    background: var(--sm-bg-dark, #1a1a1a);
    border: 1px solid var(--sm-border, #333);
    color: var(--sm-text, #fff);
    border-radius: 6px;
    padding: 12px 15px;
    flex: 1;
    max-width: 200px;
}

.woocommerce .coupon #coupon_code:focus {
    border-color: var(--sm-primary, #f5c518);
    outline: none;
}

.woocommerce .coupon #coupon_code::placeholder {
    color: var(--sm-text-secondary, #888);
}

/* Bottoni WooCommerce */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .cart .button,
.woocommerce .checkout-button {
    background: var(--sm-primary, #f5c518) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all 0.2s !important;
    text-transform: none !important;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .cart .button:hover,
.woocommerce .checkout-button:hover {
    background: #e6b800 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 197, 24, 0.3);
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
    background: var(--sm-border, #333) !important;
    color: var(--sm-text-secondary, #888) !important;
    cursor: not-allowed;
}

/* Bottone aggiorna carrello */
.woocommerce button[name="update_cart"] {
    background: var(--sm-bg-card, #2a2a2a) !important;
    color: var(--sm-text, #fff) !important;
    border: 1px solid var(--sm-border, #333) !important;
}

.woocommerce button[name="update_cart"]:hover {
    border-color: var(--sm-primary, #f5c518) !important;
    background: var(--sm-bg-dark, #1a1a1a) !important;
}

/* Totali carrello */
.woocommerce .cart_totals,
.woocommerce .cart-collaterals {
    background: var(--sm-bg-card, #2a2a2a);
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
}

.woocommerce .cart_totals h2 {
    color: var(--sm-text, #fff);
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sm-border, #333);
}

.woocommerce .cart_totals table {
    background: transparent;
    border: none;
}

.woocommerce .cart_totals th,
.woocommerce .cart_totals td {
    background: transparent;
    color: var(--sm-text, #fff);
    padding: 12px 0;
    border-bottom: 1px solid var(--sm-border, #333);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
    font-size: 18px;
    font-weight: 700;
    border-bottom: none;
    padding-top: 20px;
}

.woocommerce .cart_totals .order-total .amount {
    color: var(--sm-primary, #f5c518);
    font-size: 24px;
}

/* ----------------------------------------
   PAGINA CHECKOUT
   ---------------------------------------- */
.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 30px auto;
}

/* Form checkout */
.woocommerce form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    background: var(--sm-bg-card, #2a2a2a);
    padding: 25px;
    border-radius: 12px;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    color: var(--sm-text, #fff);
    font-size: 18px;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sm-border, #333);
}

/* Campi form */
.woocommerce form .form-row {
    margin-bottom: 15px;
}

.woocommerce form .form-row label {
    color: var(--sm-text, #fff);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.woocommerce form .form-row label .required {
    color: var(--sm-primary, #f5c518);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout #customer_details input,
.woocommerce-checkout #customer_details textarea,
.woocommerce-checkout #customer_details select {
    background: var(--sm-bg-dark, #1a1a1a) !important;
    border: 1px solid var(--sm-border, #333) !important;
    color: var(--sm-text, #fff) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    width: 100%;
    font-size: 14px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--sm-primary, #f5c518) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.2) !important;
}

.woocommerce form .form-row input::placeholder,
.woocommerce form .form-row textarea::placeholder {
    color: var(--sm-text-secondary, #888);
}

/* Select2 (dropdown paesi/province) */
.woocommerce .select2-container--default .select2-selection--single {
    background: var(--sm-bg-dark, #1a1a1a) !important;
    border: 1px solid var(--sm-border, #333) !important;
    border-radius: 8px !important;
    height: 46px !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--sm-text, #fff) !important;
    line-height: 44px !important;
    padding-left: 15px !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
}

.select2-dropdown {
    background: var(--sm-bg-card, #2a2a2a) !important;
    border: 1px solid var(--sm-border, #333) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--sm-bg-dark, #1a1a1a) !important;
    border: 1px solid var(--sm-border, #333) !important;
    color: var(--sm-text, #fff) !important;
}

.select2-container--default .select2-results__option {
    color: var(--sm-text, #fff) !important;
    padding: 10px 15px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option:hover {
    background: var(--sm-primary, #f5c518) !important;
    color: #000 !important;
}

/* Order Review (riepilogo ordine) */
#order_review_heading {
    color: var(--sm-text, #fff);
    font-size: 20px;
    margin: 30px 0 20px;
}

.woocommerce-checkout-review-order {
    background: var(--sm-bg-card, #2a2a2a);
    padding: 25px;
    border-radius: 12px;
}

.woocommerce-checkout-review-order-table {
    margin-bottom: 20px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--sm-border, #333);
}

.woocommerce-checkout-review-order-table .cart_item .product-name {
    color: var(--sm-text, #fff);
}

.woocommerce-checkout-review-order-table .cart_item .product-total {
    color: var(--sm-primary, #f5c518);
    font-weight: 600;
}

/* Metodi pagamento */
.woocommerce-checkout-payment {
    background: var(--sm-bg-dark, #1a1a1a);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.woocommerce-checkout-payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.woocommerce-checkout-payment ul.payment_methods li {
    background: var(--sm-bg-card, #2a2a2a);
    border: 1px solid var(--sm-border, #333);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
}

.woocommerce-checkout-payment ul.payment_methods li label {
    color: var(--sm-text, #fff);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.woocommerce-checkout-payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--sm-primary, #f5c518);
}

.woocommerce-checkout-payment ul.payment_methods li .payment_box {
    color: var(--sm-text-secondary, #888);
    font-size: 13px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sm-border, #333);
}

/* Termini e condizioni */
.woocommerce-terms-and-conditions-wrapper {
    margin: 20px 0;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label {
    color: var(--sm-text, #fff);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    accent-color: var(--sm-primary, #f5c518);
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.woocommerce-terms-and-conditions-wrapper a {
    color: var(--sm-primary, #f5c518);
}

/* Bottone place order */
#place_order {
    width: 100%;
    font-size: 16px !important;
    padding: 15px 30px !important;
    margin-top: 20px;
}

/* ----------------------------------------
   PAGINA THANK YOU / ORDER RECEIVED
   ---------------------------------------- */
.woocommerce-order-received .woocommerce {
    max-width: 800px;
    margin: 30px auto;
}

.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-thankyou-order-received {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    color: #22c55e;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    font-size: 18px;
    text-align: center;
}

.woocommerce-order-overview {
    background: var(--sm-bg-card, #2a2a2a);
    padding: 25px;
    border-radius: 12px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.woocommerce-order-overview li {
    flex: 1 1 200px;
    padding: 15px;
    background: var(--sm-bg-dark, #1a1a1a);
    border-radius: 8px;
}

.woocommerce-order-overview li strong {
    display: block;
    color: var(--sm-text-secondary, #888);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 400;
}

.woocommerce-order-overview li:not(:last-child)::after {
    display: none;
}

.woocommerce-order-details,
.woocommerce-customer-details {
    background: var(--sm-bg-card, #2a2a2a);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    color: var(--sm-text, #fff);
    font-size: 18px;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sm-border, #333);
}

/* ----------------------------------------
   MESSAGGI E AVVISI
   ---------------------------------------- */
.woocommerce-message,
.woocommerce-info {
    background: rgba(245, 197, 24, 0.1);
    border-left: 4px solid var(--sm-primary, #f5c518);
    color: var(--sm-text, #fff);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--sm-primary, #f5c518);
    font-weight: 600;
}

.woocommerce-error {
    background: rgba(255, 68, 68, 0.1);
    border-left: 4px solid #ff4444;
    color: var(--sm-text, #fff);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
    list-style: none;
}

.woocommerce-error li {
    margin: 5px 0;
}

/* ----------------------------------------
   CARRELLO VUOTO
   ---------------------------------------- */
.woocommerce-cart .cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sm-text-secondary, #888);
    font-size: 18px;
}

.woocommerce-cart .cart-empty::before {
    content: "🛒";
    display: block;
    font-size: 60px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.woocommerce-cart .return-to-shop .button {
    margin-top: 20px;
}

/* ----------------------------------------
   RESPONSIVE WOOCOMMERCE
   ---------------------------------------- */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce {
        padding: 15px;
        margin: 10px 0;
    }
    
    .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
    }
    
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    .woocommerce .coupon {
        flex-direction: column;
        width: 100%;
    }
    
    .woocommerce .coupon #coupon_code {
        max-width: 100%;
    }
    
    .woocommerce form.checkout {
        flex-direction: column;
    }
    
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-checkout-review-order {
        padding: 15px;
    }
    
    .woocommerce-order-overview {
        flex-direction: column;
    }
}

/* ----------------------------------------
   FORM LOGIN/REGISTRAZIONE
   ---------------------------------------- */

/* Form di login e registrazione WordPress */
.login form,
.register form,
#loginform,
#registerform,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce form.login,
.woocommerce form.register {
    background: #1a1a1a;
}

/* Input fields - testo bianco leggibile */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.register input[type="text"],
.register input[type="password"],
.register input[type="email"],
#loginform input[type="text"],
#loginform input[type="password"],
#registerform input[type="text"],
#registerform input[type="email"],
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"],
.woocommerce form.login input[type="text"],
.woocommerce form.login input[type="password"],
.woocommerce form.login input[type="email"],
.woocommerce form.register input[type="text"],
.woocommerce form.register input[type="password"],
.woocommerce form.register input[type="email"],
.woocommerce-Input,
.woocommerce input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="password"],
.woocommerce input[type="email"] {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    caret-color: #ffffff;
}

/* Placeholder più chiaro */
.login input::placeholder,
.register input::placeholder,
#loginform input::placeholder,
#registerform input::placeholder,
.woocommerce-form-login input::placeholder,
.woocommerce-form-register input::placeholder,
.woocommerce input::placeholder {
    color: #888 !important;
    opacity: 1;
}

/* Focus state */
.login input:focus,
.register input:focus,
#loginform input:focus,
#registerform input:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus,
.woocommerce input:focus {
    color: #ffffff !important;
    background-color: #333 !important;
    border-color: #f0c14b !important;
    outline: none;
}

/* Label */
.login label,
.register label,
#loginform label,
#registerform label,
.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce form label {
    color: #ffffff !important;
}

/* Autofill fix per browser */
.login input:-webkit-autofill,
.register input:-webkit-autofill,
.woocommerce input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
    box-shadow: 0 0 0 1000px #2a2a2a inset !important;
    border: 1px solid #444 !important;
}

/* My Account page */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content textarea,
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields select {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
}

/* Select dropdown */
.woocommerce select,
.woocommerce-form-register select,
.woocommerce-address-fields select {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
}

/* ----------------------------------------
   FORM REGISTRAZIONE PERSONALIZZATO
   /registrati/
   ---------------------------------------- */

/* Fix testo durante la digitazione */
input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
    color: #ffffff !important;
}

/* Stato focus - mentre si digita */
input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Form Divi/Elegant Themes */
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select,
.et_pb_module input,
.et_pb_module textarea,
.et_pb_signup input,
.et_pb_signup textarea {
    color: #ffffff !important;
}

.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus,
.et_pb_contact_form select:focus,
.et_pb_module input:focus,
.et_pb_module textarea:focus,
.et_pb_signup input:focus,
.et_pb_signup textarea:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Contact Form 7 */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
    color: #ffffff !important;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Gravity Forms */
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select {
    color: #ffffff !important;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* WPForms */
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select {
    color: #ffffff !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Ninja Forms */
.nf-form-content input,
.nf-form-content textarea,
.nf-form-content select {
    color: #ffffff !important;
}

.nf-form-content input:focus,
.nf-form-content textarea:focus,
.nf-form-content select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Elementor Forms */
.elementor-form input,
.elementor-form textarea,
.elementor-form select {
    color: #ffffff !important;
}

.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Generic form override - highest specificity */
body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body textarea,
body select {
    color: #ffffff !important;
}

body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
body textarea:focus,
body select:focus {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* ==========================================
   THEME TOGGLE SWITCH
   ========================================== */

.sm-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.sm-dashboard-header-left {
    flex: 1;
}

.sm-theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    border: 1px solid var(--sm-border);
}

.sm-theme-label {
    font-size: 13px;
    color: var(--sm-text-secondary);
    white-space: nowrap;
}

.sm-theme-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
    cursor: pointer;
}

.sm-theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sm-theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sm-bg-hover);
    border-radius: 32px;
    transition: all 0.3s ease;
    border: 2px solid var(--sm-border);
    overflow: hidden;
}

.sm-theme-toggle-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background: var(--sm-primary);
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 2;
}

.sm-theme-toggle input:checked + .sm-theme-toggle-slider {
    background: #87CEEB;
    border-color: #5eb3d4;
}

.sm-theme-toggle input:checked + .sm-theme-toggle-slider:before {
    transform: translateX(28px);
    background: #FFD700;
}

.sm-theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.sm-theme-icon-dark {
    left: 8px;
    opacity: 1;
}

.sm-theme-icon-light {
    right: 8px;
    opacity: 0.5;
}

.sm-theme-toggle input:checked + .sm-theme-toggle-slider .sm-theme-icon-dark {
    opacity: 0.5;
}

.sm-theme-toggle input:checked + .sm-theme-toggle-slider .sm-theme-icon-light {
    opacity: 1;
}

/* Light Mode - Toggle adjustments */
body.light-mode .sm-theme-toggle-slider {
    background: #e0e0e0;
}

body.light-mode .sm-theme-toggle-wrapper {
    background: var(--sm-bg-card);
    border-color: var(--sm-border);
}

/* Responsive */
@media (max-width: 768px) {
    .sm-dashboard-header {
        flex-direction: column;
    }
    
    .sm-theme-toggle-wrapper {
        align-self: flex-start;
    }
}

/* ==========================================
   LIGHT MODE - DIVI HEADER & FOOTER
   ========================================== */

/* Header DIVI */
body.light-mode #main-header,
body.light-mode .et-l--header,
body.light-mode .et_pb_menu,
body.light-mode .et_pb_fullwidth_header,
body.light-mode header.et_pb_section,
body.light-mode .et_pb_section.et_pb_section--with-header,
body.light-mode #et-top-navigation,
body.light-mode .et_pb_row.et_pb_row--with-menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Menu links */
body.light-mode #main-header a,
body.light-mode .et-l--header a,
body.light-mode .et_pb_menu a,
body.light-mode .et_pb_menu__menu a,
body.light-mode #et-top-navigation a,
body.light-mode .et_pb_menu_inner a,
body.light-mode .et_pb_menu nav > ul > li > a,
body.light-mode .et-menu-nav a,
body.light-mode .et-menu a {
    color: #1a1a1a !important;
}

body.light-mode #main-header a:hover,
body.light-mode .et-l--header a:hover,
body.light-mode .et_pb_menu a:hover,
body.light-mode .et_pb_menu__menu a:hover {
    color: #d77792 !important;
}

/* Menu dropdown */
body.light-mode .et_pb_menu ul.sub-menu,
body.light-mode .et_pb_menu .sub-menu,
body.light-mode .nav li ul,
body.light-mode #top-menu li ul {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

body.light-mode .et_pb_menu ul.sub-menu a,
body.light-mode .et_pb_menu .sub-menu a {
    color: #1a1a1a !important;
}

body.light-mode .et_pb_menu ul.sub-menu a:hover,
body.light-mode .et_pb_menu .sub-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #d77792 !important;
}

/* Mobile menu */
body.light-mode .et_mobile_menu,
body.light-mode .et_pb_mobile_menu,
body.light-mode #mobile_menu {
    background-color: #ffffff !important;
}

body.light-mode .et_mobile_menu a,
body.light-mode .et_pb_mobile_menu a,
body.light-mode #mobile_menu a {
    color: #1a1a1a !important;
    border-color: #e0e0e0 !important;
}

/* Hamburger icon */
body.light-mode .mobile_menu_bar:before,
body.light-mode .et_pb_menu__icon {
    color: #1a1a1a !important;
}

/* Footer DIVI */
body.light-mode #main-footer,
body.light-mode .et-l--footer,
body.light-mode .et_pb_section.et_pb_section--footer,
body.light-mode footer.et_pb_section,
body.light-mode #footer-bottom,
body.light-mode .et_pb_row.et_pb_row--footer,
body.light-mode footer#footer-info {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.light-mode #main-footer,
body.light-mode .et-l--footer,
body.light-mode footer.et_pb_section {
    border-top: 1px solid #e0e0e0 !important;
}

/* Footer text */
body.light-mode #main-footer *,
body.light-mode .et-l--footer *,
body.light-mode footer.et_pb_section *,
body.light-mode .et_pb_section.et_pb_section--footer * {
    color: #1a1a1a !important;
}

body.light-mode #main-footer a,
body.light-mode .et-l--footer a,
body.light-mode footer.et_pb_section a {
    color: #555555 !important;
}

body.light-mode #main-footer a:hover,
body.light-mode .et-l--footer a:hover,
body.light-mode footer.et_pb_section a:hover {
    color: #d77792 !important;
}

/* Footer widgets */
body.light-mode .et_pb_widget,
body.light-mode .footer-widget {
    color: #1a1a1a !important;
}

body.light-mode .et_pb_widget a,
body.light-mode .footer-widget a {
    color: #555555 !important;
}

/* ==========================================
   LIGHT MODE - HEADER AUTH SHORTCODE
   ========================================== */

body.light-mode .sm-header-auth .sm-user-welcome {
    color: #666666 !important;
}

body.light-mode .sm-header-auth .sm-btn-outline {
    border-color: #d77792 !important;
    color: #d77792 !important;
    background: transparent !important;
}

body.light-mode .sm-header-auth .sm-btn-outline:hover {
    background: #d77792 !important;
    color: #ffffff !important;
}

body.light-mode .sm-header-auth .sm-btn-primary {
    background: #d77792 !important;
    color: #ffffff !important;
    border-color: #d77792 !important;
}

body.light-mode .sm-header-auth .sm-btn-primary:hover {
    background: #d77792 !important;
    border-color: #d77792 !important;
}

body.light-mode .sm-header-auth .sm-btn-secondary {
    border-color: #cccccc !important;
    color: #666666 !important;
}

body.light-mode .sm-header-auth .sm-btn-secondary:hover {
    border-color: #999999 !important;
    color: #1a1a1a !important;
}

/* ==========================================
   LIGHT MODE - GENERAL DIVI ELEMENTS
   ========================================== */

/* Sezioni DIVI generiche con sfondo scuro */
body.light-mode .et_pb_section[style*="background-color: #000"],
body.light-mode .et_pb_section[style*="background-color:#000"],
body.light-mode .et_pb_section[style*="background: #000"],
body.light-mode .et_pb_section.et_pb_bg_layout_dark {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.light-mode .et_pb_section.et_pb_bg_layout_dark *,
body.light-mode .et_pb_section.et_pb_bg_layout_dark h1,
body.light-mode .et_pb_section.et_pb_bg_layout_dark h2,
body.light-mode .et_pb_section.et_pb_bg_layout_dark h3,
body.light-mode .et_pb_section.et_pb_bg_layout_dark h4,
body.light-mode .et_pb_section.et_pb_bg_layout_dark p {
    color: #1a1a1a !important;
}

/* Righe DIVI con sfondo scuro */
body.light-mode .et_pb_row[style*="background-color: #000"],
body.light-mode .et_pb_row[style*="background:#000"] {
    background-color: #ffffff !important;
}

/* Text modules */
body.light-mode .et_pb_text,
body.light-mode .et_pb_text p,
body.light-mode .et_pb_text h1,
body.light-mode .et_pb_text h2,
body.light-mode .et_pb_text h3,
body.light-mode .et_pb_text h4 {
    color: inherit;
}

/* Buttons DIVI */
body.light-mode .et_pb_button {
    color: #d77792 !important;
    border-color: #d77792 !important;
}

body.light-mode .et_pb_button:hover {
    background-color: #d77792 !important;
    color: #ffffff !important;
}

/* ==========================================
   LIGHT MODE - SIDEBAR FLYOUT MENU
   ========================================== */

/* Flyout Panel principale */
body.light-mode .sm-flyout-panel,
body.light-mode .sm-flyout-content,
body.light-mode .sm-sidebar-submenu {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

/* Header del flyout */
body.light-mode .sm-flyout-header {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

body.light-mode .sm-flyout-title {
    color: #d77792 !important;
}

/* Bottone chiudi */
body.light-mode .sm-flyout-close {
    color: #666666 !important;
}

body.light-mode .sm-flyout-close:hover {
    color: #1a1a1a !important;
    background: #e0e0e0 !important;
}

/* Body del flyout */
body.light-mode .sm-flyout-body {
    background: #ffffff !important;
}

/* Scrollbar flyout */
body.light-mode .sm-flyout-body::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
}

body.light-mode .sm-flyout-body::-webkit-scrollbar-thumb {
    background: #cccccc !important;
}

body.light-mode .sm-flyout-body::-webkit-scrollbar-thumb:hover {
    background: #999999 !important;
}

/* Items nel flyout */
body.light-mode .sm-flyout-body .sm-sidebar-submenu-item,
body.light-mode .sm-sidebar-submenu-item {
    color: #1a1a1a !important;
    background: transparent !important;
}

body.light-mode .sm-flyout-body .sm-sidebar-submenu-item:hover,
body.light-mode .sm-sidebar-submenu-item:hover {
    background: #f0f0f0 !important;
    color: #d77792 !important;
}

body.light-mode .sm-flyout-body .sm-sidebar-submenu-item.active,
body.light-mode .sm-sidebar-submenu-item.active {
    background: rgba(212, 168, 15, 0.1) !important;
    color: #d77792 !important;
}

/* Testo negli items */
body.light-mode .sm-flyout-body .sm-sidebar-submenu-item *,
body.light-mode .sm-flyout-body .sm-term-name,
body.light-mode .sm-sidebar-submenu-item .sm-term-name {
    color: inherit !important;
}

/* Freccia espansione */
body.light-mode .sm-flyout-body .sm-expand-arrow,
body.light-mode .sm-sidebar-submenu-item .sm-expand-arrow {
    color: #888888 !important;
}

body.light-mode .sm-flyout-body .sm-sidebar-submenu-item:hover .sm-expand-arrow,
body.light-mode .sm-sidebar-submenu-item:hover .sm-expand-arrow {
    color: #d77792 !important;
}

/* Children/sotto-sotto menu */
body.light-mode .sm-flyout-body .sm-sidebar-children,
body.light-mode .sm-sidebar-children {
    background: #fafafa !important;
    border-left: 2px solid #e0e0e0 !important;
}

body.light-mode .sm-flyout-body .sm-sidebar-children .sm-sidebar-submenu-item,
body.light-mode .sm-sidebar-children .sm-sidebar-submenu-item {
    color: #555555 !important;
}

body.light-mode .sm-flyout-body .sm-sidebar-children .sm-sidebar-submenu-item:hover,
body.light-mode .sm-sidebar-children .sm-sidebar-submenu-item:hover {
    color: #d77792 !important;
    background: #f0f0f0 !important;
}

/* ==========================================
   LIGHT MODE - SIDEBAR PRINCIPALE
   ========================================== */

body.light-mode .sm-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e0e0e0 !important;
}

body.light-mode .sm-sidebar-item,
body.light-mode .sm-sidebar-section-title {
    color: #1a1a1a !important;
}

body.light-mode .sm-sidebar-item:hover {
    background: #f5f5f5 !important;
    color: #d77792 !important;
}

body.light-mode .sm-sidebar-item.active,
body.light-mode .sm-sidebar-item.open {
    color: #d77792 !important;
    background: rgba(212, 168, 15, 0.08) !important;
}

body.light-mode .sm-sidebar-icon,
body.light-mode .sm-sidebar-item svg {
    color: #666666 !important;
}

body.light-mode .sm-sidebar-item:hover .sm-sidebar-icon,
body.light-mode .sm-sidebar-item:hover svg,
body.light-mode .sm-sidebar-item.active .sm-sidebar-icon,
body.light-mode .sm-sidebar-item.active svg {
    color: #d77792 !important;
}

/* Divisore sidebar */
body.light-mode .sm-sidebar-divider {
    border-color: #e0e0e0 !important;
}

/* Preferiti badge */
body.light-mode .sm-favorites-badge {
    background: #d77792 !important;
    color: #ffffff !important;
}

/* ==========================================
   LIGHT MODE - TITOLI E TESTI PAGINE
   ========================================== */

/* Titoli pagine (Catalogo Album, Playlist, etc.) */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode .entry-title,
body.light-mode .page-title,
body.light-mode .et_pb_text h1,
body.light-mode .et_pb_text h2,
body.light-mode .et_pb_text h3,
body.light-mode .et_pb_module_header {
    color: #1a1a1a !important;
}

/* Giallo più scuro per titoli che devono essere gialli */
body.light-mode .sm-section-title,
body.light-mode .sm-page-title.yellow,
body.light-mode .sm-highlight {
    color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - MENU HEADER LINKS
   ========================================== */

/* Link attivo/hover nel menu - giallo più scuro */
body.light-mode #main-header a:hover,
body.light-mode .et-l--header a:hover,
body.light-mode .et_pb_menu a:hover,
body.light-mode .et_pb_menu__menu a:hover,
body.light-mode .et_pb_menu .menu-item-has-children > a:hover,
body.light-mode .et-menu a:hover,
body.light-mode nav a:hover,
body.light-mode .et_pb_menu .current-menu-item > a,
body.light-mode .et_pb_menu .current_page_item > a {
    color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - SELECT / DROPDOWN
   ========================================== */

/* Select e dropdown */
body.light-mode select,
body.light-mode .sm-select,
body.light-mode .sm-sort-select,
body.light-mode .sm-filter-select,
body.light-mode [class*="sort"] select,
body.light-mode [class*="order"] select {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
}

body.light-mode select option,
body.light-mode .sm-select option {
    color: #1a1a1a !important;
    background: #ffffff !important;
}

/* Label "Ordina per" etc */
body.light-mode label,
body.light-mode .sm-sort-label,
body.light-mode .sm-filter-label,
body.light-mode [class*="sort"] label,
body.light-mode [class*="order"] label {
    color: #555555 !important;
}

/* ==========================================
   LIGHT MODE - FILTRI ALFABETICI
   ========================================== */

body.light-mode .sm-alpha-filter button,
body.light-mode .sm-alpha-btn,
body.light-mode .alpha-filter button,
body.light-mode [class*="alpha"] button {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
}

body.light-mode .sm-alpha-filter button:hover,
body.light-mode .sm-alpha-btn:hover,
body.light-mode .alpha-filter button:hover {
    background: #f0f0f0 !important;
    color: #d77792 !important;
    border-color: #d77792 !important;
}

body.light-mode .sm-alpha-filter button.active,
body.light-mode .sm-alpha-btn.active,
body.light-mode .alpha-filter button.active {
    background: #d77792 !important;
    color: #ffffff !important;
    border-color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - TABS E NAVIGAZIONE
   ========================================== */

body.light-mode .sm-tabs a,
body.light-mode .sm-nav-tabs a,
body.light-mode .et_pb_tabs_controls li a {
    color: #555555 !important;
}

body.light-mode .sm-tabs a:hover,
body.light-mode .sm-nav-tabs a:hover,
body.light-mode .et_pb_tabs_controls li a:hover {
    color: #d77792 !important;
}

body.light-mode .sm-tabs a.active,
body.light-mode .sm-nav-tabs a.active,
body.light-mode .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #d77792 !important;
    border-color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - CARD E BOX
   ========================================== */

body.light-mode .sm-card,
body.light-mode .sm-box,
body.light-mode .et_pb_blurb,
body.light-mode .et_pb_team_member {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

/* ==========================================
   LIGHT MODE - TESTI GENERICI
   ========================================== */

body.light-mode p,
body.light-mode span,
body.light-mode div,
body.light-mode li {
    color: inherit;
}

/* Testo che era bianco diventa scuro */
body.light-mode [style*="color: #fff"],
body.light-mode [style*="color:#fff"],
body.light-mode [style*="color: white"],
body.light-mode [style*="color:white"],
body.light-mode .text-white {
    color: #1a1a1a !important;
}

/* Primary color più scuro in Light Mode */
body.light-mode .text-primary,
body.light-mode .sm-primary,
body.light-mode [class*="primary"] {
    color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - BARRA NERA SOTTO HEADER
   ========================================== */

/* Se c'è una barra nera decorativa */
body.light-mode .et_pb_section[style*="background-color: #000"],
body.light-mode .et_pb_section[style*="background:#000"],
body.light-mode .et_pb_row[style*="background-color: #000"],
body.light-mode .et_pb_row[style*="background:#000"] {
    background-color: #d77792 !important;
    background: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - FIX MENU DIVI GIALLO
   ========================================== */

/* Menu principale DIVI - giallo più scuro */
body.light-mode .et_pb_menu a[style*="color"],
body.light-mode .et_pb_menu .current-menu-item > a,
body.light-mode .et_pb_menu .current_page_item > a,
body.light-mode .et_pb_menu li.current-menu-item > a,
body.light-mode .et_pb_menu li.current_page_item > a,
body.light-mode .et-menu .current-menu-item > a,
body.light-mode .et-menu .current_page_item > a,
body.light-mode nav .current-menu-item > a,
body.light-mode nav .current_page_item > a,
body.light-mode .menu-item.current-menu-item > a,
body.light-mode .menu-item.current_page_item > a,
body.light-mode #top-menu .current-menu-item > a,
body.light-mode #top-menu .current_page_item > a,
body.light-mode .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
body.light-mode .et_pb_menu__menu > nav > ul > li.current_page_item > a {
    color: #d77792 !important;
}

/* Tutti i link gialli nel menu */
body.light-mode .et_pb_menu a[style*="#f5c518"],
body.light-mode .et_pb_menu a[style*="#F5C518"],
body.light-mode .et_pb_menu a[style*="f5c518"],
body.light-mode a[style*="color: rgb(245, 197, 24)"],
body.light-mode a[style*="color:rgb(245,197,24)"] {
    color: #d77792 !important;
}

/* Override più aggressivo per menu attivo */
body.light-mode .et_pb_row a[style*="color"],
body.light-mode header a[style*="color"],
body.light-mode .et-l--header a[style*="color"] {
    color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - FIX SELECT DROPDOWN TEXT
   ========================================== */

/* Select con massima specificità */
body.light-mode select,
body.light-mode select *,
body.light-mode select option,
body.light-mode .et_pb_contact_select,
body.light-mode .input-select,
body.light-mode select.orderby,
body.light-mode select.sorting,
body.light-mode select[name*="order"],
body.light-mode select[name*="sort"],
body.light-mode select[class*="order"],
body.light-mode select[class*="sort"],
body.light-mode .woocommerce-ordering select,
body.light-mode .orderby {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

/* Select in qualsiasi form */
body.light-mode form select,
body.light-mode .et_pb_module select,
body.light-mode .et_pb_row select,
body.light-mode div select {
    color: #1a1a1a !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

/* Forza colore testo in tutti gli option */
body.light-mode option,
body.light-mode select option {
    color: #1a1a1a !important;
    background: #ffffff !important;
}

/* Select focus */
body.light-mode select:focus,
body.light-mode select:active {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

/* ==========================================
   LIGHT MODE - FIX MENU DIVI GIALLO
   ========================================== */

/* Menu principale DIVI - link gialli più scuri */
body.light-mode .et_pb_menu a[style*="color"],
body.light-mode .et_pb_menu .menu-item a,
body.light-mode .et_pb_menu__menu > .menu-item > a,
body.light-mode .et-menu > li > a,
body.light-mode #top-menu > li > a,
body.light-mode .et_pb_menu nav > ul > li > a,
body.light-mode header a[style*="#f5c518"],
body.light-mode header a[style*="#F5C518"],
body.light-mode header a[style*="f5c518"],
body.light-mode .et-l--header .menu-item a {
    color: #1a1a1a !important;
}

/* Link attivi/correnti nel menu - giallo molto più scuro */
body.light-mode .et_pb_menu .current-menu-item > a,
body.light-mode .et_pb_menu .current_page_item > a,
body.light-mode .et_pb_menu .current-menu-ancestor > a,
body.light-mode #top-menu .current-menu-item > a,
body.light-mode #top-menu .current_page_item > a,
body.light-mode .et-menu .current-menu-item > a,
body.light-mode nav .current-menu-item > a,
body.light-mode header .menu-item.current-menu-item > a,
body.light-mode header .menu-item.current_page_item > a {
    color: #d77792 !important;
}

/* Hover su menu - giallo molto scuro */
body.light-mode .et_pb_menu a:hover,
body.light-mode .et_pb_menu .menu-item a:hover,
body.light-mode .et-menu > li > a:hover,
body.light-mode #top-menu > li > a:hover,
body.light-mode header .menu-item a:hover,
body.light-mode .et-l--header .menu-item a:hover {
    color: #d77792 !important;
}

/* ==========================================
   LIGHT MODE - FIX SELECT ORDINA PER
   ========================================== */

/* Select con testo visibile - più specifico */
body.light-mode select,
body.light-mode select.orderby,
body.light-mode .woocommerce-ordering select,
body.light-mode .orderby,
body.light-mode #orderby,
body.light-mode [name="orderby"],
body.light-mode .sm-sort select,
body.light-mode .sort-select,
body.light-mode .et_pb_module select,
body.light-mode form select,
body.light-mode .sorting select,
body.light-mode select[name*="order"],
body.light-mode select[name*="sort"],
body.light-mode select[id*="order"],
body.light-mode select[id*="sort"] {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}

/* Opzioni dentro il select */
body.light-mode select option,
body.light-mode select.orderby option,
body.light-mode .woocommerce-ordering select option {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* Placeholder/valore selezionato nel select */
body.light-mode select:not(:focus),
body.light-mode select.orderby:not(:focus) {
    color: #1a1a1a !important;
}

/* Override per eventuali stili inline */
body.light-mode select[style*="color"],
body.light-mode select[style*="background"] {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* ==========================================
   LIGHT MODE - HEADER AUTH BUTTONS FIX
   ========================================== */

/* Bottone Dashboard - giallo più scuro */
body.light-mode .sm-header-auth .sm-btn-outline,
body.light-mode .sm-header-btn.sm-btn-outline {
    border-color: #d77792 !important;
    color: #d77792 !important;
}

body.light-mode .sm-header-auth .sm-btn-outline:hover,
body.light-mode .sm-header-btn.sm-btn-outline:hover {
    background: #d77792 !important;
    color: #ffffff !important;
}

/* Testo "Ciao, Nome" più scuro */
body.light-mode .sm-user-welcome,
body.light-mode .sm-header-auth .sm-user-welcome {
    color: #555555 !important;
}

/* ==========================================
   LIGHT MODE - FOOTER FIX AGGRESSIVO
   ========================================== */

/* Footer DIVI - tutti i possibili selettori */
body.light-mode footer,
body.light-mode #footer,
body.light-mode .footer,
body.light-mode #main-footer,
body.light-mode .et-l--footer,
body.light-mode .et_pb_section.et_pb_section--footer,
body.light-mode footer.et_pb_section,
body.light-mode #footer-bottom,
body.light-mode .et_pb_row.et_pb_row--footer,
body.light-mode footer#footer-info,
body.light-mode #et-footer-nav,
body.light-mode .footer-area,
body.light-mode .site-footer,
body.light-mode #colophon,
body.light-mode .et_pb_bottom_inside_divider,
body.light-mode footer .et_pb_section,
body.light-mode footer .et_pb_row,
body.light-mode footer .et_pb_column,
body.light-mode footer .et_pb_module {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Footer con sfondo nero inline */
body.light-mode footer[style*="background"],
body.light-mode footer .et_pb_section[style*="background"],
body.light-mode footer .et_pb_row[style*="background"],
body.light-mode [class*="footer"][style*="background"],
body.light-mode .et-l--footer [style*="background"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Tutto il testo nel footer */
body.light-mode footer *,
body.light-mode #footer *,
body.light-mode .footer *,
body.light-mode #main-footer *,
body.light-mode .et-l--footer *,
body.light-mode .site-footer *,
body.light-mode #colophon * {
    color: #1a1a1a !important;
}

/* Link nel footer */
body.light-mode footer a,
body.light-mode #footer a,
body.light-mode .footer a,
body.light-mode #main-footer a,
body.light-mode .et-l--footer a,
body.light-mode .site-footer a {
    color: #d77792 !important;
}

body.light-mode footer a:hover,
body.light-mode #footer a:hover,
body.light-mode #main-footer a:hover,
body.light-mode .et-l--footer a:hover {
    color: #c46680 !important;
}

/* Logo nel footer - mantieni visibile su sfondo bianco */
body.light-mode footer img,
body.light-mode #footer img,
body.light-mode .et-l--footer img {
    /* Il logo potrebbe aver bisogno di essere cambiato se è bianco su nero */
}

/* ==========================================
   LIGHT MODE - FIX CHIAVE DI VIOLINO
   ========================================== */

/* Chiave di violino - inverti colore in Light Mode */
body.light-mode .sm-icon-classica,
body.light-mode img[src*="chiave-violino"],
body.light-mode img[alt*="Classica"] {
    filter: invert(1) brightness(0.3);
}

/* ==========================================
   FUGA IMPORTER - Dashboard Section
   ========================================== */

.sm-dashboard-fuga .sm-fuga-import-section {
    padding: 0;
}

.sm-dashboard-fuga .sm-fuga-import-section h3 {
    display: none; /* Già mostrato nell'header della sezione */
}

.sm-fuga-status-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.sm-fuga-stat {
    background: var(--sm-bg-hover, #333);
    border-radius: 8px;
    padding: 15px 25px;
    text-align: center;
    min-width: 100px;
}

.sm-fuga-stat-number {
    display: block;
    font-size: 2em;
    font-weight: 700;
    color: var(--sm-primary, #f5c518);
}

.sm-fuga-stat-label {
    display: block;
    font-size: 0.85em;
    color: var(--sm-text-secondary, #aaa);
    margin-top: 5px;
}

.sm-fuga-last-import {
    color: var(--sm-text-secondary, #aaa);
    font-size: 0.9em;
    margin-bottom: 15px;
}

.sm-fuga-last-import strong {
    color: var(--sm-primary, #f5c518);
}

.sm-fuga-date {
    opacity: 0.7;
    font-size: 0.9em;
}

#sm-fuga-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s;
}

#sm-fuga-import-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#sm-fuga-import-btn.loading {
    pointer-events: none;
}

#sm-fuga-import-btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.sm-fuga-log {
    margin-top: 20px;
    background: var(--sm-bg-darker, #111);
    border-radius: 8px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.sm-fuga-log h4 {
    margin: 0 0 10px 0;
    font-size: 0.9em;
    color: var(--sm-text-secondary, #aaa);
}

.sm-fuga-log-content {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.85em;
    line-height: 1.6;
}

.sm-fuga-log-item {
    padding: 3px 0;
    display: flex;
    gap: 10px;
}

.sm-fuga-log-item .time {
    color: var(--sm-text-muted, #666);
    min-width: 60px;
}

.sm-fuga-log-item.info .message { color: var(--sm-text, #fff); }
.sm-fuga-log-item.success .message { color: #1db954; }
.sm-fuga-log-item.warning .message { color: #f5c518; }
.sm-fuga-log-item.error .message { color: #e74c3c; }
.sm-fuga-log-item.skip .message { color: var(--sm-text-muted, #888); }

.sm-fuga-result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
}

.sm-fuga-result.success {
    background: rgba(29, 185, 84, 0.15);
    border: 1px solid #1db954;
    color: #1db954;
}

.sm-fuga-result.error {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid #e74c3c;
    color: #e74c3c;
}

.sm-status-warning {
    background: rgba(245, 197, 24, 0.15);
    border: 1px solid #f5c518;
    color: #f5c518;
    padding: 15px;
    border-radius: 8px;
}

.sm-status-warning code {
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Light Mode */
body.light-mode .sm-fuga-stat {
    background: var(--sm-bg-hover, #e8e8e8);
}

body.light-mode .sm-fuga-stat-number {
    color: var(--sm-primary, #d77792);
}

body.light-mode .sm-fuga-log {
    background: var(--sm-bg-card, #fff);
    border: 1px solid var(--sm-border, #ddd);
}

body.light-mode .sm-fuga-log-item.info .message {
    color: var(--sm-text, #1a1a1a);
}

/* ==========================================
   ARTISTA ALBUM
   ========================================== */
.sm-album-artist {
    margin: 10px 0 15px 0;
}

.sm-album-artist-label {
    color: var(--sm-text-secondary);
    font-size: 14px;
    margin-right: 8px;
}

.sm-album-artist-value {
    color: var(--sm-text);
    font-size: 18px;
    font-weight: 500;
}

/* ==========================================
   FIX DARK MODE - INPUT RICERCA
   ========================================== */
/* Assicura che l'input di ricerca abbia colori corretti in dark mode */
.sm-search-input,
.sm-catalog-wrapper .sm-search-input,
input.sm-search-input {
    background: var(--sm-bg-dark) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}

/* Fix per temi che potrebbero sovrascrivere */
.sm-catalog-wrapper input[type="text"],
.sm-catalog-wrapper input[type="search"],
.sm-search-container input[type="text"],
.sm-search-container input[type="search"] {
    background: var(--sm-bg-dark) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}

.sm-catalog-wrapper input::placeholder,
.sm-search-container input::placeholder {
    color: var(--sm-text-muted) !important;
}

/* ==========================================
   FIX LIGHT MODE - INPUT RICERCA
   ========================================== */
/* Assicura che il testo sia nero in light mode */
body.light-mode .sm-search-input,
body.light-mode .sm-catalog-wrapper .sm-search-input,
body.light-mode input.sm-search-input,
body.light-mode .sm-catalog-wrapper input[type="text"],
body.light-mode .sm-catalog-wrapper input[type="search"],
body.light-mode .sm-search-container input[type="text"],
body.light-mode .sm-search-container input[type="search"],
body.light-mode .sm-search-bar input,
body.light-mode .sm-search-input-wrap input {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #cccccc !important;
    -webkit-text-fill-color: #1a1a1a !important;
    caret-color: #1a1a1a !important;
    opacity: 1 !important;
}

body.light-mode .sm-catalog-wrapper input::placeholder,
body.light-mode .sm-search-container input::placeholder,
body.light-mode .sm-search-input::placeholder,
body.light-mode .sm-search-bar input::placeholder,
body.light-mode .sm-search-input-wrap input::placeholder {
    color: #888888 !important;
    -webkit-text-fill-color: #888888 !important;
    opacity: 1 !important;
}

/* ==========================================
   TERRITORI LICENZA - POPUP
   ========================================== */
.sm-territori-link {
    color: var(--sm-primary);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    transition: var(--sm-transition);
}

.sm-territori-link:hover {
    color: var(--sm-primary-hover);
    text-decoration: underline;
}

/* Modal Overlay */
.sm-territori-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sm-overlay-bg, rgba(0,0,0,0.8));
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sm-territori-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Content */
.sm-territori-modal {
    background: var(--sm-bg-card);
    border-radius: var(--sm-radius-lg);
    box-shadow: var(--sm-card-shadow, 0 8px 32px rgba(0,0,0,0.5));
    max-width: 450px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.sm-territori-modal-overlay.active .sm-territori-modal {
    transform: translateY(0);
}

/* Modal Header */
.sm-territori-modal-header {
    padding: 16px 20px;
    background: var(--sm-bg-darker);
    border-bottom: 1px solid var(--sm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sm-territori-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sm-text);
}

.sm-territori-modal-close {
    background: none;
    border: none;
    color: var(--sm-text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.sm-territori-modal-close:hover {
    color: var(--sm-text);
}

/* Modal Body */
.sm-territori-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.sm-territori-modal-body p {
    margin: 0 0 15px 0;
    color: var(--sm-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.sm-territori-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sm-territorio-tag {
    background: var(--sm-bg-hover);
    color: var(--sm-text);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid var(--sm-border);
}

/* Modal Footer */
.sm-territori-modal-footer {
    padding: 12px 20px;
    background: var(--sm-bg-darker);
    border-top: 1px solid var(--sm-border);
    text-align: right;
}

.sm-territori-modal-footer button {
    background: var(--sm-primary);
    color: #000;
    border: none;
    padding: 8px 20px;
    border-radius: var(--sm-radius);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.sm-territori-modal-footer button:hover {
    background: var(--sm-primary-hover);
}

/* Contatti nel popup Territori */
.sm-territori-contatti {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--sm-border);
}

.sm-territori-contatti-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sm-contatti-icon {
    font-size: 18px;
}

.sm-contatti-title {
    font-weight: 600;
    color: var(--sm-text);
    font-size: 14px;
}

.sm-territori-contatti-content {
    background: var(--sm-bg-hover);
    padding: 12px 15px;
    border-radius: var(--sm-radius);
    color: var(--sm-text);
    font-size: 13px;
    line-height: 1.6;
}

.sm-territori-contatti-content a {
    color: var(--sm-primary);
    text-decoration: none;
    font-weight: 500;
}

.sm-territori-contatti-content a:hover {
    text-decoration: underline;
}