/* Workicambio v3 — Public Ticker CSS */

/* ── WIDGET SHELL ─────────────────────────────────────────────────────────── */
.wkc-widget {
  display: flex;
  align-items: stretch;
  border: var(--wkc-border-width, 1px) solid var(--wkc-border-color, #e0e0e0);
  border-radius: var(--wkc-border-radius, 6px);
  overflow: hidden;
  height: var(--wkc-height, 64px);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wkc-font, Arial, sans-serif);
  position: relative;
}

/* ── COLUMN: LOGO ─────────────────────────────────────────────────────────── */
.wkc-logo-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--wkc-logo-bg, #f5f5f5);
  border-right: var(--wkc-border-width, 1px) solid var(--wkc-border-color, #e0e0e0);
  padding: var(--wkc-logo-pad, 12px);
}

.wkc-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity .2s;
}
.wkc-logo-wrap:hover { opacity: .8; }

.wkc-logo-text-default {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--wkc-color-pair, #333);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.1;
}
.wkc-logo-text-default span {
  font-size: 9px;
  letter-spacing: 3px;
  opacity: .45;
}

.wkc-live-dot { display: none; }

/* ── COLUMN: TICKER ───────────────────────────────────────────────────────── */
.wkc-ticker-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wkc-ticker-bg, #ffffff);
  min-width: 0;
  position: relative;
}

/* ── DATE / TIME ──────────────────────────────────────────────────────────── */
.wkc-datetime {
  position: absolute;
  top: 4px;
  left: 12px;
  font-size: var(--wkc-fs-meta, 10px);
  color: var(--wkc-color-meta, #aaa);
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* ── TRACK ────────────────────────────────────────────────────────────────── */
.wkc-track {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.wkc-fade-l,
.wkc-fade-r {
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 10;
  pointer-events: none;
}
.wkc-fade-l { left:0;  background: linear-gradient(to right, var(--wkc-ticker-bg, #fff), transparent); }
.wkc-fade-r { right:0; background: linear-gradient(to left,  var(--wkc-ticker-bg, #fff), transparent); }

/* ── SCROLLING STRIP ──────────────────────────────────────────────────────── */
.wkc-scroll {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: wkc-marquee var(--wkc-speed, 35s) linear infinite;
  will-change: transform;
  /* ensure content is never clipped mid-character */
  padding-right: 64px;
}
.wkc-scroll:hover { animation-play-state: paused; }

@keyframes wkc-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── CURRENCY ITEM ────────────────────────────────────────────────────────── */
.wkc-item {
  display: inline-flex;
  align-items: center;          /* vertical center everything on the same line */
  gap: var(--wkc-item-gap, 6px);
  padding: 0 20px;              /* generous horizontal padding so numbers never clip */
  height: 100%;
  overflow: visible;            /* let flag overflow vertically, don't clip text */
  cursor: default;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;               /* never compress items */
}
.wkc-item:hover { background: rgba(0,0,0,.025); }

/* Flag: constrained to widget height, never stretches the row */
.wkc-item-flag {
  font-size: var(--wkc-fs-flag, 16px);
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* cap at widget height so large flags don't break layout */
  max-height: var(--wkc-height, 64px);
  overflow: hidden;
  /* custom gap between flag and currency code — overrides container gap */
  margin-right: var(--wkc-flag-gap, 4px);
}

/* Invisible span kept for JS compatibility */
.wkc-flag-gap { display: none; }

.wkc-item-pair  { font-size: var(--wkc-fs-pair, 12px);  font-weight: 700; color: var(--wkc-color-pair, #333); letter-spacing: .5px; }
.wkc-item-label {
  font-size: var(--wkc-fs-label, 12px);
  color: var(--wkc-color-label, #888);
  margin-right: var(--wkc-label-val-gap, 4px); /* gap between "Compra:" and the value */
}
.wkc-item-bid   { font-size: var(--wkc-fs-bid,  12px);  color: var(--wkc-color-bid,   #555); font-weight: 600; }
.wkc-item-offer { font-size: var(--wkc-fs-offer,12px);  color: var(--wkc-color-offer, #111); font-weight: 700; }

/* Separator between fields within item */
.wkc-sep {
  color: var(--wkc-sep-color, #ccc);
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
}

/* Separator between currency blocks */
.wkc-item-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 100%;
  color: var(--wkc-item-sep-color, #ddd);
  font-size: 12px;
  opacity: .6;
  flex-shrink: 0;
}

/* ── LOADING / FALLBACK ───────────────────────────────────────────────────── */
.wkc-loading {
  padding: 0 24px;
  font-size: 11px;
  color: #bbb;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wkc-fallback-msg {
  padding: 0 20px;
  font-size: 11px;
  color: #ccc;
  font-style: italic;
}

.wkc-spinner {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid #e0e0e0;
  border-top-color: #aaa;
  border-radius: 50%;
  animation: wkc-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes wkc-spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wkc-logo-col { padding: 8px; }
  .wkc-item     { padding: 0 10px; }
  .wkc-fade-l, .wkc-fade-r { width: 32px; }
}