/* ==========================================
   TRADE BINDER MANAGER
========================================== */

.trade-hero{
    border-color:rgba(82,168,255,.28);
    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(66,211,146,.14),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            rgba(82,168,255,.13),
            rgba(37,44,60,.95) 55%,
            rgba(29,34,48,.98)
        );
}

.trade-hero-mark{
    border-color:rgba(82,168,255,.32);
    background:rgba(82,168,255,.1);
    color:#52a8ff;
    box-shadow:0 0 34px rgba(82,168,255,.13);
}

.wishlist-summary-icon.trade-cards{
    background:rgba(82,168,255,.12);
    color:#52a8ff;
}

.wishlist-summary-icon.trade-copies{
    background:rgba(124,92,252,.13);
    color:var(--primary-hover);
}

.wishlist-summary-icon.trade-available{
    background:rgba(66,211,146,.12);
    color:var(--success);
}

.wishlist-summary-icon.trade-extras{
    background:rgba(244,183,64,.12);
    color:var(--warning);
}

.trade-card-grid{
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
}

.trade-manager-card{
    --trade-status-color:var(--success);
}

.trade-manager-card.status-reserved{
    --trade-status-color:var(--warning);
}

.trade-manager-card.status-pending{
    --trade-status-color:#52a8ff;
}

.trade-manager-card:hover{
    border-color:color-mix(in srgb,var(--trade-status-color) 58%,var(--border));
}

.trade-status-badge{
    border-color:color-mix(in srgb,var(--trade-status-color) 45%,transparent);
    color:var(--trade-status-color);
}

.trade-owned-state{
    color:var(--success);
}

.trade-owned-state:not(.is-owned){
    color:var(--danger);
}

.trade-card-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid var(--border);
}

.trade-card-field{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.trade-card-field.wide{
    grid-column:1 / -1;
}

.trade-card-field > span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

.trade-card-field select,
.trade-card-field textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:9px;
    outline:none;
    background:rgba(15,17,23,.45);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    transition:var(--transition);
}

.trade-card-field select{
    height:36px;
    padding:0 8px;
}

.trade-card-field textarea{
    min-height:58px;
    padding:8px;
    line-height:1.45;
    resize:vertical;
}

.trade-card-field select:focus,
.trade-card-field textarea:focus{
    border-color:var(--trade-status-color);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--trade-status-color) 10%,transparent);
}

.trade-quantity-control{
    height:36px;
    display:grid;
    grid-template-columns:32px minmax(34px,1fr) 32px;
    align-items:center;
    gap:4px;
    padding:2px;
    border:1px solid var(--border);
    border-radius:9px;
    background:rgba(15,17,23,.45);
}

.trade-quantity-control button{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:7px;
    outline:none;
    background:rgba(82,168,255,.1);
    color:var(--text);
    font-family:inherit;
    font-size:17px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:var(--transition);
}

.trade-quantity-control button:hover,
.trade-quantity-control button:focus-visible{
    border-color:#52a8ff;
    background:rgba(82,168,255,.2);
    color:#78bcff;
}

.trade-quantity-control button:disabled{
    opacity:.38;
    cursor:not-allowed;
}

.trade-quantity-control strong{
    color:var(--text);
    font-size:13px;
    text-align:center;
}

.trade-save-state{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:9px;
    color:var(--text-light);
    font-size:13px;
}

.trade-save-state i{
    color:var(--success);
}

.trade-empty-state > i{
    background:rgba(82,168,255,.1);
    color:#52a8ff;
}

@media (max-width:560px){
    .trade-card-grid{
        grid-template-columns:1fr;
    }

    .trade-card-fields{
        grid-template-columns:1fr;
    }

    .trade-card-field.wide{
        grid-column:auto;
    }
}