.promo-overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.6);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:99999;
}
.promo-box{
 background:#fff;
 padding:30px;
 border-radius:12px;
 width:90%;
 max-width:420px;
 text-align:center;
 position:relative;
 font-family:Arial, sans-serif;
}
.promo-code{
 font-size:20px;
 font-weight:bold;
 background:#000;
 color:#fff;
 padding:10px;
 border-radius:8px;
 margin-top:10px;
}
.promo-copy-btn{
 margin-top:10px;
 padding:10px 14px;
 cursor:pointer;
}
.promo-copy-hint{
 margin-top:8px;
 font-size:12px;
}
.promo-close{
 position:absolute;
 top:10px;
 right:15px;
 font-size:22px;
 cursor:pointer;
}
/* Slide-In Banner (U-like) */
.promo-slide{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 14px;
  z-index: 99999;
  transform: translateX(140%);
  transition: transform 300ms ease;
  font-family: Arial, sans-serif;
}
.promo-slide--in{
  transform: translateX(0);
}
.promo-slide-close{
  position:absolute;
  right:10px;
  top:8px;
  cursor:pointer;
  font-size:18px;
}
.promo-slide-title{
  font-weight:700;
  margin-bottom:6px;
}
.promo-slide-text{
  font-size:13px;
  line-height:1.35;
  margin-bottom:10px;
}
.promo-slide-cta{
  padding:10px 12px;
  cursor:pointer;
}

/* Empfehlungen im Slide-in */
.promo-reco-grid{
  display:flex;
  gap:10px;
  margin:10px 0 12px 0;
}
.promo-reco-item{
  display:block;
  width: 120px;
  text-decoration:none;
  color:inherit;
}
.promo-reco-thumb{
  width:100%;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,.05);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.promo-reco-img{
  max-width:100%;
  max-height:100%;
  display:block;
}
.promo-reco-name{
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
}
/* Optional: Cart Slide optisch hervorheben */
.promo-slide-cart{
  border: 2px solid rgba(0,0,0,.08);
}

/* =========================================================
   Spiegelshop24 Promo - Exit Popup (Uptain-Lookalike)
   Ziel: Popup wie Bild 2 (weiß, großer Text, Schatten, gelber Button)
   ========================================================= */

.popup-container{
  position: fixed !important;
  z-index: 999999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

/* eigentliche Box */
.popup-container .__up_pop-content{
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 45px rgba(0,0,0,.35);
  padding: 26px 28px 22px;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

/* Close X oben rechts */
.popup-container .promo-x,
.popup-container .__up_close{
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 20px;
  color: #111;
  opacity: .65;
  user-select: none;
}
.popup-container .promo-x:hover,
.popup-container .__up_close:hover{
  opacity: 1;
  background: rgba(0,0,0,.06);
}

/* Text-Styles */
.popup-container .__up_entry .__up_h2{
  display:block;
  font-size: 18px;
  color:#222;
  margin-bottom: 8px;
}

.popup-container .__up_shout_out .__up_h1{
  display:block;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .5px;
  color:#000;
  margin: 0 0 10px 0;
}

.popup-container .__up_exit .__up_h2{
  display:block;
  font-size: 18px;
  color:#222;
  margin: 0 0 14px 0;
}

.popup-container .__up_action_explanation .__up_h3{
  display:block;
  font-size: 13px;
  color:#555;
  margin: 0 0 12px 0;
}

/* Input + Button Zeile */
.popup-container .__up_action{
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px 0;
}

/* Code-Feld */
.popup-container .__up_code_value{
  flex: 1 1 auto;
  height: 54px;
  border-radius: 6px;
  border: 0;
  background: #f7d6d6;     /* zart rosa wie Bild 2 */
  padding: 0 16px;
  font-size: 18px;
  outline: none;
}

/* Gelber Button */
.popup-container .__up_action_button{
  flex: 0 0 auto;
  height: 54px;
  min-width: 210px;
  border: 0;
  border-radius: 6px;
  background: #f1d64a;
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  text-transform: uppercase;
}
.popup-container .__up_action_button:hover{
  filter: brightness(1.03);
}

/* “Nein danke…” */
.popup-container .__up_dismiss{
  cursor: pointer;
  margin: 8px 0 6px 0;
}
.popup-container .__up_dismiss .__up_h4{
  color: #f1d64a;
  font-size: 16px;
  font-weight: 700;
}

/* Footer */
.popup-container .__up_footer .__up_h3{
  color:#666;
  font-size: 12px;
  margin-top: 6px;
}

/* Mobile */
@media (max-width: 560px){
  .popup-container .__up_shout_out .__up_h1{ font-size: 40px; }
  .popup-container .__up_action{ flex-direction: column; align-items: stretch; }
  .popup-container .__up_action_button{ min-width: 0; width: 100%; }
}