/*
 * WebKarobar Trending Tickers — fully scoped CSS.
 * No theme, navigation, body, global links, or global headings are styled here.
 */
.wk-trending-stocks {
  --wk-blue: #084b84;
  --wk-blue-soft: #eef5fb;
  --wk-border: #e3eaf0;
  --wk-text: #17324a;
  --wk-muted: #6f8190;
  --wk-card: #ffffff;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}
.wk-trending-stocks *,
.wk-trending-stocks *::before,
.wk-trending-stocks *::after { box-sizing: border-box; }
.wk-trending-stocks__intro { margin: 0 0 28px; }
.wk-trending-stocks__eyebrow { display: block; margin: 0 0 7px; color: var(--wk-blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; }
.wk-trending-stocks__title { margin: 0; color: var(--wk-text); font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 650; line-height: 1.12; letter-spacing: -.025em; }
.wk-trending-stocks__subtitle { margin: 7px 0 0; color: var(--wk-muted); font-size: .96rem; line-height: 1.5; }
.wk-trending-stocks__section { margin: 0 0 32px; }
.wk-trending-stocks__section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.wk-trending-stocks__section-title { flex: 0 0 auto; margin: 0; color: var(--wk-text); font-size: .76rem; font-weight: 750; letter-spacing: .11em; line-height: 1.3; text-transform: uppercase; }
.wk-trending-stocks__section-line { flex: 1 1 auto; height: 1px; background: var(--wk-border); }
.wk-trending-stocks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wk-trending-stocks__empty { grid-column: 1 / -1; padding: 20px; border: 1px dashed var(--wk-border); border-radius: 14px; color: var(--wk-muted); text-align: center; }
.wk-trending-stocks .wk-ticker-card {
  position: relative;
  display: flex;
  min-height: 142px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 19px 20px 17px;
  border: 1px solid var(--wk-border);
  border-radius: 15px;
  background: var(--wk-card);
  color: var(--wk-text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(20, 48, 72, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wk-trending-stocks .wk-ticker-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: transparent; transition: background .18s ease; }
.wk-trending-stocks .wk-ticker-card:hover,
.wk-trending-stocks .wk-ticker-card:focus-visible { transform: translateY(-2px); border-color: #c8d9e7; box-shadow: 0 9px 24px rgba(20, 48, 72, .09); outline: none; }
.wk-trending-stocks .wk-ticker-card:hover::after,
.wk-trending-stocks .wk-ticker-card:focus-visible::after { background: var(--wk-blue); }
.wk-trending-stocks .wk-ticker-card--featured { background: linear-gradient(145deg, #fff, #f7fbff); border-color: #cddfed; }
.wk-trending-stocks .wk-ticker-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wk-trending-stocks .wk-ticker-card__ticker { color: var(--wk-blue); font-size: 1.2rem; font-weight: 800; letter-spacing: .025em; line-height: 1.2; }
.wk-trending-stocks .wk-ticker-card__direction { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem; font-weight: 800; line-height: 1; }
.wk-trending-stocks .wk-ticker-card__direction--up { color: #237a4a; background: #edf8f1; }
.wk-trending-stocks .wk-ticker-card__direction--down { color: #a04444; background: #fff1f1; }
.wk-trending-stocks .wk-ticker-card__company { display: block; margin: 9px 0 17px; color: var(--wk-muted); font-size: .92rem; line-height: 1.4; }
.wk-trending-stocks .wk-ticker-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wk-trending-stocks .wk-ticker-card__badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; background: var(--wk-blue-soft); color: var(--wk-blue); font-size: .7rem; font-weight: 750; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.wk-trending-stocks .wk-ticker-card__badge--hot,
.wk-trending-stocks .wk-ticker-card__badge--exploding { background: #fff4e8; color: #a85b12; }
.wk-trending-stocks .wk-ticker-card__badge--rising { background: #edf8f1; color: #237a4a; }
.wk-trending-stocks .wk-ticker-card__badge--watching { background: #f1f4f7; color: #647586; }
.wk-trending-stocks .wk-ticker-card__arrow { color: #81919e; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.wk-trending-stocks .wk-ticker-card:hover .wk-ticker-card__arrow { color: var(--wk-blue); }

.wk-stock-detail { width: 100%; margin: 0; padding: 38px 20px 56px; }
.wk-stock-detail__inner { width: min(820px, 100%); margin: 0 auto; }
.wk-stock-detail__eyebrow { margin: 0 0 9px; color: var(--wk-blue); font-size: 11px; font-weight: 750; letter-spacing: .14em; line-height: 1.2; }
.wk-stock-detail__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 23px; border-bottom: 1px solid var(--wk-border); }
.wk-stock-detail__ticker { color: var(--wk-text); font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.wk-stock-detail__company { margin-top: 8px; color: var(--wk-muted); font-size: .98rem; line-height: 1.45; }
.wk-stock-detail__badge { flex: 0 0 auto; margin-top: 5px; padding: 7px 11px; border-radius: 999px; background: var(--wk-blue-soft); color: var(--wk-blue); font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.wk-stock-detail__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.wk-stock-detail .wk-stat-card { min-height: 108px; padding: 17px; border: 1px solid var(--wk-border); border-radius: 13px; background: #fff; }
.wk-stock-detail .wk-stat-card--primary { border-color: #cddfed; background: #f7fbff; }
.wk-stock-detail .wk-stat-card span { display: block; color: var(--wk-muted); font-size: .76rem; line-height: 1.35; }
.wk-stock-detail .wk-stat-card strong { display: block; margin-top: 11px; color: var(--wk-text); font-size: 1.55rem; font-weight: 750; line-height: 1; }
.wk-stock-detail .wk-interest-change { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 17px 18px; border-radius: 13px; background: var(--wk-blue); color: #fff; }
.wk-stock-detail .wk-interest-change > div:first-child span { display: block; opacity: .78; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wk-stock-detail .wk-interest-change > div:first-child strong { display: block; margin-top: 4px; font-size: 1.25rem; line-height: 1; }
.wk-stock-detail .wk-interest-change__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 15px; font-size: .78rem; opacity: .9; }

@media (max-width: 760px) {
  .wk-trending-stocks__grid { grid-template-columns: 1fr; }
  .wk-stock-detail { padding: 28px 16px 42px; }
  .wk-stock-detail__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .wk-trending-stocks .wk-ticker-card { min-height: 132px; padding: 17px 17px 15px; }
  .wk-stock-detail__heading { align-items: flex-start; gap: 12px; }
  .wk-stock-detail__badge { font-size: .65rem; }
  .wk-stock-detail__stats { grid-template-columns: 1fr 1fr; }
  .wk-stock-detail .wk-interest-change { align-items: flex-start; flex-direction: column; }
  .wk-stock-detail .wk-interest-change__meta { justify-content: flex-start; }
}