@import url("./ecostars-fyh-filters.css?v=1.0.2");
@import url("./ecostars-fyh-map.css?v=1.0.2");
@import url("./ecostars-fyh-details-swiper.css?v=1.0.2");
@import url("./ecostars-fyh-details-header-footer.css?v=1.0.2");
@import url("./ecostars-fyh-details-content.css?v=1.0.2");
@import url("./ecostars-fyh-details-skeleton.css?v=1.0.2");

@font-face {
  font-family: PlusJakartaSans;
  src: url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype")
      tech(variations),
    url("./fonts/PlusJakartaSans-VariableFont_wght.ttf")
      format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 200%;
}

:root {
  --wp--style--global--content-size: 1400px;
}

header.site-header {
  position: relative;
  z-index: 10000;
}

#ecostars-fyh-wrapper {
  font-size: 1rem;

  --ecostarsfyh-font-size-xl: 1.3em;
  --ecostarsfyh-font-size-lg: 1.2em;
  --ecostarsfyh-font-size-md: 1.1em;
  --ecostarsfyh-font-size-sm: 1em;
  --ecostarsfyh-font-size-xs: 0.9em;
  --ecostarsfyh-font-size-2xs: 0.8em;
  --ecostarsfyh-map-height: 690px;

  --ecostarsfyh-filters-font-size: var(--ecostarsfyh-font-size-sm);
  --ecostarsfyh-legend-font-size: var(--ecostarsfyh-font-size-sm);
  --ecostarsfyh-hotel-header-font-size: var(--ecostarsfyh-font-size-sm);
  --ecostarsfyh-hotel-header-name-font-size: var(--ecostarsfyh-font-size-xl);
  --ecostarsfyh-hotel-footer-font-size: var(--ecostarsfyh-font-size-md);
  --ecostarsfyh-hotel-footer-btn-font-size: var(--ecostarsfyh-font-size-sm);
  --ecostarsfyh-hotel-summary-title-font-size: var(--ecostarsfyh-font-size-sm);
  --ecostarsfyh-hotel-summary-description-font-size: var(
    --ecostarsfyh-font-size-xs
  );
  --ecostarsfyh-hotel-summary-link-font-size: var(--ecostarsfyh-font-size-2xs);
  --ecostarsfyh-hotel-title-font-size: var(--ecostarsfyh-font-size-md);
  --ecostarsfyh-hotel-certifications-ecostars-font-size: var(
    --ecostarsfyh-font-size-sm
  );
  --ecostarsfyh-hotel-certifications-other-font-size: var(
    --ecostarsfyh-font-size-md
  );
  --ecostarsfyh-hotel-bar-charts-text-font-size: var(
    --ecostarsfyh-font-size-sm
  );
  --ecostarsfyh-hotel-gri-chart-text-font-size: var(--ecostarsfyh-font-size-xl);
  --ecostarsfyh-hotel-idiosincrasy-charts-title-font-size: var(
    --ecostarsfyh-font-size-md
  );
  --ecostarsfyh-hotel-idiosincrasy-charts-subtitle-font-size: var(
    --ecostarsfyh-font-size-xs
  );

  font-family: "PlusJakartaSans";
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  position: relative;
  line-height: 1.1rem;

  & :is(input, select, button, li) {
    font-family: "PlusJakartaSans";
  }

  & #ecostars-fyh-hotel-panel {
    visibility: hidden;
    position: fixed;
    border-radius: 0;
    background: #fff;
    z-index: 9999;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
    /* transition: all 500ms; */

    width: 100%;
    min-width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  &.ecostars-fyh-panel-open {
    & #ecostars-fyh-hotel-panel {
      visibility: visible;
      top: 0;
    }

    /* & #ecostars-fyh-map {
      height: calc(25% + 20px);
    } */
  }
}

.ecostars-fyh-hotel-report {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: #072026;
  font-size: 1rem;

  & :is(a, a:active, a:hover, a:link, a:visited) {
    text-decoration: none;
    font-weight: 500;
  }

  & :is(button, .btn) {
    background: #072026;
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    display: inline-block;
    font-weight: 500;
  }

  & :is(p, ul, figure) {
    margin: 0;
    padding: 0;
  }

  & li {
    list-style-type: none;
  }

  & .ecostars-fyh-hotel-esg-info {
    flex-grow: 1;
    background: #e0ecec;
    /* margin: 0 15px 15px; */
    /* border-radius: 10px; */
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4px;

    & .ecostars-fyh-hotel-esg-info-column {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    & .ecostars-fyh-hotel-idiosincrasy-columns {
      & > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }

    & section {
      &.ecostars-fyh-hotel-idiosincrasy {
        flex-grow: 1;

        & > .ecostars-fyh-hotel-idiosincrasy-columns {
          display: grid;
          grid-template-columns: 1fr 1fr;

          & > div:first-child {
            border-right: 1px solid #e0ecec;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (min-width: 600px) {
  #ecostars-fyh-wrapper {
    --ecostarsfyh-filters-font-size: var(--ecostarsfyh-font-size-sm);
    --ecostarsfyh-legend-font-size: var(--ecostarsfyh-font-size-sm);
    --ecostarsfyh-hotel-header-font-size: var(--ecostarsfyh-font-size-sm);
    --ecostarsfyh-hotel-header-name-font-size: var(--ecostarsfyh-font-size-xl);
    --ecostarsfyh-hotel-footer-font-size: var(--ecostarsfyh-font-size-xs);
    --ecostarsfyh-hotel-footer-btn-font-size: var(--ecostarsfyh-font-size-xs);
    --ecostarsfyh-hotel-title-font-size: var(--ecostarsfyh-font-size-md);
    --ecostarsfyh-hotel-certifications-ecostars-font-size: var(
      --ecostarsfyh-font-size-sm
    );
    --ecostarsfyh-hotel-certifications-other-font-size: var(
      --ecostarsfyh-font-size-sm
    );
    --ecostarsfyh-hotel-bar-charts-text-font-size: var(
      --ecostarsfyh-font-size-sm
    );
    --ecostarsfyh-hotel-gri-chart-text-font-size: var(
      --ecostarsfyh-font-size-xl
    );
    --ecostarsfyh-hotel-idiosincrasy-charts-title-font-size: var(
      --ecostarsfyh-font-size-sm
    );
    --ecostarsfyh-hotel-idiosincrasy-charts-subtitle-font-size: var(
      --ecostarsfyh-font-size-xs
    );
    --ecostarsfyh-hotel-summary-link-font-size: var(--ecostarsfyh-font-size-xs);

    & #ecostars-fyh-hotel-panel {
      position: absolute;
      width: 0;
      min-width: 0;
      height: 100%;
      left: calc(100% + 1px);
      top: 0;
      border-radius: 10px;
    }

    &.ecostars-fyh-panel-open {
      & #ecostars-fyh-hotel-panel {
        width: 75%;
        min-width: 75%;
        left: 25%;
        top: 0;
      }
      & #ecostars-fyh-map {
        height: var(--ecostarsfyh-map-height);
        width: calc(25% + 20px);
      }
    }

    & .ecostars-fyh-hotel-report {
      border-radius: 10px;

      & .ecostars-fyh-hotel-esg-info {
        margin: 0;
        border-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        & .ecostars-fyh-hotel-esg-info-column {
          height: 100%;
        }
      }
    }
  }
}

@media (min-width: 950px) {
  #ecostars-fyh-wrapper {
    & .ecostars-fyh-hotel-report {
      & .ecostars-fyh-hotel-esg-info {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}