/* Root Ticker Container */
.opw-ticker {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1200;
  background:#111;
  color:#e2e2e2;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  border-bottom:1px solid #2a2a2a;
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}

/* Tabs Row */
.opw-tabs-row {
  padding:2px 16px 0;
  background:linear-gradient(#151515,#101010);
}
.opw-tabs {
  position:relative;
  display:flex;
  gap:18px;
  align-items:flex-end;
}
.opw-tab {
  background:transparent;
  border:none;
  color:#b9b9b9;
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  padding:10px 0 6px;
  cursor:pointer;
  position:relative;
  transition:color .25s;
}
.opw-tab:hover { color:#fff; }
.opw-tab.active { color:#fff; }
.opw-tab-underline {
  position:absolute;
  bottom:0; left:0;
  height:2px;
  width:0;
  background:#fff;
  transform:translateX(0);
  transition:transform .35s ease,width .35s ease;
}

/* Prices Row */
.opw-prices-row {
  position:relative;
  height:42px;
  display:flex;
  align-items:stretch;
  background:#181818;
  border-top:1px solid #222;
  border-bottom:2px solid #539DCD; /* red thin line like screenshot bottom accent (adjust) */
  overflow:hidden;
  padding:0 0; /* no horizontal padding; viewport handles it */
}

/* Scrolling viewport & track */
.opw-track-viewport {
  flex:1 1 auto;
  overflow:hidden;
  position:relative;
  min-width:0;
}
.opw-track {
  display:flex;
  gap:52px; /* space between instruments */
  list-style:none;
  padding:0 16px 0 16px;
  margin:0;
  height:100%;
  align-items:center;
  will-change:transform;
  transition:transform .45s ease;
  /* reserve space for controls so last items not hidden */
  padding-right:180px;
}
@media (max-width:850px){
  .opw-track { gap:36px; padding-right:150px; }
}
@media (max-width:600px){
  .opw-track { gap:28px; padding-right:140px; }
}

/* Items */
.opw-item {
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
  font-weight:500;
  position:relative;
  padding:4px 0;
}
.opw-item .sym { font-weight:600; color:#fff; letter-spacing:.3px; }
.opw-item .price { color:#fff; font-variant-numeric: tabular-nums; }
.opw-item .chg.up { color:#3ecb69; }
.opw-item .chg.down { color:#ff5252; }

/* Flash animations */
.opw-item.flash-up { animation:opw-flash-up 1s ease; }
.opw-item.flash-down { animation:opw-flash-down 1s ease; }
@keyframes opw-flash-up { 0%{ background:#113a23; } 100%{ background:transparent; } }
@keyframes opw-flash-down { 0%{ background:#4a1616; } 100%{ background:transparent; } }

/* Control Buttons Cluster */
.opw-controls {
  position:absolute;
  top:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px 0 40px;
  background:linear-gradient(to right,rgba(24,24,24,0),#181818 42%,#181818);
  /* Prevent capturing drag on left part */
  z-index:40;
}
.opw-btn {
  background:#222;
  border:1px solid #333;
  color:#d9d9d9;
  width:32px;
  height:30px;
  font-size:13px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.opw-btn:hover { background:#2c2c2c; border-color:#444; color:#fff; }
.opw-btn:active { background:#343434; }
.opw-btn.spinning { animation:opw-spin .8s linear infinite; }
.opw-more {
  width:auto !important;
  padding:0 12px;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  color:#ffd27a !important;
  border-color:#5a4618 !important;
  background:linear-gradient(180deg,#2b2416,#1f1a10) !important;
  letter-spacing:.3px;
  white-space:nowrap;
}
.opw-more:hover {
  background:linear-gradient(180deg,#3a2f1e,#2b2416) !important;
  color:#ffe3a8 !important;
  border-color:#7a6325 !important;
}
@keyframes opw-spin { to { transform:rotate(360deg); } }

/* Maintain body offset so content below not covered */
body.has-opw-ticker { /* marker class set via JS */ }
body.has-opw-ticker { scroll-padding-top:60px; } /* helpful if you link-jump */

@media (max-width:760px){
  .opw-tab { font-size:12px; padding:8px 0 5px; }
  .opw-track { gap:30px; }
  .opw-btn { width:28px; height:26px; font-size:12px; }
  .opw-prices-row { height:38px; }
}

/* Optional subtle division line under tabs */
.opw-tabs-row:after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:#262626;
}

/* ===== Top Row Layout: Tabs + Contacts ===== */
.opw-tabs-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  padding:2px 16px 0;
  background:linear-gradient(#151515,#101010);
  position:relative;
}

.opw-contacts {
  display:flex;
  align-items:flex-end;
  gap:28px;
  padding:0 0 6px;
  font-size:12.5px;
  font-weight:500;
  color:#d2d2d2;
  line-height:1.2;
  position:relative;
  white-space:nowrap;
}

.opw-contact {
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  padding-left:14px;
}

/* vertical separator before each (except first) */
.opw-contact:not(:first-child)::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:16px;
  width:1px;
  background:#303030;
}

.opw-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8ab4ff;
  background:#1e1e1e;
  border:1px solid #2b2b2b;
  width:26px;
  height:26px;
  border-radius:6px;
  box-shadow:0 0 0 0 rgba(138,180,255,.35);
  transition:background .25s, color .25s, box-shadow .35s;
}

.opw-contact:hover .opw-icon,
.opw-contact:focus-within .opw-icon {
  background:#24364f;
  color:#a9cbff;
  box-shadow:0 0 0 3px rgba(138,180,255,.18);
}

.opw-contact-text,
.opw-contact-text.opw-link {
  color:#d8d8d8;
  text-decoration:none;
  transition:color .25s;
}

.opw-contact-text.opw-link:hover,
.opw-contact-text.opw-link:focus {
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Tweak underline so it sits under tabs only */
.opw-tabs-row .opw-tabs {
  flex:1 1 auto;
  min-width:0;
}
.opw-tabs-row .opw-contacts {
  flex:0 0 auto;
}

/* Responsive behaviors */
@media (max-width:1150px){
  .opw-contacts { gap:18px; }
  .opw-contact { padding-left:12px; }
}

@media (max-width:980px){
  /* hide address text but leave icon (space saving) */
  .opw-contact:first-child .opw-contact-text { display:none; }
  .opw-contact { gap:4px; }
}

@media (max-width:820px){
  /* stack contacts below tabs */
  .opw-tabs-row {
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:4px 14px 4px;
  }
  .opw-contacts {
    padding:2px 0 4px;
    border-top:1px solid #252525;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .opw-contact:first-child .opw-contact-text { display:inline; }
}

@media (max-width:560px){
  .opw-contact-text { display:none; }
  .opw-contact { padding-left:10px; }
  .opw-contact:not(:first-child)::before { height:20px; }
  .opw-icon { width:28px; height:28px; }
}