/* RailRadar Junction Layout Fix 0.7.1.6.3.2 */

/*
 * The original direction area is a multi-column grid.
 * The complete junction UI must span that grid instead of inheriting
 * the width of a single legacy direction button.
 */
.rr-app-junction{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box;
  display:grid !important;
  gap:14px;
  margin-top:2px;
}

.rr-app-junction-info{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 15px;
  border:1px solid rgba(255,184,0,.32);
  border-radius:12px;
  background:rgba(255,184,0,.055);
}

.rr-app-junction-info strong{
  color:#ffcf4a;
  font-size:13px;
  line-height:1.35;
  white-space:nowrap;
}

.rr-app-junction-info span{
  color:#94a8b9;
  font-size:12px;
  line-height:1.35;
  text-align:right;
}

.rr-app-junction-grid{
  width:100%;
  min-width:0;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

.rr-app-junction .rr-junction-branch{
  width:100% !important;
  min-width:0 !important;
  min-height:96px !important;
  box-sizing:border-box;
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  row-gap:3px;
  padding:14px 16px !important;
  border:1px solid #294157 !important;
  border-radius:13px !important;
  background:#0b1926 !important;
  color:#e8f0f6 !important;
  text-align:left !important;
  overflow:visible !important;
  white-space:normal !important;
}

.rr-app-junction .rr-junction-arrow{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  color:#ffb800;
  font-size:21px;
  line-height:1;
}

.rr-app-junction .rr-junction-branch strong{
  grid-column:2;
  grid-row:1;
  min-width:0;
  color:#e8f0f6;
  font-size:15px;
  line-height:1.3;
  font-weight:750;
  overflow-wrap:anywhere;
  word-break:normal;
}

.rr-app-junction .rr-junction-branch[data-route-meta]:not([data-route-meta=""])::after{
  content:attr(data-route-meta) !important;
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  width:100%;
  min-width:0;
  margin:0 !important;
  color:#8fa4b7 !important;
  font-size:11px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
}

.rr-app-junction .rr-junction-branch:hover,
.rr-app-junction .rr-junction-branch.is-active{
  border-color:#ffb800 !important;
  background:rgba(255,184,0,.09) !important;
}

.rr-app-junction .rr-junction-branch.is-active strong{
  color:#ffcf4a;
}

.rr-app-junction .rr-junction-unknown{
  grid-column:1 / -1 !important;
  min-height:68px !important;
  grid-template-rows:auto !important;
}

.rr-app-junction .rr-junction-unknown .rr-junction-arrow{
  grid-row:1;
}

.rr-app-junction .rr-junction-unknown strong{
  grid-row:1;
}

/* Ensure the native parent grid allows the junction child to span fully. */
.direction:has(+ .rr-app-junction),
.direction + .rr-app-junction{
  min-width:0;
}

@media (max-width:760px){
  .rr-app-junction-info{
    display:grid;
    gap:4px;
  }

  .rr-app-junction-info strong{
    white-space:normal;
  }

  .rr-app-junction-info span{
    text-align:left;
  }

  .rr-app-junction-grid{
    grid-template-columns:1fr !important;
  }

  .rr-app-junction .rr-junction-unknown{
    grid-column:auto !important;
  }
}