#wrapper:has(#restrictedArea) #header #headerNavigation .hde_trigger_button,
#wrapper:has(#restrictedArea)
  #header
  #headerNavigation
  .hde_trigger_button
  + .split {
  display: none;
}

#wrapper:has(#restrictedArea) {
  display: flex;
  flex-direction: column;
}

#restrictedArea {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

#restrictedArea .restrictedContent {
  width: 100%;
  padding-block: 24rem 48rem;
}

#restrictedArea .restrictedImage {
  margin-inline: auto;
  display: block;
  margin-block-end: 24rem;
  width: 180rem;
}

@media (orientation: landscape) {
  #restrictedArea .restrictedImage {
    margin-block-end: 47rem;
    width: 236rem;
  }
}

#restrictedArea .restTitle {
  text-transform: uppercase;
  font-size: 18rem;
  font-weight: 900;
  line-height: 142%;
  text-align: center;
  text-wrap: balance;
}

@media (orientation: landscape) {
  #restrictedArea .restTitle {
    font-size: 28rem;
  }
}

#restrictedArea .restDescription {
  margin-block-start: 8rem;
  text-align: center;
  line-height: 142%;
  color: #a4a5b1;
  font-weight: 500;
  font-size: 14rem;
}

@media (orientation: landscape) {
  #restrictedArea .restDescription {
    margin-block-start: 16rem;
    line-height: 180%;
    font-size: 16rem;
  }
}

#restrictedArea .restButtons {
  display: flex;
  justify-content: center;
  gap: 12rem;
  margin-block-start: 40rem;
  flex-direction: column;
}

@media (orientation: landscape) {
  #restrictedArea .restButtons {
    gap: 8rem;
    flex-direction: row;
    margin-block-start: 44rem;
  }
}

#restrictedArea .restButtons .btn {
  min-width: 135rem;
}

#restrictedArea .restButtons .btn.hde_trigger_button {
  color: #d9d9d9;
  border-color: #333333;
}

#restrictedArea .restCountriesBlock {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-block-start: 32rem;
  padding-inline: 12rem;
  padding-block-start: 2rem;
  padding-block-end: 8rem;
  border: clamp(1px, 1rem, 1rem) solid transparent;
  border-radius: 8rem;
  transition: border-color 0.25s ease;
}

@media (orientation: landscape) {
  #restrictedArea .restCountriesBlock {
    margin-block-start: 66rem;
    padding-inline: 32rem;
    padding-block-start: 2rem;
    padding-block-end: 12rem;
    border-radius: 12rem;
  }
}

#restrictedArea .restCountriesBlock:has(.toggleButton.active) {
  border-color: #303345;
}

#restrictedArea .toggleButton {
  height: 44rem;
  font-size: 12rem;
  line-height: 125%;
  font-weight: 500;
  color: #6b6d80;
  padding-inline: 12rem 16rem;
  padding-block: 12rem;
  gap: 12rem;
  margin-inline: auto;
}

@media (orientation: landscape) {
  #restrictedArea .toggleButton {
    padding-inline: 16rem 22rem;
    padding-block: 16rem;
    gap: 14rem;
    font-size: 14rem;
  }
}

#restrictedArea .toggleButton .icon {
  flex-shrink: 0;
  width: 10rem;
  transition: rotate 0.25s ease;
}

@media (orientation: landscape) {
  #restrictedArea .toggleButton .icon {
    width: 12rem;
  }
}

#restrictedArea .toggleButton.active {
  color: #a4a5b1;
}

#restrictedArea .toggleButton.active .icon {
  rotate: 0.5turn;
}

#restrictedArea .restCountriesList {
  display: grid;
  grid-template-rows: 0fr;
  color: #6b6d80;
  font-weight: 400;
  font-size: 10rem;
  line-height: 142%;
  letter-spacing: 0%;
  text-align: center;
  transition: grid-template-rows 1s ease;
}

@media (orientation: landscape) {
  #restrictedArea .restCountriesList {
    font-size: 14rem;
  }
}

#restrictedArea
  .restCountriesBlock:has(.toggleButton.active)
  .restCountriesList {
  grid-template-rows: 1fr;
}

#restrictedArea .restCountriesList .restCountriesInner {
  overflow: hidden;
}

#restrictedArea
  .restCountriesList
  .restCountriesInner
  span:not(:last-child)::after {
  content: ', ';
}
