/* ==========================================================================
   Hepatito C rizikos popup – stiliai (perkelta iš Custom CSS & JS)
   ========================================================================== */

.pop-up-background {
  --main-color: #e34f39;

  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.pop-up-background.open { display: flex; }

.pop-up-body {
  position: relative;
  width: 90vw;
  max-width: 600px;
  margin: 20px;
  padding: 20px;
  background: #e7e5e5e6;
}

.close {
  position: absolute;
  top: -23.5px;
  right: 90px;
  font-size: 25px;
  font-weight: 600;
  color: var(--main-color);
  cursor: pointer;
  transition: 0.01s;
}
.close:hover { font-weight: 900; }

/* Focus žymeklis: nematomas pelei/programiniam focus, rodomas tik klaviatūrai */
.pop-up-body:focus { outline: none; }
.close:focus { outline: none; }
.close:focus-visible { outline: 2px solid var(--main-color); outline-offset: 2px; }

.pop-up-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 20px 20px 50px;
}
.pop-up-title h4 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  color: var(--main-color);
}
.pop-up-title h5 {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--main-color);
}

.main-pop-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 370px;
  margin: 0 auto;
  padding: 20px 40px;
  background-color: #f9f6e1;
}

.changing-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 30px;
  overflow: hidden;
}

.previuos-content,
.next-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: monospace;
  font-size: 27px;
  color: var(--main-color);
  cursor: pointer;
  transition: 0.01s linear;
}
.previuos-content { left: -8px; }
.next-content { right: -7px; }
.previuos-content:hover,
.next-content:hover { font-weight: 600; }

.answer {
  display: none;
  position: relative;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #575757;
}
.answer.on { display: flex; }

.number-of-content {
  position: absolute;
  bottom: -6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--main-color);
}

.pup-up-footer h6 {
  margin: 50px auto 20px;
  max-width: 100%;
  text-align: center;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--main-color);
}

/* --- Desktop --- */
@media screen and (min-width: 768px) {
  .pop-up-body {
    max-width: 769px;
    height: 446px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .main-pop-container {
    width: 370px;
    min-height: 159px;
  }
  .changing-content {
    position: unset;
    margin: auto;
  }
  .number-of-content { bottom: 17px; }
}

/* --- Mobile --- */
@media screen and (max-width: 767px) {
  .pop-up-background.open { z-index: 100; }
  .close { top: -14px; right: 5px; }
  .pop-up-title h4 { font-size: 23px; }
  .pop-up-title h5 { font-size: 20px; }
  .main-pop-container { position: unset; }
  .changing-content br { display: none; }
  .pup-up-footer h6 { font-size: 16px; }
}