/* exchange.css — page-specific styles for the exchange board */

/* Two-column layout for desktop */
.ex-layout{
  display:flex;gap:16px;max-width:1100px;margin:0 auto;padding:0 12px;
}
.ex-sidebar{flex:0 0 360px;min-width:0}
.ex-main{flex:1;min-width:0}
@media(min-width:800px){
  .ex-sidebar{position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding-bottom:20px}
}
@media(max-width:799px){
  .ex-layout{flex-direction:column;padding:0}
  .ex-sidebar{flex:none}
  .ex-main{flex:none}
}

.ex-auth-gate {
  max-width: 480px;
  margin: 20px auto;
  padding: 24px 20px;
  text-align: center;
}

.ex-form {
  margin: 12px 12px 16px;
  padding: 18px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ex-form-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}

.ex-field {
  margin-bottom: 14px;
}

.ex-label {
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ex-hint {
  font-size: 11px;
  color: var(--mute);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.ex-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ex-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.ex-radio {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.ex-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  transition: border-color .15s;
  min-width: 140px;
  flex: 1;
}
.ex-input:focus { border-color: var(--accent); }

.ex-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a958c' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.ex-select:focus { border-color: var(--accent); }

.ex-select-sm {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 28px 6px 10px;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a958c' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  flex: 1;
  min-width: 0;
}
.ex-select-sm:focus { border-color: var(--accent); }

.ex-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.ex-chip {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--mute);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ex-chip:active { opacity: .75; }
.ex-chip.on {
  background: #1a3a24;
  border-color: var(--ok);
  color: #d8f5e0;
}
.ex-chip.on.give {
  background: #1a2a44;
  border-color: var(--dup);
  color: #dce9ff;
}

.ex-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ex-btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .12s;
  white-space: nowrap;
}
.ex-btn:active { opacity: .75; }
.ex-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0e00;
}
.ex-btn.danger {
  background: #442020;
  border-color: #5a2828;
  color: #ff9a9a;
}

.ex-filters {
  margin: 0 0 12px;
  padding: 0 12px;
}

.ex-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#smartMatchBtn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0e00;
  font-weight: 600;
}

#manualFilters.disabled {
  opacity: .4;
  pointer-events: none;
}

/* Listings */
#listings {
  padding: 0 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ex-listing {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.ex-listing.mine {
  border-color: var(--accent);
  background: linear-gradient(135deg,#2a1f0a 0%,#1c2420 100%);
}

.ex-listing-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ex-city {
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--mute);
  white-space: nowrap;
}

.ex-contact {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ex-contact.tg { color: #229ED9; }
.ex-contact.ig { color: #E1306C; }

.ex-time {
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
  flex-shrink: 0;
}

.ex-cards {
  font-size: 12px;
  color: var(--mute);
  line-height: 1.7;
}
.ex-cards b {
  color: var(--text);
  font-weight: 600;
}
.ex-cards .match {
  color: var(--accent);
  font-weight: 700;
}
.ex-cards .match-want {
  color: var(--ok);
  font-weight: 700;
}

.ex-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mute);
  font-size: 13px;
}

.ex-load-more {
  text-align: center;
  padding: 10px 12px 20px;
}

/* Profile modal fix for exchange page */
.modal-box .profile img { object-fit: cover; }

@media (max-width: 420px) {
  .ex-form { padding: 14px 12px; border-radius: 10px; }
  .ex-chip { font-size: 11px; padding: 4px 8px; }
  .ex-contact-row { gap: 8px; }
  .ex-filter-row { gap: 6px; }
  .ex-select-sm { font-size: 11px; padding: 5px 24px 5px 8px; }
  .ex-btn { font-size: 12px; padding: 8px 12px; }
}