/* ===== Route Overlay Modern (No-overlap, Stylish) ===== */
:root{
  --ro-font-size: var(--ro-font-size, 18px);
}

#routeOverlay{
  --ro-base: var(--ro-font-size, 18px);
  --ro-gap: max(8px, calc(var(--ro-base) * 0.42));
  --ro-pad-y: max(10px, calc(var(--ro-base) * 0.55));
  --ro-pad-x: max(12px, calc(var(--ro-base) * 0.65));

  min-width: 280px;
  max-width: min(520px, 46vw);
  padding: var(--ro-pad-y) var(--ro-pad-x);
  border-radius: 18px;

  /* Glass + subtle gradient */
  background: linear-gradient(135deg,
    rgba(12, 14, 22, var(--ro-bg-alpha, 0.62)),
    rgba(6, 8, 14, calc(var(--ro-bg-alpha, 0.62) * 0.92))
  );
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* keep draggable cursor/position from other css */
}

/* Gradient rim */
#routeOverlay::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,255,255,0.35), rgba(255,0,153,0.20), rgba(255,255,255,0.10));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

#routeOverlay .ro-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--ro-gap);
  margin-bottom: var(--ro-gap);
}

#routeOverlay .ro-title{
  font-size: calc(var(--ro-base) * 0.72) !important;
  font-weight: 900;
  letter-spacing: 0.22em;
  opacity: 0.92;
}

#routeOverlay .ro-progress{
  font-size: calc(var(--ro-base) * 0.72) !important;
  font-weight: 900;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

#routeOverlay .ro-main{
  display:flex;
  flex-direction:column;
  gap: var(--ro-gap);
}

/* NOW / FROM cards */
#routeOverlay .ro-block{
  position: relative;
  padding: calc(var(--ro-pad-y) * 0.85);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

#routeOverlay .ro-line1{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: calc(var(--ro-base) * 0.55);
  row-gap: calc(var(--ro-base) * 0.20);
}

#routeOverlay .ro-label{
  width: auto; /* override fixed width */
  font-size: calc(var(--ro-base) * 0.62) !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  color: rgba(255,255,255,0.95);
  background: linear-gradient(135deg, rgba(0,255,255,0.22), rgba(255,0,153,0.14));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

#routeOverlay .ro-value{
  font-size: calc(var(--ro-base) * 1.08) !important;
  font-weight: 900;
  line-height: var(--ro-line-height, 1.12);
  white-space: normal; /* allow wrap */
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

#routeOverlay .ro-line2{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(var(--ro-base) * 0.48);
  margin-top: calc(var(--ro-base) * 0.30);
  opacity: 0.95;
}

#routeOverlay .ro-flag{
  width: calc(var(--ro-base) * 1.55);
  height: calc(var(--ro-base) * 1.10);
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255,255,255,0.10);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

#routeOverlay .ro-country{
  font-size: calc(var(--ro-base) * 0.78) !important;
  font-weight: 800;
  white-space: normal; /* allow wrap */
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  opacity: 0.92;
}

/* History list: compact, line-clamped */
#routeOverlay .ro-history{
  display:flex;
  flex-direction:column;
  gap: calc(var(--ro-base) * 0.40);
  margin-top: calc(var(--ro-base) * 0.35);
}

#routeOverlay .ro-h-item{
  display:grid;
  grid-template-columns: 1.6em auto 1fr;
  align-items:start;
  gap: calc(var(--ro-base) * 0.45);
  opacity: 0.95;
}

#routeOverlay .ro-h-no{
  font-size: calc(var(--ro-base) * 0.60) !important;
  font-weight: 900;
  opacity: 0.65;
  text-align:right;
  padding-top: 0.15em;
}

#routeOverlay .ro-h-city{
  font-size: calc(var(--ro-base) * 0.86) !important;
  font-weight: 900;
  line-height: var(--ro-line-height, 1.12);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#routeOverlay .ro-h-country{
  font-size: calc(var(--ro-base) * 0.68) !important;
  opacity: 0.82;
  line-height: var(--ro-line-height, 1.12);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Small screen safety */
@media (max-width: 520px){
  #routeOverlay{ max-width: calc(100vw - 24px); }
}


/* ===== RouteOverlay theme override (デザイン反映) ===== */
#routeOverlay{
  background: color-mix(in srgb, var(--panel-bg, rgba(10,12,18,.78)) 92%, transparent) !important;
  border-color: var(--panel-border, rgba(255,255,255,.14)) !important;
  color: var(--text, rgba(255,255,255,.92)) !important;
}
#routeOverlay .ro-sub{ color: var(--muted, rgba(255,255,255,.72)) !important; }
#routeOverlay .ro-title{ color: var(--text, rgba(255,255,255,.92)) !important; }
#routeOverlay .ro-now{ color: var(--accent, var(--tm-accent, #00e5ff)) !important; }