/* DobryPsycholog.pl — custom CSS na Bootstrap 5 */
/* Kolory i elementy z oryginału, Bootstrap robi layout */

:root {
  --green: #408c29;
  --green-dark: #336e21;
  --text: #242424;
  --gray: #515151;
  --border: #DEDEDE;
}

body {
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: #f9f9f9;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }

/* ---- Header ---- */
#header {
  padding: 10px 0 0;
}
#header h1 { font-family: 'Days One', sans-serif; font-size: 28px; margin-bottom: 2px; }
#header h1 a { text-decoration: none; }
#header .dobry  { color: var(--gray); }
#header .coach  { color: var(--green); }
#header .pl     { color: var(--gray); font-size: 20px; }
#header p { color: #888; font-size: 11px; margin: 0; }

/* ---- Top menu ---- */
#menugorne {
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: bold;
}
#menugorne a { color: var(--text); text-decoration: none; }
#menugorne a:hover { color: var(--green); }

/* desktop: menu wyrównane do prawej, linki z odstępami */
@media (min-width: 768px) {
  #menugorne {
    text-align: right;
  }
  #menugorne a { margin-left: 14px; }
}

/* mobile: menu pod logo, linki zawijają się, odstępy między nimi */
@media (max-width: 767px) {
  #menugorne {
    padding-top: 4px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
    margin-top: 4px;
  }
  #menugorne a {
    display: inline-block;
    margin-right: 10px;
    margin-top: 4px;
  }
}

/* ---- Box (karta) ---- */
.box {
  background: linear-gradient(to bottom, #fff 50%, #f5f5f5 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 14px;
}
.box h2 {
  font-size: 17px;
  color: var(--gray);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

/* ---- Przyciski ---- */
.btn-green, .button {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 16px;
  font-size: 12px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
.btn-green:hover, .button:hover { background: var(--green-dark); color: #fff; text-decoration: none; }
.btn-outline-green {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 5px;
  padding: 4px 16px;
  font-size: 12px;
}

/* Nadpisanie Bootstrap btn-success */
.btn-success { background-color: var(--green) !important; border-color: var(--green) !important; }
.btn-success:hover { background-color: var(--green-dark) !important; border-color: var(--green-dark) !important; }

/* ---- Formularze ---- */
.form-control, .form-select {
  border-radius: 4px;
  border: 1px solid #b3b3b3;
  font-size: 12px;
  max-width: 280px;
  width: 100%;
}
/* Textarea i szerokie pola (opis, treść artykułu) */
.form-control.wide, textarea.form-control { max-width: 100%; }
/* Krótkie (cena, liczby) */
.form-control.short { max-width: 100px; }
/* Średnie (email, www, nick) */
.form-control.medium { max-width: 220px; }

.form-label { font-weight: bold; font-size: 12px; color: var(--gray); }

/* Input group z ograniczeniem (wyszukiwarka) */
.input-group { max-width: 380px; }
.input-group .form-control { max-width: 100%; }

/* ---- Logowanie sidebar ---- */
#logowanie-widget .form-control {
  margin-bottom: 8px;
  max-width: 100%;  /* wypełnia sidebar który sam jest wąski */
  font-size: 12px;
}

/* ---- Footer ---- */
#footer {
  background: linear-gradient(to bottom, #1C1C1C 0%, #414141 100%);
  margin-top: 30px;
  padding: 20px 0 30px;
  color: #ddd;
}
#footer h2 { color: #fff; font-size: 15px; margin-bottom: 12px; }
#footer a  { color: #DDC5C5; display: block; margin-bottom: 6px; font-size: 13px; }
#footer a:hover { color: #fff; }
#footer .col-border { border-right: 1px solid #775555; }

/* ---- Psycholog card (lista/wyniki) ---- */
.coach-card { border-bottom: 1px solid #eee; padding: 10px 0; display: flex; gap: 12px; }
.coach-card img { width: 70px; height: 90px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.coach-card .nazwa a { font-weight: bold; color: var(--text); }
.coach-card .nazwa a:hover { color: var(--green); }
.coach-card .opis { font-size: 11px; color: #555; margin: 4px 0; }
.coach-card .stopka { font-size: 11px; color: #888; }
.coach-card .stopka a { color: var(--green); }

/* Promowani */
.promocoach { float: left; margin: 5px; text-align: center; width: 140px; }
.promocoach img { width: 120px; height: 150px; object-fit: cover; border-radius: 4px; border: 2px solid var(--green); }
.promocoach .nazwa { font-weight: bold; font-size: 11px; }

/* ---- Forum ---- */
.forum-row td { padding: 7px 6px; border-bottom: 1px solid #eee; font-size: 12px; }
.forum-row:hover td { background: #f9f9f9; }
.mainpost { background: #f8fff6; border-left: 3px solid var(--green); padding: 12px; margin: 12px 0; border-radius: 0 4px 4px 0; }
.komentarz { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.komentarz .autor { font-size: 11px; color: #888; margin-top: 4px; }
.komentarz .data { color: #aaa; }

/* ---- Artykuły ---- */
.artykul-card { padding: 10px 0; border-bottom: 1px solid #eee; }
.artykul-card .tytul { font-weight: bold; font-size: 13px; }
.artykul-card .meta { font-size: 11px; color: #888; margin: 3px 0; }
.artykul-card .opis { font-size: 12px; color: #555; }

/* ---- Wyszukiwarka ---- */
#szukaj-prosty { display: flex; gap: 6px; align-items: center; margin: 10px 0; }
#szukaj-prosty input { flex: 1; }

/* ---- Sukces / Błąd ---- */
.sukces { background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; color: #155724; }
.error  { background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; color: #721c24; }

/* ---- Misc ---- */
.wiecej { display: block; text-align: right; font-size: 11px; color: var(--green); }
.data   { font-size: 11px; color: #aaa; }
.note   { font-size: 11px; color: #888; }

/* ---- Opinie ---- */
.opinia { padding: 10px 0; border-bottom: 1px solid #eee; }
.opinia .ocena { font-weight: bold; font-size: 13px; margin-bottom: 4px; }
.opinia .nick  { font-size: 11px; color: #888; }
.opinia .komentarz { background: #f5f5f5; border-radius: 4px; padding: 8px; margin-top: 6px; font-style: italic; }

/* ---- Sidebar log (updatelog, komentarze) ---- */
.log { padding: 5px 0; border-bottom: 1px solid #f0f0f0; font-size: 11px; }
.log .data { color: #aaa; display: block; }

/* ---- Paginacja ---- */
.pagination { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.pagination a, .pagination span { padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; color: var(--text); }
.pagination a:hover { background: var(--green); color: #fff; border-color: var(--green); text-decoration: none; }
.pagination .active { background: var(--green); color: #fff; border-color: var(--green); }
.pagination .disabled { color: #aaa; }

/* ---- Panel ---- */
#linki a { display: inline-block; margin-right: 12px; margin-bottom: 8px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
#linki a:hover { background: var(--green); color: #fff; text-decoration: none; }

/* ---- Tabela ---- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela td, .tabela th { padding: 5px 8px; border-bottom: 1px solid #eee; font-size: 12px; }
.tabela th { background: #f5f5f5; font-weight: bold; color: var(--gray); }
.td.showname { font-weight: bold; color: var(--gray); width: 200px; padding-bottom: 4px; }

/* ---- Coach profil ---- */
#coach #lewypanel { float: left; width: 160px; text-align: center; margin-right: 16px; }
#coach #lewypanel img { max-width: 150px; border-radius: 4px; }
#coach #info { overflow: hidden; }
#coach .tytul { font-weight: bold; color: var(--gray); margin: 10px 0 3px; font-size: 13px; }
#coach .opis  { font-size: 12px; color: #444; margin-bottom: 6px; line-height: 1.5; }
#coach .odwiedziny { font-size: 11px; color: #888; margin: 6px 0; }