{"id":4425,"date":"2024-05-22T11:38:55","date_gmt":"2024-05-22T10:38:55","guid":{"rendered":"https:\/\/nsbi.org.rs\/?page_id=4425"},"modified":"2026-07-29T13:23:20","modified_gmt":"2026-07-29T12:23:20","slug":"biciklograd","status":"publish","type":"page","link":"https:\/\/nsbi.org.rs\/sr\/biciklograd","title":{"rendered":"Biciklograd benefit program"},"content":{"rendered":"\n<!-- Biblioteka za zastavice i pozivne brojeve za telefon -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/css\/intlTelInput.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/js\/intlTelInput.min.js\"><\/script>\n\n<div class=\"nsbi-tabs-wrapper\">\n  \n  <!-- NAVIGACIJA TABOVA -->\n  <div class=\"nsbi-tabs-nav\">\n    <button type=\"button\" class=\"tab-btn active\" data-tab=\"tab-uclani-se\">U\u010dlani se<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-o-biciklogradu\">O Biciklogradu<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-redovne-clanarine\">Redovne \u010dlanarine<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-pogodnosti\">Posebne pogodnosti<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-porodicne-clanarine\">Porodi\u010dne \u010dlanarine<\/button>\n  <\/div>\n\n  <!-- SADR\u017dAJ TABOVA -->\n  <div class=\"nsbi-tabs-content\">\n\n    <!-- 1. TAB: U\u010cLANI SE (FORMA) -->\n    <div id=\"tab-uclani-se\" class=\"tab-pane active\">\n      <div class=\"nsbi-forma-header\">\n        <h2>Prijava za Biciklograd benefit program<\/h2>\n        <p>Popunite formu u nastavku i postanite deo zajednice koja podr\u017eava odr\u017eivu mobilnost!<\/p>\n      <\/div>\n\n      <div id=\"nsbi-form-response\" style=\"display: none; padding: 12px 15px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; font-size: 14px;\"><\/div>\n\n      <form id=\"nsbi_prijavna_forma\" class=\"nsbi-form\" enctype=\"multipart\/form-data\">\n        \n        <!-- PRVI RED: Ime, Email, Telefon -->\n        <div class=\"form-row row-3-cols\">\n          <div class=\"form-group\">\n            <label for=\"ime_prezime\">Ime i prezime nosioca \u010dlanarine *<\/label>\n            <input type=\"text\" id=\"ime_prezime\" name=\"ime_prezime\" required=\"\" placeholder=\"Petar Petrovi\u0107\">\n          <\/div>\n\n          <div class=\"form-group\">\n            <label for=\"email\">E-mail adresa *<\/label>\n            <input type=\"email\" id=\"email\" name=\"email\" required=\"\" placeholder=\"petar@example.com\">\n          <\/div>\n\n          <div class=\"form-group\">\n            <label for=\"telefon\">Broj telefona *<\/label>\n            <input type=\"tel\" id=\"telefon\" name=\"telefon\" required=\"\">\n            <input type=\"hidden\" id=\"puni_telefon\" name=\"puni_telefon\">\n            <small id=\"tel-error\" style=\"color: #d32f2f; display: none; margin-top: 4px; font-size: 12px;\">Unesite ispravan broj telefona.<\/small>\n          <\/div>\n        <\/div>\n\n        <!-- DRUGI RED: Vrsta \u010dlanarine i Povla\u0161\u0107ena \u010dlanarina -->\n        <div class=\"form-row row-2-cols\">\n          <div class=\"form-group\">\n            <label for=\"vrsta_clanarine\">Vrsta \u010dlanarine *<\/label>\n            <select id=\"vrsta_clanarine\" name=\"vrsta_clanarine\" required=\"\">\n              <option value=\"\" disabled=\"\" selected=\"\">Izaberite \u010dlanarinu&#8230;<\/option>\n              <option value=\"Gradski biciklista (osnovna)\">Gradski biciklista (osnovna)<\/option>\n              <option value=\"Bici lider (standard)\">Bici lider (standard)<\/option>\n              <option value=\"Bici heroj (premium)\">Bici heroj (premium)<\/option>\n              <option value=\"Porodi\u010dna \u010dlanarina (Gradski biciklista)\">Porodi\u010dna (Gradski biciklista)<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"form-group\" id=\"povlascena_container\">\n            <label for=\"povlascena_clanarina\">Povla\u0161\u0107ena \u010dlanarina *<\/label>\n            <select id=\"povlascena_clanarina\" name=\"povlascena_clanarina\" required=\"\">\n              <option value=\"Nisam u povla\u0161\u0107enoj kategoriji\" selected=\"\">Nisam u povla\u0161\u0107enoj kategoriji<\/option>\n              <option value=\"Studenti (10%)\">Studenti (10%)<\/option>\n              <option value=\"Penzioneri (10%)\">Penzioneri (10%)<\/option>\n              <option value=\"Nezaposleni (50%)\">Nezaposleni (50%)<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n\n        <!-- BROJ \u010cLANOVA PORODICE -->\n        <div class=\"form-group\" id=\"broj_clanova_container\" style=\"display: none;\">\n          <label for=\"broj_clanova_porodice\">Broj \u010dlanova porodice *<\/label>\n          <select id=\"broj_clanova_porodice\" name=\"broj_clanova_porodice\">\n            <option value=\"2\" selected=\"\">2 \u010dlana<\/option>\n            <option value=\"3\">3 \u010dlana<\/option>\n            <option value=\"4\">4 \u010dlana<\/option>\n          <\/select>\n        <\/div>\n\n        <!-- DINAMI\u010cKA POLJA ZA UNOS \u010cLANOVA PORODICE -->\n        <div id=\"porodica_clanovi_wrapper\" style=\"display: none; background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px dashed var(--nsbi-green); margin-bottom: 20px;\">\n          <h4 style=\"margin-top:0; margin-bottom: 12px; color: var(--nsbi-green); font-size: 15px;\">Podaci o ostalim \u010dlanovima porodice<\/h4>\n          <div id=\"dinamicka_polja_clanova\"><\/div>\n          <!-- Skriveno polje u koje se spajaju svi podaci o \u010dlanovima porodice za slanje na mejl -->\n          <input type=\"hidden\" id=\"porodica_detalji\" name=\"porodica_detalji\" value=\"\">\n        <\/div>\n\n        <!-- POTVRDA POVLA\u0160\u0106ENE KATEGORIJE -->\n        <div class=\"form-group\" id=\"dokument_container\" style=\"display: none;\">\n          <label>Potvrda povla\u0161\u0107ene kategorije *<\/label>\n          <div class=\"file-upload-box\">\n            <input type=\"file\" id=\"dokument_potvrda\" name=\"dokument_potvrda\" accept=\".pdf, .jpg, .jpeg, .png\">\n            <div class=\"upload-content\">\n              <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"upload-icon\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"17 8 12 3 7 8\"><\/polyline><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"><\/line><\/svg>\n              <span class=\"upload-text\" id=\"upload_text_label\">Kliknite ovde ili prevucite dokument (PDF ili sliku)<\/span>\n              <small class=\"upload-hint\">Prihvataju se formati: PDF, JPG, PNG (indeks, \u010dek od penzije ili potvrda NSZZ)<\/small>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- TRAJANJE I CENA -->\n        <div class=\"form-group\" id=\"trajanje_container\" style=\"display: none;\">\n          <label for=\"trajanje_i_cena\">Trajanje i cena *<\/label>\n          <select id=\"trajanje_i_cena\" name=\"trajanje_i_cena\" required=\"\">\n          <\/select>\n        <\/div>\n\n        <!-- TRE\u0106I RED: Vrsta \u010dlanske karte i Mese\u010dni bilten -->\n        <div class=\"form-row row-2-cols\">\n          <div class=\"form-group\">\n            <label for=\"vrsta_karte\">Vrsta \u010dlanske karte *<\/label>\n            <select id=\"vrsta_karte\" name=\"vrsta_karte\" required=\"\">\n              <option value=\"Elektronska (digitalna)\" selected=\"\">Elektronska (digitalna)<\/option>\n              <option value=\"\u0160tampana (fizi\u010dka kartica)\">\u0160tampana (fizi\u010dka kartica)<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"form-group\">\n            <label for=\"bilten\">\u017delite li NSBI mese\u010dni bilten? *<\/label>\n            <select id=\"bilten\" name=\"bilten\" required=\"\">\n              <option value=\"Da, \u017eelim da primam vesti\" selected=\"\">Da, \u017eelim da primam vesti<\/option>\n              <option value=\"Ne, hvala\">Ne, hvala<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n\n        <!-- Napomena -->\n        <div class=\"form-group\">\n          <label for=\"napomena\">Napomena ili poruka<\/label>\n          <textarea id=\"napomena\" name=\"napomena\" rows=\"3\" placeholder=\"Napi\u0161ite dodatne detalje ukoliko postoje...\"><\/textarea>\n        <\/div>\n\n        <!-- Saglasnost -->\n        <div class=\"form-group custom-checkbox-group\">\n          <label class=\"checkbox-container\">\n            <input type=\"checkbox\" id=\"saglasnost\" name=\"saglasnost\" required=\"\">\n            <span class=\"checkmark\"><\/span>\n            <span class=\"checkbox-label-text\">Saglasan\/a sam za obradu unetih podataka u svrhu u\u010dlanjivanja u Biciklograd program. *<\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"form-actions\">\n          <button type=\"submit\" id=\"nsbi-btn-submit\" class=\"btn-nsbi-submit\">U\u010dlani se<\/button>\n        <\/div>\n      <\/form>\n    <\/div>\n\n    <!-- 2. TAB: O BICIKLOGRADU -->\n    <div id=\"tab-o-biciklogradu\" class=\"tab-pane\">\n      <div class=\"info-tab-content\">\n        <h3>O Biciklogradu<\/h3>\n        <p class=\"lead-text\">\n          U\u010dlani se u \u201cBiciklograd\u201d benefit program Novosadske biciklisti\u010dke inicijative jo\u0161 danas i uz simboli\u010dnu godi\u0161nju \u010dlanarinu ostvari mnogobrojne popuste. Budi deo najve\u0107e biciklisti\u010dke zajednice u Srbiji i regionu i iskoristi sve prednosti bicikliranja.\n        <\/p>\n        <div class=\"highlight-box\">\n          <p>Podr\u017eavaju\u0107i na\u0161 rad daje\u0161 podr\u0161ku za bolji biciklisti\u010dki Novi Sad!<\/p>\n        <\/div>\n        <p>\n          Prihode ostvarene \u010dlanarinama kroz \u201cBiciklograd\u201d program Novosadska biciklisti\u010dka inicijativa usmeri\u0107e ka programskim aktivnostima kao \u0161to su edukacija u saobra\u0107aju, istra\u017eivanje, javno zagovaranje, organizovanje javnih doga\u0111aja (Kriti\u010dne mase, tribine, debatni klub, okrugli stolovi, paneli i sli\u010dno) i promocija bicikliranja i infrastrukture u Novom Sadu.\n        <\/p>\n        <p>\n          Tako\u0111e, deo prihoda ostvarenih \u010dlanarinama na\u0161em Udru\u017eenju \u0107e omogu\u0107iti i redovan rad \u2013 zakup kancelarije, teku\u0107e mese\u010dne tro\u0161kove (internet, hosting, struja, komunalije i sl.).\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <!-- 3. TAB: REDOVNE \u010cLANARINE -->\n    <div id=\"tab-redovne-clanarine\" class=\"tab-pane\">\n      <div class=\"clanarine-grid\">\n        <div class=\"clanarina-card\">\n          <div class=\"clanarina-icon\">\n            <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7cb342\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\"><\/circle><circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\"><\/circle><path d=\"M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-3 11.5V14l-3-3 4-3 2 3h2\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"clanarina-title color-gradski\">Gradski biciklista<br><span>(osnovna)<\/span><\/h3>\n          <p class=\"clanarina-desc\">\n            Ovaj nivo \u010dlanarine ti donosi osnovne benefite: <strong>popuste na servis, opremu i delove<\/strong> kod na\u0161ih partnera.\n          <\/p>\n          <div class=\"clanarina-prices\">\n            <div class=\"price-item\"><span class=\"arrow\">\u00bb<\/span> Godi\u0161nja 1.500 RSD<\/div>\n            <div class=\"price-item\"><span class=\"arrow\">\u00bb<\/span> Dvogodi\u0161nja 2.500 RSD<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"clanarina-card\">\n          <div class=\"clanarina-icon\">\n            <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#388e3c\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\"><\/circle><circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\"><\/circle><path d=\"M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-3 11.5V14l-3-3 4-3 2 3h2\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"clanarina-title color-lider\">Bici lider<br><span>(standard)<\/span><\/h3>\n          <p class=\"clanarina-desc\">\n            Bici lider kao drugi nivo \u010dlanarina, <strong>pored benefita iz prethodnog nivoa<\/strong>, donosi ti i <strong>poklon bici nalepnicu za tvoj bajs i bici \u0161olju<\/strong>.\n          <\/p>\n          <div class=\"clanarina-prices\">\n            <div class=\"price-item\"><span class=\"arrow\">\u00bb<\/span> Godi\u0161nja 2.500 RSD<\/div>\n            <div class=\"price-item\"><span class=\"arrow\">\u00bb<\/span> Dvogodi\u0161nja 4.000 RSD<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"clanarina-card\">\n          <div class=\"clanarina-icon\">\n            <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1b5e20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\"><\/circle><circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\"><\/circle><path d=\"M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-3 11.5V14l-3-3 4-3 2 3h2\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"clanarina-title color-heroj\">Bici heroj<br><span>(premium)<\/span><\/h3>\n          <p class=\"clanarina-desc\">\n            Bici heroj, najvi\u0161i nivo, <strong>pored svih benefita i poklona iz prethodna dva nivoa<\/strong>, donosi ti posebne poklone \u2013 <strong>bici bed\u017e i bici ceger<\/strong>.\n          <\/p>\n          <div class=\"clanarina-prices\">\n            <div class=\"price-item\"><span class=\"arrow\">\u00bb<\/span> Godi\u0161nja 3.500 RSD<\/div>\n            <div class=\"price-item\"><span class=\"arrow\">\u00bb<\/span> Dvogodi\u0161nja 6.000 RSD<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- 4. TAB: POSEBNE POGODNOSTI -->\n    <div id=\"tab-pogodnosti\" class=\"tab-pane\">\n      <div class=\"info-tab-content\">\n        <h3>Posebne pogodnosti<\/h3>\n        <p class=\"lead-text\">\n          Pripremili smo posebne popuste na \u010dlanarine za odre\u0111ene kategorije stanovni\u0161tva, kao i posebne grupne pakete za kompanije.\n        <\/p>\n        \n        <div style=\"background: #fdfdfd; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin: 20px 0;\">\n          <h4 style=\"margin-top: 0; color: var(--nsbi-green);\">Povla\u0161\u0107ene kategorije:<\/h4>\n          <ul style=\"padding-left: 20px; line-height: 1.8;\">\n            <li><strong>Studenti:<\/strong> Ostvaruju <strong>10% popusta<\/strong> na sve pojedina\u010dne \u010dlanarine (uz prilo\u017een indeks ili potvrdu sa fakulteta).<\/li>\n            <li><strong>Penzioneri:<\/strong> Ostvaruju <strong>10% popusta<\/strong> na sve pojedina\u010dne \u010dlanarine (uz prilo\u017een penzioni \u010dek ili penzionersku karticu).<\/li>\n            <li><strong>Nezaposleni:<\/strong> Ostvaruju \u010dak <strong>50% popusta<\/strong> na sve pojedina\u010dne \u010dlanarine (uz prilo\u017eenu potvrdu sa evidencije NSZZ).<\/li>\n          <\/ul>\n        <\/div>\n        \n        <p>\n          Kompanije tako\u0111e mogu ostvariti posebne popuste na grupne \u010dlanarine u Biciklogradu za svoje zaposlene. Kako da motivi\u0161e\u0161 zaposlene da vi\u0161e koriste bicikl i obezbedi\u0161 im Biciklograd benefit karticu, saznaj na na\u0161em sajtu.\n        <\/p>\n\n        <div class=\"link-btn-wrapper\" style=\"margin-top: 25px;\">\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/grupne-clanarine-za-kompanije\" target=\"_blank\" class=\"nsbi-btn-link\">\n            Grupne \u010dlanarine za kompanije \u2192\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- 5. TAB: PORODI\u010cNE \u010cLANARINE -->\n    <div id=\"tab-porodicne-clanarine\" class=\"tab-pane\">\n      <div class=\"info-tab-content\">\n        <h3>Porodi\u010dne \u010dlanarine<\/h3>\n        <p class=\"lead-text\">\n          Vozite bicikl zajedno? Pripremili smo posebne pogodnosti i pristupa\u010dnije cene za vi\u0161e\u010dlane porodice kroz na\u0161 osnovni paket <strong>Gradski biciklista<\/strong>.\n        <\/p>\n        \n        <!-- DODATA NAPOMENA O PUNOLETSTVU -->\n        <div class=\"highlight-box\" style=\"background-color: #e8f5e9; border-left: 4px solid var(--nsbi-green); font-weight: normal;\">\n          <strong>Va\u017ena napomena:<\/strong> Porodi\u010dne \u010dlanarine se odnose <strong>isklju\u010divo na punoletne \u010dlanove porodice<\/strong>. Porodi\u010dni paket ne obuhvata maloletne \u010dlanove, jer roditelji\/staratelji koji ostvare \u010dlanstvo mogu u ime svoje maloletne dece direktno koristiti \u010dlansku karticu za ostvarivanje popusta kod na\u0161ih partnera.\n        <\/div>\n\n        <div class=\"clanarine-grid\" style=\"margin-top: 20px;\">\n          <div class=\"clanarina-card\" style=\"text-align: left;\">\n            <div class=\"clanarina-icon\" style=\"text-align: center;\">\n              <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2e7d32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg>\n            <\/div>\n            <h3 class=\"clanarina-title color-lider\" style=\"text-align: center;\">Porodi\u010dni paketi<br><span>(Gradski biciklista)<\/span><\/h3>\n            <p class=\"clanarina-desc\">\n              Svi prijavljeni punoletni \u010dlanovi porodice ostvaruju pun pristup svim popustima na servis, opremu i delove kod na\u0161ih partnera. Cena zavisi od broja \u010dlanova porodice:\n            <\/p>\n            \n            <div class=\"clanarina-prices\">\n              <div class=\"price-item\" style=\"margin-bottom: 12px;\">\n                <strong>2 \u010cLANA:<\/strong><br>\n                <span class=\"arrow\">\u00bb<\/span> Godi\u0161nja: <strong>2.500 RSD<\/strong> | Dvogodi\u0161nja: <strong>4.000 RSD<\/strong>\n              <\/div>\n              <div class=\"price-item\" style=\"margin-bottom: 12px;\">\n                <strong>3 \u010cLANA:<\/strong><br>\n                <span class=\"arrow\">\u00bb<\/span> Godi\u0161nja: <strong>3.500 RSD<\/strong> | Dvogodi\u0161nja: <strong>6.000 RSD<\/strong>\n              <\/div>\n              <div class=\"price-item\">\n                <strong>4 \u010cLANA:<\/strong><br>\n                <span class=\"arrow\">\u00bb<\/span> Godi\u0161nja: <strong>4.500 RSD<\/strong> | Dvogodi\u0161nja: <strong>8.000 RSD<\/strong>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div style=\"margin-top: 25px; text-align: center;\">\n          <button type=\"button\" id=\"btn-prijavi-porodicu\" class=\"nsbi-btn-link\" style=\"border:none; cursor:pointer;\">\n            Prijavi porodicu odmah \u2192\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- JAVASCRIPT LOGIKA -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n  \/\/ --- LOGIKA ZA PREBACIVANJE TABOVA ---\n  const tabButtons = document.querySelectorAll('.tab-btn');\n  const tabPanes = document.querySelectorAll('.tab-pane');\n\n  function preklopiTab(targetTabId) {\n    tabPanes.forEach(pane => pane.classList.remove('active'));\n    tabButtons.forEach(btn => btn.classList.remove('active'));\n\n    const activePane = document.getElementById(targetTabId);\n    if(activePane) activePane.classList.add('active');\n\n    const activeBtn = document.querySelector(`.tab-btn[data-tab=\"${targetTabId}\"]`);\n    if(activeBtn) activeBtn.classList.add('active');\n  }\n\n  tabButtons.forEach(button => {\n    button.addEventListener('click', function(e) {\n      e.preventDefault();\n      const tabId = this.getAttribute('data-tab');\n      preklopiTab(tabId);\n    });\n  });\n\n  const btnPrijaviPorodicu = document.getElementById('btn-prijavi-porodicu');\n  if(btnPrijaviPorodicu) {\n    btnPrijaviPorodicu.addEventListener('click', function() {\n      preklopiTab('tab-uclani-se');\n      const vrSelect = document.getElementById('vrsta_clanarine');\n      vrSelect.value = 'Porodi\u010dna \u010dlanarina (Gradski biciklista)';\n      azurirajCene();\n    });\n  }\n\n  \/\/ --- TELEFONSKI INPUT ---\n  const phoneInputField = document.querySelector(\"#telefon\");\n  let phoneInput = null;\n  if(phoneInputField) {\n    phoneInput = window.intlTelInput(phoneInputField, {\n      initialCountry: \"rs\",\n      preferredCountries: [\"rs\", \"ba\", \"hr\", \"me\", \"mk\", \"si\"],\n      separateDialCode: true,\n      utilsScript: \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/js\/utils.js\",\n    });\n  }\n\n  \/\/ --- LOGIKA FORME I CENA ---\n  const vrSelect = document.getElementById('vrsta_clanarine');\n  const povSelect = document.getElementById('povlascena_clanarina');\n  const brojClanovaSelect = document.getElementById('broj_clanova_porodice');\n  const dokInput = document.getElementById('dokument_potvrda');\n\n  if(vrSelect) vrSelect.addEventListener('change', azurirajCene);\n  if(povSelect) povSelect.addEventListener('change', proveriPovlascenuKategoriju);\n  if(brojClanovaSelect) brojClanovaSelect.addEventListener('change', generisiPoljaZaClanove);\n  if(dokInput) dokInput.addEventListener('change', function() { prikaziNazivFajla(this); });\n\n  function azurirajCene() {\n    const vrsta = document.getElementById('vrsta_clanarine').value;\n    const trajanjeContainer = document.getElementById('trajanje_container');\n    const trajanjeSelect = document.getElementById('trajanje_i_cena');\n    const brojClanovaContainer = document.getElementById('broj_clanova_container');\n    const porodicaWrapper = document.getElementById('porodica_clanovi_wrapper');\n    const povlascenaContainer = document.getElementById('povlascena_container');\n\n    trajanjeSelect.innerHTML = '';\n    let opcije = [];\n\n    if (vrsta.includes('Porodi\u010dna')) {\n      brojClanovaContainer.style.display = 'block';\n      porodicaWrapper.style.display = 'block';\n      povlascenaContainer.style.display = 'none';\n      document.getElementById('povlascena_clanarina').value = \"Nisam u povla\u0161\u0107enoj kategoriji\";\n      proveriPovlascenuKategoriju();\n      \n      generisiPoljaZaClanove();\n      azurirajPorodicneCene();\n      return;\n    } else {\n      brojClanovaContainer.style.display = 'none';\n      porodicaWrapper.style.display = 'none';\n      povlascenaContainer.style.display = 'block';\n      document.querySelectorAll('.porodica-input').forEach(inp => inp.required = false);\n    }\n\n    if (vrsta.includes('Gradski')) {\n      opcije = [\n        { text: 'Godi\u0161nja \u2013 1.500 RSD', value: 'Gradski - Godi\u0161nja (1500 RSD)' },\n        { text: 'Dvogodi\u0161nja \u2013 2.500 RSD', value: 'Gradski - Dvogodi\u0161nja (2500 RSD)' }\n      ];\n    } else if (vrsta.includes('lider')) {\n      opcije = [\n        { text: 'Godi\u0161nja \u2013 2.500 RSD', value: 'Bici lider - Godi\u0161nja (2500 RSD)' },\n        { text: 'Dvogodi\u0161nja \u2013 4.000 RSD', value: 'Bici lider - Dvogodi\u0161nja (4000 RSD)' }\n      ];\n    } else if (vrsta.includes('heroj')) {\n      opcije = [\n        { text: 'Godi\u0161nja \u2013 3.500 RSD', value: 'Bici heroj - Godi\u0161nja (3500 RSD)' },\n        { text: 'Dvogodi\u0161nja \u2013 6.000 RSD', value: 'Bici heroj - Dvogodi\u0161nja (6000 RSD)' }\n      ];\n    }\n\n    if (opcije.length > 0) {\n      opcije.forEach(opt => {\n        const el = document.createElement('option');\n        el.value = opt.value;\n        el.textContent = opt.text;\n        trajanjeSelect.appendChild(el);\n      });\n      trajanjeContainer.style.display = 'block';\n    } else {\n      trajanjeContainer.style.display = 'none';\n    }\n  }\n\n  function azurirajPorodicneCene() {\n    const brojClanova = document.getElementById('broj_clanova_porodice').value;\n    const trajanjeContainer = document.getElementById('trajanje_container');\n    const trajanjeSelect = document.getElementById('trajanje_i_cena');\n\n    trajanjeSelect.innerHTML = '';\n    let opcije = [];\n\n    if (brojClanova === \"2\") {\n      opcije = [\n        { text: '2 \u010dlana - Godi\u0161nja (2.500 RSD)', value: 'Porodi\u010dna 2 \u010dlana - Godi\u0161nja (2500 RSD)' },\n        { text: '2 \u010dlana - Dvogodi\u0161nja (4.000 RSD)', value: 'Porodi\u010dna 2 \u010dlana - Dvogodi\u0161nja (4000 RSD)' }\n      ];\n    } else if (brojClanova === \"3\") {\n      opcije = [\n        { text: '3 \u010dlana - Godi\u0161nja (3.500 RSD)', value: 'Porodi\u010dna 3 \u010dlana - Godi\u0161nja (3500 RSD)' },\n        { text: '3 \u010dlana - Dvogodi\u0161nja (6.000 RSD)', value: 'Porodi\u010dna 3 \u010dlana - Dvogodi\u0161nja (6000 RSD)' }\n      ];\n    } else if (brojClanova === \"4\") {\n      opcije = [\n        { text: '4 \u010dlana - Godi\u0161nja (4.500 RSD)', value: 'Porodi\u010dna 4 \u010dlana - Godi\u0161nja (4500 RSD)' },\n        { text: '4 \u010dlana - Dvogodi\u0161nja (8.000 RSD)', value: 'Porodi\u010dna 4 \u010dlana - Dvogodi\u0161nja (8000 RSD)' }\n      ];\n    }\n\n    opcije.forEach(opt => {\n      const el = document.createElement('option');\n      el.value = opt.value;\n      el.textContent = opt.text;\n      trajanjeSelect.appendChild(el);\n    });\n    trajanjeContainer.style.display = 'block';\n  }\n\n  function generisiPoljaZaClanove() {\n    const broj = parseInt(document.getElementById('broj_clanova_porodice').value);\n    const kontejner = document.getElementById('dinamicka_polja_clanova');\n    kontejner.innerHTML = '';\n\n    for (let i = 1; i < broj; i++) {\n      const row = document.createElement('div');\n      row.className = 'form-row row-2-cols';\n      row.style.marginBottom = '10px';\n\n      row.innerHTML = `\n        <div class=\"form-group\" style=\"margin-bottom:8px;\">\n          <label style=\"font-size:12px;\">\u010clan ${i+1}: Ime i prezime *<\/label>\n          <input type=\"text\" name=\"clan_${i+1}_ime_prezime\" class=\"porodica-input clan-ime\" required placeholder=\"Ime i prezime\">\n        <\/div>\n        <div class=\"form-group\" style=\"margin-bottom:8px;\">\n          <label style=\"font-size:12px;\">\u010clan ${i+1}: Godi\u0161te *<\/label>\n          <input type=\"number\" name=\"clan_${i+1}_godiste\" class=\"porodica-input clan-godiste\" min=\"1930\" max=\"2026\" required placeholder=\"Npr. 1990\">\n        <\/div>\n      `;\n      kontejner.appendChild(row);\n    }\n\n    azurirajPorodicneCene();\n  }\n\n  \/\/ SPOJ SVE \u010cLANOVE PORODICE U JEDAN TEKST ZA MEJL\n  function prikupiPorodicnePodatke() {\n    const vrsta = document.getElementById('vrsta_clanarine').value;\n    const porodicaDetaljiInput = document.getElementById('porodica_detalji');\n    \n    if (vrsta.includes('Porodi\u010dna')) {\n      const imena = document.querySelectorAll('.clan-ime');\n      const godista = document.querySelectorAll('.clan-godiste');\n      let detaljiArray = [];\n\n      imena.forEach((elem, index) => {\n        const imeVal = elem.value.trim();\n        const godVal = godista[index] ? godista[index].value.trim() : '';\n        if (imeVal) {\n          detaljiArray.push(`\u010clan ${index + 2}: ${imeVal} (${godVal}. godi\u0161te)`);\n        }\n      });\n\n      porodicaDetaljiInput.value = detaljiArray.join('; ');\n    } else {\n      porodicaDetaljiInput.value = '';\n    }\n  }\n\n  function proveriPovlascenuKategoriju() {\n    const povlascena = document.getElementById('povlascena_clanarina').value;\n    const dokContainer = document.getElementById('dokument_container');\n    const dokInput = document.getElementById('dokument_potvrda');\n\n    if (!povlascena.includes('Nisam u povla\u0161\u0107enoj')) {\n      dokContainer.style.display = 'block';\n      dokInput.required = true;\n    } else {\n      dokContainer.style.display = 'none';\n      dokInput.required = false;\n      dokInput.value = '';\n      document.getElementById('upload_text_label').textContent = 'Kliknite ovde ili prevucite dokument (PDF ili sliku)';\n    }\n  }\n\n  function prikaziNazivFajla(input) {\n    const label = document.getElementById('upload_text_label');\n    if (input.files && input.files[0]) {\n      label.textContent = 'Izabran fajl: ' + input.files[0].name;\n      label.style.fontWeight = 'bold';\n      label.style.color = '#2e7d32';\n    } else {\n      label.textContent = 'Kliknite ovde ili prevucite dokument (PDF ili sliku)';\n      label.style.fontWeight = 'normal';\n      label.style.color = '#444';\n    }\n  }\n\n  \/\/ --- SLANJE FORME ---\n  const prijavnaForma = document.getElementById('nsbi_prijavna_forma');\n  if(prijavnaForma) {\n    prijavnaForma.addEventListener('submit', function(e) {\n      e.preventDefault();\n\n      \/\/ Prikupi sve \u010dlanove porodice u jedno polje pre slanja\n      prikupiPorodicnePodatke();\n\n      const errorMsg = document.getElementById(\"tel-error\");\n      const fullPhoneInput = document.getElementById(\"puni_telefon\");\n      const responseBox = document.getElementById(\"nsbi-form-response\");\n      const submitBtn = document.getElementById(\"nsbi-btn-submit\");\n\n      if (phoneInput && !phoneInput.isValidNumber()) {\n        errorMsg.style.display = \"block\";\n        phoneInputField.classList.add(\"input-error\");\n        return;\n      } else if(phoneInput) {\n        errorMsg.style.display = \"none\";\n        phoneInputField.classList.remove(\"input-error\");\n        fullPhoneInput.value = phoneInput.getNumber();\n      }\n\n      submitBtn.disabled = true;\n      submitBtn.innerText = \"Slanje u toku...\";\n      responseBox.style.display = \"none\";\n\n      const formData = new FormData(this);\n      formData.append('action', 'posalji_nsbi_prijavu');\n\n      const ajaxUrl = window.location.origin + '\/wp-admin\/admin-ajax.php';\n\n      fetch(ajaxUrl, {\n        method: 'POST',\n        body: formData\n      })\n      .then(response => response.json())\n      .then(data => {\n        responseBox.style.display = \"block\";\n        if (data.success) {\n          responseBox.style.backgroundColor = \"#e8f5e9\";\n          responseBox.style.color = \"#2e7d32\";\n          responseBox.style.border = \"1px solid #a5d6a7\";\n          responseBox.innerHTML = data.data.message;\n          \n          prijavnaForma.reset();\n          document.getElementById('trajanje_container').style.display = 'none';\n          document.getElementById('dokument_container').style.display = 'none';\n          document.getElementById('broj_clanova_container').style.display = 'none';\n          document.getElementById('porodica_clanovi_wrapper').style.display = 'none';\n        } else {\n          responseBox.style.backgroundColor = \"#ffebee\";\n          responseBox.style.color = \"#c62828\";\n          responseBox.style.border = \"1px solid #ef9a9a\";\n          responseBox.innerHTML = data.data.message || \"Do\u0161lo je do gre\u0161ke. Poku\u0161ajte ponovo.\";\n        }\n      })\n      .catch(error => {\n        responseBox.style.display = \"block\";\n        responseBox.style.backgroundColor = \"#ffebee\";\n        responseBox.style.color = \"#c62828\";\n        responseBox.style.border = \"1px solid #ef9a9a\";\n        responseBox.innerHTML = \"Do\u0161lo je do gre\u0161ke u komunikaciji sa serverom. Poku\u0161ajte ponovo.\";\n      })\n      .finally(() => {\n        submitBtn.disabled = false;\n        submitBtn.innerText = \"U\u010dlani se\";\n      });\n    });\n  }\n\n});\n<\/script>\n\n<!-- STILOVI (CSS) -->\n<style>\n  :root {\n    --nsbi-green: #2e7d32;\n    --nsbi-green-dark: #1b5e20;\n    --nsbi-green-light: #f1f8f1;\n    --nsbi-green-border: #a5d6a7;\n  }\n\n  .nsbi-tabs-wrapper {\n    max-width: 950px;\n    margin: 30px auto;\n    font-family: 'Open Sans', Arial, sans-serif;\n    color: #2c3e50;\n  }\n\n  .nsbi-tabs-nav {\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    border-bottom: 3px solid var(--nsbi-green);\n    margin-bottom: 0;\n    width: 100%;\n  }\n\n  .tab-btn {\n    flex: 1 1 0px;\n    text-align: center;\n    background-color: #f5f5f5;\n    border: 1px solid #e0e0e0;\n    border-bottom: none;\n    padding: 12px 6px;\n    font-size: 14px;\n    font-weight: 700;\n    color: #555;\n    cursor: pointer;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n  }\n\n  .tab-btn:hover {\n    background-color: var(--nsbi-green-light);\n    color: var(--nsbi-green);\n  }\n\n  .tab-btn.active {\n    background-color: var(--nsbi-green);\n    color: #ffffff;\n    border-color: var(--nsbi-green);\n  }\n\n  .nsbi-tabs-content {\n    background: #ffffff;\n    border: 2px solid #e0e0e0;\n    border-top: none;\n    padding: 30px;\n    border-bottom-left-radius: 12px;\n    border-bottom-right-radius: 12px;\n    box-shadow: 0 8px 24px rgba(0,0,0,0.05);\n  }\n\n  .tab-pane {\n    display: none;\n  }\n\n  .tab-pane.active {\n    display: block;\n    animation: fadeIn 0.3s ease;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .clanarine-grid {\n    display: flex;\n    gap: 20px;\n    justify-content: space-between;\n  }\n\n  .clanarina-card {\n    flex: 1;\n    background: #ffffff;\n    border: 1px solid #f0f0f0;\n    padding: 20px;\n    border-radius: 10px;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .clanarina-card:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 6px 18px rgba(0,0,0,0.08);\n  }\n\n  .clanarina-icon { margin-bottom: 12px; }\n\n  .clanarina-title {\n    font-size: 19px;\n    font-weight: 800;\n    line-height: 1.2;\n    margin: 0 0 14px 0;\n  }\n\n  .color-gradski { color: #8bc34a; }\n  .color-lider { color: #388e3c; }\n  .color-heroj { color: #1b5e20; }\n\n  .clanarina-title span { font-size: 15px; font-weight: 600; }\n\n  .clanarina-desc {\n    font-size: 13.5px;\n    color: #666;\n    line-height: 1.5;\n    margin-bottom: 20px;\n    flex-grow: 1;\n  }\n\n  .clanarina-prices {\n    width: 100%;\n    text-align: left;\n    border-top: 1px dashed #e0e0e0;\n    padding-top: 12px;\n  }\n\n  .price-item {\n    font-size: 14px;\n    font-weight: 700;\n    color: #388e3c;\n    margin-bottom: 6px;\n  }\n\n  .price-item .arrow { font-weight: 900; margin-right: 4px; }\n\n  .info-tab-content h3 { color: var(--nsbi-green); margin-top: 0; font-size: 22px; }\n  .lead-text { font-size: 16px; line-height: 1.6; font-weight: 600; color: #333; }\n\n  .highlight-box {\n    background-color: var(--nsbi-green-light);\n    border-left: 4px solid var(--nsbi-green);\n    padding: 12px 18px;\n    font-weight: 700;\n    color: var(--nsbi-green-dark);\n    margin: 18px 0;\n    border-radius: 4px;\n  }\n\n  .nsbi-btn-link {\n    display: inline-block;\n    background-color: var(--nsbi-green);\n    color: #ffffff !important;\n    padding: 12px 20px;\n    border-radius: 6px;\n    font-weight: 700;\n    text-decoration: none !important;\n    transition: background-color 0.2s ease;\n  }\n\n  .nsbi-btn-link:hover {\n    background-color: var(--nsbi-green-dark);\n  }\n\n  .nsbi-forma-header {\n    border-bottom: 2px dashed #e0e0e0;\n    padding-bottom: 15px;\n    margin-bottom: 25px;\n  }\n\n  .nsbi-forma-header h2 { margin: 0 0 8px 0; color: var(--nsbi-green); font-size: 22px; }\n  .nsbi-forma-header p { margin: 0; color: #666; font-size: 14px; }\n\n  .form-row { display: flex; gap: 15px; margin-bottom: 15px; }\n  .row-3-cols .form-group, .row-2-cols .form-group { flex: 1; }\n  .form-group { margin-bottom: 18px; }\n  .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: #333; }\n\n  .nsbi-form input[type=\"text\"],\n  .nsbi-form input[type=\"email\"],\n  .nsbi-form input[type=\"tel\"],\n  .nsbi-form input[type=\"number\"],\n  .nsbi-form select,\n  .nsbi-form textarea {\n    width: 100%;\n    padding: 11px 14px;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    box-sizing: border-box;\n    font-size: 14px;\n    color: #1a1a1a !important;\n    background-color: #ffffff !important;\n  }\n\n  .iti { width: 100%; }\n  .iti__country-list { color: #1a1a1a !important; background-color: #ffffff !important; z-index: 9999 !important; }\n\n  .file-upload-box {\n    position: relative;\n    border: 2px dashed var(--nsbi-green);\n    background-color: var(--nsbi-green-light);\n    border-radius: 8px;\n    padding: 20px;\n    text-align: center;\n    cursor: pointer;\n  }\n  .file-upload-box input[type=\"file\"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }\n  .upload-content { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }\n\n  .custom-checkbox-group { margin-top: 20px; }\n  .checkbox-container { display: flex; align-items: flex-start; position: relative; padding-left: 32px; cursor: pointer; font-size: 14px; }\n  .checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }\n  .checkmark { position: absolute; top: 1px; left: 0; height: 20px; width: 20px; background-color: #fff; border: 2px solid #ccc; border-radius: 4px; }\n  .checkbox-container input:checked ~ .checkmark { background-color: var(--nsbi-green); border-color: var(--nsbi-green); }\n  .checkmark:after { content: \"\"; position: absolute; display: none; }\n  .checkbox-container input:checked ~ .checkmark:after { display: block; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }\n\n  .btn-nsbi-submit {\n    background-color: var(--nsbi-green);\n    color: #ffffff !important;\n    padding: 14px 32px;\n    border: none;\n    border-radius: 6px;\n    font-size: 16px;\n    font-weight: 700;\n    cursor: pointer;\n    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);\n  }\n  .btn-nsbi-submit:hover { background-color: var(--nsbi-green-dark); }\n\n  @media (max-width: 768px) {\n    .nsbi-tabs-nav {\n      flex-direction: column;\n      border-bottom: none;\n      gap: 4px;\n    }\n    .tab-btn {\n      border-radius: 6px;\n      border: 1px solid #ccc;\n      padding: 10px;\n    }\n    .clanarine-grid { flex-direction: column; }\n    .form-row { flex-direction: column; gap: 0; }\n    .nsbi-tabs-content { padding: 18px; }\n    .btn-nsbi-submit { width: 100%; }\n    .link-btn-wrapper { flex-direction: column; }\n    .nsbi-btn-link { text-align: center; }\n  }\n<\/style>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-327bfcc6\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>U\u010dlani se O Biciklogradu Redovne \u010dlanarine Posebne pogodnosti Porodi\u010dne \u010dlanarine Prijava za Biciklograd benefit program Popunite formu u nastavku i postanite deo zajednice koja podr\u017eava odr\u017eivu mobilnost! Ime i prezime&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-4425","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"NSBI","author_link":"https:\/\/nsbi.org.rs\/sr\/author\/nsbi"},"uagb_comment_info":0,"uagb_excerpt":"U\u010dlani se O Biciklogradu Redovne \u010dlanarine Posebne pogodnosti Porodi\u010dne \u010dlanarine Prijava za Biciklograd benefit program Popunite formu u nastavku i postanite deo zajednice koja podr\u017eava odr\u017eivu mobilnost! Ime i prezime...","_links":{"self":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/4425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/comments?post=4425"}],"version-history":[{"count":104,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/4425\/revisions"}],"predecessor-version":[{"id":9531,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/4425\/revisions\/9531"}],"wp:attachment":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/media?parent=4425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}