.tsl-geo-overlay {
  width: 100%;
  display: block;
}

/* Banner */
.tsl-geo-banner {
  position: relative;         /* so the X can be absolutely placed */
  display: flex;
  align-items: flex-start;    /* let multi-line text align nicely */
  gap: 10px;
  background: #e8eef9;        /* soft blue like your ref */
  border-bottom: 1px solid #d6dceb;
  padding: 10px 40px 10px 12px; /* extra right padding so text doesn’t hit the X */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* X button locked to top-right */
.tsl-geo-close {
  position: absolute;
  top: 2px;
  right: 0px;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #475569;             /* slate-600 */
  cursor: pointer;
}

/* Globe */
.tsl-geo-icon { font-size: 16px; margin-top: 3px; margin-left: 13px; margin-right: 3px; }

/* Text & links container */
.tsl-geo-content {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;            /* allows wrapping on small screens */
  column-gap: 10px;
  row-gap: 2px;
  min-width: 0;
  color: #1e293b;             /* slate-800 */
  font-size: 14px;            /* compact */
}

/* Title first, then message, then links — all inline on desktop */
.tsl-geo-title {
  font-weight: 700;
  margin-right: 6px;          /* keeps links/text close on desktop */
}

.tsl-geo-msg {
  margin-right: 6px;
}

/* Links right after the message */
.tsl-geo-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #1970F4;             /* slate-600 */
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
}

.tsl-geo-stay {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: black;
  cursor: pointer;
  text-decoration: underline;
}

@media(max-width: 960px) {
  .geo-cont { display: flex; align-items: flex-start;}
  .tsl-geo-icon { margin-top: -2px; margin-left: 0;}
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .tsl-geo-stay { padding: 3px; }
  .tsl-geo-banner { padding: 10px 36px 10px 12px; }
  .tsl-geo-content { font-size: 13px; column-gap: 8px; }
  .tsl-geo-close { top: 8px; right: -25px; }
  .tsl-geo-content {display: block;}
}