/* ═══════════════════════════════════════════════════════════════
   TestChange — публичный интерфейс. Редизайн 2026-09-30.
   Современный светлый минимализм. HTML-структура и id/классы
   сохранены (логика обмена завязана на них) — переписан только стиль.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: logoFont;      src: url(../assets/fonts/Helvetica-Bold.ttf); }
@font-face { font-family: GilroyBold;     src: url(../assets/fonts/Gilroy-Bold.ttf); }
@font-face { font-family: GilroyMedium;   src: url(../assets/fonts/Gilroy-Medium.ttf); }
@font-face { font-family: GilroyRegular;  src: url(../assets/fonts/Gilroy-Regular.ttf); }

:root{
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-soft:#F2F4F8;
  --text:#0F1729;
  --text-muted:#6B7280;
  --border:#E6E9F0;
  --border-strong:#D4D9E3;
  --accent:#FF7A1A;
  --accent-hover:#EA6905;
  --accent-soft:#FFF1E6;
  --green:#16A34A;
  --green-soft:#DCFCE7;
  --danger:#E23636;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 14px rgba(17,24,41,.06);
  --shadow-lg:0 12px 40px rgba(17,24,41,.10);
  --f-bold:'GilroyBold',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-med:'GilroyMedium',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-reg:'GilroyRegular',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
p{ margin:0; }
a{ text-decoration:none; color:inherit; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-reg);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.centering{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

/* ── Уведомление (фишинг-предупреждение) ── */
.notification{
  max-width:1200px;
  margin:16px auto 0;
  padding:14px 18px;
  background:var(--accent-soft);
  border:1px solid #FFD8B5;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  color:#8A4B12;
  font-family:var(--f-med);
}
.not-text{ flex:1; }
.not-close{ cursor:pointer; opacity:.6; transition:opacity .15s; }
.not-close:hover{ opacity:1; }

/* ── Навигация ── */
nav.navbar{ padding:22px 0; }
nav.navbar > div{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
nav button{ border:none !important; outline:none !important; background:none; }
.logo{ font-family:logoFont; font-weight:bold; font-size:26px; letter-spacing:-.01em; }
.logo p{ margin:0; }
.logo1{ color:var(--accent); }
.logo2{ color:var(--text); }

.nav-menu ul{ list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin:0; }
.nav-menu li{ color:var(--text-muted); cursor:pointer; font-family:var(--f-med); font-size:15px; transition:color .15s; }
.nav-menu li:hover{ color:var(--accent); }
.select-language{ background:transparent; border:none; outline:none; cursor:pointer; color:var(--text-muted); font-family:var(--f-med); }
.select-language img{ width:22px; }
.hover-underline-animation{ position:relative; }

/* ── Hero ── */
.first_section{
  margin-top:8px;
  background:linear-gradient(120deg,#FFF6EE 0%,#FFFFFF 60%);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:44px 48px;
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.first_text{ width:56%; }
.first_text .title{
  font-family:var(--f-bold);
  font-size:44px;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:16px;
}
.first_text .description{
  font-family:var(--f-med);
  font-size:19px;
  line-height:1.55;
  color:var(--text-muted);
}
.first_bg_img{ width:34%; text-align:right; }
.first_bg_img img{ max-width:100%; width:100%; }

/* ── Область формы ── */
.main-main{ margin-top:40px; margin-bottom:20px; }
.form{ display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.coins{ width:32%; display:flex; justify-content:space-between; gap:16px; }
.form_form{ width:66%; }

/* Списки монет (send / receive) */
.send, .receive{ width:100%; }
.block_title{ font-family:var(--f-bold); font-size:14px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; padding-left:4px; }
.coins_send, .coins_receive{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  max-height:520px;
  overflow-y:auto;
  box-shadow:var(--shadow);
}
.searchCoin{
  width:100%;
  background:var(--surface-soft);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:var(--radius-sm);
  outline:none;
  font-family:var(--f-reg);
  font-size:14px;
  margin-bottom:8px;
  transition:border-color .15s;
}
.searchCoin:focus{ border-color:var(--accent); }
.coin{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0;
  background:var(--surface);
  padding:10px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background .15s;
}
.coin:hover{ background:var(--accent-soft) !important; }
.coin img{ width:34px; height:34px; border-radius:50%; object-fit:contain; }
.coin_text{ display:flex; align-items:center; }
.coin p{ font-family:var(--f-med); font-size:15px; }

/* Карточка формы */
.real_form_form{
  margin-top:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.form_top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; padding-left:4px; }
.form_top > div{ margin-right:0; display:flex; align-items:center; }
.form_top svg{ color:var(--accent); }
.form_top .lng-exchange{ font-family:var(--f-bold); font-size:18px; color:var(--text); }
#rate_p{
  margin-left:auto;
  background:var(--surface-soft);
  border:1px solid var(--border);
  padding:7px 14px;
  border-radius:20px;
  font-family:var(--f-med);
  font-size:14px;
  color:var(--text-muted);
}

.send_receive_inputs{ padding:22px 26px 26px; }
.send_receive_inputs > div{ display:flex; justify-content:space-between; width:100%; margin:16px 0; }

.inputs_inputs{ gap:0; }
.inputDiv{ width:48%; }
.coinInfo{ margin-bottom:8px; color:var(--text-muted); font-family:var(--f-med); font-size:13px; }
.mobileInputDiv{ position:relative; }

.send_receive_inputs input, .user_wallet{
  background:var(--surface-soft);
  border:1px solid var(--border);
  outline:none;
  padding:16px 18px;
  border-radius:var(--radius-sm);
  width:100%;
  font-family:var(--f-med);
  font-size:16px;
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.send_receive_inputs input::placeholder, .user_wallet::placeholder{ color:#A7AEBB; }
.send_receive_inputs input:focus, .user_wallet:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
#receiveInput{ background:var(--surface-soft); color:var(--text-muted); cursor:default; }

.switchBtn{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex-shrink:0;
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:50%;
  margin-top:26px;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.switchBtn:hover{ background:var(--accent); color:#fff; transform:scale(1.05); }
.switchBtn svg{ width:18px; height:18px; }

/* Email / Wallet / Promo */
.user_email_div, .user_wallet_div{ display:block !important; }
.user_promo_div > div{ display:flex; width:100%; }
.user_promo_div input{ width:82%; border-radius:var(--radius-sm) 0 0 var(--radius-sm) !important; }
.user_promo_div button{
  width:18%;
  border:none;
  background:var(--green-soft);
  color:var(--green);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  cursor:pointer;
  outline:none;
  transition:background .15s, color .15s;
  display:flex; align-items:center; justify-content:center;
}
.user_promo_div button:hover{ background:var(--green); color:#fff; }

/* Ошибки */
#error, #errorEmail, #errorWallet{ color:var(--danger); font-family:var(--f-med); margin:6px 0 0; font-size:13px; }
#errorEmail, #errorWallet{ display:none; }
.wrongInput{ border-color:var(--danger) !important; box-shadow:0 0 0 3px rgba(226,54,54,.12) !important; }

/* Правила + кнопка */
.terms_div{ display:flex; align-items:center; justify-content:center; text-align:center; }
.terms_div p{ text-align:center; font-size:13px; color:var(--text-muted); font-family:var(--f-med); }
.exchange_button_div button{
  width:100%;
  border:none;
  padding:18px;
  cursor:pointer;
  outline:none;
  background:var(--accent);
  color:#fff;
  font-family:var(--f-bold);
  font-size:16px;
  border-radius:var(--radius-sm);
  transition:background .2s, transform .1s;
}
.exchange_button_div button:hover{ background:var(--accent-hover); }
.exchange_button_div button:active{ transform:translateY(1px); }

/* Footer */
footer{ margin:40px 0 20px; padding-top:24px; border-top:1px solid var(--border); }
footer > div{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer > div > div{ display:flex; align-items:center; gap:10px; color:var(--text-muted); }
footer img{ max-width:96px; }

/* Telegram кнопка */
.tg_support{ position:fixed; bottom:24px; right:24px; cursor:pointer; z-index:50; transition:transform .15s; }
.tg_support:hover{ transform:translateY(-3px); }

/* Прелоадер стилизуется в loading.css (#loader там display:none по умолчанию,
   JS показывает его временно при обновлении курсов) — здесь не переопределяем. */

/* Мобильный выбор монеты (иконка в поле) */
.mobileCoin{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:44px; height:36px;
  background-size:26px; background-repeat:no-repeat; background-position:center;
  cursor:pointer; border-radius:8px;
}

/* ══════════════ Адаптив ══════════════ */
@media (max-width:1100px){
  .coins{ width:36%; }
  .form_form{ width:62%; }
  .first_text .title{ font-size:36px; }
  .first_text .description{ font-size:17px; }
}
@media (max-width:980px){
  .inputs_inputs{ display:block !important; }
  .inputDiv{ width:100%; }
  .inputDiv + .switchBtn, .switchBtn{ margin:14px auto; }
  #switchBtn svg{ transform:rotate(90deg); }
}
@media (max-width:930px){
  .form{ display:block; }
  .coins, .send, .receive{ display:none; }
  .form_form{ width:100%; }
  .mobileInputDiv{ display:flex; }
  .mobileHide{ display:none !important; }
  .first_text{ width:62%; }
}
@media (max-width:680px){
  .first_section{
    background:linear-gradient(120deg,#FFF6EE,#FFFFFF), url(../assets/first_bg.png) center/cover no-repeat;
    padding:28px 22px;
  }
  .first_text{ width:100%; }
  .first_bg_img{ display:none; }
  .first_text .title{ font-size:28px; }
  .first_text .description{ font-size:15px; }
  .nav-menu ul{ gap:16px; }
}
@media (max-width:560px){
  .centering{ padding:0 16px; }
  .send_receive_inputs{ padding:18px; }
  .notification{ margin:12px 16px 0; }
}

/* ══════════════ Информационные секции ══════════════ */
.info-section{ margin:56px 0; }
.section-title{ font-family:var(--f-bold); font-size:28px; color:var(--text); text-align:center; margin-bottom:32px; letter-spacing:-.01em; }

/* Преимущества */
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.feature-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.feature-ico{ font-size:32px; margin-bottom:14px; }
.feature-card h3{ font-family:var(--f-bold); font-size:18px; margin-bottom:8px; color:var(--text); }
.feature-card p{ color:var(--text-muted); font-size:14px; line-height:1.55; }

/* Шаги */
.steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.step-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow); }
.step-num{ width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-family:var(--f-bold); font-size:19px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.step-card h3{ font-family:var(--f-bold); font-size:16px; margin-bottom:8px; color:var(--text); }
.step-card p{ color:var(--text-muted); font-size:14px; line-height:1.55; }

/* Резервы */
.reserves-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.reserve-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); }
.reserve-card img{ width:36px; height:36px; border-radius:50%; object-fit:contain; flex-shrink:0; }
.res-coin{ font-family:var(--f-med); font-size:13px; color:var(--text-muted); }
.res-amt{ font-family:var(--f-bold); font-size:15px; color:var(--text); }
.res-dot{ margin-left:auto; width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); flex-shrink:0; }

/* Отзывы */
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.review-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.review-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.review-name{ font-family:var(--f-bold); font-size:15px; color:var(--text); }
.review-stars{ color:#FBB040; font-size:14px; letter-spacing:1px; }
.review-text{ color:var(--text); font-size:14px; line-height:1.6; margin-bottom:12px; }
.review-date{ color:var(--text-muted); font-size:12px; }

/* FAQ */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px 20px; box-shadow:var(--shadow); }
.faq-item summary{ font-family:var(--f-med); font-size:16px; color:var(--text); padding:16px 0; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--accent); font-size:22px; font-weight:bold; flex-shrink:0; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item p{ color:var(--text-muted); font-size:14px; line-height:1.6; padding:0 0 16px; }

@media (max-width:560px){
  .info-section{ margin:40px 0; }
  .section-title{ font-size:23px; margin-bottom:24px; }
}