/* ─── MortgageLab Ticker Tape – Frontend Styles ──────────── */

/* ─── Base Ticker Container ───────────────────────────────── */
.mltt-ticker {
    width: 100%;
    overflow: hidden;
    background: var(--mltt-bg, #A779E6);
    color: var(--mltt-color, #ffffff);
    font-family: var(--mltt-font, inherit);
    font-size: var(--mltt-size, 14px);
    font-weight: var(--mltt-weight, 400);
    height: var(--mltt-height, 40px);
    padding: var(--mltt-padding, 8px 0);
    opacity: var(--mltt-opacity, 1);
    z-index: var(--mltt-z, 100);
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
}

/* ─── Fixed Positions ─────────────────────────────────────── */
.mltt-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.mltt-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

/* ─── Borders ─────────────────────────────────────────────── */
.mltt-border-top {
    border-top: 2px solid var(--mltt-border-color, #333);
}

.mltt-border-bottom {
    border-bottom: 2px solid var(--mltt-border-color, #333);
}

/* ─── Scrolling Track ─────────────────────────────────────── */
.mltt-ticker-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: mltt-scroll 20s linear infinite;
}

/* Reverse direction */
.mltt-ticker[data-direction="right"] .mltt-ticker-track {
    animation-direction: reverse;
}

/* Pause on hover */
.mltt-ticker[data-pause-hover="1"]:hover .mltt-ticker-track {
    animation-play-state: paused;
}

/* Paused when off-screen (set by JS) */
.mltt-ticker.mltt-paused .mltt-ticker-track {
    animation-play-state: paused;
}

/* ─── Scroll Animation ────────────────────────────────────── */
@keyframes mltt-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ─── Content Blocks ──────────────────────────────────────── */
/* Two identical blocks sit side-by-side. The animation shifts
   by exactly 50% (one block), creating a seamless infinite loop.
   Each block is padded on the right so there's a visible gap
   between the end of items and the start of the next cycle. */
.mltt-ticker-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 4vw; /* breathing room between loop cycles */
}

/* ─── Items ───────────────────────────────────────────────── */
.mltt-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.mltt-item a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.mltt-item a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ─── Icon ────────────────────────────────────────────────── */
.mltt-icon {
    flex-shrink: 0;
}

/* ─── Separator ───────────────────────────────────────────── */
.mltt-separator {
    color: var(--mltt-sep-color, inherit);
    padding: 0 8px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ─── Spacer ─────────────────────────────────────────────── */
.mltt-spacer {
    display: inline-block;
    flex-shrink: 0;
}

/* ─── Neon Glow Effect ────────────────────────────────────── */
.mltt-neon-glow .mltt-item,
.mltt-neon-glow .mltt-item a {
    text-shadow:
        0 0 7px var(--mltt-color, #00d5ff),
        0 0 15px var(--mltt-color, #00d5ff),
        0 0 30px var(--mltt-color, #00d5ff);
}

.mltt-neon-glow .mltt-separator {
    text-shadow:
        0 0 5px var(--mltt-sep-color, #00d5ff),
        0 0 10px var(--mltt-sep-color, #00d5ff);
}

/* ─── Accessibility: Reduced Motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mltt-ticker-track {
        animation: none !important;
        overflow-x: auto;
    }
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .mltt-ticker {
        font-size: calc(var(--mltt-size, 14px) * 0.85);
    }
}

@media (max-width: 480px) {
    .mltt-ticker {
        font-size: calc(var(--mltt-size, 14px) * 0.75);
    }
}