/* ============================================================
   Infinite Marquee — marquee.css
   ============================================================ */

/* ---------- Keyframes (global, defined once) ---------- */
@keyframes imarquee-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes imarquee-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ---------- Wrapper ---------- */
.imarquee-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    /* fade edges */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 6%,
        black 94%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 6%,
        black 94%,
        transparent 100%
    );
}

/* ---------- Track ---------- */
.imarquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    /* animation applied inline via PHP/JS */
}

/* Pause on hover (opt-in via class .imarquee-pause-hover) */
.imarquee-pause-hover:hover .imarquee-track {
    animation-play-state: paused;
}

/* ---------- Word & separator ---------- */
.imarquee-word {
    display: inline-block;
    padding: 0 0.4em;
    line-height: 1;
    flex-shrink: 0;
    /* font / size / color applied inline */
}

.imarquee-sep {
    display: inline-block;
    padding: 0 0.15em;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

/* ============================================================
   ADMIN PAGE STYLES
   ============================================================ */
.imarquee-admin {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#imarquee-preview-wrap {
    margin: 20px 0 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

#imarquee-live {
    min-height: 100px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

/* Live track */
#imarquee-live-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.imarquee-table input[type="range"] {
    width: 220px;
    vertical-align: middle;
    margin-right: 10px;
    accent-color: #e8ff00;
}

.imarquee-table input[type="color"] {
    width: 50px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
}

.imarquee-table select {
    min-width: 180px;
}

/* Shortcode output box */
.imarquee-shortcode-box {
    background: #1e1e2e;
    color: #f0f0f8;
    border-radius: 8px;
    padding: 24px 28px;
    margin-top: 32px;
    max-width: 760px;
}

.imarquee-shortcode-box h2 {
    color: #e8ff00;
    font-size: 16px;
    margin-bottom: 8px;
}

.imarquee-shortcode-box h3 {
    color: #aaa;
    font-size: 13px;
}

.imarquee-code-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.imarquee-code-wrap code {
    background: #12121a;
    color: #e8ff00;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 13px;
    flex: 1;
    word-break: break-all;
    border: 1px solid #2a2a3a;
}

#imarquee-copy-btn {
    background: #e8ff00;
    color: #000;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

#imarquee-copy-btn:hover {
    background: #fff;
}

.imarquee-shortcode-box .widefat {
    background: #12121a;
    color: #ccc;
    border: 1px solid #2a2a3a;
    margin-top: 10px;
}

.imarquee-shortcode-box .widefat th {
    color: #e8ff00;
    background: #1a1a2a;
}

.imarquee-shortcode-box .widefat td code {
    background: #2a2a3a;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

.imarquee-shortcode-box .widefat.striped tbody tr:nth-child(odd) td {
    background: #16162a;
}