/* ==========================================================================
   ZNEXT - live markets + trading content
   Matches the existing ICO/crypto front-end palette (main.css :root tokens).
   ========================================================================== */

.markets {
    position: relative;
    padding: 60px 0 90px;
}

.markets__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

/* ------------------------------------------------------------ ticker tape */
.markets__tape {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(60, 18, 212, .18), rgba(69, 172, 171, .10));
    padding: 12px 0;
    margin-bottom: 34px;
}

.markets__tape-track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    animation: markets-tape 38s linear infinite;
}

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

@keyframes markets-tape {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .markets__tape-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 10px;
    }
}

.tape-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    font-family: var(--font-heading), sans-serif;
}

.tape-item__sym {
    color: var(--color-white);
    font-weight: 600;
    letter-spacing: .03em;
}

.tape-item__px {
    color: var(--color-default);
}

/* ----------------------------------------------------------------- panels */
.markets__panel {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .02);
    overflow: hidden;
    height: 100%;
}

.markets__panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.markets__panel-head h4 {
    margin: 0;
    color: var(--color-white);
    font-size: 20px;
}

.markets__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--color-default);
}

.markets__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f0b90b;
    flex: 0 0 auto;
}

.markets__status[data-state="live"] .markets__dot {
    background-color: #16c784;
    box-shadow: 0 0 0 4px rgba(22, 199, 132, .18);
}

.markets__status[data-state="down"] .markets__dot {
    background-color: #ea3943;
    box-shadow: 0 0 0 4px rgba(234, 57, 67, .18);
}

/* ----------------------------------------------------------------- tables */
.markets__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.markets__table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    margin: 0;
}

.markets__table th,
.markets__table td {
    padding: 12px 20px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 15px;
}

.markets__table th:first-child,
.markets__table td:first-child {
    text-align: left;
}

.markets__table thead th {
    color: var(--color-white);
    font-family: var(--font-heading), sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    background-color: rgba(255, 255, 255, .03);
}

.markets__table tbody tr:last-child td {
    border-bottom: 0;
}

.markets__table tbody tr:hover td {
    background-color: rgba(255, 255, 255, .03);
}

.markets__asset {
    display: flex;
    align-items: center;
    gap: 10px;
}

.markets__badge {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), var(--gradient-color-from));
    font-family: var(--font-heading), sans-serif;
}

.markets__asset-name {
    color: var(--color-white);
    font-weight: 600;
    line-height: 1.2;
}

.markets__asset-sub {
    display: block;
    font-size: 12px;
    color: var(--color-default);
}

.markets__price {
    color: var(--color-white);
    font-weight: 600;
}

.is-up {
    color: #16c784 !important;
}

.is-down {
    color: #ea3943 !important;
}

.markets__note {
    padding: 14px 20px;
    font-size: 13px;
    color: var(--color-default);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.markets__refresh {
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: var(--color-white);
    border-radius: 30px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.markets__refresh:hover {
    background-color: rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------- content / cards */
.trade-content {
    padding: 0 0 110px;
}

.trade-card {
    height: 100%;
    padding: 34px 30px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(160deg, rgba(60, 18, 212, .14), rgba(255, 255, 255, .015));
    transition: transform .25s ease, border-color .25s ease;
}

.trade-card:hover {
    transform: translateY(-6px);
    border-color: rgba(69, 172, 171, .45);
}

.trade-card__icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 26px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), var(--gradient-color-from));
    margin-bottom: 22px;
}

.trade-card h3 {
    color: var(--color-white);
    font-size: 24px;
    margin-bottom: 14px;
}

.trade-card p {
    margin-bottom: 18px;
}

.trade-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trade-card__list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    line-height: 1.6;
}

.trade-card__list li::before {
    content: "\f058"; /* fa-check-circle */
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--gradient-color-from);
}

.trade-note {
    margin-top: 40px;
    padding: 22px 26px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background-color: rgba(255, 255, 255, .02);
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .markets {
        padding: 40px 0 60px;
    }

    .markets__table th,
    .markets__table td {
        padding: 10px 14px;
        font-size: 14px;
    }

    .trade-card {
        padding: 28px 22px;
    }

    .trade-content {
        padding-bottom: 70px;
    }
}