/* Dynamiczne Menu Logowania 2.0 */

.dlm {
  --dlm-accent: #ff6600;
  --dlm-accent-dark: #e65c00;
  --dlm-ink: #1f2937;
  --dlm-muted: #6b7280;
  --dlm-border: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.2;
}

.dlm-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dlm-sr,
.dlm .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Linki i przyciski */
.dlm-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 600;
}

.dlm-link:hover {
  color: var(--dlm-accent) !important;
}

.dlm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s;
}

.dlm-btn--primary {
  background: var(--dlm-accent);
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(255, 102, 0, .55);
}

.dlm-btn--primary:hover,
.dlm-btn--primary:focus-visible {
  background: var(--dlm-accent-dark);
  color: #fff !important;
}

.dlm a:focus-visible,
.dlm button:focus-visible {
  outline: 3px solid rgba(255, 102, 0, .45);
  outline-offset: 2px;
}

/* Menu konta */
.dlm-account {
  position: relative;
}

.dlm-account__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--dlm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--dlm-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dlm-account__toggle:hover {
  border-color: #cbd5e1;
}

.dlm-account__toggle .dlm-icon {
  width: 16px;
  height: 16px;
  transition: transform .15s;
}

.dlm-account__toggle[aria-expanded="true"] .dlm-icon {
  transform: rotate(180deg);
}

.dlm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
}

.dlm-account__name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dlm-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  min-width: 240px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--dlm-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .25);
}

.dlm-menu[hidden] {
  display: none;
}

.dlm-menu__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--dlm-border);
  color: var(--dlm-ink);
}

.dlm-menu__head span {
  font-size: 13px;
  color: var(--dlm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlm-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--dlm-ink) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.dlm-menu__item:hover,
.dlm-menu__item:focus-visible {
  background: #f8fafc;
}

.dlm-menu__item--logout {
  color: #b91c1c !important;
}

/* Pozycje w menu motywu (YOOtheme / WordPress) */
.dlm-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ff6600;
  color: #fff !important;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(255, 102, 0, .55);
}

a:hover > .dlm-menu-btn,
a:focus-visible > .dlm-menu-btn {
  background: #e65c00;
}

.dlm-menu-btn .dlm-icon {
  width: 16px;
  height: 16px;
}

.dlm-menu-greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.dlm-menu-greeting .dlm-avatar {
  width: 24px;
  height: 24px;
}

.dlm-item-logout > a {
  color: #b91c1c !important;
}

/* Telefon: skróty (panel, wyloguj) obok przycisku menu */
.dlm-mobile-shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dlm-mobile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ff6600 !important;
}

.dlm-mobile-link:hover {
  background: rgba(255, 102, 0, .08);
}

.dlm-mobile-link .dlm-icon {
  width: 24px;
  height: 24px;
}

@media (max-width: 640px) {
  .dlm {
    gap: 8px;
  }
  .dlm-hide-sm {
    display: none;
  }
  .dlm-btn {
    padding: 9px 10px;
  }
  .dlm-account__toggle {
    padding-right: 6px;
  }
}