/*
 * Стили главной: модалка подключения VPN, карточка VIP-трафика,
 * кнопки неактивного состояния.
 * В оригинале — инлайновый <style> внутри index.php.
 */


    :root{
      --rvpn-bg:#121213;
      --rvpn-brand:#0085FF;
      --rvpn-vip:#E1C11F;
      --rvpn-txt:rgba(255,255,255,.92);
      --rvpn-muted:rgba(255,255,255,.62);
      --rvpn-stroke:rgba(255,255,255,.10);
      --rvpn-card:rgba(255,255,255,.06);
    }
    .rvpn-sheet-overlay{
      position:fixed; inset:0;
      background:rgba(0,0,0,.55);
      backdrop-filter: blur(3px);
      z-index:99999;
      opacity:0; pointer-events:none;
      transition:opacity .18s ease;
    }
    .rvpn-sheet-overlay.is-open{ opacity:1; pointer-events:auto; }

    .rvpn-sheet{
      position:fixed; left:0; right:0; bottom:0;
      z-index:100000;
      transform: translateY(105%);
      transition: transform .22s ease;
      padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    }
    .rvpn-sheet.is-open{ transform: translateY(0); }

    .rvpn-sheet-card{
      margin:0 auto;
      width:min(680px, 100%);
      background: radial-gradient(900px 450px at 30% 0%, rgba(0,133,255,.18), transparent 55%), var(--rvpn-bg);
      border:1px solid var(--rvpn-stroke);
      border-radius:18px;
      overflow:hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,.60);
    }
    .rvpn-sheet-head{
      padding:12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.16);
    }
    .rvpn-sheet-title{
      display:flex; flex-direction:column; gap:2px;
    }
    .rvpn-sheet-title b{ color:var(--rvpn-txt); font-size:15px; }
    .rvpn-sheet-title span{ color:var(--rvpn-muted); font-size:12px; }
    .rvpn-sheet-close{
      width:34px; height:34px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
    }
    .rvpn-sheet-body{ padding:14px; }

    .rvpn-step{ display:none; }
    .rvpn-step.is-active{ display:block; }

    .rvpn-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:10px;
    }
    @media (min-width:520px){
      .rvpn-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }

    .rvpn-choice{
      padding:12px 10px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color:var(--rvpn-txt);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      cursor:pointer;
      user-select:none;
      transition: transform .10s ease, border-color .12s ease, box-shadow .12s ease;
      font-size:14px;
    }
    .rvpn-choice:active{ transform: translateY(1px); }
    .rvpn-choice.is-active{
      border-color: rgba(0,133,255,.55);
      box-shadow: 0 0 0 3px rgba(0,133,255,.15);
    }

    .rvpn-app-list{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }

    .rvpn-app{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .rvpn-app-top{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .rvpn-app-name{
      color:var(--rvpn-txt);
      font-size:15px;
    }
    .rvpn-app-sub{
      color:var(--rvpn-muted);
      font-size:12px;
      margin-top:2px;
    }
    .rvpn-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .rvpn-btn{
      width:100%;
      border-radius:14px;
      padding:12px 12px;
      text-decoration:none;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      letter-spacing:.1px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color:#fff;
    }
    .rvpn-btn.primary{
      border-color: rgba(0,133,255,.60);
      background: linear-gradient(180deg, rgba(0,133,255,.88), rgba(0,133,255,.48));
      box-shadow: 0 10px 30px rgba(0,133,255,.16);
    }
    .rvpn-btn.primary:active{ transform: translateY(1px); }

    .rvpn-footnote{
      margin-top:10px;
      color: rgba(255,255,255,.45);
      font-size:12px;
      text-align:center;
    }
    .rvpn-back{
      margin-top:12px;
      width:100%;
      border-radius:14px;
      padding:12px 12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color:#fff;
      cursor:pointer;
    }

    .rvpn-inactive-actions{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:14px;
    }

    .rvpn-free-trial-btn{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      width:100%;
      padding:14px 16px;
      border-radius:16px;
      overflow:hidden;
      text-decoration:none;
      color:#fff;
      letter-spacing:.2px;
      border:1px solid rgba(43,213,106,.88);
      background:#32BB64;
      box-shadow: 0 12px 30px rgba(43,213,106,.22);
      isolation:isolate;
      box-sizing:border-box;
    }
    .rvpn-free-trial-btn:active{
      transform: translateY(1px);
    }
    .rvpn-free-trial-btn.is-loading{
      pointer-events:none;
      opacity:.82;
    }
    .rvpn-free-trial-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
      pointer-events:none;
      z-index:0;
    }
    .rvpn-free-trial-btn::after{
      content:"";
      position:absolute;
      top:-20%;
      left:-70%;
      width:42%;
      height:140%;
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.10) 18%,
        rgba(255,255,255,.58) 50%,
        rgba(255,255,255,.10) 82%,
        rgba(255,255,255,0) 100%
      );
      transform: skewX(-24deg);
      pointer-events:none;
      z-index:1;
      animation: rvpnTrialShine 2s linear infinite;
    }
    .rvpn-free-trial-btn i,
    .rvpn-free-trial-btn span{
      position:relative;
      z-index:2;
    }

    .rvpn-vip-traffic-card{
      background:
        radial-gradient(61.63% 100.04% at 43.18% 123.86%, rgba(225,193,31,.80) 0%, rgba(225,193,31,0) 100%),
        linear-gradient(rgba(225,193,31,0) 0%, rgba(225,193,31,.13) 100%) !important;
      border:1px solid rgba(225,193,31,.18);
    }
    .rvpn-vip-traffic-card .inner-row-t{
      background: linear-gradient(90deg, #E1C11F, #FFE66B);
      box-shadow: 0 0 18px rgba(225,193,31,.30);
    }
    .rvpn-vip-traffic-card .icon-warn{
      color:#E1C11F;
    }
    .rvpn-vip-blocked-note{
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(225,193,31,.22);
      background:rgba(225,193,31,.10);
      color:rgba(255,255,255,.82);
      font-size:13px;
      line-height:1.35;
    }

    @keyframes rvpnTrialShine{
      0%{ left:-70%; opacity:0; }
      12%{ opacity:0; }
      20%{ opacity:1; }
      58%{ left:135%; opacity:1; }
      59%{ opacity:0; }
      100%{ left:135%; opacity:0; }
    }
    
 .rvpn-vip-status-blocked {
  align-items: flex-start !important;
}

.rvpn-vip-status-blocked .left-cont-p-index {
  align-items: flex-start !important;
}

.rvpn-vip-status-blocked .icon-sub-s {
  margin-top: 5px;
  flex: 0 0 auto;
}

.rvpn-vip-status-blocked .txt-status-c {
  line-height: 1.25;
}

.rvpn-vip-status-subtext {
  margin-top: 2px;
  color: rgba(255,255,255,.88);
}

.rvpn-vip-status-date {
  margin-top: 4px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
}