.ossp-overlay{
  position:fixed;
  inset:0;
  background:var(--ossp-overlay-bg,rgba(0,0,0,.6));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
  padding:16px;
}

.ossp-popup{
  position:relative;
  width:min(94vw,520px);
  background:var(--ossp-card-bg,#e0f7fa);
  border:8px solid var(--ossp-card-border,#c19bf5);
  border-radius:34px;
  padding:34px 18px 24px;
  text-align:center;
  box-shadow:0 20px 0 rgba(0,0,0,.1);
}

.ossp-close{
  position:absolute;
  top:10px;
  right:14px;
  border:0;
  background:transparent;
  font-size:24px;
  cursor:pointer;
  color:#f5576c;
  font-weight:800;
}

.ossp-character{
  position:absolute;
  top:-88px;
  left:-20px;
  width:120px;
  max-width:30vw;
  filter:drop-shadow(5px 5px 0 rgba(0,0,0,.12));
}

.ossp-title{
  margin:0 0 8px;
  font-weight:800;
  text-transform:uppercase;
  font-size:22px;
  color:#000 !important;
}

.ossp-timer{
  font-weight:700;
  color:#666;
  margin-bottom:14px;
}

.ossp-offer-card{
  background:linear-gradient(135deg,var(--ossp-offer-from,#f093fb),var(--ossp-offer-to,#f5576c));
  border-radius:22px;
  padding:16px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ossp-brand{
  background:rgba(255,255,255,.2);
  padding:8px 10px;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  line-height:1.1;
  white-space:pre-line;
}

.ossp-details{
  text-align:left;
  flex:1;
}

.ossp-main{
  display:block;
  font-weight:800;
  font-size:16px;
  line-height:1.2;
  color:#fff !important;
}

.ossp-sub{
  display:block;
  font-size:12px;
  line-height:1.3;
  opacity:.92;
  color:#fff !important;
}

.ossp-gift{
  font-size:30px;
}

.ossp-btn{
  display:inline-block;
  margin-top:16px;
  background:linear-gradient(180deg,var(--ossp-btn-from,#4facfe),var(--ossp-btn-to,#00f2fe));
  padding:13px 28px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  box-shadow:0 6px 0 var(--ossp-btn-shadow,#2196f3);
}

.ossp-note{
  font-size:11px;
  color:#777;
  margin-top:10px;
}

.ossp-brand-logo{
  max-width:100px;
  max-height:56px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* Підсвітка цифр / сум у тексті оферу */
.ossp-main .ossp-num,
.ossp-sub .ossp-num,
.ossp-main .num,
.ossp-sub .num,
.ossp-main strong,
.ossp-sub strong,
.ossp-main b,
.ossp-sub b{
  color:#40e36f !important;
  text-shadow:1px 1px 0 #000;
  font-weight:900;
}

/* Mobile tune */
@media (max-width: 767px){
  .ossp-popup{
    padding:30px 14px 18px;
    border-radius:26px;
  }

  .ossp-offer-card{
    padding:12px;
    gap:8px;
    align-items:center;
  }

  .ossp-brand{
    padding:6px 8px;
    border-radius:10px;
    min-width:56px;
  }

  .ossp-brand-logo{
    max-height:36px !important;
  }

  .ossp-main{
    font-size:14px;
    line-height:1.2;
  }

  .ossp-sub{
    font-size:11px;
    line-height:1.25;
  }

  .ossp-gift{
    display:none !important;
  }
}

/* After-submit image popup */
.ossp-after-popup{
  width:min(94vw,720px);
  padding:14px;
  border-radius:26px;
}

.ossp-after-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
}

.ossp-after-link{
  display:block;
  text-decoration:none;
}

/* ===== Desktop size tuning (PC) ===== */
@media (min-width: 992px){
  .ossp-popup{
    width:min(92vw,440px);
    padding:26px 16px 18px;
    border-radius:28px;
  }

  .ossp-character{
    width:98px;
    top:-72px;
    left:-16px;
  }

  .ossp-title{
    font-size:20px;
  }

  .ossp-offer-card{
    padding:16px;
    gap:12px;
  }

  .ossp-main{
    font-size:20px;   /* збільшив текст оферу на ПК */
    line-height:1.18;
  }

  .ossp-sub{
    font-size:14px;
    line-height:1.3;
  }

  .ossp-btn{
    padding:12px 22px;
  }
}

/* after-submit image popup on PC */
@media (min-width: 992px){
  .ossp-after-popup{
    width:min(92vw,420px);   /* значно компактніше для вертикального зображення */
    padding:12px;
  }

  .ossp-after-image{
    max-height:72vh;         /* щоб не розтягувався на весь екран */
    width:auto;
    max-width:100%;
    margin:0 auto;
    object-fit:contain;
    border-radius:16px;
  }
}