/* uc-popup clean stylesheet
   Ensures visible left/right gaps on small screens and a compact height.
*/

:root{
  --uc-gap:16px;       /* guaranteed inset from left/right */
  --uc-mobile-max:340px; /* max width for mobile popup */
}

.uc-popup{
  position: fixed;
  left: var(--uc-gap);    /* enforce gap on left */
  right: var(--uc-gap);   /* enforce gap on right */
  bottom: calc(10px + env(safe-area-inset-bottom, 10px));
  z-index: 2147483000;
  display:block;
  pointer-events:auto;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.uc-popup-inner{
  width: 100%;             /* will be limited by parent left/right insets */
  max-width: var(--uc-mobile-max);
  margin: 0 auto;
  background: linear-gradient(135deg,#ed213a 0%,#93291e 100%);
  color: #fff;
  border-radius:10px;
  padding:10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 10px));
  box-shadow: 0 8px 20px rgba(16,24,40,0.12);
  display:flex;
  flex-direction:column;
  gap:6px;
  box-sizing: border-box;
  max-height: 150px; /* compact height */
  overflow: hidden;
}

.uc-popup.pulse .uc-popup-inner{ animation: uc-pulse 1s linear infinite; }
@keyframes uc-pulse{ 0%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-3px) scale(1.02); } 100%{ transform: translateY(0) scale(1); } }

.uc-popup-top{ display:flex; justify-content:center; align-items:center; text-align:center; position:relative; }
.uc-expire-label{ font-size:12px; font-weight:700; color:rgba(255,255,255,0.98); width:100%; text-align:center; }

.uc-timer-wrap{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.uc-timer{ display:flex; gap:6px; align-items:center; font-weight:700; }
.uc-timer .unit{ background: rgba(15,23,36,0.04); padding:4px 6px; border-radius:6px; min-width:34px; text-align:center; font-size:11px; }
.uc-timer .unit .value{ font-size:13px; font-weight:800; color:#fff; }
.uc-timer .unit .label{ font-size:9px; font-weight:600; color:rgba(255,255,255,0.95); }

.uc-names{ display:flex; align-items:center; justify-content:center; gap:6px; height:auto; max-height:48px; overflow:hidden; padding:0 4px; }
.uc-name-item{ display:block; width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; color:#fff; line-height:1.05; font-size: clamp(10px, 3.2vw, 13px); }

.uc-enroll{ display:flex; justify-content:center; }
.uc-enroll-btn{ display:inline-block; background: rgba(255,255,255,0.12); color:#fff; padding:8px 12px; border-radius:18px; text-decoration:none; font-weight:700; box-shadow:0 4px 8px rgba(0,0,0,0.16); border:1px solid rgba(255,255,255,0.08); font-size:13px; position:relative; overflow:hidden; transition: transform 200ms ease, box-shadow 200ms ease; }
.uc-enroll-btn::before{ content:''; position:absolute; left:-40%; top:-20%; width:40%; height:140%; background: rgba(255,255,255,0.12); transform: rotate(20deg); transition: left 450ms cubic-bezier(.2,.8,.2,1); }
.uc-enroll-btn:hover{ transform: translateY(-4px); box-shadow: 0 10px 26px rgba(237,33,58,0.22); }
.uc-enroll-btn:hover::before{ left:120%; }

/* medium screens */
@media (min-width:640px){
  :root{ --uc-mobile-max:420px; }
  .uc-popup{ left: calc(var(--uc-gap) + 12px); right: calc(var(--uc-gap) + 12px); }
  .uc-popup-inner{ max-height:170px; padding:10px 14px; }
  .uc-name-item{ font-size:13px; }
}

/* desktop */
@media (min-width:1024px){
  :root{ --uc-mobile-max:520px; }
  .uc-popup{ left: calc(var(--uc-gap) + 40px); right: calc(var(--uc-gap) + 40px); }
  .uc-popup-inner{ max-width:520px; max-height:200px; padding:12px 20px; }
  .uc-name-item{ font-size:14px; }
  .uc-timer .unit .value{ font-size:18px; }
}

/* very narrow phones: reduce side inset a tiny amount but still keep gap */
@media (max-width:340px){
  :root{ --uc-gap:12px; }
  .uc-popup{ left: var(--uc-gap); right: var(--uc-gap); }
  .uc-popup-inner{ padding-left:10px; padding-right:10px; }
}

/* ensure box-sizing consistent */
.uc-popup-inner, .uc-popup-inner *{ box-sizing: border-box; }