/* Только для этой страницы: “официальный документ” */
    .gte { padding: 34px 0 70px; }
    .gte-inner { max-width: 980px; margin: 0 auto; }

    /* один “лист” */
    .gte-sheet{
      background: rgba(24, 24, 28, .92);
      border: 1px solid #253043;
      border-radius: 18px;
      padding: 26px 26px;
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      color: #eaf1f8;
      margin-top: 85px;
    }

    .gte-doc-title{
      margin: 0;
      font-weight: 900;
      letter-spacing: .6px;
      font-size: 30px;
      line-height: 1.15;
      color: #ffffff;
      font-family: "Roboto Slab", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    .gte-doc-sub{
      margin: 8px 0 18px;
      color: #a6b2c7;
      font-size: 14px;
    }

    .gte-doc{
      font-size: 15px;
      line-height: 1.75;
      color: #eaf1f8;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .gte-doc h2{
      margin: 18px 0 8px;
      font-size: 16px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: .2px;
      font-family: "Roboto Slab", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .gte-doc p{
      margin: 0 0 10px;
      color: #eaf1f8;
    }

    .gte-doc ul, .gte-doc ol{
      margin: 0 0 10px;
      padding-left: 22px;
    }

    .gte-doc li{
      margin: 6px 0;
      color: #eaf1f8;
    }

    .gte-muted{ color:#a6b2c7; }

    /* лёгкая “официальность”: выравнивание текста и переносы */
    .gte-doc { text-align: left; hyphens: auto; }

    @media (max-width: 576px){
      .gte{ padding: 22px 0 50px; }
      .gte-sheet{ padding: 18px 14px; border-radius: 16px; }
      .gte-doc-title{ font-size: 22px; }
      .gte-doc{ font-size: 14px; line-height: 1.7; }
    }
  

#creditedCurrency {
  color: #fff !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  /* вернём стрелочку */
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}
#creditedCurrency option {
  color: #000;
  background-color: #fff;
}


    /* Стиль для скрытого раздела с начальным максимальным высотой и переходом */
    #currencyCalculator {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }
    
  .loader {
  position: absolute;
  left: 47%;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.modal-dialog-lowered {
    transform: translateY(70px); /* Сдвигает модальное окно вниз */
}


.account-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-group {
  display: flex;
  flex-grow: 1; /* Заставляем группу растягиваться на всё доступное пространство */
}

.form-control {
  flex: 1; /* Заставляем текстовые поля растягиваться на всё доступное пространство */
}

.input-group-append .btn {
  flex-shrink: 0; /* Предотвращаем сжатие кнопки */
}



/* Стили для tooltip */
.tooltip-parent .btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% - 10px); /* Сдвигаем стрелку к началу тултипа */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 1000;
    margin-left: 10px; /* Отступ справа от кнопки */
}

/* Стили для стрелки tooltip */
.tooltip-parent .btn[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    left: calc(100% + 5px); /* Сдвигаем стрелку к началу тултипа */
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #000; /* Указываем цвет фона стрелки, чтобы соответствовал тултипу */
    width: 10px; /* Размеры стрелки */
    height: 10px; /* Размеры стрелки */
    z-index: 1000;
    margin-left: -5px; /* Слегка сдвигаем стрелку к кнопке для создания эффекта "прикрепленности" */
}




  .loadingScreen {
    display: none;
  }
  .blur-effect {
    filter: blur(5px); /* Пример размытия, можно настроить */
    -webkit-filter: blur(5px); /* Для поддержки Safari */
}

        #progressBarContainer {
            width: 100%;
            background-color: #ddd;
        }

        #progressBar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }

/* чтобы тултипы не резались шапкой/контентом */
.modal-content#ServerConnect,
.modal-header#ServerConnect { overflow: visible; }

/* простой CSS-tooltip через data-tooltip */
.tooltip-parent{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-parent::before,
.tooltip-parent::after{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 9999;
}

.tooltip-parent::after{
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.tooltip-parent::before{
  content: "";
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,.85);
}

.tooltip-parent:hover::before,
.tooltip-parent:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.pm-amountinfo{ margin-top:15px; }

.pm-payline{
  font-weight: 600;
}

.pm-creditline{
  font-size: 14px;
  opacity: .9;
  margin-top: 2px;
}

.pm-accline{
  font-size: 13px;
  opacity: .8;
  margin-top: 6px;
}

/* select как текст (без form-control “таблетки”) */
.pm-currency{
  border: 0;
  background: transparent;
  color: inherit;               /* будет белым, если родитель белый */
  font: inherit;
  padding: 0;
  margin-left: 4px;
  width: auto;
  display: inline-block;
  line-height: inherit;
  appearance: auto;
  -webkit-appearance: menulist; /* чтобы стрелка была */
}

.pm-currency:focus{
  outline: none;
  box-shadow: none;
}


	#fixedbutton {
    z-index: 1000;
    position: fixed;
    bottom: 50px;
    right: 50px; 
    animation-name: shake;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
}

 @keyframes shake { 
    0% {right: 20px}
    1% {right: 17px}
    2% {right: 25px}
    3% {right: 15px}
    4% {right: 28px}
    5% {right: 15px}
    6% {right: 17px}
    7% {right: 20px}
    99%{right: 20px}
  }
  
  /* =========================
   Modern modules: FAQ / Reviews / Contacts
   ========================= */

:root{
  --m-bg: rgba(255,255,255,.055);
  --m-bg2: rgba(255,255,255,.035);
  --m-bd: rgba(255,255,255,.10);
  --m-bd2: rgba(255,255,255,.16);
  --m-text: rgba(255,255,255,.92);
  --m-muted: rgba(255,255,255,.72);
  --m-muted2: rgba(255,255,255,.55);
  --m-shadow: 0 16px 48px rgba(0,0,0,.45);
  --m-shadow2: 0 10px 28px rgba(0,0,0,.28);
  --m-r: 18px;
  --m-r2: 12px;
  --m-accent: var(--accent, #c43235);
  --m-accent2: var(--accent-2, #ff4d5a);
}

.section.rules,
.section.store,
.section.contact{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.module-inner{
  max-width: 1040px;
  margin: 0 auto;
}

.module-head{
  margin-bottom: 18px;
}

.module-title{
  margin: 0 0 6px 0;
  color: var(--m-accent);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.module-subtitle{
  color: var(--m-muted);
  margin: 0;
}

.module-surface{
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--m-bg), var(--m-bg2));
  border: 1px solid var(--m-bd);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow2);
  padding: 18px;
}

/* ========= FAQ ========= */

.faq-grid{
  display: grid;
  gap: 12px;
}

.faq-item{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--m-r2);
  overflow: hidden;
}

.faq-item[open]{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 900;
  color: var(--m-text);
  display:flex;
  align-items:center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary::after{
  content:"";
  margin-left:auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.faq-item[open] summary::after{
  transform: rotate(225deg);
}

.faq-body{
  padding: 0 14px 14px 14px;
  color: var(--m-muted);
  line-height: 1.55;
}

.faq-body a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
}
.faq-body a:hover{
  color: var(--m-accent);
  text-decoration: none;
}

.faq-body ul, .faq-body ol{
  margin: 10px 0 0 18px;
}
.faq-body li{
  margin: 8px 0;
}

.guide-wrap{
  margin-top: 18px;
}

.guide-card{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--m-r2);
  padding: 14px;
}

.guide-card h3{
  margin: 14px 0 8px;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.guide-card h1{
  margin: 0 0 12px;
  color: var(--m-accent);
  font-weight: 900;
}

.guide-card ul{
  margin: 0 0 0 18px;
  color: var(--m-muted);
}
.guide-card li{ margin: 8px 0; }

/* ========= Reviews ========= */

.reviews-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap: 12px;
  margin: 14px 0 6px;
}

.msg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--m-muted);
  max-width: 100%;
}

.msg select{
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}

.reviews-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap: 6px;
  margin: 12px 0 10px;
  color: var(--m-muted);
  font-weight: 800;
}

.reviews-pagination a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.reviews-pagination a:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.reviews-pagination b a,
.reviews-pagination a.is-active{
  background: linear-gradient(180deg, rgba(196,50,53,.92), rgba(196,50,53,.72));
  border-color: rgba(255,255,255,.16);
  color: #fff;
}

.reviews-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 991.98px){
  .reviews-grid{ grid-template-columns: 1fr; }
}

.review-card{
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--m-r);
  padding: 16px;
  box-shadow: var(--m-shadow2);
}

.review-top{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.review-avatar{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display:block;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}

.review-meta{
  flex: 1;
  min-width: 0;
}

.review-name{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
  margin-bottom: 4px;
  word-break: break-word;
}

.review-sub{
  color: var(--m-muted2);
  font-size: .92rem;
  line-height: 1.2;
}

.review-text{
  color: var(--m-muted);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* stars */
.rating-mini{
  display:inline-flex;
  gap: 2px;
  margin-top: 8px;
}
.rating-mini span{
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.22);
}
.rating-mini > span:before{ content:'★'; }
.rating-mini > span.active{ color: #ffcc33; }

/* ========= Contacts ========= */

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 991.98px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-card{
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--m-r);
  padding: 18px;
  box-shadow: var(--m-shadow2);
  text-align: left;
}

.contact-card h3{
  margin: 0 0 6px 0;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.contact-card p{
  margin: 0 0 12px 0;
  color: var(--m-muted);
}

.contact-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.contact-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

.contact-btn--accent{
  background: linear-gradient(180deg, rgba(196,50,53,.92), rgba(196,50,53,.72));
  border-color: rgba(255,255,255,.16);
}
.contact-btn--accent:hover{
  background: linear-gradient(180deg, rgba(255,77,90,.92), rgba(196,50,53,.78));
}
/* ===== Contacts: центрируем контент внутри карточек ===== */
#contacts .contact-card{
  text-align: center;           /* было left */
}

/* чтобы кнопки стояли ровно по центру */
#contacts .contact-actions{
  justify-content: center;      /* добавь */
}

/* опционально: если хочешь, чтобы текст выглядел аккуратнее по ширине */
#contacts .contact-card p{
  margin-left: auto;
  margin-right: auto;
  max-width: 420px;
}

/* ========= Footer (matches modern modules) ========= */
.section.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  padding: 18px 0 28px;
}

#footer .footer-surface{
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--m-bg), var(--m-bg2));
  border: 1px solid var(--m-bd);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow2);
  padding: 16px 18px;
}

#footer .footer-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

#footer .footer-legal{
  flex: 1;
  min-width: 0;
}

#footer .footer-brand{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

#footer .footer-text{
  color: var(--m-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

#footer .footer-line{
  display:block;
  margin: 4px 0;
}

#footer a{
  color: rgba(255,255,255,.88);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#footer a:hover{
  color: var(--m-accent);
  text-decoration: none;
}

#footer .footer-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex: 0 0 auto;
  padding-left: 6px;
}

#footer .footer-logo{
  width: 44px;
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

@media (max-width: 991.98px){
  #footer .footer-grid{
    flex-direction: column;
    text-align: center;
  }
  #footer .footer-logos{
    padding-left: 0;
    margin-top: 8px;
  }
  #footer .footer-text{
    max-width: 820px;
    margin: 0 auto;
  }
}

/* ===== Compact footer (low attention) ===== */

.section.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px 0 12px;              /* низкая высота */
}

#footer .footer-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  opacity: .78;                       /* приглушить */
}

#footer .footer-line{
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.72);
  white-space: nowrap;                /* не плодить строки на широких экранах */
  overflow: hidden;
  text-overflow: ellipsis;            /* если не влезает — обрежет */
  flex: 1;
  min-width: 0;
}

#footer .footer-sep{
  margin: 0 8px;
  color: rgba(255,255,255,.35);
}

#footer a{
  color: rgba(255,255,255,.78);
  text-decoration: none;              /* без подчеркиваний = меньше внимания */
}
#footer a:hover{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#footer .footer-logos{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

#footer .footer-logo{
  width: 34px;                        /* меньше логотипы */
  height: auto;
  opacity: .75;
  filter: none;                       /* без теней */
}

/* Mobile: аккуратный перенос в 2 строки без “простыни” */
@media (max-width: 991.98px){
  #footer .footer-compact{
    flex-direction: column;
    align-items:center;
    text-align:center;
    gap: 8px;
  }
  #footer .footer-line{
    white-space: normal;              /* пусть переносит */
    text-overflow: clip;
  }
}

/* ===== Compact footer (legal, low attention) ===== */
.section.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px 0 12px;
}

#footer .footer-compact{
  display:flex;
  flex-direction: column;
  gap: 6px;
  opacity: .75; /* незаметный */
}

/* Основная строка */
#footer .footer-line{
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Юридический текст — еще тише */
#footer .footer-legal{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.55);
}

/* Ссылки */
#footer a{
  color: rgba(255,255,255,.70);
  text-decoration: none;
}
#footer a:hover{
  color: rgba(255,255,255,.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#footer .footer-sep{
  margin: 0 8px;
  color: rgba(255,255,255,.35);
}

/* Логотипы */
#footer .footer-logos{
  display:flex;
  gap: 10px;
  margin-top: 4px;
}
#footer .footer-logo{
  width: 34px;
  opacity: .7;
}

/* Mobile */
@media (max-width: 991.98px){
  #footer .footer-line{
    white-space: normal;
  }
}

/* ===== Invisible legal footer ===== */
.footer-legal{
  font-size: 10.5px;
  line-height: 1.25;
  color: rgba(255,255,255,.38);
  text-align: center;

  padding: 6px 12px 8px;
  border-top: 1px solid rgba(255,255,255,.04);

  user-select: none;
}

.footer-legal a{
  color: rgba(255,255,255,.45);
  text-decoration: none;
}

.footer-legal a:hover{
  color: rgba(255,255,255,.7);
  text-decoration: underline;
}

/* ===== Footer modern (compact, centered, low attention) ===== */
.footer-modern{
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.28));
  padding: 10px 0 12px; /* низкая высота */
}

.footer-modern .footer-inner{
  max-width: 1040px;          /* не во всю ширину */
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.footer-modern .footer-row{
  display: block;
  color: rgba(255,255,255,.42);
}

.footer-modern .footer-top{
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;        /* держим в одну строку на десктопе */
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-modern .footer-mid{
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.34);
}

.footer-modern a{
  color: rgba(255,255,255,.48);
  text-decoration: none;
}

.footer-modern a:hover{
  color: rgba(255,255,255,.72);
  text-decoration: underline;
}

.footer-modern .dot{
  margin: 0 8px;
  color: rgba(255,255,255,.22);
}

.footer-modern .footer-pay{
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  opacity: .85;          /* цветные, но не кричащие */
  filter: none;          /* убираем серость */
}

.footer-modern .footer-pay img{
  width: 36px;
  height: auto;
  display: inline-block;
  opacity: .9;
}

/* Mobile: разрешаем перенос, чтобы не ломало верстку */
@media (max-width: 575.98px){
  .footer-modern .footer-top{
    white-space: normal;
  }
  .footer-modern{
    padding: 10px 0 14px;
  }
}

.footer-modern{
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28));
  padding: 10px 0 12px;
}

.footer-modern .footer-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* row base */
.footer-modern .footer-row{
  color: rgba(255,255,255,.45);
}

/* line 1 */
.footer-modern .footer-top{
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-modern .dot{
  margin: 0 8px;
  color: rgba(255,255,255,.25);
}

/* payment logos */
.footer-modern .footer-pay{
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.footer-modern .footer-pay img{
  width: 36px;
  height: auto;
  opacity: .9;
}

/* legal text */
.footer-modern .footer-mid{
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.35);
}

.footer-modern a{
  color: rgba(255,255,255,.5);
  text-decoration: none;
}

.footer-modern a:hover{
  color: rgba(255,255,255,.75);
  text-decoration: underline;
}

/* mobile */
@media (max-width: 575.98px){
  .footer-modern .footer-top{
    white-space: normal;
  }
}

/* line 1: text + logos */
.footer-modern .footer-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

/* text part */
.footer-modern .footer-top-left{
  display:inline-flex;
  align-items:center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* logos part */
.footer-modern .footer-top-right{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
}

/* override old footer-pay block spacing (now inside top row) */
.footer-modern .footer-pay{
  margin-top: 0;
}

.footer-modern .footer-pay img{
  width: 34px;
  height: auto;
  opacity: .9;
}

/* mobile: allow wrap, keep logos on same line */
@media (max-width: 575.98px){
  .footer-modern .footer-top{
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 8px;
  }
  .footer-modern .footer-top-left{
    text-align:center;
    justify-content:center;
  }
}

.footer-modern .footer-inner{
  max-width: 1040px;          /* главное: футер не на всю ширину экрана */
  margin: 0 auto;
  padding: 10px 16px 12px;
}

/* TOPLINE = один центрированный блок, НЕ space-between */
.footer-modern .footer-topline{
  display:flex;
  align-items:center;
  justify-content:center;      /* центрируем целиком */
  gap: 14px;                   /* логотипы рядом, а не в конце экрана */
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255,255,255,.70);
}

/* текст не должен растягиваться на всю ширину */
.footer-modern .footer-toptext{
  flex: 0 1 auto;
  text-align: center;
}

/* логотипы цветные */
.footer-modern .footer-pay{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}
.footer-modern .footer-pay img{
  width: 34px;
  height: auto;
  opacity: 1;                 /* цветные, без “выцветания” */
  filter: none;
}

/* нижний текст — уже и спокойнее */
.footer-modern .footer-mid{
  margin: 6px auto 0;
  max-width: 860px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,.45);
  text-align: center;
}
.footer-modern .footer-mid a{
  color: rgba(255,255,255,.62);
}
.footer-modern .footer-mid a:hover{
  color: rgba(255,255,255,.82);
}

/* mobile: разрешаем перенос, но всё остается по центру */
@media (max-width: 575.98px){
  .footer-modern .footer-topline{
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 8px;
  }
}

  .custom-tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px; /* Пробел между текстом и иконкой */
  }

  .custom-tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 999;
    bottom: 150%; /* Позиция над элементом */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .custom-tooltip-container:hover .custom-tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  .custom-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  }

  /* Центрирование тултипа на мобильных устройствах */
  @media (max-width: 768px) {
    .custom-tooltip-text {
      position: fixed;
      bottom: 20%;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0; /* Убираем стандартный отступ */
      width: 90%; /* Увеличиваем ширину, чтобы текст не обрезался на мобильных */
    }

    .custom-tooltip-text::after {
      display: none; /* Убираем треугольник, чтобы не было визуального конфликта */
    }
  }
  
  
  
  
  
  /* ===========================
   Modern Dark Theme (TF2Lavka)
   =========================== */

:root{
  --bg-0:#050007;
  --bg-1:#06000a;
  --bg-2:#0b0610;

  --text:#e6e6e8;
  --muted:#a6a2ad;
  --muted-2:#7e7886;

  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.04);
  --border: rgba(230,230,232,.12);

  --accent:#c43235;
  --accent-2:#ff4d5a;

  --success:#79c45a;
  --danger:#ff5b5b;

  --shadow: 0 16px 48px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);

  --radius: 18px;
  --radius-sm: 12px;

  --blur: 14px;

  --container-pad: 1.5rem;
}

/* Basic reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  position: relative;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;

  background: var(--bg-0); /* вместо всех градиентов */

  color: var(--text);
  font-size: 16px;
  line-height: 1.5;

  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(900px 600px at 15% 10%, rgba(196,50,53,.18) 0%, rgba(196,50,53,0) 55%),
    radial-gradient(700px 500px at 85% 0%, rgba(98,167,227,.12) 0%, rgba(98,167,227,0) 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1) 40%, var(--bg-0));

  background-repeat: no-repeat;
}


a { color: inherit; }
img, embed, object, audio, video { max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar-track{ background-color: var(--bg-1); }
::-webkit-scrollbar{ width: 6px; background-color: var(--bg-1); }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 999px; }

/* Navbar */
nav.navbar.bg-dark {
  background: rgba(196, 50, 53, .95) !important;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.navbar-dark .navbar-brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
}
a.nav-item.nav-link { color: rgba(255,255,255,.9); }
a.nav-item.nav-link:hover { color: #fff; opacity: 1; }
.navbar-nav li:hover>.dropdown-menu { display: block; }

/* Modal */
.modal-content {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(20,18,26,.92);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.modal-content#contact {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%),
    rgba(196, 50, 53, .92);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.20);
}
.modal-header#contact { border-bottom: 1px solid rgba(230,230,232,.18); }
.modal-footer#contact { border-top: 1px solid rgba(230,230,232,.18); }

/* Hero / face */
.face {
  min-height: 100vh;
  position: relative;
  background-position: center;
  background-size: cover;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.face-body {
  align-items: center;
  display: flex;
  background: linear-gradient(rgba(6, 0, 10, 0.35), rgba(6, 0, 10, 0.70), #06000a);
  z-index: 1;
  flex-grow: 1;
  flex-shrink: 0;
  padding: 3rem var(--container-pad);
}
.face.face-body > .container { flex-grow: 1; flex-shrink: 1; }

.face-title.one {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.face-subtitle {
  font-size: 1.1rem;
  color: rgba(230,230,232,.75);
}

/* Section */
.section {
  padding: 3rem var(--container-pad);
  display: block;
}
.section > h1,
.section > h2 {
  color: var(--accent);
  margin-bottom: 1em;
}
.section-head{
  margin-bottom: 1.25rem;
}
.section-title{
  color: var(--accent);
  margin: 0 0 .35rem 0;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.section-subtitle{
  color: rgba(230,230,232,.72);
  font-size: .98rem;
}

/* Servers wrapper */
.servers {
  background-color: transparent;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(230,230,232,.10);
}

/* ===========================
   Modern Product Cards
   =========================== */

.srv { margin-bottom: 20px; }

.one-server.product-card{
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.one-server.product-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(255,255,255,.18);
}

/* Media */
.product-card__media{
  position: relative;
  padding: 22px 22px 18px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.product-card__media img.server-header{
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

/* Online/Offline accent line + dim offline */
.product-card__media.Online::after,
.product-card__media.Offline::after{
  content:"";
  position:absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
}
.product-card__media.Online::after{
  background: linear-gradient(90deg, rgba(121,196,90,.0), rgba(121,196,90,.95), rgba(121,196,90,.0));
}
.product-card__media.Offline::after{
  background: linear-gradient(90deg, rgba(255,91,91,.0), rgba(255,91,91,.95), rgba(255,91,91,.0));
}
.product-card__media.Offline img.server-header{
  opacity: .45;
  filter: grayscale(1) blur(.1px) drop-shadow(0 12px 18px rgba(0,0,0,.45));
}

/* Body */
.product-card__body{
  padding: 18px 18px 20px;
}
.product-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.product-card__title{
  margin:0;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Badge */
.product-card__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
.product-card__badge::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.product-card__badge.Online::before{ background: var(--success); }
.product-card__badge.Offline::before{ background: var(--danger); }

/* Price */
.product-card__price{
  margin: 14px 0 10px;
  font-size: 1.05rem;
  color: rgba(230,230,232,.92);
}
.price-sep{
  opacity: .55;
  padding: 0 6px;
}
.price-old{
  text-decoration: line-through;
  text-decoration-color: var(--accent-2);
  opacity: .6;
  margin-right: 6px;
}

/* Meta */
.product-card__meta{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}
span.players{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(230,230,232,.82);
  font-size: .92rem;
}

/* keeps your weird dot fix invisible on modern layout */
.dot-fix{ color: transparent; }

/* Progress */
.progress.product-progress{
  height: 8px;
  margin-top: 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.progress.product-progress .progress-bar{
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* CTA area (buttons from PHP) */
.product-card__cta{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Make any button/link inside cards look modern */
.one-server.product-card a,
.one-server.product-card button,
.one-server.product-card input[type="submit"]{
  border-radius: 14px !important;
}
.one-server.product-card .btn{
  font-weight: 800;
  letter-spacing: .01em;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.one-server.product-card .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.one-server.product-card .btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(196,50,53,.28);
}

/* If your PHP outputs bootstrap primary buttons, make them look premium */
.one-server.product-card .btn-primary{
  background: linear-gradient(180deg, rgba(196,50,53,.95), rgba(196,50,53,.80));
  border-color: rgba(255,255,255,.20);
}
.one-server.product-card .btn-primary:hover{
  background: linear-gradient(180deg, rgba(255,77,90,.95), rgba(196,50,53,.85));
}

/* Legacy classes (keep compatibility) */
div.one-server > h2 {
  margin-top: 0;
  font-size: 1.2rem;
  padding-bottom: 0;
  border-bottom: none;
}
div.one-server > p {
  border-bottom: none;
  padding-bottom: 0;
  color: rgba(230,230,232,.80);
}
img.server-header { outline: none; }

/* Old Online/Offline styles kept, but softened */
div.Online { border-bottom: none; }
div.Offline { border-bottom: none; }
div.Offline > img.server-header { opacity: .3; }

/* ===========================
   Other site blocks (kept)
   =========================== */

div.members {
  font-size:3rem;
  border-bottom: 1px solid rgba(230,230,232,.1);
  padding-bottom: 3rem;
}
div.members > span {
  font-size:1rem;
  display: block;
}
span.discord {
  font-size:1rem;
  display: block;
}
#discord-total { color: #fff; }
div.members#online { color: #62a7e3; }
div.members#ingame { color: #8bc53f; }
div.members#discord { color: #8bc53f; padding-top:10px; }

section.community > div.row { margin-bottom: 3rem; }
div.discord-invite {
  margin-top: 3rem;
  border-bottom: 1px solid rgba(230,230,232,.1);
  padding-bottom: 3rem;
}
div.store { padding-top:6rem; }
div.store > h3 { color: rgba(230,230,232,.72); }

section.rules,
section.store,
section.staff,
section.community,
section.social {
  border-bottom: 1px solid rgba(230,230,232,.1);
}

/* Footer */
section.footer {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(8, 6, 12, .85);
  border-top: 1px solid rgba(255,255,255,.08);
}
section.footer > div.container > span > a {
  color: rgba(230,230,232,.92);
  text-decoration: underline;
}
section.footer > div.container > span > a:hover { text-decoration: none; }

/* Staff images */
img.rounded-circle.staff {
  max-width:150px;
  border: 2px solid rgba(196,50,53,1);
}
img.rounded-circle.discord-user {
  max-width:50px;
  border: 2px solid rgba(196,50,53,1);
}
h2.discord { color:#7289DA; font-size: 1.2rem; }
p.staff-name { padding-top:1rem; font-size:1.2rem; }
p.staff-role { margin-top:-1rem; font-size:.8rem; color: var(--accent); }

.small#footer { font-size: 11px; }
.wrapper { min-height: calc(100vh - 80px); }

/* Pricing table (kept, slightly modernized) */
.panel {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%),
    rgba(196, 50, 53, .18);
  border-radius: var(--radius);
  padding: 18px 22px;
  width: 100%;
  z-index: 10;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}
.pricing-table {
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
@media (min-width: 900px) {
  .pricing-table { flex-direction: row; }
}
.pricing-table * { text-align: center; text-transform: uppercase; }
.pricing-plan {
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 25px 12px;
  background: rgba(255,255,255,.04);
}
.pricing-plan:last-child { border-bottom: none; }
@media (min-width: 900px) {
  .pricing-plan {
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.10);
    flex-basis: 100%;
  }
  .pricing-plan:last-child { border-right: none; }
}
.pricing-img { margin-bottom: 20px; max-width: 100%; }
.pricing-header {
  font-size: 22px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
}
.pricing-features {
  color: rgba(255,255,255,.80);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 26px 0 18px;
  list-style-type:none;
  padding-left: 0;
}
.pricing-features-item {
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  line-height: 1.5;
  padding: 12px 0;
}
.pricing-features-item:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.pricing-price {
  color: #fff;
  display: block;
  font-size: 34px;
  font-weight: 900;
}
.pricing-price > sup.small { font-size: 18px; }
.pricing-price > sub.small {
  font-size: 14px;
  text-transform: none;
  margin-left: -5px;
  color: rgba(255,255,255,.75);
}
.pricing-button {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  display: inline-block;
  margin: 18px 0 6px;
  padding: 12px 18px;
  text-decoration: none;
  transition: all 150ms ease-in-out;
  background: rgba(255,255,255,.06);
}
.pricing-button:hover,
.pricing-button:focus {
  background: rgba(255,255,255,.10);
}
.pricing-button.is-featured {
  background: linear-gradient(180deg, rgba(196,50,53,.95), rgba(196,50,53,.80));
  color: #fff;
}
.pricing-button.is-featured:hover,
.pricing-button.is-featured:active {
  background: linear-gradient(180deg, rgba(255,77,90,.95), rgba(196,50,53,.85));
}

/* FAQ */
h3.faq-question {
  text-align: left;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
  margin-bottom: 10px;
}
p.text-left > a {
  text-decoration: underline;
  color: #fff;
}
p.text-left > a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Responsive */
@media (max-width: 767.98px) {
  .face-title.one { font-size: 2rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.3rem; }
  .pricing-price { font-size: 1.5rem!important; }

  #paymentMethod { font-size: revert; padding: 0; }
}

/* Position helpers */
.container { position: relative !important; }
.right-img {
  position: absolute;
  top: 30%;
  right: -10%;
}
@media (max-width: 1200px) {
  .nickname { font-size: 0.5em; }
}
.nickname {
  display: inline-block;
  position: relative;
  top: 4px;
  margin: 0 10px;
  font-weight: bold;
}
.form-for-logout { display: inline-block; margin-bottom: 0; }
.pointer { cursor: pointer; }

/* Full video */
.fullvideo {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
.fullvideo video {
  position: absolute;
  height: 100%;
  width: 177.77777778vh;
  min-width: 100%;
  min-height: 56.25vw;
  object-fit: cover;
}

/* Tooltip (kept) */
.help-tip{
  position: absolute;
  top: 133px;
  right: 305px;
  text-align: center;
  background-color: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  cursor: default;
}
.help-tip:before{
  content:'?';
  font-weight: 900;
  color:#fff;
}
.help-tip:hover p{
  display:block;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.25s ease-in-out;
  animation: fadeIn 0.25s ease-in-out;
}
.help-tip p{
  display: none;
  text-align: left;
  background: rgba(20,18,26,.92);
  padding: 16px;
  width: 300px;
  position: absolute;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  right: -4px;
  color: #FFF;
  font-size: 13px;
  line-height: 1.4;
  top: -35px;
  left: 105%;
  border: 1px solid rgba(255,255,255,.12);
}
.help-tip p:before{
  position: absolute;
  content: '';
  width:0;
  height: 0;
  border:6px solid transparent;
  border-bottom-color: rgba(20,18,26,.92);
  left:10px;
  top:12px;
}
.help-tip p:after{
  width:100%;
  height:40px;
  content:'';
  position: absolute;
  top:-40px;
  left:0;
}
@-webkit-keyframes fadeIn {
  0% { opacity:0; transform: scale(0.96); }
  100% { opacity:1; transform: scale(1); }
}
@keyframes fadeIn {
  0% { opacity:0; transform: scale(0.96); }
  100% { opacity:1; transform: scale(1); }
}

.product-card__top--center{
  justify-content: center;
  text-align: center;
}

.product-card__top--center .product-card__title{
  width: 100%;
}

/* небольшой зазор под fixed navbar */
.product-section--first{
  margin-top: 14px;
}

@media (max-width: 991.98px){
  .product-section--first{
    margin-top: 10px;
  }
}



 .colortext {
  background-color: #57595D; /* Цвет фона */
  color: #FFFFFF; /* Цвет текста */
 }

.vip-text {
    font-size: 16px; /* Размер текста */
    font-weight: bold;
    color: white; /* Белый текст */
    padding: 6px 12px; /* Отступы внутри */
    background: black; /* Чёрный фон */
    display: inline-block; /* Чтобы фон подстраивался под текст */
    border-radius: 4px; /* Скругление углов */
    text-shadow: 1px 1px 4px rgba(255, 215, 0, 0.8); /* Лёгкая золотая тень */
}

/* =========================
   Payment Modals (COMPACT UI)
   Append at VERY END of CSS
   ========================= */

/* smaller modal */
.pm-modal .pm-dialog{
  max-width: 640px;
}
@media (max-width: 575.98px){
  .pm-modal .pm-dialog{ max-width: 96vw; margin: 0 auto; }
}

/* IMPORTANT: make modal fully opaque to avoid "progress bar" bleeding through */
.pm-modal .pm-content{
  background: rgba(14,14,18,.98) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
}

/* header */
.pm-modal .pm-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
}
.pm-modal .pm-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}
.pm-modal .pm-close{
  opacity: .85;
  text-shadow: none;
  color: rgba(255,255,255,.9);
}
.pm-modal .pm-close:hover{ opacity: 1; }

/* body */
.pm-modal .pm-body{
  padding: 10px 12px 12px;
  background: transparent;
}
.pm-modal .modal-body{
  max-height: calc(100vh - 210px);
  overflow: auto;
}

/* section */
.pm-section-head{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 2px 0 8px;
}
.pm-section-title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.78);
}
.pm-pill{
  display:inline-flex;
  align-items:center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(184,134,11, .14);
  border: 1px solid rgba(184,134,11, .26);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
}

/* divider */
.pm-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 10px 0;
}

/* option: compact, no visible radio dot */
.pm-option{
  position: relative;
  display:block;
  margin: 8px 0;
  cursor: pointer;
  user-select: none;
}

/* hide radio completely (fix #2) */
.pm-option .pm-radio{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* card */
.pm-card{
  display:block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* hover */
.pm-option:hover .pm-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

/* selected state: NOT red (fix #3) */
.pm-option .pm-radio:checked + .pm-card{
  background: rgba(98,167,227,.10);
  border-color: rgba(98,167,227,.55);
  box-shadow: 0 0 0 2px rgba(98,167,227,.18);
}

/* disabled */
.pm-option .pm-radio:disabled + .pm-card{
  opacity: .45;
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

/* row content */
.pm-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  justify-content: space-between;
}
.pm-name{
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
}

/* badges (more compact) */
.pm-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pm-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}

/* notes */
.pm-note{
  display:block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.70);
}
.pm-note--warn{
  color: rgba(255,255,255,.90);
  background: rgba(255,91,91,.10);
  border: 1px solid rgba(255,91,91,.20);
  padding: 8px 10px;
  border-radius: 12px;
}
.pm-note--info{
  background: rgba(98,167,227,.10);
  border: 1px solid rgba(98,167,227,.18);
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
}
.pm-note--sub{
  color: rgba(255,255,255,.68);
}

/* info icon */
.pm-modal .pm-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}

/* Don't override inline colors for special icons */
.pm-modal .pm-info i{
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,.72);
}
.pm-modal .pm-info--head{ margin-left: 2px; }

/* footer */
.pm-modal .pm-footer{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  gap: 10px;
}
.pm-modal .pm-btn-primary,
.pm-modal .pm-btn-secondary{
  border-radius: 14px;
  padding: 9px 14px;
  font-weight: 900;
}

/* ===== FIX #5: tooltips not clipped inside scrollable modal =====
   Make tooltips fixed and centered over modal (simple + reliable). */
.pm-modal .custom-tooltip-text{
  position: fixed !important;
  top: 12% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  margin-left: 0 !important;
  width: min(520px, 92vw) !important;
  max-width: 92vw !important;
  z-index: 4000 !important;
  border-radius: 12px !important;
}
.pm-modal .custom-tooltip-text::after{
  display: none !important;
}

/* =========================
   Order-input modals -> same style as "Выберите метод оплаты"
   + footer buttons: grey like Buy/Sell cards
   ========================= */

/* 1) Одинаковый фон/рамка/тени как у pm-content */
.modal-content#ServerConnect,
#corporate-data-modal .modal-content{
  background: rgba(14,14,18,.98) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
}

/* 2) Хедер как в pm */
.modal-header#ServerConnect,
#corporate-data-modal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  padding: 10px 12px !important;
}

.modal-content#ServerConnect .modal-title,
#corporate-data-modal .modal-title{
  margin: 0 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: 18px !important;
  color: rgba(255,255,255,.92) !important;
}

/* Крестик */
.modal-header#ServerConnect .close,
#corporate-data-modal .modal-header .close{
  opacity: .85 !important;
  text-shadow: none !important;
  color: rgba(255,255,255,.9) !important;
}
.modal-header#ServerConnect .close:hover,
#corporate-data-modal .modal-header .close:hover{
  opacity: 1 !important;
}

/* 3) Боди: компактные отступы + скролл как в pm */
.modal-content#ServerConnect .modal-body,
#corporate-data-modal .modal-body{
  padding: 10px 12px 12px !important;
  background: transparent !important;
  max-height: calc(100vh - 210px);
  overflow: auto;
}

/* 4) Инпуты/селекты — тёмные */
.modal-content#ServerConnect .form-control,
#corporate-data-modal .form-control{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.modal-content#ServerConnect .form-control::placeholder,
#corporate-data-modal .form-control::placeholder{
  color: rgba(255,255,255,.45) !important;
}
.modal-content#ServerConnect .form-control:focus,
#corporate-data-modal .form-control:focus{
  border-color: rgba(196,50,53,.45) !important;
  box-shadow: 0 0 0 3px rgba(196,50,53,.22) !important;
  outline: none !important;
}

/* Лейблы чуть плотнее/светлее */
.modal-content#ServerConnect label,
#corporate-data-modal label{
  color: rgba(255,255,255,.80) !important;
  font-weight: 700 !important;
}

/* Радио/чекбоксы (акцент) */
.modal-content#ServerConnect,
#corporate-data-modal{
  accent-color: var(--accent-2);
}

/* 5) Серые кнопки в футере (только футер!) — как на карточках */
.pm-modal .pm-footer .btn,
.modal-content#ServerConnect .modal-footer .btn,
#corporate-data-modal .modal-footer .btn{
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  padding: 10px 14px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pm-modal .pm-footer .btn:hover,
.modal-content#ServerConnect .modal-footer .btn:hover,
#corporate-data-modal .modal-footer .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
}

.pm-modal .pm-footer .btn:focus,
.modal-content#ServerConnect .modal-footer .btn:focus,
#corporate-data-modal .modal-footer .btn:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196,50,53,.28) !important;
}

/* 6) Футер: как в pm */
.modal-content#ServerConnect .modal-footer,
#corporate-data-modal .modal-footer{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding: 10px 12px !important;
  background: transparent !important;
}
/* =========================
   FIXES requested (modal inputs + buttons + tooltip)
   ========================= */

/* --- общий "синий" (как у тебя на сайте в некоторых местах) --- */
:root{
  --tf2-blue: rgba(98,167,227,.85);
  --tf2-blue-55: rgba(98,167,227,.55);
  --tf2-blue-22: rgba(98,167,227,.22);
}

/* 1) Центрируем заголовок в модалках ввода данных */
.modal-header#ServerConnect,
#corporate-data-modal .modal-header{
  position: relative !important;
  justify-content: center !important;
}

.modal-header#ServerConnect .modal-title,
#corporate-data-modal .modal-title{
  width: 100% !important;
  text-align: center !important;
  /* чтобы не налезал крестик справа */
  padding: 0 44px !important;
}

.modal-header#ServerConnect .close,
#corporate-data-modal .modal-header .close{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 2) Autofill (выбор сохранённых данных) — убираем белый фон */
.modal-content#ServerConnect input:-webkit-autofill,
.modal-content#ServerConnect textarea:-webkit-autofill,
.modal-content#ServerConnect select:-webkit-autofill,
#corporate-data-modal input:-webkit-autofill,
#corporate-data-modal textarea:-webkit-autofill,
#corporate-data-modal select:-webkit-autofill{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92) !important;

  /* перекрашиваем фон автозаполнения */
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.05) inset !important;
  box-shadow: 0 0 0 1000px rgba(255,255,255,.05) inset !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;

  transition: background-color 999999s ease-in-out 0s !important;
}

/* 3) Фокус инпутов — вместо красного делаем синий */
.modal-content#ServerConnect .form-control:focus,
#corporate-data-modal .form-control:focus{
  border-color: var(--tf2-blue-55) !important;
  box-shadow: 0 0 0 3px var(--tf2-blue-22) !important;
  outline: none !important;
}

/* 4) Фокус/нажатие кнопок — вместо красного делаем синий
      (Продолжить/Назад/Закрыть + Купить/Продать) */
.pm-modal .pm-footer .btn:focus,
.pm-modal .pm-footer .btn:focus-visible,
.pm-modal .pm-footer .btn:active,
.modal-content#ServerConnect .modal-footer .btn:focus,
.modal-content#ServerConnect .modal-footer .btn:focus-visible,
.modal-content#ServerConnect .modal-footer .btn:active,
#corporate-data-modal .modal-footer .btn:focus,
#corporate-data-modal .modal-footer .btn:focus-visible,
#corporate-data-modal .modal-footer .btn:active,
.one-server.product-card .btn:focus,
.one-server.product-card .btn:focus-visible,
.one-server.product-card .btn:active{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--tf2-blue-22) !important;
}

/* если где-то bootstrap добавляет красный shadow через .focus */
.pm-modal .pm-footer .btn.focus,
.modal-content#ServerConnect .modal-footer .btn.focus,
#corporate-data-modal .modal-footer .btn.focus,
.one-server.product-card .btn.focus{
  box-shadow: 0 0 0 3px var(--tf2-blue-22) !important;
}

/* --- 5) Tooltip около иконки "i" и всегда целиком виден --- */
/* прячем старый tooltip внутри pm-modal (он сейчас у тебя фиксированный по центру) */
.pm-modal .custom-tooltip-text{
  display: none !important;
}

/* плавающий тултип (будет создавать JS) */
.tf2-tooltip-float{
  position: fixed;
  z-index: 99999;
  max-width: min(560px, 92vw);
  background-color: rgba(0, 0, 0, 0.90);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);

  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility .12s ease;
  pointer-events: none;

  font-size: 13px;
  line-height: 1.35;
}

/* маленькая стрелка */
.tf2-tooltip-float::after{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,.90);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
}

/* FIX: крестик "уезжает" вверх в модалках ввода данных из-за bootstrap negative margin */
.modal-header#ServerConnect .close,
#corporate-data-modal .modal-header .close{
  margin: 0 !important;          /* убираем -1rem */
  padding: 0 !important;
  line-height: 1 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-header#ServerConnect .close span,
#corporate-data-modal .modal-header .close span{
  line-height: 1 !important;
  display: block !important;
}

/* Mobile: две карточки в ряд (50/50) */
@media (max-width: 575.98px){
  .product-row{
    margin-left: -6px;
    margin-right: -6px;
  }

  .product-row > .col-md-6.srv{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
  }

  /* чуть ужимаем внутренности, чтобы не было “жирно” */
  .one-server.product-card .product-card__media{
    padding: 14px 14px 10px;
  }
  .product-card__media img.server-header{
    max-height: 120px;
  }
  .product-card__body{
    padding: 12px 12px 14px;
  }
  .product-card__title{ font-size: 1rem; }
  .product-card__price{ font-size: .95rem; }
  .one-server.product-card .btn{
    padding: 10px 12px;
    font-size: .95rem;
  }
}

/* если экран совсем узкий — возвращаем в столбик, чтобы не ломалось */
@media (max-width: 360px){
  .product-row > .col-md-6.srv{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* =========================
   Mobile 2-cards layout: wider, symmetric, stable heights
   ========================= */
@media (max-width: 575.98px){

  /* 1) Делаем секцию почти во всю ширину (убираем лишние боковые паддинги) */
  section.section.servers.product-section{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  section.section.servers.product-section > .container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Две колонки 50/50 + нормальный gap */
  .product-row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .product-row > .col-md-6.srv{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 6px !important;
    margin-bottom: 12px !important;

    display: flex !important; /* чтобы карточка тянулась по высоте */
  }

  .one-server.product-card{
    width: 100%;
    height: 100%;
  }

  /* 3) Фиксируем вертикальную сетку внутри карточки */
  .product-card__body{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 12px 14px;
  }

  /* Заголовок: одинаковая высота (под 2 строки) */
  .product-card__title{
    font-size: 1rem;
    line-height: 1.15;
    min-height: 2.3em; /* 2 строки */
    text-align: center;
  }

  /* Цена: делаем ВСЕГДА 2 строки (₽ сверху, $ снизу) -> симметрия */
  .product-card__price{
    margin: 10px 0 8px;
    text-align: center;
    min-height: 3.2em; /* стабильная высота блока цены */
  }
  .product-card__price b{
    font-size: .95rem;
    line-height: 1.2;
  }
  /* span между ₽ и $ превращаем в перенос строки и убираем "•" */
  .product-card__price .price-sep{
    display: block;
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 4px 0;
  }

  /* “В наличии / Можем купить”: одинаковая высота */
  .product-card__meta{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    min-height: 76px; /* стабилизируем место под плашку */
  }

  span.players{
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 10px 10px;
    font-size: .9rem;
    line-height: 1.15;
  }

  /* убираем твой костыльный <br> и точку на мобилке, чтобы не ломали высоту */
  span.players br,
  span.players .dot-fix{
    display: none !important;
  }

  /* Прогресс и кнопки: одинаковые отступы, кнопка всегда внизу */
  .progress.product-progress{
    margin-top: 10px;
    margin-bottom: 12px;
  }

  .product-card__cta{
    margin-top: auto; /* прибиваем CTA вниз */
  }

  .one-server.product-card .btn{
    padding: 10px 12px;
    font-size: .95rem;
  }

  .product-card__media{
    padding: 14px 14px 10px;
  }
  .product-card__media img.server-header{
    max-height: 120px;
  }
}

/* Супер-узкие экраны: лучше в столбик, иначе будет тесно */
@media (max-width: 360px){
  .product-row > .col-md-6.srv{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .product-card__title{ min-height: 0; }
  .product-card__meta{ min-height: 0; }
  span.players{ min-height: 0; }
}

/* =========================
   Mobile fix: вернуть CTA + уменьшить "таблетку"
   ========================= */
@media (max-width: 575.98px){

  /* Карточка/боди без "жесткой" высоты — иначе кнопка может обрезаться */
  .one-server.product-card{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  .product-card__body{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 16px !important; /* место под кнопку */
  }

  /* Кнопки обратно + внизу карточки */
  .product-card__cta{
    display: flex !important;
    justify-content: center !important;
    margin-top: auto !important;
    padding-top: 12px !important;
  }

  /* Таблетка "В наличии / Можем купить" ниже по высоте */
  .product-card__meta{
    min-height: 56px !important;
    margin-top: 8px !important;
  }

  span.players{
    min-height: 52px !important;
    padding: 8px 10px !important;
    font-size: .9rem !important;
    line-height: 1.15 !important;
  }
}

/* =========================
   SAME CARD SURFACE as product-card (light corner + soft gradient)
   Apply to: payment method modals + data entry modals
   ========================= */

:root{
  /* 1-в-1 логика как у .one-server.product-card, только "светлый угол" сверху справа */
  --tf2-card-surface:
    radial-gradient(circle at 85% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(14,14,18,.98);
}

/* Выбор метода оплаты */
.pm-modal .pm-content{
  background: var(--tf2-card-surface) !important;
}

/* Все модалки ввода данных (у тебя они на #ServerConnect) */
.modal-content#ServerConnect,
#corporate-data-modal .modal-content{
  background: var(--tf2-card-surface) !important;
}

/* на всякий случай: убираем наследуемые background-image:none из старых блоков */
.pm-modal .pm-content,
.modal-content#ServerConnect,
#corporate-data-modal .modal-content{
  background-repeat: no-repeat !important;
}

/* =========================
   1:1 как твой ORIGINAL .modal-content
   для: выбор метода оплаты + ввод данных
   ========================= */

:root{
  --tf2-original-modal-bg:
    radial-gradient(circle at top left, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(20,18,26,.92);
}

.pm-modal .pm-content,
.modal-content#ServerConnect,
#corporate-data-modal .modal-content{
  background: var(--tf2-original-modal-bg) !important;
  background-repeat: no-repeat !important;

  border-radius: var(--radius) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow) !important;
}

/* границы header/footer тоже 1:1 с "обычной" модалкой */
.pm-modal .pm-header,
.modal-header#ServerConnect,
#corporate-data-modal .modal-header{
  border-bottom: 1px solid rgba(230,230,232,.18) !important;
}

.pm-modal .pm-footer,
.modal-content#ServerConnect .modal-footer,
#corporate-data-modal .modal-footer{
  border-top: 1px solid rgba(230,230,232,.18) !important;
}

/* ===== FIX #1: Bootstrap modal clickable (backdrop under modal) ===== */
.modal{
  z-index: 2000 !important;
}
.modal-backdrop{
  z-index: 1990 !important;
}

/* на всякий случай: если где-то случайно убили клики */
.modal,
.modal-dialog,
.modal-content{
  pointer-events: auto !important;
}

/* можно оставить обычную затемнялку */
.modal-backdrop.show{
  opacity: .65;
  /* если хочешь именно blur фона — включай, но это НЕ про “замытую модалку”
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  */
}

/* ===== FIX #2: Contacts links look like buttons (no blue/underline) ===== */
#contacts a,
#contacts a:hover,
#contacts a:focus{
  color: inherit !important;
  text-decoration: none !important;
}

#contacts .contact-btn{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}
#contacts .contact-btn:hover,
#contacts .contact-btn:focus{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}
#contacts .contact-btn:active{
  transform: translateY(0) !important;
}

/* ===== FIX #4: Navbar dropdowns forced to “new dark” style ===== */
nav#scroll .dropdown-menu{
  background: #1f232a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 8px 0 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  min-width: 220px;
}
nav#scroll .dropdown-item{
  color: rgba(255,255,255,.85) !important;
  padding: 10px 12px !important;
  background: transparent !important;
  text-decoration: none !important;
}
nav#scroll .dropdown-item:hover,
nav#scroll .dropdown-item:focus{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.95) !important;
  text-decoration: none !important;
}
nav#scroll .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin: 8px 0 !important;
}

  #product-keys{ z-index: auto !important; }
  
  /* =========================
   FAQ: фикс стрелочки (мобила показывала "галочку")
   ========================= */

/* убираем дефолтный маркер details */
.faq-grid details.faq-item > summary{
  list-style: none !important;
}
.faq-grid details.faq-item > summary::-webkit-details-marker{
  display: none !important;
}
.faq-grid details.faq-item > summary::marker{
  content: "" !important;
}

/* принудительно свой чеврон через SVG (стабильно на iOS/Android) */
.faq-grid details.faq-item > summary{
  position: relative;
  padding-right: 44px; /* место под иконку справа */
}

.faq-grid details.faq-item > summary::after{
  content: "" !important;
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;

  transform: translateY(-50%) rotate(0deg);
  transition: transform .15s ease, opacity .15s ease;

  /* на случай, если раньше рисовал бордерами */
  border: 0 !important;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;

  /* chevron-down SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: .75;
}

.faq-grid details.faq-item[open] > summary::after{
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}

/* =========================
   Mobile: FAQ/Guide wider + smaller text + compact bullets
   ========================= */
@media (max-width: 575.98px){

  /* 1) Ширина секции FAQ почти как у карточек товаров */
  section#faq.section.rules{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* если где-то задавался max-width у внутреннего блока */
  #faq .module-inner,
  #faq .module-surface{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2) Заголовки чуть меньше */
  #faq .module-title{
    font-size: clamp(24px, 6.6vw, 34px) !important;
    line-height: 1.05 !important;
  }
  #faq .module-subtitle{
    font-size: 14px !important;
    line-height: 1.25 !important;
    opacity: .85;
  }

  /* 3) Сами “контейнеры вопросов” шире + меньше текста, чтобы не рвало строки */
  #faq .faq-grid{
    width: 100% !important;
    max-width: 100% !important;
  }

  #faq details.faq-item{
    width: 100% !important;
  }

  #faq details.faq-item > summary{
    font-size: 15px !important;
    line-height: 1.22 !important;

    /* меньше “воздуха”, но оставляем место справа под чеврон */
    padding: 14px 44px 14px 14px !important;

    /* более приятные переносы */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  #faq .faq-body{
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* 4) Инструкция: шире + текст меньше */
  #faq .guide-wrap,
  #faq .guide-card{
    max-width: 100% !important;
    width: 100% !important;
  }

  #faq .guide-card{
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  #faq .guide-card h1{
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }

  #faq .guide-card h3{
    font-size: 15px !important;
    margin-top: 16px !important;
    margin-bottom: 10px !important;
  }

  /* 5) Главный фикс: точки <li> больше не съедают пол-экрана */
  #faq .guide-card ul,
  #faq .faq-body ul{
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 12px !important;
  }

  #faq .guide-card li,
  #faq .faq-body li{
    position: relative;
    padding-left: 16px !important;  /* небольшой отступ под маркер */
    margin: 8px 0 !important;
  }

  #faq .guide-card li::before,
  #faq .faq-body li::before{
    content: "•";
    position: absolute;
    left: 0;
    top: 0.05em;
    opacity: .8;
  }
}


/* Steam page: центрируем форму пополнения между navbar и footer */
body.steam-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.steam-page .wrapper{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
}

/* контейнер с include(modules/steam_alt.php) занимает всё доступное место */
body.steam-page .wrapper > .container{
  flex: 1 0 auto;
  display: flex;
  align-items: center;       /* вертикальное центрирование */
  justify-content: center;   /* горизонтальное центрирование */
  min-height: 0;
padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h, 72px) + 16px);  padding-bottom: 24px;
  overflow: auto;            /* если контента много — будет скролл, а не обрез */
}

/* твой steam_alt начинается с <div class="row"> — центрируем его содержимое */
body.steam-page .wrapper > .container > .row{
  width: 100%;
  justify-content: center;
  margin-left: 0;
  margin-right: 0;
}

/* УБИВАЕМ все <br>, которыми ты сейчас вручную двигаешь карточку */
body.steam-page #mainDiv > br{
  display: none !important;
}

/* на всякий случай: без лишних отступов у самой карточки */
body.steam-page #mainDiv{
  margin: 0 !important;
}

/* делаем модалки менее прозрачными */
.modal-content,
.pm-modal .pm-content,
.modal-content#ServerConnect,
#corporate-data-modal .modal-content{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(20,18,26,.98) !important; /* было .92 -> .96 (можно .97/.98) */
}

/* "btn-outline-success" в новом стиле (как серые кнопки) */
.btn.btn-outline-success{
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  padding: 12px 16px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

.btn.btn-outline-success:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: translateY(-1px);
}

/* ===== TF2 button (new design) ===== */
body.steam-page .tf2-btn{
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  padding: 12px 16px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.steam-page .tf2-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
}

body.steam-page .tf2-btn:focus,
body.steam-page .tf2-btn:focus-visible,
body.steam-page .tf2-btn:active{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--tf2-blue-22) !important;
}

/* Убираем “разделительную линию” только у блока STE */
#ste.section.rules{
  border-bottom: 0 !important;
  box-shadow: none !important;
}
#ste.section.rules::before,
#ste.section.rules::after{
  content: none !important;
  display: none !important;
}

/* Только для этой страницы: “официальный документ” */
.gte{
  /* было: padding: 34px 0 70px; */
  padding: calc(var(--nav-h, 72px) + 22px) 0 70px; /* чтобы не залезало под fixed navbar */
}
.gte-inner{ max-width: 980px; margin: 0 auto; }

/* один “лист” */
.gte-sheet{
  background: rgba(24, 24, 28, .92);
  border: 1px solid #253043;
  border-radius: 18px;
  padding: 26px 26px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  color: #eaf1f8;

  /* было: margin-top: 85px; */
  margin-top: 14px; /* теперь отступ делает заголовок сверху */
}

/* POLICY: карточка 1:1 как STE (#ServerConnect) */
.gte-sheet{
  background:
    radial-gradient(1640px 1420px at 0 0, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    rgba(20,18,26,.50) !important;
  background-repeat: no-repeat !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius, 18px) !important;
  box-shadow: var(--shadow, 0 16px 48px rgba(0,0,0,.45)) !important;
}