/*
 * Custom Elementor Dropdown
 */

.ced-dropdown {
  position: relative;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Button
 */

.ced-dropdown .ced-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  margin: 0;
  border: 0 solid;

  background-color: #222;
  color: #fff;

  cursor: pointer;

  font-family: inherit;
  font-size: 15px;
  font-weight: 500;

  /* Themes often force nowrap / centered text on buttons. */
  white-space: normal;
  text-align: left;

  transition: all 0.25s ease;
}

/*
 * Default states. They stop theme button hover/focus colors from leaking
 * in. Elementor style controls are more specific and override these.
 */
.ced-dropdown .ced-button:hover,
.ced-dropdown .ced-button:focus,
.ced-dropdown .ced-button:active {
  background-color: #222;
  color: #fff;
}

.ced-button-text {
  flex: 0 1 auto;
  min-width: 0;

  /* Long text wraps inside the button instead of running out of it. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Icons (button + dropdown items)
 */

.ced-button-icon,
.ced-item-icon {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  color: inherit;

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    fill 0.25s ease;
}

.ced-button-icon {
  font-size: 12px;
  transform: rotate(var(--ced-icon-rotate, 0deg));
}

.ced-item-icon {
  font-size: 14px;
  transform: rotate(var(--ced-item-icon-rotate, 0deg));
}

.ced-button-icon svg,
.ced-item-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Button icon: hover rotation (falls back to the normal rotation). */
.ced-dropdown .ced-button:hover .ced-button-icon,
.ced-dropdown .ced-button:focus-visible .ced-button-icon {
  transform: rotate(
    var(--ced-icon-rotate-hover, var(--ced-icon-rotate, 0deg))
  );
}

/* Button icon: open rotation. Must stay after the hover rule. */
.ced-dropdown.is-open .ced-button .ced-button-icon,
.ced-dropdown.is-open .ced-button:hover .ced-button-icon,
.ced-dropdown.is-open .ced-button:focus-visible .ced-button-icon {
  transform: rotate(var(--ced-icon-rotate-open, 180deg));
}

/*
 * Dropdown
 */

.ced-menu {
  position: absolute;

  top: calc(100% + 6px);
  left: 0;

  z-index: 99999;

  box-sizing: border-box;

  margin: 0;
  padding: 0;

  list-style: none;

  background-color: #fff;

  border: 1px solid #e5e5e5;
  border-radius: 4px;

  /* Keeps item hover backgrounds inside rounded corners. */
  overflow: hidden;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.ced-dropdown.is-open .ced-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ced-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ced-menu a {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;

  box-sizing: border-box;

  padding: 12px 16px;

  color: #222;
  background-color: transparent;

  text-align: left;
  text-decoration: none;
  white-space: normal;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.ced-dropdown .ced-menu a:hover,
.ced-dropdown .ced-menu a:focus-visible {
  background-color: #f5f5f5;
}

/*
 * The text takes the remaining space, so a right-positioned icon sits at
 * the far end of the item and a left-positioned icon sits at the start.
 */
.ced-item-text {
  flex: 1 1 auto;
  min-width: 0;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Dropdown icon: hover rotation (falls back to the normal rotation). */
.ced-menu a:hover .ced-item-icon,
.ced-menu a:focus-visible .ced-item-icon {
  transform: rotate(
    var(--ced-item-icon-rotate-hover, var(--ced-item-icon-rotate, 0deg))
  );
}

/*
 * Mobile
 */

@media (max-width: 767px) {
  .ced-dropdown {
    width: 100%;
  }

  .ced-button {
    width: 100%;
  }

  .ced-menu {
    width: 100%;
  }
}