/* =========================
   Базовые переменные/сетка
   ========================= */
:root{
  --primary:#10B981;
  --primary-hover:#059669;
  --primary-soft:#D1FAE5;

  --bg:#F0F9FF;
  --card:#FFFFFF;
  --text:#1F2937;
  --text-soft:#6B7280;
  --border:#E5E7EB;
  --radius:12px;

  --shadow:0 10px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --accent-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);

  --side-left:250px;
  --side-right:250px;
  --page-max:1200px;
  --gap:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',sans-serif;
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  margin:0;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 100px,rgba(16,185,129,.02) 100px,rgba(16,185,129,.02) 200px),
    linear-gradient(135deg,#F0F9FF 0%,#E0F2FE 50%,#F9FAFB 100%);
  background-attachment:fixed;
}

/* Декор (без слов вроде "ad") */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;height:300px;
  background:linear-gradient(180deg,rgba(16,185,129,.15) 0%,transparent 100%);
  pointer-events:none;z-index:0;
}
body::after{
  content:'₽';
  position:fixed;top:15%;right:8%;
  font-size:200px;font-weight:900;color:rgba(16,185,129,.08);
  transform:rotate(-15deg);
  text-shadow:0 0 80px rgba(16,185,129,.15);
  pointer-events:none;z-index:0;
}

/* Сетка страницы: две боковые и центр */
.page-grid{
  display:grid;
  grid-template-columns: var(--side-left) minmax(0,1fr) var(--side-right);
  gap:var(--gap);
  align-items:start;
  justify-items:center;
  width:100%;
  padding:0 1rem;
}

/* Центральная колонка */
.page-main{ width:100%; max-width:var(--page-max); }

/* Боковые колонки со “медиа” */
.side-media{
  display:flex; flex-direction:column; gap:24px;
  position:sticky; top:50px;
}
.media-card{
  display:block; background:#f7f7f7;
  border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.media-card img{ display:block; width:100%; height:250px; object-fit: cover;}

/* Контейнер центра */
.container{
  width:100%; max-width:var(--page-max);
  margin:0 auto; padding:2rem 0rem; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}
.container::before{
  content:'🏦'; position:fixed; top:60%; left:5%;
  font-size:100px; opacity:.08; pointer-events:none;
  animation:float 6s ease-in-out infinite;
}
.container::after{
  content:'💰'; position:fixed; bottom:10%; right:5%;
  font-size:120px; opacity:.08; pointer-events:none;
  animation:float 8s ease-in-out infinite;
}

/* Анимации */
@keyframes float{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-20px) rotate(5deg)} }
@keyframes pulse{ 0%,100%{opacity:.08; transform:scale(1)} 50%{opacity:.12; transform:scale(1.05)} }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* Шапка */
.header-section{ text-align:center; margin-bottom:3rem; padding:2rem 0; position:relative; }
.header-section::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:5px; background:var(--accent-gradient); border-radius:3px; opacity:.6;
  box-shadow:0 0 20px rgba(16,185,129,.3);
}
.header-section::after{
  content:'◆ ◆ ◆'; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  font-size:16px; color:rgba(16,185,129,.4); letter-spacing:15px;
}
.header-section h1{
  font-size:2.5rem; margin:0 0 1rem 0;
  background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-weight:800; letter-spacing:-.5px;
}
.header-section p{ font-size:1.125rem; color:var(--text-soft); max-width:800px; margin:0 auto; line-height:1.7; }

/* Карточки */
.card{
  background:linear-gradient(to bottom right,#FFFFFF 0%,#FEFEFE 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem;
  border:1px solid rgba(229,231,235,.5);
  transition:box-shadow .3s ease;
  position:relative; overflow:hidden;
  width:100%; max-width:100%;
}
.card::before{
  content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px;
  background:radial-gradient(circle, rgba(16,185,129,.12) 0%, transparent 70%);
  border-radius:50%; pointer-events:none; animation:pulse 4s ease-in-out infinite;
}
.card:hover{ box-shadow:0 20px 35px -5px rgb(0 0 0 / .12), 0 10px 15px -6px rgb(0 0 0 / .08); }
.card h2{ margin-top:0; margin-bottom:1.5rem; text-align:center; font-size:1.5rem; }

/* Декор конкретных карточек */
#calculator-section::after{
  content:'%'; position:absolute; bottom:15px; left:20px;
  font-size:120px; font-weight:900; color:rgba(16,185,129,.06);
  text-shadow:0 0 40px rgba(16,185,129,.1); pointer-events:none;
}
#results-section::after{
  content:'₽₽₽'; position:absolute; top:50%; right:30px;
  font-size:60px; font-weight:700; color:rgba(16,185,129,.06);
  transform:translateY(-50%) rotate(90deg); letter-spacing:10px;
  text-shadow:0 0 40px rgba(16,185,129,.1); pointer-events:none;
}

/* Разметка внутри */
.main-layout{ display:flex; flex-direction:column; gap:2rem; }
.min-fee-note{ text-align:center; font-size:.9em; margin-top:-2em; margin-bottom:5px; font-weight:bold; }

/* Форма */
#calculator-form{
  display:grid;
  grid-template-columns: 1fr 1.5fr 1.5fr 1fr 1fr;
  gap:.75rem; align-items:end;
}
.form-group{ margin-bottom:0; }
.form-group label{
  display:block; font-weight:600; margin-bottom:.3rem; font-size:.8rem; white-space:nowrap;
}
.form-group input,.form-group select{
  width:100%; padding:.5rem; border:1px solid var(--border); border-radius:6px; font-size:.9rem; height:38px;
}
.form-group input:focus,.form-group select:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(16,185,129,.2);
}

.calculate-btn{
  width:100%;
  padding:.8rem 1rem;
  background:var(--accent-gradient);
  color:#fff; border:0; border-radius:8px; font-size:1.05rem;
  font-weight:700; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 4px 12px rgba(16,185,129,.3);
}
.calculate-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,185,129,.4); }
.calculate-btn:active{ transform:translateY(0); }

/* === Primary CTA: "Перейти на сайт" — базовый вид для всех брейкпоинтов === */
.apply-btn{
    width: 100%;
  padding: 0.7rem 0.3rem;
  background: var(--accent-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
  display: block;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
  
  .apply-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,185,129,.4);
  }
  
  .apply-btn:active{
    transform: translateY(0);
    filter: brightness(.98);
  }
  
  .apply-btn:focus-visible{
    outline: 3px solid rgba(16,185,129,.35);
    outline-offset: 2px;
  }
  
  /* защита от лишних отступов в ячейке таблицы */
  .results-table td:last-child .apply-btn{
    margin:0;
  }
  

/* Результаты */
#results-container .placeholder{
  text-align:center; color:var(--text-soft); padding:3rem 1rem;
  border:2px dashed var(--border); border-radius:var(--radius);
}
.table-wrapper{ overflow-x:auto; }
.results-table{
  width:100%; border-collapse:collapse; margin-top:1rem; table-layout:fixed;
}
.results-table th,.results-table td{
  padding:1rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle;
}
.results-table td:last-child{ padding:.5rem; }
.results-table th{
  font-weight:700; color:var(--text); font-size:.8rem; text-transform:uppercase;
  background:linear-gradient(to bottom,#F9FAFB 0%, #F3F4F6 100%);
  letter-spacing:.5px;
}
.results-table tbody tr{ transition:background-color .2s ease; animation:fadeIn .3s ease-in-out; }
.results-table tbody tr:hover{ background-color:rgba(16,185,129,.03); }
.results-table tbody tr:nth-child(even){ background-color:rgba(249,250,251,.5); }
.results-table .bank-name-cell{ font-weight:700; color:var(--primary); font-size:1.05rem; }
.results-table .bank-note{ display:block; font-size:.75rem; color:var(--text-soft); font-weight:400; margin-top:.25rem; line-height:1.4; }
.results-table tr:last-child td{ border-bottom:none; }
.disclaimer{ font-size:.875rem; color:var(--text-soft); text-align:center; margin-top:1.5rem; }

/* Вставки предупреждений/бейджей */
.warnings-banner{
  background:linear-gradient(135deg,#FEF3C7 0%, #FDE68A 100%);
  border-left:4px solid #F59E0B; padding:1rem 1.5rem; margin-bottom:1.5rem; border-radius:8px;
  box-shadow:0 2px 8px rgba(245,158,11,.15);
}
.warnings-banner p{ color:#92400E; margin:0; font-size:.9rem; font-weight:500; }
.best-deal-badge{
  display:inline-block; background:linear-gradient(135deg,#F59E0B 0%, #D97706 100%);
  color:#fff; font-size:.75rem; padding:.25rem .6rem; border-radius:12px; margin-left:.5rem; font-weight:700;
  box-shadow:0 2px 4px rgba(245,158,11,.3);
}

/* Ошибки/лоадер */
.loading-spinner{
  border:4px solid rgba(16,185,129,.1);
  border-top:4px solid var(--primary); border-radius:50%;
  width:50px; height:50px; animation:spin 1s linear infinite; margin:0 auto 1rem;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.placeholder.error{ border-color:#EF4444; background:#FEE2E2; }
.placeholder.error p{ color:#DC2626; }
.error-details{ font-size:.875rem; color:#991B1B; margin-top:.5rem; font-family:monospace; }

/* Inline-блоки внутри таблицы (не называем их “ads”) */
.inline-media-row{ display:none; } /* desktop: скрыты */
.inline-media-card{
  border-radius:12px; overflow:hidden; background:#f7f7f7; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.inline-media-card a{ display:block; }
.inline-media-card img{ display:block; width:100%; height:250px; object-fit: contain; }

/* Модалка/футер */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; justify-content:center; align-items:center; z-index:1000; opacity:0; visibility:hidden; transition:.3s; }
.modal-overlay.active{ opacity:1; visibility:visible; }
.modal-content{ background:var(--card); padding:2rem; border-radius:var(--radius); box-shadow:var(--shadow); width:90%; max-width:500px; position:relative; }
.modal-close{ position:absolute; top:1rem; right:1rem; font-size:1.5rem; font-weight:700; color:var(--text-soft); cursor:pointer; border:0; background:none; }
footer{
  text-align:center; padding:2rem; margin-top:4rem; color:var(--text-soft); font-size:.9rem;
  border-top:1px solid rgba(229,231,235,.5);
  background:linear-gradient(to top, rgba(249,250,251,.5) 0%, transparent 100%);
}

/* ==========
   Адаптив
   ========== */
@media (max-width:1200px){
  .container{ width:92%; padding:2rem; }
}
@media (max-width:1024px){
  /* Скрываем боковые колонки и показываем inline в таблице */
  .page-grid{ grid-template-columns:1fr; gap:0; }
  .side-media{ display:none; }

  /* форма – две колонки */
  #calculator-form{
    grid-template-columns:1fr 1fr; gap:1rem;
  }
  .form-group:nth-child(1), .form-group:nth-child(2), .form-group:nth-child(3){ grid-column:span 2; }
  .form-group:nth-child(4), .form-group:nth-child(5){ grid-column:span 1; }
  .calculate-btn{ grid-column:span 2; height:42px; }

  /* показать inline строки */
  .inline-media-row{ display:table-row; }
}

@media (max-width:768px){
  .container{ width:100%; padding:1rem; }
  body::after{ font-size:120px; opacity:.04; top:10%; right:-5%; }
  .container::before,.container::after,#calculator-section::after,#results-section::after{ display:none; }

  .header-section{ margin-bottom:2rem; padding:1.5rem 0; }
  .header-section::before{ width:80px; height:4px; }
  .header-section::after{ font-size:12px; letter-spacing:10px; }
  .header-section h1{ font-size:1.75rem; line-height:1.2; margin-bottom:.75rem; }
  .header-section p{ font-size:.95rem; line-height:1.6; }

  .card{ padding:1.25rem; margin-bottom:1rem; }
  .card h2{ font-size:1.25rem; margin-bottom:1.25rem; }

  /* форма – в столбик */
  #calculator-form{ grid-template-columns:1fr; gap:1rem; }
  .form-group input,.form-group select{ font-size:16px; padding:.65rem; height:44px; }
  .calculate-btn{ height:48px; font-size:1rem; }

  /* таблицу превращаем в карточки */
  .table-wrapper{ overflow-x:hidden; }
  .results-table{ border:0; }
  .results-table thead{
    border:none; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;
  }
  .results-table tbody{ display:flex; flex-direction:column; gap:1rem; }
  .results-table tr{
    display:block; border:1px solid var(--border);
    border-radius:var(--radius); padding:1.25rem; background:var(--card);
    box-shadow:0 2px 8px rgb(0 0 0 / .06);
  }
  .results-table td{
    display:flex; justify-content:space-between; align-items:flex-start;
    text-align:right; font-size:.9rem; border-bottom:1px solid var(--border); padding:.75rem 0;
  }
  .results-table td:last-child{ border-bottom:0; padding-top:1rem; }
  .results-table td::before{
    content:attr(data-label); font-weight:700; text-align:left; padding-right:1rem;
    color:var(--text-soft); flex-shrink:0; font-size:.85rem;
  }
  .results-table td.bank-name-cell{
    display:block; font-size:1.15rem; font-weight:700; text-align:center;
    padding-bottom:1rem; border-bottom:2px solid var(--primary); margin-bottom:.75rem;
  }
  .results-table td.bank-name-cell::before{ display:none; }
  .results-table .bank-note{ font-size:.7rem; margin-top:.35rem; text-align:center; line-height:1.4; }

  /* КНОПКА ВНУТРИ КАРТОЧКИ */
  @media (max-width:768px){
    .results-table .apply-btn{
      width:100%;
      text-align:center;       /* только выравнивание текста */
    }
  }
  
  

  /* ВАЖНО: inline-блок в мобильной “карточочной” таблице — как обычный блок */
  .inline-media-row{ display:block; }
  .results-table .inline-media-row td{
    display:block; padding:0; border:0;
  }
  .results-table .inline-media-row td::before{ content:none; }
  .inline-media-card{ width:100%; }
  .inline-media-card a, .inline-media-card img{ display:block; width:100%; height:auto; }

  .main-layout{ gap:1.5rem; }
  footer{ margin-top:2rem; padding:1.5rem 1rem; font-size:.85rem; }

  .warnings-banner{ padding:.875rem 1rem; font-size:.85rem; }
  .placeholder{ padding:2rem 1rem; font-size:.9rem; }
}

@media (max-width:640px){
  .header-section h1{ font-size:1.6rem; }
  .card{ padding:1.15rem; }
  body::after{ display:none; }
}

@media (max-width:480px){
  .container{ padding:.75rem; }
  .header-section{ padding:1rem 0; margin-bottom:1.5rem; }
  .header-section h1{ font-size:1.5rem; }
  .header-section p{ font-size:.9rem; }
  .card{ padding:1rem; border-radius:10px; }
  .card h2{ font-size:1.1rem; margin-bottom:1rem; }
  .form-group label{ font-size:.8rem; }
  .form-group input,.form-group select{ padding:.6rem; font-size:16px; border-radius:8px; }
  .calculate-btn{ height:46px; font-size:.95rem; }
  .results-table tr{ padding:1rem; }
  .results-table td{ font-size:.85rem; padding:.6rem 0; }
  .results-table td::before{ font-size:.8rem; }
  .results-table td.bank-name-cell{ font-size:1.05rem; padding-bottom:.875rem; }
  .results-table .bank-note{ font-size:.65rem; }
  .apply-btn{ padding:.7rem .875rem; font-size:.9rem; }
  .main-layout{ gap:1.25rem; }
  footer{ padding:1.25rem .75rem; font-size:.8rem; }
}

@media (max-width:360px){
  .container{ padding:.5rem; }
  .header-section h1{ font-size:1.35rem; }
  .card{ padding:.875rem; }
  .form-group input,.form-group select{ padding:.55rem; }
  .results-table td{ font-size:.8rem; }
}