#ucb-root, #ucb-root *{box-sizing:border-box;}
#ucb-root{isolation:isolate;contain:layout style;}
#ucb-root .ucb-banner,#ucb-root .ucb-reopen{all:initial;font-family:var(--ucb-font,system-ui,sans-serif);box-sizing:border-box;}
#ucb-root .ucb-banner *,#ucb-root .ucb-banner *::before,#ucb-root .ucb-banner *::after,#ucb-root .ucb-reopen{box-sizing:border-box;}
.ucb-banner,
.ucb-reopen {
  box-sizing: border-box;
  font-family: var(--ucb-font, inherit);
}

.ucb-banner *,
.ucb-banner *::before,
.ucb-banner *::after {
  box-sizing: border-box;
}

.ucb-banner, .ucb-banner *, .ucb-reopen{
  font-family: inherit;
}

.ucb-banner button,
.ucb-banner .ucb-btn,
.ucb-reopen{
  -webkit-appearance:none;appearance:none;
  background-image:none !important;
  text-shadow:none !important;
  box-shadow:none;
  outline:none;
}

.ucb-banner {
  position: fixed;
  z-index: 999999;
  background: var(--ucb-bg);
  color: var(--ucb-text);
  border: 1px solid var(--ucb-border);
  border-radius: var(--ucb-radius);
  box-shadow: 0 18px 50px var(--ucb-shadow);
  font-size: var(--ucb-font-size);
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.ucb-banner[hidden],
.ucb-reopen[hidden] {
  display: none !important;
}

.ucb-banner.ucb-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ucb-position-bottom.ucb-visible {
  transform: translateX(-50%) translateY(0);
}

.ucb-position-top.ucb-visible {
  transform: translateX(-50%) translateY(0);
}

.ucb-layout-boxed {
  width: min(calc(100% - 32px), var(--ucb-max-width));
}

.ucb-layout-full {
  width: calc(100% - 32px);
  border-radius: var(--ucb-radius);
}

.ucb-position-bottom {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(18px);
}

.ucb-position-top {
  left: 50%;
  top: 16px;
  transform: translateX(-50%) translateY(-18px);
}

.ucb-position-bottom-left {
  left: 16px;
  bottom: 16px;
  width: min(calc(100% - 32px), 460px);
  transform: translateY(18px);
}

.ucb-position-bottom-right {
  right: 16px;
  bottom: 16px;
  width: min(calc(100% - 32px), 460px);
  transform: translateY(18px);
}

.ucb-animation-fade {
  transform: none;
}

.ucb-animation-none {
  transition: none;
  transform: none;
}

.ucb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: var(--ucb-padding);
}

.ucb-heading {
  color: var(--ucb-heading);
  font-size: var(--ucb-heading-size);
  font-weight: 700;
  margin: 0 0 4px;
}

.ucb-message p {
  margin: 0;
}

.ucb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 7px;
}

.ucb-banner .ucb-links a {
  color: var(--ucb-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ucb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ucb-banner .ucb-btn,
.ucb-reopen {
  border: 0;
  cursor: pointer;
  font: inherit;
  border-radius: calc(var(--ucb-radius) * .72);
  padding: 10px 16px;
  min-height: 40px;
  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}

.ucb-banner .ucb-btn:hover,
.ucb-reopen:hover {
  transform: translateY(-1px);
}

.ucb-banner .ucb-btn.ucb-btn-primary {
  background: var(--ucb-button-bg) !important;
  color: var(--ucb-button-text) !important;
  font-weight: 700;
}

.ucb-banner .ucb-btn.ucb-btn-primary:hover,
.ucb-banner .ucb-btn.ucb-btn-primary:focus-visible {
  background: var(--ucb-button-hover) !important;
}

.ucb-banner .ucb-btn.ucb-btn-secondary {
  background: var(--ucb-secondary-bg) !important;
  color: var(--ucb-secondary-text) !important;
  border: 1px solid var(--ucb-border);
}

.ucb-reopen {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999998;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999998;
  background: var(--ucb-bg) !important;
  color: var(--ucb-link) !important;
  border: 1px solid var(--ucb-border);
  box-shadow: 0 12px 32px var(--ucb-shadow);
  font-size: 12px;
  padding: 9px 12px;
}

@media (max-width: 720px) {
  .ucb-inner {
    display: block;
  }

  .ucb-actions {
    margin-top: 14px;
    width: 100%;
  }

  .ucb-btn {
    width: 100%;
  }

  .ucb-position-bottom-left,
  .ucb-position-bottom-right,
  .ucb-position-bottom,
  .ucb-position-top {
    left: 12px;
    right: 12px;
    width: auto;
    transform: translateY(18px);
  }

  .ucb-position-top {
    transform: translateY(-18px);
  }

  .ucb-position-bottom.ucb-visible,
  .ucb-position-top.ucb-visible,
  .ucb-position-bottom-left.ucb-visible,
  .ucb-position-bottom-right.ucb-visible {
    transform: translateY(0);
  }
}