/* /rsi/ page styles. Selector CSS lifted from /live-rates (lr-selector-*, lr-dropdown-*). */
:root {
  --navy: #0d213c;
  --navy-mid: #132a4a;
  --navy-light: #1a3558;
  --azure: #00b5e0;
  --azure-dim: rgba(0, 181, 224, 0.15);
  --azure-border: rgba(0, 181, 224, 0.25);
  --green: #25d366;
  --red: #ff6b6b;
  --yellow: #ffed00;
  --muted: rgba(255, 255, 255, 0.55);
  --border: rgba(0, 181, 224, 0.12);
}

/* ── HERO ── */
.lr-hero {
  background: linear-gradient(
    180deg,
    var(--navy) 0%,
    var(--navy-mid) 100%
  );
  padding: 9rem 1.5rem 1rem;
  position: relative;
  overflow: visible;
  z-index: 3;
}
.lr-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}
.lr-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(0, 181, 224, 0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.lr-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.lr-breadcrumb a:hover {
  color: var(--azure);
}
.lr-breadcrumb .sep {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0.1rem;
}
.lr-breadcrumb .current {
  color: #fff;
  font-weight: 500;
}

.lr-title {
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.5rem;
}
.lr-title .accent {
  color: var(--azure);
}

.lr-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 auto 2.5rem;
  max-width: 640px;
  line-height: 1.6;
}

/* ── SELECTOR CARD ── */
.lr-selector-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  max-width: 920px;
  margin: 0 auto 2rem;
  text-align: left;
}
.lr-selector-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 0.75rem;
  align-items: end;
}
.lr-selector-field {
  position: relative;
  min-width: 0;
}
.lr-selector-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: block;
}
.lr-selector-button {
  width: 100%;
  height: 50px;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.lr-selector-button:hover {
  border-color: var(--azure-border);
  background: var(--navy-light);
}
.lr-selector-button:focus-visible {
  outline: none;
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(0, 181, 224, 0.2);
}
.lr-selector-button .flag {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}
.lr-selector-button .code {
  font-weight: 700;
  margin-right: 0.4rem;
}
.lr-selector-button .name {
  color: var(--muted);
  font-weight: 400;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-selector-button .chevron {
  flex-shrink: 0;
  color: var(--muted);
}

.lr-swap {
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--azure);
  transition:
    transform 0.25s ease,
    border-color 0.2s,
    background 0.2s;
  align-self: end;
  margin-bottom: 3px;
}
.lr-swap:hover {
  transform: rotate(180deg);
  border-color: var(--azure);
  background: var(--azure-dim);
}
.lr-swap:focus-visible {
  outline: none;
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(0, 181, 224, 0.2);
}

/* ── DROPDOWN PANEL ── */
.lr-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  background: var(--navy-mid);
  border: 1px solid var(--azure-border);
  border-radius: 10px;
  max-height: 360px;
  display: none;
  flex-direction: column;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.lr-dropdown.open {
  display: flex;
}
.lr-dropdown-search {
  width: 100%;
  background: var(--navy);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  flex-shrink: 0;
}
.lr-dropdown-search::placeholder {
  color: var(--muted);
}
.lr-dropdown-list {
  overflow-y: auto;
  flex: 1;
}
.lr-dropdown-item {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.7rem 1rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: background 0.15s;
}
.lr-dropdown-item:hover,
.lr-dropdown-item.highlighted {
  background: rgba(0, 181, 224, 0.1);
}
.lr-dropdown-item.selected {
  background: rgba(0, 181, 224, 0.18);
}
.lr-dropdown-item .flag {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.lr-dropdown-item .code {
  font-weight: 700;
  min-width: 38px;
}
.lr-dropdown-item .name {
  color: var(--muted);
  font-size: 0.85rem;
}
.lr-dropdown-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.lr-dropdown-group {
  padding: 0.6rem 1rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azure);
}
.lr-dropdown-group + .lr-dropdown-group,
.lr-dropdown-item + .lr-dropdown-group {
  border-top: 1px solid var(--border);
  margin-top: 0.35rem;
  padding-top: 0.75rem;
}

/* ── CHART ── */
.chart-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-top: 2rem;
}
.lr-section:nth-of-type(even) .chart-card {
  background: var(--navy);
}
.lr-selector-field{min-width:0}
.lr-dropdown-item.disabled{opacity:.35;cursor:not-allowed}
.lr-selector-row .lr-selector-button .name{display:inline}
.rsi-controls{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap}
.rsi-controls .lr-selector-row{flex:1 1 420px}
.rsi-tf{display:flex;flex-direction:column}
.rsi-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--navy)}
.rsi-seg button{background:transparent;border:0;color:var(--muted);font:600 .95rem inherit;font-family:inherit;padding:.95rem 1.25rem;cursor:pointer;min-width:64px}
.rsi-seg button+button{border-left:1px solid var(--border)}
.rsi-seg button:hover{color:#fff}
.rsi-seg button[aria-pressed="true"]{background:var(--azure-dim);color:var(--azure)}
.rsi-seg button:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}
.rsi-main{background:var(--navy-mid);padding:.5rem 1.5rem 4rem}
.rsi-wrap{max-width:1100px;margin:0 auto}
.rsi-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}
.rsi-card{background:var(--navy);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.4rem;min-width:0}
.rsi-card h2{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.rsi-big{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.rsi-current-rate{font-size:2.2rem;overflow-wrap:anywhere}
.rsi-rate-retry{margin-top:.6rem;background:transparent;border:1px solid var(--azure);color:var(--azure);border-radius:6px;padding:.4rem .7rem;font:inherit;font-size:.8rem;cursor:pointer}
.rsi-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.rsi-pill{font-size:.75rem;font-weight:700;padding:.3rem .75rem;border-radius:99px;border:1px solid}
.rsi-pill.overbought{color:#ff8a8a;background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.4)}
.rsi-pill.oversold{color:var(--green);background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.4)}
.rsi-pill.neutral{color:#b8c2cf;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.rsi-sub{font-size:.9rem;color:var(--muted);margin-top:.6rem;font-variant-numeric:tabular-nums}
.rsi-live{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.06em}
.rsi-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);animation:rsi-pulse 1.6s infinite}
@keyframes rsi-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}100%{box-shadow:0 0 0 9px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.rsi-live::before{animation:none}.sk{animation:none!important}}
.rsi-ev{font-size:1.25rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.rsi-ev.none{color:var(--muted);font-weight:500}
.rsi-charts{position:relative;background:var(--navy);border:1px solid var(--border);border-radius:14px;padding:1rem 1rem .75rem}
.rsi-panel{position:relative;width:100%}
.rsi-panel--price{height:340px}
.rsi-panel--rsi{height:200px;margin-top:.25rem}
.rsi-panel canvas{display:block}
.rsi-charts.is-loading .rsi-panel{opacity:.35;transition:opacity .2s}
.rsi-charts.is-loading .sk-bar{display:block}
.sk-bar{display:none;position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--azure),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:sk 1.1s linear infinite;border-radius:3px}
@keyframes sk{from{background-position:-50% 0}to{background-position:150% 0}}
.rsi-legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--muted);padding:.5rem .25rem 0}
.rsi-legend i{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-right:.35rem;vertical-align:middle}
.rsi-legend .ob i{border-bottom:9px solid #ff6b6b}.rsi-legend .os i{border-bottom:9px solid #25d366}
.rsi-error{display:none;border:1px solid rgba(255,107,107,.4);background:rgba(255,107,107,.08);border-radius:14px;padding:1.5rem;text-align:center;margin-bottom:1.25rem}
.rsi-error.show{display:block}
.rsi-error p{color:#fff;margin:0 0 .75rem}
.rsi-error button{background:transparent;border:1px solid var(--azure);color:var(--azure);border-radius:6px;padding:.55rem 1.2rem;font:600 .85rem inherit;font-family:inherit;cursor:pointer}
.rsi-disc{font-size:.78rem;color:var(--muted);margin-top:.9rem}
.rsi-more{margin-top:1rem;font-size:.85rem}
.rsi-more a{color:var(--azure);text-decoration:none}
.is-hidden{display:none!important}
@media (min-width:761px) and (max-width:1050px){
 .rsi-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .lr-hero{padding:7rem 1rem 1rem}
 .rsi-cards{grid-template-columns:1fr}
 .lr-selector-card{padding:1.1rem}
 .lr-selector-row{grid-template-columns:1fr 44px 1fr;gap:.5rem}
 .lr-selector-button .name{display:none}
 .rsi-controls{gap:1rem}
 .rsi-seg{width:100%}.rsi-seg button{flex:1}
 .rsi-main{padding:.5rem 1rem 3rem}
 .rsi-panel--price{height:260px}.rsi-panel--rsi{height:180px}
}

/* ── Embedded in the client portal (/rsi/?embed=client) ── */
html.embed-client body{padding:0;margin:0;background:var(--navy-mid);min-height:0}
html.embed-client #site-nav,html.embed-client #site-ticker,html.embed-client #site-footer,
html.embed-client .whatsapp-float,html.embed-client .lr-breadcrumb,html.embed-client .lr-subtitle{display:none!important}
html.embed-client .lr-hero{padding:0 0 .5rem;background:transparent}
html.embed-client .lr-title{display:none}
html.embed-client .lr-selector-card{max-width:none;margin:0 0 .5rem}
html.embed-client .rsi-main{padding:.5rem 0 1rem}
html.embed-client .rsi-wrap{max-width:none}
@media (max-width:760px){
 html.embed-client .lr-selector-row{position:relative}
 html.embed-client .lr-selector-field{position:static}
 html.embed-client .lr-dropdown{left:0;right:0}
 html.embed-client .lr-dropdown-list{overflow-x:hidden}
}