/* Shared SVG icons: decorative artwork inherits its control's accessible colour. */
svg.ui-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
  pointer-events: none;
}

.button > .ui-icon,
.text-link > .ui-icon,
.package-cta > .ui-icon,
.quick-contact-links .ui-icon,
.social-links .ui-icon,
.staff-button > .ui-icon,
.admin-primary > .ui-icon,
.admin-secondary > .ui-icon {
  align-self: center;
}

.button > span[aria-hidden="true"]:has(> .ui-icon),
.text-link > span[aria-hidden="true"]:has(> .ui-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.round-arrow > .ui-icon,
.quick-action-arrow > .ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.gallery-item > span > .ui-icon,
.gallery-item > span > b > .ui-icon {
  display: block;
  margin-left: auto;
}

.menu-dialog nav a > .ui-icon {
  margin-left: auto;
}

.menu-toggle,
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle { color: #E2E8CE; }
.menu-toggle:hover { color: #F58A07; }
.video-toggle[hidden] { display: none; }

.menu-toggle > .ui-icon,
.dialog-close > .ui-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

#lightbox-prev,
#lightbox-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}

#lightbox-prev > .ui-icon,
#lightbox-next > .ui-icon {
  width: 22px;
  height: 22px;
}

.video-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
}

.video-toggle .ui-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.admin-nav .admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  flex: 0 0 20px;
  line-height: 1;
}

.admin-nav button {
  min-height: 44px;
}

.staff-attachment > .ui-icon,
.staff-attachment > span:last-child > .ui-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.staff-empty > .ui-icon,
.staff-empty > span > .ui-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
}

@media (max-width: 600px) {
  body.owner-refresh .mobile-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  }

  body.owner-refresh .mobile-actions > a,
  body.owner-refresh .mobile-actions > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 54px;
    padding: 5px 3px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
  }

  body.owner-refresh .mobile-actions > :first-child {
    margin: 0 5px 0 0;
  }

  body.owner-refresh .mobile-actions > a > span,
  body.owner-refresh .mobile-actions > button > span {
    font-size: inherit;
    line-height: inherit;
  }

  body.owner-refresh .mobile-actions .ui-icon {
    display: block;
    width: 19px;
    height: 19px;
    min-width: 19px;
    margin: 0;
    stroke-width: 1.5;
    color: inherit;
  }
}

@media (forced-colors: active) {
  svg.ui-icon {
    stroke: currentColor;
    forced-color-adjust: auto;
  }
}