/* TWZ Premium Package UI V8 */

.twz-pack-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}

.twz-plan-premium{
  position:relative;
  overflow:hidden;
  border:none!important;
  border-radius:22px!important;
  padding:14px 12px 12px!important;
  background:
    radial-gradient(circle at top right, rgba(69,166,255,.25), transparent 36%),
    linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important;
  box-shadow:
    0 10px 24px rgba(10,79,180,.10),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
  transition:transform .25s ease, box-shadow .25s ease;
  animation:twzCardIn .45s ease both;
}

.twz-plan-premium:nth-child(2n){
  animation-delay:.06s;
}

.twz-plan-premium::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1.2px;
  border-radius:22px;
  background:linear-gradient(135deg,#1f7cff,#53d0ff,#1f7cff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.85;
}

.twz-plan-premium::after{
  content:"FAST SPEED";
  position:absolute;
  top:10px;
  right:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.3px;
  color:#fff;
  background:linear-gradient(135deg,#0a63e6,#13b1ff);
  padding:6px 9px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(14,108,234,.26);
  animation:twzPulseBadge 1.8s infinite;
}

.twz-plan-premium:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 30px rgba(10,79,180,.16),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.twz-plan-top{
  display:block!important;
  margin-bottom:10px!important;
  min-height:auto!important;
  padding-right:86px;
}

.twz-plan-title{
  font-size:15px!important;
  line-height:1.22!important;
  font-weight:900!important;
  color:#173454!important;
  margin:0!important;
  letter-spacing:-.2px;
}

.twz-plan-sub{
  font-size:11px!important;
  color:#6e7f97!important;
  margin-top:5px!important;
}

.twz-pill{
  display:none!important;
}

.twz-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0 0 10px!important;
}

.twz-meta-box{
  position:relative;
  border:none!important;
  border-radius:16px!important;
  padding:12px 8px!important;
  background:linear-gradient(180deg,#edf6ff,#f7fbff)!important;
  box-shadow:inset 0 0 0 1px rgba(23,101,212,.08);
}

.twz-meta-box b{
  font-size:15px!important;
  color:#173454!important;
  font-weight:900!important;
  margin-bottom:4px!important;
}

.twz-meta-box small{
  font-size:10px!important;
  color:#7a8ba4!important;
  font-weight:700!important;
}

.twz-meta-box:last-child{
  display:none!important;
}

.twz-price-row{
  margin:2px 0 10px!important;
  padding-top:2px!important;
}

.twz-price-wrap small{
  font-size:11px!important;
  color:#7a8ca6!important;
  margin-bottom:4px!important;
  font-weight:700!important;
}

.twz-big-price{
  font-size:32px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.7px!important;
  color:#045fde!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.twz-feature-line{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  margin-bottom:11px!important;
}

.twz-feature-line span{
  position:relative;
  border:none!important;
  border-radius:999px!important;
  padding:6px 9px!important;
  font-size:10px!important;
  font-weight:800!important;
  color:#36506f!important;
  background:linear-gradient(180deg,#eef6ff,#f8fbff)!important;
  box-shadow:inset 0 0 0 1px rgba(19,107,230,.07);
}

.twz-primary{
  position:relative;
  overflow:hidden;
  border:none!important;
  border-radius:15px!important;
  padding:13px 8px!important;
  min-height:46px;
  font-size:13px!important;
  font-weight:900!important;
  background:linear-gradient(135deg,#0458da,#0f83ff)!important;
  color:#fff!important;
  box-shadow:0 10px 18px rgba(6,93,222,.22)!important;
}

.twz-primary::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);
  animation:twzShimmer 2.6s infinite;
}

.twz-primary:active{
  transform:scale(.98);
}

@keyframes twzCardIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes twzPulseBadge{
  0%,100%{
    box-shadow:0 6px 14px rgba(14,108,234,.22);
    transform:scale(1);
  }
  50%{
    box-shadow:0 10px 18px rgba(14,108,234,.34);
    transform:scale(1.04);
  }
}

@keyframes twzShimmer{
  0%{ left:-120%; }
  100%{ left:140%; }
}

@media (max-width:390px){
  .twz-pack-grid{
    gap:10px!important;
  }
  .twz-plan-premium{
    padding:12px 10px 11px!important;
  }
  .twz-plan-premium::after{
    font-size:9px;
    padding:5px 8px;
    top:9px;
    right:9px;
  }
  .twz-plan-top{
    padding-right:78px;
  }
  .twz-plan-title{
    font-size:14px!important;
  }
  .twz-meta-box b{
    font-size:14px!important;
  }
  .twz-big-price{
    font-size:28px!important;
  }
  .twz-primary{
    font-size:12px!important;
    min-height:43px;
  }
}

@media (prefers-reduced-motion:reduce){
  .twz-plan-premium,
  .twz-plan-premium::after,
  .twz-primary::before{
    animation:none!important;
    transition:none!important;
  }
}