.jw {
  &-container {
    --jw-scale: 1;
    --jw-color: rgb(12, 21, 29);
    --jw-muted: rgb(101, 113, 130);
    --jw-font-size: calc(12px * var(--jw-scale));
    --jw-font-weight-normal: 400;
    --jw-font-weight-bold: 700;
    --jw-border-color: rgb(229, 229, 229);
    --jw-border-width: 1px;
    --jw-border-radius: 4px;
    --jw-font-family: "Open Sans", Arial, sans-serif;
    --jw-bg: rgb(255, 255, 255);
    --jw-secondary-bg: rgb(245, 245, 245);
    --jw-border-color: var(--jw-bg);
  }

  &-container.is-dark-theme {
    --jw-color: rgb(216, 216, 216);
    --jw-muted: rgb(180, 180, 180);
    --jw-bg: rgb(19, 19, 19);
    --jw-secondary-bg: rgb(60, 60, 60);
    --jw-border-color: var(--jw-bg);
  }

  &-container.is-alt-variant {
    --jw-font-family: Tahoma, Verdana, sans-serif;
    --jw-font-weight-normal: 500;
    --jw-font-weight-bold: 600;
    --jw-font-size: calc(12px * var(--jw-scale));
    --jw-border-radius: 0.5rem;
    --jw-icon-border-radius: 0.25rem;
  }

  &-container * {
    box-sizing: border-box;
  }
}

.jw-offers {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--jw-scale, 1));
  justify-content: start;
  padding: 0;
  margin: 0 0 0.6rem;
  font-weight: 400;
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--jw-color, #000);
  font-size: calc(max(var(--jw-font-size) * var(--jw-scale, 1), 10px));
}

.jw-offer {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-decoration: none !important;
  color: var(--jw-color, #000) !important;
  border: var(--jw-border-width) solid var(--jw-border-color);
  border-radius: var(--jw-border-radius);
  padding: 1.1em;
  background-color: var(--jw-bg);

  &-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5em;
  }

  &-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5em;
    margin-top: auto;
  }

  .is-alt-variant & {
    width: 11.5em;
    height: auto;
    aspect-ratio: 140/120;
    border-style: solid;
    background-color: var(--jw-secondary-bg);
  }
}

.jw-provider-icon {
  width: calc(max(50px * var(--jw-scale, 1), 24px));
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid #00000018;
  box-shadow: 2px 2px 2px #00000018;
  border-radius: 12px;

  .is-alt-variant & {
    width: calc(max(32px * var(--jw-scale, 1), 24px));
    border-radius: var(--jw-icon-border-radius);
  }
}

.jw-offer-label {
  text-align: center;

  .is-alt-variant & {
    text-align: left;
    font-weight: var(--jw-font-weight-bold);
    color: var(--jw-muted, #656769);
  }
}

.jw-quality {
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
  font-size: 0.9em;
  font-weight: var(--jw-font-weight-bold, 700);
  background-color: var(--jw-secondary-bg, #f5f5f5);
  color: var(--jw-muted, #656769);
  height: fit-content;
  text-transform: uppercase;
  line-height: 1;

  .is-alt-variant & {
    background-color: var(--jw-bg);
  }
}

.jw-provider-name {
  font-weight: var(--jw-font-weight-bold, 700);
  font-size: 1.1em;
  color: var(--jw-color, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.jw-branded-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  font-size: 0.85rem;
  text-decoration: none !important;
  gap: 0.5em;
  color: var(--jw-color, #000) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Open Sans", Arial, sans-serif;

  &:where(:hover, :focus, :active, :visited) {
    text-decoration: none !important;
    color: var(--jw-color, #000);
    outline: none;
  }

  img {
    width: auto;
    height: 0.8em;
    vertical-align: revert-layer;
    transform: scale(1.4);
    transform-origin: left center;
    display: inline;
  }
}

html.jw-preview-frame,
.jw-preview-frame body {
    margin: 0 !important;
    padding: 0 !important;
}