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

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

/* Kill background layers from main.css on this page (aggressive but safe) */
body.page-support .main::before,
body.page-support .main::after,
body.page-support .application::before,
body.page-support .application::after,
body.page-support .advantages::before,
body.page-support .advantages::after,
body.page-support .tarifs::before,
body.page-support .tarifs::after,
body.page-support .questions::before,
body.page-support .questions::after,
body.page-support .footer::before,
body.page-support .footer::after,
body.page-support .wrapper::before,
body.page-support .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-support::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-support .wrapper,
body.page-support main,
body.page-support section,
body.page-support header,
body.page-support 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-support .tp-support-hero{
  padding: 34px 0 10px;
}

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

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

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

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

body.page-support .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-support .tp-hero-grid{ grid-template-columns: 1fr; }
  body.page-support .tp-hero-right{ justify-items: start; }
  body.page-support .tp-support-hero{ padding: 26px 0 6px; }
}

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

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

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

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

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

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

body.page-support .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-support .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-support .tp-contact-card:hover{
  border-color: var(--tp-card-bd-hover);
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
}

body.page-support .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-support .tp-contact-ico--max{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 14px;
}

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

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

body.page-support .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-support .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-support .tp-btn:hover{
  border-color: rgba(255,255,255,.26);
}

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

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

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

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

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

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

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

body.page-support .tp-form-toggle{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 14px;
  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-support .tp-form-toggle > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display: grid;
  gap: 6px;
  position: relative;
  user-select: none;
}

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

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

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

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

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

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

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

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

body.page-support .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-support .tp-input:focus{
  border-color: rgba(0,160,255,.55);
}

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

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

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

body.page-support .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-support .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-support .tp-check-text{
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  opacity: .92;
}

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

/* ---------- Modal (заявка через сайт) ---------- */
body.tp-modal-open{
  overflow: hidden;
}

/* Modal container covers header/footer and can scroll its own content */
body.page-support .tp-modal{
  position: fixed;
  inset: 0;
  z-index: 200000;                 /* выше шапки и подвала */
  display: none;

  padding: 24px 12px;
  overflow-y: auto;                 /* скроллим модалку, а не страницу */
  -webkit-overflow-scrolling: touch;
}

/* Use flex to keep dialog always inside viewport */
body.page-support .tp-modal.is-open{
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Overlay must be below dialog but above page */
body.page-support .tp-modal__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 25, 80, .45);
  backdrop-filter: blur(6px);
}

/* Dialog: blue gradient, scrollable if content is tall */
body.page-support .tp-modal__dialog{
  position: relative;
  width: min(820px, 100%);
  margin: 0;
  max-height: calc(100vh - 48px);
  overflow: auto;

  background: linear-gradient(135deg, rgba(25, 70, 210, .92), rgba(0, 155, 255, .55));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,.40);

  padding: 16px 16px 18px;
}

/* Title/subtitle */
body.page-support .tp-modal__head{
  padding: 4px 44px 10px 2px;
}
body.page-support .tp-modal__title{
  font-weight: 900;
  font-size: 20px;
  color: #fff;
}
body.page-support .tp-modal__sub{
  margin-top: 6px;
  opacity: .92;
  font-size: 14px;
  color: #fff;
}

/* Close button */
body.page-support .tp-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

body.page-support .tp-modal__close:hover{
  border-color: rgba(255,255,255,.40);
  background: rgba(255,255,255,.20);
}

body.page-support .tp-modal__close span{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Make inputs in modal white, not "dark glass" */
body.page-support .tp-modal .tp-label{
  color: rgba(255,255,255,.92);
}

body.page-support .tp-modal .tp-input{
  background: #fff;
  color: #14151a;
  border: 1px solid rgba(0,0,0,.14);
}

body.page-support .tp-modal .tp-input::placeholder{
  color: rgba(20,21,26,.55);
}

body.page-support .tp-modal .tp-input:focus{
  border-color: rgba(0,140,255,.55);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

body.page-support .tp-modal .tp-check-text{
  color: rgba(255,255,255,.92);
}

body.page-support .tp-modal .tp-check-box{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.38);
}

@media (max-width: 560px){
  body.page-support .tp-modal{
    padding: 14px 10px;
  }
  body.page-support .tp-modal__dialog{
    max-height: calc(100vh - 28px);
    padding: 14px 14px 16px;
  }
}