/* /data/css/site.popdown.css */

.popdown{
  position: fixed;
  left: 16px;
  right: 16px;
  top: 12px;
  z-index: 999;
  pointer-events: none;
}

.popdown-inner{
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
  pointer-events: auto;

  background: rgba(255,255,255,.90);
  border: 1px solid rgba(47,47,47,.22);
  border-radius: 14px;
  box-shadow: var(--shadow);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;

  transform: translateY(-140%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

.popdown.is-show .popdown-inner{
  transform: translateY(0);
  opacity: 1;
}

.popdown-title{
  margin: 0;
  font-weight: 800;
  color: var(--dark);
  font-size: 1rem;
}

.popdown-msg{
  margin: 2px 0 0;
  color: rgba(43,43,43,.86);
  font-size: .95rem;
}

.popdown-close{
  flex: 0 0 auto;
  border: 1px solid rgba(47,47,47,.18);
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.popdown-close:hover{
  opacity:1;
  filter: brightness(1.03);
}
.popdown-close:active{ transform: translateY(1px); }

.popdown-x{
  position: relative;
  width: 14px;
  height: 14px;
}

.popdown-x::before,
.popdown-x::after{
  content:"";
  position:absolute;
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
  background: var(--dark);
  border-radius: 2px;
}
.popdown-x::before{ transform: rotate(45deg); }
.popdown-x::after{ transform: rotate(-45deg); }

.popdown.success .popdown-inner{
  background: linear-gradient(
    135deg,
    rgba(224, 242, 230, .85),
    rgba(255, 255, 255, .92)
  );
  border-color: rgba(60, 120, 80, .25);
}

.popdown.error .popdown-inner{
  background: linear-gradient(
    135deg,
    rgba(245, 220, 220, .85),
    rgba(255, 255, 255, .92)
  );
  border-color: rgba(140, 60, 60, .25);
}