/* ============================================================
   GEOINFOWORLD
   Thematic & Visual Intelligence v1
   ============================================================ */

.giw-thematic-panel {
  display: grid;
  gap: 10px;
}


.giw-thematic-field {
  display: grid;
  gap: 5px;
}


.giw-thematic-field label {
  color: #70899d;

  font-size: .59rem;
  font-weight: 680;

  letter-spacing: .08em;
  text-transform: uppercase;
}


.giw-thematic-field select,
.giw-thematic-field input {
  width: 100%;

  min-height: 36px;

  padding: 7px 9px;

  outline: none;

  border:
    1px solid rgba(180,210,240,.11);

  border-radius: 8px;

  color: #d8e8f3;

  background:
    rgba(255,255,255,.025);
}


.giw-thematic-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 6px;
}


.giw-thematic-method {
  min-height: 58px;

  display: grid;
  place-items: center;

  padding: 7px;

  cursor: pointer;

  text-align: center;

  border:
    1px solid rgba(180,210,240,.09);

  border-radius: 9px;

  color: #849caf;

  background:
    rgba(255,255,255,.017);

  font-size: .64rem;

  transition: .15s ease;
}


.giw-thematic-method:hover {
  color: #d8f4ff;

  border-color:
    rgba(69,212,255,.23);

  background:
    rgba(69,212,255,.045);
}


.giw-thematic-method.is-active {
  color: #c6f4ff;

  border-color:
    rgba(69,212,255,.40);

  background:
    linear-gradient(
      145deg,
      rgba(69,212,255,.105),
      rgba(93,140,255,.045)
    );
}


.giw-thematic-actions {
  display: grid;

  grid-template-columns:
    2fr 1fr;

  gap: 6px;
}


.giw-thematic-action {
  min-height: 36px;

  cursor: pointer;

  border:
    1px solid rgba(180,210,240,.11);

  border-radius: 8px;

  color: #a5bdcf;

  background:
    rgba(255,255,255,.022);
}


.giw-thematic-action.giw-primary {
  color: #c8f3ff;

  border-color:
    rgba(69,212,255,.25);

  background:
    rgba(69,212,255,.075);
}


.giw-thematic-action:hover {
  color: #fff;

  border-color:
    rgba(69,212,255,.35);
}


.giw-thematic-note {
  padding: 8px 9px;

  border:
    1px solid rgba(180,210,240,.07);

  border-radius: 8px;

  color: #6f879b;

  background:
    rgba(255,255,255,.012);

  font-size: .61rem;

  line-height: 1.45;
}


/* ------------------------------------------------------------
   FLOATING LEGEND
   ------------------------------------------------------------ */

.giw-thematic-legend {
  position: absolute;

  right: 14px;
  bottom: 48px;

  z-index: 65;

  width: 245px;

  max-height: 310px;

  overflow-y: auto;

  padding: 11px;

  border:
    1px solid rgba(190,220,240,.14);

  border-radius: 13px;

  color: #c5d8e6;

  background:
    rgba(5,17,29,.90);

  backdrop-filter:
    blur(18px)
    saturate(130%);

  box-shadow:
    0 18px 55px
    rgba(0,0,0,.30);
}


.giw-thematic-legend-head {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 8px;

  margin-bottom: 9px;
}


.giw-thematic-legend-title {
  overflow: hidden;

  color: #e7f5fd;

  font-size: .71rem;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.giw-thematic-legend-close {
  width: 25px;
  height: 25px;

  cursor: pointer;

  border:
    1px solid rgba(180,210,240,.10);

  border-radius: 6px;

  color: #8399ac;

  background: transparent;
}


.giw-legend-subtitle {
  margin-bottom: 8px;

  color: #657d91;

  font-size: .59rem;
}


.giw-legend-items {
  display: grid;
  gap: 5px;
}


.giw-legend-row {
  display: grid;

  grid-template-columns:
    18px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 7px;

  font-size: .61rem;
}


.giw-legend-swatch {
  width: 18px;
  height: 10px;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius: 3px;
}


.giw-legend-label {
  overflow: hidden;

  color: #9eb4c5;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.giw-legend-value {
  color: #637d91;

  font-size: .57rem;
}


/* ------------------------------------------------------------
   THEMATIC MAP STATUS
   ------------------------------------------------------------ */

.giw-thematic-state {
  position: absolute;

  right: 14px;
  top: 58px;

  z-index: 67;

  display: none;

  padding: 6px 9px;

  border:
    1px solid rgba(69,212,255,.18);

  border-radius: 8px;

  color: #afefff;

  background:
    rgba(5,17,29,.83);

  backdrop-filter:
    blur(12px);

  font-size: .61rem;
}


.giw-thematic-state.is-visible {
  display: block;
}


/* ------------------------------------------------------------
   THEMATIC INSIGHT
   ------------------------------------------------------------ */

.giw-theme-insight {
  padding: 10px;

  border:
    1px solid rgba(69,212,255,.12);

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(69,212,255,.045),
      rgba(93,140,255,.018)
    );
}


.giw-theme-insight strong {
  display: block;

  margin-bottom: 4px;

  color: #c9f2ff;

  font-size: .69rem;
}


.giw-theme-insight span {
  color: #7891a5;

  font-size: .62rem;

  line-height: 1.45;
}


@media (max-width: 800px) {

  .giw-thematic-legend {
    width: 210px;
  }

}