/**
 * styles.css — Kredit-UA (упорядоченная версия, компактные карточки)
 * Меняем только стили. Верстку/ПХП не трогаем.
 */

/* =============================
   0) Переменные и базовые стили
   ============================= */
:root{
  --bg: #f6f8fc;
  --ink: #0b1220;
  --muted: #616b7a;
  --brand: #6a5af9;
  --brand-2:#22c55e;
  --accent:#06b6d4;
  --card:#ffffff;
  --line: rgba(2,6,23,.10);
  --line-soft: rgba(2,6,23,.06);
  --shadow: 0 10px 28px rgba(2,6,23,.08);
  --radius: 16px;
}

*{ box-sizing: border-box; }
html,body{ background: var(--bg); color: var(--ink); }
body{
  font-family: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin:0; padding:0; line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:#2563eb; text-decoration:none; font-size:14px; }
a:hover{ text-decoration:underline; }

h1{
  font-size: clamp(24px, 4.5vw, 32px);
  text-align:center; margin:16px 8px; color:#222;
}
h2,h3{ color:#222; margin:10px 0; }

/* Служебные метки/номера */
.number{
  position:absolute; top:0; left:0; margin-top:-10px; margin-left:-10px;
  background:#25a9ee; color:#fff; font-size:14px; font-weight:800;
  padding:2px 6px; border-radius:0 0 6px 0;
}

/* =============================
   1) Хедер и навигация
   ============================= */
.site-header{
   top:0; z-index:1000;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
}
.header-top{
  margin: 0 auto; width: min(1200px, 100%);
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding: 12px 16px;
}
.header-top .logo img{ width:170px; height:auto; }
.offerlogo{ padding:10px; width:180px; } /* совместимость старого класса */

.main-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.nav-list{
  list-style:none; display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px; padding:10px; margin:0;
}
.nav-button{
  display:flex; align-items:center; gap:6px;
  background:#fff; padding:10px 16px;
  border:1px solid var(--line);
  border-radius: 10px;
  color:#333; font-weight:700;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, filter .2s ease;
  box-shadow:0 2px 0 rgba(2,6,23,.06);
}
.nav-button:hover{ transform:translateY(-1px); box-shadow: var(--shadow); }
.nav-button.active{
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80);
  background-size: 600% 600%; animation: gradientShift 8s ease infinite;
  color:#fff; border-color: transparent; box-shadow: 0 10px 30px rgba(106,90,249,.35);
}
@keyframes gradientShift{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}
.nav-button.telegram{ background:#229ED9; color:#fff; border-color:#229ED9; }
.nav-button.telegram:hover{ filter:saturate(110%); }

/* =============================
   2) Баннер Telegram и служебные блоки
   ============================= */
.telegram-link img{ width:36px; height:36px; }
.telegram-block{
  display:flex; align-items:center; justify-content:space-between;
  background:#f5f7fa; border:1px solid #d1d9e6; border-radius:12px;
  padding:12px 16px; max-width:1100px; margin:24px auto;
  box-shadow:0 6px 18px rgba(2,6,23,.06); color:#1a1a1a;
}
.telegram-block p{ margin:0; font-weight:700; }
.offerlinks{ display:grid; margin-top:10px; }
.offer-link{ padding:5px; color:#0095ff; font-size:14px; }
.prefooter,.list{
  font-size:.95rem; color:#25252d;
  padding:20px; width:min(1100px,100%); margin:0 auto 20px;
  background:#fff; border-radius:12px; box-shadow: var(--shadow);
}

/* =============================
   3) Офферы — сетка и карточки
   ============================= */
/* Секция */
.offers{ padding: 16px; max-width: 1200px; margin: 0 auto; }

/* Сетка */
.offers-grid {
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 10px;
}

.offer-card {
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.offer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.offer-name {
    width: 60%;
  font-weight: 700;
  font-size: 16px;
  color: #111827;
}

.offer-logo img {
  max-height: 65px;
  max-width: 120px;
  object-fit: contain;
}

.offer-badge {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #10b981;
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
}

.offer-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #374151;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.info-row span:last-child {
  font-weight: 600;
  color: #111827;
}

/* Кнопки */
.offer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.offer-btn {
  flex: 1;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 0 #1e40af, 0 6px 14px rgba(37,99,235,0.3);
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}

.offer-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 2px 0 #1e40af inset, 0 8px 20px rgba(37,99,235,0.4);
  transform: translateY(-1px);
      text-decoration: none;
}

.details-btn {
  flex-shrink: 0;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.details-btn:hover {
  background: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bordered {
    
    border: 2px solid #00ff4e;
    box-shadow: 0px 2px 10px rgb(5 96 10 / 55%);
}

.highlighted             {
    background: linear-gradient(90deg, #d891ff78, #eae0ff36);
    border: 2px solid #cc8dff;
    box-shadow: 2px 2px 10px rgb(68 26 127 / 50%);
}

/* Деталі */
.details-content {
  display: none;
  font-size: 13px;
  color: #4b5563;
  border-top: 1px dashed #d1d5db;
  margin-top: 10px;
  padding-top: 10px;
}


/* =============================
   4) Таблицы / списки (на других страницах)
   ============================= */
table{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow: var(--shadow); }
th,td{ border:1px solid var(--line-soft); padding:10px; vertical-align:top; text-align:left; }
.td1{ text-decoration:underline; color:#3b52e0; border-bottom:1px solid #ddd; text-shadow:1px 1px 2px #00000030; }
.td2,.td3{ text-align:center; border-bottom:1px solid #ddd; text-shadow:1px 1px 2px #00000030; }
.td3{ font-size:14px; }

/* =============================
   5) Реклама и разное
   ============================= */
.ads-block{ width:min(1100px,100%); margin:0 auto; }
.offer-card.ads-block{
  display:block; padding:10px 0; max-width:1100px; width:100%; margin:0 auto 20px; box-sizing:border-box;
}
.offer-card.ads-block > .ads-block{ border-radius:12px; overflow:hidden; }

/* Кнопка «Сохранить на главный экран» */
.nav-button-s{
  font-size:16px !important; display:flex; align-items:center; gap:6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80) !important;
  background-size:600% 600%; animation: gradientShift 8s ease infinite;
  color:#fff !important; padding:12px; border:1px solid; border-radius:8px; font-weight:600; text-decoration:none;
}
.nav-button-s:hover{ cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.08); }

/* Scroll-to-top */
#scrollTopBtn{
  display:none; position:fixed; bottom:30px; right:30px; z-index:999;
  width:40px; height:40px; border-radius:50%;
  border:none; background:linear-gradient(135deg, #00c3ff, #7700ff); color:#fff; font-size:20px;
  box-shadow:0 0 15px rgba(119,0,255,.6);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
#scrollTopBtn:hover{
  transform: scale(1.15) rotate(10deg);
  background: linear-gradient(135deg, #7700ff, #00c3ff);
  box-shadow: 0 0 20px rgba(0,255,255,.8), 0 0 30px rgba(119,0,255,.8);
}

/* =============================
   6) Футер
   ============================= */
.site-footer{
  background: linear-gradient(180deg, rgba(124,58,237,.06), transparent), #00c1a9;
  color:#fff; text-align:center; padding:20px 10px; font-size:14px;
}
.site-footer .disclaimer{ margin-top:10px; font-size:13px; opacity:.9; }

/* =============================
   7) Тёмная тема (совместимо с твоими классами)
   ============================= */
body.dark-mode{ background:#0b1220; color:#e5e7eb; }
body.dark-mode a{ color:#93c5fd; }
.dark-mode .main-nav{ background:rgba(15,23,42,.65); color:#f1f1f1; border-color:rgba(148,163,184,.15); }
.dark-mode .site-footer{ background-color:#133f52; }
.dark-mode .list, .dark-mode table{ background:#0f172a; color:#e5e7eb; }
.dark-mode td, .dark-mode th{ border-color:#4c4a94; }
.dark-mode .telegram-block{ background:#0f172a; color:#e5e7eb; border-color:rgba(148,163,184,.15); }
.dark-mode h1{ color:#d1d5df; }
.dark-mode .nav-button{ background:#0f172a; color:#e5e7eb; border-color:rgba(148,163,184,.15); }
.dark-mode .prefooter{ background:#0f172a; color:#e5e7eb; }
.dark-mode .site-header{ background:rgba(15,23,42,.75); color:#e5e7eb; }
body.dark-mode .details-content{ color:#cbd5e1; }
body.dark-mode .offer-card{ background:#0f172a; border-color:rgba(148,163,184,.15); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
body.dark-mode .offer-image-wrapper{ background:#0b1220; border-color:rgba(148,163,184,.15); }

/* =============================
   8) Адаптив
   ============================= */
@media (max-width: 768px){
  .header-top{ width:100%; padding:10px 14px; }
  .main-nav .nav-list{ gap:8px; }
  .telegram-block{ flex-direction:column; text-align:center; gap:10px; }
}
@media (max-width: 480px){
  img{ margin:2px; width:auto; height:auto; }
  .telegram-block{ max-width:92%; }
}

/* === Сохранены оригинальные помощники === */
.details-content{ font-size:12px; background:#f9f9f9; padding:5px; border-top:1px solid #ccc; }
.details-btn{
  display:block; width:30%; background-color:#a4a9af; color:#fff;
  border:none; padding: 14px 14px;; cursor:pointer; font-size:14px; border-radius:4px; text-align:center;
}
.details-btn:hover{ background-color:#8b99aa; }


/* From Uiverse.io by Bodyhc */ 
.synthwave-laser-button {
    text-decoration: none;
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  background: green; /* Base color */
  border: none;
  cursor: pointer;
  letter-spacing: 2px;
  text-shadow:
    0 0 2px #00ffe0,
    0 0 10px #00ffe0,
    0 0 15px #00ffe0;
  box-shadow:
    inset 0 0 10px #00ffe0,
    0 0 10px rgba(0, 255, 224, 0.5);
  overflow: hidden;
  border-radius: 10px;
  z-index: 1;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.synthwave-laser-button::before,
.synthwave-laser-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(90deg, transparent, rgb(255 211 0 / 60%), transparent);
  z-index: -1;
  filter: blur(5px);
  transform: translateX(-100%);
  animation: laser-glow 2.5s infinite linear;
}

.synthwave-laser-button::after {
  animation-delay: 1.25s;
  background: linear-gradient(90deg, transparent, rgb(255 211 0 / 60%), transparent);
}

@keyframes laser-glow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.synthwave-laser-button:hover {
  transform: translateY(-5px);
      text-decoration: none;
}

.synthwave-laser-button:active {
  transform: scale(0.95);
  box-shadow:
    inset 0 0 10px #00ffe0,
    0 0 15px rgba(255, 0, 144, 0.7);
}