/* TONFLIX VIP modal: compact desktop fit, centered pricing, and mobile checkout. */
#modalOverlay{
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(229,9,20,.22),transparent 34%),
    radial-gradient(circle at 86% 4%,rgba(168,255,0,.10),transparent 28%),
    rgba(0,0,0,.9)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

#modalOverlay .vip-modal{
  box-sizing:border-box!important;
  width:min(960px,100%)!important;
  max-width:960px!important;
  max-height:calc(100dvh - 24px)!important;
  margin:auto!important;
  padding:22px 26px 18px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 22%),
    linear-gradient(145deg,#191b21 0%,#101116 55%,#0b0c10 100%)!important;
  box-shadow:0 32px 110px rgba(0,0,0,.8),0 0 0 1px rgba(168,255,0,.035) inset!important;
  scrollbar-width:thin;
  scrollbar-color:var(--neon) rgba(255,255,255,.06);
}

#modalOverlay .vip-modal::before{
  content:"";
  position:absolute;
  top:0;
  left:22%;
  right:22%;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--red),var(--neon));
  box-shadow:0 0 20px rgba(168,255,0,.24);
}

#modalOverlay .modal-close{
  top:12px!important;
  right:12px!important;
  width:42px!important;
  height:42px!important;
  border-color:rgba(255,255,255,.14)!important;
  background:#202228!important;
  color:#fff!important;
}
#modalOverlay .modal-close:hover,
#modalOverlay .modal-close:focus-visible{
  border-color:var(--red)!important;
  background:var(--red)!important;
  outline:2px solid var(--neon)!important;
  outline-offset:2px!important;
}

#modalOverlay .vip-modal-head{
  max-width:760px!important;
  margin:0 auto 13px!important;
  padding:0 54px!important;
  text-align:center!important;
}
#modalOverlay .vip-modal-kicker{
  padding:6px 13px!important;
  border-color:rgba(168,255,0,.42)!important;
  background:rgba(168,255,0,.08)!important;
  color:var(--neon)!important;
  box-shadow:0 0 24px rgba(168,255,0,.06)!important;
}
#modalOverlay .vip-modal-head h3{
  margin:11px 0 6px!important;
  font-size:clamp(31px,3.2vw,42px)!important;
  line-height:1.02!important;
  text-align:center!important;
  text-wrap:balance;
}
#modalOverlay .vip-modal-head .sub{
  max-width:690px!important;
  margin:0 auto!important;
  color:#c3c6ce!important;
  font-size:13.5px!important;
  line-height:1.5!important;
  text-align:center!important;
}

#modalOverlay .vip-benefits{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  margin:0 0 14px!important;
}
#modalOverlay .vip-benefit{
  box-sizing:border-box!important;
  min-height:78px!important;
  padding:10px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  text-align:center!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018))!important;
}
#modalOverlay .vip-benefit-icon{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  margin-bottom:2px;
  border:1px solid rgba(168,255,0,.45);
  border-radius:50%;
  background:rgba(168,255,0,.09);
  color:var(--neon);
  font:900 12px/1 'JetBrains Mono';
}
#modalOverlay .vip-benefit strong{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font-size:12.5px!important;
  line-height:1.15!important;
  text-align:center!important;
}
#modalOverlay .vip-benefit-copy{
  display:block;
  color:#aeb2bb;
  font-size:10.5px;
  line-height:1.25;
  text-align:center;
}

#modalOverlay .modal-plan-heading{
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 9px!important;
  text-align:center!important;
}
#modalOverlay .modal-plan-heading h4{
  font-size:16px!important;
  text-align:center!important;
}
#modalOverlay .modal-plan-heading span{
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.13);
  color:#9da2ac!important;
}

#modalOverlay .modal-plans{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
  margin:0 0 11px!important;
}
#modalOverlay .mplan{
  box-sizing:border-box!important;
  min-height:94px!important;
  padding:11px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:13px!important;
  background:linear-gradient(155deg,#1a1c22,#111217)!important;
}
#modalOverlay .mplan:hover{
  border-color:rgba(229,9,20,.7)!important;
  box-shadow:0 8px 24px rgba(229,9,20,.10)!important;
}
#modalOverlay .mplan.selected{
  border:2px solid var(--neon)!important;
  background:linear-gradient(155deg,rgba(168,255,0,.18),rgba(18,24,13,.98))!important;
  box-shadow:0 0 0 2px rgba(168,255,0,.08),0 12px 30px rgba(0,0,0,.3)!important;
}
#modalOverlay .mplan.best-choice::after{
  top:7px!important;
  right:7px!important;
  padding:3px 6px!important;
  background:var(--neon)!important;
  color:#081000!important;
  font-size:8px!important;
}
#modalOverlay .mplan .mp-name{
  font-size:18px!important;
  line-height:1.05!important;
  text-align:center!important;
}
#modalOverlay .mplan .mp-bonus{
  min-height:12px;
  margin-top:3px!important;
  font-size:10px!important;
  text-align:center!important;
}
#modalOverlay .mplan .mp-price{
  margin-top:5px!important;
  color:#fff!important;
  font-size:29px!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 3px 18px rgba(0,0,0,.45);
}
#modalOverlay .mplan .mp-price .p{color:#ff334a!important;}
#modalOverlay .mplan .mp-selected{
  position:absolute;
  left:9px;
  bottom:7px;
  margin:0!important;
  font-size:7.5px!important;
}

#modalOverlay .vip-checkout-area{position:relative;}
#modalOverlay .vip-selected-summary{
  justify-content:center!important;
  gap:28px!important;
  margin:0 0 10px!important;
  padding:9px 14px!important;
  text-align:center!important;
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(90deg,rgba(229,9,20,.07),rgba(168,255,0,.055))!important;
}
#modalOverlay .vip-selected-summary > div{text-align:center!important;}
#modalOverlay .vip-selected-summary .label,
#modalOverlay .vip-selected-summary .value{text-align:center!important;}
#modalOverlay .vip-selected-summary .price{
  color:#ff334a!important;
  font-size:30px!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 0 22px rgba(229,9,20,.22);
}
#modalOverlay .vip-modal .btn-vip{
  min-height:48px!important;
  padding:12px 18px!important;
  border:1px solid #ff2439!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#ff172d,var(--red))!important;
  color:#fff!important;
  font-size:15px!important;
  text-align:center!important;
  box-shadow:0 13px 32px rgba(229,9,20,.28)!important;
}
#modalOverlay .vip-modal .btn-vip:hover,
#modalOverlay .vip-modal .btn-vip:focus-visible{
  border-color:var(--neon)!important;
  box-shadow:0 0 0 3px rgba(168,255,0,.16),0 13px 32px rgba(229,9,20,.3)!important;
  outline:0!important;
}
#modalOverlay .vip-modal-note{
  margin:7px 0 0!important;
  color:#8e939d!important;
  text-align:center!important;
}

@media(min-width:721px) and (max-height:820px){
  #modalOverlay .vip-modal{padding:16px 22px 13px!important;}
  #modalOverlay .vip-modal-head{margin-bottom:9px!important;}
  #modalOverlay .vip-modal-head h3{margin-top:7px!important;font-size:31px!important;}
  #modalOverlay .vip-modal-head .sub{font-size:12px!important;line-height:1.35!important;}
  #modalOverlay .vip-benefits{margin-bottom:9px!important;}
  #modalOverlay .vip-benefit{min-height:62px!important;padding:7px!important;}
  #modalOverlay .vip-benefit-icon{width:20px;height:20px;font-size:10px;}
  #modalOverlay .mplan{min-height:78px!important;padding:8px 10px!important;}
  #modalOverlay .mplan .mp-name{font-size:16px!important;}
  #modalOverlay .mplan .mp-price{font-size:25px!important;margin-top:3px!important;}
  #modalOverlay .vip-selected-summary{padding:7px 12px!important;margin-bottom:8px!important;}
  #modalOverlay .vip-modal .btn-vip{min-height:44px!important;padding:9px 16px!important;}
  #modalOverlay .vip-modal-note{margin-top:5px!important;}
}

@media(max-width:720px){
  #modalOverlay{padding:6px!important;}
  #modalOverlay .vip-modal{
    width:100%!important;
    max-height:calc(100dvh - 12px)!important;
    padding:15px 12px 0!important;
    border-radius:18px!important;
  }
  #modalOverlay .modal-close{
    top:9px!important;
    right:9px!important;
    width:38px!important;
    height:38px!important;
  }
  #modalOverlay .vip-modal-head{
    margin-bottom:11px!important;
    padding:0 36px!important;
  }
  #modalOverlay .vip-modal-kicker{padding:5px 9px!important;font-size:8px!important;}
  #modalOverlay .vip-modal-head h3{
    margin:9px -18px 5px!important;
    font-size:clamp(25px,8.2vw,32px)!important;
    line-height:1.03!important;
  }
  #modalOverlay .vip-modal-head .sub{
    margin:0 -24px!important;
    font-size:11.5px!important;
    line-height:1.4!important;
  }
  #modalOverlay .vip-benefits{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin-bottom:12px!important;
  }
  #modalOverlay .vip-benefit{
    min-height:70px!important;
    padding:8px 6px!important;
  }
  #modalOverlay .vip-benefit-icon{width:22px;height:22px;font-size:10px;}
  #modalOverlay .vip-benefit strong{font-size:11px!important;}
  #modalOverlay .vip-benefit-copy{font-size:9.5px!important;}
  #modalOverlay .modal-plan-heading{
    flex-direction:column!important;
    gap:2px!important;
    margin-bottom:7px!important;
  }
  #modalOverlay .modal-plan-heading h4{font-size:14px!important;}
  #modalOverlay .modal-plan-heading span{padding:0!important;border:0!important;font-size:9px!important;}
  #modalOverlay .modal-plans{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin-bottom:9px!important;
  }
  #modalOverlay .mplan{
    min-height:82px!important;
    padding:9px 7px!important;
  }
  #modalOverlay .mplan .mp-name{font-size:16px!important;}
  #modalOverlay .mplan .mp-price{font-size:24px!important;}
  #modalOverlay .mplan.best-choice::after{top:5px!important;right:5px!important;font-size:6.5px!important;}
  #modalOverlay .vip-checkout-area{
    position:sticky!important;
    z-index:8;
    bottom:0;
    margin:0 -12px!important;
    padding:9px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
    background:linear-gradient(180deg,rgba(11,12,16,.35),#0b0c10 18%,#0b0c10 100%)!important;
    box-shadow:0 -12px 28px rgba(0,0,0,.35);
  }
  #modalOverlay .vip-selected-summary{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:14px!important;
    margin-bottom:7px!important;
    padding:7px 10px!important;
  }
  #modalOverlay .vip-selected-summary .label{font-size:8px!important;}
  #modalOverlay .vip-selected-summary .value{font-size:11px!important;}
  #modalOverlay .vip-selected-summary .price{font-size:24px!important;}
  #modalOverlay .vip-modal .btn-vip{min-height:46px!important;padding:10px!important;font-size:13px!important;}
  #modalOverlay .vip-modal-note{margin-top:5px!important;font-size:9px!important;}
}

@media(max-width:370px){
  #modalOverlay .vip-benefits{grid-template-columns:1fr 1fr!important;}
  #modalOverlay .vip-benefit-copy{display:none;}
  #modalOverlay .vip-benefit{min-height:53px!important;}
  #modalOverlay .mplan{min-height:76px!important;}
}

/* Mobile: keep the checkout controls in normal document flow so they never
   cover the final row of plan cards. The modal itself remains scrollable. */
@media(max-width:720px){
  #modalOverlay .vip-modal{
    overflow-y:auto!important;
    padding-bottom:18px!important;
    scroll-padding-bottom:18px!important;
  }
  #modalOverlay .vip-checkout-area{
    position:relative!important;
    bottom:auto!important;
    margin:0!important;
    padding:8px 0 0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}