/* BAR: label + pills */

.faqf__bar{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 24px;
  margin: 0 0 60px 0;
}

/* lewa kolumna */
.faqf__bar-left{
  flex: 0 0 auto;
}

/* prawa kolumna – pille */
.faqf__bar-right{
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
  justify-content: flex-start;
	
}

/* Label "CATEGORIES" */
.faqf__label{
  font-size: var(--e-global-typography-fc02340-font-size);
  font-weight: var(--e-global-typography-fc02340-font-weight);
  text-transform: var(--e-global-typography-fc02340-text-transform);
  line-height: var(--e-global-typography-fc02340-line-height);
  letter-spacing: var(--e-global-typography-fc02340-letter-spacing);
  color: var(--e-global-color-c945545);
}

/* Pills */
/* ===== PILL – stan domyślny ===== */
.faqf .faqf__bar .faqf__pill,
.faqf .faqf__bar .faqf__pill[type="button"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;

  background-color: var(--e-global-color-c945545);
  border-radius: 9999px;
  padding: 4px 24px;
  min-height: auto;

  cursor: pointer;
  white-space: nowrap;

	text-transform: uppercase;
  font-size: var(--e-global-typography-005b4f0-font-size);
  font-weight: var(--e-global-typography-005b4f0-font-weight);
  line-height: var(--e-global-typography-005b4f0-line-height);
  letter-spacing: var(--e-global-typography-005b4f0-letter-spacing);
  color: var(--e-global-color-text);

  transition: background-color .15s ease, transform .15s ease;
}

/* ===== PILL – aktywny (miejsce na X) ===== */
.faqf .faqf__bar .faqf__pill.is-active{
  background-color: var(--e-global-color-7411beb);
           
  position: relative;
}

.faqf .faqf__bar .faqf__pill:not(.is-active):hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ALL – bez ikonki X */
.faqf .faqf__bar .faqf__pill.is-active[data-filter="all"]::after{
  display: none;
}

/* ALL – przywróć normalny padding (bez miejsca na X) */
/* .faqf .faqf__bar .faqf__pill.is-active[data-filter="all"]{
  padding-right: 46px;
}
 */
/* LIST + separators */
.faqf__list{
  border-top: 1px solid var( --e-global-color-e71075e );
}

.faqf__item{
  border-bottom: 1px solid var( --e-global-color-e71075e );
  padding-top: var(--container-default-padding-top,10px);
  padding-right: var(--container-default-padding-right,10px);
  padding-bottom: var(--container-default-padding-bottom,10px);
  padding-left: var(--container-default-padding-left,10px);
  margin: 0;
}

/* Summary (Question) */
.faqf__q{
  list-style: none;
  cursor: pointer;
  position: relative;

  padding: 34px 0 34px 36px; /* LEWA przestrzeń na ikonę */
  margin: 0;

  font-family: var(--e-global-typography-c0c59a4-font-family), Sans-serif;
  font-size: var(--e-global-typography-c0c59a4-font-size);
  font-weight: var(--e-global-typography-c0c59a4-font-weight);
  line-height: var(--e-global-typography-c0c59a4-line-height);
  color: var(--e-global-color-c945545);
	max-width: var(--content-width);
	width: 100%;
	margin:auto;
}

.faqf__q::-webkit-details-marker{
  display: none;
}

/* SVG icons (DOWN when closed, UP when open) */
.faqf__q::after{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 13px;

  background-repeat:no-repeat;
  background-size: 21px 13px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2213%22%20viewBox%3D%220%200%2021%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.4675%20-9.53674e-07L10.5%208.015L18.5325%20-9.53674e-07L21%202.4675L10.5%2012.9675L0%202.4675L2.4675%20-9.53674e-07Z%22%20fill%3D%22%23FDFDFD%22%2F%3E%3C%2Fsvg%3E");
}

.faqf__item[open] .faqf__q::after{
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2213%22%20viewBox%3D%220%200%2021%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.4675%2012.9675L10.5%204.9525L18.5325%2012.9675L21%2010.5L10.5%200L0%2010.5L2.4675%2012.9675Z%22%20fill%3D%22%23FDFDFD%22%2F%3E%3C%2Fsvg%3E");
}

/* Answer */
.faqf__a{
  padding: 0 0 22px 0;

  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-c945545);
}

/* Animacja odpowiedzi */
.faqf__a{
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: height .28s ease, opacity .2s ease, transform .28s ease;
  will-change: height, opacity, transform;

  padding: 0;
	max-width: var(--content-width);
	width: 100%;
	margin:auto;
}

.faqf__item[open] .faqf__a{
  opacity: 1;
  transform: translateY(0);
}

.faqf__a-inner{
  padding: 0 0 22px 36px;
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-c945545);
/* 	width: 80%; */
}
.faqf__a-inner a:hover{
	color: var(--e-global-color-7411beb);
	text-decoration:underline;
}

@media screen and (max-width:991px){
	.faqf__a-inner{
		width: 100%;
	}
}

/* gdy <details> jest open – JS ustawi height na px, ale dajemy też efekt */
.faqf__item.is-animating .faqf__a,
.faqf__item[open] .faqf__a{
  opacity: 1;
  transform: translateY(0);
}
/* aktywny pill z ikonką X */
.faqf .faqf__bar .faqf__pill.is-active:not([data-filter="all"]){
  position: relative;
  padding-right: 36px; /* miejsce na ikonkę */
}

/* ikonka X */
.faqf__pill.is-active::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;

  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.33333%200.94L8.39333%200L4.66667%203.72667L0.94%200L0%200.94L3.72667%204.66667L0%208.39333L0.94%209.33333L4.66667%205.60667L8.39333%209.33333L9.33333%208.39333L5.60667%204.66667L9.33333%200.94Z%22%20fill%3D%22%231D1D1D%22%2F%3E%3C%2Fsvg%3E");
}


@media screen and (max-width: 768px) {
	.faqf__q{
		padding: 16px 35px;
	}
	.faqf__bar{
		padding: 20px 20px 0 20px;
		flex-direction:column;
	}
	.faqf__bar-right{
		flex-wrap: wrap;
	}
}