/* =========================================================
   SOFT PLASTIC UI + DARK THEME (light/dark via html.dark)
   =======================================================*/

/* ---------- Токены (переменные) ---------- */
:root{
  /* Базовые цвета (светлая тема) */
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #222;
  --muted: #6b7280;
  --primary: #14aa57;           /* зелёный: карточки/primary */
  --primary-deep: #0d7d3e;
  --accent: #ff7f50;

  /* Контуры/тени для неоморфизма */
  --shadow-dark: rgba(0, 0, 0, .18);
  --shadow-light: rgba(255, 255, 255, .95);

  /* Рамки/линии */
  --border: #e5e7eb;

  /* Серебро для secondary */
  --silver-0: #FDFDFD;
  --silver-1: #FFFFFF;
  --silver-2: #D8D9DB;
  --silver-3: #8F9092;

  /* Радиусы/скорости */
  --r-lg: 18px;
  --r-xl: 26px;
  --dur: .2s;
}

html.dark{
  --bg: #1d1f23;
  --card: #21252b;
  --text: #e6e6e6;
  --muted: #9aa3ad;
  --primary: #14c96a;
  --primary-deep: #0f8c4f;
  --accent: #ff9a6b;

  --shadow-dark: rgba(0, 0, 0, .55);
  --shadow-light: rgba(255, 255, 255, .08);

  --border: #2d3238;

  --silver-0: #2b2f36;
  --silver-1: #2f343b;
  --silver-2: #3a4048;
  --silver-3: #565c66;
}

/* ---------- База ---------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin:0; padding:0;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
h1{ font-size:26px; text-align:center; margin:10px; color:var(--text); }
h2,h3{ color:var(--text); }

/* ---------- Неоморфные утилиты ---------- */
.soft{
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow:
    10px 12px 24px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light);
}

.adres {
    padding-left: 10px;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.35;
    opacity: .75;
}
.soft-inset{
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);
}
.soft-border{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* ---------- Хедер ---------- */
.site-header{
  padding: 14px 0 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.header-top{
  margin:auto; width:950px; max-width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 20px;
}
.header-top .logo img{ height:70px; }

/* ---------- Меню (кнопки-«таблетки») ---------- */
.main-nav{ padding: 8px 0 14px; }
.nav-list{
  list-style:none; margin:0; padding:10px;
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
}
.nav-button{
  display:flex; align-items:center; gap:8px;
  padding:10px 18px;
  color:var(--text);
  text-decoration:none;
  border-radius: 999px;
  background: var(--card);
  border:1px solid var(--border);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease;
  box-shadow:
    8px 8px 18px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light),
    inset 0 0 0 rgba(0,0,0,0);
}
.nav-button:hover{
  transform: translateY(-1px);
  box-shadow:
    10px 12px 22px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light),
    inset 0 0 0 rgba(0,0,0,0);
}
.nav-button.active{
  color:#fff;
  border:none;
  background: linear-gradient(to top, var(--primary-deep) 0%, var(--primary) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow:
    6px 8px 16px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
}
.nav-button.telegram{
  color:#fff; border:none;
  background: linear-gradient(180deg, #1a9fe0 0%, #0f79b1 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---------- Телеграм-блок ---------- */
.telegram-block{
  max-width:920px; margin: 24px auto 44px;
  padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--text); text-decoration:none; cursor:pointer;
  border-radius: var(--r-lg);
  border:1px solid var(--border);
  background: var(--card);
  box-shadow:
    10px 12px 24px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light);
  transition: transform .18s ease, box-shadow .18s ease;
}
.telegram-block:hover{
  transform: translateY(-1px);
  box-shadow:
    12px 14px 26px var(--shadow-dark),
    -10px -10px 20px var(--shadow-light);
}
.telegram-block p{ font-size:17px; font-weight:600; margin:0; padding-right:16px; }
.telegram-link img, .telegram-block img{ width:40px; height:40px; }

/* ---------- Рекламные блоки ---------- */
.offer-card.ads-block{ display:block; padding:10px 0; max-width:960px; width:100%; margin:0 auto 20px; }
.ads-block{ max-height:400px; max-width:960px; margin:0 auto; }
@media (max-width:600px){
  .offer-card.ads-block{ padding:8px 10px; max-width:100%; height:auto; }
  .header-top{display:grid;}
}

/* ---------- Контент/оффера ---------- */
.offers{ padding:5px; max-width:960px; margin:0 auto; }
.offers-grid{
  margin:0 auto; max-width:1100px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:18px; padding:12px;
}

/* Карточка оффера — «мягкая» */
.offer-card{
  position: relative;             /* нужно для закрепления логотипа */
  width:100%; min-height:254px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding:16px;
  color:var(--text);
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow:
    12px 14px 28px var(--shadow-dark),
    -10px -10px 22px var(--shadow-light);
  border: 2px solid var(--border);
}
.offer-card:hover{ transform: translateY(-2px); }

/* Варианты карточек */
.offer-card.highlighted{
    border: 3px solid #ff9800;
    position: relative;
    background: var(--card);
    box-shadow: 0 12px 30px rgb(202 145 4 / 51%), 12px 14px 28px var(--shadow-dark), -10px -10px 22px var(--shadow-light);
}
.offer-card.bordered{
    border: 3px solid green;
  position:relative;
  background: var(--card);
  box-shadow: 0 12px 30px rgb(4 202 14 / 51%), 12px 14px 28px var(--shadow-dark), -10px -10px 22px var(--shadow-light);
}
.offer-card.bordered::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: calc(var(--r-xl) + 2px);
  
  z-index:-1;
}

/* Заголовок + место под лого справа */
.name{
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 140px;            /* резерв под логотип */
  text-align:left;
  color: var(--text);
  font-size: 16px; font-weight: 700; letter-spacing: .2px;
  text-decoration:none;
  transition: color .18s ease, text-decoration-color .18s ease;
  text-shadow: 1px 1px 0 rgba(255,255,255,.25), -1px -1px 0 rgba(0,0,0,.08);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}

/* Логотип в правом верхнем углу */
.offer-logo{
    padding: 5px;
    border-radius: 5px;
    background: #ffffff;
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.offerlogo{ margin:0; max-width:120px; max-height:42px; object-fit:contain; }

/* Бейдж «первый займ/акция» */
.darmowa{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; 
  margin: 5px 5px 5px 0px;
  border-radius:999px; font-weight:800;
  color: color-mix(in oklab, var(--primary) 85%, #0a7a2a);
  background: var(--card);
  border:1px dashed var(--border);
}

/* Инфо-пары с «вдавленным» текстом */
.offer-info{ display:grid; gap:6px; margin:6px 0 10px; }
.info-block{
  display:grid; grid-template-columns: 1fr auto; align-items:center; font-size:14px;
}
.info-block .label{
  color: var(--muted);
  font-weight:600; text-align:left;
  text-shadow: 1px 1px 0 rgba(255,255,255,.25), -1px -1px 0 rgba(0,0,0,.08);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}
.info-block .value{
  font-size:16px; font-weight:700; text-align:right; color: var(--text);
  -webkit-background-clip:text; background-clip:text;
  text-shadow: 1px 1px 0 rgba(255,255,255,.25), -1px -1px 0 rgba(0,0,0,.08);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}

/* ---------- Кнопки (общая база) ---------- */
.btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:46px; cursor:pointer; outline:0;
  border-radius:30px; font-size:14px; font-weight:700;
  user-select:none; text-decoration:none;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease, color var(--dur) ease;
}

/* Secondary (light) */
.btn.btn-secondary{
    width: 40%;
  color:#606060;
  background-image: linear-gradient(to top, var(--silver-2) 0%, var(--silver-1) 80%, var(--silver-0) 100%);
  border:1px solid var(--silver-3);
  text-shadow: 0 1px #fff;
  box-shadow:
    0 4px 3px 1px #FCFCFC,
    0 6px 8px var(--silver-2),
    0 -4px 4px #CECFD1,
    0 -6px 4px var(--silver-0);
}
.btn.btn-secondary:hover{ transform: translateY(-1px); }
.btn.btn-secondary:active, .btn.btn-secondary:focus{
  transform: translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.3),
    inset 0 0 24px rgba(0,0,0,.18);
}

/* Secondary (dark) — выпуклая/вдавленная */
html.dark .btn.btn-secondary{
  color:#e1e6ec;
  background-image: linear-gradient(to top, #2b3139 0%, #343a43 78%, #3a414b 100%);
  border:1px solid #46505b;
  text-shadow: 0 1px rgba(0,0,0,.55);
  box-shadow:
    0 10px 16px rgba(0,0,0,.45),     /* выпуклая */
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -2px 8px rgba(0,0,0,.35) inset;
}
html.dark .btn.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 22px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -2px 10px rgba(0,0,0,.36) inset;
}
html.dark .btn.btn-secondary:active{
  transform: translateY(0);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.65),  /* вдавлено */
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 2px 6px rgba(0,0,0,.4);
}

/* Primary (light) */
.btn-primary{
    width: 60%;
  color:#fff;
  border:1px solid var(--primary-deep);
  background: linear-gradient(to top, var(--primary-deep) 0%, var(--primary) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow:
    0 4px 3px 1px #FCFCFC,
    0 6px 8px var(--silver-2),
    0 -4px 4px #CECFD1,
    0 -6px 4px var(--silver-0);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:active{
  transform: translateY(0);
  background: linear-gradient(to top, color-mix(in oklab, var(--primary-deep) 92%, black) 0%, var(--primary) 90%);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.35),
    inset 0 0 30px rgba(0,0,0,.18);
}

/* Primary (dark) — выпуклая/вдавленная */
html.dark .btn-primary{
  border:1px solid var(--primary-deep);
  background: linear-gradient(to top, var(--primary-deep) 0%, var(--primary) 100%);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:
    0 10px 18px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -3px 10px rgba(0,0,0,.35) inset;
}
html.dark .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 24px rgba(0,0,0,.50),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -3px 12px rgba(0,0,0,.38) inset;
}
html.dark .btn-primary:active{
  transform: translateY(0);
  background: linear-gradient(to top, color-mix(in oklab, var(--primary-deep) 92%, #000) 0%, var(--primary) 90%);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.65),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 2px 6px rgba(0,0,0,.4);
}

/* Группа кнопок на карточке */
.offer-actions{ display:flex; grid-template-columns:1fr; gap:10px; margin-top:6px; }

/* ---------- Детали (аккордеон) ---------- */
.offer-details{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, opacity .35s ease, padding .35s ease;
  font-size:13px; color:var(--text); text-align:left; margin-top:10px; padding-top:0;
  border-top:1px solid transparent;
}
.offer-details.visible{
  opacity:1; max-height:800px; padding-top:10px; border-top:1px solid var(--border);
}

/* ---------- Инфо-секция/лист/префутер ---------- */
.info-section{ color:var(--text); }
.info-section .container{ max-width:960px; margin:0 auto; padding:0 16px; }
.info-section h2{ font-size:28px; margin-bottom:20px; color:var(--primary); }
.info-section h3{ font-size:22px; margin-top:30px; margin-bottom:10px; color: color-mix(in oklab, var(--primary) 80%, #0a5); }
.info-section p{ margin-bottom:15px; }

.prefooter,
.list{
  max-width:920px; margin:0 auto 20px; padding:20px;
  background: var(--card);
  border-radius: var(--r-lg);
  border:1px solid var(--border);
  box-shadow:
    10px 12px 24px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light);
  font-size:14px;
}

/* ---------- Таблицы ---------- */
table{ width:100%; border-collapse:collapse; margin:25px 0; font-size:16px; }
th,td{ padding:10px 8px; border-bottom:1px solid var(--border); }
th{
  background: var(--card);
  box-shadow: inset 0 -4px 8px var(--shadow-light);
}
tr:hover{ background: color-mix(in oklab, var(--card) 80%, var(--bg)); }

/* ---------- Footer ---------- */
.site-footer{
  background: linear-gradient(180deg, #b94a4a 0%, #b63535 100%);
  color:#fff; text-align:center; padding:20px 10px; font-size:14px;
  box-shadow: 0 -8px 18px var(--shadow-dark), inset 0 1px 0 rgba(255,255,255,.12);
}
.site-footer .disclaimer{ margin-top:10px; font-size:13px; opacity:.85; }
.footer-menu{ color:#8df9ff; text-decoration:none; text-shadow:1px 1px 2px rgba(0,0,0,.6); }
.footer-menu:hover{ color:#ffe88d; text-shadow:1px 1px 2px #959595; }

/* ---------- Адаптив карточек ---------- */
@media (max-width: 768px){
  .offer-card{ font-size:14px; margin:5px; margin-top:10px; }
  .name{ padding-right: 110px; }
  .offerlogo{  margin: 7px;max-width:96px; max-height:36px; }
  .offer-info,.offer-actions{ margin:5px 0; }
  .offers{ padding:0; }
}

/* ---------- Кнопка «вверх» ---------- */
#scrollTopBtn{
  position:fixed; bottom:30px; right:30px; z-index:999; width:50px; height:50px;
  color:#fff; font-size:24px; border:none; border-radius:50%; cursor:pointer;
  background: linear-gradient(135deg, #00c3ff, #7700ff);
  box-shadow: 0 0 15px rgba(119,0,255,.6);
  opacity:0; visibility:hidden; transition: all .4s ease;
}
#scrollTopBtn.show{ opacity:1; visibility:visible; }
#scrollTopBtn:hover{ transform: scale(1.12) rotate(8deg); }

/* ---------- Мелочи ---------- */
.clickable{ color:#3b52e0; text-decoration:underline; }
.td1{
  text-decoration:underline; color:#3b52e0;
  transition: color .3s ease, border-color .3s ease;
  text-shadow: 1px 1px 2px rgba(0,0,0,.18);
  border-bottom: 1px solid var(--border);
}