.uageek-popup {
  --uageek-popup-width: 900px;
  --uageek-popup-side-width: 340px;
  --uageek-popup-accent: #25c7da;
  --uageek-popup-button-bg: #25c7da;
  --uageek-popup-button-text: #0e1520;
  --uageek-popup-surface: #1b2230;
  --uageek-popup-surface-2: #151b27;
  --uageek-popup-text: #f4f6fa;
  --uageek-popup-muted: #9ea8b9;
  --uageek-popup-border: rgba(255,255,255,.09);
  --uageek-popup-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  --uageek-popup-fallback-delay: 7s;
  box-sizing: border-box;
  position: fixed;
  z-index: 2147483000;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(var(--uageek-popup-width), calc(100vw - 32px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  content-visibility: visible !important;
}

.uageek-popup *, .uageek-popup *::before, .uageek-popup *::after { box-sizing: border-box; }
.uageek-popup--suppressed { display: none !important; }

.uageek-popup__dismiss-toggle {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.uageek-popup__dismiss-toggle:checked ~ .uageek-popup__campaign { display: none !important; }
.uageek-popup__dismiss-toggle:checked ~ .uageek-popup__close { display: none !important; }

.uageek-popup--bottom-center { left: 50%; right: auto; transform: translate(-50%, 14px); }
.uageek-popup--bottom-right { right: 18px; width: min(var(--uageek-popup-side-width), calc(100vw - 36px)); }
.uageek-popup--bottom-left { left: 18px; width: min(var(--uageek-popup-side-width), calc(100vw - 36px)); }

.uageek-popup.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.uageek-popup--bottom-center.is-visible { transform: translate(-50%, 0); }
.uageek-popup--bottom-right.is-visible, .uageek-popup--bottom-left.is-visible { transform: translateY(0); }

/* Fixed clean UAGEEK palettes. Auto mode only chooses dark/light; it no longer invents mixed page colors. */
.uageek-popup[data-resolved-theme="dark"] {
  --uageek-popup-surface: #1b2230;
  --uageek-popup-surface-2: #151b27;
  --uageek-popup-text: #f4f6fa;
  --uageek-popup-muted: #9ea8b9;
  --uageek-popup-border: rgba(255,255,255,.11);
  --uageek-popup-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
}
.uageek-popup[data-resolved-theme="light"] {
  --uageek-popup-surface: #ffffff;
  --uageek-popup-surface-2: #f4f6f8;
  --uageek-popup-text: #151923;
  --uageek-popup-muted: #697386;
  --uageek-popup-border: rgba(15,23,42,.12);
  --uageek-popup-shadow: 0 10px 28px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.07);
}

.uageek-popup__campaign { display: none; }
.uageek-popup__campaign.is-active { display: block; }

.uageek-popup__card {
  position: relative;
  overflow: hidden;
  background: var(--uageek-popup-surface);
  border: 1px solid var(--uageek-popup-border);
  border-radius: 14px;
  box-shadow: var(--uageek-popup-shadow);
  color: var(--uageek-popup-text);
}

/* CENTER: compact 90px desktop bar. The exact 16:9 banner defines the full card height. */
.uageek-popup--bottom-center .uageek-popup__card {
  display:grid;
  grid-template-columns:160px minmax(0,1fr) auto;
  align-items:stretch;
  height:90px;
  min-height:90px;
  max-height:90px;
}
.uageek-popup--bottom-center .uageek-popup__media {
  width:160px;
  height:90px;
  min-height:90px;
  aspect-ratio:16 / 9;
  overflow:hidden;
  align-self:stretch;
  background:transparent;
  border-right:1px solid var(--uageek-popup-border);
}
.uageek-popup--bottom-center .uageek-popup__media img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.uageek-popup--bottom-center .uageek-popup__body {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:8px 14px;
  overflow:hidden;
}
.uageek-popup--bottom-center .uageek-popup__title {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:14.5px;
  line-height:1.16;
}
.uageek-popup--bottom-center .uageek-popup__text {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-top:2px;
  font-size:11px;
  line-height:1.25;
}
.uageek-popup--bottom-center .uageek-popup__eyebrow {
  padding:3px 6px;
  font-size:9px;
}
.uageek-popup--bottom-center .uageek-popup__action {
  display:flex;
  align-items:center;
  padding:8px 46px 8px 4px;
}
.uageek-popup--bottom-center .uageek-popup__button {
  min-height:38px;
  padding:8px 13px;
}
.uageek-popup--bottom-center .uageek-popup__campaign--no-media .uageek-popup__card {
  grid-template-columns:minmax(0,1fr) auto;
}
.uageek-popup--bottom-center .uageek-popup__campaign--no-media .uageek-popup__body { padding-left:16px; }

/* SIDES: classic 16:9 card. */
.uageek-popup--bottom-right .uageek-popup__card,
.uageek-popup--bottom-left .uageek-popup__card { display:flex; flex-direction:column; }
.uageek-popup--bottom-right .uageek-popup__media,
.uageek-popup--bottom-left .uageek-popup__media {
  width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--uageek-popup-surface-2); border-bottom:1px solid var(--uageek-popup-border);
}
.uageek-popup--bottom-right .uageek-popup__media img,
.uageek-popup--bottom-left .uageek-popup__media img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.uageek-popup--bottom-right .uageek-popup__body,
.uageek-popup--bottom-left .uageek-popup__body { min-width:0; display:flex; flex-direction:column; gap:7px; padding:16px 16px 12px; }
.uageek-popup--bottom-right .uageek-popup__action,
.uageek-popup--bottom-left .uageek-popup__action { padding:0 16px 16px; }
.uageek-popup--bottom-right .uageek-popup__button,
.uageek-popup--bottom-left .uageek-popup__button { width:100%; justify-content:space-between; }

.uageek-popup__copy { min-width:0; }
.uageek-popup__eyebrows { display:flex; align-items:center; flex-wrap:wrap; gap:5px; align-self:flex-start; }
.uageek-popup__eyebrow {
  align-self:flex-start; display:inline-flex; margin:0; padding:4px 7px; border-radius:999px;
  background: color-mix(in srgb, var(--uageek-popup-accent) 13%, transparent);
  color:var(--uageek-popup-accent); font-size:9.5px; line-height:1; font-weight:800; letter-spacing:.055em; text-transform:uppercase;
}
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .uageek-popup__eyebrow { background: rgba(37,199,218,.12); }
}
.uageek-popup__title { margin:0; padding:0; color:var(--uageek-popup-text); font-size:16px; line-height:1.2; font-weight:800; letter-spacing:-.012em; }
.uageek-popup__text {
  display:-webkit-box; overflow:hidden; margin-top:4px; color:var(--uageek-popup-muted); font-size:12px; line-height:1.38;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

.uageek-popup__button {
  display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:136px; min-height:40px; padding:9px 14px;
  border:0; border-radius:9px; background:var(--uageek-popup-button-bg); color:var(--uageek-popup-button-text)!important;
  text-decoration:none!important; white-space:nowrap; font-size:12.5px; line-height:1.1; font-weight:800; box-shadow:none!important;
  transition:transform .14s ease, filter .14s ease;
}
.uageek-popup__button-arrow { font-size:16px; line-height:1; }

.uageek-popup__close {
  position:absolute; top:8px; right:8px; left:auto; z-index:20; width:28px; height:28px; display:inline-grid; place-items:center; padding:0;
  border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(12,17,26,.76); color:#f5f7fb;
  box-shadow:0 2px 8px rgba(0,0,0,.14); font:400 18px/1 Arial,sans-serif; cursor:pointer; appearance:none; -webkit-appearance:none;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media (hover:hover) and (pointer:fine) {
  .uageek-popup__button:hover { transform:translateY(-1px); filter:brightness(.96); }
  .uageek-popup__close:hover { color:var(--uageek-popup-text); }
}
.uageek-popup__close:focus-visible, .uageek-popup__button:focus-visible { outline:2px solid var(--uageek-popup-accent); outline-offset:2px; }

/* CSS reliability fallback: if an optimizer delays JS, the first campaign still appears after the configured delay. */
.uageek-popup:not(.uageek-popup--js-controlled):not(.uageek-popup--suppressed) {
  animation: uageek-popup-fallback-side .01s step-end var(--uageek-popup-fallback-delay) forwards;
}
.uageek-popup--bottom-center:not(.uageek-popup--js-controlled):not(.uageek-popup--suppressed) {
  animation-name: uageek-popup-fallback-center;
}

/* MOBILE: compact 16:9 media + text/CTA grid.
   No artificial text clamp: the full description can use the available space.
   Vertical padding/gaps are intentionally tight so the card stays compact. */
@media (max-width: 782px) {
  .uageek-popup {
    top:auto!important;
    right:auto!important;
    bottom:max(9px, env(safe-area-inset-bottom))!important;
    left:50%!important;
    width:min(424px, calc(100vw - 12px))!important;
    max-width:none!important;
    transform:translate(-50%, 12px)!important;
  }
  .uageek-popup.is-visible { transform:translate(-50%, 0)!important; }
  .uageek-popup--hide-mobile { display:none!important; }
  .uageek-popup:not(.uageek-popup--js-controlled):not(.uageek-popup--suppressed) { animation-name:uageek-popup-fallback-mobile!important; }

  .uageek-popup__card {
    display:grid!important;
    grid-template-columns:108px minmax(0,1fr)!important;
    grid-template-rows:auto auto 28px!important;
    column-gap:10px!important;
    row-gap:2px!important;
    padding:6px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    border-radius:15px!important;
    background:var(--uageek-popup-surface)!important;
    border:1px solid var(--uageek-popup-border)!important;
    box-shadow:var(--uageek-popup-shadow)!important;
    align-items:center!important;
  }

  .uageek-popup__body,
  .uageek-popup__copy { display:contents!important; }

  .uageek-popup__eyebrows {
    grid-column:1!important;
    grid-row:1!important;
    width:max-content!important;
    max-width:none!important;
    justify-self:center!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:scale(var(--uageek-eyebrow-scale, 1))!important;
    transform-origin:center center!important;
  }
  .uageek-popup__eyebrow {
    flex:0 0 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:3px 5px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  .uageek-popup__title {
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    min-width:0!important;
    padding:0 28px 0 0!important;
    margin:0!important;
    display:block!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:13.5px!important;
    line-height:16px!important;
    font-weight:800!important;
  }

  .uageek-popup__media {
    grid-column:1!important;
    grid-row:2 / 4!important;
    width:108px!important;
    height:60.75px!important;
    min-height:60.75px!important;
    aspect-ratio:16 / 9!important;
    align-self:center!important;
    justify-self:center!important;
    margin:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
  }
  .uageek-popup__media img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .uageek-popup__text {
    grid-column:2!important;
    grid-row:2!important;
    align-self:start!important;
    min-width:0!important;
    display:block!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    color:var(--uageek-popup-muted)!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    white-space:normal!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:initial!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  .uageek-popup__action {
    grid-column:2!important;
    grid-row:3!important;
    align-self:end!important;
    justify-self:stretch!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    height:28px!important;
    padding:0!important;
    margin:0!important;
    min-width:0!important;
  }

  .uageek-popup__button {
    width:100%!important;
    min-width:0!important;
    min-height:28px!important;
    height:28px!important;
    padding:5px 10px!important;
    border-radius:8px!important;
    justify-content:space-between!important;
    gap:7px!important;
    font-size:11px!important;
    line-height:1!important;
    max-width:100%!important;
  }
  .uageek-popup__button-arrow { font-size:13px!important; }

  .uageek-popup__close {
    top:6px!important;
    right:6px!important;
    left:auto!important;
    width:24px!important;
    height:24px!important;
    font-size:15px!important;
  }

  .uageek-popup__campaign--no-media .uageek-popup__text {
    grid-column:1 / -1!important;
    grid-row:2!important;
  }
  .uageek-popup__campaign--no-media .uageek-popup__action {
    grid-column:1 / -1!important;
    grid-row:3!important;
  }
}

@media (max-width: 360px) {
  .uageek-popup {
    width:calc(100vw - 8px)!important;
    bottom:max(5px, env(safe-area-inset-bottom))!important;
  }
  .uageek-popup__card {
    grid-template-columns:96px minmax(0,1fr)!important;
    grid-template-rows:auto auto 27px!important;
    column-gap:8px!important;
    row-gap:2px!important;
    padding:5px!important;
    border-radius:14px!important;
  }
  .uageek-popup__media {
    width:96px!important;
    height:54px!important;
    min-height:54px!important;
    aspect-ratio:16/9!important;
    border-radius:8px!important;
  }
  .uageek-popup__media img { height:100%!important; min-height:0!important; object-fit:contain!important; }
  .uageek-popup__eyebrows { width:max-content!important; max-width:none!important; gap:2px!important; }
  .uageek-popup__eyebrow { max-width:none!important; font-size:7.4px!important; padding:3px 4px!important; }
  .uageek-popup__title { font-size:12.2px!important; line-height:15px!important; padding-right:27px!important; }
  .uageek-popup__text { font-size:9.8px!important; line-height:1.18!important; }
  .uageek-popup__action { height:27px!important; }
  .uageek-popup__button { min-height:27px!important; height:27px!important; padding:5px 9px!important; font-size:10.5px!important; }
  .uageek-popup__close { top:5px!important; right:5px!important; width:23px!important; height:23px!important; font-size:14px!important; }
}

@keyframes uageek-popup-fallback-side {
  to { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
}
@keyframes uageek-popup-fallback-center {
  to { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
}
@keyframes uageek-popup-fallback-mobile {
  to { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
}

@media (prefers-reduced-motion: reduce) {
  .uageek-popup, .uageek-popup__button { transition:none; }
}