@media (min-width: 769px){
/* /assets/css/support.css
   TP BUILD: TARIFY v6 / 2026-01-04
   Only for support page (body.page-tarify)
*/

/* ---------- Page background: fully override vibe on support ---------- */
body.page-tarify{
  position: relative;
  background: #050b1d !important;
  overflow-x: hidden;
}

/* Kill background layers from main.css on this page (aggressive but safe) */
body.page-tarify .main::before,
body.page-tarify .main::after,
body.page-tarify .application::before,
body.page-tarify .application::after,
body.page-tarify .advantages::before,
body.page-tarify .advantages::after,
body.page-tarify .tarifs::before,
body.page-tarify .tarifs::after,
body.page-tarify .questions::before,
body.page-tarify .questions::after,
body.page-tarify .footer::before,
body.page-tarify .footer::after,
body.page-tarify .wrapper::before,
body.page-tarify .wrapper::after{
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* Own blobs - below everything, never blocks clicks */
body.page-tarify::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(650px 380px at 20% 18%, rgba(45,90,255,.45), transparent 70%),
    radial-gradient(700px 420px at 80% 28%, rgba(0,180,255,.22), transparent 72%),
    radial-gradient(900px 520px at 50% 68%, rgba(20,120,255,.25), transparent 70%),
    radial-gradient(820px 520px at 22% 88%, rgba(120,60,255,.18), transparent 70%);
  opacity: .95;
}

/* Keep all content above background */
body.page-tarify .wrapper,
body.page-tarify main,
body.page-tarify section,
body.page-tarify header,
body.page-tarify footer{
  position: relative;
  z-index: 1;
}
}

/* ---------- Tokens ---------- */
:root{
  --tp-card-bg: rgba(255,255,255,.06);
  --tp-card-bd: rgba(255,255,255,.12);
  --tp-card-bd-hover: rgba(255,255,255,.20);
  --tp-shadow: 0 18px 50px rgba(0,0,0,.22);

  --tp-btn-w: 190px;
  --tp-btn-h: 46px;
}

/* ---------- Hero ---------- */
body.page-tarify .tp-support-hero{
  padding: 34px 0 10px;
}

body.page-tarify .tp-hero-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 20px;
  align-items: center;
}

body.page-tarify .tp-hero-title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(28px, 3.2vw, 48px);
  color: #fff;
}

body.page-tarify .tp-hero-text{
  margin: 0;
  opacity: .9;
  font-size: 18px;
  line-height: 1.45;
  max-width: 720px;
}

body.page-tarify .tp-hero-right{
  display: grid;
  justify-items: end;
}

body.page-tarify .tp-hero-img{
  width: min(420px, 100%);
  height: auto;
  opacity: .9;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.35));
}

@media (max-width: 900px){
  body.page-tarify .tp-hero-grid{ grid-template-columns: 1fr; }
  body.page-tarify .tp-hero-right{ justify-items: start; }
  body.page-tarify .tp-support-hero{ padding: 26px 0 6px; }
}

/* ---------- Headings ---------- */
body.page-tarify .tp-h2{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(24px, 2.6vw, 38px);
  text-align: center;
  color: #fff;
}

body.page-tarify .tp-subtitle{
  margin: 10px 0 0;
  text-align: center;
  opacity: .9;
  font-size: 18px;
  color: #fff;
}

/* ---------- Contacts ---------- */
body.page-tarify .tp-support-contacts{
  padding: 26px 0 24px;
}

body.page-tarify .tp-section-head{
  margin-bottom: 18px;
}

body.page-tarify .tp-contacts-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

@media (max-width: 980px){
  body.page-tarify .tp-contacts-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  body.page-tarify .tp-contacts-grid{ grid-template-columns: 1fr; }
}

body.page-tarify .tp-contact-card{
  background: var(--tp-card-bg);
  border: 1px solid var(--tp-card-bd);
  border-radius: 18px;
  box-shadow: var(--tp-shadow);
  backdrop-filter: blur(10px);

  padding: 16px 16px 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;

  position: relative;
  overflow: hidden;

  transform: translateZ(0);
}

body.page-tarify .tp-contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(90% 120% at 10% 0%, rgba(0,120,255,.22), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

body.page-tarify .tp-contact-card:hover{
  border-color: var(--tp-card-bd-hover);
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
}

body.page-tarify .tp-contact-ico{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  position: relative;
  z-index: 2;
}

body.page-tarify .tp-contact-ico--max{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 14px;
}

body.page-tarify .tp-contact-body{
  position: relative;
  z-index: 2;
}

body.page-tarify .tp-contact-name{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}

body.page-tarify .tp-contact-sub{
  margin-top: 6px;
  opacity: .88;
  font-size: 15px;
  line-height: 1.28;
  color: #fff;
  word-break: break-word;
  min-height: 38px; /* выравниваем карточки визуально */
}

/* Buttons */
body.page-tarify .tp-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,80,255,.46);
  color: #fff;
  border-radius: 12px;

  height: var(--tp-btn-h);
  min-height: var(--tp-btn-h);
  width: var(--tp-btn-w);

  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  user-select: none;

  position: relative;
  z-index: 3;
  pointer-events: auto;
}

body.page-tarify .tp-btn:hover{
  border-color: rgba(255,255,255,.26);
}

body.page-tarify .tp-btn--submit{
  width: min(360px, 100%);
  margin-top: 14px;
}

body.page-tarify .tp-btn.is-copied{
  background: rgba(0,170,120,.55);
}

/* Mobile/desktop visibility */
body.page-tarify .tp-only-mobile{ display: inline-flex; }
body.page-tarify .tp-only-desktop{ display: none; }

@media (min-width: 900px){
  body.page-tarify .tp-only-mobile{ display: none; }
  body.page-tarify .tp-only-desktop{ display: inline-flex; }
}

@media (max-width: 560px){
  body.page-tarify .tp-btn{ width: 100%; }
}

/* Note */
body.page-tarify .tp-note{
  max-width: 980px;
  margin: 14px auto 0;
  opacity: .85;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  color: #fff;
}

/* ---------- Collapsible form ---------- */
body.page-tarify .tp-support-form{
  padding: 6px 0 44px;
}

body.page-tarify .tp-form-toggle{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid var(--tp-card-bd);
  background: var(--tp-card-bg);
  box-shadow: var(--tp-shadow);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

body.page-tarify .tp-form-toggle > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display: grid;
  gap: 6px;
  position: relative;
  user-select: none;
}

body.page-tarify .tp-form-toggle > summary::-webkit-details-marker{ display:none; }

body.page-tarify .tp-form-summary-title{
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}

body.page-tarify .tp-form-summary-sub{
  opacity: .88;
  font-size: 14px;
  color: #fff;
}

body.page-tarify .tp-form-panel{
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

body.page-tarify .tp-form-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

body.page-tarify .tp-field{ display: grid; gap: 6px; }
body.page-tarify .tp-field--full{ grid-column: 1 / -1; }

@media (max-width: 720px){
  body.page-tarify .tp-form-grid{ grid-template-columns: 1fr; }
}

body.page-tarify .tp-label{
  font-size: 13px;
  opacity: .88;
  color: #fff;
}

body.page-tarify .tp-input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.24);
  color: #fff;
  padding: 12px 14px;
  outline: none;
}

body.page-tarify .tp-input:focus{
  border-color: rgba(0,160,255,.55);
}

body.page-tarify .tp-textarea{
  min-height: 140px;
  resize: vertical;
}

/* Checkbox: bigger + clickable */
body.page-tarify .tp-check{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
}

body.page-tarify .tp-check-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

body.page-tarify .tp-check-box{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  position: relative;
}

body.page-tarify .tp-check-input:checked + .tp-check-box::after{
  content:"";
  position:absolute;
  left: 6px;
  top: 3px;
  width: 7px;
  height: 12px;
  border-right: 3px solid rgba(255,255,255,.95);
  border-bottom: 3px solid rgba(255,255,255,.95);
  transform: rotate(38deg);
}

body.page-tarify .tp-check-text{
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  opacity: .92;
}

body.page-tarify .tp-check-text a{
  color: rgba(170,220,255,1);
  text-decoration: underline;
}

/* ---------- Tarify page specific ---------- */
body.page-tarify .tp-tarify-hero{
  padding: 34px 0 10px;
}

/* Left-aligned note in hero */
body.page-tarify .tp-note--left{
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 720px;
}

/* Remove gradient background from main tariff section, use page blobs instead */
body.page-tarify .tarrifs::before{
  content: none !important;
  display: none !important;
}

/* Give section some breathing room on tarify page */
body.page-tarify .tarrifs{
  padding: 26px 0 54px;
}

@media (max-width: 768px){
  body.page-tarify .tarrifs{ padding: 18px 0 34px; }
}



/* ===== Tarify cards ===== */
.tp-tarify-cards{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 760px;
}

.tp-card{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

.tp-card--accent{
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.20);
}

.tp-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  overflow: hidden;
}

.tp-ico{
  width: 22px;
  height: 22px;
  display: block;
  color: currentColor;
}

.tp-card__title{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
}

.tp-card__text{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

.tp-card--link{
  text-decoration: none;
  color: inherit;
}

.tp-card--link:hover{
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

@media (min-width: 980px){
  .tp-tarify-cards{
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Includes list ===== */
.tp-includes-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.tp-includes-list li{
  position: relative;
  padding-left: 22px;
}

.tp-includes-list li:before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255,255,255,0.85);
  font-weight: 900;
}



/* ===== Apps section ===== */
.tp-apps{
  margin-top: 26px;
  padding: 26px 0 6px;
}

.tp-apps__title{
  margin-bottom: 8px;
}

.tp-apps__subtitle{
  margin-bottom: 16px;
}

.tp-apps__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tp-apps__card{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.tp-apps__name{
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
}

.tp-apps__qr{
  height: 150px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}

.tp-apps__link{
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

.tp-apps__link:hover{
  background: rgba(255,255,255,0.12);
}

.tp-apps__note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.58);
}

@media (max-width: 980px){
  .tp-apps__grid{
    grid-template-columns: 1fr;
  }
}


/* Tarify includes card (readability) */
.tp-tarify-includes{
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  max-width: 760px;
}
.tp-includes-title{
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  margin-bottom: 10px;
}
.tp-includes-list{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.45;
}
.tp-includes-list li{
  position: relative;
  padding-left: 22px;
}
.tp-includes-list li:before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
}


/* Minimal Magnific Popup essentials (fix popups visible in flow + close button) */
.mfp-hide{ display:none !important; }
.mfp-bg{
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:#000;
  opacity:.6;
  z-index: 1042;
}
.mfp-wrap{
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index: 1043;
  outline:none;
}
.mfp-container{
  position: absolute;
  width:100%; height:100%;
  left:0; top:0;
  padding: 0 16px;
  box-sizing: border-box;
  text-align:center;
}
.mfp-container:before{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.mfp-content{
  display:inline-block;
  vertical-align:middle;
  text-align:left;
  max-width: 620px;
  width: 100%;
}
.mfp-close{
  position:absolute;
  right: 18px;
  top: 14px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align:center;
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 28px;
  cursor:pointer;
}