/* PRODAJA (2026-11-04, CRO redizajn): ide PREKO partitura.css + udar.css (body.partitura.udar.prodaja).
   Sta se mijenja i zasto (rupe kroz koje je curio novac):
   1. vrh: JEDNO glavno dugme "Pogledajte kurseve i cijene" odmah ispod naslova (prije: 6 jednakih izbora, glavno dugme na dnu);
   2. odmah ispod vrha traka povjerenja (pristup odmah, neograniceno, PayPal/kartica, pomoc licno) - sve tacno, iz FAQ i uslova;
   3. ponuda (oba kursa) odmah ispod vrha, ne poslije 8 ekrana: toplo crveno dugme za kupovinu, hladno crno za demo;
   4. ljepljiva traka za kupovinu na telefonu od prvog ekrana (naslovna.js), a ne tek poslije cijelog slideshowa;
   5. kupovina: "Korak 1 od 2" (kupac zna da je put kratak).
   Bez rokova, odbrojavanja, popusta i izmisljenih brojeva (Goranova pravila). Povratak: dizajn.txt = udar. */

/* ----------------------------------------------------------------------- vrh: jedno glavno dugme ispod naslova -- */
body.prodaja .bina .p-cta { display: grid; gap: 12px; justify-items: start; }
body.prodaja .bina .p-cta-dug { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; max-width: 560px; min-height: 74px; padding: 0 26px;
  border: 0; border-radius: 2px; background: var(--accent); color: #fff; font: 800 clamp(18px, 1.5vw, 21px)/1.15 var(--head); letter-spacing: -.01em; text-align: left; cursor: pointer;
  box-shadow: 0 22px 50px -22px rgba(199, 63, 38, .9); transition: background .2s, color .2s, transform .2s; }
body.prodaja .bina .p-cta-dug span { font-size: 1.35em; line-height: 1; transition: transform .2s; }
body.prodaja .bina .p-cta-dug:hover, body.prodaja .bina .p-cta-dug:focus-visible { background: #fff; color: #0b0b0b; }
body.prodaja .bina .p-cta-dug:hover span { transform: translateX(5px); }
body.prodaja .bina .p-cta-t { max-width: 520px; font-size: 15px; line-height: 1.45; color: #c9c9c9; }
@media (min-width: 761px) {
  body.prodaja .bina .st.b0 { grid-template-rows: auto auto auto auto auto 1fr; }
  body.prodaja .bina .st.b0 .brojac { grid-row: 4; }
  body.prodaja .bina .st.b0 .p-cta { grid-column: 2; grid-row: 5; margin-top: 34px; }
  body.prodaja .bina .st.b0 .u-lica { grid-row: 6; margin-top: 30px; }
}
@media (max-width: 760px) {
  body.prodaja .bina .st.b0 .p-cta { order: 4; margin-top: 22px; }
  body.prodaja .bina .st.b0 .p-cta-dug { min-height: 66px; padding: 0 20px; font-size: 18px; }
  body.prodaja .bina .st.b0 .brojac { order: 5; }
  body.prodaja .bina .st.b0 .u-lica { order: 6; }
  body.prodaja .bina .st.b0 .upiti { order: 7; }
}

/* "Ili počnite besplatno" na vrhu (Goran 2026-11-04: besplatne lekcije na vidno odmah kad udju) */
body.prodaja .bina .p-bespl-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 700 16.5px/1.3 var(--head); color: #fff; text-decoration: underline;
  text-decoration-color: var(--ak2); text-decoration-thickness: 2px; text-underline-offset: 5px; }
body.prodaja .bina .p-bespl-link span { color: var(--ak2); }
body.prodaja .bina .p-bespl-link:hover { color: var(--ak2); }

/* ------------------------------------------------------------- besplatne lekcije ispod vrha: jedna ispod druge -- */
body.prodaja .bina .p-bespl { background: #fff; color: var(--ink); scroll-margin-top: var(--vrh); }
body.prodaja .bina .p-bespl-in { max-width: calc(820px + 2 * var(--g)); margin: 0 auto; padding: clamp(56px, 9vh, 104px) var(--g) clamp(48px, 8vh, 90px); }
body.prodaja .bina .p-bespl h2 { margin: 14px 0 10px; font: 900 clamp(40px, 5.6vw, 76px)/.95 var(--head); letter-spacing: -.05em; color: var(--ink); }
body.prodaja .bina .p-bespl-pod { margin-bottom: 26px; font-size: 17px; color: var(--muted); }
body.prodaja .bina .p-bespl-l { border-top: 2px solid var(--ink); }
body.prodaja .bina .p-bespl-r { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; transition: background .2s, padding .25s; }
body.prodaja .bina .p-bespl-r:hover, body.prodaja .bina .p-bespl-r:focus-visible { background: var(--soft); padding-left: 10px; }
body.prodaja .bina .p-bespl-sl { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; border-top: 3px solid var(--accent); }
body.prodaja .bina .p-bespl-sl img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.prodaja .bina .p-bespl-sl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; }
body.prodaja .bina .p-bespl-t { display: grid; gap: 4px; min-width: 0; }
body.prodaja .bina .p-bespl-t small { font: 700 11.5px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
body.prodaja .bina .p-bespl-t b { font: 800 clamp(19px, 2.2vw, 24px)/1.15 var(--head); letter-spacing: -.025em; }
body.prodaja .bina .p-bespl-t > span { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 520px) { body.prodaja .bina .p-bespl-r { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; } body.prodaja .bina .p-bespl-t > span { display: none; } }

/* --------------------------------------------------------------------------------- traka povjerenja (crna) -- */
body.prodaja .bina .p-povj { background: #0b0b0b; color: #fff; border-top: 1px solid #262626; }
body.prodaja .bina .p-povj-l { display: grid; gap: 0; max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; padding: 8px var(--g); list-style: none; }
body.prodaja .bina .p-povj-l li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid #222; }
body.prodaja .bina .p-povj-l li:first-child { border-top: 0; }
body.prodaja .bina .p-povj-l svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--ak2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.prodaja .bina .p-povj-l span { font-size: 14.5px; line-height: 1.4; color: #b8b8b8; }
body.prodaja .bina .p-povj-l b { display: block; font: 750 16.5px/1.25 var(--head); color: #fff; }
@media (min-width: 900px) {
  body.prodaja .bina .p-povj-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 26px var(--g); }
  body.prodaja .bina .p-povj-l li { padding: 0; border-top: 0; }
}

/* ------------------------------------------------------------------------ ponuda: oba kursa, jedan ispod drugog -- */
body.prodaja .bina .p-kursevi { background: #f3f2ee; color: var(--ink); }
body.prodaja .bina .p-kursevi-in { max-width: calc(820px + 2 * var(--g)); margin: 0 auto; padding: clamp(64px, 11vh, 120px) var(--g); }
body.prodaja .bina .p-kursevi h2 { margin: 14px 0 34px; font: 900 clamp(42px, 6vw, 84px)/.94 var(--head); letter-spacing: -.05em; color: var(--ink); }
body.prodaja .bina .p-kurs { display: grid; gap: 16px; margin-top: 18px; padding: clamp(22px, 4vw, 38px); border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px #dcdad3; }
body.prodaja .bina .p-kurs-glavni { box-shadow: 0 0 0 2px var(--ink), 0 30px 60px -36px rgba(0, 0, 0, .45); border-top: 5px solid var(--accent); }
body.prodaja .bina .p-kurs-oz { font: 700 12.5px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
body.prodaja .bina .p-kurs-za { font: 750 clamp(21px, 2.4vw, 28px)/1.2 var(--head); letter-spacing: -.025em; color: var(--ink); }
body.prodaja .bina .p-kurs-st { display: grid; gap: 9px; list-style: none; }
body.prodaja .bina .p-kurs-st li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; color: #2b2b2b; }
body.prodaja .bina .p-kurs-st li::before { content: ""; position: absolute; left: 0; top: .2em; width: 19px; height: 19px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
body.prodaja .bina .p-kurs-glavni .p-kurs-st li::before { background-color: var(--accent); }
body.prodaja .bina .p-kurs-cij { display: grid; gap: 4px; justify-items: start; padding-top: 14px; border-top: 1px solid #e3e1da; }
body.prodaja .bina .p-kurs-cij b { font: 900 clamp(34px, 4vw, 46px)/1 var(--head); letter-spacing: -.04em; color: var(--green); }
body.prodaja .bina .p-kurs-cij small { font-size: 14px; color: var(--muted); }
body.prodaja .bina .p-kurs-cij .cj-lok { font-size: 16px; }
body.prodaja .bina .p-kurs-upit { font-size: 26px !important; color: var(--ink) !important; }
/* toplo (crveno) = kupovina, hladno (crno) = demo; jedno ispod drugog */
body.prodaja .bina .p-kupi { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 0 24px; border: 0; border-radius: 2px;
  background: var(--accent); color: #fff; font: 800 18.5px/1.2 var(--head); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: background .2s; }
body.prodaja .bina .p-kupi span { font-size: 1.3em; line-height: 1; }
body.prodaja .bina .p-kupi:hover, body.prodaja .bina .p-kupi:focus-visible { background: var(--ink); }
body.prodaja .bina .p-demo { min-height: 54px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink);
  font: 700 16px/1.2 var(--head); cursor: pointer; transition: background .2s, color .2s; }
body.prodaja .bina .p-demo:hover, body.prodaja .bina .p-demo:focus-visible { background: var(--ink); color: #fff; }
body.prodaja .bina .p-kursevi-dno { margin-top: 26px; font-size: 16px; line-height: 1.5; color: var(--muted); }
body.prodaja .bina .p-kursevi-dno a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
body.prodaja .bina .p-kursevi-dno + .p-kursevi-dno { margin-top: 8px; }
body.prodaja .bina .p-app { max-width: 480px; min-height: 54px; margin-top: 10px; }

/* -------------------------------------------------- ljepljiva traka od prvog ekrana: ne smije pokriti druge stvari dolje -- */
body.prodaja.ljep-on .bina .klav { bottom: 88px; }
body.prodaja.ljep-on .bina .klav-nat { bottom: 150px; }
body.prodaja.ljep-on #gcRoot .gc-dug { bottom: 84px; }
/* "Okrenite telefon za veću sliku" (bina.js) ide gore, ispod zaglavlja: dolje su traka za kupovinu i chat */
@media (max-width: 760px) { body.prodaja.ljep-on .bina .okreni { top: calc(var(--vrh) + 12px); bottom: auto; } }

/* ---------------------------------------------------------------------------------------- kupovina: korak 1 od 2 -- */
body.prodaja .p-korak { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--accent); background: #f6f5f1; font-size: 15px; line-height: 1.5; color: #2b2b2b; }
body.prodaja .p-korak b { color: var(--ink); }