/*
 * Scrap Metal Live Prices — Frontend CSS  v4.0.0
 * Author: Viral
 * Includes: scrolling ticker + 2-col price grid + responsive
 */

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
.smp-ticker *,.smp-grid *,.smp-ticker *::before,.smp-grid *::before,
.smp-ticker *::after,.smp-grid *::after { box-sizing:border-box; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TICKER  [scrap_metal_ticker]
═══════════════════════════════════════════════════════════════════════════════ */

.smp-ticker {
  display: block;
  width: 100%;
  background: #111213;
  overflow: hidden;
  padding: 0;
  line-height: 1;
  /* Pause on hover */
  cursor: default;
}

.smp-ticker:hover .smp-ticker-track {
  animation-play-state: paused;
}

/* The scrolling track — contains items twice for seamless loop */
.smp-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: smp-scroll 45s linear infinite;
  /* Width is 200% because we duplicate content */
  will-change: transform;
}

/* Each half (original + duplicate) */
.smp-ticker-set {
  display: inline-flex;
  align-items: center;
}

@keyframes smp-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual ticker item */
.smp-ti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px 10px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Metal label  e.g. "KOPER" */
.smp-ti-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #8d9096;
}

/* Price e.g. "€5.48/kg" */
.smp-ti-price {
  font-size: 13px;
  font-weight: 600;
  color: #f0f0f0;
  letter-spacing: .02em;
}

/* 24h change */
.smp-ti-chg {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.smp-ti-up   { color: #3dd68c; }
.smp-ti-down { color: #ff6b6b; }

/* Separator dot between items */
.smp-ti-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  margin: 0 16px 0 4px;
  flex-shrink: 0;
}

/* Demo mode: subtle amber tint on ticker */
.smp-ticker[data-demo="1"] {
  background: #191610;
}
.smp-ticker[data-demo="1"] .smp-ti-label {
  color: #8a7d50;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRICE GRID  [scrap_metal_prices]
═══════════════════════════════════════════════════════════════════════════════ */

.smp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #2c2416;
}

.smp-cols-1 { grid-template-columns: 1fr; }

@media (max-width: 768px) {
  .smp-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Card ──────────────────────────────────────────────────────────────────────── */

.smp-card {
  background: #fff;
  border: 1px solid #e4ddd2;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, opacity .25s ease;
}
.smp-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.11); }
.smp-card--demo { border-color: #dece92; }

/* Banner ─────────────────────────────────────────────────────────────────────── */

.smp-card-banner {
  position: relative;
  height: 90px;
  background-size: cover;
  background-position: center;
}

.smp-card-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14,10,4,.62);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px;
  gap: 3px;
}

.smp-card-title {
  margin: 0; padding: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

.smp-card-subtitle {
  margin: 0; padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.68);
  letter-spacing: .03em;
}

.smp-demo-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 20px;
  background: rgba(255,210,80,.85);
  color: #5a3a00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  align-self: flex-start;
}

/* Table ─────────────────────────────────────────────────────────────────────── */

.smp-table {
  width: 100%;
  border-collapse: collapse;
}

.smp-table thead tr { background: #f5eddf; }

.smp-table thead th {
  padding: 7px 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8c7a60;
  border-bottom: 1px solid #e8d8bf;
  white-space: nowrap;
  text-align: left;
}

.smp-table tbody tr { border-bottom: 1px solid #f0e8da; transition: background .1s; }
.smp-table tbody tr:last-child { border-bottom: none; }
.smp-table tbody tr:hover { background: #faf6ef; }
.smp-table tbody td { padding: 9px 12px; vertical-align: top; }

.smp-col-type   { width: 53%; }
.smp-col-price  { width: 27%; }
.smp-col-change { width: 20%; text-align: right; }

.smp-grade-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1e1a12;
  line-height: 1.3;
}

.smp-grade-desc {
  display: block;
  font-size: 11px;
  color: #9a8e7e;
  margin-top: 2px;
}

.smp-price-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #b87a1e;
  white-space: nowrap;
}

.smp-price-unit {
  display: block;
  font-size: 10.5px;
  color: #a09080;
  margin-top: 1px;
}

.smp-change {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.smp-up   { color: #2a7d46; }
.smp-down { color: #c0392b; }
.smp-na   { color: #ccc; font-size: 12px; cursor: default; }

/* Footer ─────────────────────────────────────────────────────────────────────── */

.smp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #faf6f0;
  border-top: 1px solid #ede5d8;
}

.smp-updated { font-size: 10.5px; color: #b0a090; font-style: italic; }
.smp-timestamp { font-weight: 600; color: #9a8878; }
.smp-source { font-size: 10px; color: #c0b0a0; }
.smp-source a { color: #b08060; text-decoration: none; }
.smp-source a:hover { text-decoration: underline; }
.smp-source--demo { color: #c0a050; }

/* Demo banner ───────────────────────────────────────────────────────────────── */

.smp-demo-banner {
  background: #fff8e0;
  border: 1px solid #e8d070;
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #5a4400;
}

/* Loading ───────────────────────────────────────────────────────────────────── */

.smp-card.smp-refreshing { opacity: .6; pointer-events: none; }
.smp-card.smp-refreshing .smp-card-title::after {
  content: " ↻";
  display: inline-block;
  animation: smp-spin .9s linear infinite;
}
@keyframes smp-spin { to { transform: rotate(360deg); } }

/* Error ─────────────────────────────────────────────────────────────────────── */

.smp-error {
  background: #fdf0ef;
  border-left: 4px solid #c0392b;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 13px;
  color: #7b2020;
  border-radius: 0 4px 4px 0;
}

/* Print ─────────────────────────────────────────────────────────────────────── */

@media print {
  .smp-ticker { display: none; }
  .smp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .smp-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}