/* Root overlay */
.wceip-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,var(--wceip-overlay,0.45));
  opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:999999;
  --shadow-val: 0 18px 50px rgba(0,0,0, calc((var(--wceip-shadow,0.2))));
}
.wceip-overlay.wceip-open{ opacity:1; pointer-events:auto; }
.wceip-overlay[data-gradient="1"] .wceip-cta {
    background: linear-gradient(244deg,
 color-mix(in srgb, #f7b6e6 100%, #000000ed 0%) 0%,
 color-mix(in srgb, #992d7d 85%, #fff 0%) 100%);
    color: #fff;
}
/* Theme */
.wceip-overlay[data-theme="dark"] .wceip-modal { background: #141414; color:#f4f4f4; }
.wceip-overlay[data-theme="system"] { color-scheme: light dark; }

/* Modal container */
.wceip-modal{
  background: var(--wceip-bg,#fff);
  color: var(--wceip-fg,#111);
  width: min(92vw, var(--wceip-maxw,560px));
  border-radius: var(--wceip-radius,16px);
  box-shadow: var(--shadow-val);
  outline:none; transform: translateY(10px);
  transition: transform .22s ease;
  max-height: 88vh; overflow:auto;
}

/* Open animation */
.wceip-overlay.wceip-open .wceip-modal{ transform: translateY(0); }

/* Bottom sheet layout */
.wceip-overlay[data-layout="sheet"]{
  align-items:flex-end;
}
.wceip-overlay[data-layout="sheet"] .wceip-modal{
  width: 100%;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  max-height: 75vh;
}

/* Close button */
.wceip-close{
  position:absolute; left:12px; top:10px; border:none; background:transparent;
  font-size:28px; line-height:1; cursor:pointer; color:inherit; opacity:.8;
}
.wceip-close:hover{ opacity:1; }

/* Media (optional image) */
.wceip-media img{
  display:block; width:100%; height:auto; border-top-left-radius:inherit; border-top-right-radius:inherit;
}

/* Content */
.wceip-content{ padding: 20px 18px 22px; }
.wceip-title{ margin:0 0 8px; font-size: clamp(20px, 2.4vw, 28px); line-height:1.2; }
.wceip-body{ font-size: 16px; line-height:1.6; margin-bottom:14px; opacity:.92; }
.wceip-coupon{
  display:flex; gap:10px; align-items:center; margin: 10px 0 14px; justify-content: center;
  background: color-mix(in srgb, var(--wceip-accent,#5b8cff) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--wceip-accent,#5b8cff) 35%, #000 0%);
  border-radius: 12px; padding: 10px 12px;
}
a.wceip-secondary {
    color: #663361;
}
.wceip-coupon code {
    color: #8c328d;
    font-size: 24px;
}
a.wceip-cta {
    background: linear-gradient(135deg,
 color-mix(in srgb, #af85a4 100%, #000 0%) 0%,
 color-mix(in srgb, #e41ca8 85%, #fff 0%) 100%);
}
.wceip-coupon {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0 14px;
    background:
 color-mix(in srgb, #6f487a 12%, #fff);
    border: 1px solid
 color-mix(in srgb, var(--wceip-accent, #5b8cff) 35%, #000 0%);
    border-radius: 12px;
    padding: 10px 12px;
    justify-content: center;
}

.wceip-coupon code{ font-weight:700; font-size: 16px; }
.wceip-copy{
  border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer;
}
.wceip-overlay[data-theme="dark"] .wceip-copy{ background:#1f1f1f; color:#fff; border-color:#333; }

/* CTA */
.wceip-cta{
  display:inline-block; text-decoration:none; margin: 4px 0 10px;
  padding: 12px 16px; border-radius: 12px; font-weight:700;
  background: var(--wceip-accent,#5b8cff); color: var(--wceip-accent-text,#fff);
  box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.wceip-cta:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.20); }
.wceip-cta:active{ transform: translateY(0); }

.wceip-overlay[data-gradient="1"] .wceip-cta{
  background: linear-gradient(135deg, color-mix(in srgb, var(--wceip-accent,#5b8cff) 100%, #000 0%) 0%,
                                     color-mix(in srgb, var(--wceip-accent,#5b8cff) 85%, #fff 0%) 100%);
}

/* Secondary */
.wceip-secondary{
  display:inline-block; margin-left: 12px; opacity:.8; font-weight:600;
}
.wceip-secondary:hover{ opacity:1; }

/* Countdown */
.wceip-countdown{
  margin-top: 10px; font-size: 14px; opacity:.9;
}

/* Mobile tweaks */
@media (max-width: 480px){
  .wceip-content{ padding: 18px 16px 20px; }
  .wceip-title{ font-size: clamp(18px, 5.6vw, 24px); }
  .wceip-body{ font-size: 15px; }
}