/*
   Cross exchange rehberi.

   Düzen ve renk dili /guide/drops ile /info/pus panellerinden alınmıştır:
   solda takas listesi, sağda seçili takasın kuponu ve ödülleri.
*/

.cx {
    --cx-shell: #1d1b16;
    --cx-side: #2e2921;
    --cx-content: #27231c;
    --cx-card: #353027;
    --cx-line: #3b362e;
    --cx-line-soft: #403b31;
    --cx-text: #e4e4e4;
    --cx-muted: #a09a90;
    --cx-gold: #c0a661;
}

/* ---------- Filtreler ---------- */

.cx-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    background: var(--cx-side);
    border: 1px solid var(--cx-line);
    border-radius: 8px;
}

.cx-field {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: .3rem;
}

.cx-label {
    margin: 0;
    color: var(--cx-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cx-input {
    width: 100%;
    padding: .5rem .7rem;
    color: var(--cx-text);
    font-size: .9rem;
    background: var(--cx-shell);
    border: 1px solid var(--cx-line);
    border-radius: 6px;
    outline: none;
}

.cx-input:focus {
    border-color: var(--cx-gold);
}

.cx-input::placeholder {
    color: #807a6e;
}

.cx-clear {
    padding: .5rem .9rem;
    color: var(--cx-muted);
    font-size: .85rem;
    background: transparent;
    border: 1px solid var(--cx-line);
    border-radius: 6px;
    cursor: pointer;
}

.cx-clear:hover {
    color: var(--cx-text);
    border-color: var(--cx-gold);
}

/* ---------- Durumlar ---------- */

.cx-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--cx-muted);
    font-size: .9rem;
    background: var(--cx-shell);
    border: 1px solid var(--cx-line);
    border-radius: 8px;
}

.cx-loading {
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .9rem;
    margin-bottom: .75rem;
    color: var(--cx-muted);
    font-size: .85rem;
    background: var(--cx-side);
    border: 1px solid var(--cx-line);
    border-radius: 6px;
}

.cx-dim {
    opacity: .35;
    pointer-events: none;
}

.cx-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--cx-line);
    border-top-color: var(--cx-gold);
    border-radius: 50%;
    animation: cx-spin .7s linear infinite;
}

@keyframes cx-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Panel: sol liste + sağ içerik ---------- */

.cx-panel {
    display: flex;
    height: 70vh;
    background: var(--cx-shell);
    border: 1px solid var(--cx-line);
    border-radius: 8px;
    overflow: hidden;
}

.cx-side {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 290px;
    background: var(--cx-side);
    border-right: 1px solid var(--cx-line);
    overflow-y: auto;
}

.cx-side-head {
    padding: .6rem 1rem;
    color: var(--cx-muted);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cx-line);
}

.cx-tab {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem 1rem;
    color: #d4d4d4;
    font-size: .85rem;
    text-align: left;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background .2s ease;
}

.cx-tab:hover {
    background: var(--cx-line);
}

.cx-tab.is-active {
    background: #4f493e;
    color: #fff;
}

/*
 * İkon dokusu 64x64 dosya ama görsel yalnızca 45x45'lik bölümde (oyundaki UV
 * dikdörtgeni 45.0f/64.0f). Dokuyu 64/45 oranında büyütüp sol üste yaslayınca
 * kare tam o bölgeyi gösterir: kenar * 64/45.
 */
.cx-tab-icon {
    width: 26px;
    height: 26px;
    flex: none;
    background-size: 37px 37px;
    background-position: top left;
    background-repeat: no-repeat;
    border-radius: 4px;
}

.cx-tab-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.cx-tab-name,
.cx-tab-origin {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-tab-origin {
    color: var(--cx-muted);
    font-size: .7rem;
}

.cx-tab-count {
    flex: none;
    padding: .05rem .4rem;
    color: var(--cx-muted);
    font-size: .72rem;
    background: rgba(0, 0, 0, .25);
    border-radius: 20px;
}

.cx-content {
    flex: 1;
    padding: 1rem;
    background: var(--cx-content);
    overflow-y: auto;
}

.cx-content-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding-bottom: .7rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cx-line);
}

.cx-title {
    margin: 0;
    color: var(--cx-text);
    font-size: 1rem;
    font-weight: 700;
}

.cx-count {
    margin-left: auto;
    padding: .1rem .5rem;
    color: var(--cx-gold);
    font-size: .72rem;
    background: rgba(192, 166, 97, .12);
    border-radius: 20px;
}

/* ---------- Takas akışı: 1 kupon → 1 ödül ---------- */

.cx-flow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .8rem;
    margin-bottom: 1.2rem;
    background: var(--cx-shell);
    border: 1px solid var(--cx-line-soft);
    border-radius: 8px;
}

.cx-flow-step {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    background: var(--cx-card);
    border: 1px solid var(--cx-line-soft);
    border-radius: 8px;
}

/* Ödül tarafı vurgulu: takasın sonucu burası. */
.cx-flow-step--reward {
    background: rgba(192, 166, 97, .08);
    border-color: rgba(192, 166, 97, .45);
}

.cx-flow-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cx-flow-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.cx-flow-name {
    color: var(--cx-text);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

.cx-flow-note {
    color: var(--cx-muted);
    font-size: .72rem;
}

.cx-flow-arrow {
    display: flex;
    flex: none;
    align-items: center;
    color: var(--cx-gold);
    font-size: 1.25rem;
}

/* ---------- Ödüller ---------- */

.cx-rewards-head {
    margin-bottom: .6rem;
    color: var(--cx-gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .7rem;
}

.cx-reward {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem;
    background: var(--cx-card);
    border: 1px solid var(--cx-line-soft);
    border-radius: 8px;
    transition: border-color .2s ease, background .2s ease;
}

.cx-reward:hover {
    background: rgba(192, 166, 97, .08);
    border-color: var(--cx-gold);
}

.cx-icon {
    width: 33px;
    height: 33px;
    flex: none;
    background-size: 47px 47px;
    background-position: top left;
    background-repeat: no-repeat;
    border-radius: 4px;
    cursor: help;
}

.cx-reward-meta {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}

.cx-reward-name {
    display: block;
    overflow: hidden;
    color: var(--cx-text);
    font-size: .82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-reward-note {
    color: var(--cx-muted);
    font-size: .72rem;
}

/*
 * Seçim işareti: ödüllerden yalnızca birinin alınabildiğini anlatıyor.
 * Salt görsel — gerçek seçim oyun içinde yapılıyor, burada tıklanmıyor.
 */
.cx-pick {
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: 13px;
    height: 13px;
    border: 2px solid var(--cx-line-soft);
    border-radius: 50%;
}

.cx-reward:hover .cx-pick {
    border-color: var(--cx-gold);
    box-shadow: inset 0 0 0 3px var(--cx-gold);
}

/* Seçenekli takaslarda ödüller "veya" ile ayrılıyor. */
.cx-grid.is-choice .cx-reward {
    padding-right: 1.6rem;
}

@media (max-width: 992px) {
    .cx-field {
        flex: 1 1 100%;
    }

    .cx-panel {
        flex-direction: column;
        height: auto;
    }

    .cx-side {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--cx-line);
    }

    .cx-flow-arrow {
        justify-content: center;
        width: 100%;
        transform: rotate(90deg);
    }

    .cx-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cx-tab,
    .cx-reward,
    .cx-spinner {
        transition: none;
        animation: none;
    }
}