@charset "UTF-8";
:root {
  --cl-faq-category: #59585b;
  --cl-faq-title: #59585b;
  --cl-faq-title-before: #fd5c5c;
  --cl-faq-text: #59585b;
  --cl-faq-link: #3b82f6;

  --cl-tips-text: var(--cl-faq-text);
  --cl-tips-link: #007bff;

  --bg-faq-category: #f8f8f8;
  --bg-faq-contents: #fff;
}

.tips {
  margin-block: 24px;
}
.tips-text {
  color: var(--cl-faq-text);
  padding-inline: 20px;
}
.tips-text > a,
.faq-content__text a {
  display: inline-block;
  color: var(--cl-tips-link);
  text-decoration: underline;
}

.faq-category {
  padding-inline: 20px;
  margin-block: 20px;
}

.faq-category .inner {
  padding-block: 16px;
  padding-inline: 16px;
  background: var(--bg-faq-category);
  border: 1px #e4e4e4 solid;
  border-radius: 4px;
}

.faq-title {
  color: var(--cl-faq-category);
  font-weight: bold;
}

.faq-item {
  margin-block-start: 10px;
}
.faq-item__summary {
  position: relative;
  color: var(--cl-faq-title);

  --size-bg-arrow: 0.9em;
  padding-inline-end: calc(0.5em + var(--size-bg-arrow));

  list-style: none;
}
.faq-item__summary::before {
  content: "Q.";
  color: var(--cl-faq-title-before);
  padding-inline-end: 0.3em;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}
.faq-item__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--size-bg-arrow);
  height: var(--size-bg-arrow);
  background-image: url(//static.girls-chat.tv/img/icon/icon-arrow-right-01.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__summary::after {
  transform: translateY(-50%) rotate(270deg);
}

.faq-content {
  background: var(--bg-faq-contents);
  padding-block: 16px;
  padding-inline: 8px;
  border-radius: 4px;
  margin-block: 16px 32px;
}
.faq-content__text {
  position: relative;
  color: var(--cl-faq-text);
  line-height: 1.4;
}
.faq-content__text::before {
  content: "A.";
  padding-inline-end: 0.3em;
}
.faq-content__text > p {
  color: inherit;
}
.faq-content__note {
  color: var(--cl-faq-text);
  font-size: 12px;
  margin-block-start: 8px;
}
.faq-content__link {
  display: block;
  width: fit-content;
  color: var(--cl-faq-link);
  margin-inline-start: auto;
  margin-block-start: 16px;
}