/* Forum CSS - Style dla modułu forum */

/* Clearfix */
.forum-clearfix {
	clear: both;
}

/* Display utilities */
.forum-hidden {
	display: none;
}

/* Position utilities */
.forum-absolute-top-right {
	position: absolute;
	top: 25px;
	right: 25px;
}

/* Margin utilities */
.forum-margin-top-15 {
	margin-top: 15px;
}

/* Specific forum styles */
.col-nowywatek.forum-hidden {
	display: none;
}

.box-form-submit-acc.forum-margin-top-15 {
	margin-top: 15px;
}

.box-for-rep-rep .forum-absolute-top-right {
	position: absolute;
	top: 25px;
	right: 25px;
}

.odpo.forum-hidden {
	display: none;
}

/* Forum Main */
div.box-for-main {
  position: relative;
  margin-top: 40px;
}

div.box-for {
  position: relative;
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

/* Forum Title */
div.box-for-title {
  position: relative;
}

table.tab-for td,
table.tab-for th {
  padding: 0;
  vertical-align: top;
  border-top: 0;
}

td.td-for {
  width: 55px;
}

figure.fig-for {
  position: relative;
}

img.img-for {
  max-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

p.p-for-author {
  margin: 0 0 5px 0;
  padding-right: 30px;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: #000;
}

p.p-for-data {
  margin: 0;
  padding-right: 30px;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.05em;
  color: #808080;
}

/* Forum Content */
div.box-for-content {
  position: relative;
  margin-top: 20px;
}

h3.h3-for {
  display: inline-block;
  margin: 0 0 10px 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.05em;
  color: #000;
}

a.a-for-href,
a.a-for-href:active,
a.a-for-href:visited {
  display: inline-block;
  margin: 0 0 10px 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.05em;
  color: #000;
  transition: color .3s ease-in-out;
}

a.a-for-href:hover,
a.a-for-href:focus,
a.a-for-href:focus-within {
  text-decoration: none;
  color: var(--purple);
}

div.box-for-body p {
  margin: 0 0 5px 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #000;
}

/* Forum Footer */
div.box-for-f {
  position: relative;
  margin-top: 20px;
}

div.box-for-col-a,
div.box-for-col-b {
  position: relative;
  float: left;
  width: 50%;
}

div.box-for-col-b {
  text-align: right;
}

ul.ul-for-tag,
ul.ul-for-tag-b {
  margin: 0;
  padding: 0;
}

ul.ul-for-tag li,
ul.ul-for-tag-b li {
  display: inline-block;
  margin: 0 0 5px 5px;
}

a.a-for,
a.a-for:active,
a.a-for:visited {
  display: inline-block;
  padding: 6px;
  background: #EAEAEA;
  border-radius: 5px;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.05em;
  color: #808080;
  transition: opacity .3s ease-in-out;
}

a.a-for:hover,
a.a-for:focus,
a.a-for:focus-within {
  text-decoration: none;
  opacity: .5;
}

p.p-for-list {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.03em;
  color: #808080;
}

svg.svg-for {
  margin-right: 3px;
  max-width: 15px;
  width: 15px;
}

/* Forum Settings */
div.box-for-settings {
  position: absolute;
  right: 0;
  top: 0;
}

div.box-for-settings:hover,
div.box-for-settings:focus,
div.box-for-settings:focus-within {
  cursor: pointer;
}

svg.svg-for-set path {
  transition: stroke .3s ease-in-out;
}

div.box-for-settings:hover svg.svg-for-set path,
div.box-for-settings:focus svg.svg-for-set path,
div.box-for-settings:focus-within svg.svg-for-set path {
  stroke: var(--purple);
}

div.box-for-set-active svg.svg-for-set path {
  stroke: var(--purple);
}

/* Forum Dropdown */
div.box-for-dropm {
  display: none;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 30px;
  padding: 8px;
  width: 150px;
  background-color: #fff;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  box-shadow: 2px 1px 5px rgb(0 0 0 / 15%);
  border-radius: 5px;
  
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

div.box-for-set-active div.box-for-dropm {
  opacity: 1;
  transform: translateY(0);
}

ul.ul-for-dropm {
  margin: 0;
  padding: 0;
}

ul.ul-for-dropm li {
  display: block;
  margin: 5px 0;
}

p.p-for-dropm {
  margin: 0;
  padding: 3px 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.03em;
  color: #808080;
  cursor: pointer;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

p.p-for-dropm:hover,
p.p-for-dropm:focus {
  color: var(--purple, #1A73E8);
  background-color: #f5f5f5;
}

p.p-for-dropm:active {
  color: var(--purple, #1A73E8);
  background-color: #e8e8e8;
}

/* Forum Nav */
div.box-for-main-zamkniete {
  display: none;
}
div.box-for-main-usuniete {
  display: none;
}

/* Forum Loading Spinner */
.forum-loading-spinner {
  text-align: center;
  padding: 40px 20px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.forum-loading-spinner svg {
  display: inline-block;
}
.forum-content-wrapper {
  display: block;
}

button.btn-for-nav {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 8px 20px;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  background-color: #EAEAEA;
  border-radius: 100px;
  color: #808080;
  transition: opacity .3s ease-in-out;
}

button.btn-for-nav:hover {
  text-decoration: none;
  color: #808080;
  opacity: .5;
}

button.btn-for-nav:focus,
button.btn-for-nav:focus-within {
  text-decoration: none;
  color: #808080;
}

button.btn-for-nav.btn-for-active {
  background-color: var(--purple);
  color: #fff;
}

/* Aktywny przycisk z klasą koloru - używa koloru z klasy zamiast domyślnego purple */
button.btn-for-nav.btn-for-active[class*="btn-color-blue"] {
  background-color: var(--blue) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-yellow"] {
  background-color: var(--yellow) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-green"] {
  background-color: var(--green) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-teal"] {
  background-color: var(--teal) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-orange"] {
  background-color: var(--orange) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-brown"] {
  background-color: var(--brown) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-light-blue"] {
  background-color: var(--light-blue) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-purple"] {
  background-color: var(--purple) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-red"] {
  background-color: var(--red) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-gray"] {
  background-color: var(--gray) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-akcent"] {
  background-color: var(--akcent) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-black"] {
  background-color: var(--black) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-dark-red"] {
  background-color: var(--dark-red) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-akcent2"] {
  background-color: var(--akcent2) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-akcent3"] {
  background-color: var(--akcent3) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-white"] {
  background-color: var(--white) !important;
  color: var(--black) !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-primary-dev"] {
  background-color: var(--primary-dev) !important;
  color: #fff !important;
}
button.btn-for-nav.btn-for-active[class*="btn-color-accent-dev"] {
  background-color: var(--accent-dev) !important;
  color: #fff !important;
}

svg.svg-for-nav {
  position: relative;
  margin-right: 5px;
  top: -1px;
}

svg.svg-for-nav path {
  transition: stroke .3s ease-in-out;
}

/* Forum Sidebar */
a.a-sd-for,
a.a-sd-for:active,
a.a-sd-for:visited {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 15px;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: var(--purple);
  border-radius: 5px;
  transition: background-color .3s ease-in-out;
}

a.a-sd-for:hover,
a.a-sd-for:focus,
a.a-sd-for:focus-within {
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

a.a-sd-for svg {
  margin-right: 5px;
}

div.sd-for-main {
  position: relative;
  padding: 25px;
  background: #fff;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

div.box-sd-for-content {
  position: relative;
  margin-bottom: 20px;
}

h3.h3-sd-for {
  position: relative;
  display: block;
  margin: 0 0 10px 0;
  padding: 0 0 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: #000;
  border-bottom: 1px solid #EAEAEA;
}

ul.ul-for-sd {
  margin: 0;
  padding: 0;
}

ul.ul-for-sd li {
  position: relative;
  display: block;
  margin: 5px 0;
}

a.a-for-sd,
a.a-for-sd:active,
a.a-for-sd:visited {
  position: relative;
  display: block;
  padding-left: 15px;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.03em;
  color: var(--purple);
  transition: color .3s ease-in-out;
}

a.a-for-sd::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--purple);
}

a.a-for-sd:hover,
a.a-for-sd:focus,
a.a-for-sd:focus-within {
  text-decoration: none;
  color: #000;
}

figure.fig-sd-for {
  position: relative;
  margin-right: 5px;
}

img.img-sd-for {
  max-width: 18px;
  width: 100%;
}

/* Forum Sidebar Dyskusja */
div.sd-for-main-dys {
  position: relative;
  text-align: center;
}

figure.fig-sd-for-dys {
  position: relative;
}

img.img-sd-for-dys {
  max-width: 100%;
  width: 150px;
  border-radius: 50%;
}

h3.h3-sd-for-dys {
  margin: 15px 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.05em;
  color: #000;
}

div.box-sd-for-dys {
  position: relative;
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
}

p.p-sd-for-dys {
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: var(--purple);
}

a.a-for-purple,
a.a-for-purple:active,
a.a-for-purple:visited {
  display: inline-block;
  padding: 6px 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: var(--purple);
  border-radius: 5px;
  transition: background-color .3s ease-in-out;
}

a.a-for-purple:hover,
a.a-for-purple:focus,
a.a-for-purple:focus-within {
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

a.a-for-purple svg {
  margin-right: 5px;
}

/* Forum Odpowiedź */
div.box-for-odp {
  position: relative;
  margin: 30px 0;
}

h3.h3-for-odp {
  display: block;
  text-align: center;
  margin: 20px 0px;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #808080;
}

button.btn-submit-purple {
  display: inline-block;
  padding: 6px 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: var(--purple);
  border-radius: 5px;
  transition: background-color .3s ease-in-out;
}

button.btn-submit-purple:hover,
button.btn-submit-purple:focus-within {
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

form.form-for {
  position: relative;
  padding: 25px;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  box-shadow: 2px 1px 5px rgb(0 0 0 / 15%);
  border-radius: 5px;
}

div.box-for-rep {
  border-left: 10px solid var(--purple);
}

div.box-for-rep-rep {
  border-left: 5px solid var(--purple);
}

div.box-for-rep div.box-for-f {
  border-top: 1px solid #EAEAEA;
  padding-top: 15px;
}

div.box-for-rep-rep div.box-for-body,
div.box-for-rep-rep div.box-for-body p {
  font-weight: bold;
}

p.p-for-rep-aut {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: #808080;
}

a.a-for-odp-rep,
a.a-for-odp-rep:active,
a.a-for-odp-rep:visited {
  display: inline-block;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: #9E32AF;
  transition: color .3s ease-in-out;
}

a.a-for-odp-rep:hover,
a.a-for-odp-rep:focus,
a.a-for-odp-rep:focus-within {
  text-decoration: none;
  color: #000;
}

svg.svg-for-rep {
  margin-right: 5px;
}

div.box-for-rep-col-a {
  position: relative;
  float: left;
  width: 30%;
}

div.box-for-rep-col-b {
  position: relative;
  float: left;
  width: 70%;
  text-align: right;
}

button.btn-like {
  display: inline-block;
  margin-right: 5px;
  border: none;
  background-color: transparent;
  font-weight: normal;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.02em;
  color: #808080;
}

figure.fig-like {
  will-change: transform;
  transition: transform .3s ease-in-out;
}

button.btn-like:hover figure.fig-like,
button.btn-like:focus figure.fig-like,
button.btn-like:focus-within figure.fig-like {
  transform: scale(1.1);
}

button.btn-like.active {
  opacity: 1;
}

button.btn-like.active figure.fig-like img.img-like {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
  opacity: 1;
}

button.btn-like.active span {
  font-weight: 700;
  color: #9E32AF;
}

button.btn-submit-close {
  display: inline-block;
  margin-right: 5px;
  padding: 6px 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #808080;
  background-color: #EAEAEA;
  border-radius: 5px;
  transition: background-color .3s ease-in-out;
}

button.btn-submit-close:hover,
button.btn-submit-close:focus-within {
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

/* Forum Pytanie */
div.box-for-pyt {
  position: relative;
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

div.box-for-pyt-header {
  position: relative;
  margin-bottom: 15px;
}

button.btn-for-close-x {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #fff;
  border: 2px solid #EAEAEA;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 5px 12px;
  color: #666;
  z-index: 10;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button.btn-for-close-x:hover {
  background: #f5f5f5;
  color: #333;
  border-color: #ccc;
  transform: scale(1.1);
}

button.btn-submit-for {
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  background-color: var(--purple);
  border: 2px solid var(--purple);
  -webkit-filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.15));
  padding: 10px 30px;
  border-radius: 50px;
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

button.btn-submit-for:hover,
button.btn-submit-for:focus-within {
  color: var(--purple);
  background-color: transparent;
  text-decoration: none;
}

div.form-group-for label.fileInp span {
  padding: 10px 30px;
  font-size: 14px;
  line-height: 18px;
  background: var(--purple);
  border: 1px solid var(--purple);
}

div.form-group-for {
  margin-top: 40px;
}

/* Media Queries */
@media only screen and (max-width: 980px) {
  div.col-for-a {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    order: 2;
    margin-top: 30px;
  }
  div.col-for-b {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
  }
}

@media only screen and (max-width: 768px) {
  div.box-for,
  div.sd-for-main {
    padding: 15px 10px;
  }
  div.box-sd-for-btn,
  div.box-for-nav {
    text-align: center;
  }
  div.box-for-main {
    margin-top: 15px;
  }
  div.box-for-col-a,
  div.box-for-col-b {
    float: none;
    width: 100%;
    text-align: left;
  }
  div.box-for-col-b {
    margin-top: 10px;
  }
  div.box-for-pyt {
    padding: 15px 10px;
  }
  div.form-group-for {
    margin: 15px 0 0 0;
    overflow: hidden;
  }
  button.btn-submit-for {
    width: 100%;
    padding: 10px 0;
  }
  form.form-for {
    padding: 15px 10px;
  }
  div.box-for-rep-col-a,
  div.box-for-rep-col-b {
    float: none;
    width: 100%;
    text-align: left;
  }
  div.box-for-rep-col-b {
    margin-top: 10px;
  }
}

/* Additional Forum Classes */
div.box-for-dys {
  position: relative;
}

div.box-for-odp-dys {
  position: relative;
}

div.box-for-rep-main {
  position: relative;
}

div.odp-grupa {
  position: relative;
}

div.odp-lvl2 {
  position: relative;
}

div.col-watki {
  position: relative;
}

div.box-for-submit {
  position: relative;
}

form.form-odpw {
  position: relative;
}

div.watki-sidebar {
  position: relative;
}

div.box-sd-for-btn {
  position: relative;
}

div.watek-najnowszy {
  position: relative;
  margin-top: 15px;
}

div.watek-najnowszy span {
  font-weight: 700;
  font-size: 12px;
  color: #808080;
}

div.watek-najnowszy p {
  margin: 5px 0 0 0;
  font-size: 13px;
  line-height: 16px;
}

div.watek-najnowszy a {
  color: var(--purple);
  text-decoration: none;
}

div.watek-najnowszy a:hover {
  text-decoration: underline;
}

/* Style dla przycisków z kolorami - btn-color-{kolor} */
/* Przyciski są wypełnione kolorem, tekst biały */

/* Klasy pomocnicze dla SVG path - rozróżnienie fill/stroke */
/* path-fill - tylko fill, bez stroke */
button[class*="btn-color"] .path-fill,
a[class*="btn-color"] .path-fill {
  fill: currentColor !important;
  stroke: none !important;
}
/* path-stroke - tylko stroke, bez fill */
button[class*="btn-color"] .path-stroke,
a[class*="btn-color"] .path-stroke {
  stroke: currentColor !important;
  fill: none !important;
}

/* Wyłączenie kolorów dla nieaktywnych przycisków nawigacyjnych */
button.btn-for-nav.btn-color-blue:not(.btn-for-active),
button.btn-for-nav.btn-color-yellow:not(.btn-for-active),
button.btn-for-nav.btn-color-green:not(.btn-for-active),
button.btn-for-nav.btn-color-teal:not(.btn-for-active),
button.btn-for-nav.btn-color-orange:not(.btn-for-active),
button.btn-for-nav.btn-color-brown:not(.btn-for-active),
button.btn-for-nav.btn-color-light-blue:not(.btn-for-active),
button.btn-for-nav.btn-color-purple:not(.btn-for-active),
button.btn-for-nav.btn-color-red:not(.btn-for-active),
button.btn-for-nav.btn-color-gray:not(.btn-for-active),
button.btn-for-nav.btn-color-akcent:not(.btn-for-active),
button.btn-for-nav.btn-color-black:not(.btn-for-active),
button.btn-for-nav.btn-color-dark-red:not(.btn-for-active),
button.btn-for-nav.btn-color-akcent2:not(.btn-for-active),
button.btn-for-nav.btn-color-akcent3:not(.btn-for-active),
button.btn-for-nav.btn-color-white:not(.btn-for-active),
button.btn-for-nav.btn-color-primary-dev:not(.btn-for-active),
button.btn-for-nav.btn-color-accent-dev:not(.btn-for-active) {
  color: #808080 !important;
  background-color: #EAEAEA !important;
  border-color: transparent !important;
}

/* Blue */
button.btn-color-blue,
a.btn-color-blue {
  color: #fff !important;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
button.btn-color-blue:hover,
button.btn-color-blue:focus,
a.btn-color-blue:hover,
a.btn-color-blue:focus {
  color: #fff !important;
  background: var(--blue) !important;
  opacity: 0.9;
}

/* Yellow */
button.btn-color-yellow,
a.btn-color-yellow {
  color: #fff !important;
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
button.btn-color-yellow:hover,
button.btn-color-yellow:focus,
a.btn-color-yellow:hover,
a.btn-color-yellow:focus {
  color: #fff !important;
  background: var(--yellow) !important;
  opacity: 0.9;
}

/* Green */
button.btn-color-green,
a.btn-color-green {
  color: #fff !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
}
button.btn-color-green:hover,
button.btn-color-green:focus,
a.btn-color-green:hover,
a.btn-color-green:focus {
  color: #fff !important;
  background: var(--green) !important;
  opacity: 0.9;
}

/* Teal */
button.btn-color-teal,
a.btn-color-teal {
  color: #fff !important;
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}
button.btn-color-teal:hover,
button.btn-color-teal:focus,
a.btn-color-teal:hover,
a.btn-color-teal:focus {
  color: #fff !important;
  background: var(--teal) !important;
  opacity: 0.9;
}

/* Orange */
button.btn-color-orange,
a.btn-color-orange {
  color: #fff !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
button.btn-color-orange:hover,
button.btn-color-orange:focus,
a.btn-color-orange:hover,
a.btn-color-orange:focus {
  color: #fff !important;
  background: var(--orange) !important;
  opacity: 0.9;
}

/* Brown */
button.btn-color-brown,
a.btn-color-brown {
  color: #fff !important;
  background: var(--brown) !important;
  border-color: var(--brown) !important;
}
button.btn-color-brown:hover,
button.btn-color-brown:focus,
a.btn-color-brown:hover,
a.btn-color-brown:focus {
  color: #fff !important;
  background: var(--brown) !important;
  opacity: 0.9;
}

/* Light Blue */
button.btn-color-light-blue,
a.btn-color-light-blue {
  color: #fff !important;
  background: var(--light-blue) !important;
  border-color: var(--light-blue) !important;
}
button.btn-color-light-blue:hover,
button.btn-color-light-blue:focus,
a.btn-color-light-blue:hover,
a.btn-color-light-blue:focus {
  color: #fff !important;
  background: var(--light-blue) !important;
  opacity: 0.9;
}

/* Purple */
button.btn-color-purple,
a.btn-color-purple {
  color: #fff !important;
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}
button.btn-color-purple:hover,
button.btn-color-purple:focus,
a.btn-color-purple:hover,
a.btn-color-purple:focus {
  color: #fff !important;
  background: var(--purple) !important;
  opacity: 0.9;
}

/* Red */
button.btn-color-red,
a.btn-color-red {
  color: #fff !important;
  background: var(--red) !important;
  border-color: var(--red) !important;
}
button.btn-color-red:hover,
button.btn-color-red:focus,
a.btn-color-red:hover,
a.btn-color-red:focus {
  color: #fff !important;
  background: var(--red) !important;
  opacity: 0.9;
}

/* Gray */
button.btn-color-gray,
a.btn-color-gray {
  color: #fff !important;
  background: var(--gray) !important;
  border-color: var(--gray) !important;
}
button.btn-color-gray:hover,
button.btn-color-gray:focus,
a.btn-color-gray:hover,
a.btn-color-gray:focus {
  color: #fff !important;
  background: var(--gray) !important;
  opacity: 0.9;
}

/* Akcent */
button.btn-color-akcent,
a.btn-color-akcent {
  color: #fff !important;
  background: var(--akcent) !important;
  border-color: var(--akcent) !important;
}
button.btn-color-akcent:hover,
button.btn-color-akcent:focus,
a.btn-color-akcent:hover,
a.btn-color-akcent:focus {
  color: #fff !important;
  background: var(--akcent) !important;
  opacity: 0.9;
}

/* Black */
button.btn-color-black,
a.btn-color-black {
  color: #fff !important;
  background: var(--black) !important;
  border-color: var(--black) !important;
}
button.btn-color-black:hover,
button.btn-color-black:focus,
a.btn-color-black:hover,
a.btn-color-black:focus {
  color: #fff !important;
  background: var(--black) !important;
  opacity: 0.9;
}

/* Dark Red */
button.btn-color-dark-red,
a.btn-color-dark-red {
  color: #fff !important;
  background: var(--dark-red) !important;
  border-color: var(--dark-red) !important;
}
button.btn-color-dark-red:hover,
button.btn-color-dark-red:focus,
a.btn-color-dark-red:hover,
a.btn-color-dark-red:focus {
  color: #fff !important;
  background: var(--dark-red) !important;
  opacity: 0.9;
}

/* Akcent2 */
button.btn-color-akcent2,
a.btn-color-akcent2 {
  color: #fff !important;
  background: var(--akcent2) !important;
  border-color: var(--akcent2) !important;
}
button.btn-color-akcent2:hover,
button.btn-color-akcent2:focus,
a.btn-color-akcent2:hover,
a.btn-color-akcent2:focus {
  color: #fff !important;
  background: var(--akcent2) !important;
  opacity: 0.9;
}

/* Akcent3 */
button.btn-color-akcent3,
a.btn-color-akcent3 {
  color: #fff !important;
  background: var(--akcent3) !important;
  border-color: var(--akcent3) !important;
}
button.btn-color-akcent3:hover,
button.btn-color-akcent3:focus,
a.btn-color-akcent3:hover,
a.btn-color-akcent3:focus {
  color: #fff !important;
  background: var(--akcent3) !important;
  opacity: 0.9;
}

/* White */
button.btn-color-white,
a.btn-color-white {
  color: var(--black) !important;
  background: var(--white) !important;
  border-color: var(--white) !important;
}
button.btn-color-white:hover,
button.btn-color-white:focus,
a.btn-color-white:hover,
a.btn-color-white:focus {
  color: var(--black) !important;
  background: var(--white) !important;
  opacity: 0.9;
}

/* Primary Dev */
button.btn-color-primary-dev,
a.btn-color-primary-dev {
  color: #fff !important;
  background: var(--primary-dev) !important;
  border-color: var(--primary-dev) !important;
}
button.btn-color-primary-dev:hover,
button.btn-color-primary-dev:focus,
a.btn-color-primary-dev:hover,
a.btn-color-primary-dev:focus {
  color: #fff !important;
  background: var(--primary-dev) !important;
  opacity: 0.9;
}

/* Accent Dev */
button.btn-color-accent-dev,
a.btn-color-accent-dev {
  color: #fff !important;
  background: var(--accent-dev) !important;
  border-color: var(--accent-dev) !important;
}
button.btn-color-accent-dev:hover,
button.btn-color-accent-dev:focus,
a.btn-color-accent-dev:hover,
a.btn-color-accent-dev:focus {
  color: #fff !important;
  background: var(--accent-dev) !important;
  opacity: 0.9;
}

/* ============================================
   Style dla przycisków outline z kolorami - btn-color-outline-{kolor}
   ============================================ */

/* Blue Outline */
button.btn-color-outline-blue,
a.btn-color-outline-blue {
  color: var(--blue) !important;
  border: 2px solid var(--blue) !important;
  background: transparent !important;
}
button.btn-color-outline-blue:hover,
button.btn-color-outline-blue:focus,
a.btn-color-outline-blue:hover,
a.btn-color-outline-blue:focus {
  color: #fff !important;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* Yellow Outline */
button.btn-color-outline-yellow,
a.btn-color-outline-yellow {
  color: var(--yellow) !important;
  border: 2px solid var(--yellow) !important;
  background: transparent !important;
}
button.btn-color-outline-yellow:hover,
button.btn-color-outline-yellow:focus,
a.btn-color-outline-yellow:hover,
a.btn-color-outline-yellow:focus {
  color: #fff !important;
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}

/* Green Outline */
button.btn-color-outline-green,
a.btn-color-outline-green {
  color: var(--green) !important;
  border: 2px solid var(--green) !important;
  background: transparent !important;
}
button.btn-color-outline-green:hover,
button.btn-color-outline-green:focus,
a.btn-color-outline-green:hover,
a.btn-color-outline-green:focus {
  color: #fff !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
}

/* Teal Outline */
button.btn-color-outline-teal,
a.btn-color-outline-teal {
  color: var(--teal) !important;
  border: 2px solid var(--teal) !important;
  background: transparent !important;
}
button.btn-color-outline-teal:hover,
button.btn-color-outline-teal:focus,
a.btn-color-outline-teal:hover,
a.btn-color-outline-teal:focus {
  color: #fff !important;
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}

/* Orange Outline */
button.btn-color-outline-orange,
a.btn-color-outline-orange {
  color: var(--orange) !important;
  border: 2px solid var(--orange) !important;
  background: transparent !important;
}
button.btn-color-outline-orange:hover,
button.btn-color-outline-orange:focus,
a.btn-color-outline-orange:hover,
a.btn-color-outline-orange:focus {
  color: #fff !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}

/* Brown Outline */
button.btn-color-outline-brown,
a.btn-color-outline-brown {
  color: var(--brown) !important;
  border: 2px solid var(--brown) !important;
  background: transparent !important;
}
button.btn-color-outline-brown:hover,
button.btn-color-outline-brown:focus,
a.btn-color-outline-brown:hover,
a.btn-color-outline-brown:focus {
  color: #fff !important;
  background: var(--brown) !important;
  border-color: var(--brown) !important;
}

/* Light Blue Outline */
button.btn-color-outline-light-blue,
a.btn-color-outline-light-blue {
  color: var(--light-blue) !important;
  border: 2px solid var(--light-blue) !important;
  background: transparent !important;
}
button.btn-color-outline-light-blue:hover,
button.btn-color-outline-light-blue:focus,
a.btn-color-outline-light-blue:hover,
a.btn-color-outline-light-blue:focus {
  color: #fff !important;
  background: var(--light-blue) !important;
  border-color: var(--light-blue) !important;
}

/* Purple Outline */
button.btn-color-outline-purple,
a.btn-color-outline-purple {
  color: var(--purple) !important;
  border: 2px solid var(--purple) !important;
  background: transparent !important;
}
button.btn-color-outline-purple:hover,
button.btn-color-outline-purple:focus,
a.btn-color-outline-purple:hover,
a.btn-color-outline-purple:focus {
  color: #fff !important;
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}

/* Red Outline */
button.btn-color-outline-red,
a.btn-color-outline-red {
  color: var(--red) !important;
  border: 2px solid var(--red) !important;
  background: transparent !important;
}
button.btn-color-outline-red:hover,
button.btn-color-outline-red:focus,
a.btn-color-outline-red:hover,
a.btn-color-outline-red:focus {
  color: #fff !important;
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* Gray Outline */
button.btn-color-outline-gray,
a.btn-color-outline-gray {
  color: var(--gray) !important;
  border: 2px solid var(--gray) !important;
  background: transparent !important;
}
button.btn-color-outline-gray:hover,
button.btn-color-outline-gray:focus,
a.btn-color-outline-gray:hover,
a.btn-color-outline-gray:focus {
  color: #fff !important;
  background: var(--gray) !important;
  border-color: var(--gray) !important;
}

/* Akcent Outline */
button.btn-color-outline-akcent,
a.btn-color-outline-akcent {
  color: var(--akcent) !important;
  border: 2px solid var(--akcent) !important;
  background: transparent !important;
}
button.btn-color-outline-akcent:hover,
button.btn-color-outline-akcent:focus,
a.btn-color-outline-akcent:hover,
a.btn-color-outline-akcent:focus {
  color: #fff !important;
  background: var(--akcent) !important;
  border-color: var(--akcent) !important;
}

/* Black Outline */
button.btn-color-outline-black,
a.btn-color-outline-black {
  color: var(--black) !important;
  border: 2px solid var(--black) !important;
  background: transparent !important;
}
button.btn-color-outline-black:hover,
button.btn-color-outline-black:focus,
a.btn-color-outline-black:hover,
a.btn-color-outline-black:focus {
  color: #fff !important;
  background: var(--black) !important;
  border-color: var(--black) !important;
}

/* Dark Red Outline */
button.btn-color-outline-dark-red,
a.btn-color-outline-dark-red {
  color: var(--dark-red) !important;
  border: 2px solid var(--dark-red) !important;
  background: transparent !important;
}
button.btn-color-outline-dark-red:hover,
button.btn-color-outline-dark-red:focus,
a.btn-color-outline-dark-red:hover,
a.btn-color-outline-dark-red:focus {
  color: #fff !important;
  background: var(--dark-red) !important;
  border-color: var(--dark-red) !important;
}

/* Akcent2 Outline */
button.btn-color-outline-akcent2,
a.btn-color-outline-akcent2 {
  color: var(--akcent2) !important;
  border: 2px solid var(--akcent2) !important;
  background: transparent !important;
}
button.btn-color-outline-akcent2:hover,
button.btn-color-outline-akcent2:focus,
a.btn-color-outline-akcent2:hover,
a.btn-color-outline-akcent2:focus {
  color: #fff !important;
  background: var(--akcent2) !important;
  border-color: var(--akcent2) !important;
}

/* Akcent3 Outline */
button.btn-color-outline-akcent3,
a.btn-color-outline-akcent3 {
  color: var(--akcent3) !important;
  border: 2px solid var(--akcent3) !important;
  background: transparent !important;
}
button.btn-color-outline-akcent3:hover,
button.btn-color-outline-akcent3:focus,
a.btn-color-outline-akcent3:hover,
a.btn-color-outline-akcent3:focus {
  color: #fff !important;
  background: var(--akcent3) !important;
  border-color: var(--akcent3) !important;
}

/* White Outline */
button.btn-color-outline-white,
a.btn-color-outline-white {
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
  background: transparent !important;
}
button.btn-color-outline-white:hover,
button.btn-color-outline-white:focus,
a.btn-color-outline-white:hover,
a.btn-color-outline-white:focus {
  color: var(--black) !important;
  background: var(--white) !important;
  border-color: var(--white) !important;
}

/* Primary Dev Outline */
button.btn-color-outline-primary-dev,
a.btn-color-outline-primary-dev {
  color: var(--primary-dev) !important;
  border: 2px solid var(--primary-dev) !important;
  background: transparent !important;
}
button.btn-color-outline-primary-dev:hover,
button.btn-color-outline-primary-dev:focus,
a.btn-color-outline-primary-dev:hover,
a.btn-color-outline-primary-dev:focus {
  color: #fff !important;
  background: var(--primary-dev) !important;
  border-color: var(--primary-dev) !important;
}

/* Accent Dev Outline */
button.btn-color-outline-accent-dev,
a.btn-color-outline-accent-dev {
  color: var(--accent-dev) !important;
  border: 2px solid var(--accent-dev) !important;
  background: transparent !important;
}
button.btn-color-outline-accent-dev:hover,
button.btn-color-outline-accent-dev:focus,
a.btn-color-outline-accent-dev:hover,
a.btn-color-outline-accent-dev:focus {
  color: #fff !important;
  background: var(--accent-dev) !important;
  border-color: var(--accent-dev) !important;
}

/* Forum Grupa Menu (trzy kropki) */
.forum-grupa-card {
  position: relative;
}

.forum-grupa-menu-wrapper {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}

.forum-grupa-menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.forum-grupa-menu-btn:hover {
  background-color: #f5f5f5;
}

.forum-grupa-menu-btn svg circle {
  transition: fill 0.2s ease;
}

.forum-grupa-menu-btn:hover svg circle {
  fill: #333;
}

.forum-grupa-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background: #fff;
  border: 1px solid #EAEAEA;
  border-radius: 5px;
  box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 1000;
}

.forum-grupa-menu-wrapper.active .forum-grupa-menu-dropdown {
  display: block;
}

.forum-grupa-menu-list {
  margin: 0;
  padding: 5px 0;
  list-style: none;
}

.forum-grupa-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: #808080;
  text-decoration: none;
  font-size: 13px;
  line-height: 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.forum-grupa-menu-item:hover {
  background-color: #f5f5f5;
  color: #000;
  text-decoration: none;
}

.forum-grupa-menu-item svg {
  flex-shrink: 0;
}

.forum-grupa-menu-item svg path {
  transition: stroke 0.2s ease;
}

.forum-grupa-menu-item:hover svg path {
  stroke: #000;
}