/* themes/xgate/assets/css/prod-mimosa.css */
/* Scoped Tier 3 CSS for Mimosa product page */

.mimosa-visual {
  padding: 30px;
  min-height: 540px;
}
.radio-scene {
  border-radius: 28px;
  min-height: 392px;
  background:
    linear-gradient(180deg, rgba(7, 12, 28, .38), rgba(7, 12, 28, .88)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80') center/cover;
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  padding: 22px;
}
.radio-map {
  position: relative;
  height: 348px;
  border-radius: 24px;
  background: rgba(5, 9, 22, .72);
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
}
.tower {
  position: absolute;
  width: 122px;
  text-align: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
}
.tower strong {
  display: block;
  font-size: 13px;
  color: #fff;
}
.tower span {
  display: block;
  color: var(--muted2);
  font-size: 11px;
  margin-top: 4px;
}
.tower.core {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(255, 154, 82, .24), rgba(255, 102, 0, .08));
  border-color: rgba(255, 102, 0, .25);
}
.tower.a { left: 8%; top: 13%; }
.tower.b { right: 8%; top: 13%; }
.tower.c { left: 8%; bottom: 14%; }
.tower.d { right: 8%; bottom: 14%; }
.tower.e { left: 50%; bottom: 7%; transform: translateX(-50%); }

.link {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 102, 0, .9), rgba(90, 174, 255, .42));
  transform-origin: left center;
  left: 50%;
  top: 42%;
  opacity: .8;
  box-shadow: 0 0 16px rgba(255, 102, 0, .35);
}
.l1 { width: 315px; transform: rotate(-150deg); }
.l2 { width: 315px; transform: rotate(-30deg); }
.l3 { width: 315px; transform: rotate(145deg); }
.l4 { width: 315px; transform: rotate(35deg); }
.l5 { width: 220px; transform: rotate(90deg); }

@media(max-width: 880px) {
  .tower {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 10px auto;
  }
  .link {
    display: none;
  }
  .radio-map {
    height: auto;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
  }
}