/* =====================================================================
   BUTTONS.CSS
   Gombok: menu/action/altalanos CTA.
   Hasznalat: globalis + fejlec + oldalszintu akciok.
   ===================================================================== */

.header-menu-button,
.header-submenu-button,
.action-button,
.contact-local-nav-item,
.profile-preview-link {
  border-radius: 14px;
}

.header-menu-button,
.header-submenu-button,
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  width: auto;
  flex: 0 0 auto;
  min-width: 112px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  background: rgba(191, 90, 54, 0.06);
  cursor: pointer;
  font-size: var(--ui-font-button);
  box-shadow: var(--main-shadow-sm);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 220ms ease,
    border-color 220ms ease;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.header-menu-button:hover,
.header-submenu-button:hover,
.action-button:hover {
  transform: translateY(-1px);
  background: rgba(191, 90, 54, 0.1);
  box-shadow: var(--main-shadow-sm);
}

.header-menu-button:not(.is-active) img,
.header-submenu-button:not(.is-active) img,
.action-button:not(.is-active) img {
  filter: opacity(50%) invert(0) saturate(0%) !important;
}

.header-menu-button.is-active,
.header-submenu-button.is-active,
.action-button.is-active {
  border-color: rgba(191, 90, 54, 0.42);
  background: rgba(191, 90, 54, 0.18);
  box-shadow: inset 0 1px 2px rgba(80, 46, 35, 0.28);
}

.header-menu-button.is-active img,
.header-submenu-button.is-active img,
.action-button.is-active img {
  filter: none !important;
}


.submenu-icon-only {
  min-width: 0;
  width: auto;
  height: auto;
  padding: 6px 4px;
  border-radius: 10px;
}

.submenu-icon-only img {
  display: block;
  width: 24px;
  height: 24px;
  max-width: none;
  max-height: none;
}

.contact-local-nav .submenu-icon-only > img,
.contact-local-nav .submenu-icon-only img {
  object-fit: contain;
}

.contact-local-nav .submenu-icon-only:not(.is-active):not(.contact-local-nav-back) img {
  /* filter: sepia(1); */
  filter: opacity(50%) invert(0) saturate(0%);
}

@media (max-width: 1024px) {
  .contact-local-nav .submenu-icon-only:not(.is-active):not(.contact-local-nav-back) img {
    filter: opacity(50%) invert(0) saturate(0%) !important;
  }
}

.action-button.is-ghost {
  background: rgba(191, 90, 54, 0.06);
}

.profile-preview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  /* margin-top: 11px; */
  padding: 12px 16px;
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.profile-preview-link.action-button {
  min-width: 0;
}

.editor-toolbar-button {
  width: auto;
  min-width: 32px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(191, 90, 54, 0.08);
  color: var(--text);
  font-weight: 700;
  font-size: var(--ui-font-sm);
  line-height: 1.15;
}

.editor-toolbar-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 30px;
  padding: 0;
  line-height: 0;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 248, 245, 0.92);
}

.icon-button img {
  width: 20px;
  height: 20px;
  display: block;
}

.profile-group-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 22px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(191, 90, 54, 0.06);
  cursor: pointer;
  font-size: var(--ui-font-accordion);
  box-shadow: var(--main-shadow-sm);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 260ms ease;
}

.profile-group-button:hover {
  transform: translateY(-1px);
  background: rgba(191, 90, 54, 0.1);
  box-shadow: var(--main-shadow-sm);
}

.profile-group-button::after {
  content: "+";
  font-size: var(--ui-font-lg);
  color: var(--accent-dark);
  transition: transform 260ms ease;
}

.profile-accordion-item.is-open .profile-group-button {
  border-color: rgba(191, 90, 54, 0.42);
  background: rgba(191, 90, 54, 0.18);
  box-shadow: none;
}

.profile-accordion-item.is-open .profile-group-button::after {
  content: "−";
  transform: rotate(180deg);
}