/* =========================================
   TOPBAR — Десктоп: один ряд; Телефон: бренд зверху + 3×2 сітка
   ========================================= */

/* Контейнер */
.container{ max-width:1200px; margin:0 auto; padding:12px 20px; }

/* ---------- БАЗОВІ КНОПКИ ---------- */
.btn, button.apply, #load-more{
  --btn-h:44px; --btn-pad:10px 14px; --btn-font:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--btn-h); padding:var(--btn-pad);
  font-weight:600; font-size:var(--btn-font);
  border-radius:10px; border:1px solid var(--border);
  background:var(--input); color:var(--text);
  cursor:pointer; user-select:none;
  transition:transform .05s, box-shadow .2s, background .2s, border-color .2s;
  box-shadow:var(--shadow-1);
}
.btn:hover, button.apply:hover, #load-more:hover{
  transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:var(--brand);
}
.btn.primary{ background:var(--brand); color:#2b2b2b; border-color:transparent; }
.btn.ghost{ background:transparent; border:1px dashed var(--border); }

/* Іконкові (за замовчуванням квадратні) */
.btn.icon{ width:44px; height:44px; padding:0; text-align:center; }

/* Спеціальні текстові */
.btn.website{ min-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn.feedback{
  background:var(--brand); color:#2b2b2b; border-color:transparent; font-weight:700;
  padding:10px 14px; min-width:110px;
}
.btn.feedback:hover{ box-shadow:var(--shadow-2); transform:translateY(-1px); }

/* ---------- TOPBAR LAYOUT (ДЕСКТОП) ---------- */
.topbar{ position:relative; }
.bar{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
}

/* Брендинг */
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.logo{
  width:36px; aspect-ratio:1/1; /* завжди квадрат */ border-radius:10px;
  background:var(--brand) center/cover no-repeat;
  background-image:url("https://res.cloudinary.com/dwwbdwlkb/image/upload/v1755424367/Bboost_GRANTS_T%D0%93_2_s7tilv.png");
  box-shadow:var(--shadow-1);
}

/* Заголовок */
.brand-title{ margin:0; line-height:1.15; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.brand-title .title-main{ font-size:20px; font-weight:800; color:var(--brand); }
.brand-title .title-sub{ font-size:16px; color:var(--text); opacity:.9; }

/* Правий блок дій — один ряд */
.top-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap; }
.top-actions .row{ display:contents; }

/* Telegram іконка (інверсія у темній темі) */
.top-actions .btn.icon.telegram img.telegram-icon{ width:24px; height:24px; transition:filter .3s; }
[data-theme="dark"]  .top-actions .btn.icon.telegram img.telegram-icon{ filter:invert(1); }
[data-theme="light"] .top-actions .btn.icon.telegram img.telegram-icon{ filter:invert(0); }

/* Перемикач теми — квадрат */
#themeToggle{
  width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; position:relative; overflow:hidden;
}

/* -----------------------------------
   МОБІЛЬНИЙ (≤768px): Бренд зверху, під ним 3×2 сітка
   ----------------------------------- */
@media (max-width:768px){

  /* 0) Шапка бренду має бути над усім і на всю ширину */
  .bar{
    display:flex;            /* змінюємо грід на флекс-контейнер */
    flex-direction:column;   /* бренд зверху, дії нижче */
    align-items:stretch;
    gap:12px;
  }
  .brand{ width:100%; }
  .brand-title{ display:block; }
  .brand-title .title-main{ display:block; font-size:18px; margin-bottom:4px; }
  .brand-title .title-sub{ display:block; font-size:14px; }

  /* 1) Єдина сітка 3×2 для всіх кнопок */
  .top-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows:48px;        /* однакова висота рядків */
    gap:10px;
    justify-items:stretch;
    align-items:stretch;
  }

  /* «Розплющуємо» внутрішні .row (щоб усі кнопки стали прямими дітьми гріда) */
  .top-actions > *{ display:contents; }

  /* Усі кнопки/посилання заповнюють свою комірку */
  .top-actions a, .top-actions button{
    width:100%; height:100%;
  }

  /* 2) ПРАВИЛЬНИЙ ПОРЯДОК:
        1-й ряд: [тема][лише обране][скинути]
        2-й ряд: [telegram][сайт][відгук] */
  #themeToggle{ order:1; }
  #favOnly{ order:2; }
  #resetFilters{ order:3; }
  .top-actions .btn.icon.telegram, .top-actions a .btn.icon.telegram{ order:4; }
  .top-actions .btn.website,      .top-actions a .btn.website{ order:5; }
  .top-actions .btn.feedback,     .top-actions a .btn.feedback{ order:6; }

  /* 3) ЄДИНІ РОЗМІРИ: іконкові НЕ маленькі квадрати,
        а повнорозмірні кнопки з центровою іконкою */
  .btn, button.apply, #load-more{ --btn-h:48px; --btn-font:14px; }
  .top-actions .btn.icon, #themeToggle{
    width:100%; height:100%;       /* кнопка займає всю комірку */
    padding:0 10px;
  }
  .top-actions .btn.icon > img,
  #themeToggle > img,              /* якщо всередині буде <img> */
  .top-actions .btn.icon > svg{    /* або SVG-іконка */
    width:24px; height:24px; margin:auto;
  }

  /* Текстові — стандартно по центру */
  .btn.website, .btn.feedback{
    min-width:auto; height:100%;
    display:flex; align-items:center; justify-content:center;
    padding:10px; white-space:normal;
  }
}

/* Дуже вузькі телефони */
@media (max-width:480px){
  .top-actions{ grid-auto-rows:44px; gap:8px; }
  .btn, button.apply, #load-more{ --btn-h:44px; --btn-font:13px; }
  .top-actions .btn.icon > img, .top-actions .btn.icon > svg{ width:22px; height:22px; }
}

/* Десктоп: захист від зламу ряду */
@media (min-width:769px){
  .brand{ min-width:0; }
  .brand-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ----------------- ПОШУК (з темами) ----------------- */
.search-section .search-field{
  display:block; width:100%;
  padding:12px 16px; font-size:16px;
  border-radius:12px; border:2px solid var(--brand);
  background:var(--input); color:var(--text);
  transition:border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.search-section .search-field::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent); opacity:1;
}
[data-theme="dark"] .search-section .search-field{
  background: color-mix(in srgb, var(--input) 85%, #000 15%);
  border-color: color-mix(in srgb, var(--brand) 80%, #000 20%);
}
[data-theme="light"] .search-section .search-field{
  background: color-mix(in srgb, var(--input) 90%, #fff 10%);
}
.search-section .search-field:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(250,188,68,.35); outline:none;
}

/* Кнопки-фільтри — рівномірно по всій ширині */
.search-section .filter-buttons{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px; width:100%; margin:6px 0 10px;
}
.search-section .filter-buttons .btn{
  width:100%; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px; font-size:14.5px;
}
@media (max-width:700px){ .search-section .filter-buttons{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .search-section .filter-buttons{ grid-template-columns:1fr; } }

.search-section .filter-buttons .btn input[type="radio"],
.search-section #includeNoDeadline{ display:none; }
.search-section .filter-buttons .btn span{
  display:inline-block; padding:8px 12px; border-radius:8px; background:transparent; border:none; color:var(--text);
  font-weight:600; text-align:center; cursor:pointer; transition:background-color .2s, box-shadow .2s, transform .1s;
}
.search-section .filter-buttons input[type="radio"]:checked + span,
.search-section #includeNoDeadline:checked + span{
  background:var(--brand); color:#fff; box-shadow:0 0 8px rgba(250,188,68,.5);
}
.search-section .filter-buttons .btn span:hover{
  background:rgba(250,188,68,.15); box-shadow:0 4px 12px rgba(0,0,0,.12); transform:scale(1.03);
}
.search-section .filter-buttons input[type="radio"]:focus + span,
.search-section #includeNoDeadline:focus + span{
  outline:2px solid var(--brand); outline-offset:4px; box-shadow:0 0 10px rgba(250,188,68,.7);
}

/* Прибираємо підкреслення у всіх посилань із кнопками */
.top-actions a {
  text-decoration: none;
}
.top-actions a:visited,
.top-actions a:hover,
.top-actions a:focus {
  text-decoration: none;
}