/* Zwiększenie szerokości modali informacyjnych na stronie wymiany */
#message-modal .auth-card {
    max-width: 700px !important;
    width: 95% !important;
}

/* Poprawka dla urządzeń mobilnych: obsługa długich treści w modalu pomocy */
@media (max-width: 768px) {
    #message-modal.modal {
        align-items: flex-start; /* Pozwala przewijać modal od samej góry */
        overflow-y: auto;        /* Aktywuje scrollbar na kontenerze modala */
        padding: 20px 0;         /* Zapewnia margines bezpieczeństwa na górze i dole */
    }

    #message-modal .auth-card {
        margin: 20px auto;      /* Centruje kartę w poziomie i zapewnia odstęp dla przycisku OK */
    }
}

.trade-header-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative; /* Pozwala na pozycjonowanie przycisku względem tego kontenera */
    min-height: 50px;
    margin-top: 40px;
    margin-bottom: 10px;
}

.help-trigger-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.4rem;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0.6;
}

.help-trigger-btn:hover {
    color: var(--accent-secondary);
    opacity: 1;
    transform: scale(1.1);
}

#btn-back-hub {
    position: absolute;
    left: 0;
}

@media (max-width: 900px) {
    .trade-header-area {
        flex-direction: column; /* Na mobile układamy jeden pod drugim */
        gap: 15px;
    }
    #btn-back-hub {
        position: static; /* Na mobile wraca do normalnego przepływu */
    }
}

.trade-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: stretch;
}

.trade-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-panel {
    background: var(--bg-surface);
    border: 1px solid var(--glass);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: 0.3s;
    max-width: 450px;
    width: 100%;
}

/* Wyrównanie paneli do środka (w stronę strzałek) na komputerze */
.trade-layout > .trade-panel:first-child { justify-self: end; }
.trade-layout > .trade-panel:last-child { justify-self: start; }

.trade-panel.locked {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
}

.trade-panel.confirmed {
    border-color: var(--rare);
    background: rgba(3, 218, 198, 0.05);
}

.trade-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--glass);
}

.trade-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-height: 240px;
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 8px;
}

.trade-slot {
    aspect-ratio: 2/3;
    border-radius: 6px;
    border: 1px dashed var(--glass);
    background-size: cover;
    background-position: center;
    display: block;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

.trade-slot.filled.common { border-color: var(--common); border-style: solid; }
.trade-slot.filled.rare { border-color: var(--rare); border-style: solid; }
.trade-slot.filled.epic { border-color: var(--epic); border-style: solid; box-shadow: 0 0 10px rgba(213, 0, 249, 0.3); }
.trade-slot.filled.legendary { border-color: var(--legendary); border-style: solid; box-shadow: 0 0 15px rgba(255, 171, 0, 0.4); }

.trade-slot.empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-slot.empty:hover {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    background: rgba(0, 229, 255, 0.02);
}

.trade-coins-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.trade-status-indicator {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--glass);
    color: var(--text-dim);
}

.trade-status-indicator.active {
    background: var(--rare);
    color: #000;
}

@media (max-width: 900px) { 
    .trade-layout { grid-template-columns: 1fr; }
    .trade-actions { flex-wrap: wrap; }

    /* Na telefonie centrujemy panele w pionowej kolumnie */
    .trade-panel { justify-self: center; }

    /* Obrócenie strzałek w pion, gdy panele są jeden pod drugim */
    .trade-divider i {
        transform: rotate(90deg);
    }
}

.trade-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 40px auto;
}

.trade-actions button {
    white-space: nowrap;
}

.active-trades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.active-trade-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: 0.3s;
    border-left: 4px solid var(--glass);
}

.active-trade-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-secondary);
    background: rgba(0, 229, 255, 0.02);
}

.trade-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.trade-card-status {
    font-size: 0.7rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--glass);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #555;
}

.status-dot.ready { background: var(--rare); box-shadow: 0 0 10px var(--rare); }
.status-dot.editing { background: var(--legendary); }