/* ============================================
   OVERLAY E SIDEBAR LOGIN
   ============================================ */

/* Sidebar nascosta su desktop */
.login-sidebar-overlay {
  display: none;
}

.login-sidebar {
  display: none;
}

.login-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
  flex-shrink: 0;
}

.login-sidebar-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.login-sidebar-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.login-sidebar-close:hover {
  color: #1c7ed9;
}

.login-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.dropdown-menu.user-down {
  padding: 0;
  min-width: 400px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-top: 8px;
}

/* Min-width specifico per il menu quando l'utente è loggato */
.dropdown-menu.user-down.user-logged-menu {
  min-width: 200px;
}

.dropdown-menu.user-down li {
  list-style: none;
  margin: 0;
  width: auto;
}

/* ============================================
   STILI PER MENU UTENTE LOGGATO
   (targetizzano solo i li che NON sono .inline-login-form)
   ============================================ */

/* Stile per il saluto del cliente quando è loggato */
.dropdown-menu.user-down > li.user-greeting {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  line-height: 1.5;
}

.dropdown-menu.user-down > li.user-greeting .greeting-text {
  font-size: 15px;
  color: #666;
  margin-right: 6px;
  font-weight: 400;
  display: inline-block;
  vertical-align: baseline;
}

.dropdown-menu.user-down > li.user-greeting .customer-name {
  font-size: 16px;
  font-weight: 600;
  color: #1c7ed9;
  display: inline-block;
  vertical-align: baseline;
}

/* Stile per i link del menu quando l'utente è loggato */
.dropdown-menu.user-down > li:not(.inline-login-form):not(.user-greeting) {
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu.user-down > li:not(.inline-login-form):not(.user-greeting):last-child {
  border-bottom: none;
}

.dropdown-menu.user-down > li:not(.inline-login-form) > a {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
  position: relative;
}

.dropdown-menu.user-down > li:not(.inline-login-form) > a:hover {
  background-color: #f5f5f5;
  color: #1c7ed9;
}

.dropdown-menu.user-down > li:not(.inline-login-form) > a:hover > i {
  color: #1c7ed9;
}

.dropdown-menu.user-down > li:not(.inline-login-form) > a > i {
  font-size: 16px;
  width: 20px;
  margin-right: 10px;
  text-align: center;
  color: #666;
  transition: color 0.2s ease;
}

.dropdown-menu.user-down > li:not(.inline-login-form) > a > span {
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s ease;
}

/* ============================================
   STILI PER FORM DI LOGIN
   (targetizzano solo .inline-login-form e i suoi discendenti)
   ============================================ */

.inline-login-form {
  padding: 25px;
  min-width: 300px;
  max-width: 100%;
  background: #fff;
}

/* Stili specifici per la sidebar */
.login-sidebar .inline-login-form {
  padding: 25px;
  width: 100%;
  box-sizing: border-box;
}

/* Stili per i pulsanti social login nel form inline */
.inline-login-form .social-oauth-login {
  margin-bottom: 20px;
}

.inline-login-form .social-oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.inline-login-form .social-oauth-buttons .btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: #fff;
  color: #333;
}

.inline-login-form .social-oauth-buttons .btn-social:hover {
  background-color: #f8f9fa;
  border-color: #1c7ed9;
  color: #1c7ed9;
}

.inline-login-form .social-oauth-buttons .btn-social svg {
  flex-shrink: 0;
}

.inline-login-form .social-oauth-divider {
  text-align: center;
  margin: 15px 0;
  position: relative;
  color: #999;
  font-size: 13px;
}

.inline-login-form .social-oauth-divider::before,
.inline-login-form .social-oauth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #e0e0e0;
}

.inline-login-form .social-oauth-divider::before {
  left: 0;
}

.inline-login-form .social-oauth-divider::after {
  right: 0;
}

.inline-login-form .social-oauth-divider span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.header-login-form {
  margin: 0;
}

.header-login-form .form-group {
  margin-bottom: 15px;
}

.header-login-form .form-group:last-of-type {
  margin-bottom: 10px;
}

.header-login-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 13px;
  color: #333;
}

.header-login-form .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.header-login-form .form-control:focus {
  border-color: #1c7ed9;
  outline: none;
  box-shadow: 0 0 0 2px rgba(28, 126, 217, 0.1);
}

.header-login-form .form-control.error {
  border-color: #dc3545;
}

.header-login-form .forgot-password-link {
  font-size: 12px;
  color: #1c7ed9;
  text-decoration: none;
  display: inline-block;
  margin-top: 5px;
}

.header-login-form .forgot-password-link:hover {
  text-decoration: underline;
  color: #1a6fc7;
}

.header-login-form .btn-primary {
  background-color: #1c7ed9;
  border-color: #1c7ed9;
  padding: 11px 20px;
  font-weight: 500;
  font-size: 14px;
  width: 100%;
  border-radius: 3px;
  margin-top: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-login-form .btn-primary:hover {
  background-color: #1a6fc7;
  border-color: #1a6fc7;
}

.header-login-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-error-message {
  font-size: 12px;
  padding: 10px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 3px;
  color: #721c24;
  margin-top: 10px;
  line-height: 1.4;
}

.create-account-link {
  color: #1c7ed9;
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.create-account-link i {
  font-size: 12px;
}

.create-account-link:hover {
  text-decoration: none;
  color: #1a6fc7;
}

.create-account-link:hover i {
  color: #1a6fc7;
}

/* Assicura che il dropdown sia posizionato correttamente */
#_desktop_user_info.dropdown {
  position: relative;
}

#_desktop_user_info .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1000;
}

/* Responsive per schermi piccoli - Sidebar solo mobile */
@media (max-width: 767px) {
  /* Nascondi dropdown su mobile */
  .dropdown-menu.user-down:not(.user-logged-menu) {
    display: none !important;
  }
  
  /* Mostra sidebar su mobile */
  .login-sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .login-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    z-index: 10000 !important;
  }
  
  .login-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10069999999;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    flex-direction: column;
    overflow: hidden;
  }
  
  .login-sidebar.active {
    right: 0;
    z-index: 10069999999 !important;
  }
  
  /* Assicura che i badge "Top vendite" non appaiano sopra la sidebar */
  .login-sidebar-overlay.active ~ * .top-product-list,
  body:has(.login-sidebar.active) .top-product-list {
    z-index: 1 !important;
  }
  
  .login-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    flex-shrink: 0;
  }
  
  .login-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .login-sidebar-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }
  
  .login-sidebar-close:hover {
    color: #1c7ed9;
  }
  
  .login-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }
  
  .login-sidebar .inline-login-form {
    padding: 20px;
    text-align: left;
  }
  
  .login-sidebar .header-login-form {
    text-align: left;
  }
  
  .login-sidebar .header-login-form label {
    text-align: left;
  }
  
  .login-sidebar .header-login-form .form-group {
    text-align: left;
  }
  
  .login-sidebar .forgot-password-link {
    text-align: left;
    display: block;
  }
  
  .login-sidebar .text-center {
    text-align: left !important;
  }
  
  .login-sidebar .create-account-link {
    text-align: left;
    justify-content: flex-start;
  }
  
  .header-login-form .form-control {
    font-size: 16px !important; /* Previene zoom su iOS */
  }
}

/* ============================================
   PANNELLO LATERALE ACCOUNT (DESKTOP E MOBILE)
   ============================================ */

/* Sovrascrive la regola .dropdown .active max-height: 200px del theme.css */
#account-sidebar,
.account-sidebar,
.account-sidebar.active,
.dropdown #account-sidebar,
.dropdown .account-sidebar,
.dropdown .account-sidebar.active {
  max-height: none !important;
}

.account-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  background: rgba(50, 50, 50, 0.25);
  z-index: 9999999; /* Z-index alto per coprire chat live, WhatsApp, ecc. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin: 0;
  padding: 0;
}

.account-sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Assicura che l'overlay copra tutta la pagina anche con scroll */
html.account-sidebar-open,
body.account-sidebar-open {
  overflow: visible !important;
  position: relative;
}

/* Sposta il contenuto della pagina quando il pannello è aperto (come blockslidingcart) */
/* Applica margin-right sia al body che a .csquizzed-page se presente */
body.account-sidebar-open,
body.csquizzed-page.account-sidebar-open,
html.account-sidebar-open body {
  margin-right: 400px !important;
  transition: margin-right 0.3s ease;
}

/* Su mobile, applica margin-right per spostare il contenuto (come blockslidingcart) */
@media (max-width: 767px) {
  body.account-sidebar-open,
  body.csquizzed-page.account-sidebar-open,
  html.account-sidebar-open body {
    margin-right: 85vw !important; /* Su mobile sposta il contenuto per mostrare che il pannello è aperto */
    transition: margin-right 0.3s ease;
  }
}

/* Assicura che l'overlay copra tutti gli elementi del sito */
.account-sidebar-overlay.active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important; /* Come blockslidingcart usa height: 100% */
  z-index: 9999999 !important; /* Z-index alto per coprire chat live, WhatsApp, ecc. (sotto il pannello) */
}

/* Assicura che il pannello sia sopra tutti gli elementi */
.account-sidebar.active {
  z-index: 10069999999 !important; /* Stesso z-index di blockslidingcart */
  position: fixed !important;
}

/* Quando il pannello è aperto, assicura che l'overlay copra tutto */
body.account-sidebar-open .account-sidebar-overlay.active,
html.account-sidebar-open .account-sidebar-overlay.active {
  z-index: 10000 !important; /* Z-index dell'overlay (sotto il pannello) */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important; /* Come blockslidingcart usa height: 100% */
  z-index: 9999999 !important; /* Z-index alto per coprire chat live, WhatsApp, ecc. (sotto il pannello) */
}

/* Quando il pannello è aperto, assicura che il pannello sia sopra tutto */
body.account-sidebar-open .account-sidebar.active,
html.account-sidebar-open .account-sidebar.active {
  z-index: 10069999999 !important; /* Stesso z-index di blockslidingcart */
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important; /* Come blockslidingcart usa height: 100% */
}

.account-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100%; /* Come blockslidingcart usa height: 100% */
  background: #fff;
  z-index: 10069999999 !important; /* Stesso z-index di blockslidingcart */
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.2; /* Come blockslidingcart */
}

/* Sovrascrive la regola .dropdown .active del theme.css che limita max-height a 200px */
.account-sidebar.active,
.account-sidebar.active .account-sidebar-content {
  max-height: none !important;
}

.account-sidebar-content {
  max-height: none !important;
}

.account-sidebar.active {
  right: 0 !important;
  height: 100% !important; /* Come blockslidingcart usa height: 100% */
  z-index: 10069999999 !important; /* Stesso z-index di blockslidingcart */
}

/* Sovrascrive la regola .dropdown .active del theme.css che limita max-height a 200px */
#account-sidebar.active,
.account-sidebar.active,
.account-sidebar.active .account-sidebar-content,
.account-sidebar-content {
  max-height: none !important;
}

.account-sidebar.active .account-sidebar-content {
  height: auto !important;
  max-height: none !important;
}

.account-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
  flex-shrink: 0;
  height: auto;
  min-height: 70px; /* Altezza minima per calcolo corretto */
  box-sizing: border-box;
}

.account-sidebar-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.account-sidebar-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.account-sidebar-close:hover {
  color: #1c7ed9;
}

.account-sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 0; /* Importante per flex */
  box-sizing: border-box;
}

.account-sidebar-links {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scroll su iOS */
  padding: 0;
  margin: 0;
  list-style: none;
  padding-bottom: 20px; /* Spazio in basso per l'ultimo elemento */
}


.account-sidebar-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 20px 25px !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.account-sidebar-link:last-child {
  border-bottom: none;
}

.account-sidebar-link:hover {
  background-color: #f5f5f5 !important;
  color: #1c7ed9 !important;
  text-decoration: none !important;
}

.account-link-icon {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 15px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  order: -1; /* Sposta l'icona a sinistra */
}

.account-link-icon .material-icons {
  font-size: 28px !important;
  color: #333 !important;
  transition: color 0.2s ease;
}

.account-sidebar-link:hover .account-link-icon .material-icons {
  color: #1c7ed9 !important;
}

.account-link-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  flex: 1;
  text-align: left;
}

/* Footer del pannello account */
.account-sidebar-footer {
  padding: 20px 25px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
  flex-shrink: 0;
  margin-top: auto;
}

/* Su mobile, il footer non è sticky ma fa parte del contenuto scrollabile */
@media (max-width: 767px) {
  .account-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .account-sidebar-links {
    flex: 0 0 auto; /* Non occupa tutto lo spazio, permette scroll */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0; /* Rimuove padding bottom perché c'è il footer */
  }
  
  .account-sidebar-footer {
    flex-shrink: 0;
    margin-top: 0; /* Rimuove margin-top auto */
    position: relative; /* Non sticky */
  }
}

.account-sidebar-logout {
  display: block;
  width: 100%;
  padding: 12px 20px;
  text-align: center;
  background-color: #1c7ed9;
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s ease;
  border: none;
  cursor: pointer;
}

.account-sidebar-logout:hover {
  background-color: #1a6fc7;
  color: #fff !important;
  text-decoration: none;
}

/* Stili per elementi aggiunti dall'hook displayCustomerAccount */
.account-sidebar-links > * {
  display: block;
  width: 100%;
}

/* Reset per container che potrebbero avere layout orizzontale */
.account-sidebar-links > div,
.account-sidebar-links > ul,
.account-sidebar-links > li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Forza layout verticale per elementi dell'hook */
.account-sidebar-links > div > a,
.account-sidebar-links > ul > li > a,
.account-sidebar-links > li > a,
.account-sidebar-links a:not(.account-sidebar-link) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 20px 25px !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px !important; /* Stessa dimensione degli elementi standard */
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.account-sidebar-links > div > a:hover,
.account-sidebar-links > ul > li > a:hover,
.account-sidebar-links > li > a:hover,
.account-sidebar-links a:not(.account-sidebar-link):hover {
  background-color: #f5f5f5 !important;
  color: #1c7ed9 !important;
  text-decoration: none !important;
}

/* Gestione icone per elementi dell'hook */
.account-sidebar-links > div > a > i,
.account-sidebar-links > ul > li > a > i,
.account-sidebar-links > li > a > i,
.account-sidebar-links a:not(.account-sidebar-link) > i,
.account-sidebar-links > div > a > .material-icons,
.account-sidebar-links > ul > li > a > .material-icons,
.account-sidebar-links > li > a > .material-icons,
.account-sidebar-links a:not(.account-sidebar-link) > .material-icons,
.account-sidebar-links > div > a > span:first-child > i,
.account-sidebar-links > div > a > span:first-child > .material-icons {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 15px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  font-size: 28px !important;
  color: #333 !important;
  transition: color 0.2s ease;
  order: -1; /* Sposta l'icona a sinistra */
}

.account-sidebar-links > div > a:hover > i,
.account-sidebar-links > ul > li > a:hover > i,
.account-sidebar-links > li > a:hover > i,
.account-sidebar-links a:not(.account-sidebar-link):hover > i,
.account-sidebar-links > div > a:hover > .material-icons,
.account-sidebar-links > ul > li > a:hover > .material-icons,
.account-sidebar-links > li > a:hover > .material-icons,
.account-sidebar-links a:not(.account-sidebar-link):hover > .material-icons,
.account-sidebar-links > div > a:hover > span:first-child > i,
.account-sidebar-links > div > a:hover > span:first-child > .material-icons {
  color: #1c7ed9 !important;
}

/* Gestione testo per elementi dell'hook */
.account-sidebar-links > div > a > span:not(:first-child),
.account-sidebar-links > ul > li > a > span:not(:first-child),
.account-sidebar-links > li > a > span:not(:first-child),
.account-sidebar-links a:not(.account-sidebar-link) > span:not(:first-child),
.account-sidebar-links > div > a,
.account-sidebar-links > ul > li > a,
.account-sidebar-links > li > a,
.account-sidebar-links a:not(.account-sidebar-link) {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Assicura che il testo principale degli elementi hook abbia la stessa dimensione */
.account-sidebar-links > div > a,
.account-sidebar-links > ul > li > a,
.account-sidebar-links > li > a,
.account-sidebar-links a:not(.account-sidebar-link) {
  font-size: 16px !important;
}

/* Gestione testo specifico per span negli elementi hook */
.account-sidebar-links > div > a > span:not(:first-child),
.account-sidebar-links > ul > li > a > span:not(:first-child),
.account-sidebar-links > li > a > span:not(:first-child),
.account-sidebar-links a:not(.account-sidebar-link) > span:not(:first-child) {
  flex: 1;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left;
}

/* Allinea a sinistra tutto il testo nei link */
.account-sidebar-link,
.account-sidebar-links > div > a,
.account-sidebar-links > ul > li > a,
.account-sidebar-links > li > a,
.account-sidebar-links a:not(.account-sidebar-link) {
  text-align: left !important;
}

.account-sidebar-link > *,
.account-sidebar-links > div > a > *,
.account-sidebar-links > ul > li > a > *,
.account-sidebar-links > li > a > *,
.account-sidebar-links a:not(.account-sidebar-link) > * {
  text-align: left !important;
}

/* Reset per layout orizzontale (grid, flex row, etc.) */
.account-sidebar-links > div[class*="row"],
.account-sidebar-links > div[class*="grid"],
.account-sidebar-links > div[style*="display: flex"],
.account-sidebar-links > div[style*="display:grid"],
.account-sidebar-links > div[class*="col-"] {
  display: block !important;
  flex-direction: column !important;
  width: 100% !important;
}

.account-sidebar-links > div[class*="row"] > *,
.account-sidebar-links > div[class*="grid"] > *,
.account-sidebar-links > div[class*="col-"] > * {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Gestione immagini/icone che potrebbero essere in posizioni diverse */
.account-sidebar-links a img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain;
  margin-right: 15px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  order: -1; /* Sposta l'immagine a sinistra */
}

/* Gestione link con struttura complessa (es. link-item) */
.account-sidebar-links a .link-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}

.account-sidebar-links a .link-item > i,
.account-sidebar-links a .link-item > .material-icons {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 15px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  font-size: 28px !important;
  color: #333 !important;
  order: -1;
}

.account-sidebar-links a:hover .link-item > i,
.account-sidebar-links a:hover .link-item > .material-icons {
  color: #1c7ed9 !important;
}

/* Responsive per mobile */
@media (max-width: 767px) {
  /* Assicura che l'overlay copra tutto su mobile, inclusi chat e WhatsApp */
  .account-sidebar-overlay.active {
    z-index: 99999999 !important; /* Z-index molto alto per coprire chat live, WhatsApp, ecc. su mobile */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  body.account-sidebar-open .account-sidebar-overlay.active,
  html.account-sidebar-open .account-sidebar-overlay.active {
    z-index: 99999999 !important; /* Z-index molto alto per coprire chat live, WhatsApp, ecc. su mobile */
  }
  
  .account-sidebar {
    max-width: 100%;
    width: 100%;
    height: 100%; /* Come blockslidingcart usa height: 100% */
    z-index: 10069999999 !important; /* Stesso z-index di blockslidingcart */
  }
  
  .account-sidebar.active {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important; /* Come blockslidingcart usa height: 100% */
    width: 100% !important;
    max-width: 100% !important;
    z-index: 10069999999 !important; /* Stesso z-index di blockslidingcart su mobile */
  }
  
  .account-sidebar-header {
    padding: 15px 20px;
  }
  
  .account-sidebar-header h3 {
    font-size: 18px;
  }
  
  .account-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  
  .account-sidebar-links {
    flex: 0 0 auto; /* Non occupa tutto lo spazio, permette scroll */
    overflow: visible; /* Non scrolla, scrolla il contenitore padre */
    padding-bottom: 0; /* Rimuove padding perché c'è il footer dopo */
  }
  
  .account-sidebar-footer {
    flex: 0 0 auto; /* Non sticky, fa parte del contenuto scrollabile */
    margin-top: 0; /* Rimuove margin-top auto che lo rendeva sticky */
    position: relative; /* Non fixed o sticky */
  }
  
  .account-sidebar-header {
    min-height: 60px; /* Altezza minima su mobile */
  }
  
  .account-sidebar-link {
    padding: 18px 20px;
  }
  
  .account-link-icon {
    width: 45px !important;
    height: 45px !important;
    margin-right: 12px !important;
  }
  
  .account-link-icon .material-icons {
    font-size: 24px !important;
  }
  
  .account-link-text {
    font-size: 15px;
  }
  
  .account-sidebar-links {
    padding-bottom: 20px; /* Spazio in basso su mobile */
  }
  
  .account-sidebar-footer {
    padding: 15px 20px;
  }
  
  .account-sidebar-logout {
    padding: 10px 15px;
    font-size: 15px;
  }
  
  /* Stili responsive per elementi dell'hook su mobile */
  .account-sidebar-links > div > a,
  .account-sidebar-links > ul > li > a,
  .account-sidebar-links > li > a,
  .account-sidebar-links a:not(.account-sidebar-link) {
    padding: 18px 20px !important;
    font-size: 15px !important; /* Stessa dimensione degli elementi standard su mobile */
    font-weight: 400 !important;
    line-height: 1.4 !important;
  }
  
  .account-sidebar-links > div > a > i,
  .account-sidebar-links > ul > li > a > i,
  .account-sidebar-links > li > a > i,
  .account-sidebar-links a:not(.account-sidebar-link) > i,
  .account-sidebar-links > div > a > .material-icons,
  .account-sidebar-links > ul > li > a > .material-icons,
  .account-sidebar-links > li > a > .material-icons,
  .account-sidebar-links a:not(.account-sidebar-link) > .material-icons,
  .account-sidebar-links > div > a > span:first-child > i,
  .account-sidebar-links > div > a > span:first-child > .material-icons {
    width: 45px !important;
    height: 45px !important;
    margin-right: 12px !important;
    font-size: 24px !important;
  }
  
  .account-sidebar-links > div > a > span:not(:first-child),
  .account-sidebar-links > ul > li > a > span:not(:first-child),
  .account-sidebar-links > li > a > span:not(:first-child),
  .account-sidebar-links a:not(.account-sidebar-link) > span:not(:first-child),
  .account-sidebar-links > div > a,
  .account-sidebar-links > ul > li > a,
  .account-sidebar-links > li > a,
  .account-sidebar-links a:not(.account-sidebar-link) {
    font-size: 15px !important;
  }
}