/* ===============================
   LOGIN / LOGOUT container
=============================== */
.login-widget {
  background-color: #00A54F;
  border: 1px solid #ccc;
  text-align: center;
  border-radius: 20px;
  margin: 10px 0;
}

/* LOGIN button */
.smtc-login-logout-button {
  display: inline-block;
  padding: 4px 10px;
  background-color: #00A54F;
  color: #fff;
  text-decoration: none;
  border-radius: 18px;
  margin: 0 5px;
}

.smtc-login-logout-button:hover {
  color: #F48123;
}

/* ===============================
   User Widget
=============================== */
.user-widget-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  background-color: #00A54F;
  padding-left: 10px !important;
  border: 1px solid #00A54F;
  border-radius: 30px;
  color: #fff;
  min-width: 80px;
}

/* User icon */
.icon svg {
  width: 20px;
  height: 20px;
  display: flex;
}

/* Main trigger (icons, initials, arrow) */
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* User initials */
.initials {
  font-weight: bold;
  color: white;
}

/* Main arrow ► / ▼ */
.dropdown-arrow {
  font-size: 0.7em;
  margin-right: 8px;
  color: white;
}

.dropdown-arrow::after {
  content: "►";
}

.dropdown-arrow[data-state="open"]::after {
  content: "▼";
}

/* ===============================
   Main Menu (ul)
=============================== */
.user-widget-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #00A54F;
  min-width: 220px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 0;
  list-style: none;
}

/* Show menu when open */
.user-widget-dropdown.open .dropdown-menu {
  display: block;
}

/* Removes dots */
.user-widget-dropdown ul,
.user-widget-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Main voices */
.user-widget-dropdown .dropdown-menu li {
  font-weight: bold;
  color: #3D403E;
  padding: 0;
}

/* Link */
.user-widget-dropdown .dropdown-menu li a {
  color: #3D403E;
  text-decoration: none;
  display: block;
  padding: 10px;
  font-weight: normal;
}

.user-widget-dropdown .dropdown-menu li a:hover {
  color: #F48123;
}

/* ===============================
   Submenu
=============================== */

/* Item header with submenu (Profile Area, ecc.) */
.user-widget-dropdown .submenu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
  color: #3D403E;
}

/* + / − toggle */
.user-widget-dropdown .submenu-toggle {
  font-size: 1.2em;
  font-weight: bold;
  margin-left: 10px;
}

.submenu-toggle::after {
  content: "+";
}

.submenu-toggle[data-state="open"]::after {
  content: "−";
}

/* Submenu hidden by default */
.user-widget-dropdown .submenu {
  display: none;
  padding-left: 20px;
  list-style: none;
}

/* Show submenu when open */
.user-widget-dropdown .submenu.open {
  display: block;
}

/* Submenu items */
.user-widget-dropdown .submenu li {
  font-weight: normal;
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
}

.user-widget-dropdown .submenu li a {
  color: #3D403E;
  text-decoration: none;
  display: block;
  padding: 4px 6px;
}

.user-widget-dropdown .submenu li a:hover {
  color: #F48123;
}