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

/* ─── /meet promo banner (above the layout) ──────────────────── */
.meet-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 14px 18px;
  background:
    linear-gradient(135deg,
      rgba(255,138,31,.14) 0%,
      rgba(255,138,31,.04) 35%,
      rgba(74,222,128,.04) 70%,
      rgba(74,222,128,.10) 100%);
  border: 1px solid rgba(255,138,31,.34);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s, box-shadow .15s;
  box-shadow: 0 0 18px rgba(255,138,31,.06) inset;
}
.meet-promo:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow:
    0 6px 22px rgba(255,138,31,.20),
    0 0 18px rgba(255,138,31,.10) inset;
}
/* Diagonal shimmer sweep */
.meet-promo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: meetPromoSheen 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes meetPromoSheen {
  0%   { left: -45%; }
  60%  { left: 145%; }
  100% { left: 145%; }
}

/* Pin icon with radar-pulse rings */
.meet-promo-icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meet-promo-radar {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,138,31,.7);
  animation: meetPromoRadar 2.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.meet-promo-radar--2 { animation-delay: 1.2s; }
@keyframes meetPromoRadar {
  0%   { transform: scale(.45); opacity: 1; }
  80%  { opacity: .15; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.meet-promo-pin {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(255,138,31,.6));
}

.meet-promo-text {
  flex: 1;
  min-width: 0;
}
.meet-promo-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.meet-promo-sub {
  font-size: 12.5px;
  color: #b8c0b5;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.meet-promo-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, #ff6f00 100%);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255,138,31,.32);
  transition: transform .15s, box-shadow .15s;
}
.meet-promo:hover .meet-promo-cta {
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(255,138,31,.45);
}
.meet-promo-cta svg {
  margin-top: 1px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .meet-promo::before,
  .meet-promo-radar { animation: none; }
}

@media (max-width: 600px) {
  .meet-promo {
    margin: 10px 8px 0;
    padding: 12px 14px;
    gap: 11px;
  }
  .meet-promo-icon-wrap { width: 40px; height: 40px; }
  .meet-promo-pin { width: 20px; height: 20px; }
  .meet-promo-title { font-size: 13.5px; }
  .meet-promo-sub  { font-size: 11.5px; }
  .meet-promo-cta {
    padding: 7px 11px;
    font-size: 11.5px;
  }
  .meet-promo-cta-text { display: none; }
}


/* Two-column layout for desktop */
.ex-layout{
  display:flex;gap:16px;max-width:1100px;margin:0 auto;padding:16px 12px 0;
}
.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:14px 0 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;
}

/* Completion banner — shows in form when user has all 48 unique cards. */
.ex-48-banner[hidden] { display: none; }
.ex-48-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,138,31,.12) 0%, rgba(255,138,31,.03) 55%, rgba(74,222,128,.05) 100%);
  border: 1px solid rgba(255,138,31,.32);
  box-shadow: 0 0 16px rgba(255,138,31,.08) inset;
  position: relative;
  overflow: hidden;
}
.ex-48-banner::before {
  content: "";
  position: absolute; top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: ex48Sheen 4.2s ease-in-out infinite;
}
@keyframes ex48Sheen {
  0% { left: -40%; }
  60% { left: 140%; }
  100% { left: 140%; }
}
.ex-48-glyph {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,31,.2) 0%, transparent 70%);
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(255,138,31,.5));
}
.ex-48-text { flex: 1 1 auto; min-width: 0; }
.ex-48-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #ffd9a8;
  margin-bottom: 3px;
}
.ex-48-sub {
  font-size: 11.5px;
  line-height: 1.4;
  color: #b8c0b5;
}
.ex-48-sub b { color: #ffc16f; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .ex-48-banner::before { animation: none; }
}

.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;
}

/* Contact type switch — segmented pill with icons */
.ex-contact-switch {
  position: relative;
  display: flex;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 8px;
  isolation: isolate;
}
.ex-contact-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--accent);
  border-radius: 999px;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.ex-contact-switch[data-type="instagram"] .ex-contact-thumb {
  transform: translateX(100%);
}
.ex-contact-opt {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--mute);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s;
}
.ex-contact-opt[aria-selected="true"] { color: #1a0e00; }
.ex-contact-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.ex-contact-input {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .ex-contact-thumb { transition: none; }
}

.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-combo { position: relative; flex: 1; min-width: 0; }
.ex-combo-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 28px 8px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
  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;
}
.ex-combo-input:focus { border-color: var(--accent); }
.ex-combo-input-sm { font-size: 12px; padding: 6px 26px 6px 10px; background-position: right 8px center; }
.ex-combo-input[readonly] { cursor: pointer; caret-color: transparent; }
.ex-combo-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.ex-combo-list.open { display: block; }
.ex-combo-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text);
}
.ex-combo-item:hover, .ex-combo-item.active {
  background: rgba(255,138,31,.15);
  color: var(--accent);
}
.ex-combo-section {
  padding: 6px 10px 4px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mute);
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}
.ex-combo-section:first-child { border-top: none; }
.ex-combo-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--mute);
  text-align: center;
}

.ex-combo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text);
}
.ex-combo-card:hover, .ex-combo-card.active {
  background: rgba(255,138,31,.15);
  color: var(--accent);
}
.ex-combo-card-num {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ex-combo-card.active .ex-combo-card-num { border-color: var(--accent); }
.ex-combo-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

/* Nova Poshta toggle */
.ex-np-toggle{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  transition:border-color .15s, background .15s;
}
.ex-np-toggle:hover{border-color:var(--accent)}
.ex-np-toggle input{position:absolute;opacity:0;pointer-events:none}
.ex-np-switch{
  position:relative;
  width:36px;height:20px;flex-shrink:0;
  background:#2a2f2a;
  border:1px solid var(--border);
  border-radius:999px;
  transition:background .18s, border-color .18s;
}
.ex-np-switch::after{
  content:"";
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;
  background:#8a958c;
  border-radius:50%;
  transition:transform .18s, background .18s;
}
.ex-np-toggle input:checked ~ .ex-np-switch{
  background:#e42328;
  border-color:#e42328;
}
.ex-np-toggle input:checked ~ .ex-np-switch::after{
  transform:translateX(16px);
  background:#fff;
}
.ex-np-logo{
  width:22px;height:22px;flex-shrink:0;
  object-fit:contain;
}
.ex-np-text{
  font-size:13px;color:var(--text);font-weight:600;
  letter-spacing:.2px;
}

/* NP badge inside listings */
.ex-np-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px 2px 4px;
  background:rgba(228,35,40,.12);
  border:1px solid rgba(228,35,40,.4);
  border-radius:999px;
  color:#ff7075;
  font-size:10px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;
}
.ex-np-badge img{width:14px;height:14px;object-fit:contain}

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

.ex-btn {
  flex: 1 1 0;
  min-width: 0;
  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;
  text-align: center;
}
.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-btn-full { flex: 1 1 100%; }

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

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

#smartMatchBtn.active,
#npOnlyBtn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0e00;
  font-weight: 600;
}
#npOnlyBtn{display:inline-flex;align-items:center}

.ex-combo-clear{
  position:absolute; right:4px; top:50%;
  transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer;
  width:22px; height:22px; border-radius:50%; padding:0;
  color:var(--mute); font-size:12px; line-height:1;
  display:none; align-items:center; justify-content:center;
  z-index:2;
}
.ex-combo-clear:hover{background:rgba(255,138,31,.18); color:var(--accent)}
.ex-combo.has-value .ex-combo-input{background-image:none; padding-right:28px}
.ex-combo.has-value .ex-combo-clear{display:inline-flex}


/* "Поруч" chip in the filter row. Inline-flex with a small pin icon. */
.ex-nearby-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:12px;line-height:1;
}
.ex-nearby-chip .ex-nearby-icon{ flex-shrink:0; }
.ex-nearby-chip.loading{
  opacity:.7;cursor:progress;
  animation:exNearbyPulse 1.1s ease-in-out infinite;
}
@keyframes exNearbyPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,138,31,0); }
  50%{ box-shadow:0 0 0 4px rgba(255,138,31,.18); }
}

/* Store combobox inside the publish form: ATB wordmark on the left as
   decoration, "locate me" pin button on the right next to the clear ✕. */
.ex-store-combo{ position:relative; }
.ex-store-logo{
  position:absolute;left:10px;top:50%;
  transform:translateY(-50%);
  height:14px;width:auto;
  pointer-events:none;
  opacity:.95;
  z-index:1;
}
.ex-store-combo #storeSelect{
  padding-left:60px;
  padding-right:60px;
}
.ex-store-locate{
  position:absolute;right:30px;top:50%;
  transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;
  width:24px;height:24px;border-radius:50%;
  color:var(--mute);
  display:inline-flex;align-items:center;justify-content:center;
  z-index:2;
  transition:background .15s,color .15s;
}
.ex-store-locate:hover{ background:rgba(255,138,31,.18); color:var(--accent); }
.ex-store-locate.loading{
  color:var(--accent);
  animation:exNearbyPulse 1.1s ease-in-out infinite;
}
.ex-store-combo.has-value #storeSelect{ padding-right:60px; }
.ex-store-combo.has-value .ex-combo-clear{ right:6px; }

/* "Locate me" pin inside the city combobox (form + filter). Same shape as
   the store-locate button so users learn one icon = "use my GPS". */
.ex-city-combo{ position:relative; }
.ex-city-combo .ex-combo-input{ background-image:none; }
.ex-city-combo #citySelect,
.ex-city-combo #filterCity{ padding-right:36px; }
.ex-city-combo.has-value #filterCity{ padding-right:60px; }
.ex-city-locate{
  position:absolute;right:6px;top:50%;
  transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;
  width:26px;height:26px;border-radius:50%;
  color:var(--mute);
  display:inline-flex;align-items:center;justify-content:center;
  z-index:2;
  transition:background .15s,color .15s;
}
.ex-city-locate:hover{ background:rgba(255,138,31,.18); color:var(--accent); }
.ex-city-locate.loading{
  color:var(--accent);
  animation:exNearbyPulse 1.1s ease-in-out infinite;
}
.ex-city-locate-sm{ width:22px;height:22px; right:4px; }
/* When a filter city is set, push locate pin left of the clear ✕ */
.ex-city-combo.has-value .ex-city-locate-sm{ right:30px; }

/* 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 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  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-contact.th { color: #e8ece6; }
.ex-contact-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.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;
}

/* ATB pin row inside a listing. Clickable — opens the address in Google
   Maps in a new tab. Subtle styling so it doesn't compete with the
   contact handle, but lifts on hover so the link affordance is obvious. */
.ex-store{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--mute);
  margin:-2px 0 8px;
  line-height:1.3;
  text-decoration:none;
  transition:color .15s;
  width:fit-content;
  max-width:100%;
}
.ex-store:hover{ color:var(--accent2); }
.ex-store:hover .ex-store-pin{ opacity:1; }
.ex-store:hover > span{ text-decoration:underline; text-underline-offset:2px; }
.ex-store-pin{
  flex-shrink:0;color:var(--accent);opacity:.85;
  transition:opacity .15s;
}
.ex-store > span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.ex-listing.mine .ex-store-pin{ opacity:1; }

/* Two-line dropdown row: address up top, worktime as a soft sub-line. */
.ex-combo-store-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:8px 12px;
}
.ex-combo-store-addr{
  font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;
}
.ex-combo-store-time{
  font-size:11px;color:var(--mute);
}

.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; }

/* Push subscribe (admin only) */
.ex-push-hint{
  font-size:11px;color:var(--mute);margin:6px 2px 0;line-height:1.4;
}

/* Branded divider between "Віддаю" and "Шукаю" — helps screenshots carry the
   site URL AND is wired as a soft entry point to the support modal. */
.ex-swap-divider{
  display:flex;align-items:center;gap:8px;
  margin:4px 0 14px;
  user-select:none;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.ex-swap-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  transition:background .25s ease;
}
.ex-swap-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  color:var(--mute);
  letter-spacing:.3px;
  white-space:nowrap;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .25s ease;
}
.ex-swap-badge img{display:block;opacity:.9;transition:opacity .2s ease}
.ex-swap-url{color:var(--accent);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ex-swap-arrow{
  color:var(--accent);font-weight:700;font-size:13px;line-height:1;
  display:inline-block;
  transition:transform .35s ease;
}
.ex-swap-divider:hover .ex-swap-badge,
.ex-swap-divider:focus-visible .ex-swap-badge{
  border-color:var(--accent);
  background:rgba(255,138,31,.08);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(255,138,31,.18);
}
.ex-swap-divider:hover .ex-swap-arrow,
.ex-swap-divider:focus-visible .ex-swap-arrow{
  transform:rotate(180deg);
}
.ex-swap-divider:hover .ex-swap-badge img{opacity:1}
.ex-swap-divider:focus-visible .ex-swap-badge{
  box-shadow:0 0 0 3px rgba(255,138,31,.32);
}
/* Attention ripple — fired ~5s after page load, exactly 3 cycles, only if the
   user has never clicked the divider. Same lifetime semantics as the footer
   coffee + generator-stats buttons (localStorage-gated). */
@keyframes exSwapAttn {
  0%   { box-shadow: 0 0 0 0   rgba(255,138,31,.55) }
  70%  { box-shadow: 0 0 0 18px rgba(255,138,31,0)   }
  100% { box-shadow: 0 0 0 0   rgba(255,138,31,0)   }
}
.ex-swap-divider.pulse .ex-swap-badge{
  animation: exSwapAttn 1.6s ease-out 3;
  border-color:var(--accent);
}
.ex-swap-divider.pulse .ex-swap-line{
  background:linear-gradient(90deg,transparent,rgba(255,138,31,.55),transparent);
}
@media (max-width: 420px){
  .ex-swap-badge{font-size:10px;padding:3px 8px;gap:5px}
  .ex-swap-badge img{width:12px;height:12px}
  .ex-swap-arrow{font-size:12px}
}

@media (max-width: 420px) {
  .ex-form { padding: 14px 12px; border-radius: 10px; }
  .ex-chip { font-size: 11px; padding: 4px 8px; }
  .ex-contact-opt { font-size: 12px; padding: 7px 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; }
}

/* Report flag on listing — small, muted by default, glows on hover */
.ex-report {
  background: transparent;
  border: 1px solid transparent;
  color: var(--mute);
  font-size: 12px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s, background .15s, border-color .15s, transform .15s, opacity .15s;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  opacity: .5;
}
.ex-report:hover, .ex-report:focus-visible {
  color: #ff9a6a;
  border-color: #5a2828;
  background: #2a1414;
  opacity: 1;
  transform: scale(1.08);
  outline: none;
}
.ex-listing.mine .ex-report { display: none; }

/* Textarea inside .modal-box (matches existing input styling) */
.modal-box textarea {
  width: 100%;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 90px;
  margin-bottom: 12px;
}
.modal-box textarea:focus { outline: none; border-color: var(--accent); }

.ex-report-msg {
  margin: 10px 0 0 !important;
  padding: 8px 10px;
  background: #1a2a1a;
  border: 1px solid #2c4a2c;
  border-radius: 6px;
  color: var(--ok) !important;
  font-size: 12px;
}
.ex-report-msg.err {
  background: #2a1414;
  border-color: #5a2828;
  color: #ff9a6a !important;
}

/* Banner shown to banned users instead of the publish form */
.ex-banned {
  background: linear-gradient(135deg,#2a1414 0%,#1c2420 100%);
  border: 1px solid #5a2828;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-banned-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.ex-banned-title {
  color: #ff9a6a;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 4px;
}
.ex-banned-reason {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.ex-banned-hint {
  color: var(--mute);
  font-size: 11px;
  margin-top: 8px;
  line-height: 1.4;
}
.ex-banned-hint a { color: var(--accent); text-decoration: none; }
.ex-banned-hint a:hover { text-decoration: underline; }

/* Banner shown to warned users — softer than ban, with an ack button that
   unblocks the publish form once clicked. */
.ex-warning {
  background: linear-gradient(135deg,#2a2414 0%,#1c2420 100%);
  border: 1px solid #5a4828;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-warning-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.ex-warning-title { color: #ffcf6a; font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.ex-warning-reason { color: var(--text); font-size: 13px; line-height: 1.5; }
.ex-warning-hint { color: var(--mute); font-size: 11px; margin-top: 6px; line-height: 1.4; }
.ex-warning-ack {
  margin-top: 10px;
  padding: 8px 14px;
  background: #3a3220;
  color: #ffcf6a;
  border: 1px solid #6a5828;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}
.ex-warning-ack:hover { background: #4a3820; }
.ex-warning-ack:disabled { opacity: .6; cursor: wait; }

/* CTA inside "Віддаю" panel when user has no duplicates yet
   (logged in but hasn't tracked their collection on /index). */
.ex-give-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255,138,31,.10) 0%, rgba(255,138,31,.02) 100%),
    var(--card);
  border: 1px solid rgba(255,138,31,.35);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative;
  overflow: hidden;
}
.ex-give-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,138,31,.18) 0%, transparent 60%);
  opacity: .6;
  pointer-events: none;
}
.ex-give-cta:hover,
.ex-give-cta:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(255,138,31,.18);
  outline: none;
}
.ex-give-cta:hover .ex-give-cta-arrow {
  transform: translateX(3px);
}
.ex-give-cta-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.ex-give-cta-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  z-index: 1;
}
.ex-give-cta-text b {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .2px;
}
.ex-give-cta-text span {
  font-size: 11px;
  color: var(--mute);
  line-height: 1.4;
}
.ex-give-cta-arrow {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 700;
  transition: transform .15s ease;
  z-index: 1;
}