.open-iframe-btn { bottom: 40px !important; }
#iframeContainer.iframe-container {
  bottom: 54px !important;
  height: calc(100vh - 74px) !important;
}
#iframeElement { height: 100% !important; }
/* skilly search bar: suggested styling used on the SUU Online preview.
   Preview: https://suu-online.vercel.app/
   Use as is, adapt it, or write your own.
   Set the variables in :root to SUU values.
   skilly writes inline styles on its elements, so the widget rules use !important. */

:root {
  --skl-accent: #DB0000;        /* send button, border */
  --skl-accent-focus: #DB0000;  /* border on focus */
  --skl-accent-hover: #C41425;  /* send button on hover */
  --skl-text: #3C3C3C;
  --skl-font: "Barlow", sans-serif;
}

/* Wrapper: the pill around the search bar */
.hero-ask {
  position: relative;
  z-index: 2; /* keep above any decorative layer in the hero */
  display: flex;
  align-items: center;
  width: 100%;
  height: 72px;
  margin-top: 30px;
  padding: 8px 8px 8px 28px;
  background: #fff;
  border: 2px solid var(--skl-accent);
  border-radius: 50px;
  box-shadow: rgba(1, 1, 1, 0.2) 2px 4px 4px 0;
}
.hero-ask:focus-within {
  border-color: var(--skl-accent-focus);
}

/* skilly mount */
#skl_id_search_hero_section {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-width: none !important;
}
#skl_id_search_hero_section .hero-input {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Input */
#skl_id_search_hero_section .hero-input input {
  order: 1;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: 0;
  outline: none;
  background: transparent !important;
  color: var(--skl-text) !important;
  font-family: var(--skl-font);
  font-size: 21px;
  font-weight: 500;
}
#skl_id_search_hero_section .hero-input input::placeholder {
  color: var(--skl-accent) !important;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase; /* shows ASK ME ANYTHING... */
}

/* Send button */
#skl_id_search_hero_section .send-button-hero {
  position: static !important;
  order: 2;
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--skl-accent) !important;
  transition: background-color 0.2s;
}
#skl_id_search_hero_section .send-button-hero:hover {
  background-color: var(--skl-accent-hover) !important;
}
#skl_id_search_hero_section .send-button-hero svg {
  width: 30px !important;
  height: 30px !important;
}
#skl_id_search_hero_section .send-button-hero svg,
#skl_id_search_hero_section .send-button-hero path {
  fill: #fff;
  stroke: #fff;
}

/* Mobile */
@media (max-width: 767px) {
  .hero-ask {
    height: 64px;
    margin-top: 22px;
    padding-left: 20px;
  }
  #skl_id_search_hero_section .hero-input input {
    font-size: 18px;
  }
  #skl_id_search_hero_section .send-button-hero {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
  #skl_id_search_hero_section .send-button-hero svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Optional: plain magnifying glass (no sparkle).
   Hides the widget icon and draws ours. No script needed. Test before shipping. */
#skl_id_search_hero_section .send-button-hero svg {
  display: none !important;
}

#skl_id_search_hero_section .send-button-hero {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='white'%3E%3Cpath d='M423.5 117.2C419 118.9 416 123.2 416 128C416 132.8 419 137.1 423.5 138.8L480 160L501.2 216.5C502.9 221 507.2 224 512 224C516.8 224 521.1 221 522.8 216.5L544 160L600.5 138.8C605 137.1 608 132.8 608 128C608 123.2 605 118.9 600.5 117.2L544 96L522.8 39.5C521.1 35 516.8 32 512 32C507.2 32 502.9 35 501.2 39.5L480 96L423.5 117.2zM238.5 137.3C235.9 131.6 230.2 128 224 128C217.8 128 212.1 131.6 209.5 137.3L156.4 252.3L41.4 305.4C35.6 308.1 32 313.8 32 320C32 326.2 35.6 331.9 41.3 334.5L156.3 387.6L209.4 502.6C212 508.3 217.7 511.9 223.9 511.9C230.1 511.9 235.8 508.3 238.4 502.6L291.5 387.6L406.5 334.5C412.2 331.9 415.8 326.2 415.8 320C415.8 313.8 412.2 308.1 406.5 305.5L291.5 252.4L238.4 137.4zM448 480L391.5 501.2C387 502.9 384 507.2 384 512C384 516.8 387 521.1 391.5 522.8L448 544L469.2 600.5C470.9 605 475.2 608 480 608C484.8 608 489.1 605 490.8 600.5L512 544L568.5 522.8C573 521.1 576 516.8 576 512C576 507.2 573 502.9 568.5 501.2L512 480L490.8 423.5C489.1 419 484.8 416 480 416C475.2 416 470.9 419 469.2 423.5L448 480z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px 28px !important;
}

/* Optional: suggestion buttons under the bar. Match your primary button. */
.hero-chips {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.hero-chip {
  padding: 10px 20px;
  border: 2px solid var(--skl-accent);
  border-radius: 25px;
  background: var(--skl-accent);
  color: #fff;
  font: 800 18px var(--skl-font);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.hero-chip:hover {
  background: var(--skl-accent-hover);
}
@media (max-width: 767px) {
  .hero-chips { flex-wrap: wrap; margin-top: 12px; }
  .hero-chip { white-space: normal; }
}