/* ============================
   Dynamic SVG Geo Button v6
   - left side straight
   - right side skewed (same angle as original SVG)
   - height ≈ 2 × font-size
   ============================ */

.si-geo6-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* height control: with 1rem + line-height:1 this gives ~32–36px */
  padding: 0.9rem 2.4rem 0.9rem 2.0rem;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;     /* or 1.1rem */
  line-height: 1;      /* as you requested */
  font-weight: 400;
  white-space: nowrap;

  background-color: var(--si-geo6-bg, transparent);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.si-geo6-btn__label {
  position: relative;
  z-index: 2;
  color: var(--si-geo6-text, #ffffff);
}

/* SVG overlay */
.si-geo6-btn__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.si-geo6-btn__outline polygon {
  fill: none;
  stroke: var(--si-geo6-border, #ffffff);
  stroke-width: 1.8; /* or 1.8 / 2.0 */
  stroke-miterlimit: 10;
}

/* hover */
.si-geo6-btn:hover {
  background-color: var(--si-geo6-bg-hover, transparent);
}

.si-geo6-btn:hover .si-geo6-btn__label {
  color: var(--si-geo6-text-hover, #00c9cf);
}

.si-geo6-btn:hover .si-geo6-btn__outline polygon {
  stroke: var(--si-geo6-border-hover, #00c9cf);
}

/* FILLED version of the geo button */
.si-geo6-btn.si-geo6-filled {
  /* button element itself stays transparent;
     the SVG polygon will be filled instead */
  background-color: transparent;
}

/* normal state: fill polygon with bg_color */
.si-geo6-btn.si-geo6-filled .si-geo6-btn__outline polygon {
  fill: var(--si-geo6-bg);
}

/* hover: fill polygon with bg_hover_color */
.si-geo6-btn.si-geo6-filled:hover {
  background-color: transparent; /* keep it transparent */
}

.si-geo6-btn.si-geo6-filled:hover .si-geo6-btn__outline polygon {
  fill: var(--si-geo6-bg-hover);
}