.rr-traffic{
  --rrt-card:#ffffff;
  --rrt-text:#172033;
  --rrt-muted:#5d6a7e;
  --rrt-brand:#c71c22;
  --rrt-brand-dark:#9f151a;
  --rrt-brand-soft:#fff2f3;
  --rrt-olive:#789629;
  --rrt-line:rgba(23,32,51,.09);
  --rrt-shadow:0 22px 56px -34px rgba(23,32,51,.34);
  max-width:1100px;
  margin:24px auto 38px;
  padding:0 16px;
  color:var(--rrt-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.rr-traffic,.rr-traffic *{box-sizing:border-box}
.rr-traffic__hero,.rr-traffic__mapcard{
  position:relative;
  background:var(--rrt-card);
  border:1px solid var(--rrt-line);
  border-radius:22px;
  box-shadow:var(--rrt-shadow);
  overflow:hidden;
}
.rr-traffic__hero::before,.rr-traffic__mapcard::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:linear-gradient(180deg,#7d9b2d,#a8ba52);
}
.rr-traffic__hero{
  padding:24px 26px 21px 30px;
  margin-bottom:18px;
  background:linear-gradient(135deg,#ffffff 0%,#fafbfc 55%,#f5f8fa 100%);
}
.rr-traffic__hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(275px,.65fr);
  gap:24px;
  align-items:stretch;
}
.rr-traffic__hero-main{min-width:0}
.rr-traffic__brand{display:flex;align-items:flex-start;gap:20px}
.rr-traffic__logo{
  width:176px;
  height:112px;
  max-width:34%;
  object-fit:contain;
  object-position:center;
  display:block;
  flex:0 0 auto;
  mix-blend-mode:multiply;
}
.rr-traffic__heading{min-width:0;padding-top:3px}
.rr-traffic__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(199,28,34,.17);
  color:var(--rrt-brand-dark);
  font-size:11px;
  font-weight:900;
  letter-spacing:.075em;
  box-shadow:0 6px 18px -14px rgba(199,28,34,.55);
}
.rr-traffic__eyebrow i{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.11)}
.rr-traffic__heading h2{
  margin:0;
  color:#111a2c;
  font-size:clamp(30px,4.2vw,44px);
  line-height:1.04;
  font-weight:950;
  letter-spacing:-.035em;
}
.rr-traffic__lead{
  margin:9px 0 0;
  color:#29364d;
  font-size:16px;
  line-height:1.5;
  font-weight:800;
}
.rr-traffic__introcopy{
  margin:6px 0 0;
  color:var(--rrt-muted);
  font-size:14.5px;
  line-height:1.55;
  font-weight:600;
}
.rr-traffic__statusbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:20px;
}
.rr-traffic__live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff6f7,#fff0f1);
  border:1px solid rgba(199,28,34,.24);
  color:var(--rrt-brand-dark);
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 20px -16px rgba(199,28,34,.6);
}
.rr-traffic__pulse{
  width:9px;height:9px;border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.45);
  animation:rrtPulse 1.9s infinite;
}
@keyframes rrtPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.rr-traffic__time{font-size:13px;color:#526078;font-weight:800}
.rr-traffic__legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:16px;
  padding:11px 14px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(23,32,51,.07);
  box-shadow:0 10px 24px -22px rgba(23,32,51,.55);
  color:#243047;
  font-size:13px;
  line-height:1.3;
  font-weight:750;
}
.rr-traffic__legend span{display:inline-flex;align-items:center;gap:6px}
.rr-traffic__dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 11px;box-shadow:0 0 0 3px rgba(0,0,0,.025)}
.rr-traffic__dot--green{background:#16a34a}.rr-traffic__dot--orange{background:#f59e0b}.rr-traffic__dot--red{background:#ef4444}.rr-traffic__dot--bordo{background:#8b001f}

.rr-traffic__panel{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(155deg,#172338 0%,#253753 100%);
  color:#fff;
  box-shadow:0 22px 40px -30px rgba(16,24,40,.9);
  overflow:hidden;
}
.rr-traffic__panel-top{display:flex;flex-direction:column;gap:9px}
.rr-traffic__panel-kicker{font-size:12px;font-weight:950;letter-spacing:.08em;color:#fff}
.rr-traffic__panel-ok{display:inline-flex;align-items:center;gap:8px;color:#dce9f8;font-size:13px;font-weight:750}
.rr-traffic__panel-ok i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.13)}
.rr-traffic__panel-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.rr-traffic__panel-info>div{padding:12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.rr-traffic__panel-label{display:block;color:#aebfd6;font-size:11px;font-weight:750;margin-bottom:4px}
.rr-traffic__panel-info strong{display:block;color:#fff;font-size:13px;line-height:1.35;font-weight:850}
.rr-traffic__panel-actions{display:grid;gap:8px;margin-top:14px}
.rr-traffic__action{
  appearance:none;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:#fff;
  padding:10px 12px;
  cursor:pointer;
  font:800 13px/1.2 inherit;
  text-align:left;
  transition:transform .14s ease,background-color .18s ease,border-color .18s ease;
}
.rr-traffic__action span{display:inline-block;min-width:20px;text-align:center;margin-right:3px;font-size:15px}
.rr-traffic__action:hover:not(:disabled){transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.rr-traffic__action--primary{background:var(--rrt-brand);border-color:var(--rrt-brand);box-shadow:0 10px 22px -16px rgba(199,28,34,.85)}
.rr-traffic__action--primary:hover:not(:disabled){background:#df2229;border-color:#df2229}
.rr-traffic__action:disabled{opacity:.48;cursor:wait}
.rr-traffic__panel-note{margin:auto 0 0;padding-top:14px;color:#afc0d7;font-size:11px;line-height:1.45}

.rr-traffic__locations{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(23,32,51,.08);
}
.rr-traffic__location{
  appearance:none;
  position:relative;
  border:1px solid rgba(23,32,51,.10);
  border-radius:13px;
  background:#fff;
  color:#263349;
  min-height:42px;
  padding:10px 15px 10px 22px;
  cursor:pointer;
  font:850 13.5px/1.2 inherit;
  white-space:nowrap;
  box-shadow:0 7px 18px -17px rgba(23,32,51,.65);
  transition:transform .14s ease,background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.rr-traffic__location::before{
  content:"";
  position:absolute;
  left:9px;top:9px;bottom:9px;
  width:4px;border-radius:999px;
  background:#46546a;
}
.rr-traffic__location:hover:not(:disabled){transform:translateY(-1px);background:#fff6f7;border-color:rgba(199,28,34,.28);color:var(--rrt-brand-dark)}
.rr-traffic__location.is-active{
  background:linear-gradient(180deg,#d92329 0%,#bd171d 100%);
  color:#fff;
  border-color:#b9151b;
  box-shadow:0 10px 22px -15px rgba(199,28,34,.75);
}
.rr-traffic__location.is-active::before{background:#fff}
.rr-traffic__location:disabled{opacity:.52;cursor:wait}
.rr-traffic__location:focus-visible,.rr-traffic__action:focus-visible,.rr-traffic__error button:focus-visible{outline:3px solid rgba(199,28,34,.24);outline-offset:2px}

.rr-traffic__mapcard{padding:16px 16px 13px 21px;background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
.rr-traffic__mapwrap{
  position:relative;
  min-height:590px;
  border-radius:18px;
  overflow:hidden;
  background:#e8eef3;
  border:1px solid rgba(23,32,51,.07);
  isolation:isolate;
}
.rr-traffic__map{width:100%;height:min(72vh,780px);min-height:590px;background:#e8eef3}
.rr-traffic__maptoolbar{
  position:absolute;
  z-index:5;
  top:13px;left:13px;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:calc(100% - 26px);
  padding:8px 11px;
  border:1px solid rgba(23,32,51,.08);
  border-radius:14px;
  background:rgba(255,255,255,.95);
  box-shadow:0 12px 28px -20px rgba(23,32,51,.62);
  backdrop-filter:blur(9px);
}
.rr-traffic__switchrow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850;color:#222}
.rr-traffic__toolbar-text{font-size:12.5px;color:#5b687d;font-weight:750}
.rr-traffic__switch{appearance:none;width:42px;height:23px;border:0;border-radius:999px;background:#cfd4da;position:relative;cursor:pointer;transition:background .18s ease}
.rr-traffic__switch::after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.23);transition:transform .18s ease}
.rr-traffic__switch:checked{background:#22c55e}.rr-traffic__switch:checked::after{transform:translateX(19px)}.rr-traffic__switch:disabled{cursor:wait;opacity:.58}
.rr-traffic__loader{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:linear-gradient(145deg,#f6f8fa,#edf1f4);color:#475467;font-size:14px;font-weight:750}
.rr-traffic__loader.is-hidden{display:none}
.rr-traffic__spinner{width:32px;height:32px;border-radius:50%;border:3px solid rgba(17,24,39,.12);border-top-color:var(--rrt-brand);animation:rrtSpin .8s linear infinite}
@keyframes rrtSpin{to{transform:rotate(360deg)}}
.rr-traffic__error{position:absolute;z-index:7;inset:0;padding:28px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:rgba(255,255,255,.97);color:#344054}
.rr-traffic__error[hidden]{display:none}.rr-traffic__error strong{font-size:18px;color:#1d2939;margin-bottom:6px}.rr-traffic__error span{font-size:14px;color:#667085;margin-bottom:15px}.rr-traffic__error button{appearance:none;border:0;border-radius:12px;padding:10px 15px;background:var(--rrt-brand);color:#fff;font:850 14px/1.2 inherit;cursor:pointer}.rr-traffic__error button:hover{background:var(--rrt-brand-dark)}
.rr-traffic__footer{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:12px 3px 0;color:#667085;font-size:12px;line-height:1.45}.rr-traffic__footer a{color:var(--rrt-brand);font-weight:850;text-decoration:none}.rr-traffic__footer a:hover{text-decoration:underline}

@media (max-width:930px){
  .rr-traffic__hero-grid{grid-template-columns:1fr}
  .rr-traffic__panel{min-height:auto}
  .rr-traffic__panel-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rr-traffic__panel-note{margin-top:12px}
}
@media (max-width:700px){
  .rr-traffic{padding:0 10px;margin-top:18px}
  .rr-traffic__hero{padding:18px 14px 16px 20px}
  .rr-traffic__hero-grid{gap:16px}
  .rr-traffic__brand{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .rr-traffic__logo{width:190px;height:105px;max-width:none}
  .rr-traffic__heading h2{font-size:29px}
  .rr-traffic__lead{font-size:14.5px}
  .rr-traffic__introcopy{font-size:13.5px}
  .rr-traffic__statusbar{justify-content:center}
  .rr-traffic__legend{justify-content:center;gap:7px 12px}
  .rr-traffic__panel{padding:16px}
  .rr-traffic__panel-actions{grid-template-columns:1fr}
  .rr-traffic__locations{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-bottom:5px;
  }
  .rr-traffic__location{flex:0 0 auto}
  .rr-traffic__mapcard{padding:10px 10px 10px 15px}
  .rr-traffic__mapwrap{min-height:520px}
  .rr-traffic__map{height:66vh;min-height:520px}
  .rr-traffic__maptoolbar{top:auto;bottom:12px;left:12px;right:12px;max-width:none;justify-content:space-between}
  .rr-traffic__toolbar-text{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rr-traffic__footer{font-size:11.5px}
}
@media (max-width:390px){.rr-traffic__map{height:62vh}.rr-traffic__panel-info{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rr-traffic__pulse,.rr-traffic__spinner{animation:none}.rr-traffic__location,.rr-traffic__action{transition:none}}