/* ═══════════════════════════════════════════════════════════════
   KLUB RAZMENE — članstvo, knjige za razmenu, ponude, čet
   ═══════════════════════════════════════════════════════════════ */

/* Elementi sa [hidden] moraju ostati sakriveni i kad klasa zadaje display
   (npr. .dugme, .pilule) — važno za zaključavanje odeljka. */
.dugme[hidden], .pilule[hidden], [hidden] { display: none !important; }

/* ─── VIP bedž ──────────────────────────────────────────────── */
.vip-bedz {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.18rem 0.6rem;
  background: linear-gradient(135deg, var(--zlatna), var(--zlatna-tamna));
  color: var(--teget-taman);
  border-radius: 999px;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(229, 168, 18, 0.45);
  white-space: nowrap;
}
.vip-bedz.veliki { font-size: 0.74rem; padding: 0.3rem 0.85rem; }

/* ─── Odricanje od odgovornosti (pre razmene) ───────────────── */
/* Namerno mirno, a ne „vatreno crveno": ovo je upozorenje koje treba
   pročitati, a ne panika koja odbija članove od razmene. */
.klub-upozorenje {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-left: 4px solid var(--crvena);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.5rem 1.9rem;
  margin-top: 1.6rem;
}
.klub-upozorenje h2 {
  font-size: 1rem;
  margin-bottom: 0.7rem;
}
.klub-upozorenje p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--tekst-blagi);
  margin-bottom: 0.7rem;
  overflow-wrap: anywhere;
}
.klub-upozorenje p:last-child { margin-bottom: 0; }
.klub-upozorenje strong { color: var(--teget); }
.klub-upozorenje a {
  color: var(--teget); font-weight: 800;
  border-bottom: 1.5px solid var(--zlatna);
}
.klub-upozorenje a:hover { color: var(--zlatna-tamna); }

/* rečenica sa posledicom — blago izdvojena da se ne preskoči */
.klub-upozorenje-akcija {
  background: var(--pozadina);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.klub-upozorenje-savet {
  font-size: 0.8rem !important;
  font-style: italic;
  padding-top: 0.2rem;
}

/* kratka traka na strani sa knjigama — tu razmena zaista počinje */
.klub-upozorenje-traka {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-left: 4px solid var(--crvena);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: 0.8rem; line-height: 1.6;
  color: var(--tekst-blagi);
}
.klub-upozorenje-traka strong { color: var(--teget); }
.klub-upozorenje-traka a {
  color: var(--teget); font-weight: 800; white-space: nowrap;
  border-bottom: 1.5px solid var(--zlatna);
}
.klub-upozorenje-traka a:hover { color: var(--zlatna-tamna); }

/* Poziv gostima i članovima bez VIP-a — knjige vide svi, objava se otključava */
.klub-poziv {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-left: 4px solid var(--zlatna);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.25rem 1.6rem;
  margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.klub-poziv .ikona { font-size: 1.8rem; line-height: 1; }
.klub-poziv .tekst { flex: 1; min-width: 240px; }
.klub-poziv .tekst strong { display: block; font-size: 0.98rem; color: var(--teget); margin-bottom: 0.2rem; }
.klub-poziv .tekst p { font-size: 0.82rem; color: var(--tekst-blagi); line-height: 1.55; }
.klub-poziv .akcije { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* Dugme na kartici knjige koje stoji zaključano dok član nema VIP */
.dugme-zakljucan {
  background: var(--pozadina);
  color: var(--tekst-blagi);
  border: 1.5px dashed var(--linija);
}
.dugme-zakljucan:hover {
  background: rgba(229, 168, 18, 0.1);
  border-color: var(--zlatna);
  color: var(--teget);
}

@media (max-width: 640px) {
  .klub-upozorenje { padding: 1.2rem 1.1rem; }
  .klub-poziv { padding: 1.1rem 1.15rem; }
}

/* ─── Status članstva ───────────────────────────────────────── */
.klub-status-kutija {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-left: 4px solid var(--zlatna);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.4rem 1.7rem;
  margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.klub-status-kutija .status-tekst { flex: 1; min-width: 230px; }
.klub-status-kutija .status-tekst strong { display: block; font-size: 1rem; color: var(--teget); margin-bottom: 0.15rem; }
.klub-status-kutija .status-tekst p { font-size: 0.84rem; color: var(--tekst-blagi); }
.klub-status-akcije { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* Koraci za učlanjenje */
.klub-koraci {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.2rem 0;
}
.klub-koraci-cetiri { grid-template-columns: repeat(4, 1fr); }
.klub-korak {
  background: var(--pozadina);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.klub-korak .broj {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--teget); color: var(--zlatna);
  border-radius: 50%;
  font-size: 0.8rem; font-weight: 800;
  margin-bottom: 0.55rem;
}
.klub-korak strong { display: block; font-size: 0.85rem; color: var(--teget); margin-bottom: 0.2rem; }
.klub-korak p { font-size: 0.78rem; color: var(--tekst-blagi); }

/* Unos VIP koda */
.kod-unos { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.kod-unos input {
  flex: 1; min-width: 190px;
  padding: 0.72rem 1.1rem;
  border: 1.5px solid var(--linija);
  border-radius: 8px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.kod-unos input:focus { outline: none; border-color: var(--zlatna); box-shadow: 0 0 0 3px rgba(229, 168, 18, 0.18); }

/* ─── Ulaz u odeljak za razmenu knjiga ──────────────────────── */
.klub-odeljak-kartica {
  background: linear-gradient(135deg, var(--teget), var(--teget-taman));
  border-radius: var(--radius-lg);
  box-shadow: var(--senka-md);
  padding: 1.9rem 2.2rem;
  margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.klub-odeljak-kartica::after {
  content: '⇄';
  position: absolute; right: -14px; bottom: -34px;
  font-size: 9rem; font-weight: 800;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.klub-odeljak-kartica .ikona-velika {
  width: 62px; height: 62px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(229, 168, 18, 0.16);
  border: 1px solid rgba(229, 168, 18, 0.4);
  border-radius: 14px;
  font-size: 1.8rem;
}
.klub-odeljak-kartica .telo { flex: 1; min-width: 240px; }
.klub-odeljak-kartica h2 { color: #fff; font-size: 1.2rem; margin-bottom: 0.3rem; }
.klub-odeljak-kartica p { color: rgba(255, 255, 255, 0.72); font-size: 0.86rem; max-width: 58ch; }
.klub-odeljak-kartica .dugme { position: relative; z-index: 1; }
.klub-odeljak-kartica.zakljucan .ikona-velika {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.zakljucano-pilula {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  position: relative; z-index: 1;
}

/* ─── Mreža knjiga u klubu ──────────────────────────────────── */
.klub-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.3rem;
  padding-bottom: 3rem;
}
.klub-kartica {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: var(--prelaz);
}
.klub-kartica:hover { transform: translateY(-4px); box-shadow: var(--senka-md); }
.klub-slika {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--pozadina);
  overflow: hidden;
}
.klub-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klub-oznaka-status {
  position: absolute; top: 10px; left: 10px;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--teget); color: #fff;
  box-shadow: var(--senka-xs);
}
.klub-oznaka-status.u-razmeni  { background: var(--zlatna); color: var(--teget-taman); }
.klub-oznaka-status.razmenjena { background: var(--uspeh); }

.klub-kartica-telo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.klub-kartica-telo h3 { font-size: 0.98rem; color: var(--teget); margin-bottom: 0.45rem; line-height: 1.3; }
.klub-vlasnik {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.78rem; font-weight: 700; color: var(--tekst-blagi);
}
.klub-vlasnik .avatar { width: 26px; height: 26px; font-size: 0.7rem; }
.klub-vlasnik a { color: var(--teget); }
.klub-vlasnik a:hover { color: var(--zlatna-tamna); }
.klub-opis { font-size: 0.8rem; color: var(--tekst-blagi); margin-bottom: 0.75rem; }

/* Uslov preuzimanja na objavama knjižare (administratora). Namerno mirno
   obojeno — to je obaveštenje koje član treba da pročita pre nego što
   ponudi razmenu, a ne upozorenje. */
.klub-preuzimanje {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding: 0.42rem 0.6rem;
  background: rgba(19, 40, 73, 0.045);
  border-left: 3px solid var(--zlatna);
  border-radius: 0 4px 4px 0;
  font-size: 0.73rem;
  line-height: 1.35;
  color: var(--teget);
}
.klub-preuzimanje svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 0.11rem; }
.klub-preuzimanje strong { font-weight: 700; }
.klub-kartica-telo .dno { margin-top: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.klub-kartica-telo .datum { font-size: 0.7rem; color: var(--tekst-blagi); margin-left: auto; }

/* ─── Ponude / razmene ──────────────────────────────────────── */
.razmena-red {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
}
.razmena-knjige {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0.8rem 0;
}
.razmena-mini {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--pozadina);
  border: 1px solid var(--linija);
  border-radius: 8px;
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  min-width: 0;
}
.razmena-mini img {
  width: 46px; height: 62px; object-fit: cover;
  border-radius: 5px; flex-shrink: 0;
  box-shadow: var(--senka-xs);
}
.razmena-mini strong { display: block; font-size: 0.85rem; color: var(--teget); line-height: 1.25; }
.razmena-mini small { font-size: 0.7rem; color: var(--tekst-blagi); }
.razmena-strelica { font-size: 1.3rem; color: var(--zlatna-tamna); font-weight: 800; }
.razmena-poruka {
  background: rgba(229, 168, 18, 0.08);
  border-left: 3px solid var(--zlatna);
  border-radius: 0 6px 6px 0;
  padding: 0.65rem 0.9rem;
  font-size: 0.83rem;
  margin-bottom: 0.8rem;
}
.razmena-akcije { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.razmena-status {
  display: inline-block;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.razmena-status.ceka       { background: rgba(229, 168, 18, 0.16); color: var(--zlatna-tamna); }
.razmena-status.prihvacena { background: rgba(31, 163, 86, 0.14);  color: var(--uspeh); }
.razmena-status.odbijena,
.razmena-status.otkazana   { background: rgba(176, 58, 58, 0.12);  color: var(--crvena); }
.razmena-status.zavrsena   { background: rgba(19, 40, 73, 0.1);    color: var(--teget); }

.dugme-uspeh { background: var(--uspeh); color: #fff; }
.dugme-uspeh:hover { background: #178a48; transform: translateY(-2px); box-shadow: var(--senka-jaka); }
.dugme-crveno { background: var(--belo); color: var(--crvena); border: 1.5px solid var(--crvena); }
.dugme-crveno:hover { background: var(--crvena); color: #fff; }

/* ─── Moje razmene i poruke (pregled razgovora) ─────────────── */
.sazetak-traka {
  display: flex; gap: 2rem; flex-wrap: wrap;
  background: var(--belo);
  border: 1px solid var(--linija);
  border-left: 4px solid var(--zlatna);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.4rem;
}
.sazetak-traka .stavka strong {
  display: block; font-size: 1.4rem; font-weight: 800; color: var(--teget); line-height: 1.1;
}
.sazetak-traka .stavka span {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tekst-blagi);
}
.sazetak-traka .stavka.istaknuto strong { color: var(--crvena); }

.razgovor-red {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  transition: var(--prelaz);
}
.razgovor-red.ima-nove { border-left: 4px solid var(--crvena); }
.razgovor-red:hover { box-shadow: var(--senka-md); }

.razgovor-vrh {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.razgovor-vrh .avatar { width: 34px; height: 34px; font-size: 0.85rem; }
.razgovor-vrh .partner { font-size: 0.92rem; font-weight: 800; color: var(--teget); }
.razgovor-vrh .uloga { font-size: 0.74rem; color: var(--tekst-blagi); }
.razgovor-vrh .razmena-status { margin-left: auto; }

.zadnja-poruka {
  display: flex; align-items: flex-start; gap: 0.55rem;
  background: var(--pozadina);
  border-radius: 8px;
  padding: 0.7rem 0.95rem;
  margin: 0.8rem 0;
  font-size: 0.84rem;
}
.zadnja-poruka .ko { font-weight: 800; color: var(--teget); white-space: nowrap; }
.zadnja-poruka .tekst {
  flex: 1; color: var(--tekst-blagi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zadnja-poruka .kada { font-size: 0.7rem; color: var(--tekst-blagi); white-space: nowrap; }
.zadnja-poruka.prazna { font-style: italic; }

/* Grupa ponuda za istu knjigu (vlasnik bira najbolju) */
.ponude-grupa {
  border: 1.5px solid var(--zlatna);
  border-radius: var(--radius);
  background: rgba(229, 168, 18, 0.05);
  padding: 1.1rem 1.2rem 0.4rem;
  margin-bottom: 1.4rem;
}
.grupa-vrh { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.grupa-vrh img {
  width: 42px; height: 56px; object-fit: cover;
  border-radius: 5px; box-shadow: var(--senka-xs);
}
.grupa-vrh .naslov { font-size: 0.95rem; font-weight: 800; color: var(--teget); }
.grupa-vrh .naslov small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--tekst-blagi); }
.grupa-vrh .broj-ponuda {
  margin-left: auto;
  background: var(--zlatna); color: var(--teget-taman);
  padding: 0.25rem 0.8rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  white-space: nowrap;
}
.grupa-napomena {
  background: var(--belo);
  border-left: 3px solid var(--zlatna);
  border-radius: 0 6px 6px 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.78rem; color: var(--tekst-blagi);
  margin-bottom: 0.9rem;
}
.ponude-grupa .razgovor-red { border-left: 3px solid var(--linija); }

/* Oznaka broja ponuda na svojoj knjizi u katalogu */
.ponude-oznaka {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--zlatna); color: var(--teget-taman);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.68rem; font-weight: 800;
  text-decoration: none;
}
.ponude-oznaka:hover { background: var(--zlatna-tamna); }

.nepr-bedz {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--crvena); color: #fff;
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 800;
}

/* Brojač na tabu "Razmene" */
.tab-brojac {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  margin-left: 0.35rem;
  background: var(--crvena); color: #fff;
  border-radius: 999px;
  font-size: 0.66rem; font-weight: 800;
}
.pilula.aktivna .tab-brojac { background: var(--zlatna); color: var(--teget-taman); }

/* ─── Modal (započni razmenu) ───────────────────────────────── */
.klub-modal-pozadina {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12, 27, 51, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: grid; place-items: center;
  padding: 1rem;
}
.klub-modal {
  background: var(--belo);
  border-radius: var(--radius-lg);
  box-shadow: var(--senka-jaka);
  width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  padding: 1.8rem 2rem;
}
.klub-modal h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.klub-modal .opis { font-size: 0.84rem; color: var(--tekst-blagi); margin-bottom: 1.2rem; }
/* Izbor u modalu: ponudi postojeću knjigu ILI dodaj novu */
.modal-izbor { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.modal-izbor .pilula {
  cursor: pointer;
  font-family: var(--font);
  background: var(--belo);
}
.modal-izbor .pilula.aktivna { background: var(--teget); }

.klub-modal-zatvori {
  float: right;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: var(--pozadina);
  font-size: 1rem; cursor: pointer;
  transition: var(--prelaz);
}
.klub-modal-zatvori:hover { background: var(--crvena); color: #fff; }

/* Pregled slike pri objavi knjige */
.slika-pregled {
  width: 110px; height: 148px;
  border: 1.5px dashed #c9d3e0;
  border-radius: 8px;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--pozadina);
  color: var(--tekst-blagi);
  font-size: 1.6rem;
}
.slika-pregled img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Razmena — detalji i čet ───────────────────────────────── */
.razmena-pregled {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.4rem;
}
.kontakt-partner {
  background: rgba(31, 163, 86, 0.07);
  border: 1px solid rgba(31, 163, 86, 0.3);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.4rem;
}
.kontakt-partner h3 { font-size: 0.95rem; color: var(--teget); margin-bottom: 0.6rem; }
.kontakt-partner p { font-size: 0.86rem; margin-bottom: 0.25rem; }
.kontakt-partner p strong { color: var(--teget); }
.kontakt-partner .napomena { margin-top: 0.6rem; }

/* Čet */
.cet-kutija {
  background: var(--belo);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  padding: 1.4rem 1.6rem;
  display: flex; flex-direction: column;
}
.cet-kutija h3 { font-size: 1rem; margin-bottom: 0.9rem; }
.cet-poruke {
  height: 400px;
  overflow-y: auto;
  background: var(--pozadina);
  border: 1px solid var(--linija);
  border-radius: 10px;
  padding: 1rem;
  display: flex; flex-direction: column;
}
.cet-p {
  max-width: 76%;
  padding: 0.55rem 0.95rem;
  border-radius: 14px;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.cet-p small {
  display: block;
  font-size: 0.62rem;
  opacity: 0.65;
  margin-top: 0.2rem;
}
.cet-p.moja {
  align-self: flex-end;
  background: var(--teget); color: #fff;
  border-bottom-right-radius: 4px;
}
.cet-p.tudja {
  align-self: flex-start;
  background: var(--belo);
  border: 1px solid var(--linija);
  border-bottom-left-radius: 4px;
}
.cet-prazno {
  margin: auto;
  text-align: center;
  color: var(--tekst-blagi);
  font-size: 0.85rem;
  font-style: italic;
}
.cet-unos { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.cet-unos textarea {
  flex: 1;
  min-height: 46px; max-height: 130px;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--linija);
  border-radius: 10px;
  font-family: var(--font); font-size: 0.88rem;
  resize: vertical;
}
.cet-unos textarea:focus { outline: none; border-color: var(--teget); }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .klub-koraci,
  .klub-koraci-cetiri { grid-template-columns: minmax(0, 1fr); }
  .razmena-knjige { flex-direction: column; align-items: stretch; }
  .razmena-strelica { text-align: center; transform: rotate(90deg); }
  .cet-poruke { height: 320px; }
  .cet-p { max-width: 88%; }
}
/* Mesečna VIP pretplata i dokaz uplate */
.klub-pretplata {
  margin-bottom: 1.6rem;
  padding: 1.8rem 2rem;
  border: 1px solid rgba(201, 147, 16, 0.35);
  background: linear-gradient(145deg, #fffdf6 0%, #fff 62%);
}

.klub-pretplata h2 {
  margin: 0.35rem 0 0.35rem;
  color: var(--teget);
  font-size: 1.25rem;
}

.klub-pretplata p { margin: 0; color: var(--tekst-blagi); }

.klub-pretplata-zaglavlje {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.klub-cena {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #132849;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.klub-uplata-mreza {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1.2fr);
  gap: 1.25rem;
  align-items: stretch;
}

.klub-racun {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1.25rem;
  border-radius: 14px;
  background: #132849;
  color: #fff;
}

.klub-racun span { color: rgba(255,255,255,.72); font-size: .76rem; margin-top: .45rem; }
.klub-racun strong { font-size: 1rem; }
.klub-racun .klub-broj-racuna { font-size: 1.12rem; letter-spacing: .035em; word-break: break-all; }
.klub-racun .dugme {
  margin-top: .8rem;
  background: #fff;
  border-color: #fff;
  color: var(--teget);
}

.klub-racun .dugme:hover {
  background: var(--teget-svetli);
  border-color: var(--teget-svetli);
  color: #fff;
}

.klub-uplata-forma {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #fff;
}

.klub-uplata-forma fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.klub-uplata-forma legend { width: 100%; margin-bottom: .45rem; font-weight: 800; color: var(--teget); }
.klub-uplata-forma fieldset label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.klub-uplata-forma input[type="radio"] { accent-color: #c99310; }

.klub-dokaz-polje {
  display: grid;
  gap: .35rem;
  padding: .9rem 1rem;
  border: 1px dashed #b8c1cf;
  border-radius: 10px;
  cursor: pointer;
}

.klub-dokaz-polje span { color: var(--tekst-blagi); font-size: .78rem; }
.klub-dokaz-polje input { margin-top: .35rem; max-width: 100%; }
.klub-uplata-napomena { font-size: .78rem; line-height: 1.45; }

.klub-uplata-odbijena {
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border-left: 4px solid #b42318;
  border-radius: 8px;
  background: #fff1f0;
  color: #7a271a;
  font-size: .88rem;
}

.klub-pretplata.cekanje { border-color: #98d4b4; background: #f3fff8; }
.klub-pretplata-status { color: #067647; font-weight: 900; margin-bottom: .35rem; }

.klub-stari-kod { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid #e7e7e7; }
.klub-stari-kod summary { cursor: pointer; color: var(--teget); font-weight: 750; }
.klub-stari-kod .kod-unos { margin-top: .8rem; }

@media (max-width: 760px) {
  .klub-pretplata { padding: 1.3rem 1rem; }
  .klub-pretplata-zaglavlje { flex-direction: column; }
  .klub-uplata-mreza { grid-template-columns: 1fr; }
  .klub-uplata-forma fieldset { flex-direction: column; }
}

/* ─── Paginacija knjiga za razmenu (20 po strani) ───────────── */
.klub-paginacija {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem; margin-top: 2rem; justify-content: center;
}
.klub-pag-dugme {
  min-width: 40px; height: 40px; padding: 0 0.7rem;
  border: 1px solid var(--linija); border-radius: 8px;
  background: #fff; color: var(--teget);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.klub-pag-dugme:hover:not(:disabled):not(.aktivan) { border-color: var(--teget); background: var(--pozadina); }
.klub-pag-dugme.aktivan { background: var(--teget); border-color: var(--teget); color: #fff; cursor: default; }
.klub-pag-dugme:disabled { opacity: 0.45; cursor: not-allowed; }
.klub-pag-tri { padding: 0 0.25rem; color: var(--tekst-blagi); }
.klub-pag-info {
  width: 100%; text-align: center; margin-top: 0.5rem;
  color: var(--tekst-blagi); font-size: 0.8rem;
}