@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Ad slot dimensions */
.ad-slot-wrapper {
  aspect-ratio: 468 / 60;
  width: 92%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

@media (max-width: 480px) {
  .ad-slot-wrapper { width: 98%; }
}

/* CTA button fills wrapper via absolute positioning */
.ad-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* CTA slot base */
.cta-slot {
  background-color: #0f172a;
  border: 2px dashed rgba(99, 102, 241, 0.4);
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: block;
}

.cta-slot:hover {
  background-color: #1e1b4b;
  border-color: #6366f1;
  border-style: solid;
}

/* Pulsing ring on CTA hover */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(99, 102, 241, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(99, 102, 241, 0);   }
}
.cta-slot:hover { animation: pulse-ring 1.2s ease-out infinite; }

/* Slot inner content */
.slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 3px;
  pointer-events: none;
}

.slot-title {
  font-size: clamp(10px, 2vw, 20px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.slot-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.slot-price {
  font-size: clamp(10px, 1.6vw, 16px);
  font-weight: 700;
  color: #818cf8;
}

.slot-price-unit {
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 500;
  color: #6366f1;
}

.slot-size {
  font-size: clamp(8px, 1vw, 11px);
  color: #475569;
  font-weight: 500;
}

.slot-cta {
  font-size: clamp(8px, 1vw, 11px);
  color: #94a3b8;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .slot-cta  { display: none; }
  .slot-size { display: none; }
}

/* Tabular numbers */
.ticker-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 800px 100%;
  animation: shimmer 1.8s infinite linear;
}