/* ============ Trade Screen ============ */

#screen-trade {
    padding-bottom: 100px;
}

/* ---- Tab Content ---- */
.trade-tab-content {
    padding: 0;
    padding-bottom: 20px;
}

/* ---- Empty State ---- */
.trade-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

.trade-empty i {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.trade-empty p {
    margin: 4px 0;
    font-size: 13px;
}

/* ---- Trade Card (list item, matches .friend-card) ---- */


.trade-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.trade-card-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-color, #6c5ce7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
}

.trade-card-info {
    flex: 1;
    min-width: 0;
    margin-top: 2px;
}

.trade-card-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trade-card-time {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-top: 2px;
}

.trade-card-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.trade-card-status.pending {
    background: rgba(255, 200, 0, 0.15);
    color: #ffc800;
}

.trade-card-status.accepted {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.trade-card-status.rejected {
    background: rgba(255, 77, 109, 0.15);
    color: #ff4d6d;
}

.trade-card-status.cancelled {
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

/* ---- Items Preview (new grid layout) ---- */
.trade-items-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    margin-top: 12px;
}

.trade-items-side {
    width: 100%;
}

.trade-items-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    margin-bottom: 8px;
    font-weight: 700;
}

.trade-items-arrow {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-size: 16px;
    text-align: center;
    transform: rotate(90deg);
}

/* ---- Trade Actions (matches friend-action-btn pattern) ---- */
.trade-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.trade-action-btn {
    flex: 1;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Trade Request Action Overrides for 2 Column Compactness */
.trade-request-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.trade-request-delete-btn,
.trade-request-respond-btn {
    flex: 1;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.trade-action-btn:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.trade-action-btn:active {
    transform: scale(0.96);
}

.trade-action-btn.accept {
    background: #2ecc71;
    color: #fff;
}

.trade-action-btn.reject {
    background: rgba(255, 77, 109, 0.1);
    color: #ff4d6d;
    border: 1px solid rgba(255, 77, 109, 0.3);
}

.trade-action-btn.cancel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
}

/* ============ Trade Request Board ============ */

.trade-requests-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.trade-request-card {
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.trade-request-respond-btn {
    background: var(--primary-color, #6c5ce7);
    color: #fff;
}

.trade-request-delete-btn {
    background: rgba(255, 77, 109, 0.1);
    border: 1px solid rgba(255, 77, 109, 0.3);
    color: #ff4d6d;
}

.trade-request-respond-btn:hover,
.trade-request-delete-btn:hover {
    opacity: 0.85;
}

.trade-request-respond-btn:active,
.trade-request-delete-btn:active {
    transform: scale(0.96);
}

/* ============ Create Trade / Request Overlay ============ */
/* Matches guest-inventory-overlay pattern */

.trade-create-overlay {
    position: fixed;
    inset: 0;
    z-index: 4500;
    pointer-events: none;
}

.trade-create-overlay.active {
    pointer-events: all;
}

.trade-create-overlay .trade-create-page {
    position: absolute;
    inset: 0;
    background: var(--bg-color, #0f0f1a);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    scrollbar-width: none;
    padding: 0 16px 100px;
}

.trade-create-overlay .trade-create-page::-webkit-scrollbar {
    display: none;
}

.trade-create-overlay.active .trade-create-page {
    transform: translateY(0);
}

/* Header (matches guest-inv-header) */
.trade-create-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 -16px;
    background: var(--bg-color, #0f0f1a);
}

.trade-create-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section labels */
.trade-section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    margin-bottom: 10px;
    margin-top: 20px;
}

.trade-section-label:first-child {
    margin-top: 0;
}

/* ============ Steam-Style Trade Offer Panels ============ */

.trade-offer-panel {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 14px;
}

.trade-offer-panel-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.trade-offer-panel-header>span:first-child {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.trade-offer-hint {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
}

.trade-offer-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}



/* Exchange arrows between panels */
.trade-offer-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    color: var(--text-muted, rgba(255, 255, 255, 0.3));
    font-size: 18px;
    transform: rotate(90deg);
}

/* ---- Card picker: selection & locked overlays on .item-card ---- */
.item-card.trade-pick {
    cursor: pointer;
    transition: all 0.25s;
}

.item-card.trade-pick:hover {
    transform: translateY(-3px);
}

.item-card.trade-locked {
    opacity: 0.35;
    /* pointer-events: none removed to allow clicking for confirmation */
}

.item-card.trade-locked.locked-fav::before {
    content: '\f004';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 12px;
    color: var(--accent-color, #fd79a8);
    z-index: 5;
}

.item-card.trade-locked.locked-trade::before {
    content: '\f0ec';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 12px;
    color: #ffd32a;
    z-index: 5;
}

/* Submit button (uses .btn pattern) */
.trade-submit-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color, #6c5ce7), var(--accent-color, #fd79a8));
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.trade-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.trade-submit-btn:active {
    transform: translateY(0);
}

.trade-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Create request button */
.trade-create-request-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    border: 1px dashed var(--card-border, rgba(255, 255, 255, 0.1));
    color: var(--primary-light, #a29bfe);
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s;
}

.trade-create-request-btn:hover {
    border-color: var(--primary-color, #6c5ce7);
    background: rgba(108, 92, 231, 0.08);
}

.trade-create-request-btn:active {
    transform: scale(0.97);
}

/* My requests section title */
.trade-my-requests-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Search input (matches friends-search-input) */
.trade-search-cards-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #fff);
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.trade-search-cards-input:focus {
    border-color: var(--primary-color, #6c5ce7);
}

.trade-search-cards-input::placeholder {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

/* Message input (same style) */
.trade-message-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #fff);
    font-size: 13px;
    resize: none;
    outline: none;
    margin-top: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.trade-message-input:focus {
    border-color: var(--primary-color, #6c5ce7);
}

.trade-message-input::placeholder {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}